bender/064bde52-043f-4c01-ac02-204d4ef602bb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3_1782155819557 into main #2

Merged
bender merged 1 commits from version_3_1782155819557 into main 2026-06-22 19:23:32 +00:00
Conversation 0 Commits 1 Files Changed 1 +201 -5
1 changed files with 201 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/pages/HomePage.tsx
View File

@@ -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>
</>
);
}