Brand Hero Block

1import { ArrowRight, Blocks, Code2, ShieldCheck } from "lucide-react";
2 
3import { Badge } from "@/components/ui/atoms/badge";
4import { Button } from "@/components/ui/atoms/button";
5 
6const heroFeatures = [
7  { title: "Source owned", description: "Every installed file is yours.", icon: Code2 },
8  { title: "Accessible", description: "Radix behavior and visible states.", icon: ShieldCheck },
9  { title: "Composable", description: "Primitives and product-ready blocks.", icon: Blocks },
10];
11 
12function BrandHeroBlock() {
13  return (
14    <section
15      data-slot="brand-hero-block"
16      className="@container/hero overflow-hidden rounded-xl border border-border bg-background"
17    >
18      <div className="px-4 py-12 text-center @sm/hero:px-8 @lg/hero:py-16">
19        <Badge variant="glass">Poyraz UI v3</Badge>
20        <h1 className="mx-auto mt-4 max-w-3xl text-3xl font-semibold leading-tight @lg/hero:text-5xl">
21          Build product interfaces with <span className="text-primary">open, adaptable</span> source
22        </h1>
23        <p className="mx-auto mt-4 max-w-xl text-sm leading-relaxed text-muted-foreground @sm/hero:text-base">
24          A registry-first React UI kit combining accessible behavior, semantic tokens and
25          restrained glass surfaces.
26        </p>
27        <div className="mt-6 flex flex-col justify-center gap-2 @sm/hero:flex-row">
28          <Button>
29            Browse components <ArrowRight className="size-4" />
30          </Button>
31          <Button variant="outline">Read documentation</Button>
32        </div>
33      </div>
34      <div className="grid border-t border-border @md/hero:grid-cols-3">
35        {heroFeatures.map(({ title, description, icon: Icon }) => (
36          <div
37            key={title}
38            className="flex gap-3 border-b border-border p-4 last:border-b-0 @md/hero:border-b-0 @md/hero:border-r @md/hero:last:border-r-0"
39          >
40            <span className="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary-muted text-primary">
41              <Icon className="size-4" />
42            </span>
43            <div>
44              <h2 className="text-sm font-semibold">{title}</h2>
45              <p className="mt-1 text-xs text-muted-foreground">{description}</p>
46            </div>
47          </div>
48        ))}
49      </div>
50    </section>
51  );
52}
53 
54export { BrandHeroBlock, heroFeatures };