save

2026-08-13 15:46:04 +02:00
parent 920b1da4b0
commit 2c1a8ae9b5
178 changed files with 10289 additions and 0 deletions
@@ -0,0 +1,62 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Container } from "@/components/gebos/section"
+
+/**
+ * Split hero: copy left (breadcrumb/eyebrow, H1, lead, CTAs, extra),
+ * visual right, soft radial glow behind.
+ */
+function PageHero({
+  breadcrumb,
+  title,
+  lead,
+  actions,
+  extra,
+  visual,
+  className,
+}: {
+  breadcrumb?: React.ReactNode
+  title: React.ReactNode
+  lead?: React.ReactNode
+  actions?: React.ReactNode
+  /** slot below the actions (e.g. hint pill) */
+  extra?: React.ReactNode
+  visual?: React.ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn("bg-hero-glow", className)}>
+      {breadcrumb ? (
+        <Container className="pt-6 lg:pt-8">{breadcrumb}</Container>
+      ) : null}
+      <Container
+        className={cn(
+          "grid items-center gap-10 pb-14 sm:pb-16 lg:grid-cols-[1.05fr_0.95fr] lg:gap-6 lg:pb-20",
+          /* breadcrumb already provides the top offset */
+          breadcrumb ? "pt-5" : "pt-14 sm:pt-16 lg:pt-20"
+        )}
+      >
+        <div className={cn("max-w-xl", breadcrumb && "lg:self-start")}>
+          <h1 className="text-4xl font-extrabold tracking-tight text-balance text-navy sm:text-5xl">
+            {title}
+          </h1>
+          {lead ? (
+            <p className="mt-4 max-w-lg text-base leading-relaxed text-pretty text-muted-foreground sm:text-lg">
+              {lead}
+            </p>
+          ) : null}
+          {actions ? (
+            <div className="mt-7 flex flex-wrap items-center gap-3">
+              {actions}
+            </div>
+          ) : null}
+          {extra ? <div className="mt-6">{extra}</div> : null}
+        </div>
+        {visual ? <div className="relative w-full">{visual}</div> : null}
+      </Container>
+    </div>
+  )
+}
+
+export { PageHero }