"use client"; import * as React from "react"; import Link from "next/link"; import { ArrowRight, CircleDot, Facebook, Instagram, Linkedin, MessageCircle, MoreVertical, Paperclip, } from "lucide-react"; import { cn } from "@/lib/utils"; /* ── types ───────────────────────────────────────────────────── */ type Action = { href: string; label: string }; export interface FloatingCardsHeroProps { /** Text shown inside the announcement pill */ announcement?: string; /** Optional link for the announcement pill */ announcementHref?: string; /** Main headline */ title: React.ReactNode; /** Subtitle / description text */ description?: string; /** Primary CTA button */ primaryAction?: Action; /** Override the default scattered decorations. Pass `false` to hide. */ decorations?: React.ReactNode | false; className?: string; } /* ── icons ────────────────────────────────────────────────────── */ function BoltIcon({ className }: { className?: string }) { return ( ); } /* ── decorations ──────────────────────────────────────────────── */ function BoltCard({ className }: { className?: string }) { return (

); } const MEETING_ITEMS: ReadonlyArray<{ title: string; time: string }> = [ { title: "Hero block installed", time: "10:30 | shadcn CLI" }, { title: "Pricing section added", time: "14:30 | shadcn CLI" }, { title: "Theme tokens applied", time: "18:30 | manual" }, ]; function MeetingCard({ headingTone = "bg-slate-200 dark:bg-slate-700/50", className, }: { headingTone?: string; className?: string; }) { return (

Activity

Recent installs

{MEETING_ITEMS.map((item) => (

{item.title}

{item.time}

))}

); } function SocialBadge({ icon, rotation, gradient, }: { icon: React.ReactNode; rotation: string; gradient: string; }) { return (

{icon}

); } function SocialStackCard({ className }: { className?: string }) { return (

{/* folder tab */}

{/* folder body */}

Community Channels

} rotation="-rotate-[16deg]" gradient="bg-gradient-to-br from-indigo-500 to-violet-700" /> } rotation="rotate-[7deg] -ml-3" gradient="bg-gradient-to-br from-amber-400 via-rose-500 to-fuchsia-600" /> } rotation="-rotate-[10deg] -ml-3" gradient="bg-gradient-to-br from-sky-400 to-blue-700" /> } rotation="rotate-[12deg] -ml-3" gradient="bg-gradient-to-br from-blue-500 to-blue-800" />

); } const INTERVIEW_REVIEWS: ReadonlyArray<{ name: string; initials: string; caption: string; avatarTone: string; }> = [ { name: "Sara", initials: "SR", caption: "Shipped in a weekend.", avatarTone: "bg-gradient-to-br from-indigo-500 to-violet-600", }, { name: "Theo", initials: "TM", caption: "Tokens just worked.", avatarTone: "bg-gradient-to-br from-emerald-500 to-teal-600", }, ]; function InterviewNoteCard({ className }: { className?: string }) { return (

{INTERVIEW_REVIEWS.map((r, idx) => (

{r.initials}

{r.name}'s Review

{r.caption}

))}

); } function DefaultDecorations() { return ( <> ); } /* ── component ───────────────────────────────────────────────── */ export function FloatingCardsHero({ announcement, announcementHref, title, description, primaryAction, decorations, className, }: FloatingCardsHeroProps) { const decorationsNode = decorations === false ? null : (decorations ?? ); return (

{decorationsNode}

{announcement && ( {announcement} )}

{title}

{description && (

{description}

)} {primaryAction && ( {primaryAction.label} )}

); } export default FloatingCardsHero;