"use client"; import { Badge } from "@/components/ui/badge"; import { Browser27 } from "@/components/beste/piece/browser27"; import { Browser28 } from "@/components/beste/piece/browser28"; import { Button } from "@/components/ui/button"; import { Calendar19 } from "@/components/beste/piece/calendar19"; import Image from "next/image"; import Link from "next/link"; import { cn } from "@/lib/utils"; type ComponentBackground = | { type: "dots" } | { type: "none" } | { type: "image"; src: string; alt?: string } | { type: "video"; src: string; alt?: string }; type RowMedia = | { type: "image"; src: string; alt?: string } | { type: "video"; src: string; alt?: string } | { type: "component"; component: React.ReactNode; background?: ComponentBackground; }; interface FeatureRow { title: string; description: string; media: RowMedia; } interface ButtonItem { label: string; href?: string; variant?: | "default" | "secondary" | "outline" | "ghost" | "link" | "destructive"; } interface Feature2Props { badge?: { label: string; variant?: "default" | "secondary" | "outline"; }; heading?: string; description?: string; buttons?: ButtonItem[]; rows?: FeatureRow[]; className?: string; } export const feature2Demo: Feature2Props = { badge: { label: "Browser-grade surfaces", variant: "secondary" }, heading: "Three pieces of the customer-facing toolkit", description: "Tiny cards that mimic real browser and calendar chrome — drop them into hero shots, marketing pages, and product walkthroughs without rebuilding the surface from scratch.", buttons: [{ label: "Read the playbook", href: "https://beste.co/playbook" }], rows: [ { title: "Site identity, made glanceable", description: "A site-info popover that mirrors the lock icon and permission list users already know from their browser. Useful for trust pages, security marketing, and developer docs.", media: { type: "component", component: , }, }, { title: "Stack the domains your customers ship", description: "Layered browser windows show the multi-tenant story without diagrams. Drop in the subdomains that matter, the layout adapts to any depth.", media: { type: "component", component: ( ), }, }, { title: "Plan the day, not the week", description: "A vertical day planner with tone-coded blocks. Pulls focus, meetings, and admin into one column so the schedule reads as a single shape.", media: { type: "component", component: ( ), }, }, ], }; export function Feature2({ badge, heading, description, buttons = [], rows = [], className, }: Feature2Props) { return (

{badge && (

{badge.label}

)} {heading && (

{heading}

)} {description && (

{description}

)} {buttons.length > 0 && (

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

)}

{rows.map((row, index) => { const reverse = index % 2 === 1; return (

{row.title}

{row.description}

); })}

); } function RowMediaSurface({ media }: { media: RowMedia }) { const componentBackground = media.type === "component" ? media.background ?? { type: "dots" } : null; const showDots = componentBackground?.type === "dots"; return (

{componentBackground?.type === "image" && ( )} {componentBackground?.type === "video" && (

); }