From 4450d6c3827a845320929afb66e4b568c845f474 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 20:11:58 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 357 +++++++++++++++--------------------------------
 1 file changed, 110 insertions(+), 247 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index de22750..dfae19c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,284 +1,147 @@
 "use client";
+import { ThemeProvider } from "@/components/providers/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
+import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
+import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
+import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Quote, Sparkles, Mail } from "lucide-react";
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
-import MediaAbout from '@/components/sections/about/MediaAbout';
-import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import ContactFaq from '@/components/sections/contact/ContactFaq';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
-import { Star, Shield, Heart, Activity, Microscope, CheckCircle, Clock, Users, Award, Zap, Building2, Stethoscope, MessageCircle } from 'lucide-react';
-
-export default function LandingPage() {
+export default function Home() {
   return (
     <ThemeProvider
-      defaultButtonVariant="icon-arrow"
-      defaultTextAnimation="background-highlight"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="small"
-      sizing="mediumLarge"
-      background="blurBottom"
-      cardStyle="glass-elevated"
-      primaryButtonStyle="flat"
-      secondaryButtonStyle="solid"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
       headingFontWeight="semibold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Inicio", id: "hero" },
-            { name: "Sobre Nosotros", id: "about" },
-            { name: "Servicios", id: "services" },
-            { name: "Contacto", id: "contact" },
-            { name: "Preguntas Frecuentes", id: "faq" }
-          ]}
-          brandName="Diagnomed"
-          bottomLeftText="Las Heras 16, Ramos Mejía"
-          bottomRightText="📲 11 4914-9441"
-        />
-      </div>
+      <NavbarStyleCentered
+        navItems={[
+          { name: "Inicio", id: "home" },
+          { name: "Servicios", id: "servicios" },
+          { name: "Equipo", id: "equipo" },
+          { name: "Contacto", id: "contacto" },
+        ]}
+        button={{ text: "Agendar Cita", href: "contacto" }}
+        brandName="Diagnomed"
+      />
 
-      <div id="hero" data-section="hero">
-        <HeroBillboardDashboard
-          title="Centro Médico y Diagnóstico por Imágenes en Ramos Mejía"
-          description="Más de 20 años de trayectoria brindando atención médica con trato humano y turnos ágiles. Especialistas en cardiología, traumatología, ecografías y más."
-          tag="⭐ ATENCIÓN IOMA 100%"
-          tagIcon={Star}
-          tagAnimation="slide-up"
+      <div id="home" data-section="home">
+        <HeroBillboardCarousel
+          title="Centro Médico Diagnomed"
+          description="Más de 20 años brindando servicios de diagnóstico por imágenes y atención médica especializada en Ramos Mejía"
+          tag="Centro Médico"
+          background={{ variant: "plain" }}
+          mediaItems={[
+            {
+              imageSrc: "/images/clinic-interior-1.jpg",              imageAlt: "Interior de la clínica Diagnomed"},
+            {
+              imageSrc: "/images/clinic-interior-2.jpg",              imageAlt: "Área de espera de la clínica"},
+            {
+              imageSrc: "/images/medical-equipment-1.jpg",              imageAlt: "Equipo médico de diagnóstico"},
+            {
+              imageSrc: "/images/clinic-staff-1.jpg",              imageAlt: "Personal médico de Diagnomed"},
+            {
+              imageSrc: "/images/clinic-exterior.jpg",              imageAlt: "Fachada de la clínica Diagnomed"},
+          ]}
           buttons={[
-            { text: "📲 Pedir turno por WhatsApp", href: "https://wa.me/541149149441" },
-            { text: "📞 Llamar ahora", href: "tel:4654-2801" }
+            { text: "Agendar Cita", href: "contacto" },
+            { text: "Servicios", href: "servicios" },
           ]}
-          buttonAnimation="slide-up"
-          background={{ variant: "radial-gradient" }}
-          dashboard={{
-            title: "Cobertura Médica",            logoIcon: Shield,
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiqUXkDWYvQTAM7qN2rZTTXChS/uploaded-1773086860494-l4ns4b3o.jpg",            buttons: [
-              { text: "IOMA", href: "#" },
-              { text: "OSPIT", href: "#" }
-            ],
-            sidebarItems: [
-              { icon: Heart },
-              { icon: Activity },
-              { icon: Microscope }
-            ],
-            stats: [
-              {
-                title: "Años de Experiencia",                values: [20, 20, 20],
-                description: "Brindando atención confiable"
-              },
-              {
-                title: "Especialidades",                values: [10, 10, 10],
-                description: "Profesionales especializados"
-              },
-              {
-                title: "Turnos Ágiles",                values: [95, 98, 97],
-                description: "Disponibles en pocos días"
-              }
-            ],
-            chartTitle: "Pacientes Satisfechos",            chartData: [
-              { value: 95 },
-              { value: 98 },
-              { value: 97 },
-              { value: 99 },
-              { value: 96 }
-            ],
-            listTitle: "Coberturas",            listItems: [
-              { icon: CheckCircle, title: "IOMA", status: "Atención 100%" },
-              { icon: CheckCircle, title: "OSPIT", status: "Atención completa" },
-              { icon: CheckCircle, title: "PAMI", status: "Cobertura vigente" }
-            ],
-            searchPlaceholder: "Buscar especialidad"
-          }}
         />
       </div>
 
-      <div id="about" data-section="about">
-        <MediaAbout
-          title="Diagnomed S.A. - Centro Médico de Confianza"
-          description="Centro médico y diagnóstico por imágenes ubicado en Ramos Mejía, Zona Oeste. Con más de 20 años de experiencia, brindamos estudios médicos y consultas con profesionales especializados, con atención rápida y trato humano.\n\n📍 Las Heras 16, Ramos Mejía – Provincia de Buenos Aires\n🕘 Abre a las 9:00 AM"
-          tag="Sobre Nosotros"
-          tagIcon={Building2}
-          tagAnimation="slide-up"
-          buttons={[
-            { text: "📍 Cómo llegar", href: "#" }
-          ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiqUXkDWYvQTAM7qN2rZTTXChS/uploaded-1773086860494-atnqj66e.jpg"
-          imageAlt="Equipo profesional de Diagnomed"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="services" data-section="services">
-        <FeatureCardTwentyThree
-          title="Nuestros Servicios y Especialidades"
-          description="Especialidades médicas y estudios de diagnóstico con profesionales de experiencia y turnos ágiles"
-          tag="Servicios Médicos"
-          tagIcon={Stethoscope}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground={false}
+      <div id="servicios" data-section="servicios">
+        <FeatureCardOne
+          title="Nuestros Servicios"
+          description="Contamos con equipos de última tecnología y profesionales especializados"
+          tag="Servicios"
           features={[
             {
-              id: "1",              title: "Ecografías Especializadas",              tags: ["Ginecológica", "Mamaria", "Abdominal"],
-              imageSrc: "http://img.b2bpic.net/free-photo/indian-medic-consulting-her-patient-medical-facility-copy-space_482257-118298.jpg?_wi=1",              imageAlt: "Ecografías especializadas"
-            },
+              title: "Diagnóstico por Imágenes",              description:
+                "Resonancia magnética, tomografía computada, radiografía digital y ecografía con tecnología de punta",              imageSrc: "/images/diagnostic-imaging.jpg",              imageAlt: "Equipos de diagnóstico por imágenes"},
             {
-              id: "2",              title: "Servicios Cardiológicos",              tags: ["Doppler Cardíaco", "Holter", "MAPA"],
-              imageSrc: "http://img.b2bpic.net/free-photo/empty-medical-office-equipped-with-diagnostic-tools-blood-pressure-monitor_482257-117002.jpg",              imageAlt: "Servicios cardiológicos"
-            },
+              title: "Atención Médica General",              description:
+                "Consultas médicas generales con profesionales experimentados y atención ágil",              imageSrc: "/images/medical-consultation.jpg",              imageAlt: "Consulta médica"},
             {
-              id: "3",              title: "Diagnóstico por Imagen",              tags: ["Radiografías", "Tecnología Moderna", "Rápidos"],
-              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-doctor-giving-ct-scan-patient_23-2149341505.jpg",              imageAlt: "Diagnóstico por imagen"
-            },
+              title: "Especialidades Médicas",              description:
+                "Acceso a diversos especialistas para diagnóstico y tratamiento integral",              imageSrc: "/images/medical-specialties.jpg",              imageAlt: "Especialidades médicas"},
             {
-              id: "4",              title: "Especialidades Médicas",              tags: ["Clínica Médica", "Traumatología", "Pediatría"],
-              imageSrc: "http://img.b2bpic.net/free-photo/indian-medic-consulting-her-patient-medical-facility-copy-space_482257-118298.jpg?_wi=2",              imageAlt: "Especialidades médicas"
-            }
+              title: "Cobertura IOMA",              description:
+                "Atención con cobertura de IOMA y otras obras sociales del estado",              imageSrc: "/images/insurance-coverage.jpg",              imageAlt: "Cobertura de seguros médicos"},
           ]}
-        />
-      </div>
-
-      <div id="why-us" data-section="why-us">
-        <MetricCardOne
-          title="Por Qué Elegir Diagnomed"
-          description="Razones por las que somos la opción de confianza para tu salud"
-          tag="Diferenciales"
-          tagIcon={Award}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
-          useInvertedBackground={false}
-          metrics={[
-            {
-              id: "1",              value: "20",              title: "Años",              description: "De trayectoria comprobada",              icon: Clock
-            },
-            {
-              id: "2",              value: "10",              title: "Especialidades",              description: "Profesionales con experiencia",              icon: Users
-            },
-            {
-              id: "3",              value: "100",              title: "IOMA",              description: "Atención certificada",              icon: CheckCircle
-            },
-            {
-              id: "4",              value: "95",              title: "Turnos",              description: "Disponibles en pocos días",              icon: Zap
-            }
-          ]}
-        />
-      </div>
-
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardSixteen
-          title="Opiniones de Nuestros Pacientes"
-          description="Lo que dicen nuestros pacientes sobre la atención recibida"
-          tag="Testimonios"
-          tagIcon={Star}
-          tagAnimation="slide-up"
           textboxLayout="default"
           animationType="slide-up"
+          gridVariant="two-columns-alternating-heights"
           useInvertedBackground={false}
-          testimonials={[
-            {
-              id: "1",              name: "María González",              role: "Paciente",              company: "IOMA",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-work_23-2149622870.jpg"
-            },
-            {
-              id: "2",              name: "Carlos Rodríguez",              role: "Paciente",              company: "OSPIT",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-face-portrait-wearing-suit_53876-148135.jpg"
-            },
-            {
-              id: "3",              name: "Ana Martínez",              role: "Paciente",              company: "Particular",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businesswoman-office_329181-19228.jpg"
-            },
-            {
-              id: "4",              name: "Roberto López",              role: "Paciente",              company: "PAMI",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/happy-black-doctor-using-touchpad-nursing-home-looking-camera_637285-11401.jpg"
-            }
-          ]}
-          kpiItems={[
-            { value: "1000+", label: "Pacientes satisfechos" },
-            { value: "98%", label: "Tasa de satisfacción" },
-            { value: "20+", label: "Años de experiencia" }
-          ]}
         />
       </div>
 
-      <div id="faq" data-section="faq">
-        <ContactFaq
-          ctaTitle="Solicita Tu Turno Hoy"
-          ctaDescription="Conecta con nuestro equipo y reserva tu cita de forma rápida y segura"
-          ctaButton={{ text: "📲 Pedir Turno por WhatsApp", href: "https://wa.me/541149149441" }}
-          ctaIcon={MessageCircle}
+      <div id="equipo" data-section="equipo">
+        <TestimonialAboutCard
+          tag="Sobre Nosotros"
+          title="Más de 20 años de experiencia y confianza en Ramos Mejía"
+          description="Dr. Testimonio - Médico Radiólogo"
+          subdescription="Diagnomed Centro Médico"
+          icon={Quote}
+          imageSrc="/images/about-diagnomed.jpg"
+          imageAlt="Centro Médico Diagnomed"
+          mediaAnimation="blur-reveal"
           useInvertedBackground={false}
-          animationType="slide-up"
-          faqs={[
-            {
-              id: "1",              title: "¿Atienden con IOMA?",              content: "Sí, contamos con <strong>ATENCIÓN IOMA 100%</strong>. Somos un centro acreditado para brindar servicios a pacientes con cobertura IOMA."
-            },
-            {
-              id: "2",              title: "¿Atienden PAMI, OSPIT y otros?",              content: "Sí, atendemos <strong>PAMI</strong>, <strong>OSPIT</strong> y pacientes particulares. Contamos con múltiples coberturas para tu tranquilidad."
-            },
-            {
-              id: "3",              title: "¿Cómo pido turno?",              content: "Podés pedir turno de las siguientes formas:\n<ul style=\"margin-top: 8px; margin-left: 16px;\">\n<li>📞 Llamando al <strong>4654-2801</strong></li>\n<li>📲 Por WhatsApp al <strong>11 4914-9441</strong></li>\n<li>📝 Completando nuestro formulario de contacto</li>\n</ul>"
-            },
-            {
-              id: "4",              title: "¿Dónde están ubicados?",              content: "<strong>Las Heras 16</strong>\nRamos Mejía – Provincia de Buenos Aires\n\nEstamos ubicados en la Zona Oeste, de fácil acceso desde toda la región."
-            },
-            {
-              id: "5",              title: "¿La atención es con turno?",              content: "Sí, la atención es con <strong>turno previo</strong>. Esto nos permite garantizar que recibas la mejor calidad de atención personalizada."
-            }
-          ]}
         />
       </div>
 
-      <div id="cta-final" data-section="cta-final">
-        <MediaAbout
-          title="Tu Salud en Manos de Profesionales con Experiencia"
-          description="Solicitá tu turno hoy mismo y comienza tu camino hacia una mejor salud. En Diagnomed, tu bienestar es nuestra prioridad."
+      <div id="contacto" data-section="contacto">
+        <ContactCTA
+          tag="Agendar Cita"
+          tagIcon={Mail}
+          title="¿Necesitas Atención Médica?"
+          description="Contáctanos ahora para agendar tu cita. Estamos aquí para cuidar tu salud con la mejor tecnología y profesionales especializados."
           buttons={[
-            { text: "📲 Contactar por WhatsApp", href: "https://wa.me/541149149441" },
-            { text: "📞 Llamar Ahora", href: "tel:4654-2801" }
+            { text: "Agendar Cita", href: "tel:+541234567890" },
+            { text: "Contactar", href: "mailto:info@diagnomed.com" },
           ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiqUXkDWYvQTAM7qN2rZTTXChS/uploaded-1773086860494-g9bzxhtu.png"
-          imageAlt="Equipo médico profesional"
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
         />
       </div>
 
-      <div id="footer" data-section="footer">
-        <FooterMedia
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiqUXkDWYvQTAM7qN2rZTTXChS/uploaded-1773086860494-lo0pcmzn.png"
-          imageAlt="Mapa de ubicación Diagnomed"
-          logoText="Diagnomed S.A."
-          copyrightText="© 2025 Diagnomed S.A. | Todos los derechos reservados"
-          columns={[
-            {
-              title: "Centro Médico",              items: [
-                { label: "Contacto Rápido", href: "tel:4654-2801" },
-                { label: "WhatsApp", href: "https://wa.me/541149149441" },
-                { label: "Ubicación", href: "#about" }
-              ]
-            },
-            {
-              title: "Servicios",              items: [
-                { label: "Especialidades", href: "#services" },
-                { label: "Ecografías", href: "#services" },
-                { label: "Cardiología", href: "#services" }
-              ]
-            },
-            {
-              title: "Legal",              items: [
-                { label: "Política de Privacidad", href: "#" },
-                { label: "Términos de Servicio", href: "#" },
-                { label: "Preguntas Frecuentes", href: "#faq" }
-              ]
-            }
-          ]}
-        />
-      </div>
+      <FooterSimple
+        columns={[
+          {
+            title: "Información",            items: [
+              { label: "Inicio", href: "#home" },
+              { label: "Servicios", href: "#servicios" },
+              { label: "Equipo", href: "#equipo" },
+              { label: "Contacto", href: "#contacto" },
+            ],
+          },
+          {
+            title: "Legal",            items: [
+              { label: "Privacidad", href: "#" },
+              { label: "Términos", href: "#" },
+              { label: "IOMA", href: "#" },
+            ],
+          },
+          {
+            title: "Contacto",            items: [
+              { label: "Teléfono: (11) 1234-5678", href: "tel:+541234567890" },
+              { label: "Email: info@diagnomed.com", href: "mailto:info@diagnomed.com" },
+              { label: "Ramos Mejía, Buenos Aires", href: "#" },
+            ],
+          },
+        ]}
+        bottomLeftText="© 2025 Diagnomed. Todos los derechos reservados."
+        bottomRightText="Centro Médico en Ramos Mejía"
+      />
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1