initial

src/components/home/Quote.astro

@@ -0,0 +1,62 @@
+---
+import { Picture } from 'astro:assets';
+import felix from '../../assets/images/people/felix.png';
+import { localePath, t, type Lang } from '../../i18n/ui';
+interface Props { lang: Lang }
+const { lang } = Astro.props;
+const ui = t(lang);
+const essay = localePath(lang, '/insights/xg-aloe-user-forum');
+---
+<section class="section--tight quote" aria-labelledby="quote-text">
+  <div class="container">
+    <figure class="quote__figure">
+      <div class="quote__panel">
+        <p class="eyebrow"><a href={essay} class="quote__essay">{ui.quote.eyebrow} “From Open Interfaces to Open Risks”</a></p>
+        <blockquote>
+          <p id="quote-text" class="h2 quote__text">{lang === 'de' ? `„${ui.quote.text}“` : `“${ui.quote.text}”`}</p>
+        </blockquote>
+        <figcaption class="quote__caption">
+          <p><span class="quote__name">{ui.quote.name}</span><br /><span class="muted">{ui.quote.role}</span></p>
+        </figcaption>
+      </div>
+      <div class="quote__portrait">
+        <Picture
+          src={felix}
+          alt={ui.quote.portraitAlt}
+          formats={['avif']}
+          fallbackFormat="webp"
+          widths={[480, 640, 960, 1200]}
+          sizes="(min-width: 64rem) 40vw, 100vw"
+          loading="lazy"
+          decoding="async"
+          class="img-mono quote__img"
+          pictureAttributes={{ class: 'quote__picture' }}
+        />
+      </div>
+    </figure>
+  </div>
+</section>
+
+<style>
+  .quote__figure {
+    display: grid;
+    background: var(--paper-deep);
+  }
+  .quote__panel {
+    display: grid;
+    gap: var(--space-7);
+    align-content: space-between;
+    padding: var(--space-7) var(--space-6);
+  }
+  .quote__essay { text-decoration: none; }
+  .quote__essay:hover { text-decoration: underline; }
+  .quote__text { text-wrap: balance; max-width: 16em; }
+  .quote__name { font-weight: var(--weight-medium); }
+  :global(.quote__picture) { display: block; width: 100%; height: 100%; }
+  .quote__img, :global(.quote__img) { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
+  @media (min-width: 64rem) {
+    .quote__figure { grid-template-columns: 11fr 9fr; }
+    .quote__panel { padding: var(--space-8) var(--space-8); }
+    .quote__img, :global(.quote__img) { aspect-ratio: auto; }
+  }
+</style>