"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Command, KanbanSquare, LineChart, Zap, Search, CheckCircle2, MoreHorizontal, ArrowUpRight } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface CarouselFeature { id: string; title: string; description: string; icon: React.ElementType; Visual: React.FC; } export interface ProgressiveFeatureCarouselProps { badge?: string; heading?: string; subheading?: string; features?: CarouselFeature[]; className?: string; autoPlayInterval?: number; } // --- VISUAL COMPONENTS --- const CommandVisual = () => (

Deploy to production...

⌘K

Suggested Actions

Deploy Project

↵

Run Build Command

Run Unit Tests

); const KanbanVisual = () => (

{/* Column 1 */}

To Do

{/* Column 2 */}

In Progress

{/* Animated Card */}

Integrate Stripe Payments

Connect the new billing portal to the production environment.

3/5

{/* Column 3 - CONFLICTO CSS ARREGLADO (sin base flex + hidden) */}

Done

); const AnalyticsVisual = () => (

Weekly Active Users

124,592

24%

{/* Background Grid */}

{[1, 2, 3, 4].map((i) => (

))}

{/* Animated Area Chart */}

{/* Floating Data Point */} Peak: 42k

); // --- DEFAULT DATA --- const defaultFeatures: CarouselFeature[] = [ { id: "command", title: "Command Palette", description: "Navigate your entire workspace, run scripts, and deploy changes without ever touching your mouse using the global command menu.", icon: Command, Visual: CommandVisual }, { id: "kanban", title: "Agile Workflows", description: "Keep your team aligned with real-time syncing boards. Drag, drop, and manage complex sprints with an interface designed for speed.", icon: KanbanSquare, Visual: KanbanVisual }, { id: "analytics", title: "Instant Analytics", description: "Monitor your key performance indicators in real-time. Beautiful, customizable charts that render massive datasets in milliseconds.", icon: LineChart, Visual: AnalyticsVisual } ]; // --- MAIN COMPONENT --- export function ProgressiveFeatureCarousel({ badge = "Workspace Features", heading = "Everything you need to ship faster.", subheading = "A powerful suite of tools seamlessly integrated into one unified platform. Stop switching tabs and start building.", features = defaultFeatures, className, autoPlayInterval = 5000 }: ProgressiveFeatureCarouselProps) { const [activeIndex, setActiveIndex] = useState(0); // Auto-play logic useEffect(() => { const timer = setInterval(() => { setActiveIndex((current) => (current + 1) % features.length); }, autoPlayInterval); return () => clearInterval(timer); }, [activeIndex, features.length, autoPlayInterval]); return (

{/* HEADER SECTION */}

{badge && ( {badge} )} {heading} {subheading}

{/* CAROUSEL SECTION */}

{/* LEFT: PROGRESSIVE LIST */}

{features.map((feature, index) => { const isActive = activeIndex === index; const Icon = feature.icon; return ( ); })}

{/* RIGHT: DYNAMIC VISUAL MOCKUP */}

{/* Mockup Header (Mac Dots) */}

{React.createElement(features[activeIndex].Visual)}

); } export default function ProgressiveFeatureCarouselDemo() { return (

); }

{feature.title}