"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Sparkles, User, Bot, Wallet, Users, ArrowUpRight, BarChart3 } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface AiGenerativeFeatureProps { badge?: string; heading?: string; // Corregido: Ahora es opcional subheading?: string; // Corregido: Ahora es opcional className?: string; } export function AiGenerativeFeature({ badge = "Generative UI", heading = "Design at the speed of thought.", subheading = "Describe what you need, and our AI engine will generate production-ready interfaces, components, and dashboards in seconds.", className }: AiGenerativeFeatureProps) { const [phase, setPhase] = useState(0); const [key, setKey] = useState(0); // Ciclo de animación infinito para la demostración useEffect(() => { let isMounted = true; const runSequence = async () => { while (isMounted) { setKey(k => k + 1); // Reinicia las animaciones forzando un nuevo key setPhase(0); // Muestra mensaje del usuario await new Promise(r => setTimeout(r, 1500)); if (!isMounted) break; setPhase(1); // Muestra IA "pensando" await new Promise(r => setTimeout(r, 2000)); if (!isMounted) break; setPhase(2); // Muestra respuesta de IA y esqueleto/tarjetas await new Promise(r => setTimeout(r, 1500)); if (!isMounted) break; setPhase(3); // Muestra el gráfico renderizado await new Promise(r => setTimeout(r, 5000)); if (!isMounted) break; } }; runSequence(); return () => { isMounted = false; }; }, []); return (

{/* HEADER DE LA SECCIÓN */}

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

{/* BLOQUE PRINCIPAL (Altura controlada, sin scroll vertical) */}

{/* PANEL IZQUIERDO: Interfaz de Chat AI */}

Uixtra AI

Online

{/* Mensaje del Usuario */} {phase >= 0 && (

Generate a sales dashboard with revenue stats, active users, and an overview chart.

)} {/* Mensaje de la IA */} {phase >= 1 && (

{phase === 1 ? (

) : ( "I've generated the dashboard for you! It includes the requested metrics and a performance chart." )}

)}

{/* PANEL DERECHO: El "Lienzo" de Generación UI */}

{/* Fondo cuadriculado estilo "Canvas" de diseño */}

{/* FILA SUPERIOR: Tarjetas de Estadísticas */} {phase >= 2 && (

{/* Tarjeta 1: Revenue */}

Total Revenue

$45,231.89

+20.1% from last month

{/* Tarjeta 2: Users */}

Active Users

+2,350

+180.1% from last month

)} {/* FILA INFERIOR: Gráfico Renderizado */} {phase >= 3 && (

Performance Overview

{/* Barras animadas */}

{/* Líneas horizontales de fondo */}

{/* Barras dinámicas */} {[35, 55, 40, 75, 60, 95, 85].map((h, i) => (

))}

)}

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

); }