An editorial split-column hero with interactive discipline tabs, deliverable checklists, and a framed media showcase. Ideal for agencies and design studios.
"use client";
import * as React from "react";
import SplitEditorialHero from "@/components/ui/split-editorial-hero";
const defaultServices = [
{
id: "strategy",
label: "Strategy",
description: "Align your leadership and product teams around the problem worth solving.",
deliverables: [
"Opportunity mapping & user research",
"Core product architecture principles",
"A measurable, phased delivery roadmap",
],
},
{
id: "design",
label: "Design",
description: "Make every interaction feel intentional, intuitive, and unmistakable.",
deliverables: [
"Visual & interface art direction",
"Accessible multi-brand design systems",
"High-fidelity interactive prototypes",
],
},
{
id: "build",
label: "Build",
description: "Bring refined details into production without losing the original craft.",
deliverables: [
"Typed React & Tailwind component libraries",
"Fluid motion & micro-interaction engineering",
"Performance & accessibility audits",
],
},
];
export default function SplitEditorialHeroDemo() {
const [selection, setSelection] = React.useState("");
return (
<div className="w-full bg-background min-h-[540px] flex flex-col items-center justify-center p-4 sm:p-6">
<SplitEditorialHero
eyebrow="An independent digital practice"
title="Clarity is a competitive advantage."
description="We partner with ambitious teams to turn complex workflows into interfaces people genuinely enjoy using."
services={defaultServices}
media={
<svg
viewBox="0 0 320 340"
role="img"
aria-label="Architectural grid study in monochrome"
className="w-full h-auto block text-foreground bg-muted/40"
>
{Array.from({ length: 12 }, (_, i) => (
<React.Fragment key={i}>
<path
d={`M${40 + i * 20} 30V310`}
stroke="currentColor"
strokeOpacity={0.08 + i * 0.015}
/>
<path
d={`M30 ${50 + i * 22}H290`}
stroke="currentColor"
strokeOpacity="0.12"
/>
</React.Fragment>
))}
<rect
x="75"
y="85"
width="170"
height="170"
fill="none"
stroke="currentColor"
strokeOpacity="0.35"
strokeWidth="1.5"
/>
<circle
cx="160"
cy="170"
r="55"
fill="none"
stroke="currentColor"
strokeOpacity="0.25"
strokeWidth="1.2"
/>
<path
d="M75 255 245 85"
stroke="currentColor"
strokeOpacity="0.5"
strokeWidth="1.5"
/>
</svg>
}
onExplore={(id) => setSelection(id)}
/>
{selection && (
<p role="status" className="text-xs text-muted-foreground mt-2">
Exploring {selection} discipline.
</p>
)}
</div>
);
}