Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,163 +2,80 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 import { Award, CheckCircle, Shield, Sparkles, Star, Zap } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="expand-hover"
-        defaultTextAnimation="background-highlight"
-        borderRadius="rounded"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
         contentWidth="medium"
-        sizing="largeSmallSizeMediumTitles"
-        background="aurora"
-        cardStyle="inset"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="radial-glow"
-        headingFontWeight="medium"
+        sizing="largeSizeMediumTitles"
+        background="noise"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
+      <NavbarStyleCentered
       navItems={[
-        {
-          name: "Inicio",
-          id: "hero",
-        },
-        {
-          name: "Nosotros",
-          id: "about",
-        },
-        {
-          name: "Servicios",
-          id: "services",
-        },
-        {
-          name: "Contacto",
-          id: "contact",
-        },
+        { name: "Inicio", id: "hero" },
+        { name: "Nosotros", id: "about" },
+        { name: "Servicios", id: "services" },
+        { name: "Contacto", id: "contact" },
       ]}
       brandName="Sonrisa Perfecta"
       button={{
-        text: "Agendar Cita",
-        href: "#contact",
-      }}
+        text: "Agendar Cita",        href: "#contact"}}
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardGallery
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Sonrisa Perfecta: Cuidamos tu sonrisa con tecnología y calidez humana"
+      <HeroLogo
+      logoText="Sonrisa Perfecta: Cuidamos tu sonrisa con tecnología y calidez humana"
       description="Expertos en salud bucal dedicados a devolverte la seguridad y confianza de una sonrisa saludable y hermosa."
       buttons={[
-        {
-          text: "Agendar Cita",
-          href: "#contact",
-        },
-        {
-          text: "Ver Servicios",
-          href: "#services",
-        },
+        { text: "Agendar Cita", href: "#contact" },
+        { text: "Ver Servicios", href: "#services" },
       ]}
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-space-with-maquette-table-design-urban-property-plan-building-model-layout-nobody-office-with-architecture-project-real-estate-development-presentation_482257-29970.jpg",
-          imageAlt: "dental clinic happy patient smile",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/dental-tools-equipment-white-background_1232-4416.jpg",
-          imageAlt: "dental equipment modern tools",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-smiling-dentist-office_23-2148338112.jpg",
-          imageAlt: "dentist consultation friendly atmosphere",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-hospital-reception-counter-hallway-waiting-room-seats-medical-examination-appointment-with-physician-registration-desk-with-waiting-area-help-patients-with-disease-diagnosis_482257-51632.jpg",
-          imageAlt: "Empty hospital reception counter in hallway and waiting room seats",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-dentist-wearing-face-mask_23-2149164285.jpg",
-          imageAlt: "Full shot dentist wearing face mask",
-        },
-      ]}
-      mediaAnimation="slide-up"
+      imageSrc="http://img.b2bpic.net/free-photo/empty-space-with-maquette-table-design-urban-property-plan-building-model-layout-nobody-office-with-architecture-project-real-estate-development-presentation_482257-29970.jpg"
     />
   </div>
 
   <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
+      <MediaAbout
+      title="Compromiso con tu salud"
+      description="Más de 15 años brindando atención odontológica de primer nivel con un enfoque centrado en el paciente y la innovación constante en nuestros tratamientos."
+      imageSrc="http://img.b2bpic.net/free-photo/portrait-male-doctor-with-uniform-using-laptop-cabinet-working-checkup-appointments-desk-health-specialist-with-stethoscope-helping-with-prescription-medicine-treatment_482257-39448.jpg"
       useInvertedBackground={false}
-      heading={[
-        {
-          type: "text",
-          content: "Compromiso con tu salud",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/portrait-male-doctor-with-uniform-using-laptop-cabinet-working-checkup-appointments-desk-health-specialist-with-stethoscope-helping-with-prescription-medicine-treatment_482257-39448.jpg",
-          alt: "dentist working professional clinic",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Conoce más",
-          href: "#contact",
-        },
-      ]}
     />
   </div>
 
   <div id="services" data-section="services">
-      <FeatureHoverPattern
+      <FeatureBorderGlow
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          title: "Limpieza Dental",
-          description: "Eliminación profunda de placa y sarro para una boca fresca.",
-          icon: Sparkles,
-        },
-        {
-          title: "Blanqueamiento",
-          description: "Recupera el tono natural y brillante de tu sonrisa.",
-          icon: Star,
-        },
-        {
-          title: "Ortodoncia",
-          description: "Corrección de alineación dental para funcionalidad y estética.",
-          icon: CheckCircle,
-        },
-        {
-          title: "Implantes",
-          description: "Soluciones duraderas para recuperar piezas perdidas.",
-          icon: Shield,
-        },
-        {
-          title: "Endodoncia",
-          description: "Tratamiento de conducto con tecnología indolora.",
-          icon: Zap,
-        },
-        {
-          title: "Odontología General",
-          description: "Prevención y salud bucal integral en cada visita.",
-          icon: Award,
-        },
+        { title: "Limpieza Dental", description: "Eliminación profunda de placa y sarro para una boca fresca.", icon: Sparkles },
+        { title: "Blanqueamiento", description: "Recupera el tono natural y brillante de tu sonrisa.", icon: Star },
+        { title: "Ortodoncia", description: "Corrección de alineación dental para funcionalidad y estética.", icon: CheckCircle },
+        { title: "Implantes", description: "Soluciones duraderas para recuperar piezas perdidas.", icon: Shield },
+        { title: "Endodoncia", description: "Tratamiento de conducto con tecnología indolora.", icon: Zap },
+        { title: "Odontología General", description: "Prevención y salud bucal integral en cada visita.", icon: Award },
       ]}
       title="Nuestros Servicios"
       description="Tratamientos odontológicos avanzados para toda la familia."
@@ -167,189 +84,84 @@ export default function LandingPage() {
 
   <div id="social-proof" data-section="social-proof">
       <SocialProofOne
+      names={["Asociación Dental", "Certificación Salud", "Premio Calidad", "Aval Médico", "Tecnología Avanzada", "Seguridad Paciente", "Confianza Total"]}
+      title="Nuestras Certificaciones"
+      description="Instituciones que avalan nuestra calidad y servicio."
       textboxLayout="default"
       useInvertedBackground={false}
-      names={[
-        "Asociación Dental",
-        "Certificación Salud",
-        "Premio Calidad",
-        "Aval Médico",
-        "Tecnología Avanzada",
-        "Seguridad Paciente",
-        "Confianza Total",
-      ]}
-      title="Nuestras Certificaciones"
-      description="Contamos con los más altos estándares de calidad y seguridad para tu tranquilidad."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardOne
+      <TestimonialCardThirteen
       animationType="slide-up"
+      showRating={true}
       textboxLayout="default"
-      gridVariant="asymmetric-60-wide-40-narrow"
       useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "María González",
-          role: "Paciente",
-          company: "Sonrisa Perfecta",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-healthcare-expert-looking-camera_637285-11471.jpg",
-        },
-        {
-          id: "2",
-          name: "Juan Pérez",
-          role: "Paciente",
-          company: "Sonrisa Perfecta",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/half-profile-image-cheerful-attractive-middle-aged-woman-with-short-gray-hair-wrinkles-having-fun-laughing-joke-smiling-broadly-camera_343059-1891.jpg",
-        },
-        {
-          id: "3",
-          name: "Lucía Ruiz",
-          role: "Paciente",
-          company: "Sonrisa Perfecta",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-smiling-confident-standing-street_839833-16107.jpg",
-        },
-        {
-          id: "4",
-          name: "Carlos Mendieta",
-          role: "Paciente",
-          company: "Sonrisa Perfecta",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/food-lifestyle-concept-beautiful-woman-cooking-kitchen-holding-raw-zucchini-smiling_1258-193230.jpg",
-        },
-        {
-          id: "5",
-          name: "Ana López",
-          role: "Paciente",
-          company: "Sonrisa Perfecta",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-doctor-patient_1170-2163.jpg",
-        },
-      ]}
       title="Lo que dicen nuestros pacientes"
-      description="Más de 10 años creando sonrisas felices."
+      description="Historias de sonrisas renovadas gracias a nuestra atención especializada."
+      testimonials={[
+        { id: "1", name: "María González", handle: "@mariag", testimonial: "El trato fue excelente y los resultados superaron mis expectativas.", rating: 5 },
+        { id: "2", name: "Juan Pérez", handle: "@juanp", testimonial: "Muy profesional, sin dolor y con tecnología de vanguardia.", rating: 5 },
+        { id: "3", name: "Lucía Ruiz", handle: "@luciar", testimonial: "La mejor experiencia dental que he tenido en años.", rating: 5 },
+      ]}
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardTwo
+      <MetricCardEleven
       animationType="slide-up"
       textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
-      metrics={[
-        {
-          id: "1",
-          value: "+10k",
-          description: "Pacientes felices",
-        },
-        {
-          id: "2",
-          value: "15+",
-          description: "Años de experiencia",
-        },
-        {
-          id: "3",
-          value: "100%",
-          description: "Trato personalizado",
-        },
-      ]}
       title="Logros de la clínica"
-      description="Números que respaldan nuestra atención."
+      description="Resultados que nos avalan en nuestra trayectoria."
+      metrics={[
+        { id: "1", value: "+10k", title: "Pacientes felices", description: "Confianza construida a través de los años.", imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-healthcare-expert-looking-camera_637285-11471.jpg" },
+        { id: "2", value: "15+", title: "Años de experiencia", description: "Compromiso ininterrumpido con la salud dental.", imageSrc: "http://img.b2bpic.net/free-photo/half-profile-image-cheerful-attractive-middle-aged-woman-with-short-gray-hair-wrinkles-having-fun-laughing-joke-smiling-broadly-camera_343059-1891.jpg" },
+        { id: "3", value: "100%", title: "Atención Personalizada", description: "Cada sonrisa es tratada como única y especial.", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-smiling-confident-standing-street_839833-16107.jpg" },
+      ]}
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitMedia
+      <FaqDouble
+      title="Preguntas Frecuentes"
+      description="Resolvemos tus inquietudes para que tu visita sea cómoda y segura."
+      faqs={[
+        { id: "1", title: "¿Cada cuánto debo ir al dentista?", content: "Recomendamos una revisión cada 6 meses." },
+        { id: "2", title: "¿El blanqueamiento es seguro?", content: "Sí, utilizamos productos aprobados por especialistas." },
+        { id: "3", title: "¿Aceptan urgencias?", content: "Sí, contamos con atención inmediata para emergencias." },
+      ]}
+      faqsAnimation="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
-      faqs={[
-        {
-          id: "1",
-          title: "¿Cada cuánto debo ir al dentista?",
-          content: "Se recomienda cada 6 meses para revisiones preventivas.",
-        },
-        {
-          id: "2",
-          title: "¿El blanqueamiento duele?",
-          content: "No, es un procedimiento seguro y cómodo bajo supervisión profesional.",
-        },
-        {
-          id: "3",
-          title: "¿Aceptan urgencias?",
-          content: "Sí, tenemos horarios especiales para atender tus emergencias.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/close-up-doctor-patient-clinic_23-2149103571.jpg"
-      mediaAnimation="slide-up"
-      title="Preguntas Frecuentes"
-      description="Resolvemos tus dudas principales sobre salud dental."
-      faqsAnimation="slide-up"
-      imageAlt="dental health questions consultation"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="Contacto"
+      <ContactSplitForm
       title="Agenda tu cita hoy"
-      description="Estamos listos para atenderte en nuestra clínica. Escríbenos por WhatsApp o déjanos un mensaje."
-      buttons={[
-        {
-          text: "WhatsApp",
-          href: "https://wa.me/123456789",
-        },
-        {
-          text: "Llamar ahora",
-          href: "tel:123456789",
-        },
+      description="Estamos listos para atenderte en nuestra clínica. Envíanos tus detalles y nos pondremos en contacto."
+      inputs={[
+        { name: "nombre", type: "text", placeholder: "Tu nombre completo (requerido)" },
+        { name: "email", type: "email", placeholder: "Tu correo electrónico (requerido)" }
       ]}
+      textarea={{ name: "mensaje", placeholder: "Cuéntanos cómo podemos ayudarte (opcional)" }}
+      imageSrc="http://img.b2bpic.net/free-photo/close-up-doctor-patient-clinic_23-2149103571.jpg"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
+      <FooterBaseReveal
       logoText="Sonrisa Perfecta"
       columns={[
-        {
-          title: "Navegación",
-          items: [
-            {
-              label: "Inicio",
-              href: "#hero",
-            },
-            {
-              label: "Servicios",
-              href: "#services",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacidad",
-              href: "#",
-            },
-            {
-              label: "Términos",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Navegación", items: [{ label: "Inicio", href: "#hero" }, { label: "Servicios", href: "#services" }] },
+        { title: "Legal", items: [{ label: "Política de Privacidad y Protección de Datos", href: "#" }, { label: "Términos y Condiciones", href: "#" }] },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5faff;
-  --card: #f1f8ff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
+  --background: #fbfbfb;
+  --card: #f2f2f2;
+  --foreground: #1a1a1a;
+  --primary-cta: #1c3c5c;
   --primary-cta-text: #f5faff;
   --secondary-cta: #ffffff;
   --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --accent: #b8c9d9;
+  --background-accent: #e0e7ed;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);