Bento

1"use client";23import {4  Avatar,5  AvatarFallback,6  AvatarGroup,7  AvatarImage,8} from "@/components/ui/avatar";9import { Button } from "@/components/ui/button";10import { cn } from "@/lib/utils";1112type Bento01Props = {13  className?: string;14};1516const AVATARS = [17  "/assets/brand/demos/avatars/avatar-1.png",18  "/assets/brand/demos/avatars/avatar-2.png",19  "/assets/brand/demos/avatars/avatar-3.png",20  "/assets/brand/demos/avatars/avatar-4.png",21  "/assets/brand/demos/avatars/avatar-5.png",22] as const;2324function Mark({ className }: { className?: string }) {25  return (26    <img27      src="/assets/brand/logo/ui.svg"28      alt=""29      className={cn("brightness-0 dark:invert", className)}30    />31  );32}3334export function Bento01({ className }: Bento01Props) {35  return (36    <section className={cn("@container w-full bg-background", className)}>37      <div className="mx-auto w-full max-w-5xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">38        <div className="grid grid-cols-1 gap-3 @[32rem]:grid-cols-2 @[48rem]:grid-cols-4 @[48rem]:grid-rows-[minmax(11rem,1fr)_minmax(9rem,1fr)_minmax(10rem,1fr)]">39          {/* Tall image — full width on mobile, half on tablet, tall on desktop */}40          <div className="relative min-h-[14rem] overflow-hidden rounded-xl bg-muted @[32rem]:col-span-2 @[32rem]:min-h-[16rem] @[48rem]:col-span-1 @[48rem]:row-span-2">41            <img42              src="/assets/brand/demos/attachments/attachment-1.png"43              alt=""44              className="absolute inset-0 size-full object-cover"45            />46            <div47              aria-hidden="true"48              className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/15 to-transparent"49            />50            <p className="absolute inset-x-0 bottom-0 p-4 text-sm font-medium tracking-wide text-white">51              Ship interfaces that feel finished52            </p>53          </div>5455          {/* Big middle: pitch + CTA */}56          <div className="flex min-h-[16rem] flex-col justify-between rounded-xl bg-muted p-5 @[32rem]:col-span-2 @[48rem]:row-span-2">57            <Mark className="size-8" />58            <div className="mt-8 flex flex-1 flex-col justify-end gap-6">59              <p className="max-w-sm text-sm font-medium tracking-wide text-foreground">60                Build your interface with ready made blocks and modern design.61              </p>62              <div>63                <p className="text-3xl font-medium tracking-wide text-foreground">64                  Free65                </p>66                <p className="mt-1 text-sm tracking-wide text-muted-foreground">67                  Open source component library68                </p>69                <Button type="button" size="sm" className="mt-4">70                  Get started71                </Button>72              </div>73            </div>74          </div>7576          {/* Stat */}77          <div className="flex min-h-[10rem] flex-col justify-between rounded-xl bg-muted p-5 @[32rem]:min-h-[11rem]">78            <p className="text-4xl font-medium tracking-wide text-foreground">79              95%80            </p>81            <p className="text-sm tracking-wide text-muted-foreground">82              Teams ship faster with reusable blocks.83            </p>84          </div>8586          {/* Mark tile */}87          <div className="flex min-h-[10rem] items-center justify-center rounded-xl bg-muted p-5 @[32rem]:min-h-[11rem] @[48rem]:min-h-[9rem] @[48rem]:col-start-4 @[48rem]:row-start-2">88            <Mark className="size-12" />89          </div>9091          {/* Social proof */}92          <div className="flex min-h-[10rem] flex-col justify-between rounded-xl bg-muted p-5 @[32rem]:col-span-1">93            <div>94              <p className="text-3xl font-medium tracking-wide text-foreground">95                300+96              </p>97              <p className="mt-1 text-sm tracking-wide text-muted-foreground">98                Blocks and patterns99              </p>100            </div>101            <AvatarGroup overlap="sm" className="mt-4">102              {AVATARS.map((src) => (103                <Avatar key={src} size="sm">104                  <AvatarImage src={src} alt="" />105                  <AvatarFallback>?</AvatarFallback>106                </Avatar>107              ))}108            </AvatarGroup>109          </div>110111          {/* Wide mark — full row on tablet */}112          <div className="flex min-h-[10rem] items-center justify-center rounded-xl bg-muted p-5 @[32rem]:col-span-1 @[48rem]:col-span-2">113            <Mark className="size-14" />114          </div>115116          {/* Image + copy — full width on mobile/tablet */}117          <div className="relative min-h-[12rem] overflow-hidden rounded-xl bg-muted @[32rem]:col-span-2 @[48rem]:col-span-1 @[48rem]:min-h-[10rem]">118            <img119              src="/assets/brand/demos/attachments/attachment-3.png"120              alt=""121              className="absolute inset-0 size-full object-cover"122            />123            <div124              aria-hidden="true"125              className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"126            />127            <div className="absolute inset-x-0 bottom-0 p-4">128              <p className="text-sm font-medium tracking-wide text-white">129                Rapid development130              </p>131              <p className="mt-1 text-xs tracking-wide text-white/75">132                Drop in blocks and keep shipping.133              </p>134            </div>135          </div>136        </div>137      </div>138    </section>139  );140}

1"use client";23import { cn } from "@/lib/utils";45type Bento02Props = {6  className?: string;7};89const CELLS = [10  {11    title: "Token ready",12    description: "Restyle every block with your colors, radii, and type.",13    image: "/assets/brand/demos/attachments/attachment-1.png",14    className:15      "@[32rem]:col-span-2 @[32rem]:row-span-2 @[48rem]:col-span-2 @[48rem]:row-span-2",16  },17  {18    title: "Copy and ship",19    description: "Install a block and drop it into a page.",20    image: "/assets/brand/demos/attachments/attachment-2.png",21    className: "@[32rem]:col-span-2 @[48rem]:col-span-2",22  },23  {24    title: "Compose",25    description: "Mix sections freely.",26    image: "/assets/brand/demos/attachments/attachment-3.png",27    className: "@[32rem]:col-span-1 @[48rem]:col-span-1",28  },29  {30    title: "Accessible",31    description: "Keyboard-first defaults.",32    image: "/assets/brand/demos/attachments/attachment-4.png",33    className: "@[32rem]:col-span-1 @[48rem]:col-span-1",34  },35  {36    title: "Rapid development",37    description: "Ship interfaces that feel finished.",38    image: "/assets/brand/demos/attachments/attachment-5.png",39    className: "@[32rem]:col-span-2 @[48rem]:col-span-2",40  },41  {42    title: "Theme sync",43    description: "Light and dark out of the box.",44    image: "/assets/brand/demos/attachments/attachment-2.png",45    className: "@[32rem]:col-span-2 @[48rem]:col-span-2",46  },47] as const;4849export function Bento02({ className }: Bento02Props) {50  return (51    <section className={cn("@container w-full bg-background", className)}>52      <div className="mx-auto w-full max-w-5xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">53        <ul className="grid grid-cols-1 gap-3 @[32rem]:grid-cols-4 @[32rem]:auto-rows-[11rem]">54          {CELLS.map((cell) => (55            <li56              key={cell.title}57              className={cn(58                "group relative min-h-[12rem] overflow-hidden rounded-xl bg-muted @[32rem]:min-h-0",59                cell.className,60              )}61            >62              <img63                src={cell.image}64                alt=""65                className="absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-[1.03]"66              />67              <div68                aria-hidden="true"69                className="absolute inset-0 bg-gradient-to-t from-black/75 via-black/25 to-transparent"70              />71              <div className="absolute inset-x-0 bottom-0 p-4">72                <h3 className="text-sm font-medium tracking-wide text-white">73                  {cell.title}74                </h3>75                <p className="mt-1 text-xs tracking-wide text-white/75">76                  {cell.description}77                </p>78              </div>79            </li>80          ))}81        </ul>82      </div>83    </section>84  );85}

1"use client";23import { useRef, type MouseEvent } from "react";4import { cn } from "@/lib/utils";56type Bento03Props = {7  className?: string;8};910const CELLS = [11  {12    title: "Token ready",13    description: "Restyle every block with your theme tokens.",14    image: "/assets/brand/demos/attachments/attachment-1.png",15    className: "@[32rem]:col-span-2 @[32rem]:row-span-2",16  },17  {18    title: "Copy and ship",19    description: "Install a block and drop it into a page.",20    image: "/assets/brand/demos/attachments/attachment-2.png",21    className: "@[32rem]:col-span-2",22  },23  {24    title: "Compose",25    description: "Mix sections freely.",26    image: "/assets/brand/demos/attachments/attachment-3.png",27    className: "",28  },29  {30    title: "Accessible",31    description: "Keyboard-first defaults.",32    image: "/assets/brand/demos/attachments/attachment-4.png",33    className: "",34  },35  {36    title: "Rapid development",37    description: "Ship interfaces that feel finished.",38    image: "/assets/brand/demos/attachments/attachment-5.png",39    className: "@[32rem]:col-span-2",40  },41  {42    title: "Theme sync",43    description: "Light and dark out of the box.",44    image: "/assets/brand/demos/attachments/attachment-2.png",45    className: "@[32rem]:col-span-2",46  },47] as const;4849/** Visual reach past each tile so gaps between cards can light neighbors. */50const GLOW_REACH_PX = 160;51const GLOW_RADIUS = "16rem";5253function GlowTile({54  className,55  title,56  description,57  image,58}: {59  className?: string;60  title: string;61  description: string;62  image: string;63}) {64  return (65    <li66      data-glow-tile67      data-glow="off"68      className={cn(69        "relative min-h-[12rem] rounded-xl p-px @[32rem]:min-h-0",70        "data-[glow=off]:![background:var(--border)]",71        className,72      )}73      style={{74        background: `radial-gradient(${GLOW_RADIUS} circle at var(--glow-x, 50%) var(--glow-y, 50%), rgb(120 200 255), rgb(190 140 255 / 0.85), rgb(255 180 140 / 0.4), var(--border) 55%)`,75      }}76    >77      <div className="flex size-full flex-col rounded-[calc(var(--radius-xl)-1px)] bg-background p-2">78        <div className="relative min-h-0 flex-1 overflow-hidden rounded-sm bg-muted">79          <img80            src={image}81            alt=""82            className="absolute inset-0 size-full object-cover"83          />84        </div>85        <div className="px-1 pt-3 pb-1">86          <h3 className="text-sm font-medium tracking-wide text-foreground">87            {title}88          </h3>89          <p className="mt-1 text-xs tracking-wide text-muted-foreground">90            {description}91          </p>92        </div>93      </div>94    </li>95  );96}9798export function Bento03({ className }: Bento03Props) {99  const gridRef = useRef<HTMLUListElement>(null);100101  function syncGlow(clientX: number, clientY: number) {102    const grid = gridRef.current;103    if (!grid) return;104    const tiles = grid.querySelectorAll<HTMLElement>("[data-glow-tile]");105    for (const el of tiles) {106      const rect = el.getBoundingClientRect();107      const w = el.offsetWidth;108      const h = el.offsetHeight;109      const x = ((clientX - rect.left) / Math.max(rect.width, 1)) * w;110      const y = ((clientY - rect.top) / Math.max(rect.height, 1)) * h;111      el.style.setProperty("--glow-x", `${x}px`);112      el.style.setProperty("--glow-y", `${y}px`);113      const near =114        clientX >= rect.left - GLOW_REACH_PX &&115        clientX <= rect.right + GLOW_REACH_PX &&116        clientY >= rect.top - GLOW_REACH_PX &&117        clientY <= rect.bottom + GLOW_REACH_PX;118      el.dataset.glow = near ? "on" : "off";119    }120  }121122  function onMove(event: MouseEvent<HTMLUListElement>) {123    syncGlow(event.clientX, event.clientY);124  }125126  function onLeave() {127    const grid = gridRef.current;128    if (!grid) return;129    for (const el of grid.querySelectorAll<HTMLElement>("[data-glow-tile]")) {130      el.dataset.glow = "off";131    }132  }133134  return (135    <section className={cn("@container w-full bg-background", className)}>136      <div className="mx-auto w-full max-w-5xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">137        <ul138          ref={gridRef}139          onMouseMove={onMove}140          onMouseLeave={onLeave}141          className="grid grid-cols-1 gap-3 @[32rem]:grid-cols-4 @[32rem]:auto-rows-[12.5rem]"142        >143          {CELLS.map((cell) => (144            <GlowTile145              key={cell.title}146              className={cell.className}147              title={cell.title}148              description={cell.description}149              image={cell.image}150            />151          ))}152        </ul>153      </div>154    </section>155  );156}