bento-3

1import {
2  RiCheckLine,
3  RiCodeBoxLine,
4  RiPulseLine,
5  RiShieldKeyholeLine,
6  RiSparkling2Line,
7} from "@remixicon/react"
8 
9const tags = ["TypeScript", "Go", "Python", "Rust", "CLI", "REST"]
10 
11export default function BentoBlock() {
12  return (
13    <section className="flex w-full items-center justify-center bg-background px-6 py-16 text-foreground">
14      <div className="mx-auto w-full max-w-5xl">
15        <div className="mx-auto max-w-2xl text-center">
16          <span className="text-sm font-medium tracking-widest text-muted-foreground uppercase">
17            Why teams switch
18          </span>
19          <h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl">
20            Everything you need to ship
21          </h2>
22          <p className="mt-3 text-muted-foreground">
23            A focused toolkit that scales from your first commit to your
24            millionth request.
25          </p>
26        </div>
27 
28        <div className="mt-12 grid gap-px border border-border bg-border md:grid-cols-3">
29          {/* Lead tile: feature + terminal snippet */}
30          <div className="flex flex-col justify-between gap-8 bg-background p-8 md:col-span-2 md:row-span-2">
31            <div>
32              <span className="flex size-14 items-center justify-center border border-border bg-muted">
33                <RiSparkling2Line className="size-7" aria-hidden="true" />
34              </span>
35              <h3 className="mt-6 text-2xl font-semibold tracking-tight">
36                Intelligent build pipeline
37              </h3>
38              <p className="mt-3 max-w-md text-base leading-relaxed text-muted-foreground">
39                Caching, parallelism, and preview environments work out of the
40                box. Push a branch and get a live URL in seconds.
41              </p>
42            </div>
43 
44            <div
45              className="border border-border bg-muted/40 p-4 font-mono text-xs leading-relaxed"
46              aria-hidden="true"
47            >
48              <p className="text-muted-foreground">
49                <span className="text-foreground">$</span> acme deploy
50              </p>
51              <p className="mt-2 flex items-center gap-1.5 text-muted-foreground">
52                <RiCheckLine className="size-3.5 text-foreground" />
53                Built in 8.2s
54              </p>
55              <p className="mt-1 flex items-center gap-1.5 text-muted-foreground">
56                <RiCheckLine className="size-3.5 text-foreground" />
57                Live at acme.app
58// … truncated