save

2026-08-14 13:34:12 +02:00
parent 728e2ec270
commit b6ed4118d1
41 changed files with 1071 additions and 81 deletions
@@ -0,0 +1,64 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type InfoStripItem = {
+  /** self-contained visual (asset-kit render / icon) */
+  media: React.ReactNode
+  eyebrow: React.ReactNode
+  title: React.ReactNode
+}
+
+/**
+ * Wide white strip directly under a hero: hairline-divided columns (2 up on
+ * mobile, 3 from `sm`, 5 from `lg`), each a glass render over a teal eyebrow
+ * and a navy title. Dividers are drawn per column for the current layout so
+ * they stay inset from the card's padding.
+ */
+function InfoStrip({
+  items,
+  className,
+}: {
+  items: InfoStripItem[]
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-2 rounded-3xl border border-border bg-card p-2 shadow-card sm:grid-cols-3 sm:p-3 lg:grid-cols-5",
+        className
+      )}
+    >
+      {items.map((item, i) => (
+        <div
+          key={i}
+          className={cn(
+            "flex flex-col items-center px-3 py-4 text-center sm:px-4",
+            /* dividers for the 2-up layout … */
+            i % 2 !== 0 ? "border-l border-border" : "border-l-0",
+            i >= 2 ? "border-t border-border" : "border-t-0",
+            /* … the 3-up layout … */
+            i % 3 !== 0 ? "sm:border-l" : "sm:border-l-0",
+            i >= 3 ? "sm:border-t" : "sm:border-t-0",
+            /* … and the 5-up layout */
+            i % 5 !== 0 ? "lg:border-l" : "lg:border-l-0",
+            "lg:border-t-0"
+          )}
+        >
+          <span className="flex h-14 items-center justify-center">
+            {item.media}
+          </span>
+          <p className="mt-3 text-[0.625rem] font-bold tracking-[0.14em] text-primary uppercase">
+            {item.eyebrow}
+          </p>
+          <div className="mt-1.5 text-xs leading-snug font-semibold text-balance text-navy/75 sm:text-[0.8125rem]">
+            {item.title}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export { InfoStrip }
+export type { InfoStripItem }