first publish

src/components/ui/FactsStrip.tsx

@@ -0,0 +1,39 @@
+import { cn } from "@/lib/utils";
+import type { FactItem } from "@/content/home";
+import { PlaceholderText, visibleFacts } from "./Facts";
+
+export interface FactsStripProps {
+  items: readonly FactItem[];
+  className?: string;
+}
+
+/**
+ * Speaker facts: one full-width row of equal cells separated by 1 px
+ * vertical hairlines. Each cell = DM Mono label (muted) + Jost value.
+ * Wraps to 2 / 3 columns below 1024 px.
+ */
+export function FactsStrip({ items, className }: FactsStripProps) {
+  const rows = visibleFacts(items);
+  if (!rows.length) return null;
+  return (
+    <dl
+      className={cn(
+        "grid grid-cols-2 border-y border-line sm:grid-cols-3 lg:grid-cols-6",
+        "[&>div]:border-l [&>div]:border-line [&>div:first-child]:border-l-0",
+        "[&>div:nth-child(2n+1)]:max-sm:border-l-0 [&>div:nth-child(3n+1)]:sm:max-lg:border-l-0",
+        className,
+      )}
+    >
+      {rows.map((f) => (
+        <div key={f.label} className="flex flex-col gap-2 px-5 py-6 lg:px-6 lg:py-7">
+          <dt className="font-mono text-xs tracking-[0.06em] text-fg-muted">{f.label}</dt>
+          <dd className="font-sans text-[1.0625rem] leading-snug text-fg">
+            <PlaceholderText text={f.value} />
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+export default FactsStrip;