Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -4,8 +4,8 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
@@ -31,37 +31,30 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
-          name: "Inicio",          id: "#hero"},
-        {
-          name: "Nosotros",          id: "#about"},
-        {
-          name: "Productos",          id: "#products"},
-        {
-          name: "Contacto",          id: "#contact"},
+        { name: "Inicio", id: "#hero" },
+        { name: "Nosotros", id: "#about" },
+        { name: "Productos", id: "#products" },
+        { name: "Contacto", id: "#contact" },
       ]}
       brandName="FIXOL"
       button={{
-        text: "Distribuidores",        href: "#contact"}}
+        text: "Distribuidores", href: "#contact" }}
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroLogoBillboardSplit
-      background={{
-        variant: "gradient-bars"}}
-      logoText="FIXOL"
-      description="Fuerza, adherencia y confianza en cada proyecto. Soluciones profesionales para pegar, recubrir y construir con la calidad de FIXOL."
+      <HeroSplit
+      background={{ variant: "gradient-bars" }}
+      title="FIXOL: Construye con Confianza"
+      description="Fuerza, adherencia y calidad profesional para cada proyecto. Soluciones líderes para el mercado mexicano."
       buttons={[
-        {
-          text: "Ver productos",          href: "#products"},
-        {
-          text: "Contactar",          href: "#contact"},
+        { text: "Ver productos", href: "#products" },
+        { text: "Contacto", href: "#contact" },
       ]}
-      layoutOrder="default"
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/ultra-realistic-shot-of-a-professional-m-1774992297042-ffa2ec4c.png"
-      imageAlt="FIXOL Hero Product"
+      imageAlt="FIXOL Hero"
       mediaAnimation="slide-up"
+      imagePosition="right"
     />
   </div>
 
@@ -80,14 +73,10 @@ export default function LandingPage() {
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
       products={[
-        {
-          id: "p1",          name: "Adhesivos",          price: "Soluciones para pisos y porcelanatos",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/close-up-of-tile-placement-on-floor-adhe-1774992297853-630bb75d.png"},
-        {
-          id: "p2",          name: "Recubrimientos",          price: "Acabados finos y resistentes",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/smooth-wall-finish-application-plaster-t-1774992295768-01eb4973.png"},
-        {
-          id: "p3",          name: "Aditivos",          price: "Mejora el desempeño de materiales",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/mixing-construction-materials-in-a-bucke-1774992296702-a523a1af.png"},
-        {
-          id: "p4",          name: "Especializados",          price: "Acabados arquitectónicos premium",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/modern-polished-concrete-floor-architect-1774992295938-d2ff23e8.png"},
+        { id: "p1", name: "Adhesivos", price: "Soluciones para pisos", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/close-up-of-tile-placement-on-floor-adhe-1774992297853-630bb75d.png" },
+        { id: "p2", name: "Recubrimientos", price: "Acabados finos", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/smooth-wall-finish-application-plaster-t-1774992295768-01eb4973.png" },
+        { id: "p3", name: "Aditivos", price: "Mejora materiales", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/mixing-construction-materials-in-a-bucke-1774992296702-a523a1af.png" },
+        { id: "p4", name: "Especializados", price: "Acabados premium", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/modern-polished-concrete-floor-architect-1774992295938-d2ff23e8.png" },
       ]}
       title="Categorías de Producto"
       description="Soluciones de alta calidad para cada etapa de tu obra."
@@ -101,35 +90,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "Fixol Total",          description: "Adhesivo multi-superficie de adherencia extrema.",          icon: CheckCircle,
+          title: "Fixol Total 20kg",          description: "Nuestro adhesivo estrella: multi-superficie de adherencia extrema. Calidad premium para profesionales.",          icon: CheckCircle,
           mediaItems: [
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/product-bag-of-fixol-total-premium-indus-1774992297242-e99188b0.png?_wi=1",              imageAlt: "Fixol Total"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/product-bag-of-fixol-total-premium-indus-1774992297242-e99188b0.png?_wi=2",              imageAlt: "Fixol Total"},
-          ],
-        },
-        {
-          title: "Pegaturbo",          description: "Secado rápido para entregas inmediatas.",          icon: Zap,
-          mediaItems: [
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/product-bag-of-fixol-total-premium-indus-1774992297242-e99188b0.png?_wi=3",              imageAlt: "Pegaturbo"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/product-bag-of-fixol-total-premium-indus-1774992297242-e99188b0.png?_wi=4",              imageAlt: "Pegaturbo"},
-          ],
-        },
-        {
-          title: "Unicerámica",          description: "Calidad inigualable para cerámica tradicional.",          icon: Shield,
-          mediaItems: [
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/product-bag-of-fixol-total-premium-indus-1774992297242-e99188b0.png?_wi=5",              imageAlt: "Unicerámica"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/product-bag-of-fixol-total-premium-indus-1774992297242-e99188b0.png?_wi=6",              imageAlt: "Unicerámica"},
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/uploaded-1775000486077-i15r45zb.png?_wi=1", imageAlt: "Fixol Total 20kg" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/uploaded-1775000486077-i15r45zb.png?_wi=2", imageAlt: "Fixol Total 20kg" },
           ],
         },
       ]}
-      title="Productos Destacados"
-      description="La línea de alto desempeño preferida por profesionales."
+      title="Producto Destacado"
+      description="Máximo rendimiento para resultados impecables."
     />
   </div>
 
@@ -139,21 +108,12 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",          value: "Alta",          title: "Adherencia",          items: [
-            "Seguridad garantizada",            "Agarre potente"],
-        },
-        {
-          id: "m2",          value: "Máxima",          title: "Resistencia",          items: [
-            "Durabilidad extrema",            "Calidad comprobada"],
-        },
-        {
-          id: "m3",          value: "Fino",          title: "Acabado",          items: [
-            "Estética impecable",            "Resultado profesional"],
-        },
+        { id: "m1", value: "Alta", title: "Adherencia", items: ["Seguridad", "Agarre"] },
+        { id: "m2", value: "Máxima", title: "Resistencia", items: ["Durabilidad", "Calidad"] },
+        { id: "m3", value: "Fino", title: "Acabado", items: ["Estética", "Profesional"] },
       ]}
       title="¿Por qué elegir FIXOL?"
-      description="Nuestros estándares de calidad superan las expectativas de los proyectos más exigentes."
+      description="Estándares superiores para proyectos exigentes."
     />
   </div>
 
@@ -163,36 +123,22 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",          name: "Pedro Sánchez",          handle: "Albañil Maestro",          testimonial: "FIXOL cambió mi forma de trabajar. Rendimiento garantizado.",          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/authentic-portrait-of-a-mexican-construc-1774992295259-c9cda0d8.png?_wi=1"},
-        {
-          id: "t2",          name: "Arq. María López",          handle: "Arquitecta",          testimonial: "El acabado profesional que mis clientes exigen.",          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/portrait-of-a-mexican-architect-on-a-con-1774992296676-0e257c11.png?_wi=1"},
-        {
-          id: "t3",          name: "Carlos Ruiz",          handle: "Distribuidor",          testimonial: "La mejor relación costo-beneficio del mercado.",          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/portrait-of-a-mexican-hardware-store-man-1774992296238-07a2e307.png"},
-        {
-          id: "t4",          name: "Juan Pérez",          handle: "Contratista",          testimonial: "Confianza total en cada bulto de material.",          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/authentic-portrait-of-a-mexican-construc-1774992295259-c9cda0d8.png?_wi=2"},
-        {
-          id: "t5",          name: "Elena Martínez",          handle: "Ingeniera Civil",          testimonial: "La consistencia de sus productos es impecable, siempre elijo FIXOL.",          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/portrait-of-a-mexican-architect-on-a-con-1774992296676-0e257c11.png?_wi=2"},
+        { id: "t1", name: "Pedro Sánchez", handle: "Albañil", testimonial: "FIXOL cambió mi forma de trabajar.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/authentic-portrait-of-a-mexican-construc-1774992295259-c9cda0d8.png?_wi=1" },
+        { id: "t2", name: "Arq. María López", handle: "Arquitecta", testimonial: "Acabado profesional.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/portrait-of-a-mexican-architect-on-a-con-1774992296676-0e257c11.png?_wi=1" },
       ]}
       showRating={true}
       title="Confianza que se construye"
-      description="La opinión de quienes confían su prestigio en nuestra marca."
+      description="La opinión de nuestros expertos."
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactSplit
       useInvertedBackground={false}
-      background={{
-        variant: "plain"}}
+      background={{ variant: "plain" }}
       tag="Contacto"
-      title="Lleva FIXOL a tu próxima obra"
-      description="Habla con un asesor experto y encuentra el distribuidor más cercano."
+      title="Lleva FIXOL a tu obra"
+      description="Habla con un asesor hoy mismo."
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/professional-construction-site-at-sunset-1774992295973-70ec0412.png"
       mediaAnimation="slide-up"
       buttonText="Enviar mensaje"
@@ -200,27 +146,10 @@ export default function LandingPage() {
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj9QTSAxJIhIECN10nEKrQar5O/professional-minimalist-fixol-logo-white-1774992293805-dd534746.png"
-      columns={[
-        {
-          title: "FIXOL",          items: [
-            {
-              label: "Productos",              href: "#products"},
-            {
-              label: "Nosotros",              href: "#about"},
-          ],
-        },
-        {
-          title: "Contacto",          items: [
-            {
-              label: "Hablar con asesor",              href: "#contact"},
-            {
-              label: "Distribuidores",              href: "#contact"},
-          ],
-        },
-      ]}
-      copyrightText="© 2025 FIXOL | Soluciones Profesionales en Construcción"
+      <FooterLogoReveal
+      logoText="FIXOL"
+      leftLink={{ text: "Productos", href: "#products" }}
+      rightLink={{ text: "Contacto", href: "#contact" }}
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #15479c;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffffe6;
+  --primary-cta: #e6e6e6;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffffe6;
+  --accent: #737373;
+  --background-accent: #737373;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);