Feature 05

1"use client";
2 
3import { useState } from "react";
4import { cn } from "@/lib/utils";
5import {
6  Accordion,
7  AccordionContent,
8  AccordionItem,
9  AccordionTrigger,
10} from "@/components/ui/accordion";
11import {
12  LucideIcon,
13  Copy,
14  SquareDashedMousePointer,
15  TypeOutline,
16  Info,
17} from "lucide-react";
18 
19interface FeatureItem {
20  title: string;
21  description: string;
22  icon?: LucideIcon;
23  img?: string;
24}
25 
26interface Feature05Props {
27  title?: string;
28  description?: string;
29  features?: FeatureItem[];
30  className?: string;
31}
32 
33const Feature05 = ({
34  title = "Everything You Need to Build Faster",
35  description = "Production-ready blocks built with shadcn/ui and Tailwind CSS. Copy, customize, and ship.",
36  features = [
37    {
38      title: "Copy & Paste Ready",
39      description:
40        "Every component is ready to use. Just copy the code and paste it into your project.",
41      icon: Copy,
42      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-8.webp",
43    },
44    {
45      title: "Fully Customizable",
46      description:
47        "Built with Tailwind CSS, every component can be easily modified to match your brand.",
48      icon: SquareDashedMousePointer,
49      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-1.webp",
50    },
51    {
52      title: "TypeScript First",
53      description:
54        "All components are fully typed with TypeScript for better developer experience.",
55      icon: TypeOutline,
56      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-3.webp",
57    },
58    {
59      title: "Accessible by Default",
60      description:
61        "Built on Radix UI primitives, all components follow WAI-ARIA guidelines.",
62      icon: Info,
63      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-4.webp",
64    },
65  ],
66  className,
67}: Feature05Props) => {
68  const [activeIndex, setActiveIndex] = useState(0);
69  const activeImg = features[activeIndex]?.img || features[0]?.img;
70 
71  return (
72    <section className={cn("py-12 md:py-24", className)}>
73      <div className="mx-auto max-w-7xl px-8">
74        <div className="grid gap-16 lg:grid-cols-2">
75          <div className="flex flex-col gap-4">
76            <h2 className="text-3xl leading-tight font-medium tracking-tight md:text-4xl lg:text-5xl">
77              {title}
78            </h2>
79            {description && (
80              <p className="text-muted-foreground md:text-lg">{description}</p>
81            )}
82            <Accordion
83// … truncated