287 lines
18 KiB
TypeScript
287 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
|
|
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
|
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
|
|
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
|
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
|
|
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
import { CheckCircle, Zap, Shield, Heart, Target, Smile, Award, TrendingUp } from "lucide-react";
|
|
|
|
export default function Home() {
|
|
const navItems = [
|
|
{ name: "Inicio", id: "/" },
|
|
{ name: "Problema", id: "problem" },
|
|
{ name: "Solución", id: "solution" },
|
|
{ name: "Beneficios", id: "benefits" },
|
|
{ name: "Garantía", id: "guarantee" },
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLarge"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<NavbarStyleApple
|
|
navItems={navItems}
|
|
brandName="BambooFit"
|
|
/>
|
|
|
|
{/* Hero Section */}
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="BambooFit"
|
|
description="Alivio natural del dolor de rodilla con nuestra manga de compresión de bambú premium. Diseñada para máxima comodidad, transpirabilidad y soporte todo el día."
|
|
buttons={[
|
|
{ text: "Comprar Ahora", href: "#pricing" },
|
|
{ text: "Aprender Más", href: "#solution" },
|
|
]}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=1"
|
|
imageAlt="Mujer usando manga de compresión de rodilla durante el ejercicio"
|
|
mediaAnimation="blur-reveal"
|
|
buttonAnimation="slide-up"
|
|
frameStyle="card"
|
|
/>
|
|
</div>
|
|
|
|
{/* Problem Section */}
|
|
<div id="problem" data-section="problem">
|
|
<MetricSplitMediaAbout
|
|
tag="El Problema"
|
|
title="Millones sufren de dolor de rodilla cada día"
|
|
description="El dolor de rodilla crónico afecta a tu calidad de vida. Ya sea por artritis, lesiones deportivas o uso excesivo, el dolor limita tus actividades diarias. Las soluciones tradicionales son incómodas, restrictivas y no proporcionan el alivio duradero que necesitas."
|
|
metrics={[
|
|
{ value: "85%", title: "Sufren dolor de rodilla" },
|
|
{ value: "$4.7B", title: "Gasto anual en tratamientos" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=2"
|
|
imageAlt="Persona sosteniendo su rodilla por dolor"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* Solution Section */}
|
|
<div id="solution" data-section="solution">
|
|
<FeatureCardNineteen
|
|
title="Cómo Funciona"
|
|
description="Nuestra manga de compresión de bambú utiliza tecnología de compresión graduada y tela natural transpirable para proporcionar alivio efectivo."
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Paso 1", title: "Compresión Graduada", subtitle: "Soporte estratégico para la articulación de la rodilla", description: "La compresión graduada proporciona soporte donde más lo necesitas, reduciendo la hinchazón y estabilizando la articulación sin restringir el movimiento natural.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=3", imageAlt: "Ilustración de compresión graduada"
|
|
},
|
|
{
|
|
id: 2,
|
|
tag: "Paso 2", title: "Tela de Bambú Premium", subtitle: "Transpirable, suave y sostenible", description: "La tela de bambú natural permite una circulación de aire óptima, manteniéndote fresco y cómodo durante todo el día. Hipoalergénica y suave en la piel.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=4", imageAlt: "Tela de bambú transpirable"
|
|
},
|
|
{
|
|
id: 3,
|
|
tag: "Paso 3", title: "Diseño Ergonómico", subtitle: "Ajuste perfecto para máxima comodidad", description: "Nuestro diseño anatómico se adapta perfectamente a la forma de tu rodilla, proporcionando soporte consistente sin puntos de presión o rozaduras. Úsalo durante todo el día.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=5", imageAlt: "Diseño ergonómico de la manga"
|
|
},
|
|
]}
|
|
tag="Mecanismo"
|
|
tagAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* Benefits Section */}
|
|
<div id="benefits" data-section="benefits">
|
|
<MetricCardEleven
|
|
title="Beneficios Comprobados"
|
|
description="Nuestros clientes reportan mejoras significativas en poco tiempo"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "92%", title: "Menos dolor", description: "Reportan alivio notable en la primera semana", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=6", imageAlt: "Cliente disfrutando de alivio del dolor"
|
|
},
|
|
{
|
|
id: "2", value: "78%", title: "Menos hinchazón", description: "Reducción visible de la inflamación después de 3 días", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=7", imageAlt: "Rodilla con menos hinchazón"
|
|
},
|
|
{
|
|
id: "3", value: "88%", title: "Mejor movilidad", description: "Recupera tu rango de movimiento natural", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=8", imageAlt: "Persona con movilidad mejorada"
|
|
},
|
|
{
|
|
id: "4", value: "95%", title: "Satisfacción", description: "Clientes altamente satisfechos con su compra", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=9", imageAlt: "Cliente satisfecho con el producto"
|
|
},
|
|
]}
|
|
tag="Resultados"
|
|
tagIcon={TrendingUp}
|
|
/>
|
|
</div>
|
|
|
|
{/* Product Features Section */}
|
|
<div id="features" data-section="features">
|
|
<ProductCardOne
|
|
title="Características del Producto"
|
|
description="Todo lo que necesitas para el alivio óptimo del dolor de rodilla"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
products={[
|
|
{
|
|
id: "1", name: "Tela de Bambú 100%", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=10", imageAlt: "Tela de bambú premium"
|
|
},
|
|
{
|
|
id: "2", name: "Compresión Graduada", price: "Médica", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=11", imageAlt: "Compresión graduada"
|
|
},
|
|
{
|
|
id: "3", name: "Diseño Ergonómico", price: "Patentado", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=12", imageAlt: "Diseño ergonómico"
|
|
},
|
|
{
|
|
id: "4", name: "Fácil de Lavar", price: "Duradera", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=13", imageAlt: "Fácil de mantener"
|
|
},
|
|
]}
|
|
tag="Características"
|
|
tagIcon={Zap}
|
|
/>
|
|
</div>
|
|
|
|
{/* Social Proof - Testimonials */}
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
title="Lo que Dicen Nuestros Clientes"
|
|
description="Miles de personas han transformado su vida con BambooFit"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "María García", role: "Jubilada, Madrid", testimonial: "Después de años sufriendo con artritis, finalmente encontré alivio. La manga es cómoda y el dolor ha disminuido significativamente. ¡La recomiendo a todos mis amigos!", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=14", imageAlt: "María García"
|
|
},
|
|
{
|
|
id: "2", name: "Juan López", role: "Atleta, Barcelona", testimonial: "Como corredor, la compresión me ayuda a prevenir lesiones y recuperarme más rápido. La manga es tan cómoda que a veces olvido que la llevo puesta.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=15", imageAlt: "Juan López"
|
|
},
|
|
{
|
|
id: "3", name: "Carmen Rodríguez", role: "Profesora, Sevilla", testimonial: "Paso todo el día de pie. Esta manga cambió mi vida. El dolor que me tenía limitada desapareció en menos de una semana. Es realmente milagrosa.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=16", imageAlt: "Carmen Rodríguez"
|
|
},
|
|
{
|
|
id: "4", name: "Roberto Martínez", role: "Ingeniero, Valencia", testimonial: "Esperaba menos de esto, pero quedé sorprendido. La calidad es excelente y el alivio del dolor es real. Vale cada euro invertido.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=17", imageAlt: "Roberto Martínez"
|
|
},
|
|
]}
|
|
tag="Testimonios"
|
|
tagIcon={Smile}
|
|
/>
|
|
</div>
|
|
|
|
{/* Pricing Section */}
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
title="Planes de Precios Flexibles"
|
|
description="Elige el plan perfecto para tu presupuesto y necesidades"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
tag="Precios"
|
|
tagIcon={Award}
|
|
plans={[
|
|
{
|
|
id: "duo", title: "Dúo", price: "€49.99", period: "/2 unidades", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=19", imageAlt: "Plan Dúo", button: { text: "Agregar al Carrito", href: "#cart" },
|
|
features: [
|
|
"2 mangas de compresión", "Tallas personalizadas", "Soporte prioritario", "Garantía de 30 días", "Descuento del 17%"
|
|
],
|
|
},
|
|
{
|
|
id: "basic", title: "Básico", price: "€29.99", period: "/unidad", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=18", imageAlt: "Plan Básico", button: { text: "Agregar al Carrito", href: "#cart" },
|
|
features: [
|
|
"1 manga de compresión", "Talla estándar", "Soporte por email", "Garantía de 30 días"
|
|
],
|
|
},
|
|
{
|
|
id: "family", title: "Familia", price: "€89.99", period: "/4 unidades", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=20", imageAlt: "Plan Familia", button: { text: "Agregar al Carrito", href: "#cart" },
|
|
features: [
|
|
"4 mangas de compresión", "Tallas personalizadas", "Soporte VIP 24/7", "Garantía de 30 días", "Descuento del 25%", "Envío gratis"
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* 30-Day Guarantee Section */}
|
|
<div id="guarantee" data-section="guarantee">
|
|
<MetricSplitMediaAbout
|
|
tag="Garantía"
|
|
title="Garantía de Satisfacción de 30 Días"
|
|
description="Sabemos que amarás nuestra manga de compresión. Si por alguna razón no estás completamente satisfecho en los primeros 30 días, te devolvemos el 100% de tu dinero, sin preguntas. Cero riesgos."
|
|
metrics={[
|
|
{ value: "100%", title: "Devolución de dinero garantizada" },
|
|
{ value: "30", title: "Días para probar sin riesgos" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/side-view-woman-exercising-outdoors-with-elastic-band_23-2148891939.jpg?_wi=21"
|
|
imageAlt="Garantía de satisfacción de 30 días"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* FAQ Section */}
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Preguntas Frecuentes"
|
|
description="Respuestas a las preguntas más comunes sobre nuestra manga de compresión de rodilla"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqsAnimation="slide-up"
|
|
tag="Ayuda"
|
|
tagIcon={Target}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "¿Qué tamaño debo elegir?", content: "Medimos nuestras mangas por circunferencia de rodilla. Mide alrededor de tu rodilla en centímetros y consulta nuestra tabla de tallas. Si estás entre tamaños, recomendamos el tamaño más grande para mayor comodidad."
|
|
},
|
|
{
|
|
id: "2", title: "¿Puedo usar la manga todo el día?", content: "Sí, nuestra manga está diseñada para uso todo el día. Sin embargo, te recomendamos quitártela por al menos 2-3 horas diarias para permitir que tu piel respire. Si experimentas molestias, consulta a un profesional médico."
|
|
},
|
|
{
|
|
id: "3", title: "¿Cuánto tiempo hasta notar resultados?", content: "La mayoría de nuestros clientes reportan alivio del dolor dentro de los primeros 3-7 días. Sin embargo, los resultados óptimos pueden tomar 2-4 semanas de uso consistente."
|
|
},
|
|
{
|
|
id: "4", title: "¿Cómo debo cuidar mi manga?", content: "Lava en agua fría con jabón suave y deja secar al aire. No uses blanqueador ni la pongas en la secadora. Una manga bien cuidada durará 12-18 meses con uso diario."
|
|
},
|
|
{
|
|
id: "5", title: "¿Es adecuada para deportes?", content: "Absolutamente. Muchos atletas usan nuestras mangas durante entrenamientos y competiciones. La compresión graduada ayuda con el rendimiento y la recuperación."
|
|
},
|
|
{
|
|
id: "6", title: "¿Hay efectos secundarios?", content: "No. La manga está hecha de bambú natural e hipoalergénica. Sin embargo, si tienes alergias conocidas a los textiles, consulta con tu médico primero."
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Final CTA Section */}
|
|
<div id="final-cta" data-section="final-cta">
|
|
<ContactCenter
|
|
tag="Oferta Limitada"
|
|
title="Transforma Tu Vida Hoy"
|
|
description="Únete a miles de clientes que ya disfrutan de una vida sin dolor. Haz tu pedido ahora y recibe envío gratis en órdenes de 2 o más unidades."
|
|
background={{ variant: "rotated-rays-animated-grid" }}
|
|
useInvertedBackground={false}
|
|
buttonText="Comprar Ahora"
|
|
inputPlaceholder="tu@email.com"
|
|
onSubmit={(email) => console.log("Subscribing:", email)}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|