Feature 15

1import { Sparkles } from "lucide-react";
2import { cn } from "@/lib/utils";
3import { Badge } from "@/components/ui/badge";
4 
5interface Feature15Props {
6  badge?: { text: string; icon?: React.ReactNode; url?: string };
7  title?: string;
8  description?: React.ReactNode;
9  img?: string;
10  className?: string;
11}
12 
13const Feature15 = ({
14  badge = {
15    text: "Production-ready components",
16    url: "#",
17  },
18  title = "Shadcn UI Blocks, Copy & Customize",
19  description = (
20    <>
21      Pre-built landing page components for React. Just{" "}
22      <strong className="font-semibold text-foreground">copy the code</strong>{" "}
23      and focus on what matters —{" "}
24      <strong className="font-semibold text-foreground">your product</strong>.
25    </>
26  ),
27  img = "/images/mockups/iphone-crop.webp",
28  className,
29}: Feature15Props) => {
30  return (
31    <section
32      className={cn(
33        "relative w-full overflow-hidden py-16 md:py-24",
34        className,
35      )}
36    >
37      {/* Dot pattern background */}
38      <div
39        aria-hidden
40        className="pointer-events-none absolute inset-0"
41        style={{
42          backgroundImage:
43            "radial-gradient(var(--border) 1px, transparent 1px)",
44          backgroundSize: "16px 16px",
45          maskImage:
46            "radial-gradient(ellipse 60% 60% at 50% 40%, #000 40%, transparent 100%)",
47          WebkitMaskImage:
48            "radial-gradient(ellipse 60% 60% at 50% 40%, #000 40%, transparent 100%)",
49        }}
50      />
51 
52      <div className="relative z-10 container mx-auto px-6">
53        <div className="flex flex-col items-center gap-4 text-center">
54          {badge && (
55            <Badge
56              variant="outline"
57              className="gap-1.5 border border-border py-1"
58              asChild
59            >
60              <a href={badge.url}>
61                {badge.icon}
62                {badge.text}
63              </a>
64            </Badge>
65          )}
66 
67          <h2 className="max-w-5xl text-4xl leading-tight font-semibold tracking-tight whitespace-pre-line md:text-5xl">
68            {title}
69          </h2>
70 
71          {/* Product image, centered and fully visible */}
72          <div className="flex h-64 w-full max-w-lg items-center justify-center overflow-hidden md:h-80">
73            <img
74              src={img}
75              alt=""
76              className="max-h-full max-w-full object-contain"
77            />
78          </div>
79 
80          <p className="max-w-xl text-muted-foreground md:text-lg">
81// … truncated