130 lines
3.3 KiB
TypeScript
130 lines
3.3 KiB
TypeScript
import * as React from "react"
|
||
|
||
import { Container, Section, SectionHeading } from "@/components/solenos/section"
|
||
import { PageBreadcrumb } from "@/components/solenos/page-breadcrumb"
|
||
import { PageHero } from "@/components/solenos/page-hero"
|
||
import { FeatureBand } from "@/components/solenos/feature-band"
|
||
import { FeatureTile } from "@/components/solenos/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,
|
||
eyebrow,
|
||
title,
|
||
tagline,
|
||
lead,
|
||
actions,
|
||
visual,
|
||
features,
|
||
featureLayout = "tiles",
|
||
children,
|
||
closing,
|
||
}: {
|
||
breadcrumb: string
|
||
eyebrow?: React.ReactNode
|
||
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[]
|
||
/**
|
||
* `tiles` — bare icon-over-label tiles on the page background.
|
||
* `band` — one divided white card (larger line icons, two-line subs).
|
||
*/
|
||
featureLayout?: "tiles" | "band"
|
||
/** additional full-width spec sections between feature row and closing */
|
||
children?: React.ReactNode
|
||
closing?: React.ReactNode
|
||
}) {
|
||
return (
|
||
<>
|
||
<PageHero
|
||
breadcrumb={<AudienceBreadcrumb current={breadcrumb} />}
|
||
eyebrow={eyebrow}
|
||
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">
|
||
{featureLayout === "band" ? (
|
||
<FeatureBand items={features} />
|
||
) : (
|
||
<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 }
|