253 lines
17 KiB
TypeScript
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>
|
|
);
|
|
}
|