Bento With Static Chart Visuals

1import { Card } from "@/components/ui/card"
2import { cn } from "@/lib/utils"
3import { IconPlaceholder } from "@/components/icons/icon-placeholder"
4import type * as React from "react"
5 
6/** Props a call site may pass through to an icon. */
7type IconProps = { className?: string; size?: number | string }
8 
9/** An icon held in data and rendered later, e.g. `<item.icon className="size-4" />`. */
10type IconRenderer = (props: IconProps) => React.ReactNode
11 
12export default function BentoBlock() {
13  return (
14    <section className="flex w-full items-center justify-center bg-muted/30 px-6 py-16 text-foreground">
15      <div className="mx-auto w-full max-w-6xl">
16        <div className="max-w-2xl">
17          <span className="text-sm font-medium tracking-widest text-muted-foreground uppercase">
18            Capabilities
19          </span>
20          <h2 className="mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl">
21            Everything Acme runs on, in one grid
22          </h2>
23          <p className="mt-3 text-muted-foreground">
24            A composable platform that scales from your first deploy to your
25            millionth request, without changing tools.
26          </p>
27        </div>
28 
29        <div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 md:grid-rows-[repeat(2,minmax(0,1fr))_auto]">
30          <Card className="relative flex flex-col justify-between gap-8 overflow-hidden rounded-lg border-border p-8 sm:col-span-2 md:col-span-2 md:row-span-2">
31            <div className="flex flex-col gap-4">
32              <span className="flex size-12 items-center justify-center rounded-lg border border-border bg-primary text-primary-foreground">
33                <IconPlaceholder
34                  lucide="Sparkles"
35                  tabler="IconSparkles"
36                  hugeicons="SparklesIcon"
37                  phosphor="Sparkle"
38                  remixicon="RiSparklingLine"
39                  className="size-6"
40                  aria-hidden="true"
41                />
42              </span>
43              <div>
44                <h3 className="font-heading text-2xl font-semibold tracking-tight">
45                  Intelligent automation engine
46                </h3>
47                <p className="mt-3 max-w-sm text-muted-foreground">
48                  Define workflows once and let Acme orchestrate retries,
49                  scaling, and rollbacks across every environment automatically.
50                </p>
51              </div>
52            </div>
53// … truncated