Files
ddfbabac-1de4-442a-bc36-608…/src/app/page.tsx
2026-03-03 16:25:37 +00:00

253 lines
17 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Leaf, Award, Sparkles, Globe, Shield, Heart, HelpCircle, MessageCircle } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumSmall"
sizing="large"
background="circleGradient"
cardStyle="soft-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="layered"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "hero" },
{ name: "Productos", id: "products" },
{ name: "Sostenibilidad", id: "sustainability" },
{ name: "Testimonios", id: "testimonials" },
{ name: "Contacto", id: "contact" }
]}
button={{
text: "Comprar Ahora", href: "products"
}}
brandName="EcoBottle"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
title="Hidrátate sin dejar huella"
description="Botellas reutilizables ecofriendly fabricadas con materiales sostenibles. Reduce tu impacto plástico mientras disfrutas de un diseño premium y minimalista."
tag="Sostenibilidad Ahora"
tagIcon={Leaf}
tagAnimation="slide-up"
background={{ variant: "glowing-orb" }}
leftCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-carrying-heavy-basket-with-greenery_23-2147711255.jpg", imageAlt: "Eco lifestyle sustainable living" },
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-fitness-woman-earphones-resting_171337-11711.jpg", imageAlt: "Active person with reusable bottle" },
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-with-plastic-earth_23-2149149953.jpg", imageAlt: "Environmental conservation impact" },
{ imageSrc: "http://img.b2bpic.net/free-photo/eco-friendly-stylish-disposable-convenient-beautiful-recyclable-tableware_169016-1959.jpg", imageAlt: "Sustainable packaging and materials" }
]}
rightCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-girl-tourist-stands-street-opens-thermos-with-hot-drink-rests_1258-196894.jpg", imageAlt: "Premium eco-friendly reusable bottle" },
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-girl-tourist-stands-street-opens-thermos-with-hot-drink-rests_1258-196894.jpg", imageAlt: "Stainless steel eco bottle" },
{ imageSrc: "http://img.b2bpic.net/free-photo/composition-with-minimal-tumbler-drinks_23-2149029258.jpg", imageAlt: "Glass eco-friendly bottle" },
{ imageSrc: "http://img.b2bpic.net/free-photo/environment-friendly-objects-cement-background_23-2148289741.jpg", imageAlt: "Bamboo sustainable bottle" }
]}
buttons={[
{ text: "Descubre la colección", href: "products" },
{ text: "Aprende más", href: "sustainability" }
]}
buttonAnimation="slide-up"
carouselPosition="right"
/>
</div>
<div id="benefits" data-section="benefits">
<FeatureCardTwentySeven
features={[
{
id: "1", title: "Durabilidad Premium", description: "Fabricadas con materiales de alta calidad que resisten años de uso intenso. Garantía extendida de 5 años en todos nuestros productos.", imageSrc: "http://img.b2bpic.net/free-vector/variety-badges-flat-style_23-2147536999.jpg", imageAlt: "Durable eco-friendly bottle materials"
},
{
id: "2", title: "100% Ecofriendly", description: "Cero plástico, materiales certificados sostenibles y packaging compostable. Cada compra = una botella plástica menos en el planeta.", imageSrc: "http://img.b2bpic.net/free-vector/flat-green-world-with-leaves_78370-838.jpg", imageAlt: "Eco-friendly environmental impact"
},
{
id: "3", title: "Diseño Minimalista", description: "Elegancia sin excesos. Estética contemporánea que combina con cualquier estilo. Disponible en 12 colores naturales.", imageSrc: "http://img.b2bpic.net/free-photo/shiny-modern-vases-arrangement_52683-93725.jpg", imageAlt: "Modern minimalist bottle design"
}
]}
title="¿Por qué elegir EcoBottle?"
description="Cada botella representa un compromiso con el planeta y tu bienestar. Descubre nuestros beneficios principales."
tag="Beneficios"
tagIcon={Award}
tagAnimation="slide-up"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
products={[
{
id: "1", name: "EcoBottle Steel Pro", price: "$49.99", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-girl-tourist-stands-street-opens-thermos-with-hot-drink-rests_1258-196894.jpg", imageAlt: "Premium stainless steel eco bottle", initialQuantity: 1
},
{
id: "2", name: "EcoBottle Glass Pure", price: "$54.99", imageSrc: "http://img.b2bpic.net/free-photo/composition-with-minimal-tumbler-drinks_23-2149029258.jpg", imageAlt: "Glass eco-friendly water bottle", initialQuantity: 1
},
{
id: "3", name: "EcoBottle Bamboo Zen", price: "$59.99", imageSrc: "http://img.b2bpic.net/free-photo/environment-friendly-objects-cement-background_23-2148289741.jpg", imageAlt: "Bamboo sustainable water bottle", initialQuantity: 1
}
]}
title="Nuestra colección premium"
description="Explora nuestras botellas reutilizables diseñadas para cada estilo de vida. Sostenibles, duraderas y hermosas."
tag="Productos destacados"
tagIcon={Sparkles}
tagAnimation="slide-up"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="sustainability" data-section="sustainability">
<TestimonialAboutCard
tag="Nuestro Impacto"
tagIcon={Globe}
tagAnimation="slide-up"
title="Reducimos 5 mil toneladas de plástico anualmente. Tu botella EcoBottle evita 300 botellas plásticas en su vida útil."
description="EcoBottle - Compromiso Real"
subdescription="Fundada en 2021 con una misión clara: transformar la hidratación consciente"
icon={Leaf}
imageSrc="http://img.b2bpic.net/free-photo/plastic-containers-paper-earth_23-2147852405.jpg"
imageAlt="Environmental impact and sustainability metrics"
mediaAnimation="slide-up"
useInvertedBackground={true}
/>
</div>
<div id="socialproof" data-section="socialproof">
<SocialProofOne
title="Certificaciones y Alianzas"
description="Trabajamos con las mejores organizaciones ambientales y estándares de calidad internacional."
tag="Confianza"
tagIcon={Shield}
tagAnimation="slide-up"
names={["Carbon Trust Certified", "Global Green Standard", "Sustainable Materials Initiative", "Ocean Cleanup Partner", "Eco-Innovation Award", "Zero Waste Alliance", "International Eco-Seal"]}
textboxLayout="default"
useInvertedBackground={false}
speed={40}
showCard={true}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
title="Lo que dicen nuestros clientes"
description="Miles de personas ya han hecho el cambio hacia una hidratación consciente."
tag="Testimonios reales"
tagIcon={Heart}
tagAnimation="slide-up"
testimonials={[
{
id: "1", name: "María García, Emprendedora Sostenible", date: "Date: 15 Enero 2025", title: "Ha transformado mi estilo de vida consciente", quote: "Llevo 8 meses usando EcoBottle y no puedo estar más feliz. El diseño es hermoso, la calidad insuperable, y sé que estoy reduciendo mi huella de carbono cada día. La mejor inversión que he hecho por el planeta.", tag: "Steel Pro", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", avatarAlt: "María García", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-taking-care-plant_23-2149879875.jpg", imageAlt: "Eco-conscious sustainable lifestyle"
},
{
id: "2", name: "Carlos López, Atleta Profesional", date: "Date: 8 Diciembre 2024", title: "La hidratación que necesitaba", quote: "Como deportista, probé muchas botellas. EcoBottle Glass Pure mantiene el agua fría durante horas, no tiene sabor químico, y es ligera. Ahora la llevo a todas mis competencias. ¡Recomendada 100%!", tag: "Glass Pure", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", avatarAlt: "Carlos López", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-sportive-girl-sunrise-seaside_176420-6335.jpg", imageAlt: "Active athlete with reusable bottle"
},
{
id: "3", name: "Sofia Martínez, Estudiante", date: "Date: 20 Noviembre 2024", title: "Perfecta para la universidad y el medio ambiente", quote: "Soy estudiante y cada pequeño gesto cuenta. Mi botella EcoBottle Bamboo Zen es mi compañera diaria. Los otros estudiantes preguntan dónde la compré. Es un statement personal de sostenibilidad.", tag: "Bamboo Zen", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", avatarAlt: "Sofia Martínez", imageSrc: "http://img.b2bpic.net/free-photo/girl-with-bootle_1157-8789.jpg", imageAlt: "Young student with eco-friendly bottle"
},
{
id: "4", name: "Empresa Verde Tech, Equipo Completo", date: "Date: 5 Noviembre 2024", title: "Merchandising sostenible que genera impacto", quote: "Compramos 100 botellas EcoBottle para nuestro equipo como merchandise corporativo. Los empleados amaron que la empresa invierta en sostenibilidad tangible. Es un win-win perfecto.", tag: "Corporate Bulk", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", avatarAlt: "Verde Tech Team", imageSrc: "http://img.b2bpic.net/free-photo/researchers-looking-alternative-energy-souces_23-2149311456.jpg", imageAlt: "Corporate sustainable team"
}
]}
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Preguntas Frecuentes"
description="Resuelve tus dudas sobre nuestras botellas sostenibles, materiales y envíos."
tag="Soporte"
tagIcon={HelpCircle}
tagAnimation="slide-up"
faqs={[
{
id: "1", title: "¿Cuál es la diferencia entre los materiales?", content: "<p><strong>Steel Pro:</strong> Acero inoxidable 304, ideal para viajes y deportes. Mantiene temperaturas por 24h.</p><p><strong>Glass Pure:</strong> Vidrio borosilicato con protección silicona, perfecta para oficina y hogar. Sabor puro del agua.</p><p><strong>Bamboo Zen:</strong> Bamboo natural + silicona, la más ecológica. Estética natural única.</p>"
},
{
id: "2", title: "¿Cómo es tu política de devoluciones?", content: "Ofrecemos 30 días de garantía de satisfacción. Si no estás completamente feliz, devolvemos tu dinero sin preguntas. Además, 5 años de garantía de fabricación en defectos."
},
{
id: "3", title: "¿Tienen programa de reciclaje?", content: "Sí. Si tu botella llega al final de su vida útil (después de 7+ años), la aceptamos para reciclar correctamente. Te enviamos una etiqueta de retorno gratis y donamos $5 a proyectos de reforestación por cada botella retornada."
},
{
id: "4", title: "¿Cuánto tiempo demora el envío?", content: "Enviamos dentro de 24h laborales. Envío estándar: 3-5 días. Envío express: 1-2 días. Todos los envíos incluyen tracking completo y seguro de envío."
},
{
id: "5", title: "¿Las botellas vienen con garantía?", content: "Todas nuestras botellas incluyen garantía de 5 años contra defectos de fabricación. Cubrimos grietas, fugas y fallas de cierre. El uso normal y desgaste no están cubiertos."
},
{
id: "6", title: "¿Puedo ordenar en grandes cantidades?", content: "Sí. Ofrecemos descuentos especiales para compras corporativas, equipos y merchandising sostenible. Contáctanos para presupuesto personalizado. Mínimo 10 unidades."
}
]}
textboxLayout="default"
faqsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="contact" data-section="contact">
<ContactFaq
ctaTitle="¿Listo para el cambio?"
ctaDescription="Contáctanos para más información sobre nuestros productos, programas corporativos o simplemente para compartir tu historia sostenible."
ctaButton={{
text: "Iniciar conversación", href: "#"
}}
ctaIcon={MessageCircle}
faqs={[
{
id: "1", title: "¿Cómo puedo contactar con el equipo?", content: "Puedes escribirnos a <strong>hello@ecobottle.com</strong>, llamar al <strong>+1 (555) 123-4567</strong>, o usar nuestro chat en vivo de 9am-6pm EST. También estamos en Instagram y TikTok @ecobottle."
},
{
id: "2", title: "¿Hacen entregas internacionales?", content: "Actualmente enviamos a todo Latinoamérica, USA y Europa. Nos estamos expandiendo a Asia en Q2 2025. Contáctanos para verificar tu país específico."
},
{
id: "3", title: "¿Qué métodos de pago aceptan?", content: "Aceptamos todas las tarjetas de crédito/débito (Visa, MasterCard, Amex), PayPal, transferencia bancaria y criptomonedas (Bitcoin, Ethereum). Todos los pagos son seguros con encriptación SSL 256-bit."
}
]}
animationType="slide-up"
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="EcoBottle"
leftLink={{
text: "Política de privacidad", href: "#"
}}
rightLink={{
text: "Términos de servicio", href: "#"
}}
/>
</div>
</ThemeProvider>
);
}