"use client"; import { Badge7 } from "@/components/beste/component/badge7"; import { Button12 } from "@/components/beste/component/button12"; import { Quote } from "lucide-react"; import { cn } from "@/lib/utils"; import Link from "next/link"; interface Badge { label: string; } interface ActionButton { label: string; href: string; } interface StatementCard { index: string; title: string; body: string; } interface StatCard { value: string; label: string; caption: string; } interface ImageCard { src: string; alt: string; caption: string; } interface QuoteCard { quote: string; author: string; role: string; } interface Bento1Labels { ctaTitle: string; ctaNote: string; } interface Bento1Props { badge?: Badge; heading?: string; description?: string; statement?: StatementCard; stat?: StatCard; image?: ImageCard; quote?: QuoteCard; button?: ActionButton; labels?: Bento1Labels; className?: string; } export const bento1Demo: Bento1Props = { badge: { label: "At a glance" }, heading: "The studio, in one grid.", description: "Six slots, one studio. A snapshot of how Auralis works — the belief we build on, the numbers, the rooms we make things in, and what people say once it ships.", statement: { index: "S/01", title: "We make monochrome feel loud.", body: "No trends to chase, no noise to add. Auralis builds brands out of type, contrast, and restraint — systems that read at a glance and still hold up a decade later.", }, stat: { value: "138", label: "Launches shipped", caption: "Since the studio opened in 2014", }, image: { src: "https://images.unsplash.com/photo-1698899114761-3a154520c816?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", alt: "Studio table layered with printed type specimens and proofs", caption: "Inside the type room", }, quote: { quote: "They kept cutting until only the idea was left standing — then made that idea unforgettable.", author: "Mara Vance", role: "Founder, Halden Press", }, button: { label: "Tour the studio", href: "https://beste.co", }, labels: { ctaTitle: "Want the long version?", ctaNote: "A 30-minute walkthrough of the whole practice.", }, }; export function Bento1({ badge, heading, description, statement, stat, image, quote, button, labels, className, }: Bento1Props) { return (

{badge && } {heading && (

{heading}

)} {description && (

{description}

)}

{/* Statement — big anchor card */} {statement && (

{statement.index}

{statement.title}

{statement.body}

)} {/* Stat — inverted figure card */} {stat && (

{stat.label}

{stat.value}

{stat.caption}

)} {/* Image — framed composition */} {image && (

{image.caption}

)} {/* Quote — editorial pull-quote */} {quote && (

)} {/* CTA — closing card */}

{labels && (

{labels.ctaTitle}

)} {labels && (

{labels.ctaNote}

)}

{button && ( )}

); }