@decido/ui 0.0.0

package/src/components/landing/landing-feature-card.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import LandingCard from './landing-card'; // Assuming LandingCard is now a React component
+
+interface DemoLine {
+  color: string;
+  prefix: string;
+  text: string;
+}
+
+interface DemoTask {
+  color: string;
+  label: string;
+  time: string;
+  text: string;
+}
+
+interface DemoMoodInsight {
+  icon: string;
+  color: string;
+  text: string;
+}
+
+interface Demo {
+  title: string;
+  lines?: DemoLine[];
+  tasks?: DemoTask[];
+  moods?: any; // Define a more specific type if possible
+  insights?: DemoMoodInsight[];
+}
+
+interface LandingFeatureCardProps {
+  data: {
+    icon: string;
+    title: string;
+    description: string;
+    powered_by: string;
+    demo?: Demo;
+  };
+}
+
+const LandingFeatureCard: React.FC<LandingFeatureCardProps> = ({ data }) => {
+  const getIconWrapperClass = (): string => {
+    if (data.icon.includes('fa-brain')) return 'from-cyan-500 via-cyan-600 to-cyan-700';
+    if (data.icon.includes('fa-journal-whills')) return 'from-yellow-500 via-orange-500 to-red-500';
+    return 'from-purple-500 via-purple-600 to-purple-700';
+  };
+
+  const getTaglineBorderClass = (): string => {
+    if (data.icon.includes('fa-brain')) return 'bg-cyan-900/30 border-cyan-500/30 text-cyan-300';
+    if (data.icon.includes('fa-journal-whills')) return 'bg-yellow-900/30 border-yellow-500/30 text-yellow-300';
+    return 'bg-purple-900/30 border-purple-500/30 text-purple-300';
+  };
+
+  const renderDemo = () => {
+    const { demo } = data;
+    if (!demo) return null;
+
+    if (demo.lines) {
+      return (
+        <div className="glass rounded-2xl p-6 text-left mb-6 font-mono text-sm space-y-3">
+          <div className="text-green-400 mb-4 flex items-center">
+            <i className="fas fa-terminal mr-3"></i>{demo.title}
+          </div>
+          {demo.lines.map((line, index) => (
+            <div key={index} className="flex items-start">
+              <span className={`${line.color} mr-3`}>{line.prefix}</span>
+              <span className="text-gray-300">{line.text}</span>
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    if (demo.tasks) {
+      return (
+        <div className="glass rounded-2xl p-6 mb-6 space-y-3">
+          <div className="flex items-center justify-between mb-4">
+            <span className="text-sm font-semibold text-gray-300">{demo.title}</span>
+            <div className="flex items-center">
+              <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse mr-2"></div>
+              <span className="text-xs text-green-400 font-mono">ACTIVO</span>
+            </div>
+          </div>
+          {demo.tasks.map((task, index) => (
+            <div key={index} className={`bg-${task.color}-900/40 border border-${task.color}-500/30 rounded-lg p-3 text-sm`}>
+              <div className="flex items-center justify-between">
+                <span className={`text-${task.color}-300`} dangerouslySetInnerHTML={{ __html: task.label }}></span>
+                <span className="text-xs text-gray-400">{task.time}</span>
+              </div>
+              <div className="text-gray-300 mt-1">{task.text}</div>
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    if (demo.moods) {
+      return (
+        <div className="glass rounded-2xl p-6 mb-6">
+          <div className="text-sm text-gray-300 mb-4 font-semibold">{demo.title}</div>
+          <div className="flex items-end justify-between h-20 mb-4 px-2">
+            <div className="w-4 bg-red-400 rounded-t" style={{ height: '30%' }}></div>
+            <div className="w-4 bg-yellow-400 rounded-t" style={{ height: '50%' }}></div>
+            <div className="w-4 bg-green-400 rounded-t" style={{ height: '70%' }}></div>
+            <div className="w-4 bg-green-400 rounded-t" style={{ height: '65%' }}></div>
+            <div className="w-4 bg-blue-400 rounded-t" style={{ height: '80%' }}></div>
+            <div className="w-4 bg-purple-400 rounded-t" style={{ height: '85%' }}></div>
+            <div className="w-4 bg-cyan-400 rounded-t" style={{ height: '75%' }}></div>
+          </div>
+          <div className="text-xs text-gray-400 text-left space-y-2">
+            {demo.insights?.map((insight, index) => (
+              <div key={index} className="flex items-center">
+                <i className={`${insight.icon} ${insight.color} mr-2`}></i>
+                <span>{insight.text}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+    }
+    
+    return null;
+  };
+
+  return (
+    <LandingCard>
+      <div className="feature-card glass-premium rounded-3xl p-10 text-center h-full flex flex-col">
+        <div className="flex-grow">
+          <div className={`w-20 h-20 bg-linear-to-br ${getIconWrapperClass()} rounded-3xl flex items-center justify-center mx-auto mb-6 shadow-2xl animate-pulse-glow`}>
+            <i className={`${data.icon} text-3xl text-white`}></i>
+          </div>
+          <h3 className="text-3xl font-bold mb-4 gradient-text">{data.title}</h3>
+          <p className="text-lg text-gray-300 leading-relaxed mb-8" dangerouslySetInnerHTML={{ __html: data.description }}></p>
+          
+          {renderDemo()}
+        </div>
+
+        <div className="bg-purple-900/30 rounded-xl p-4 border border-purple-500/30 mt-auto">
+          <div className={`text-sm font-semibold ${getTaglineBorderClass()}`}>
+            <i className="fas fa-magic mr-2"></i>
+            {data.powered_by}
+          </div>
+        </div>
+      </div>
+    </LandingCard>
+  );
+};
+
+export default LandingFeatureCard;

package/src/components/landing/landing-footer.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+interface SocialLink {
+  href: string;
+  icon: string;
+}
+
+interface FooterLink {
+  href: string;
+  text: string;
+}
+
+interface LandingFooterProps {
+  data: {
+    socials?: SocialLink[];
+    copyright: string;
+    links?: FooterLink[];
+  };
+}
+
+const LandingFooter: React.FC<LandingFooterProps> = ({ data }) => {
+  if (!data) return null;
+
+  return (
+    <footer className='py-20 bg-gray-900 border-t border-gray-800 relative'>
+      <div className='container mx-auto px-6'>
+        <div className='text-center mb-12'>
+          <div className='flex items-center justify-center space-x-4 mb-6'>
+            <div className='w-12 h-12 bg-linear-to-br from-purple-500 via-blue-500 to-cyan-500 rounded-xl flex items-center justify-center shadow-xl'>
+              <i className='fas fa-brain text-white text-xl'></i>
+            </div>
+            <div>
+              <div className='text-2xl font-bold gradient-text'>Decido</div>
+              <div className='text-sm text-gray-400 font-mono'>Tu Arquitecto de Vida IA</div>
+            </div>
+          </div>
+          
+          <p className='text-gray-400 max-w-2xl mx-auto mb-8'>
+            Construyendo el futuro del crecimiento personal, una vida transformada a la vez.
+          </p>
+          
+          <div className='flex items-center justify-center space-x-8 text-gray-400'>
+            {data.socials?.map((social, index) => (
+              <a key={index} href={social.href} className='hover:text-white transition-colors hover:scale-110 transform'>
+                <i className={`${social.icon} text-2xl`}></i>
+              </a>
+            ))}
+          </div>
+        </div>
+        
+        <div className='border-t border-gray-800 pt-8 text-center'>
+          <div className='flex flex-col md:flex-row items-center justify-between text-gray-500 text-sm'>
+            <p>{data.copyright}</p>
+            <div className='flex items-center space-x-6 mt-4 md:mt-0'>
+              {data.links?.map((link, index) => (
+                <a key={index} href={link.href} className='hover:text-white transition-colors'>{link.text}</a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default LandingFooter;

package/src/components/landing/landing-header.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+interface NavLink {
+  href: string;
+  text: string;
+}
+
+interface LandingHeaderProps {
+  data: {
+    logo?: {
+      icon: string;
+      text: string;
+      version: string;
+    };
+    links?: NavLink[];
+    cta?: {
+      text: string;
+      onClick: () => void;
+    };
+  };
+}
+
+const LandingHeader: React.FC<LandingHeaderProps> = ({ data }) => {
+  if (!data) return null;
+
+  return (
+    <nav className='fixed top-0 w-full z-40 transition-all duration-300' id='navbar'>
+      <div className='container mx-auto px-6 py-4'>
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center space-x-3'>
+            <div className='w-10 h-10 bg-linear-to-br from-purple-500 via-blue-500 to-cyan-500 rounded-xl flex items-center justify-center shadow-lg animate-pulse-glow'>
+              <i className={`${data.logo?.icon} text-white`}></i>
+            </div>
+            <div>
+              <div className='text-xl font-bold gradient-text'>{data.logo?.text}</div>
+              <div className='text-xs text-gray-400 font-mono'>{data.logo?.version}</div>
+            </div>
+          </div>
+          
+          <div className='hidden md:flex items-center space-x-8'>
+            {data.links?.map((link, index) => (
+              <a key={index} href={link.href} className='text-gray-300 hover:text-white transition-colors font-medium'>{link.text}</a>
+            ))}
+          </div>
+          
+          <button onClick={data.cta?.onClick} className="btn-premium px-6 py-3 rounded-xl font-semibold text-sm">
+            <span className="relative z-10">{data.cta?.text}</span>
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default LandingHeader;

package/src/components/landing/landing-hero.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+
+interface Announcement {
+  badge: string;
+  status: string;
+}
+
+interface Stat {
+  id?: string;
+  value: string;
+  label: string;
+  sublabel: string;
+}
+
+interface LandingHeroProps {
+  data: {
+    announcement?: Announcement;
+    title?: string[];
+    subtitle?: string;
+    typing_text?: string;
+    stats?: Stat[];
+  };
+}
+
+const LandingHero: React.FC<LandingHeroProps> = ({ data }) => {
+  if (!data) return null;
+
+  const scrollToFeatures = () => {
+    document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  return (
+    <section className="hero-bg min-h-screen flex items-center justify-center relative overflow-hidden">
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="particle particle-1" style={{ top: '20%', left: '10%' }}></div>
+        <div className="particle particle-2" style={{ top: '60%', left: '80%' }}></div>
+        <div className="particle particle-3" style={{ top: '80%', left: '20%' }}></div>
+        <div className="particle particle-1" style={{ top: '30%', left: '70%', animationDelay: '1s' }}></div>
+        <div className="particle particle-2" style={{ top: '70%', left: '15%', animationDelay: '3s' }}></div>
+        <div className="particle particle-3" style={{ top: '40%', left: '85%', animationDelay: '5s' }}></div>
+      </div>
+
+      <div className="container mx-auto px-6 relative z-20 pt-20">
+        <div className="text-center max-w-7xl mx-auto">
+          <div className="scroll-reveal inline-flex items-center glass-premium rounded-full px-8 py-4 mb-12">
+            <div className="flex items-center">
+              <div className="w-3 h-3 bg-linear-to-r from-green-400 to-emerald-400 rounded-full mr-4 animate-pulse"></div>
+              <span className="text-sm font-medium mr-3">
+                <span className="gradient-text font-bold">{data.announcement?.badge}</span>
+              </span>
+              <div className="bg-red-500 text-white text-xs px-2 py-1 rounded-full font-bold">
+                {data.announcement?.status}
+              </div>
+            </div>
+          </div>
+
+          <div className="mb-16">
+            {data.title?.map((line: string, index: number) => (
+              <h1 key={index} className="text-6xl md:text-8xl lg:text-9xl font-black mb-8 leading-tight scroll-reveal" style={{ animationDelay: `${index * 0.2}s` }} dangerouslySetInnerHTML={{ __html: line }}></h1>
+            ))}
+          </div>
+
+          <div className="mb-16 scroll-reveal" style={{ animationDelay: '0.4s' }}>
+            <div className="text-2xl md:text-4xl text-gray-300 mb-6 leading-relaxed max-w-5xl mx-auto" dangerouslySetInnerHTML={{ __html: data.subtitle || '' }}>
+            </div>
+            <div className="text-lg md:text-xl text-gray-400 font-mono mb-8">
+              <span className="typing-text">{data.typing_text}</span>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-16 scroll-reveal" style={{ animationDelay: '0.6s' }}>
+            {data.stats?.map((stat, index) => (
+              <div key={index} className="glass-premium rounded-2xl p-6 hover:scale-105 transition-transform">
+                <div className="text-4xl font-black gradient-text mb-2" id={stat.id || ''}>{stat.value}</div>
+                <div className="text-sm text-gray-400 font-mono uppercase tracking-wide">{stat.label}</div>
+                <div className="text-xs text-gray-500 mt-1">{stat.sublabel}</div>
+              </div>
+            ))}
+          </div>
+
+          <div className="scroll-reveal animate-bounce" style={{ animationDelay: '1s' }}>
+            <div className="inline-flex flex-col items-center text-gray-400 hover:text-white transition-colors cursor-pointer"
+              onClick={scrollToFeatures}>
+              <span className="text-sm font-mono mb-2">Descubre más</span>
+              <i className="fas fa-chevron-down text-2xl"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default LandingHero;

package/src/components/landing/landing-page.tsx

@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from 'react';
+import LandingHeader from './landing-header';
+import LandingHero from './landing-hero';
+import LandingWaitlist from './landing-waitlist';
+import LandingSection from './landing-section';
+import LandingFeatureCard from './landing-feature-card';
+import LandingTestimonialCard from './landing-testimonial-card';
+import LandingCta from './landing-cta';
+import LandingFooter from './landing-footer';
+
+interface LandingData {
+  title: string;
+  description: string;
+  navigation: any;
+  hero: any;
+  waitlist: any;
+  features: any;
+  integral_system: any;
+  testimonials: any;
+  pricing: any;
+  cta: any;
+  footer: any;
+}
+
+const LandingPage: React.FC = () => {
+  const [data, setData] = useState<LandingData | null>(null);
+
+  useEffect(() => {
+    const fetchLandingData = async () => {
+      try {
+        const response = await fetch('/data.json');
+        const jsonData = await response.json();
+        setData(jsonData);
+      } catch (error) {
+        console.error('Error fetching landing data:', error);
+      }
+    };
+
+    fetchLandingData();
+  }, []);
+
+  if (!data) {
+    return null; // El preloader del index.html se encargará de la espera
+  }
+
+  const scrollToWaitlist = () => {
+    document.getElementById('waitlist-section')?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  return (
+    <>
+      <LandingHeader data={{ ...data.navigation, cta: { text: data.navigation.cta.text, onClick: scrollToWaitlist } }} />
+      
+      <main>
+        <LandingHero data={data.hero} />
+        
+        <div className="container mx-auto px-6">
+          <LandingWaitlist data={data.waitlist} />
+        </div>
+
+        <LandingSection data={data.features}>
+          <div className="grid lg:grid-cols-3 gap-12 max-w-8xl mx-auto">
+            {data.features.main_features.map((feature: any, index: number) => (
+              <div key={index} className="scroll-reveal" style={{ animationDelay: `${index * 0.1}s` }}>
+                <LandingFeatureCard data={feature} />
+              </div>
+            ))}
+          </div>
+        </LandingSection>
+        
+        <LandingSection data={data.integral_system}>
+          <div className="grid lg:grid-cols-2 gap-12 max-w-7xl mx-auto mb-32">
+            {data.integral_system.features.map((feature: any, index: number) => (
+              <div key={index} className="feature-card glass-premium rounded-3xl p-10 scroll-reveal-left">
+                <div className="flex items-start mb-6">
+                  <div className="w-20 h-20 bg-linear-to-br from-orange-500 to-yellow-500 rounded-3xl flex-shrink-0 flex items-center justify-center mr-8 shadow-2xl animate-pulse-glow">
+                    <i className={`${feature.icon} text-4xl text-white`}></i>
+                  </div>
+                  <div>
+                    <h3 className="text-3xl font-bold mb-3 gradient-text">{feature.title}</h3>
+                    <p className="text-lg text-gray-300 leading-relaxed">{feature.description}</p>
+                  </div>
+                </div>
+                <div className="bg-yellow-900/30 rounded-xl p-4 border border-yellow-500/30">
+                  <div className="text-sm text-yellow-300 font-semibold text-center">
+                    <i className="fas fa-flag-checkered mr-2"></i>
+                    {feature.tagline}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="mt-32 text-center scroll-reveal">
+            <h3 className="text-4xl font-bold mb-12" dangerouslySetInnerHTML={{ __html: data.integral_system.gamification.title }}></h3>
+            <p className="text-xl text-gray-300 max-w-3xl mx-auto mb-16">{data.integral_system.gamification.subtitle}</p>
+            <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+              {data.integral_system.gamification.cards.map((card: any, index: number) => (
+                <div key={index} className="glass-strong rounded-2xl p-6">
+                  <div className="text-yellow-400 text-5xl mb-4"><i className={card.icon}></i></div>
+                  <h4 className="text-xl font-bold mb-2">{card.title}</h4>
+                  <p className="text-gray-400">{card.description}</p>
+                  <div className="mt-4 bg-gray-900/50 rounded-full p-3 font-mono text-lg" dangerouslySetInnerHTML={{ __html: card.stat }}>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </LandingSection>
+
+        <LandingSection data={data.testimonials}>
+          <div className="grid lg:grid-cols-3 gap-12 max-w-7xl mx-auto">
+            {data.testimonials.reviews.map((testimonial: any, index: number) => (
+              <div key={index} className="scroll-reveal" style={{ animationDelay: `${index * 0.1}s` }}>
+                <LandingTestimonialCard data={testimonial} />
+              </div>
+            ))}
+          </div>
+        </LandingSection>
+
+        <LandingSection data={data.pricing}>
+          <div className="max-w-5xl mx-auto">
+            <div className="glass-premium rounded-3xl p-12 mb-16 scroll-reveal">
+            </div>
+            <div className="glass-premium rounded-3xl p-12 text-center scroll-reveal">
+            </div>
+          </div>
+        </LandingSection>
+        
+        <LandingCta
+          title={data.cta.title}
+          subtitle={data.cta.subtitle}
+          buttonText={data.cta.button_text}
+          trustText={data.cta.trust_text}
+          onButtonClick={scrollToWaitlist}
+        />
+      </main>
+
+      <LandingFooter data={data.footer} />
+    </>
+  );
+};
+
+export default LandingPage;

package/src/components/landing/landing-section.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+interface LandingSectionProps {
+  data?: {
+    id?: string;
+    header?: {
+      badge?: string;
+      title: string;
+      subtitle: string;
+    };
+  };
+  children: React.ReactNode;
+}
+
+const LandingSection: React.FC<LandingSectionProps> = ({ data, children }) => {
+  if (!data?.header) {
+    return <>{children}</>;
+  }
+
+  return (
+    <section id={data.id} className='py-40 bg-linear-to-b from-gray-900/50 to-gray-800/50 relative'>
+      <div className='container mx-auto px-6'>
+        <div className='text-center mb-32 scroll-reveal'>
+          {data.header.badge && (
+            <div className='inline-block mb-6'>
+              <span className='bg-linear-to-r from-purple-500/20 to-cyan-500/20 border border-purple-500/30 rounded-full px-8 py-3 text-sm font-mono font-bold uppercase tracking-wider'>
+                {data.header.badge}
+              </span>
+            </div>
+          )}
+          <h2 className='text-5xl md:text-7xl font-black mb-8 leading-tight' dangerouslySetInnerHTML={{ __html: data.header.title }}>
+          </h2>
+          <p className='text-xl md:text-2xl text-gray-300 max-w-4xl mx-auto leading-relaxed' dangerouslySetInnerHTML={{ __html: data.header.subtitle }}>
+          </p>
+        </div>
+        {children}
+      </div>
+    </section>
+  );
+};
+
+export default LandingSection;

package/src/components/landing/landing-testimonial-card.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import LandingCard from './landing-card'; // Assuming LandingCard is now a React component
+
+interface LandingTestimonialCardProps {
+  data: {
+    author: string;
+    role: string;
+    quote: string;
+    tagline: string;
+  };
+}
+
+const LandingTestimonialCard: React.FC<LandingTestimonialCardProps> = ({ data }) => {
+  if (!data) return null;
+
+  const authorInitials = data.author?.split(' ').map(n => n[0]).join('');
+
+  return (
+    <LandingCard>
+      <div className="glass-premium rounded-3xl p-10 hover:scale-105 transition-all duration-500 h-full flex flex-col">
+        <div className="flex-grow">
+          <div className="flex items-center mb-8">
+            <div className="w-16 h-16 bg-linear-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center mr-6 text-xl font-bold shadow-xl flex-shrink-0">
+              {authorInitials}
+            </div>
+            <div>
+              <h4 className="text-xl font-bold text-white">{data.author}</h4>
+              <p className="text-gray-400">{data.role}</p>
+              <div className="flex text-yellow-400 mt-2">
+                {[...Array(5)].map((_, i) => (
+                  <i key={i} className="fas fa-star"></i>
+                ))}
+              </div>
+            </div>
+          </div>
+          <blockquote className="text-gray-300 text-lg italic leading-relaxed mb-6" dangerouslySetInnerHTML={{ __html: `"${data.quote}"` }}>
+          </blockquote>
+        </div>
+        <div className="bg-purple-900/30 rounded-xl p-4 border border-purple-500/30 mt-auto">
+          <div className="text-sm text-purple-300 font-semibold">
+            <i className="fas fa-trophy mr-2"></i>
+            {data.tagline}
+          </div>
+        </div>
+      </div>
+    </LandingCard>
+  );
+};
+
+export default LandingTestimonialCard;