Feature 03

1import { Button } from "@/components/ui/button";
2import { cn } from "@/lib/utils";
3import { ArrowUpRight } from "lucide-react";
4 
5interface FeatureItem {
6  badge: string;
7  title: string;
8  description: string;
9  img?: string;
10  button?: { text: string; url: string };
11}
12 
13interface Feature03Props {
14  label?: string;
15  title?: string;
16  description?: string;
17  features?: FeatureItem[];
18  className?: string;
19}
20 
21const Feature03 = ({
22  label = "Features",
23  title = "Everything You Need to Build Faster",
24  description = "Production-ready blocks built with shadcn/ui and Tailwind CSS. Copy, customize, and ship.",
25  features = [
26    {
27      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-1.webp",
28      badge: "Copy & Paste Ready",
29      title: "Copy & Paste Ready Everything You Need to Build Faster",
30      description:
31        "All components are ready to use. Just copy the code and paste it into your project. All components are ready to use. Just copy the code and paste it into your project.",
32      button: { text: "Browse Components", url: "#" },
33    },
34    {
35      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-2.webp",
36      badge: "Fully Customizable",
37      title: "Fully Customizable",
38      description:
39        "Built with Tailwind CSS, every component is fully customizable to match your brand. Built with Tailwind CSS, every component is fully customizable to match your brand.",
40      button: { text: "View Docs", url: "#" },
41    },
42    {
43      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-3.webp",
44      badge: "TypeScript First",
45      title: "TypeScript First",
46      description:
47        "Written in TypeScript with full type safety and IntelliSense support for better DX. Written in TypeScript with full type safety and IntelliSense support for better DX.",
48      button: { text: "Get Started", url: "#" },
49    },
50    {
51      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-4.webp",
52      badge: "Accessible by Default",
53      title: "Accessible by Default",
54      description:
55        "Built on Radix UI primitives, all components follow WAI-ARIA guidelines.",
56      button: { text: "Learn More", url: "#" },
57    },
58  ],
59  className,
60}: Feature03Props) => {
61  return (
62    <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
63      <div className="mx-auto flex max-w-5xl flex-col items-center gap-2 text-center">
64        {label && (
65// … truncated