asdf

src/components/home/Proof.astro

@@ -1,8 +1,22 @@
 ---
+import { getImage } from 'astro:assets';
 import { t, type Lang } from '../../i18n/ui';
+import PartnerLogo from './PartnerLogo.astro';
+import incubator from '../../assets/partners/xg-incubator.webp';
+import aloe from '../../assets/partners/xg-aloe.webp';
+import passau from '../../assets/partners/university-of-passau.webp';
 interface Props { lang: Lang }
 const { lang } = Astro.props;
 const ui = t(lang);
+
+/* The partner logos as on ciphercell.de (see PartnerLogo.astro for the two states). `h` balances
+   optical size: the incubator wordmark is long and thin, the other two carry a mark. */
+const roles = ui.proof.partnerRoles;
+const logos = await Promise.all([
+  { name: 'xG-Incubator', role: roles.incubator, src: incubator, h: 'var(--space-5)' },
+  { name: 'xG-ALOE', role: roles.aloe, src: aloe, h: 'var(--space-7)' },
+  { name: lang === 'de' ? 'Universität Passau' : 'University of Passau', role: roles.passau, src: passau, h: 'var(--space-7)' },
+].map(async (l) => ({ ...l, url: (await getImage({ src: l.src, format: 'webp' })).src })));
 ---
 <section class="section proof" aria-labelledby="proof-title">
   <div class="container grid">
@@ -15,6 +29,34 @@ const ui = t(lang);
         </li>
       ))}
     </ul>
+
+    <div class="partners">
+      <p class="small muted partners__label" id="partners-label">{ui.proof.partners}</p>
+      <ul class="partners__list" role="list" aria-labelledby="partners-label">
+        {logos.map((l) => (
+          <li class="partners__item" data-partner>
+            <PartnerLogo name={l.name} src={l.src} url={l.url} h={l.h} />
+          </li>
+        ))}
+      </ul>
+    </div>
+
+    {/* Variant B, for comparison: one column per partner across the full width, with its role.
+        Keep one of the two and delete the other. */}
+    <div class="partners-b">
+      <p class="small muted" id="partners-b-label">{ui.proof.partners}</p>
+      <ul class="partners-b__list" role="list" aria-labelledby="partners-b-label">
+        {logos.map((l) => (
+          <li class="partners-b__item" data-partner>
+            <PartnerLogo name={l.name} src={l.src} url={l.url} h={l.h} />
+            <p class="partners-b__text">
+              <span class="partners-b__name">{l.name}</span>
+              <span class="small partners-b__role">{l.role}</span>
+            </p>
+          </li>
+        ))}
+      </ul>
+    </div>
   </div>
 </section>
 
@@ -31,9 +73,63 @@ const ui = t(lang);
   .proof__item:last-child { border-bottom: var(--hairline) solid var(--line); }
   .proof__name { font-weight: var(--weight-medium); }
   .proof__body { max-width: 30em; }
+
+  .partners {
+    grid-column: 1 / -1;
+    margin-top: var(--space-9);
+    display: grid;
+    gap: var(--space-5);
+  }
+  .partners__list {
+    display: grid;
+    border-top: var(--hairline) solid var(--line);
+  }
+  .partners__item {
+    display: flex;
+    align-items: center;
+    min-height: var(--space-9);
+    padding: var(--space-5) var(--space-4);
+    border-bottom: var(--hairline) solid var(--line);
+  }
+  /* Hover answers the pointer with the logo's own ground: night, original colours. */
+  [data-partner] { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
+  @media (hover: hover) {
+    [data-partner]:hover { background-color: var(--night); color: var(--ink-on-night); }
+  }
+  @media (prefers-reduced-motion: reduce) { [data-partner] { transition: none; } }
+
+  /* Variant B */
+  .partners-b {
+    grid-column: 1 / -1;
+    margin-top: var(--space-9);
+    display: grid;
+    gap: var(--space-5);
+  }
+  .partners-b__list { display: grid; border-top: var(--hairline) solid var(--line); }
+  .partners-b__item {
+    display: grid;
+    align-content: space-between;
+    gap: var(--space-7);
+    min-height: calc(var(--space-9) * 2.5);
+    padding: var(--space-6) var(--space-5);
+    border-bottom: var(--hairline) solid var(--line);
+  }
+  .partners-b__text { display: grid; gap: var(--space-1); }
+  .partners-b__name { font-weight: var(--weight-medium); }
+  .partners-b__role { color: var(--ink-muted); transition: color var(--dur-fast) var(--ease); }
+  @media (hover: hover) {
+    .partners-b__item:hover .partners-b__role { color: var(--ink-muted-on-night); }
+  }
+
   @media (min-width: 48rem) {
     .proof__title { grid-column: 1 / span 6; }
     .proof__list { grid-column: 7 / span 6; }
     .proof__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--gap); }
+    .partners { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
+    .partners__label { grid-column: 1 / span 6; padding-top: var(--space-5); }
+    .partners__list { grid-column: 7 / span 6; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
+    .partners-b__list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--hairline) solid var(--line); }
+    .partners-b__item { border-bottom: 0; }
+    .partners-b__item + .partners-b__item { border-left: var(--hairline) solid var(--line); }
   }
 </style>