Feature 19

1import { ArrowRight } from "lucide-react";
2import { cn } from "@/lib/utils";
3import { Button } from "@/components/ui/button";
4 
5interface Feature19Panel {
6  label: string;
7  image?: string;
8  description: string;
9}
10 
11interface Feature19Props {
12  title?: string;
13  panels?: [Feature19Panel, Feature19Panel];
14  className?: string;
15}
16 
17const Feature19 = ({
18  title = "Stop building landing pages from scratch.",
19  panels = [
20    {
21      label: "From scratch",
22      image:
23        "https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp",
24      description:
25        "Custom CSS and one-off components might get you there, but perpetually rebuilding the same sections severely slows your team down.",
26    },
27    {
28      label: "With blocks",
29      image:
30        "https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp",
31      description:
32        "With production-ready blocks, a landing page can come together through copy, paste and customization — and your brand can be part of the process.",
33    },
34  ],
35  className,
36}: Feature19Props) => (
37  <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
38    <div className="grid gap-12 lg:grid-cols-[2fr_3fr] lg:gap-16">
39      {/* Left: large editorial title, flush to top */}
40      <h2 className="text-4xl leading-tight font-medium tracking-tight md:text-5xl">
41        {title}
42      </h2>
43 
44      {/* Right: two compared image panels with circular arrow between */}
45      <div className="relative">
46        <div className="grid grid-cols-2 gap-4">
47          {panels.map((panel, index) => (
48            <div key={index} className="flex flex-col gap-4">
49              <div className="relative overflow-hidden rounded-xl bg-muted">
50                {panel.image ? (
51                  <img
52                    src={panel.image}
53                    alt={panel.label}
54                    className="aspect-3/4 w-full object-cover"
55                  />
56                ) : (
57                  <div className="aspect-3/4 w-full" />
58                )}
59                <span className="absolute top-4 left-4 text-sm font-medium text-white">
60                  {panel.label}
61                </span>
62              </div>
63              <p className="text-sm text-muted-foreground">
64                {panel.description}
65              </p>
66            </div>
67          ))}
68        </div>
69 
70        {/* Circular arrow button overlapping both panels */}
71        <Button
72          variant="outline"
73          size="icon"
74// … truncated