Merge version_4_1782159457750 into main

Merge version_4_1782159457750 into main

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #000000;
-  --card: #0a0a0a;
-  --foreground: #ffffff;
-  --primary-cta: #ff0000;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #1a1a1a;
-  --secondary-cta-text: #ffffff;
-  --accent: #999999;
-  --background-accent: #111111;
+  --background: #fffafa;
+  --card: #ffffff;
+  --foreground: #1a0000;
+  --primary-cta: #e63946;
+  --primary-cta-text: #fffafa;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1a0000;
+  --accent: #f5c4c7;
+  --background-accent: #f09199;
 
   /* @layout/border-radius/rounded */
   --radius: 1rem;

src/pages/HomePage.tsx

@@ -1,9 +1,13 @@
+"use client";
+
 // 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';
@@ -16,18 +20,210 @@ export default function HomePage(): React.JSX.Element {
 <>
   <HeroSection />
 
-  <AboutSection />
+  <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>
 
   <FeaturesSection />
 
-  <ProductsSection />
-
-
+  <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 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>
 
   <FaqSection />
 
-  <ContactSection />
+  <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>
     </>
   );
 }