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,115 @@
+import * as React from "react"
+
+import { Container, Section, SectionHeading } from "@/components/gebos/section"
+import { PageBreadcrumb } from "@/components/gebos/page-breadcrumb"
+import { PageHero } from "@/components/gebos/page-hero"
+import { FeatureTile } from "@/components/gebos/icon-tile"
+
+type AudienceFeature = {
+  icon?: React.ReactNode
+  /** self-contained visual (asset-kit icon/vector) rendered without IconBadge */
+  media?: React.ReactNode
+  title: React.ReactNode
+  sub?: React.ReactNode
+}
+
+function AudienceBreadcrumb({ current }: { current: string }) {
+  return (
+    <PageBreadcrumb
+      items={[{ label: "Für wen?", to: "/fuer-wen" }, { label: current }]}
+    />
+  )
+}
+
+/**
+ * Shared audience page template (tiles 5–8):
+ * split PageHero with breadcrumb, feature tile row, closing slot
+ * (teal CtaBanner or slim repeat-CTA section).
+ */
+function AudiencePage({
+  breadcrumb,
+  title,
+  tagline,
+  lead,
+  actions,
+  visual,
+  features,
+  children,
+  closing,
+}: {
+  breadcrumb: string
+  title: React.ReactNode
+  /** short bold subline under the H1 (e.g. "Bestellen. Montieren. Fertig.") */
+  tagline?: React.ReactNode
+  lead?: React.ReactNode
+  actions?: React.ReactNode
+  visual?: React.ReactNode
+  features: AudienceFeature[]
+  /** additional full-width spec sections between feature row and closing */
+  children?: React.ReactNode
+  closing?: React.ReactNode
+}) {
+  return (
+    <>
+      <PageHero
+        breadcrumb={<AudienceBreadcrumb current={breadcrumb} />}
+        title={title}
+        lead={
+          <>
+            {tagline ? (
+              <span className="mb-2 block text-lg font-bold text-navy sm:text-xl">
+                {tagline}
+              </span>
+            ) : null}
+            {lead}
+          </>
+        }
+        actions={actions}
+        visual={visual}
+      />
+      <Container>
+        <Section className="pt-2 sm:pt-4 lg:pt-6">
+          <div className="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-4">
+            {features.map((feature, i) => (
+              <FeatureTile
+                key={i}
+                icon={feature.icon}
+                media={feature.media}
+                title={feature.title}
+                sub={feature.sub}
+              />
+            ))}
+          </div>
+        </Section>
+        {children}
+        {closing}
+      </Container>
+    </>
+  )
+}
+
+/**
+ * Slim closing section repeating the hero CTAs
+ * (tiles 7 and 8 close without a gradient band).
+ */
+function AudienceClosing({
+  title,
+  lead,
+  actions,
+}: {
+  title: React.ReactNode
+  lead?: React.ReactNode
+  actions: React.ReactNode
+}) {
+  return (
+    <Section className="pt-0 sm:pt-0 lg:pt-0">
+      <SectionHeading align="center" title={title} lead={lead} />
+      <div className="mt-7 flex flex-wrap items-center justify-center gap-3">
+        {actions}
+      </div>
+    </Section>
+  )
+}
+
+export { AudiencePage, AudienceClosing }
+export type { AudienceFeature }