Merge version_5 into main

Merge version_5 into main

src/app/page.tsx

@@ -4,7 +4,7 @@ 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 FooterMedia from '@/components/sections/footer/FooterMedia';
+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';
@@ -12,6 +12,8 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp
 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 (
@@ -31,26 +33,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
-          name: "Inicio",
-          id: "hero",
-        },
-        {
-          name: "Nosotros",
-          id: "about",
-        },
-        {
-          name: "Servicios",
-          id: "features",
-        },
-        {
-          name: "Vehículos",
-          id: "products",
-        },
-        {
-          name: "Contacto",
-          id: "contact",
-        },
+        { 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"
     />
@@ -58,46 +45,16 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardCarousel
-      background={{
-        variant: "gradient-bars",
-      }}
+      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 disponibles",
-          href: "#products",
-        },
-        {
-          text: "Consultá por WhatsApp",
-          href: "https://wa.me/5493584019137",
-        },
+        { 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",
-          imageAlt: "luxury car road sunset",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/car-park_1203-3451.jpg",
-          imageAlt: "car dealership exterior",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-black-white-background_23-2150498630.jpg",
-          imageAlt: "car front close up",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-elegant-woman-car-salon_1157-32029.jpg",
-          imageAlt: "hand holding car keys",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/man-choosing-car-car-saloon_1303-25646.jpg",
-          imageAlt: "car salesperson professional",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/rush-hour-traffic-jam-multiple-lane-highway-generative-ai_188544-46274.jpg",
-          imageAlt: "drone view car inventory",
-        },
+        { 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>
@@ -105,54 +62,31 @@ export default function LandingPage() {
   <div id="trust" data-section="trust">
       <MetricCardTwo
       animationType="slide-up"
-      textboxLayout="default"
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",
-          value: "4.8★",
-          description: "Reseñas en Google",
-        },
-        {
-          id: "m2",
-          value: "37+",
-          description: "Clientes felices",
-        },
-        {
-          id: "m3",
-          value: "Multimarca",
-          description: "Broker Automotor",
-        },
-        {
-          id: "m4",
-          value: "Local",
-          description: "Atención personalizada",
-        },
+        { 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 nuestra trayectoria y compromiso con cada cliente."
+      description="Nuestros números avalan nuestro compromiso constante con la transparencia."
+      textboxLayout="default"
     />
   </div>
 
   <div id="about" data-section="about">
       <MetricSplitMediaAbout
       useInvertedBackground={false}
-      title="Conocemos el mercado. Trabajamos para vos."
-      description="Agro Automotores Noroeste es un broker automotor con base en Buenos Aires. Nos especializamos en encontrar el vehículo ideal para cada cliente, con financiación a medida y un trato honesto."
+      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"
-      imageAlt="business team meeting car broker"
       mediaAnimation="slide-up"
       metricsAnimation="slide-up"
       metrics={[
-        {
-          title: "Años de experiencia",
-          value: "10+",
-        },
-        {
-          title: "Vehículos entregados",
-          value: "150+",
-        },
+        { title: "Años experiencia", value: "10+" },
+        { title: "Vehículos entregados", value: "150+" },
       ]}
     />
   </div>
@@ -163,36 +97,12 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          id: "f1",
-          title: "Contanos qué buscás",
-          tags: [
-            "Fase 1",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-diverse-business-partners-closing-deal_74855-1968.jpg",
-          imageAlt: "customer meeting broker",
-        },
-        {
-          id: "f2",
-          title: "Nosotros buscamos por vos",
-          tags: [
-            "Fase 2",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/businessman-video-conferencing_23-2148738300.jpg",
-          imageAlt: "digital car search tool",
-        },
-        {
-          id: "f3",
-          title: "Cerrás la operación",
-          tags: [
-            "Fase 3",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/saleswoman-talking-customer-car-salon_1303-26818.jpg",
-          imageAlt: "handshake deal car sale",
-        },
+        { 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="Cómo trabajamos"
-      description="Tu próximo vehículo, a un paso de distancia."
+      title="Proceso transparente"
+      description="Tu próximo vehículo, más cerca de lo que imaginás."
     />
   </div>
 
@@ -203,69 +113,12 @@ export default function LandingPage() {
       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",
-          imageAlt: "toyota hilux studio shot",
-        },
-        {
-          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",
-          imageAlt: "ford ranger studio shot",
-        },
-        {
-          id: "p3",
-          brand: "Volkswagen",
-          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",
-          imageAlt: "vw amarok studio shot",
-        },
-        {
-          id: "p4",
-          brand: "Chevrolet",
-          name: "S10 High Country",
-          price: "Consultar",
-          rating: 5,
-          reviewCount: "7",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-roof-car-with-megaphone-another-covering-his-ears_1194-1129.jpg",
-          imageAlt: "chevrolet s10 sale",
-        },
-        {
-          id: "p5",
-          brand: "Fiat",
-          name: "Toro Freedom",
-          price: "Consultar",
-          rating: 5,
-          reviewCount: "9",
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-car-salon_1157-20830.jpg",
-          imageAlt: "fiat toro sale",
-        },
-        {
-          id: "p6",
-          brand: "Toyota",
-          name: "Etios Platinum",
-          price: "Consultar",
-          rating: 5,
-          reviewCount: "5",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-headlight-black-luxury-car-lights-against-grey-background_181624-25350.jpg",
-          imageAlt: "toyota etios sale",
-        },
+        { 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 destacados"
-      description="Stock frecuente. Consultanos hoy mismo."
+      title="Vehículos seleccionados"
+      description="Unidades verificadas para tu seguridad."
     />
   </div>
 
@@ -275,60 +128,11 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       plans={[
-        {
-          id: "pr1",
-          title: "Plan Tradicional",
-          price: "Variable",
-          period: "cuotas",
-          features: [
-            "Tasa fija",
-            "Plazo extendido",
-            "Cuotas fijas",
-          ],
-          button: {
-            text: "Consultar",
-            href: "https://wa.me/5493584019137",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-insurance-agent-making-calculations-while-signing-agreement-with-client-office_637285-10890.jpg",
-          imageAlt: "finance contract document",
-        },
-        {
-          id: "pr2",
-          title: "Plan Express",
-          price: "Rápido",
-          period: "fácil",
-          features: [
-            "Sin muchos papeles",
-            "Aprobación 24h",
-            "Asesoría",
-          ],
-          button: {
-            text: "Consultar",
-            href: "https://wa.me/5493584019137",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-business-office-desk-background-business-loan-appcation-form-pencil-letter-car-tree-wooden-table-background-with-copy-space_1921-23.jpg",
-          imageAlt: "speedometer icon fast approval",
-        },
-        {
-          id: "pr3",
-          title: "Plan Personalizado",
-          price: "Flexible",
-          period: "ideal",
-          features: [
-            "Diseñado para vos",
-            "Sin sorpresas",
-            "Transparente",
-          ],
-          button: {
-            text: "Consultar",
-            href: "https://wa.me/5493584019137",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/business-concept-with-jigsaw-puzzle_23-2148102408.jpg",
-          imageAlt: "personalized finance icon",
-        },
+        { 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 sin complicaciones"
-      description="Planes a tu medida para que llegues a tu auto."
+      title="Financiación a medida"
+      description="Diseñamos el plan ideal para que llegues a tu auto sin sorpresas."
     />
   </div>
 
@@ -338,130 +142,50 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",
-          name: "Teresa Morón",
-          handle: "Cliente",
-          testimonial: "Excelente servicio, super recomendables.",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-correcting-grammar-mistakes_23-2150171372.jpg",
-        },
-        {
-          id: "t2",
-          name: "Alejandro Arce",
-          handle: "Cliente",
-          testimonial: "Gente muy amable y transparente.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-man-holding-his-arms-crossed_23-2148737964.jpg",
-        },
-        {
-          id: "t3",
-          name: "Alan Cluet Saball",
-          handle: "Cliente",
-          testimonial: "Responsables y rápidos con los trámites.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-football-game_23-2149015523.jpg",
-        },
-        {
-          id: "t4",
-          name: "María G.",
-          handle: "Cliente",
-          testimonial: "Encontré exactamente el vehículo que quería.",
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-smiling-with-copy-space_23-2148435784.jpg",
-        },
-        {
-          id: "t5",
-          name: "Jorge M.",
-          handle: "Cliente",
-          testimonial: "El mejor broker, me ayudaron con todo.",
-          imageSrc: "http://img.b2bpic.net/free-photo/pleased-successful-female-administrator-office_273609-4124.jpg",
-        },
+        { 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 dicen nuestros clientes"
-      description="4.8 sobre 5 basado en 37 reseñas de Google."
+      title="Lo que opinan nuestros clientes"
+      description="Más de 37 reseñas positivas nos avalan."
     />
   </div>
 
   <div id="cta" data-section="cta">
-      <ContactSplitForm
-      useInvertedBackground={true}
-      title="¿Listo para encontrar tu próximo auto?"
-      description="Respondemos rápido. Sin compromiso."
-      inputs={[
-        {
-          name: "nombre",
-          type: "text",
-          placeholder: "Tu nombre",
-          required: true,
-        },
-        {
-          name: "tel",
-          type: "tel",
-          placeholder: "Tu teléfono",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "mensaje",
-        placeholder: "¿Qué vehículo buscás?",
-        required: true,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/happy-customers-car-dealership_23-2149106169.jpg"
-      imageAlt="car sale contact background"
-    />
+      <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="Ubicación y contacto"
-      description="Teniente Gral. Juan Domingo Perón, Buenos Aires."
+      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,
-        },
+        { 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"
-      imageAlt="street sign buenos aires"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139136.jpg"
-      logoText="Agro Automotores Noroeste"
-      columns={[
-        {
-          title: "Links",
-          items: [
-            {
-              label: "Inicio",
-              href: "#hero",
-            },
-            {
-              label: "Vehículos",
-              href: "#products",
-            },
-            {
-              label: "Financiación",
-              href: "#pricing",
-            },
-            {
-              label: "Contacto",
-              href: "#contact",
-            },
-          ],
-        },
-      ]}
-      copyrightText="© 2025 Agro Automotores Noroeste. Todos los derechos reservados."
-      imageAlt="automotive dark texture background"
-    />
+      <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>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fffefe;
-  --card: #f6f7f4;
-  --foreground: #080908;
-  --primary-cta: #0e3a29;
-  --primary-cta-text: #fffefe;
-  --secondary-cta: #e7eecd;
-  --secondary-cta-text: #080908;
-  --accent: #35c18b;
-  --background-accent: #ecebe4;
+  --background: #020617;
+  --card: #0f172a;
+  --foreground: #e2e8f0;
+  --primary-cta: #c4d8f9;
+  --primary-cta-text: #020617;
+  --secondary-cta: #041633;
+  --secondary-cta-text: #e2e8f0;
+  --accent: #2d30f3;
+  --background-accent: #1d4ed8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);