Feature 20

1import { Phone, PhoneOff } from "lucide-react";
2import { cn } from "@/lib/utils";
3import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
4import { Button } from "@/components/ui/button";
5import { Card, CardContent } from "@/components/ui/card";
6import { Checkbox } from "@/components/ui/checkbox";
7 
8interface Feature20Item {
9  title: string;
10  description: string;
11  mockup?: React.ReactNode;
12}
13 
14interface Feature20Props {
15  title?: string;
16  description?: string;
17  items?: [Feature20Item, Feature20Item, Feature20Item];
18  className?: string;
19}
20 
21/* Decorative UI mockups suggesting real product surfaces */
22const FormMockup = () => (
23  <div className="w-3/4 rounded-lg border bg-background p-4 shadow-sm">
24    <p className="text-sm font-medium">Type of Block</p>
25    <div className="mt-3 flex items-center gap-2 rounded-md border px-3 py-2 shadow-sm">
26      <Checkbox checked aria-label="Selected" />
27      <span className="text-sm">Hero Section</span>
28    </div>
29    <div className="mt-3 flex flex-col gap-2">
30      {Array.from({ length: 3 }).map((_, i) => (
31        <div key={i} className="h-2 rounded-full bg-muted" />
32      ))}
33    </div>
34  </div>
35);
36 
37const CallMockup = () => (
38  <div className="w-3/4 overflow-hidden rounded-lg border bg-background shadow-sm">
39    <img
40      src="https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp"
41      alt=""
42      className="aspect-video w-full object-cover"
43    />
44    <div className="flex items-center gap-2 p-3">
45      <Avatar className="size-8">
46        <AvatarImage src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face" />
47        <AvatarFallback className="text-xs">JR</AvatarFallback>
48      </Avatar>
49      <div className="flex min-w-0 flex-1 flex-col">
50        <span className="truncate text-sm font-medium">Jack Riley</span>
51        <span className="text-xs text-muted-foreground">Incoming call...</span>
52      </div>
53      <Button
54        size="icon"
55        variant="secondary"
56        className="size-8 rounded-full"
57        aria-label="Decline"
58      >
59        <PhoneOff className="size-3.5" />
60      </Button>
61      <Button size="icon" className="size-8 rounded-full" aria-label="Answer">
62        <Phone className="size-3.5" />
63      </Button>
64    </div>
65  </div>
66);
67 
68const PricingMockup = () => (
69  <div className="w-3/4 rounded-lg border bg-background p-4 shadow-sm">
70    <div className="flex items-start justify-between gap-2">
71// … truncated