Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import HeroTiltedCards from '@/components/sections/hero/HeroTiltedCards/HeroTiltedCards';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
@@ -30,250 +30,95 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Inicio",
-          id: "hero",
-        },
-        {
-          name: "Servicios",
-          id: "services",
-        },
-        {
-          name: "Nosotros",
-          id: "about",
-        },
-        {
-          name: "Contacto",
-          id: "contact",
-        },
+        { name: "Inicio", id: "hero" },
+        { name: "Servicios", id: "services" },
+        { name: "Nosotros", id: "about" },
+        { name: "Contacto", id: "contact" },
       ]}
       brandName="NUDO"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroOverlay
-      title="NUDO Salón de Belleza"
+      <HeroTiltedCards
+      title="✨ NUDO Salón de Belleza ✨"
       description="El arte de resaltar tu belleza natural en Puebla. Calidad y dedicación en cada detalle."
       tag="4.5 Estrellas | 295 Opiniones"
-      buttons={[
-        {
-          text: "Agendar Cita",
-          href: "tel:2221138865",
-        },
+      buttons={[{ text: "Agendar Cita", href: "tel:2221138865" }]}
+      mediaItems={[
+          { imageSrc: "http://img.b2bpic.net/free-photo/portrait-glad-pretty-woman-dark-sweater-standing-near-lamps_114579-8187.jpg", imageAlt: "NUDO 1" },
+          { imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-woman-black-sweater-standing-posing_114579-81878.jpg", imageAlt: "NUDO 2" },
+          { imageSrc: "http://img.b2bpic.net/free-photo/luxury-blond-female-white-dress-posing-studio_613910-10972.jpg", imageAlt: "NUDO 3" }
       ]}
-      imageSrc="http://img.b2bpic.net/free-vector/gatsby-patterned-frame_53876-91724.jpg"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-glad-pretty-woman-dark-sweater-standing-near-lamps_114579-81875.jpg",
-          alt: "Cliente satisfecha",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-smiling-woman-black-sweater-standing-posing_114579-81878.jpg",
-          alt: "Cliente satisfecha",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/cute-blond-woman-cozy-wear-home_624325-3014.jpg",
-          alt: "Cliente satisfecha",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/luxury-blond-female-white-dress-posing-studio_613910-10972.jpg",
-          alt: "Cliente satisfecha",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg",
-          alt: "Cliente satisfecha",
-        },
-      ]}
-      avatarText="Más de 5,000 clientes felices"
     />
   </div>
 
   <div id="stats" data-section="stats">
       <MetricCardOne
       animationType="slide-up"
-      textboxLayout="default"
       gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",
-          value: "4.5",
-          title: "Calificación Google",
-          description: "Basado en 295 opiniones",
-          icon: Star,
-        },
-        {
-          id: "m2",
-          value: "10+",
-          title: "Años de Experiencia",
-          description: "Expertos en estética integral",
-          icon: Award,
-        },
-        {
-          id: "m3",
-          value: "5k+",
-          title: "Clientes Satisfechos",
-          description: "Tu confianza es nuestra prioridad",
-          icon: Heart,
-        },
+        { id: "m1", value: "4.5", title: "Calificación Google", description: "Basado en 295 opiniones", icon: Star },
+        { id: "m2", value: "10+", title: "Años de Experiencia", description: "Expertos en estética integral", icon: Award },
+        { id: "m3", value: "5k+", title: "Clientes Satisfechos", description: "Tu confianza es nuestra prioridad", icon: Heart },
       ]}
       title="Nuestra Trayectoria"
       description="Calidad respaldada por nuestros clientes."
+      textboxLayout="default"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="services" data-section="services">
       <PricingCardEight
       animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
       plans={[
-        {
-          id: "p1",
-          badge: "Corte",
-          price: "$350",
-          subtitle: "Corte de Dama",
-          features: [
-            "Lavado incluído",
-            "Diseño de corte",
-            "Secado técnico",
-          ],
-          buttons: [
-            {
-              text: "Reservar",
-              href: "tel:2221138865",
-            },
-          ],
-        },
-        {
-          id: "p2",
-          badge: "Corte",
-          price: "$200",
-          subtitle: "Corte de Caballero",
-          features: [
-            "Corte con tijera o máquina",
-            "Perfilado",
-            "Estilizado",
-          ],
-          buttons: [
-            {
-              text: "Reservar",
-              href: "tel:2221138865",
-            },
-          ],
-        },
-        {
-          id: "p3",
-          badge: "Color",
-          price: "Desde $900",
-          subtitle: "Color y Mechas",
-          features: [
-            "Diagnóstico capilar",
-            "Aplicación profesional",
-            "Tratamiento hidratante",
-          ],
-          buttons: [
-            {
-              text: "Reservar",
-              href: "tel:2221138865",
-            },
-          ],
-        },
-        {
-          id: "p4",
-          badge: "Especial",
-          price: "$500",
-          subtitle: "Estética Integral",
-          features: [
-            "Peinados especiales",
-            "Maquillaje profesional",
-            "Tratamientos capilares",
-          ],
-          buttons: [
-            {
-              text: "Reservar",
-              href: "tel:2221138865",
-            },
-          ],
-        },
+        { id: "p1", badge: "Corte", price: "$350", subtitle: "Corte de Dama", features: ["Lavado incluído", "Diseño de corte", "Secado técnico"], buttons: [{ text: "Reservar", href: "tel:2221138865" }] },
+        { id: "p2", badge: "Corte", price: "$200", subtitle: "Corte de Caballero", features: ["Corte con tijera o máquina", "Perfilado", "Estilizado"], buttons: [{ text: "Reservar", href: "tel:2221138865" }] },
+        { id: "p3", badge: "Color", price: "Desde $900", subtitle: "Color y Mechas", features: ["Diagnóstico capilar", "Aplicación profesional", "Tratamiento hidratante"], buttons: [{ text: "Reservar", href: "tel:2221138865" }] },
+        { id: "p4", badge: "Especial", price: "$500", subtitle: "Estética Integral", features: ["Peinados especiales", "Maquillaje profesional", "Tratamientos capilares"], buttons: [{ text: "Reservar", href: "tel:2221138865" }] },
       ]}
       title="Nuestros Servicios"
       description="Belleza personalizada para tu estilo de vida."
+      textboxLayout="default"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="about" data-section="about">
       <MediaAbout
-      useInvertedBackground={false}
       title="Sobre NUDO Salón"
       description="Ubicados en el corazón de la Col. Mirador en Puebla, NUDO nació con la misión de brindar un espacio donde la calidez humana y la profesionalidad convergen. Creemos en resaltar la esencia única de cada cliente."
       imageSrc="http://img.b2bpic.net/free-photo/dreamy-interior-mall_23-2151591430.jpg"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardTwelve
-      useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",
-          name: "Lucero Tamayo",
-          imageSrc: "http://img.b2bpic.net/free-photo/male-make-up-look-holding-brush_23-2148784359.jpg",
-        },
-        {
-          id: "t2",
-          name: "Cliente Satisfecho",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-face-massage-mirror-with-gua-sha_23-2149349077.jpg",
-        },
-        {
-          id: "t3",
-          name: "Cliente Regular",
-          imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-woman-portrait_23-2148148150.jpg",
-        },
-        {
-          id: "t4",
-          name: "Invitado Especial",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-drinking-coffee_23-2148020563.jpg",
-        },
-        {
-          id: "t5",
-          name: "Reseña Google",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg",
-        },
+        { id: "t1", name: "Lucero Tamayo", imageSrc: "http://img.b2bpic.net/free-photo/male-make-up-look-holding-brush_23-2148784359.jpg" },
+        { id: "t2", name: "Cliente Satisfecho", imageSrc: "http://img.b2bpic.net/free-photo/woman-face-massage-mirror-with-gua-sha_23-2149349077.jpg" },
+        { id: "t3", name: "Cliente Regular", imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-woman-portrait_23-2148148150.jpg" }
       ]}
       cardTitle="Lo que dicen nuestros clientes"
       cardTag="Reseñas Reales"
       cardAnimation="slide-up"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactSplitForm
-      useInvertedBackground={false}
       title="Reserva tu cita"
       description="Calle 39 Ote 1612, Col. Mirador, Puebla. Llámanos al 222 113 8865."
       inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Nombre",
-          required: true,
-        },
-        {
-          name: "phone",
-          type: "tel",
-          placeholder: "Teléfono",
-          required: true,
-        },
+        { name: "name", type: "text", placeholder: "Nombre", required: true },
+        { name: "phone", type: "tel", placeholder: "Teléfono", required: true },
       ]}
-      textarea={{
-        name: "message",
-        placeholder: "Servicio de interés",
-        rows: 3,
-        required: true,
-      }}
+      textarea={{ name: "message", placeholder: "Servicio de interés", rows: 3, required: true }}
       imageSrc="http://img.b2bpic.net/free-photo/top-view-bath-concept-accessories_23-2148419440.jpg"
+      useInvertedBackground={false}
     />
   </div>
 
@@ -282,41 +127,13 @@ export default function LandingPage() {
       imageSrc="http://img.b2bpic.net/free-photo/minimal-amazing-interior-design_23-2150534518.jpg"
       logoText="NUDO"
       columns={[
-        {
-          title: "Ubicación",
-          items: [
-            {
-              label: "Calle 39 Ote 1612, Col. Mirador, Puebla",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Contacto",
-          items: [
-            {
-              label: "222 113 8865",
-              href: "tel:2221138865",
-            },
-          ],
-        },
-        {
-          title: "Enlaces",
-          items: [
-            {
-              label: "Facebook",
-              href: "#",
-            },
-            {
-              label: "Instagram",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Ubicación", items: [{ label: "Calle 39 Ote 1612, Col. Mirador, Puebla", href: "#" }] },
+        { title: "Contacto", items: [{ label: "222 113 8865", href: "tel:2221138865" }] },
+        { title: "Enlaces", items: [{ label: "Facebook", href: "#" }, { label: "Instagram", href: "#" }] },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}