270 lines
14 KiB
TypeScript
270 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import { MessageCircle } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="fluid"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
brandName="Neumax"
|
|
navItems={[
|
|
{ name: "Inicio", id: "hero" },
|
|
{ name: "Productos", id: "products" },
|
|
{ name: "Nosotros", id: "about" },
|
|
{ name: "Contacto", id: "contact" },
|
|
{ name: "Comprar Ahora", id: "products" }
|
|
]}
|
|
bottomLeftText="Potencia & Seguridad"
|
|
bottomRightText="info@neumax.mx"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero" className="relative overflow-hidden">
|
|
<HeroCentered
|
|
background={{ variant: "plain" }}
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/happiness-smile-smartphone-holding-mechanic_1134-1122.jpg", alt: "Premium Neumax Tire" }
|
|
]}
|
|
avatarText="Confiados por miles de conductores"
|
|
title="Potencia, Seguridad y Rendimiento en Cada Kilómetro"
|
|
description="Neumáticos de calidad superior con la mejor relación precio-rendimiento. Confiados por miles de conductores en toda la región"
|
|
buttons={[
|
|
{ text: "Ver Productos", href: "#products" },
|
|
{ text: "Conocer Más", href: "#about" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="Hero section - Neumax Tires"
|
|
className="min-h-screen"
|
|
containerClassName="flex flex-col items-center justify-center"
|
|
textBoxClassName="text-center max-w-3xl"
|
|
titleClassName="text-5xl md:text-6xl font-bold tracking-tight"
|
|
descriptionClassName="text-lg md:text-xl text-foreground/80 mt-4"
|
|
avatarGroupClassName="mb-8"
|
|
buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products" className="bg-background">
|
|
<ProductCardThree
|
|
products={[
|
|
{
|
|
id: "1", name: "Performance Elite Pro", price: "$3,499", imageSrc: "http://img.b2bpic.net/free-photo/car-wheel-with-new-tires-close-up_1303-31690.jpg", imageAlt: "Performance Elite Pro Tire", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "2", name: "AllSeason Comfort", price: "$2,199", imageSrc: "http://img.b2bpic.net/free-photo/serious-stones-white-mobile-phone-sophisticated_1134-1152.jpg", imageAlt: "AllSeason Comfort Tire", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "3", name: "Sport Track Master", price: "$4,299", imageSrc: "http://img.b2bpic.net/free-photo/shiny-sports-car-speeds-along-wet-asphalt-generated-by-ai_188544-17052.jpg", imageAlt: "Sport Track Master Tire", initialQuantity: 1
|
|
}
|
|
]}
|
|
title="Nuestros Neumáticos"
|
|
description="Descubre nuestra colección de neumáticos premium diseñados para máximo rendimiento y durabilidad"
|
|
tag="Productos"
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="Products section"
|
|
containerClassName="py-16 md:py-24"
|
|
cardClassName="hover:shadow-lg transition-shadow"
|
|
textBoxTitleClassName="text-4xl font-bold mb-4"
|
|
textBoxDescriptionClassName="text-foreground/70 text-lg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about" className="bg-card">
|
|
<TextAbout
|
|
tag="Sobre Nosotros"
|
|
title="Neumáticos confiables para conductores exigentes. Más de 15 años de experiencia en calidad, durabilidad y seguridad. Nuestro compromiso: máximo rendimiento a precio justo"
|
|
useInvertedBackground={true}
|
|
buttons={[
|
|
{ text: "Conocer Nuestra Historia", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="About section"
|
|
containerClassName="py-16 md:py-24"
|
|
titleClassName="text-4xl md:text-5xl font-bold leading-tight"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics" className="bg-background">
|
|
<MetricCardTwo
|
|
metrics={[
|
|
{ id: "1", value: "50,000+", description: "Clientes Satisfechos" },
|
|
{ id: "2", value: "98%", description: "Tasa de Satisfacción" },
|
|
{ id: "3", value: "15 Años", description: "De Experiencia" },
|
|
{ id: "4", value: "1 Millón+", description: "Neumáticos Vendidos" }
|
|
]}
|
|
title="Por Qué Elegirnos"
|
|
description="Números que hablan de nuestro compromiso con la excelencia"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="Metrics section"
|
|
containerClassName="py-16 md:py-24"
|
|
textBoxTitleClassName="text-4xl font-bold mb-4"
|
|
textBoxDescriptionClassName="text-foreground/70"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials" className="bg-card">
|
|
<TestimonialCardTwo
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Carlos Mendoza", role: "Conductor Profesional", testimonial: "Excelente calidad y durabilidad. Después de 50,000 km sigue rendimiento impeccable. Definitivamente recomiendo Neumax", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2150171293.jpg", imageAlt: "Carlos Mendoza"
|
|
},
|
|
{
|
|
id: "2", name: "María González", role: "Gerente de Flota", testimonial: "La mejor inversión para nuestra empresa. Durabilidad excepcional y servicio al cliente muy responsivo. 5 estrellas", imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", imageAlt: "María González"
|
|
},
|
|
{
|
|
id: "3", name: "Roberto Jiménez", role: "Entusiasta de Autos", testimonial: "Grip increíble en mojado y rendimiento en circuito. No hay comparación con otras marcas. Neumax es mi elección", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Roberto Jiménez"
|
|
},
|
|
{
|
|
id: "4", name: "Ana Rodríguez", role: "Dueña de Taller Mecánico", testimonial: "Mis clientes vuelven por Neumax. Confiabilidad demostrada y excelente relación precio-rendimiento. Altamente recomendados", imageSrc: "http://img.b2bpic.net/free-photo/salesman-car-showroom_1303-13625.jpg", imageAlt: "Ana Rodríguez"
|
|
}
|
|
]}
|
|
title="Lo Que Dicen Nuestros Clientes"
|
|
description="Experiencias reales de conductores y empresas que confían en Neumax"
|
|
tag="Testimonios"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
buttonAnimation="slide-up"
|
|
carouselMode="buttons"
|
|
ariaLabel="Testimonials section"
|
|
containerClassName="py-16 md:py-24"
|
|
textBoxTitleClassName="text-4xl font-bold mb-4"
|
|
textBoxDescriptionClassName="text-foreground/70"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq" className="bg-background">
|
|
<FaqDouble
|
|
faqs={[
|
|
{
|
|
id: "1", title: "¿Cuál es la vida útil de los neumáticos Neumax?", content: "Nuestros neumáticos tienen una vida útil de 4-5 años o aproximadamente 50,000-60,000 km, dependiendo de las condiciones de manejo y mantenimiento. Ofrecemos garantía completa durante los primeros 2 años"
|
|
},
|
|
{
|
|
id: "2", title: "¿Ofrecen servicio de instalación?", content: "Sí, contamos con una red de talleres autorizados en toda la región. Puedes agendar tu instalación en línea o llamar a nuestro centro de servicio. La instalación incluye balanceo y alineación"
|
|
},
|
|
{
|
|
id: "3", title: "¿Cuál es la política de devolución?", content: "Ofrecemos 30 días de garantía de satisfacción. Si no estás completamente satisfecho, puedes devolver los neumáticos sin preguntas. El envío de retorno es gratis"
|
|
},
|
|
{
|
|
id: "4", title: "¿Qué métodos de pago aceptan?", content: "Aceptamos todas las tarjetas de crédito, transferencia bancaria, y financiamiento en 3, 6 y 12 meses sin intereses. También ofrecemos opción de pago a crédito para empresas"
|
|
},
|
|
{
|
|
id: "5", title: "¿Incluye seguro en la compra?", content: "Sí, todos nuestros neumáticos incluyen cobertura contra defectos de fabricación y daño accidental por 2 años. Puedes ampliar a 5 años por una cuota adicional"
|
|
},
|
|
{
|
|
id: "6", title: "¿Ofrecen descuentos por volumen?", content: "Absolutamente. Para compras de 4 o más juegos ofrecemos descuentos especiales. Para flota comercial, contáctanos directamente para presupuestos personalizados"
|
|
}
|
|
]}
|
|
title="Preguntas Frecuentes"
|
|
description="Respuestas a tus dudas sobre nuestros neumáticos y servicios"
|
|
tag="Soporte"
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
ariaLabel="FAQ section"
|
|
containerClassName="py-16 md:py-24"
|
|
textBoxTitleClassName="text-4xl font-bold mb-4"
|
|
textBoxDescriptionClassName="text-foreground/70"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact" className="bg-card">
|
|
<ContactFaq
|
|
faqs={[
|
|
{
|
|
id: "1", title: "¿Cuál es el mejor neumático para mi vehículo?", content: "Nuestro equipo de expertos te recomendará según tu tipo de vehículo, clima y estilo de conducción. Puedes contactarnos por teléfono o chat en vivo"
|
|
},
|
|
{
|
|
id: "2", title: "¿Cuánto tiempo toma la entrega?", content: "Envíos dentro de la ciudad en 24-48 horas. Envíos nacionales en 3-5 días. Express disponible a ciudades principales"
|
|
}
|
|
]}
|
|
ctaTitle="¿Listo para mejorar tu conducción?"
|
|
ctaDescription="Contáctanos ahora para recibir asesoría personalizada y una cotización especial"
|
|
ctaButton={{ text: "Obtener Asesoría Gratis", href: "#contact" }}
|
|
ctaIcon={MessageCircle}
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
accordionAnimationType="smooth"
|
|
ariaLabel="Contact section"
|
|
containerClassName="py-16 md:py-24"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Neumax"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Inicio", href: "#hero" },
|
|
{ label: "Productos", href: "#products" },
|
|
{ label: "Nosotros", href: "#about" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Contacto", href: "#contact" },
|
|
{ label: "Soporte", href: "#faq" },
|
|
{ label: "Centro de Ayuda", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Términos de Servicio", href: "#" },
|
|
{ label: "Política de Privacidad", href: "#" },
|
|
{ label: "Política de Devoluciones", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" }
|
|
]
|
|
}
|
|
]}
|
|
ariaLabel="Site footer"
|
|
className="bg-foreground text-background"
|
|
containerClassName="max-w-7xl mx-auto px-4"
|
|
logoClassName="text-3xl font-bold text-background mb-12"
|
|
columnsClassName="grid grid-cols-1 md:grid-cols-4 gap-8"
|
|
columnClassName="flex flex-col space-y-3"
|
|
itemClassName="text-background/80 hover:text-background transition-colors"
|
|
buttonClassName="text-background/80 hover:text-background transition-colors flex items-center gap-2"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|