homepage_relaunch/src/components/home/Proof.astro

---
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">
    <h2 id="proof-title" class="h2 proof__title">{ui.proof.title}</h2>
    <ul class="proof__list" role="list">
      {ui.proof.items.map((p) => (
        <li class="proof__item">
          <p class="proof__name">{p.name}</p>
          <p class="muted proof__body">{p.body}</p>
        </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>

<style>
  .proof { border-top: var(--hairline) solid var(--line); }
  .proof__title { grid-column: 1 / -1; }
  .proof__list { grid-column: 1 / -1; }
  .proof__item {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-5);
    border-top: var(--hairline) solid var(--line);
  }
  .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>