Icon Bento With Hero Tile

1import {
2  Card,
3  CardDescription,
4  CardHeader,
5  CardTitle,
6} from "@/components/ui/card"
7import { IconPlaceholder } from "@/components/icons/icon-placeholder"
8 
9/** Props a call site may pass through to an icon. */
10type IconProps = { className?: string; size?: number | string }
11 
12const tiles = [
13  {
14    id: "lead",
15    icon: (p: IconProps) => (
16      <IconPlaceholder
17        lucide="Brain"
18        tabler="IconBrain"
19        hugeicons="BrainIcon"
20        phosphor="Brain"
21        remixicon="RiBrainLine"
22        {...p}
23      />
24    ),
25    title: "AI-powered automation",
26    description:
27      "Let intelligent workflows handle the repetitive work so your team can focus on what actually moves the needle.",
28    span: "md:col-span-2 md:row-span-2",
29    iconSize: "size-10 md:size-14",
30    titleSize: "text-base md:text-2xl",
31    descSize: "text-sm md:text-base",
32  },
33  {
34    id: "speed",
35    icon: (p: IconProps) => (
36      <IconPlaceholder
37        lucide="Flashlight"
38        tabler="IconBulb"
39        hugeicons="FlashlightIcon"
40        phosphor="Flashlight"
41        remixicon="RiFlashlightLine"
42        {...p}
43      />
44    ),
45    title: "Instant deployments",
46    description: "Ship changes globally in under 30 seconds from any branch.",
47    span: "",
48    iconSize: "size-10",
49    titleSize: "text-base",
50    descSize: "text-sm",
51  },
52  {
53    id: "security",
54    icon: (p: IconProps) => (
55      <IconPlaceholder
56        lucide="Lock"
57        tabler="IconLockPassword"
58        hugeicons="LockPasswordIcon"
59        phosphor="Lock"
60        remixicon="RiLockPasswordLine"
61        {...p}
62      />
63    ),
64    title: "Zero-trust security",
65    description: "Granular policies and end-to-end encryption out of the box.",
66    span: "",
67    iconSize: "size-10",
68    titleSize: "text-base",
69    descSize: "text-sm",
70  },
71  {
72    id: "analytics",
73    icon: (p: IconProps) => (
74      <IconPlaceholder
75        lucide="LineChart"
76        tabler="IconChartLine"
77        hugeicons="ChartLineIcon"
78        phosphor="ChartLine"
79        remixicon="RiLineChartLine"
80        {...p}
81      />
82    ),
83    title: "Real-time analytics",
84    description: "Live dashboards with sub-second refresh and custom metrics.",
85    span: "",
86    iconSize: "size-10",
87    titleSize: "text-base",
88    descSize: "text-sm",
89  },
90  {
91    id: "global",
92    icon: (p: IconProps) => (
93      <IconPlaceholder
94        lucide="Globe"
95        tabler="IconGlobe"
96        hugeicons="GlobalIcon"
97        phosphor="Globe"
98// … truncated