initial

src/components/home/Proof.astro

@@ -0,0 +1,39 @@
+---
+import { t, type Lang } from '../../i18n/ui';
+interface Props { lang: Lang }
+const { lang } = Astro.props;
+const ui = t(lang);
+---
+<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>
+</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; }
+  @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); }
+  }
+</style>