194 lines
8.3 KiB
TypeScript
194 lines
8.3 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import { Mail, Phone, MapPin, CheckCircle, TrendingUp } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="large"
|
|
background="fluid"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{ name: "Inicio", id: "hero" },
|
|
{ name: "Nosotros", id: "about" },
|
|
{ name: "Vehículos", id: "products" },
|
|
{ name: "Financiación", id: "pricing" },
|
|
{ name: "Contacto", id: "contact" },
|
|
]}
|
|
brandName="Agro Automotores"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
background={{ variant: "gradient-bars" }}
|
|
title="Tu próximo auto, sin vueltas."
|
|
description="Comprá con confianza. Más de 37 clientes satisfechos nos respaldan."
|
|
buttons={[
|
|
{ text: "Ver vehículos", href: "#products" },
|
|
{ text: "WhatsApp", href: "https://wa.me/5493584019137" },
|
|
]}
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/minivan-with-roof-box-driving-across-bridge-golden-hour-sunset-travel_169016-69934.jpg" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/car-park_1203-3451.jpg" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="trust" data-section="trust">
|
|
<MetricCardTwo
|
|
animationType="slide-up"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{ id: "m1", value: "4.8★", description: "Reseñas Google" },
|
|
{ id: "m2", value: "37+", description: "Clientes Felices" },
|
|
{ id: "m3", value: "Broker", description: "Multimarca" },
|
|
{ id: "m4", value: "10 años", description: "Trayectoria" },
|
|
]}
|
|
title="Confianza comprobada"
|
|
description="Nuestros números avalan nuestro compromiso constante con la transparencia."
|
|
textboxLayout="default"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={false}
|
|
title="Experiencia al servicio de tu movilidad"
|
|
description="Agro Automotores Noroeste es tu broker automotor de confianza. Con más de una década en el mercado, simplificamos la compra de tu próximo vehículo con asesoramiento integral y financiación personalizada."
|
|
imageSrc="http://img.b2bpic.net/free-photo/he-is-confident-small-business-owner_637285-9324.jpg"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
metrics={[
|
|
{ title: "Años experiencia", value: "10+" },
|
|
{ title: "Vehículos entregados", value: "150+" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ id: "f1", title: "Asesoramiento", tags: ["Paso 1"] },
|
|
{ id: "f2", title: "Búsqueda Activa", tags: ["Paso 2"] },
|
|
{ id: "f3", title: "Gestión y Entrega", tags: ["Paso 3"] },
|
|
]}
|
|
title="Proceso transparente"
|
|
description="Tu próximo vehículo, más cerca de lo que imaginás."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "p1", brand: "Toyota", name: "Hilux SRV", price: "Consultar", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-choosing-car_1303-22399.jpg" },
|
|
{ id: "p2", brand: "Ford", name: "Ranger XLT", price: "Consultar", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/person-their-job-position_23-2150163610.jpg" },
|
|
{ id: "p3", brand: "VW", name: "Amarok Comfortline", price: "Consultar", rating: 5, reviewCount: "10", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-woman-with-luxury-car_231208-6917.jpg" },
|
|
]}
|
|
title="Vehículos seleccionados"
|
|
description="Unidades verificadas para tu seguridad."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{ id: "pr1", title: "Financiación Tradicional", price: "Flexible", period: "Cuotas", features: ["Tasa fija", "Plazo extendido"], button: { text: "Consultar", href: "https://wa.me/5493584019137" } },
|
|
{ id: "pr2", title: "Crédito Express", price: "Rápido", period: "24h", features: ["Aprobación rápida", "Mínimos requisitos"], button: { text: "Consultar", href: "https://wa.me/5493584019137" } },
|
|
]}
|
|
title="Financiación a medida"
|
|
description="Diseñamos el plan ideal para que llegues a tu auto sin sorpresas."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "t1", name: "Teresa Morón", handle: "Cliente", testimonial: "Excelente servicio, muy recomendables." },
|
|
{ id: "t2", name: "Alejandro Arce", handle: "Cliente", testimonial: "Transparencia absoluta en la compra.", icon: CheckCircle },
|
|
{ id: "t3", name: "Alan C. Saball", handle: "Cliente", testimonial: "Súper rápidos con toda la gestión.", icon: TrendingUp },
|
|
]}
|
|
title="Lo que opinan nuestros clientes"
|
|
description="Más de 37 reseñas positivas nos avalan."
|
|
/>
|
|
</div>
|
|
|
|
<div id="cta" data-section="cta">
|
|
<ContactCTA
|
|
tag="¡Consultanos ya!"
|
|
title="¿Listo para encontrar tu próximo vehículo?"
|
|
description="Nuestro equipo está disponible para asesorarte personalmente hoy mismo."
|
|
buttons={[{ text: "Hablar con un asesor", href: "https://wa.me/5493584019137" }]}
|
|
background={{ variant: "gradient-bars" }}
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Contacto y ubicación"
|
|
description="Encontranos en Teniente Gral. Juan Domingo Perón, Buenos Aires."
|
|
inputs={[
|
|
{ name: "nombre", type: "text", placeholder: "Nombre", required: true },
|
|
{ name: "tel", type: "tel", placeholder: "Teléfono", required: true },
|
|
]}
|
|
textarea={{ name: "mensaje", placeholder: "¿Qué modelo buscás?", rows: 4 }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/map-spain-seen-through-magnifying-glass_23-2147837126.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Agro Automotores Noroeste"
|
|
copyrightText="© 2025 Agro Automotores Noroeste. Todos los derechos reservados."
|
|
socialLinks={[
|
|
{ icon: Mail, href: "mailto:contacto@agroautomotores.com", ariaLabel: "Email" },
|
|
{ icon: Phone, href: "tel:+5493584019137", ariaLabel: "WhatsApp" },
|
|
{ icon: MapPin, href: "#", ariaLabel: "Ubicación" },
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|