Merge version_4_1782159457750 into main

Merge version_4_1782159457750 into main

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
+  --background: #fffafa;
   --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
+  --foreground: #1a0000;
+  --primary-cta: #e63946;
+  --primary-cta-text: #fffafa;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --secondary-cta-text: #1a0000;
+  --accent: #f5c4c7;
+  --background-accent: #f09199;
 
   /* @layout/border-radius/rounded */
   --radius: 1rem;

src/pages/HomePage.tsx

@@ -1,268 +1,229 @@
-import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
-import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
-import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
-import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
-import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
-import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+"use client";
 
-export default function HomePage() {
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import { MessageCircle, Instagram, Mail, MapPin, Phone, ChevronRight, Star, Shield, Zap } from 'lucide-react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import FeaturesSection from './HomePage/sections/Features';
+import ProductsSection from './HomePage/sections/Products';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroBillboardTiltedCarousel
-      tag="JEMA SUPLEMENTOS"
-      title="Premium Supplements for Elite Performance"
-      description="Scientifically formulated, visibly transformative. Experience the difference premium nutrition delivers to your body and confidence."
-      primaryButton={{
-        text: "Explorar Colección",
-        href: "#products",
-      }}
-      secondaryButton={{
-        text: "Saber Más",
-        href: "#about",
-      }}
-      items={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/shadow-male-showing-muscles_23-2148019518.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/cream-container-mock-up-flat-lay_23-2148328686.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/fitness-man-training-outdoors-living-active-healthy_1328-2993.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/protein-gym_23-2151980074.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/brain-booster-pills-still-life_23-2150769476.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/protein-gym_23-2151980052.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutMediaOverlay
-      tag="Nuestra Filosofía"
-      title="JEMA: Combustible para tu Fuerza"
-      description="En JEMA, entendemos que tu cuerpo es tu templo y tu herramienta de progreso. Nos dedicamos a proporcionar suplementos de calidad superior, diseñados para atletas que no se conforman con lo ordinario. Cada ingrediente es seleccionado con rigor científico para garantizar resultados reales y una transformación visible."
-      imageSrc="https://storage.googleapis.com/webild/users/user_3FSOY6JtmB8X3VfdVqs0NvIYSye/uploaded-1782065399321-7bb42bxu.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <section className="py-24 bg-background relative overflow-hidden" id="about">
+    <div className="w-content-width mx-auto px-4 md:px-6">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+        <motion.div
+          initial={{ opacity: 0, x: -20 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true }}
+          className="space-y-6"
+        >
+          <h2 className="text-3xl md:text-5xl font-bold uppercase tracking-tight text-foreground">
+            Nuestra <span className="text-accent">Filosofía</span>
+          </h2>
+          <div className="card p-8 border-l-4 border-accent bg-black/50 backdrop-blur-sm">
+            <p className="text-lg text-gray-300 leading-relaxed">
+              Creemos en la transparencia absoluta y en el rendimiento sin compromisos. 
+              Nuestros suplementos están formulados con ingredientes respaldados por la ciencia, 
+              sin mezclas patentadas ocultas ni rellenos innecesarios. Solo lo que tu cuerpo 
+              necesita para alcanzar el siguiente nivel.
+            </p>
+            <p className="text-lg text-gray-300 leading-relaxed mt-4">
+              Cada producto que desarrollamos pasa por rigurosas pruebas de calidad para 
+              garantizar pureza, potencia y resultados reales. Tu progreso es nuestra misión.
+            </p>
+          </div>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, x: 20 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true }}
+          className="relative h-[500px] rounded-2xl overflow-hidden card border border-white/10"
+        >
+          <img 
+            src="https://images.unsplash.com/photo-1593095948071-474c5cc2989d?auto=format&fit=crop&q=80&w=800" 
+            alt="Suplementos de alta calidad" 
+            className="w-full h-full object-cover opacity-80 hover:opacity-100 transition-opacity duration-500"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
+          <div className="absolute bottom-6 left-6 right-6">
+            <div className="flex items-center gap-3 text-accent font-bold text-xl">
+              <Shield className="w-6 h-6" />
+              <span>Calidad Premium Garantizada</span>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  </section>
 
-  <div id="features" data-section="features">
-    <SectionErrorBoundary name="features">
-          <FeaturesMediaCarousel
-      tag="Diferenciadores"
-      title="Por qué elegir JEMA"
-      description="Calidad, transparencia y rendimiento en cada servicio."
-      items={[
-        {
-          title: "Ingredientes Premium",
-          description: "Certificados para máxima pureza.",
-          buttonIcon: "Shield",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-sportsman-exercising-with-barbell-cross-training-gym_637285-2501.jpg",
-        },
-        {
-          title: "Resultados Comprobados",
-          description: "Respaldados por la ciencia deportiva.",
-          buttonIcon: "Zap",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-with-matcha-tea_23-2150163605.jpg",
-        },
-        {
-          title: "Lifestyle de Élite",
-          description: "Más que suplementos, un estilo de vida.",
-          buttonIcon: "Award",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-trainer-looking-woman-working-out-gym_23-2147827939.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturesSection />
 
-  <div id="products" data-section="products">
-    <SectionErrorBoundary name="products">
-          <FeaturesImageBento
-      tag="Colección"
-      title="Nuestra Gama de Productos"
-      description="Potencia tu rendimiento con nuestra selección premium."
-      items={[
-        {
-          title: "Creatina Pura",
-          description: "Fuerza explosiva garantizada.",
-          imageSrc: "http://img.b2bpic.net/free-photo/pills-pink-background-flat-lay-medicine-concept_169016-19830.jpg",
-        },
-        {
-          title: "Proteína Whey",
-          description: "Recuperación muscular rápida.",
-          imageSrc: "http://img.b2bpic.net/free-photo/brain-booster-pills-container-still-life_23-2150760052.jpg",
-        },
-        {
-          title: "BCAA's Complex",
-          description: "Protección muscular avanzada.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-holding-cup-white-wall_114579-81712.jpg",
-        },
-        {
-          title: "Pre-Entreno",
-          description: "Enfoque y energía ilimitada.",
-          imageSrc: "http://img.b2bpic.net/free-photo/chocolate-drops-near-yogurt_23-2147895735.jpg",
-        },
-        {
-          title: "Multivitamínicos",
-          description: "Optimización de salud global.",
-          imageSrc: "http://img.b2bpic.net/free-photo/concentrated-fitness-lady-sitting-outdoors-drinking-water_171337-8196.jpg",
-        },
-        {
-          title: "Omega 3 Ultra",
-          description: "Salud cardiovascular total.",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-drinking-water-fitness-club_23-2147949478.jpg",
-        },
-        {
-          title: "Glutamina",
-          description: "Recuperación profunda.",
-          imageSrc: "http://img.b2bpic.net/free-photo/healthy-nutrition-clean-eating-concept-ingredients-oatmeal-with-blueberry-almond-nut-yoghurt-preparing-yummy-sweet-nutrient-low-calorie-dessert-breakfast-time-muesli-with-fruits_273609-38086.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <section className="py-24 bg-black relative" id="products">
+    <div className="w-content-width mx-auto px-4 md:px-6">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        className="text-center mb-16"
+      >
+        <h2 className="text-3xl md:text-5xl font-bold uppercase tracking-tight text-foreground mb-4">
+          Nuestros <span className="text-accent">Productos</span>
+        </h2>
+        <p className="text-gray-400 max-w-2xl mx-auto text-lg">
+          Fórmulas avanzadas diseñadas para maximizar tu rendimiento y recuperación.
+        </p>
+      </motion.div>
 
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsSimpleCards
-      tag="Impacto"
-      title="JEMA en Números"
-      description="Creciendo con nuestra comunidad de atletas."
-      metrics={[
-        {
-          value: "100%",
-          description: "Calidad garantizada",
-        },
-        {
-          value: "500+",
-          description: "Atletas transformados",
-        },
-        {
-          value: "12",
-          description: "Países alcanzados",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {[
+          {
+            name: "Proteína Whey Isolate",
+            desc: "Máxima pureza y rápida absorción para recuperación muscular.",
+            img: "https://images.unsplash.com/photo-1579722821273-0f6c7d44362f?auto=format&fit=crop&q=80&w=600",
+            price: "$1,200 MXN"
+          },
+          {
+            name: "Creatina Monohidratada",
+            desc: "Aumenta fuerza, potencia y volumen muscular.",
+            img: "https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?auto=format&fit=crop&q=80&w=600",
+            price: "$600 MXN"
+          },
+          {
+            name: "Pre-Workout Extremo",
+            desc: "Energía explosiva y enfoque láser para tus entrenamientos.",
+            img: "https://images.unsplash.com/photo-1550345332-09e3ac987658?auto=format&fit=crop&q=80&w=600",
+            price: "$850 MXN"
+          },
+          {
+            name: "BCAAs Ratio 2:1:1",
+            desc: "Aminoácidos ramificados para prevenir el catabolismo.",
+            img: "https://images.unsplash.com/photo-1594882645126-14020914d58d?auto=format&fit=crop&q=80&w=600",
+            price: "$550 MXN"
+          },
+          {
+            name: "EAAs Esenciales",
+            desc: "Espectro completo de aminoácidos para síntesis proteica.",
+            img: "https://images.unsplash.com/photo-1622484211148-7124cb272964?auto=format&fit=crop&q=80&w=600",
+            price: "$700 MXN"
+          },
+          {
+            name: "Ashwagandha KSM-66",
+            desc: "Reduce el estrés y optimiza la recuperación hormonal.",
+            img: "https://images.unsplash.com/photo-1611241893603-3c319f4cb8fd?auto=format&fit=crop&q=80&w=600",
+            price: "$450 MXN"
+          }
+        ].map((product, idx) => (
+          <motion.div
+            key={idx}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: idx * 0.1 }}
+            className="card group overflow-hidden border border-white/5 hover:border-accent/50 transition-colors flex flex-col"
+          >
+            <div className="h-64 overflow-hidden bg-zinc-900 relative">
+              <img 
+                src={product.img} 
+                alt={product.name} 
+                className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 opacity-80 group-hover:opacity-100"
+              />
+              <div className="absolute top-4 right-4 bg-accent text-black font-bold px-3 py-1 rounded-full text-sm">
+                {product.price}
+              </div>
+            </div>
+            <div className="p-6 flex flex-col flex-grow">
+              <h3 className="text-xl font-bold text-white mb-2">{product.name}</h3>
+              <p className="text-gray-400 text-sm mb-6 flex-grow">{product.desc}</p>
+              <button className="w-full primary-button flex items-center justify-center gap-2 mt-auto">
+                Comprar Ahora <ChevronRight className="w-4 h-4" />
+              </button>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  </section>
 
-  <div id="social-proof" data-section="social-proof">
-    <SectionErrorBoundary name="social-proof">
-          <SocialProofMarquee
-      tag="Partners"
-      title="Marcas que confían en nosotros"
-      names={[
-        "XTEND",
-        "MUSCLETECH",
-        "OPTIMUM",
-        "CELLUCOR",
-        "DYNAMATIZE",
-        "BSN",
-        "UNIVERSAL",
-      ]}
-      description="Calidad superior respaldada por líderes del sector."
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialMarqueeCards
-      tag="Testimonios"
-      title="Historias de Éxito"
-      description="Mira lo que dicen nuestros atletas."
-      testimonials={[
-        {
-          name: "Carlos R.",
-          role: "Crossfitter",
-          quote: "La calidad de JEMA es inigualable.",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-689.jpg",
-        },
-        {
-          name: "Lucía M.",
-          role: "Bodybuilder",
-          quote: "Se nota la diferencia en la recuperación.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-sportsman-holds-hand-chin-dark-background_613910-19200.jpg",
-        },
-        {
-          name: "David S.",
-          role: "Entrenador",
-          quote: "Resultados visibles y seguros.",
-          imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-wearing-sport-clothes_329181-13199.jpg",
-        },
-        {
-          name: "Sofía G.",
-          role: "Atleta Fitness",
-          quote: "Energía constante siempre.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-sportsman-holds-hand-chin-dark-background_613910-5321.jpg",
-        },
-        {
-          name: "Javier L.",
-          role: "Powerlifter",
-          quote: "Mi fuerza está en otro nivel.",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-gym_23-2147789567.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSimple
-      tag="Preguntas"
-      title="Preguntas Frecuentes"
-      description="Resolvemos tus dudas sobre suplementación."
-      items={[
-        {
-          question: "¿Son seguros los productos?",
-          answer: "Totalmente, trabajamos con marcas certificadas y pureza garantizada.",
-        },
-        {
-          question: "¿Cuánto tardan en llegar?",
-          answer: "Envíos nacionales en 24-48 horas hábiles.",
-        },
-        {
-          question: "¿Cómo elijo mi proteína?",
-          answer: "Contacta con nuestro equipo para una asesoría personalizada según tus metas.",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Contacto"
-      text="Comienza hoy tu transformación con JEMA."
-      primaryButton={{
-        text: "WhatsApp",
-        href: "https://wa.me/1234567890",
-      }}
-      secondaryButton={{
-        text: "Instagram",
-        href: "https://instagram.com/jema.suplementos",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <section className="py-24 bg-background relative" id="contact">
+    <div className="w-content-width mx-auto px-4 md:px-6">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
+        <motion.div
+          initial={{ opacity: 0, x: -20 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true }}
+        >
+          <h2 className="text-3xl md:text-5xl font-bold uppercase tracking-tight text-foreground mb-6">
+            Ponte en <span className="text-accent">Contacto</span>
+          </h2>
+          <p className="text-gray-400 text-lg mb-10">
+            ¿Tienes dudas sobre qué suplemento es ideal para tus objetivos? Escríbenos y te asesoramos personalmente.
+          </p>
+          
+          <div className="space-y-6">
+            <a href="https://wa.me/526145105622" target="_blank" rel="noreferrer" className="flex items-center gap-4 p-4 card hover:border-accent/50 transition-colors group">
+              <div className="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center text-accent group-hover:bg-accent group-hover:text-black transition-colors">
+                <MessageCircle className="w-6 h-6" />
+              </div>
+              <div>
+                <p className="text-sm text-gray-400">WhatsApp</p>
+                <p className="text-lg font-bold text-white">614 510 5622</p>
+              </div>
+            </a>
+            
+            <a href="https://instagram.com/santi_njr_" target="_blank" rel="noreferrer" className="flex items-center gap-4 p-4 card hover:border-accent/50 transition-colors group">
+              <div className="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center text-accent group-hover:bg-accent group-hover:text-black transition-colors">
+                <Instagram className="w-6 h-6" />
+              </div>
+              <div>
+                <p className="text-sm text-gray-400">Instagram</p>
+                <p className="text-lg font-bold text-white">@santi_njr_</p>
+              </div>
+            </a>
+          </div>
+        </motion.div>
+        
+        <motion.div
+          initial={{ opacity: 0, x: 20 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true }}
+          className="card p-8 border border-white/10"
+        >
+          <h3 className="text-2xl font-bold text-white mb-6">Envíanos un mensaje</h3>
+          <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
+            <div>
+              <label className="block text-sm font-medium text-gray-400 mb-1">Nombre</label>
+              <input type="text" className="w-full bg-black/50 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-accent transition-colors" placeholder="Tu nombre" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-400 mb-1">Email</label>
+              <input type="email" className="w-full bg-black/50 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-accent transition-colors" placeholder="tu@email.com" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-400 mb-1">Mensaje</label>
+              <textarea rows={4} className="w-full bg-black/50 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-accent transition-colors" placeholder="¿En qué podemos ayudarte?"></textarea>
+            </div>
+            <button type="submit" className="w-full primary-button py-4 text-lg font-bold">
+              Enviar Mensaje
+            </button>
+          </form>
+        </motion.div>
+      </div>
+    </div>
+  </section>
     </>
   );
 }

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,21 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutMediaOverlay
+          tag="Nuestra Filosofía"
+          title="JEMA: Combustible para tu Fuerza"
+          description="En JEMA, entendemos que tu cuerpo es tu templo y tu herramienta de progreso. Nos dedicamos a proporcionar suplementos de calidad superior, diseñados para atletas que no se conforman con lo ordinario. Cada ingrediente es seleccionado con rigor científico para garantizar resultados reales y una transformación visible."
+          imageSrc="https://storage.googleapis.com/webild/users/user_3FSOY6JtmB8X3VfdVqs0NvIYSye/uploaded-1782065399321-7bb42bxu.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,27 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+              <ContactCta
+          tag="Contacto"
+          text="Comienza hoy tu transformación con JEMA."
+          primaryButton={{
+            text: "WhatsApp",
+            href: "https://wa.me/1234567890",
+          }}
+          secondaryButton={{
+            text: "Instagram",
+            href: "https://instagram.com/jema.suplementos",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,34 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqSimple from '@/components/sections/faq/FaqSimple';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqSimple
+          tag="Preguntas"
+          title="Preguntas Frecuentes"
+          description="Resolvemos tus dudas sobre suplementación."
+          items={[
+            {
+              question: "¿Son seguros los productos?",
+              answer: "Totalmente, trabajamos con marcas certificadas y pureza garantizada.",
+            },
+            {
+              question: "¿Cuánto tardan en llegar?",
+              answer: "Envíos nacionales en 24-48 horas hábiles.",
+            },
+            {
+              question: "¿Cómo elijo mi proteína?",
+              answer: "Contacta con nuestro equipo para una asesoría personalizada según tus metas.",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Features.tsx

@@ -0,0 +1,40 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "features" section.
+
+import React from 'react';
+import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+        <SectionErrorBoundary name="features">
+              <FeaturesMediaCarousel
+          tag="Diferenciadores"
+          title="Por qué elegir JEMA"
+          description="Calidad, transparencia y rendimiento en cada servicio."
+          items={[
+            {
+              title: "Ingredientes Premium",
+              description: "Certificados para máxima pureza.",
+              buttonIcon: "Shield",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-sportsman-exercising-with-barbell-cross-training-gym_637285-2501.jpg",
+            },
+            {
+              title: "Resultados Comprobados",
+              description: "Respaldados por la ciencia deportiva.",
+              buttonIcon: "Zap",
+              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-with-matcha-tea_23-2150163605.jpg",
+            },
+            {
+              title: "Lifestyle de Élite",
+              description: "Más que suplementos, un estilo de vida.",
+              buttonIcon: "Award",
+              imageSrc: "http://img.b2bpic.net/free-photo/female-trainer-looking-woman-working-out-gym_23-2147827939.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,48 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroBillboardTiltedCarousel
+          tag="JEMA SUPLEMENTOS"
+          title="Premium Supplements for Elite Performance"
+          description="Scientifically formulated, visibly transformative. Experience the difference premium nutrition delivers to your body and confidence."
+          primaryButton={{
+            text: "Explorar Colección",
+            href: "#products",
+          }}
+          secondaryButton={{
+            text: "Saber Más",
+            href: "#about",
+          }}
+          items={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/shadow-male-showing-muscles_23-2148019518.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/cream-container-mock-up-flat-lay_23-2148328686.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/fitness-man-training-outdoors-living-active-healthy_1328-2993.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/protein-gym_23-2151980074.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/brain-booster-pills-still-life_23-2150769476.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/protein-gym_23-2151980052.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Products.tsx

@@ -0,0 +1,153 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import { cls } from "@/lib/utils";
+
+const items = [
+  {
+    imageSrc: "http://img.b2bpic.net/free-photo/brain-booster-pills-container-still-life_23-2150760052.jpg",
+    description: "Recuperación muscular rápida y efectiva.",
+    title: "Proteína Whey"
+  },
+  {
+    imageSrc: "http://img.b2bpic.net/free-photo/young-woman-holding-cup-white-wall_114579-81712.jpg",
+    description: "Protección muscular y resistencia.",
+    title: "BCAAs"
+  },
+  {
+    title: "EAAs",
+    imageSrc: "http://img.b2bpic.net/free-photo/healthy-nutrition-clean-eating-concept-ingredients-oatmeal-with-blueberry-almond-nut-yoghurt-preparing-yummy-sweet-nutrient-low-calorie-dessert-breakfast-time-muesli-with-fruits_273609-38086.jpg",
+    description: "Aminoácidos esenciales para el crecimiento."
+  },
+  {
+    title: "Ashwagandha",
+    imageSrc: "http://img.b2bpic.net/free-photo/concentrated-fitness-lady-sitting-outdoors-drinking-water_171337-8196.jpg",
+    description: "Control del estrés y optimización hormonal."
+  },
+  {
+    title: "Creatina Pura",
+    imageSrc: "http://img.b2bpic.net/free-photo/pills-pink-background-flat-lay-medicine-concept_169016-19830.jpg",
+    description: "Fuerza explosiva garantizada."
+  },
+  {
+    title: "Pre-Entrenos",
+    imageSrc: "http://img.b2bpic.net/free-photo/chocolate-drops-near-yogurt_23-2147895735.jpg",
+    description: "Enfoque y energía ilimitada."
+  }
+];
+
+type FeatureItem = {
+  title: string;
+  description: string;
+  href?: string;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+interface FeaturesImageBentoProps {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  items: [FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem];
+}
+
+const ProductsInline = () => {
+  const gridClasses = [
+    "md:col-span-2",
+    "md:col-span-4",
+    "md:col-span-3",
+    "md:col-span-3",
+    "md:col-span-2",
+    "md:col-span-2",
+    "md:col-span-2",
+  ];
+
+  const staggerDelays = [
+    0,
+    0.1,
+    0,
+    0.1,
+    0,
+    0.1,
+    0.2,
+  ];
+
+  return (
+    <section aria-label="Features image bento section" className="py-20 bg-background">
+      <div className="flex flex-col gap-8 md:gap-10">
+        <div className="flex flex-col items-center w-content-width mx-auto gap-2">
+          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+            <p>{"Colección"}</p>
+          </div>
+
+          <TextAnimation
+            text={"Nuestra Gama de Productos"}
+            variant="fade"
+            gradientText={true}
+            tag="h2"
+            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
+          />
+
+          <TextAnimation
+            text={"Potencia tu rendimiento con nuestra selección premium."}
+            variant="fade"
+            gradientText={false}
+            tag="p"
+            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+          />
+
+          {(undefined || undefined) && (
+            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary" animationDelay={0.1} />}
+            </div>
+          )}
+        </div>
+
+        <div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-6 gap-3">
+          {items.map((item, index) => {
+            const content = (
+              <div className="relative h-80 xl:h-100 2xl:h-120 overflow-hidden">
+                <ImageOrVideo
+                  imageSrc={item.imageSrc}
+                  videoSrc={item.videoSrc}
+                  className="rounded group-hover:scale-105 transition-transform duration-500"
+                />
+
+                <div className="absolute inset-x-5 bottom-5 xl:inset-x-6 xl:bottom-6 2xl:inset-x-7 2xl:bottom-7 flex flex-col text-background">
+                  <span className="text-2xl font-semibold leading-snug truncate">{item.title}</span>
+                  <span className="text-base leading-snug truncate">{item.description}</span>
+                </div>
+              </div>
+            );
+
+            return (
+              <ScrollReveal key={index} variant="slide-up" delay={staggerDelays[index]} className={cls("col-span-1 group", gridClasses[index])}>
+                {item.href ? (
+                  <a href={item.href} className="block overflow-hidden rounded">
+                    {content}
+                  </a>
+                ) : (
+                  <div className="overflow-hidden rounded">
+                    {content}
+                  </div>
+                )}
+              </ScrollReveal>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default function ProductsSection() {
+  return (
+    <div data-webild-section="products" id="products">
+      <ProductsInline />
+    </div>
+  );
+}