save

component-library/src/pages/audiences/audience-page.tsx

@@ -3,6 +3,7 @@ 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 { FeatureBand } from "@/components/gebos/feature-band"
 import { FeatureTile } from "@/components/gebos/icon-tile"
 
 type AudienceFeature = {
@@ -34,6 +35,7 @@ function AudiencePage({
   actions,
   visual,
   features,
+  featureLayout = "tiles",
   children,
   closing,
 }: {
@@ -45,6 +47,11 @@ function AudiencePage({
   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
@@ -69,17 +76,21 @@ function AudiencePage({
       />
       <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>
+          {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}