"use client"; import Link from "next/link"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; interface BentoCard { id: string; eyebrow?: string; title: string; description?: string; highlight?: string; variant?: "default" | "primary" | "muted"; } interface ButtonItem { id: string; label: string; href?: string; variant?: | "default" | "secondary" | "outline" | "ghost" | "link" | "destructive"; } interface Feature33Props { badge?: { label: string; variant?: "default" | "secondary" | "outline"; }; heading?: string; description?: string; cards?: BentoCard[]; buttons?: ButtonItem[]; className?: string; } export const feature33Demo: Feature33Props = { badge: { label: "Platform", variant: "default" }, heading: "Everything you need, nothing you don't", description: "A thoughtfully designed platform that grows with your business.", cards: [ { id: "card-1", eyebrow: "Performance", title: "Built for speed", description: "Every interaction is optimized. Pages load in milliseconds, searches return instantly, and bulk operations complete in seconds.", highlight: "50ms", variant: "primary", }, { id: "card-2", eyebrow: "Uptime", title: "Always available", highlight: "99.99%", variant: "default", }, { id: "card-3", eyebrow: "Support", title: "Response time", highlight: "<2hrs", variant: "default", }, { id: "card-4", eyebrow: "Security", title: "Enterprise-grade protection", description: "SOC 2 Type II certified. End-to-end encryption. Granular access controls. Your data stays yours.", variant: "muted", }, { id: "card-5", eyebrow: "Integrations", title: "Connect everything", description: "Works with your existing stack. 100+ native integrations, webhooks, and a full REST API.", variant: "muted", }, { id: "card-6", eyebrow: "Scale", title: "From startup to enterprise", description: "Start free, grow without limits. The same platform powers solo founders and Fortune 500 teams.", highlight: "10M+ users", variant: "default", }, ], buttons: [ { id: "btn-1", label: "Get started", href: "https://beste.co" }, { id: "btn-2", label: "View pricing", href: "https://beste.co", variant: "outline", }, ], }; export function Feature33({ badge, heading, description, cards = [], buttons = [], className, }: Feature33Props) { if (cards.length === 0) return null; const getCardStyles = (variant: BentoCard["variant"]) => { switch (variant) { case "primary": return "bg-primary text-primary-foreground"; case "muted": return "bg-muted"; default: return "bg-card border"; } }; const getHighlightStyles = (variant: BentoCard["variant"]) => { switch (variant) { case "primary": return "text-primary-foreground/80"; default: return "text-primary"; } }; return (

{(badge || heading || description) && (

{badge && (

{badge.label}

)} {heading && (

{heading}

)} {description && (

{description}

)}

)} {/* Bento Grid */}

{cards.map((card, index) => { // Explicit grid placement for perfect alignment const gridPlacements = [ "md:col-span-2 md:row-span-2 md:col-start-1 md:row-start-1", // card 1: large, top-left "md:col-span-1 md:col-start-3 md:row-start-1", // card 2: small, top-right "md:col-span-1 md:col-start-4 md:row-start-1", // card 3: small, top-right "md:col-span-2 md:col-start-3 md:row-start-2", // card 4: medium, middle-right "md:col-span-2 md:col-start-1 md:row-start-3", // card 5: medium, bottom-left "md:col-span-2 md:col-start-3 md:row-start-3", // card 6: medium, bottom-right ]; const gridClass = gridPlacements[index] || ""; return (

{card.eyebrow && (

{card.eyebrow}

)}

{card.title}

{card.description && (

{card.description}

)}

{card.highlight && (

{card.highlight}

)}

); })}

{buttons.length > 0 && (

{buttons.map((button) => ( ))}

)}

); }