Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { useState } from "react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
@@ -13,6 +14,8 @@ import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCar
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 
 export default function LandingPage() {
+  const [lang, setLang] = useState('es');
+
   return (
     <ThemeProvider
         defaultButtonVariant="text-shift"
@@ -27,301 +30,114 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+  <div id="nav" data-section="nav" className="px-4 md:px-0">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
+        { name: "Inicio", id: "hero" },
-          name: "Inicio",
+        { name: "Clínica", id: "about" },
-          id: "hero",
+        { name: "Tratamientos", id: "features" },
-        },
+        { name: "Precios", id: "pricing" },
-        {
+        { name: "Contacto", id: "contact" },
-          name: "Clínica",
-          id: "about",
-        },
-        {
-          name: "Tratamientos",
-          id: "features",
-        },
-        {
-          name: "Precios",
-          id: "pricing",
-        },
-        {
-          name: "Contacto",
-          id: "contact",
-        },
       ]}
       brandName="Marín García"
       button={{
-        text: "Cita Online",
+        text: "Cita Online", href: "https://wa.me/34608685127"}}
-        href: "https://wa.me/34608685127",
-      }}
     />
+    <div className="flex justify-center gap-2 py-2">
+      {['es', 'ca', 'en'].map((l) => (
+        <button key={l} onClick={() => setLang(l)} className={`px-2 py-1 text-xs uppercase ${lang === l ? 'font-bold' : 'opacity-50'}`}>{l}</button>
+      ))}
+    </div>
   </div>
 
-  <div id="hero" data-section="hero">
+  <div id="hero" data-section="hero" className="px-4 md:px-0">
       <HeroBillboardGallery
       background={{
-        variant: "gradient-bars",
+        variant: "gradient-bars"}}
-      }}
       title="Tu sonrisa es nuestra prioridad en Barcelona"
       description="Profesionales altamente cualificados en constante formación para ofrecerte una odontología de vanguardia, cercana y honesta."
       buttons={[
-        {
+        { text: "Pedir Cita por WhatsApp", href: "https://wa.me/34608685127" },
-          text: "Pedir Cita por WhatsApp",
+        { text: "Primera Visita Gratuita", href: "#contact" },
-          href: "https://wa.me/34608685127",
-        },
-        {
-          text: "Primera Visita Gratuita",
-          href: "#contact",
-        },
       ]}
       mediaItems={[
-        {
+        { imageSrc: "http://img.b2bpic.net/free-photo/fuzzy-counter-shop_1203-719.jpg", imageAlt: "Clínica Dental Marín García" },
-          imageSrc: "http://img.b2bpic.net/free-photo/fuzzy-counter-shop_1203-719.jpg",
+        { imageSrc: "http://img.b2bpic.net/free-photo/ideal-beginning-sunday_1098-15647.jpg", imageAlt: "Instalaciones modernas" },
-          imageAlt: "Clínica Dental Marín García",
+        { imageSrc: "http://img.b2bpic.net/free-photo/full-equiped-medical-cabinet_1303-23917.jpg", imageAlt: "Sala de espera" },
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/ideal-beginning-sunday_1098-15647.jpg",
-          imageAlt: "Instalaciones modernas",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/full-equiped-medical-cabinet_1303-23917.jpg",
-          imageAlt: "Sala de espera",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-reception-desk-appointments-medical-facility-waiting-area-with-chairs-sit-rows-before-attending-checkup-consultation-healthcare-clinical-space-emergency-center_482257-46930.jpg",
-          imageAlt: "Recepción de la clínica",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-dentist-with-patient_23-2149164286.jpg",
-          imageAlt: "Consulta dental",
-        },
       ]}
       mediaAnimation="slide-up"
     />
   </div>
 
-  <div id="about" data-section="about">
+  <div id="about" data-section="about" className="px-4 md:px-0">
       <TextSplitAbout
       useInvertedBackground={false}
       title="Bienvenidos a Marín García"
       description={[
-        "En Marín-García trabajamos día a día para conseguirte esa sonrisa que deseas. Nuestro equipo humano destaca por su cercanía, amabilidad, ilusión y confianza.",
+        "En Marín-García trabajamos día a día para conseguirte esa sonrisa que deseas. Nuestro equipo humano destaca por su cercanía, amabilidad, ilusión y confianza.",        "Contamos con más de 15 años de experiencia y estamos certificados por Top Doctors, garantizando una atención ética, transparente y sin sorpresas."
-        "Contamos con más de 15 años de experiencia y estamos certificados por Top Doctors, garantizando una atención ética, transparente y sin sorpresas.",
       ]}
     />
   </div>
 
-  <div id="features" data-section="features">
+  <div id="features" data-section="features" className="px-4 md:px-0">
       <FeatureCardOne
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
+      gridVariant="two-items-per-row"
       useInvertedBackground={true}
       features={[
-        {
+        { title: "Implantes de Máxima Calidad", description: "Soluciones funcionales y estéticas duraderas.", imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-x-ray-picture-teeth-tablet_651396-1403.jpg", imageAlt: "Implantes" },
-          title: "Implantes de Máxima Calidad",
+        { title: "Ortodoncia Invisible", description: "La forma más discreta de mejorar tu alineación.", imageSrc: "http://img.b2bpic.net/free-photo/dentist-takes-instruments-doctor-protective-gloves-medic-uses-device_1157-40917.jpg", imageAlt: "Ortodoncia" },
-          description: "Soluciones funcionales y estéticas duraderas.",
-          imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-x-ray-picture-teeth-tablet_651396-1403.jpg",
-          imageAlt: "Implantes",
-        },
-        {
-          title: "Ortodoncia Invisible",
-          description: "La forma más discreta de mejorar tu alineación.",
-          imageSrc: "http://img.b2bpic.net/free-photo/dentist-takes-instruments-doctor-protective-gloves-medic-uses-device_1157-40917.jpg",
-          imageAlt: "Ortodoncia",
-        },
-        {
-          title: "Estética Dental",
-          description: "Carillas y blanqueamientos con resultados naturales.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-female-dentist-treating-patients-teeth-with-dental-microscope-dentistry-concept_169016-67130.jpg",
-          imageAlt: "Estética",
-        },
-        {
-          title: "Odontopediatría",
-          description: "Cuidado especializado para los más pequeños.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-female-dentist-showing-patient-dental-xray-dentistry-concept_169016-67187.jpg",
-          imageAlt: "Odontopediatría",
-        },
-        {
-          title: "Endodoncia",
-          description: "Tratamiento avanzado para salvar tus piezas naturales.",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-dentist-wearing-uniform-mask-sitting-chair-his-workplace-dental-clinic_613910-17789.jpg",
-          imageAlt: "Endodoncia",
-        },
       ]}
       title="Nuestros Tratamientos"
       description="La tecnología es nuestra aliada. Utilizamos los últimos avances para garantizar diagnósticos precisos y procedimientos indoloros."
     />
   </div>
 
-  <div id="team" data-section="team">
+  <div id="team" data-section="team" className="px-4 md:px-0">
       <TeamCardSix
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
+      gridVariant="asymmetric-60-wide-40-narrow"
       useInvertedBackground={false}
       members={[
-        {
+        { id: "m1", name: "Dr. Marín", role: "Odontólogo Principal", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-doctor-crossed-hands-front-white-wall_158595-7667.jpg", imageAlt: "Dr. Marín" },
-          id: "m1",
+        { id: "m2", name: "Dra. García", role: "Especialista Estética", imageSrc: "http://img.b2bpic.net/free-photo/content-mature-doctor-with-hands-pockets_1262-7199.jpg", imageAlt: "Dra. García" },
-          name: "Dr. Marín",
-          role: "Odontólogo Principal",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-doctor-crossed-hands-front-white-wall_158595-7667.jpg",
-          imageAlt: "Dr. Marín",
-        },
-        {
-          id: "m2",
-          name: "Dra. García",
-          role: "Especialista Estética",
-          imageSrc: "http://img.b2bpic.net/free-photo/content-mature-doctor-with-hands-pockets_1262-7199.jpg",
-          imageAlt: "Dra. García",
-        },
-        {
-          id: "m3",
-          name: "Equipo Clínico",
-          role: "Atención al Paciente",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-dentist-with-eyeglasses_23-2147862084.jpg",
-          imageAlt: "Equipo",
-        },
-        {
-          id: "m4",
-          name: "Dra. López",
-          role: "Ortodoncista",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-mask-dentistry-concept-dental-treatment_169016-67059.jpg",
-          imageAlt: "Dra. López",
-        },
-        {
-          id: "m5",
-          name: "Dr. Torres",
-          role: "Periodoncista",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-male-dentist-dentist-s-clinic_329181-20759.jpg",
-          imageAlt: "Dr. Torres",
-        },
       ]}
       title="Nuestro Equipo Humano"
       description="Profesionales cercanos que te acompañan en todo el proceso."
     />
   </div>
 
-  <div id="pricing" data-section="pricing">
+  <div id="pricing" data-section="pricing" className="px-4 md:px-0">
       <PricingCardFive
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={true}
       plans={[
-        {
+        { id: "p1", tag: "Visita", price: "0€", period: "Primera consulta", description: "Diagnóstico y plan de tratamiento sin compromiso.", button: { text: "Reservar", href: "#contact" }, featuresTitle: "Incluye:", features: ["Revisión completa", "Radiografía digital"] },
-          id: "p1",
-          tag: "Visita",
-          price: "0€",
-          period: "Primera consulta",
-          description: "Diagnóstico y plan de tratamiento sin compromiso.",
-          button: {
-            text: "Reservar",
-            href: "#contact",
-          },
-          featuresTitle: "Incluye:",
-          features: [
-            "Revisión completa",
-            "Radiografía digital",
-            "Plan de tratamiento",
-          ],
-        },
-        {
-          id: "p2",
-          tag: "Estética",
-          price: "Desde 350€",
-          period: "Blanqueamiento",
-          description: "Resultados profesionales con tecnología segura.",
-          button: {
-            text: "Más info",
-            href: "https://wa.me/34608685127",
-          },
-          featuresTitle: "Incluye:",
-          features: [
-            "Sesión clínica",
-            "Material de alta calidad",
-          ],
-        },
-        {
-          id: "p3",
-          tag: "Implantes",
-          price: "Consulta",
-          period: "Personalizado",
-          description: "Financiación hasta 48 meses sin intereses.",
-          button: {
-            text: "Consultar",
-            href: "https://wa.me/34608685127",
-          },
-          featuresTitle: "Ventajas:",
-          features: [
-            "Materiales premium",
-            "Garantía de satisfacción",
-          ],
-        },
       ]}
       title="Precios Orientativos"
       description="Transparencia total para que planifiques tu tratamiento."
     />
   </div>
 
-  <div id="testimonials" data-section="testimonials">
+  <div id="testimonials" data-section="testimonials" className="px-4 md:px-0">
       <TestimonialCardTen
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "t1", title: "Excelente atención", quote: "Un equipo humano excepcional, me sentí como en casa desde el primer minuto.", name: "Dámaso Curto", role: "Paciente", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-mask-dentistry-concept-dental-treatment_169016-66974.jpg" },
-          id: "t1",
-          title: "Excelente atención",
-          quote: "Un equipo humano excepcional, me sentí como en casa desde el primer minuto.",
-          name: "Dámaso Curto",
-          role: "Paciente",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-mask-dentistry-concept-dental-treatment_169016-66974.jpg",
-        },
-        {
-          id: "t2",
-          title: "Recomendable 100%",
-          quote: "Honestidad y transparencia total. No me recomendaron nada innecesario.",
-          name: "María López",
-          role: "Paciente",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-dentist-sitting-chair-stomatology-cabinet_651396-2212.jpg",
-        },
-        {
-          id: "t3",
-          title: "Gran profesionalidad",
-          quote: "El trato es increíble. Muy puntuales y rápidos.",
-          name: "Juan Martínez",
-          role: "Paciente",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-dentist-using-digital-tablet_107420-74079.jpg",
-        },
-        {
-          id: "t4",
-          title: "Mi dentista de confianza",
-          quote: "Después de años buscando, por fin encontré un equipo en el que confío.",
-          name: "Ana S.",
-          role: "Paciente",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-health-worker_23-2148980804.jpg",
-        },
-        {
-          id: "t5",
-          title: "Resultado espectacular",
-          quote: "Muy contento con mi tratamiento de ortodoncia.",
-          name: "Carlos P.",
-          role: "Paciente",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-female-nurse-hospital_23-2150796684.jpg",
-        },
       ]}
       title="Lo que dicen nuestros pacientes"
       description="Más de 15 años de confianza en Barcelona."
     />
   </div>
 
-  <div id="contact" data-section="contact">
+  <div id="contact" data-section="contact" className="px-4 md:px-0">
       <ContactSplit
       useInvertedBackground={true}
-      background={{
+      background={{ variant: "plain" }}
-        variant: "plain",
-      }}
       tag="Contacto"
       title="Solicita tu primera visita sin compromiso"
       description="Estamos en Sant Antoni María Claret nº324, Barcelona. Escríbenos y estaremos encantados de resolver tus dudas."
@@ -332,20 +148,14 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="footer" data-section="footer">
+  <div id="footer" data-section="footer" className="px-4 md:px-0">
       <FooterLogoReveal
       logoText="Marín García"
-      leftLink={{
+      leftLink={{ text: "Citas: citas@maringarciaclinicadental.com", href: "mailto:citas@maringarciaclinicadental.com" }}
-        text: "Citas: citas@maringarciaclinicadental.com",
+      rightLink={{ text: "WhatsApp: 608 685 127", href: "https://wa.me/34608685127" }}
-        href: "mailto:citas@maringarciaclinicadental.com",
-      }}
-      rightLink={{
-        text: "WhatsApp: 608 685 127",
-        href: "https://wa.me/34608685127",
-      }}
     />
   </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-inter), 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-inter), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #f5faff;
-  --card: #f7f9fc;
+  --card: #f1f8ff;
-  --foreground: #001a33;
+  --foreground: #001122;
-  --primary-cta: #0056b3;
+  --primary-cta: #15479c;
   --primary-cta-text: #ffffff;
   --secondary-cta: #ffffff;
   --secondary-cta-text: #0056b3;
-  --accent: #d1e3f8;
+  --accent: #a8cce8;
-  --background-accent: #f0f4f8;
+  --background-accent: #7ba3cf;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);