Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -3,13 +3,14 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactSplit from '@/components/sections/contact/ContactSplit'; 
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import ContactCTA from '@/components/sections/contact/ContactCTA'; 
 import { Leaf, MapPin, MessageSquare, ShieldCheck, Sparkles, UserCheck } from "lucide-react";
 
 export default function LandingPage() {
@@ -31,39 +32,23 @@ export default function LandingPage() {
       <NavbarLayoutFloatingInline
       navItems={[
         {
-          name: "Inicio",
-          id: "#hero",
-        },
+          name: "Inicio",          id: "#hero"},
         {
-          name: "Reservas",
-          id: "#booking",
-        },
+          name: "Reservas",          id: "#booking"},
         {
-          name: "Servicios",
-          id: "#services",
-        },
+          name: "Servicios",          id: "#services"},
         {
-          name: "Resultados",
-          id: "#results",
-        },
+          name: "Resultados",          id: "#results"},
         {
-          name: "Confianza",
-          id: "#confidence",
-        },
+          name: "Confianza",          id: "#confidence"},
         {
-          name: "FAQ",
-          id: "#faq",
-        },
+          name: "FAQ",          id: "#faq"},
         {
-          name: "Contacto",
-          id: "#contact",
-        },
+          name: "Contacto",          id: "#contact"}
       ]}
       brandName="Hair Solución StudioUy"
       button={{
-        text: "Reservar Turno",
-        href: "#booking",
-      }}
+        text: "Reservar Turno",        href: "#booking"}}
       animateOnLoad={true}
     />
   </div>
@@ -71,45 +56,28 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboardGallery
       background={{
-        variant: "plain",
-      }}
+        variant: "plain"}}
       title="Recuperá tu imagen con prótesis capilares premium"
       description="Resultados naturales, personalizados y con atención privada en Paso Molino."
       buttons={[
         {
-          text: "Reservar diagnóstico",
-          href: "https://wa.me/59898631321?text=Hola%20Mariana%2C%20quiero%20reservar%20un%20diagnóstico%20en%20Hair%20Solución%20StudioUy.",
-        },
+          text: "Reservar diagnóstico",          href: "https://wa.me/59898631321?text=Hola%20Mariana%2C%20quiero%20reservar%20un%20diagnóstico%20en%20Hair%20Solución%20StudioUy."},
         {
-          text: "Consultar por WhatsApp",
-          href: "https://wa.me/59898631321?text=Hola%20Mariana%2C%20quiero%20consultar%20más%20información%20sobre%20prótesis%20capilares%20en%20Hair%20Solución%20StudioUy.",
-        },
+          text: "Consultar por WhatsApp",          href: "https://wa.me/59898631321?text=Hola%20Mariana%2C%20quiero%20consultar%20más%20información%20sobre%20prótesis%20capilares%20en%20Hair%20Solución%20StudioUy."}
       ]}
       mediaItems={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/joyful-woman-with-blonde-trendy-hairstyle-accessories-white-stylish-shirt-laughing-looking-into-camera-park_197531-28448.jpg",
-          imageAlt: "Woman with natural looking hair prosthesis",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/joyful-woman-with-blonde-trendy-hairstyle-accessories-white-stylish-shirt-laughing-looking-into-camera-park_197531-28448.jpg",          imageAlt: "Woman with natural looking hair prosthesis"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/years-one-color-communication-30-35_1296-315.jpg",
-          imageAlt: "Man with natural looking hair prosthesis",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/years-one-color-communication-30-35_1296-315.jpg",          imageAlt: "Man with natural looking hair prosthesis"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/winter-sports-gear-accessories_482257-76733.jpg",
-          imageAlt: "Luxurious hair salon interior",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/winter-sports-gear-accessories_482257-76733.jpg",          imageAlt: "Luxurious hair salon interior"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-done-hairdresser_23-2150771238.jpg",
-          imageAlt: "Hair stylist working on a client's hair",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-done-hairdresser_23-2150771238.jpg",          imageAlt: "Hair stylist working on a client's hair"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/emotions-girl_1157-9008.jpg",
-          imageAlt: "Smiling woman with restored hair confidence",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/emotions-girl_1157-9008.jpg",          imageAlt: "Smiling woman with restored hair confidence"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-blonde-female-friends-posing_273609-7273.jpg",
-          imageAlt: "Before and after hair transformation result",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-blonde-female-friends-posing_273609-7273.jpg",          imageAlt: "Before and after hair transformation result"}
       ]}
       mediaAnimation="opacity"
     />
@@ -123,43 +91,21 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "Diagnóstico personalizado",
-          description: "Evaluación privada para encontrar la mejor solución según cada caso.",
-          imageSrc: "http://img.b2bpic.net/free-photo/stylist-applying-makeup-faceless-model_23-2147783871.jpg",
-          imageAlt: "Personalized hair consultation",
-        },
+          title: "Diagnóstico personalizado",          description: "Evaluación privada para encontrar la mejor solución según cada caso.",          imageSrc: "http://img.b2bpic.net/free-photo/stylist-applying-makeup-faceless-model_23-2147783871.jpg",          imageAlt: "Personalized hair consultation"},
         {
-          title: "Prótesis capilares premium",
-          description: "Sistemas capilares naturales, cómodos y personalizados.",
-          imageSrc: "http://img.b2bpic.net/free-photo/hair-serum-bottle-brown-wavy-hair_23-2152001430.jpg",
-          imageAlt: "Premium hair prosthesis",
-        },
+          title: "Prótesis capilares premium",          description: "Sistemas capilares naturales, cómodos y personalizados.",          imageSrc: "http://img.b2bpic.net/free-photo/hair-serum-bottle-brown-wavy-hair_23-2152001430.jpg",          imageAlt: "Premium hair prosthesis"},
         {
-          title: "Colocación y mantenimiento",
-          description: "Servicio profesional para mantener un resultado prolijo y seguro.",
-          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-with-woman-client_657883-572.jpg",
-          imageAlt: "Hair prosthesis placement and maintenance",
-        },
+          title: "Colocación y mantenimiento",          description: "Servicio profesional para mantener un resultado prolijo y seguro.",          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-with-woman-client_657883-572.jpg",          imageAlt: "Hair prosthesis placement and maintenance"},
         {
-          title: "Renovación de imagen",
-          description: "Transformaciones pensadas para recuperar confianza y estilo.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-pretty-woman-with-arms-her-head_23-2147611463.jpg",
-          imageAlt: "Image renewal hair transformation",
-        },
+          title: "Renovación de imagen",          description: "Transformaciones pensadas para recuperar confianza y estilo.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-pretty-woman-with-arms-her-head_23-2147611463.jpg",          imageAlt: "Image renewal hair transformation"},
         {
-          title: "Servicios para damas y caballeros",
-          description: "Atención personalizada según necesidad, estilo y tipo de cabello.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575477.jpg",
-          imageAlt: "Hair solutions for ladies and gentlemen",
-        },
+          title: "Servicios para damas y caballeros",          description: "Atención personalizada según necesidad, estilo y tipo de cabello.",          imageSrc: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575477.jpg",          imageAlt: "Hair solutions for ladies and gentlemen"}
       ]}
       title="Descubrí nuestros servicios premium"
       description="Soluciones capilares personalizadas para recuperar tu confianza y estilo."
       buttons={[
         {
-          text: "Reservar este servicio",
-          href: "#booking",
-        },
+          text: "Reservar este servicio",          href: "#booking"}
       ]}
     />
   </div>
@@ -172,55 +118,23 @@ export default function LandingPage() {
       useInvertedBackground={true}
       products={[
         {
-          id: "result-1",
-          name: "Transformación Femenina",
-          price: "Naturalidad",
-          imageSrc: "http://img.b2bpic.net/free-photo/unique-beautiful-women-portrait_23-2149012589.jpg",
-          imageAlt: "Before and after woman hair prosthesis",
-        },
+          id: "result-1",          name: "Transformación Femenina",          price: "Naturalidad",          imageSrc: "http://img.b2bpic.net/free-photo/unique-beautiful-women-portrait_23-2149012589.jpg",          imageAlt: "Before and after woman hair prosthesis"},
         {
-          id: "result-2",
-          name: "Restauración Masculina",
-          price: "Discreción",
-          imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-man-with-beard-looks-himself-mirror_169016-27267.jpg",
-          imageAlt: "Before and after man hair prosthesis",
-        },
+          id: "result-2",          name: "Restauración Masculina",          price: "Discreción",          imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-man-with-beard-looks-himself-mirror_169016-27267.jpg",          imageAlt: "Before and after man hair prosthesis"},
         {
-          id: "result-3",
-          name: "Volumen y Estilo",
-          price: "Elegancia",
-          imageSrc: "http://img.b2bpic.net/free-photo/collage-blonde-with-hair-after-before-beauty-salon_132075-11810.jpg",
-          imageAlt: "Before and after woman hair volume",
-        },
+          id: "result-3",          name: "Volumen y Estilo",          price: "Elegancia",          imageSrc: "http://img.b2bpic.net/free-photo/collage-blonde-with-hair-after-before-beauty-salon_132075-11810.jpg",          imageAlt: "Before and after woman hair volume"},
         {
-          id: "result-4",
-          name: "Cobertura Perfecta",
-          price: "Confianza",
-          imageSrc: "http://img.b2bpic.net/free-photo/positive-blond-bearded-male-dressed-plaid-shirt-denim-jacket-posing-grey-vignette-background_613910-11758.jpg",
-          imageAlt: "Before and after man bald spot coverage",
-        },
+          id: "result-4",          name: "Cobertura Perfecta",          price: "Confianza",          imageSrc: "http://img.b2bpic.net/free-photo/positive-blond-bearded-male-dressed-plaid-shirt-denim-jacket-posing-grey-vignette-background_613910-11758.jpg",          imageAlt: "Before and after man bald spot coverage"},
         {
-          id: "result-5",
-          name: "Belleza Renovada",
-          price: "Armonía",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-woman-leaning-hand_1262-3272.jpg",
-          imageAlt: "Before and after woman short hair",
-        },
+          id: "result-5",          name: "Belleza Renovada",          price: "Armonía",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-woman-leaning-hand_1262-3272.jpg",          imageAlt: "Before and after woman short hair"},
         {
-          id: "result-6",
-          name: "Cabello Indetectable",
-          price: "Realismo",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-wavy-blonde-hair_23-2152001459.jpg",
-          imageAlt: "Before and after natural dark hair",
-        },
+          id: "result-6",          name: "Cabello Indetectable",          price: "Realismo",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-wavy-blonde-hair_23-2152001459.jpg",          imageAlt: "Before and after natural dark hair"}
       ]}
       title="Resultados que se ven naturales"
       description="Cada trabajo es personalizado para lograr un resultado cómodo, seguro y lo más natural posible."
       buttons={[
         {
-          text: "Quiero mi diagnóstico",
-          href: "https://wa.me/59898631321?text=Hola%20Mariana%2C%20estoy%20interesado%20en%20un%20diagnóstico%20tras%20ver%20sus%20resultados%20en%20la%20web.",
-        },
+          text: "Quiero mi diagnóstico",          href: "https://wa.me/59898631321?text=Hola%20Mariana%2C%20estoy%20interesado%20en%20un%20diagnóstico%20tras%20ver%20sus%20resultados%20en%20la%20web."}
       ]}
     />
   </div>
@@ -232,34 +146,22 @@ export default function LandingPage() {
       metrics={[
         {
           icon: ShieldCheck,
-          label: "Atención privada y personalizada",
-          value: "Discreción",
-        },
+          label: "Atención privada y personalizada",          value: "Discreción"},
         {
           icon: Leaf,
-          label: "Resultados naturales",
-          value: "Autenticidad",
-        },
+          label: "Resultados naturales",          value: "Autenticidad"},
         {
           icon: Sparkles,
-          label: "Prótesis capilares premium",
-          value: "Calidad",
-        },
+          label: "Prótesis capilares premium",          value: "Calidad"},
         {
           icon: UserCheck,
-          label: "Asesoramiento profesional",
-          value: "Experiencia",
-        },
+          label: "Asesoramiento profesional",          value: "Experiencia"},
         {
           icon: MapPin,
-          label: "Ubicación en Paso Molino",
-          value: "Accesible",
-        },
+          label: "Ubicación en Paso Molino",          value: "Accesible"},
         {
           icon: MessageSquare,
-          label: "Reserva rápida por WhatsApp",
-          value: "Facilidad",
-        },
+          label: "Reserva rápida por WhatsApp",          value: "Facilidad"}
       ]}
       metricsAnimation="slide-up"
     />
@@ -271,30 +173,15 @@ export default function LandingPage() {
       useInvertedBackground={true}
       faqs={[
         {
-          id: "faq-1",
-          title: "¿La prótesis capilar se nota?",
-          content: "No. El objetivo es lograr un resultado natural, adaptado a tu estilo y tipo de cabello. Trabajamos con los mejores sistemas capilares para una integración indetectable.",
-        },
+          id: "faq-1",          title: "¿La prótesis capilar se nota?",          content: "No. El objetivo es lograr un resultado natural, adaptado a tu estilo y tipo de cabello. Trabajamos con los mejores sistemas capilares para una integración indetectable."},
         {
-          id: "faq-2",
-          title: "¿Tengo que reservar diagnóstico antes?",
-          content: "Sí. El diagnóstico permite evaluar tu caso de forma privada, entender tus necesidades y recomendar la mejor solución personalizada para vos.",
-        },
+          id: "faq-2",          title: "¿Tengo que reservar diagnóstico antes?",          content: "Sí. El diagnóstico permite evaluar tu caso de forma privada, entender tus necesidades y recomendar la mejor solución personalizada para vos."},
         {
-          id: "faq-3",
-          title: "¿Atienden hombres y mujeres?",
-          content: "Sí, trabajamos con soluciones capilares personalizadas tanto para damas como para caballeros, adaptándonos a cada estilo y necesidad.",
-        },
+          id: "faq-3",          title: "¿Atienden hombres y mujeres?",          content: "Sí, trabajamos con soluciones capilares personalizadas tanto para damas como para caballeros, adaptándonos a cada estilo y necesidad."},
         {
-          id: "faq-4",
-          title: "¿Dónde están ubicados?",
-          content: "Nuestro estudio se encuentra en Paso Molino, Montevideo, ofreciendo un espacio privado y cómodo para tu atención.",
-        },
+          id: "faq-4",          title: "¿Dónde están ubicados?",          content: "Nuestro estudio se encuentra en Paso Molino, Montevideo, ofreciendo un espacio privado y cómodo para tu atención."},
         {
-          id: "faq-5",
-          title: "¿Puedo consultar por WhatsApp?",
-          content: "Sí, podés escribirnos directamente al 098 631 321 para cualquier consulta o para iniciar tu proceso de reserva. Estamos para ayudarte.",
-        },
+          id: "faq-5",          title: "¿Puedo consultar por WhatsApp?",          content: "Sí, podés escribirnos directamente al 098 631 321 para cualquier consulta o para iniciar tu proceso de reserva. Estamos para ayudarte."}
       ]}
       title="Preguntas frecuentes"
       description="Respuestas a tus dudas más comunes sobre prótesis capilares y nuestros servicios."
@@ -306,39 +193,31 @@ export default function LandingPage() {
       <ContactCTA
       useInvertedBackground={true}
       background={{
-        variant: "plain",
-      }}
+        variant: "plain"}}
       tag="Agenda tu cita"
-      title="Reservá tu diagnóstico"
-      description="Completa tus datos para recibir asesoramiento personalizado o reservar tu turno directamente por WhatsApp. Te contactaremos a la brevedad."
+      title="Reserva tu cita online"
+      description="Selecciona el servicio, fecha y hora que mejor se adapte a ti. Nuestro equipo confirmará tu turno a la brevedad."
       buttons={[
         {
-          text: "Enviar reserva por WhatsApp",
-          href: "https://wa.me/59898631321?text=Hola%20Mariana%2C%20quiero%20reservar%20un%20turno%20en%20Hair%20Solución%20StudioUy.%0ANombre%3A%20%5Bnombre%5D%0AServicio%3A%20%5Bservicio%5D%0ADía%20preferido%3A%20%5Bdía%5D%0AHorario%20preferido%3A%20%5Bhorario%5D%0AComentario%3A%20%5Bcomentario%5D",
-        },
+          text: "Agendar por WhatsApp ahora",          href: "https://wa.me/59898631321?text=Hola%20Mariana%2C%20quiero%20reservar%20un%20turno%20en%20Hair%20Solución%20StudioUy.%0ANombre%3A%20%5Bnombre%5D%0AServicio%3A%20%5Bservicio%5D%0ADía%20preferido%3A%20%5Bdía%5D%0AHorario%20preferido%3A%20%5Bhorario%5D%0AComentario%3A%20%5Bcomentario%5D"}
       ]}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
+      <ContactSplit
       useInvertedBackground={false}
       background={{
-        variant: "plain",
-      }}
-      tag="Contacto"
-      title="Visitá Hair Solución StudioUy"
-      description="Atención privada en Paso Molino, Montevideo. Reservá tu diagnóstico y recibí asesoramiento personalizado de Mariana Aguilar."
-      buttons={[
-        {
-          text: "Reservar por WhatsApp",
-          href: "https://wa.me/59898631321?text=Hola%20Mariana%2C%20quiero%20consultar%20por%20un%20turno%20en%20Hair%20Solución%20StudioUy.",
-        },
-        {
-          text: "Ver Instagram",
-          href: "https://instagram.com/hair_solucion_studiouy",
-        },
-      ]}
+        variant: "plain"}}
+      tag="Estamos aquí para ti"
+      title="Contacta con Hair Solución StudioUy"
+      description="Para consultas o reservas, completa el formulario de contacto o escríbenos directamente por WhatsApp al +598 98 631 321. También puedes seguirnos en Instagram. Te esperamos en Paso Molino."
+      mediaPosition="right"
+      imageSrc="http://img.b2bpic.net/free-photo/side-view-hairdresser-combing-hair-young-woman_23-2147783935.jpg"
+      imageAlt="Hairdresser styling client's hair"
+      inputPlaceholder="Tu email"
+      buttonText="Enviar mensaje"
+      onSubmit={(email) => console.log('Contact form submitted with email:', email)}
     />
   </div>
 
@@ -346,59 +225,38 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         {
-          title: "Navegación",
-          items: [
+          title: "Navegación",          items: [
             {
-              label: "Inicio",
-              href: "#hero",
+              label: "Inicio",              href: "#hero"},
+            {
+              label: "Servicios",              href: "#services"},
+            {
+              label: "Resultados",              href: "#results"},
+            {
+              label: "FAQ",              href: "#faq"}
+          ]
         },
         {
-              label: "Servicios",
-              href: "#services",
+          title: "Información",          items: [
+            {
+              label: "Paso Molino, Montevideo",              href: "#contact"},
+            {
+              label: "WhatsApp: +598 98 631 321",              href: "https://wa.me/59898631321"},
+            {
+              label: "Instagram: @hair_solucion_studiouy",              href: "https://instagram.com/hair_solucion_studiouy"}
+          ]
         },
         {
-              label: "Resultados",
-              href: "#results",
-            },
+          title: "Legal",          items: [
             {
-              label: "FAQ",
-              href: "#faq",
-            },
-          ],
-        },
+              label: "Política de Privacidad",              href: "#"},
             {
-          title: "Contacto",
-          items: [
-            {
-              label: "Reservar Diagnóstico",
-              href: "#booking",
-            },
-            {
-              label: "WhatsApp: 098 631 321",
-              href: "https://wa.me/59898631321",
-            },
-            {
-              label: "Instagram",
-              href: "https://instagram.com/hair_solucion_studiouy",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Política de Privacidad",
-              href: "#",
-            },
-            {
-              label: "Términos y Condiciones",
-              href: "#",
-            },
-          ],
-        },
+              label: "Términos y Condiciones",              href: "#"}
+          ]
+        }
       ]}
       logoText="Hair Solución StudioUy"
-      copyrightText="© 2024 Hair Solución StudioUy. Todos los derechos reservados."
+      copyrightText="© 2025 Hair Solución StudioUy. Todos los derechos reservados."
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0A0A0A;
-  --card: #1A1A1A;
-  --foreground: #FFFFFF;
-  --primary-cta: #20C2A4;
+  --background: #f5f5f5;
+  --card: #ffffff;
+  --foreground: #1c1c1c;
+  --primary-cta: #1f514c;
   --primary-cta-text: #0A0A0A;
-  --secondary-cta: #1A1A1A;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #FFFFFF;
-  --accent: #4A4A4A;
-  --background-accent: #20C2A4;
+  --accent: #159c49;
+  --background-accent: #a8e8ba;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);