Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -5,11 +5,12 @@ import ReactLenis from "lenis/react";
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import ButtonDirectionalHover from '@/components/button/ButtonDirectionalHover/ButtonDirectionalHover';
 
 export default function LandingPage() {
   return (
@@ -26,265 +27,128 @@ export default function LandingPage() {
         headingFontWeight="medium"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Inicio",
-          id: "hero",
-        },
-        {
-          name: "Nosotros",
-          id: "about",
-        },
-        {
-          name: "Servicios",
-          id: "services",
-        },
-        {
-          name: "Contacto",
-          id: "contact",
-        },
-      ]}
-      brandName="Carmen Roca"
-    />
-  </div>
+        <div className="fixed bottom-6 right-6 z-50">
+            <ButtonDirectionalHover 
+                text="Reservar Cita"
+                href="#contact"
+                className="shadow-xl"
+            />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardGallery
-      background={{
-        variant: "plain",
-      }}
-      title="Tu belleza, nuestro arte, tu confianza"
-      description="Cada corte, cada color, cada tratamiento es diseñado solo para ti. En Carmen Roca, no solo transformamos tu cabello: te devolvemos la seguridad de sentirte hermosa."
-      buttons={[
-        {
-          text: "Reservar mi cita ahora",
-          href: "#contact",
-        },
-      ]}
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-holding-hairbrush_107420-12147.jpg?_wi=1",
-          imageAlt: "Salon Luxury Interior",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-dried-hairdresser_23-2150771295.jpg?_wi=1",
-          imageAlt: "Expert Stylist",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-typing-laptop_23-2148304954.jpg?_wi=1",
-          imageAlt: "Beauty Atmosphere",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blond-girl-dress-playing-with-hair-smiling-looking-thoughtful-standing-white-copy-space_176420-41096.jpg?_wi=1",
-          imageAlt: "Satisfied Client",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-work_52683-130989.jpg",
-          imageAlt: "Hair Treatment",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-studio_1157-17095.jpg",
-          imageAlt: "Modern Decor",
-        },
-      ]}
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarStyleFullscreen
+              navItems={[
+                { name: "Inicio", id: "hero" },
+                { name: "Nosotros", id: "about" },
+                { name: "Servicios", id: "services" },
+                { name: "Contacto", id: "contact" },
+              ]}
+              brandName="Carmen Roca"
+            />
+        </div>
 
-  <div id="about" data-section="about">
-      <MetricSplitMediaAbout
-      useInvertedBackground={false}
-      title="Experticia y Pasión"
-      description="Con más de una década transformando la confianza de nuestras clientas, Carmen Roca Peluquería combina técnicas avanzadas con una atención personalizada que entiende tus necesidades."
-      metrics={[
-        {
-          value: "15+",
-          title: "Años de experiencia",
-        },
-        {
-          value: "5k+",
-          title: "Transformaciones únicas",
-        },
-        {
-          value: "98%",
-          title: "Clientas satisfechas",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/portrait-dentist-standing-with-arms-crossed_107420-73977.jpg"
-      imageAlt="Carmen Roca Styling Studio"
-      mediaAnimation="slide-up"
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+            <HeroBillboardGallery
+              background={{ variant: "plain" }}
+              title="Tu belleza, nuestro arte, tu confianza"
+              description="Cada corte, cada color, cada tratamiento es diseñado solo para ti. En Carmen Roca, no solo transformamos tu cabello: te devolvemos la seguridad de sentirte hermosa."
+              buttons={[{ text: "Reservar mi cita ahora", href: "#contact" }]}
+              mediaItems={[
+                { imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-holding-hairbrush_107420-12147.jpg?_wi=1", imageAlt: "Salon Luxury Interior" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-dried-hairdresser_23-2150771295.jpg?_wi=1", imageAlt: "Expert Stylist" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-typing-laptop_23-2148304954.jpg?_wi=1", imageAlt: "Beauty Atmosphere" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blond-girl-dress-playing-with-hair-smiling-looking-thoughtful-standing-white-copy-space_176420-41096.jpg?_wi=1", imageAlt: "Satisfied Client" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-work_52683-130989.jpg", imageAlt: "Hair Treatment" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-studio_1157-17095.jpg", imageAlt: "Modern Decor" },
+              ]}
+              mediaAnimation="slide-up"
+            />
+        </div>
 
-  <div id="services" data-section="services">
-      <FeatureCardSix
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: 1,
-          title: "Coloración Personalizada",
-          description: "Diseñamos tonos únicos que resaltan tus facciones y cuidan la salud de tu fibra capilar.",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-holding-hairbrush_107420-12147.jpg?_wi=2",
-          imageAlt: "Coloring",
-        },
-        {
-          id: 2,
-          title: "Cortes de Vanguardia",
-          description: "Diseños personalizados adaptados a tu estilo de vida y estructura facial, garantizando confianza.",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-dried-hairdresser_23-2150771295.jpg?_wi=2",
-          imageAlt: "Cuts",
-        },
-        {
-          id: 3,
-          title: "Tratamientos de Nutrición",
-          description: "Cuidado intensivo para devolverle el brillo y la vitalidad a tu cabello desde la raíz hasta las puntas.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-typing-laptop_23-2148304954.jpg?_wi=2",
-          imageAlt: "Treatments",
-        },
-      ]}
-      title="Nuestra Especialidad"
-      description="Servicios de alta gama diseñados para realzar tu belleza natural con total profesionalismo."
-    />
-  </div>
+        <div id="about" data-section="about">
+            <MetricSplitMediaAbout
+              useInvertedBackground={false}
+              title="Experticia y Pasión"
+              description="Con más de una década transformando la confianza de nuestras clientas, Carmen Roca Peluquería combina técnicas avanzadas con una atención personalizada que entiende tus necesidades."
+              metrics={[
+                { value: "15+", title: "Años de experiencia" },
+                { value: "5k+", title: "Transformaciones únicas" },
+                { value: "98%", title: "Clientas satisfechas" },
+              ]}
+              imageSrc="http://img.b2bpic.net/free-photo/portrait-dentist-standing-with-arms-crossed_107420-73977.jpg"
+              imageAlt="Carmen Roca Styling Studio"
+              mediaAnimation="slide-up"
+              metricsAnimation="slide-up"
+            />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSix
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Laura G.",
-          handle: "Profesional",
-          testimonial: "La mejor atención que he recibido. Entendieron exactamente lo que buscaba para mi cabello.",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-office-worker-tallking-lady-black-dress_1157-40482.jpg",
-        },
-        {
-          id: "2",
-          name: "Elena M.",
-          handle: "Novia",
-          testimonial: "Mi experiencia para el día de mi boda fue impecable. Sentí que estaba en manos de expertos.",
-          imageSrc: "http://img.b2bpic.net/free-photo/bride-getting-hair-done-front-view_23-2149860774.jpg",
-        },
-        {
-          id: "3",
-          name: "Sofía P.",
-          handle: "Regular",
-          testimonial: "La consistencia y la calidad de los productos me dan la seguridad de volver cada mes.",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-girl-making-faces_651396-708.jpg",
-        },
-        {
-          id: "4",
-          name: "Andrea R.",
-          handle: "Directiva",
-          testimonial: "Carmen Roca no solo me dejó el cabello increíble, sino que me hizo sentir renovada y segura.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-pink-sweater-looking-camera-posing-high-quality-photo_114579-31514.jpg",
-        },
-        {
-          id: "5",
-          name: "Valentina C.",
-          handle: "Clienta Premium",
-          testimonial: "El ambiente es sofisticado y los resultados siempre superan mis expectativas. Altamente recomendado.",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blond-girl-dress-playing-with-hair-smiling-looking-thoughtful-standing-white-copy-space_176420-41096.jpg?_wi=2",
-        },
-      ]}
-      title="Lo que dicen de nosotros"
-      description="Clientas felices que encontraron en Carmen Roca su lugar de confianza y transformación."
-    />
-  </div>
+        <div id="services" data-section="services">
+            <FeatureCardSix
+              textboxLayout="split"
+              useInvertedBackground={false}
+              features={[
+                { id: 1, title: "Coloración Personalizada", description: "Diseñamos tonos únicos que resaltan tus facciones y cuidan la salud de tu fibra capilar.", imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-holding-hairbrush_107420-12147.jpg?_wi=2", imageAlt: "Coloring" },
+                { id: 2, title: "Cortes de Vanguardia", description: "Diseños personalizados adaptados a tu estilo de vida y estructura facial, garantizando confianza.", imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-dried-hairdresser_23-2150771295.jpg?_wi=2", imageAlt: "Cuts" },
+                { id: 3, title: "Tratamientos de Nutrición", description: "Cuidado intensivo para devolverle el brillo y la vitalidad a tu cabello desde la raíz hasta las puntas.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-typing-laptop_23-2148304954.jpg?_wi=2", imageAlt: "Treatments" },
+              ]}
+              title="Nuestra Especialidad"
+              description="Servicios de alta gama diseñados para realzar tu belleza natural con total profesionalismo."
+            />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "¿Necesito cita previa?",
-          content: "Sí, recomendamos agendar con antelación para garantizar tu espacio y tiempo de atención personalizada.",
-        },
-        {
-          id: "f2",
-          title: "¿Tienen servicios de estética?",
-          content: "Sí, ofrecemos una gama integral de tratamientos de estética y cuidado facial profesional.",
-        },
-        {
-          id: "f3",
-          title: "¿Trabajan con clientas internacionales?",
-          content: "Absolutamente, nuestro equipo habla varios idiomas para atender a turistas y residentes internacionales.",
-        },
-      ]}
-      title="Preguntas Frecuentes"
-      description="Resolvemos tus dudas para que tu experiencia en el salón sea perfecta."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+            <TestimonialCardSix
+              animationType="slide-up"
+              textboxLayout="default"
+              useInvertedBackground={false}
+              testimonials={[
+                { id: "1", name: "Laura G.", handle: "Profesional", testimonial: "La mejor atención que he recibido. Entendieron exactamente lo que buscaba para mi cabello.", imageSrc: "http://img.b2bpic.net/free-photo/woman-office-worker-tallking-lady-black-dress_1157-40482.jpg" },
+                { id: "2", name: "Elena M.", handle: "Novia", testimonial: "Mi experiencia para el día de mi boda fue impecable. Sentí que estaba en manos de expertos.", imageSrc: "http://img.b2bpic.net/free-photo/bride-getting-hair-done-front-view_23-2149860774.jpg" },
+                { id: "3", name: "Sofía P.", handle: "Regular", testimonial: "La consistencia y la calidad de los productos me dan la seguridad de volver cada mes.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-girl-making-faces_651396-708.jpg" },
+                { id: "4", name: "Andrea R.", handle: "Directiva", testimonial: "Carmen Roca no solo me dejó el cabello increíble, sino que me hizo sentir renovada y segura.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-pink-sweater-looking-camera-posing-high-quality-photo_114579-31514.jpg" },
+                { id: "5", name: "Valentina C.", handle: "Clienta Premium", testimonial: "El ambiente es sofisticado y los resultados siempre superan mis expectativas. Altamente recomendado.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blond-girl-dress-playing-with-hair-smiling-looking-thoughtful-standing-white-copy-space_176420-41096.jpg?_wi=2" },
+              ]}
+              title="Lo que dicen de nosotros"
+              description="Clientas felices que encontraron en Carmen Roca su lugar de confianza y transformación."
+            />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="Contacto"
-      title="Agenda tu transformación"
-      description="Estamos listos para atenderte. Reserva tu espacio y comienza tu viaje de belleza."
-    />
-  </div>
+        <div id="faq" data-section="faq">
+            <FaqBase
+              textboxLayout="default"
+              useInvertedBackground={false}
+              faqs={[
+                { id: "f1", title: "¿Necesito cita previa?", content: "Sí, recomendamos agendar con antelación para garantizar tu espacio y tiempo de atención personalizada." },
+                { id: "f2", title: "¿Tienen servicios de estética?", content: "Sí, ofrecemos una gama integral de tratamientos de estética y cuidado facial profesional." },
+                { id: "f3", title: "¿Trabajan con clientas internacionales?", content: "Absolutamente, nuestro equipo habla varios idiomas para atender a turistas y residentes internacionales." },
+              ]}
+              title="Preguntas Frecuentes"
+              description="Resolvemos tus dudas para que tu experiencia en el salón sea perfecta."
+              faqsAnimation="slide-up"
+            />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/bright-interior-cozy-room-with-chair-home-decor-modern-interior-details-decor_169016-4204.jpg"
-      imageAlt="Carmen Roca Salon"
-      columns={[
-        {
-          title: "Servicios",
-          items: [
-            {
-              label: "Corte y Color",
-              href: "#services",
-            },
-            {
-              label: "Estética Facial",
-              href: "#services",
-            },
-          ],
-        },
-        {
-          title: "Nosotros",
-          items: [
-            {
-              label: "Nuestro Equipo",
-              href: "#about",
-            },
-            {
-              label: "Trayectoria",
-              href: "#about",
-            },
-          ],
-        },
-        {
-          title: "Contacto",
-          items: [
-            {
-              label: "Reservas",
-              href: "#contact",
-            },
-            {
-              label: "Ubicación",
-              href: "#contact",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+            <ContactCenter
+              useInvertedBackground={false}
+              background={{ variant: "plain" }}
+              tag="Contacto"
+              title="Agenda tu transformación"
+              description="Estamos listos para atenderte. Reserva tu espacio y comienza tu viaje de belleza."
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+              logoText="Carmen Roca"
+              columns={[
+                { items: [{ label: "Servicios", href: "#services" }, { label: "Corte y Color", href: "#services" }] },
+                { items: [{ label: "Nosotros", href: "#about" }, { label: "Nuestro Equipo", href: "#about" }] },
+                { items: [{ label: "Reservas", href: "#contact" }, { label: "Ubicación", href: "#contact" }] },
+              ]}
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-source-sans-3), sans-serif;
+  font-family: var(--font-playfair), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-source-sans-3), sans-serif;
+  font-family: var(--font-playfair), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f6f0e9;
-  --card: #efe7dd;
-  --foreground: #2b180a;
-  --primary-cta: #c6b180;
+  --background: #F5F1ED;
+  --card: #FEFDFB;
+  --foreground: #2C2C2C;
+  --primary-cta: #D4AF8F;
   --primary-cta-text: #2b180a;
-  --secondary-cta: #efe7dd;
+  --secondary-cta: #2C2C2C;
   --secondary-cta-text: #2b180a;
-  --accent: #2b180a;
-  --background-accent: #afa094;
+  --accent: #D4AF8F;
+  --background-accent: #D4AF8F;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);