Feature 12

1"use client";
2 
3import { useState } from "react";
4import { cn } from "@/lib/utils";
5 
6interface Feature12Item {
7  title: string;
8  description: string;
9  image?: string;
10}
11 
12interface Feature12Props {
13  label?: string;
14  items?: Feature12Item[];
15  className?: string;
16}
17 
18const defaultItems: Feature12Item[] = [
19  {
20    title: "Components.",
21    description:
22      "Production-ready blocks built on shadcn/ui and Tailwind CSS. Every component is accessible by default, dark mode ready, and fully consistent with your design system.",
23    image:
24      "https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp",
25  },
26  {
27    title: "Customization.",
28    description:
29      "Fully typed and themeable from top to bottom. Swap colors, spacing, and copy through clean props — no digging through opaque internals or fighting CSS specificity.",
30    image:
31      "https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp",
32  },
33  {
34    title: "Performance.",
35    description:
36      "Zero runtime overhead. Components ship as plain React and Tailwind — no CSS-in-JS, no heavy runtimes, no layout shift. Just fast, static HTML from the first byte.",
37    image:
38      "https://www.shadcnship.com/images/placeholders/hero-architecture-10.webp",
39  },
40  {
41    title: "Accessibility.",
42    description:
43      "Every interactive element follows WAI-ARIA patterns out of the box. Keyboard navigation, focus management, and screen reader support are built in — not bolted on.",
44    image:
45      "https://www.shadcnship.com/images/placeholders/hero-architecture-12.webp",
46  },
47  {
48    title: "Developer Experience.",
49    description:
50      "TypeScript-first APIs, consistent naming, and self-contained files. Copy a block, drop it in, and ship — the entire surface fits in your head after five minutes.",
51    image:
52      "https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp",
53  },
54];
55 
56const Feature12 = ({
57  label = "Why shadcnship",
58  items = defaultItems,
59  className,
60}: Feature12Props) => {
61  const [active, setActive] = useState(0);
62  const activeItem = items[active];
63 
64  return (
65    <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
66      {label && (
67        <p className="mb-12 text-sm font-semibold tracking-widest text-muted-foreground uppercase">
68          {label}
69        </p>
70      )}
71 
72      <div className="grid grid-cols-1 gap-12 lg:grid-cols-[2fr_3fr] lg:gap-16">
73        {/* Left: clickable title list */}
74// … truncated