Update src/app/page.tsx

Merge version_6 into main

src/app/page.tsx

@@ -5,14 +5,14 @@ import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
-import { Briefcase, Building, CheckCircle, ExternalLink, ListChecks, Mail, MessageSquare, Smile, Sparkles, Trophy, Wallet } from "lucide-react";
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import { Briefcase, Building, CheckCircle, ExternalLink, ListChecks, Mail, Smile, Sparkles, Trophy, Wallet } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -33,33 +33,19 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "Inicio",
-          id: "#inicio",
-        },
+          name: "Inicio",          id: "#inicio"},
         {
-          name: "Nosotros",
-          id: "#nosotros",
-        },
+          name: "Nosotros",          id: "#nosotros"},
         {
-          name: "Funcionalidades",
-          id: "#funcionalidades",
-        },
+          name: "Funcionalidades",          id: "#funcionalidades"},
         {
-          name: "Módulos",
-          id: "#modulos",
-        },
+          name: "Módulos",          id: "#modulos"},
         {
-          name: "Casos de Éxito",
-          id: "#casosexito",
-        },
+          name: "Casos de Éxito",          id: "#casosexito"},
         {
-          name: "Testimonios",
-          id: "#testimonios",
-        },
+          name: "Testimonios",          id: "#testimonios"},
         {
-          name: "Contacto",
-          id: "#contacto",
-        },
+          name: "Contacto",          id: "#contacto"},
       ]}
       logoSrc="http://img.b2bpic.net/free-vector/logotype_23-2148146022.jpg"
       logoAlt="Logo ConstructoERP"
@@ -68,10 +54,7 @@ export default function LandingPage() {
   </div>
 
   <div id="inicio" data-section="inicio">
-      <HeroBillboardScroll
-      background={{
-        variant: "plain",
-      }}
+      <HeroSplitDualMedia
       title="ConstructoERP: La gestión inteligente para tu obra"
       description="Optimiza cada proceso de construcción y oficios auxiliares con nuestra plataforma ERP líder. Desde la planificación hasta la entrega, ten el control total de tus proyectos."
       tag="Innovación en Construcción"
@@ -79,17 +62,24 @@ export default function LandingPage() {
       tagAnimation="slide-up"
       buttons={[
         {
-          text: "Solicitar Demostración",
-          href: "#contacto",
-        },
+          text: "Solicitar Demostración",          href: "#contacto"},
         {
-          text: "Ver Funcionalidades",
-          href: "#funcionalidades",
-        },
+          text: "Ver Funcionalidades",          href: "#funcionalidades"},
       ]}
       buttonAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/architectural-design-team-configures-floor-plan-dual-monitors_482257-126974.jpg"
-      imageAlt="Dashboard de ConstructoERP mostrando gestión de proyectos de construcción"
+      background={{
+        variant: "plain"}}
+      mediaItems={[
+        {
+          imageSrc: "http://img.b2bpic.net/free-photo/architectural-design-team-configures-floor-plan-dual-monitors_482257-126974.jpg",          imageAlt: "Dashboard de ConstructoERP mostrando gestión de proyectos de construcción"
+        },
+        {
+          imageSrc: "http://img.b2bpic.net/free-photo/group-engineers-table_23-2147704185.jpg?_wi=1",          imageAlt: "Equipo de ConstructoERP colaborando en una oficina moderna"
+        }
+      ]}
+      mediaAnimation="slide-up"
+      rating={5}
+      ratingText="Basado en más de 1000 valoraciones"
     />
   </div>
 
@@ -98,28 +88,17 @@ export default function LandingPage() {
       useInvertedBackground={true}
       heading={[
         {
-          type: "text",
-          content: "Sobre ",
-        },
+          type: "text",          content: "Sobre "},
         {
-          type: "image",
-          src: "http://img.b2bpic.net/free-vector/logotype_23-2148146022.jpg",
-          alt: "ConstructoERP Logo",
-        },
+          type: "image",          src: "http://img.b2bpic.net/free-vector/logotype_23-2148146022.jpg",          alt: "ConstructoERP Logo"},
         {
-          type: "text",
-          content: ", tu socio en la eficiencia constructiva.",
-        },
+          type: "text",          content: ", tu socio en la eficiencia constructiva."},
       ]}
       buttons={[
         {
-          text: "Nuestra Historia",
-          href: "#",
-        },
+          text: "Nuestra Historia",          href: "#"},
         {
-          text: "Valores",
-          href: "#",
-        },
+          text: "Valores",          href: "#"},
       ]}
       buttonAnimation="slide-up"
     />
@@ -132,65 +111,29 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "f1",
-          title: "Planificación y Programación Detallada",
-          tags: [
-            "Gestión de Tareas",
-            "Diagramas Gantt",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-working-outdoors-with-project_53876-47045.jpg",
-          imageAlt: "Planificación de proyectos en dashboard",
-        },
+          id: "f1",          title: "Planificación y Programación Detallada",          tags: [
+            "Gestión de Tareas",            "Diagramas Gantt"],
+          imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-working-outdoors-con-project_53876-47045.jpg",          imageAlt: "Planificación de proyectos en dashboard"},
         {
-          id: "f2",
-          title: "Gestión de Recursos y Equipos",
-          tags: [
-            "Control de Inventario",
-            "Asignación Eficiente",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/architect-front-brick-wall_23-2147813088.jpg",
-          imageAlt: "Gestión de maquinaria y personal",
-        },
+          id: "f2",          title: "Gestión de Recursos y Equipos",          tags: [
+            "Control de Inventario",            "Asignación Eficiente"],
+          imageSrc: "http://img.b2bpic.net/free-photo/architect-front-brick-wall_23-2147813088.jpg",          imageAlt: "Gestión de maquinaria y personal"},
         {
-          id: "f3",
-          title: "Control Financiero y Presupuestario",
-          tags: [
-            "Facturación",
-            "Análisis de Costos",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-business-workspace-with-device-showing-data-analytics-infographics_482257-116612.jpg",
-          imageAlt: "Gráficos de finanzas y presupuestos",
-        },
+          id: "f3",          title: "Control Financiero y Presupuestario",          tags: [
+            "Facturación",            "Análisis de Costos"],
+          imageSrc: "http://img.b2bpic.net/free-photo/empty-business-workspace-with-device-showing-data-analytics-infographics_482257-116612.jpg",          imageAlt: "Gráficos de finanzas y presupuestos"},
         {
-          id: "f4",
-          title: "Seguimiento en Tiempo Real",
-          tags: [
-            "Avance de Obra",
-            "Alertas Personalizadas",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/factory-experts-design-assembly-facility-production-lines-tablet-cad-program_482257-126119.jpg",
-          imageAlt: "Monitoreo en tiempo real",
-        },
+          id: "f4",          title: "Seguimiento en Tiempo Real",          tags: [
+            "Avance de Obra",            "Alertas Personalizadas"],
+          imageSrc: "http://img.b2bpic.net/free-photo/factory-experts-design-assembly-facility-production-lines-tablet-cad-program_482257-126119.jpg",          imageAlt: "Monitoreo en tiempo real"},
         {
-          id: "f5",
-          title: "Gestión Documental Integrada",
-          tags: [
-            "Archivos Centralizados",
-            "Control de Versiones",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/men-discussing-outdoors-high-angle_23-2149426493.jpg",
-          imageAlt: "Archivos y documentos organizados",
-        },
+          id: "f5",          title: "Gestión Documental Integrada",          tags: [
+            "Archivos Centralizados",            "Control de Versiones"],
+          imageSrc: "http://img.b2bpic.net/free-photo/men-discussing-outdoors-high-angle_23-2149426493.jpg",          imageAlt: "Archivos y documentos organizados"},
         {
-          id: "f6",
-          title: "Integración con Otros Sistemas",
-          tags: [
-            "APIs Abiertas",
-            "Compatibilidad",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/blueprint-calculator-helmet_23-2147785587.jpg",
-          imageAlt: "Integración de sistemas",
-        },
+          id: "f6",          title: "Integración con Otros Sistemas",          tags: [
+            "APIs Abiertas",            "Compatibilidad"],
+          imageSrc: "http://img.b2bpic.net/free-photo/blueprint-calculator-helmet_23-2147785587.jpg",          imageAlt: "Integración de sistemas"},
       ]}
       title="Funcionalidades Clave que Transforman tu Negocio"
       description="ConstructoERP está diseñado para simplificar las operaciones complejas y aumentar la productividad en cada etapa de tus proyectos."
@@ -208,47 +151,17 @@ export default function LandingPage() {
       useInvertedBackground={true}
       products={[
         {
-          id: "m1",
-          name: "Gestión de Proyectos",
-          price: "Desde $99/mes",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-working-as-engineer_23-2148836106.jpg",
-          imageAlt: "Icono de gestión de proyectos",
-        },
+          id: "m1",          name: "Gestión de Proyectos",          price: "Desde $99/mes",          imageSrc: "http://img.b2bpic.net/free-photo/woman-working-as-engineer_23-2148836106.jpg",          imageAlt: "Icono de gestión de proyectos"},
         {
-          id: "m2",
-          name: "Control de Obra y Avance",
-          price: "Desde $79/mes",
-          imageSrc: "http://img.b2bpic.net/free-photo/new-building-project_1098-14328.jpg",
-          imageAlt: "Icono de control de obra",
-        },
+          id: "m2",          name: "Control de Obra y Avance",          price: "Desde $79/mes",          imageSrc: "http://img.b2bpic.net/free-photo/new-building-project_1098-14328.jpg",          imageAlt: "Icono de control de obra"},
         {
-          id: "m3",
-          name: "Compras y Almacenes",
-          price: "Desde $69/mes",
-          imageSrc: "http://img.b2bpic.net/free-photo/home-icon-front-side_187299-39256.jpg",
-          imageAlt: "Icono de compras y almacenes",
-        },
+          id: "m3",          name: "Compras y Almacenes",          price: "Desde $69/mes",          imageSrc: "http://img.b2bpic.net/free-photo/home-icon-front-side_187299-39256.jpg",          imageAlt: "Icono de compras y almacenes"},
         {
-          id: "m4",
-          name: "Gestión de Personal y Recursos",
-          price: "Desde $89/mes",
-          imageSrc: "http://img.b2bpic.net/free-photo/interaction-contractors_1098-14893.jpg",
-          imageAlt: "Icono de gestión de personal",
-        },
+          id: "m4",          name: "Gestión de Personal y Recursos",          price: "Desde $89/mes",          imageSrc: "http://img.b2bpic.net/free-photo/interaction-contractors_1098-14893.jpg",          imageAlt: "Icono de gestión de personal"},
         {
-          id: "m5",
-          name: "Facturación y Contabilidad",
-          price: "Desde $109/mes",
-          imageSrc: "http://img.b2bpic.net/free-photo/clipboard-icon-left-side-white-background_187299-40140.jpg",
-          imageAlt: "Icono de facturación y contabilidad",
-        },
+          id: "m5",          name: "Facturación y Contabilidad",          price: "Desde $109/mes",          imageSrc: "http://img.b2bpic.net/free-photo/clipboard-icon-left-side-white-background_187299-40140.jpg",          imageAlt: "Icono de facturación y contabilidad"},
         {
-          id: "m6",
-          name: "Informes y Análisis",
-          price: "Desde $59/mes",
-          imageSrc: "http://img.b2bpic.net/free-photo/business-analysis-report-folder-icon_53876-14638.jpg",
-          imageAlt: "Icono de informes y análisis",
-        },
+          id: "m6",          name: "Informes y Análisis",          price: "Desde $59/mes",          imageSrc: "http://img.b2bpic.net/free-photo/business-analysis-report-folder-icon_53876-14638.jpg",          imageAlt: "Icono de informes y análisis"},
       ]}
       title="Explora Nuestros Módulos Potentes"
       description="Cada módulo de ConstructoERP está diseñado para abordar un área específica de tu negocio, garantizando una cobertura completa y eficiente."
@@ -266,36 +179,20 @@ export default function LandingPage() {
       useInvertedBackground={false}
       metrics={[
         {
-          id: "m1",
-          value: "+30%",
-          title: "Aumento de Productividad",
-          description: "Nuestros clientes experimentan un incremento significativo en la eficiencia operativa.",
-          icon: ExternalLink,
+          id: "m1",          value: "+30%",          title: "Aumento de Productividad",          description: "Nuestros clientes experimentan un incremento significativo en la eficiencia operativa.",          icon: ExternalLink,
         },
         {
-          id: "m2",
-          value: "-15%",
-          title: "Reducción de Costos",
-          description: "Optimización de recursos que se traduce en ahorros sustanciales para tu empresa.",
-          icon: Wallet,
+          id: "m2",          value: "-15%",          title: "Reducción de Costos",          description: "Optimización de recursos que se traduce en ahorros sustanciales para tu empresa.",          icon: Wallet,
         },
         {
-          id: "m3",
-          value: "98%",
-          title: "Proyectos Completados a Tiempo",
-          description: "Garantizamos la finalización exitosa de tus proyectos dentro de los plazos establecidos.",
-          icon: CheckCircle,
+          id: "m3",          value: "98%",          title: "Proyectos Completados a Tiempo",          description: "Garantizamos la finalización exitosa de tus proyectos dentro de los plazos establecidos.",          icon: CheckCircle,
         },
         {
-          id: "m4",
-          value: "+40%",
-          title: "Satisfacción del Cliente",
-          description: "Mejora en la calidad del servicio y la entrega de valor a tus clientes finales.",
-          icon: Smile,
+          id: "m4",          value: "+40%",          title: "Satisfacción del Cliente",          description: "Mejora en la calidad del servicio y la entrega de valor a tus clientes finales.",          icon: Smile,
         },
       ]}
       title="Resultados Comprobados: El Impacto de ConstructoERP"
-      description="Descubre cómo ConstructoERP está ayudando a empresas como la tuya a alcanzar nuevos niveles de éxito y eficiencia."
+      description="Descubre cómo ConstructoERP está helping a empresas como la tuya a alcanzar nuevos niveles de éxito y eficiencia."
       tag="Nuestras Métricas"
       tagIcon={Trophy}
       tagAnimation="slide-up"
@@ -303,57 +200,18 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonios" data-section="testimonios">
-      <TestimonialCardSix
-      animationType="slide-up"
-      textboxLayout="default"
+      <TestimonialCardFifteen
       useInvertedBackground={true}
-      testimonials={[
+      testimonial="ConstructoERP ha revolucionado la forma en que gestionamos nuestros proyectos. La visibilidad en tiempo real es incomparable."
+      rating={5}
+      author="Ana García"
+      avatars={[
         {
-          id: "t1",
-          name: "Ana García",
-          handle: "@anagarcia_pm",
-          testimonial: "ConstructoERP ha revolucionado la forma en que gestionamos nuestros proyectos. La visibilidad en tiempo real es incomparable.",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-architect-with-helmet_23-2147702528.jpg",
-          imageAlt: "Retrato de Ana García",
-        },
-        {
-          id: "t2",
-          name: "Carlos Ruiz",
-          handle: "@carlosruiz_aux",
-          testimonial: "La implementación de ConstructoERP fue clave para optimizar nuestros recursos en los oficios auxiliares. ¡Totalmente recomendado!",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881180.jpg",
-          imageAlt: "Retrato de Carlos Ruiz",
-        },
-        {
-          id: "t3",
-          name: "Sofía Morales",
-          handle: "@sofiamorales_arq",
-          testimonial: "Como arquitecta, aprecio la integración de datos y la facilidad para colaborar. ConstructoERP es una herramienta indispensable.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-lady-chair-taking-notes-near-plan-model-house-table_23-2148039913.jpg",
-          imageAlt: "Retrato de Sofía Morales",
-        },
-        {
-          id: "t4",
-          name: "Javier López",
-          handle: "@javierlopez_sup",
-          testimonial: "El seguimiento en obra nunca fue tan sencillo. ConstructoERP nos permite tomar decisiones rápidas y basadas en datos exactos.",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-architect-posing-his-office_23-2148242944.jpg",
-          imageAlt: "Retrato de Javier López",
-        },
-        {
-          id: "t5",
-          name: "Elena Vidal",
-          handle: "@elenavidal_cfo",
-          testimonial: "Desde la contabilidad hasta la facturación, ConstructoERP nos ha dado una visión financiera clara y un control total sobre los gastos.",
-          imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg",
-          imageAlt: "Retrato de Elena Vidal",
-        },
+          src: "http://img.b2bpic.net/free-photo/female-architect-with-helmet_23-2147702528.jpg?_wi=2",          alt: "Retrato de Ana García"
+        }
       ]}
-      title="Lo que dicen nuestros clientes satisfechos"
-      description="Descubre por qué profesionales de la construcción y oficios auxiliares eligen ConstructoERP para impulsar su crecimiento."
-      tag="Opiniones Reales"
-      tagIcon={MessageSquare}
-      tagAnimation="slide-up"
+      ratingAnimation="slide-up"
+      avatarsAnimation="slide-up"
     />
   </div>
 
@@ -362,14 +220,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "Global Construct S.A.",
-        "Urban Builders Group",
-        "Innovate Trades Solutions",
-        "Heritage Remodeling Co.",
-        "Heavy Duty Works Inc.",
-        "EcoBuild Innovations",
-        "Precision Engineering Partners",
-      ]}
+        "Global Construct S.A.",        "Urban Builders Group",        "Innovate Trades Solutions",        "Heritage Remodeling Co.",        "Heavy Duty Works Inc.",        "EcoBuild Innovations",        "Precision Engineering Partners"]}
       title="Nuestros Socios Estratégicos y Clientes Líderes"
       description="Trabajamos con las empresas más destacadas del sector, construyendo juntos el futuro de la gestión."
       tag="Confianza y Alianzas"
@@ -377,6 +228,8 @@ export default function LandingPage() {
       tagAnimation="slide-up"
       speed={40}
       showCard={true}
+      textBoxTitleClassName="text-blue-600"
+      textBoxDescriptionClassName="text-black"
     />
   </div>
 
@@ -384,20 +237,21 @@ export default function LandingPage() {
       <ContactSplit
       useInvertedBackground={true}
       background={{
-        variant: "sparkles-gradient",
-      }}
+        variant: "sparkles-gradient"}}
       tag="Contáctanos"
       title="¿Listo para transformar tu gestión?"
       description="Nuestro equipo está listo para mostrarte cómo ConstructoERP puede optimizar tus proyectos. Completa el formulario y nos pondremos en contacto."
       tagIcon={Mail}
       tagAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/group-engineers-table_23-2147704185.jpg"
+      imageSrc="http://img.b2bpic.net/free-photo/group-engineers-table_23-2147704185.jpg?_wi=2"
       imageAlt="Equipo de ConstructoERP colaborando en una oficina moderna"
       mediaAnimation="slide-up"
       mediaPosition="right"
       inputPlaceholder="Introduce tu email"
       buttonText="Solicitar Información"
       termsText="Al hacer clic en 'Solicitar Información', confirmas que estás de acuerdo con nuestros Términos y Condiciones."
+      titleClassName="text-blue-600"
+      descriptionClassName="text-black"
     />
   </div>
 
@@ -406,61 +260,43 @@ export default function LandingPage() {
       logoText="ConstructoERP"
       columns={[
         {
-          title: "Empresa",
-          items: [
+          title: "Empresa",          items: [
             {
-              label: "Inicio",
-              href: "#inicio",
-            },
+              label: "Inicio",              href: "#inicio"},
             {
-              label: "Sobre Nosotros",
-              href: "#nosotros",
-            },
+              label: "Sobre Nosotros",              href: "#nosotros"},
             {
-              label: "Contacto",
-              href: "#contacto",
-            },
+              label: "Contacto",              href: "#contacto"},
           ],
         },
         {
-          title: "Soluciones",
-          items: [
+          title: "Soluciones",          items: [
             {
-              label: "Funcionalidades",
-              href: "#funcionalidades",
-            },
+              label: "Funcionalidades",              href: "#funcionalidades"},
             {
-              label: "Módulos",
-              href: "#modulos",
-            },
+              label: "Módulos",              href: "#modulos"},
             {
-              label: "Casos de Éxito",
-              href: "#casosexito",
-            },
+              label: "Casos de Éxito",              href: "#casosexito"},
           ],
         },
         {
-          title: "Recursos",
-          items: [
+          title: "Recursos",          items: [
             {
-              label: "Blog",
-              href: "#",
-            },
+              label: "Blog",              href: "#"},
             {
-              label: "Soporte",
-              href: "#",
-            },
+              label: "Soporte",              href: "#"},
             {
-              label: "FAQs",
-              href: "#",
-            },
+              label: "FAQs",              href: "#"},
           ],
         },
       ]}
       copyrightText="© 2024 ConstructoERP. Todos los derechos reservados."
+      logoTextClassName="text-blue-600"
+      columnTitleClassName="text-blue-600"
+      columnItemClassName="text-black"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
+  --background: #f8f8f8;
   --card: #ffffff;
-  --foreground: #0055C8;
-  --primary-cta: #b82b40;
+  --foreground: #000000;
+  --primary-cta: #1e90ff;
   --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #6b7280;
   --secondary-cta-text: #250c0d;
-  --accent: #b90941;
-  --background-accent: #F9F8F6;
+  --accent: #2563eb;
+  --background-accent: #e0e7ff;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);