Equal Four-Tile Bento

1import { Badge } from "@/components/ui/badge"
2import { IconPlaceholder } from "@/components/icons/icon-placeholder"
3 
4/** Props a call site may pass through to an icon. */
5type IconProps = { className?: string; size?: number | string }
6 
7const tiles = [
8  {
9    id: "observability",
10    icon: (p: IconProps) => (
11      <IconPlaceholder
12        lucide="ChartBar"
13        tabler="IconChartBar"
14        hugeicons="BarChartIcon"
15        phosphor="ChartBar"
16        remixicon="RiBarChartBoxLine"
17        {...p}
18      />
19    ),
20    category: "Observability",
21    title: "Full-stack visibility",
22    description:
23      "Trace every request end-to-end and surface bottlenecks before they reach users.",
24  },
25  {
26    id: "infrastructure",
27    icon: (p: IconProps) => (
28      <IconPlaceholder
29        lucide="Cloud"
30        tabler="IconCloud"
31        hugeicons="CloudIcon"
32        phosphor="Cloud"
33        remixicon="RiCloudLine"
34        {...p}
35      />
36    ),
37    category: "Infrastructure",
38    title: "On-demand compute",
39    description:
40      "Auto-scale servers in 14 regions with zero configuration and sub-second provisioning.",
41  },
42  {
43    id: "security",
44    icon: (p: IconProps) => (
45      <IconPlaceholder
46        lucide="ShieldCheck"
47        tabler="IconShieldCheck"
48        hugeicons="Shield01Icon"
49        phosphor="ShieldCheck"
50        remixicon="RiShieldCheckLine"
51        {...p}
52      />
53    ),
54    category: "Security",
55    title: "Defence in depth",
56    description:
57      "SOC 2 Type II controls, mutual TLS, and role-based access enforced at every layer.",
58  },
59  {
60    id: "integrations",
61    icon: (p: IconProps) => (
62      <IconPlaceholder
63        lucide="Layers"
64        tabler="IconStack"
65        hugeicons="Layers01Icon"
66        phosphor="Stack"
67        remixicon="RiStackLine"
68        {...p}
69      />
70    ),
71    category: "Integrations",
72    title: "Connect anything",
73    description:
74      "200+ pre-built connectors and a unified webhook bus for tools your team already uses.",
75  },
76]
77 
78export default function BentoBlock() {
79  return (
80    <section className="flex w-full items-center justify-center bg-background px-6 py-16 text-foreground">
81      <div className="mx-auto w-full max-w-4xl">
82        <div className="mx-auto max-w-xl text-center">
83          <h2 className="font-heading text-3xl font-bold tracking-tight sm:text-4xl">
84            Built for every layer of the stack
85          </h2>
86          <p className="mt-3 text-base text-muted-foreground">
87// … truncated