Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -1,235 +1,216 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import AboutMetric from '@/components/sections/about/AboutMetric';
-import FeatureBento from '@/components/sections/feature/FeatureBento';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import ContactText from '@/components/sections/contact/ContactText';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
-import { Activity, Building2, Dumbbell, Flame, Heart, Leaf, Star, Users, Zap } from 'lucide-react';
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
+import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
+import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Sparkles, Users, Zap, CheckCircle, Trophy, Target, Heart, Phone } from "lucide-react";
+
+const page = () => {
+  const navItems = [
+    { name: "Inicio", id: "/" },
+    { name: "Servicios", id: "#services" },
+    { name: "Membresías", id: "#pricing" },
+    { name: "Contacto", id: "#contact" },
+  ];
 
-export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="expand-hover"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="small"
-      sizing="mediumLargeSizeLargeTitles"
-      background="circleGradient"
-      cardStyle="soft-shadow"
-      primaryButtonStyle="primary-glow"
-      secondaryButtonStyle="solid"
+      contentWidth="mediumLarge"
+      sizing="large"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
       headingFontWeight="semibold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
-          brandName="Cañón de la Sierra"
-          navItems={[
-            { name: "Inicio", id: "hero" },
-            { name: "Sobre Nosotros", id: "about" },
-            { name: "Instalaciones", id: "installations" },
-            { name: "Actividades", id: "activities" },
-            { name: "Contacto", id: "contact" }
-          ]}
-          bottomLeftText="Monterrey, Nuevo León"
-          bottomRightText="81 8266 0824"
-        />
-      </div>
+      <nav className="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-md border-b border-accent/10">
+        <NavbarStyleApple navItems={navItems} brandName="Deportivo Cañón" />
+      </nav>
 
-      <div id="hero" data-section="hero">
-        <HeroBillboard
-          title="Deporte, Naturaleza y Convivencia en Monterrey"
-          description="Disfruta albercas, canchas deportivas y áreas recreativas en un entorno natural único. Vive la experiencia de un club familiar donde el deporte y la naturaleza se encuentran."
-          tag="Club Deportivo de Montaña"
-          tagIcon={Leaf}
-          background={{ variant: "sparkles-gradient" }}
-          buttons={[
-            { text: "📞 Llamar Ahora", href: "tel:+528182660824" },
-            { text: "💬 WhatsApp", href: "https://wa.me/528182660824" }
-          ]}
-          imageSrc="http://img.b2bpic.net/free-photo/sports-girl_1157-8974.jpg"
-          imageAlt="Deportivo Cañón de la Sierra - Instalaciones y naturaleza"
-          mediaAnimation="slide-up"
-          buttonAnimation="slide-up"
-        />
-      </div>
+      <main>
+        {/* Hero Section */}
+        <section id="hero" data-section="hero" className="pt-24">
+          <HeroSplitKpi
+            title="Bienvenido a Deportivo Cañón de la Sierra"
+            description="Tu destino premium para deportes, bienestar y vida familiar en Monterrey. Instalaciones de clase mundial con servicios integral"
+            background={{ variant: "glowing-orb" }}
+            kpis={[
+              { value: "25+", label: "Años de Experiencia" },
+              { value: "5000+", label: "Miembros Activos" },
+              { value: "40+", label: "Actividades Semanales" },
+            ]}
+            enableKpiAnimation={true}
+            tag="Club Premium en Monterrey"
+            tagIcon={Trophy}
+            imageSrc="/images/hero-facility.jpg"
+            imageAlt="Instalaciones del Club Deportivo"
+            mediaAnimation="slide-up"
+            buttons={[
+              { text: "Solicitar Membresía", href: "#contact" },
+              { text: "Conocer Más", href: "#services" },
+            ]}
+          />
+        </section>
 
-      <div id="about" data-section="about">
-        <AboutMetric
-          title="El Deportivo Cañón de la Sierra es un club deportivo ubicado al sur de Monterrey que promueve un estilo de vida activo y saludable mediante actividades deportivas, convivencia familiar y contacto con la naturaleza."
-          metrics={[
-            { icon: Star, label: "Excelente Calificación", value: "⭐⭐⭐⭐⭐" },
-            { icon: Users, label: "Ambiente Familiar", value: "👨‍👩‍👧‍👦" },
-            { icon: Leaf, label: "Contacto Natural", value: "🌳" },
-            { icon: Zap, label: "Actividades Deportivas", value: "⚡" }
-          ]}
-          metricsAnimation="slide-up"
-          useInvertedBackground={false}
-        />
-      </div>
+        {/* About Section */}
+        <section id="about" data-section="about" className="py-20">
+          <MetricSplitMediaAbout
+            tag="Sobre Nosotros"
+            tagIcon={Sparkles}
+            title="Una Comunidad Deportiva de Excelencia"
+            description="Desde 1999, Deportivo Cañón de la Sierra ha sido el hogar de familias monterreyanas que buscan el más alto nivel de calidad en deportes, bienestar y convivencia. Nuestras instalaciones cuentan con tecnología de punta y un equipo profesional dedicado a tu desarrollo."
+            metrics={[
+              { value: "25+", title: "Años sirviendo a Monterrey" },
+              { value: "8", title: "Instalaciones Deportivas" },
+            ]}
+            imageSrc="/images/about-community.jpg"
+            imageAlt="Comunidad del Club"
+            mediaAnimation="slide-up"
+            metricsAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </section>
 
-      <div id="installations" data-section="installations">
-        <FeatureBento
-          title="Nuestras Instalaciones de Clase Mundial"
-          description="Contamos con múltiples instalaciones diseñadas para toda la familia. Desde albercas y chapoteaderos hasta canchas deportivas profesionales en un entorno natural incomparable."
-          tag="Instalaciones"
-          tagIcon={Building2}
-          features={[
-            {
-              title: "Albercas y Chapoteaderos",              description: "Piscinas olímpicas y áreas de diversión acuática para familias",              bentoComponent: "globe"
-            },
-            {
-              title: "Canchas Deportivas",              description: "Fútbol, básquet, tenis y más en superficies profesionales",              bentoComponent: "animated-bar-chart"
-            },
-            {
-              title: "Palapas y Asadores",              description: "Espacios perfectos para convivencias familiares y eventos",              bentoComponent: "marquee",              centerIcon: Flame,
-              variant: "text",              texts: ["Asadores profesionales", "Palapas amplias", "Mesas de picnic", "Área de eventos"]
-            },
-            {
-              title: "Gimnasio y Fitness",              description: "Equipamiento moderno para tu entrenamiento personal",              bentoComponent: "icon-info-cards",              items: [
-                { icon: Dumbbell, label: "Pesas", value: "Completo" },
-                { icon: Heart, label: "Cardio", value: "Premium" },
-                { icon: Zap, label: "Entrenamientos", value: "Guiados" }
-              ]
-            }
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          carouselMode="buttons"
-        />
-      </div>
+        {/* Services Section */}
+        <section id="services" data-section="services" className="py-20">
+          <FeatureCardTwentyFive
+            title="Nuestros Servicios Premium"
+            description="Experimentar el mejor en deportes, bienestar y entretenimiento familiar"
+            features={[
+              {
+                title: "Albercas Olímpicas",                description: "Tres albercas con sistemas de purificación avanzada, calefacción y actividades acuáticas para todas las edades.",                icon: Zap,
+                mediaItems: [
+                  { imageSrc: "/images/pool-1.jpg", imageAlt: "Alberca Olímpica" },
+                  { imageSrc: "/images/pool-2.jpg", imageAlt: "Área de Nado" },
+                ],
+              },
+              {
+                title: "Canchas Deportivas",                description: "Canchas de tenis, basketball, futbol, paddle y squash con superficies internacionales y luz nocturna.",                icon: Target,
+                mediaItems: [
+                  { imageSrc: "/images/courts-1.jpg", imageAlt: "Canchas de Tenis" },
+                  { imageSrc: "/images/courts-2.jpg", imageAlt: "Cancha de Basketball" },
+                ],
+              },
+              {
+                title: "Gimnasio Moderno",                description: "Equipamiento completo de última generación, entrenamientos personalizados y clases grupales especializadas.",                icon: Heart,
+                mediaItems: [
+                  { imageSrc: "/images/gym-1.jpg", imageAlt: "Área de Pesas" },
+                  { imageSrc: "/images/gym-2.jpg", imageAlt: "Cardio" },
+                ],
+              },
+              {
+                title: "Programas Infantiles",                description: "Escuelas de deportes, natación y actividades recreativas diseñadas para el desarrollo integral de niños.",                icon: Users,
+                mediaItems: [
+                  { imageSrc: "/images/kids-1.jpg", imageAlt: "Clases Infantiles" },
+                  { imageSrc: "/images/kids-2.jpg", imageAlt: "Actividades Recreativas" },
+                ],
+              },
+            ]}
+            animationType="slide-up"
+            tag="Servicios"
+            tagIcon={CheckCircle}
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </section>
 
-      <div id="activities" data-section="activities">
-        <ProductCardOne
-          title="Actividades Deportivas"
-          description="El club ofrece diversas academias y actividades deportivas para fomentar la pasión por el deporte y el bienestar físico de todos nuestros miembros."
-          tag="Programas Disponibles"
-          tagIcon={Activity}
-          products={[
-            {
-              id: "1",              name: "Fútbol",              price: "Academia disponible",              imageSrc: "http://img.b2bpic.net/free-photo/football-trainer-teaching-children-side-view_23-2149742033.jpg",              imageAlt: "Academia de Fútbol"
-            },
-            {
-              id: "2",              name: "Tenis",              price: "Clases profesionales",              imageSrc: "http://img.b2bpic.net/free-photo/happy-young-couple-playing-tennis-park_1268-36175.jpg?_wi=1",              imageAlt: "Clases de Tenis"
-            },
-            {
-              id: "3",              name: "Natación",              price: "Para todas las edades",              imageSrc: "http://img.b2bpic.net/free-photo/fitness-group-girls-doing-aerobical-excercises-swimming-pool-aqua-park-sport-leisure-activities_627829-10863.jpg",              imageAlt: "Clases de Natación"
-            },
-            {
-              id: "4",              name: "Box",              price: "Entrenamiento intenso",              imageSrc: "http://img.b2bpic.net/free-photo/full-shot-fit-woman-man-gym_23-2149734689.jpg?_wi=1",              imageAlt: "Entrenamiento de Box"
-            },
-            {
-              id: "5",              name: "Karate",              price: "Artes marciales",              imageSrc: "http://img.b2bpic.net/free-photo/full-shot-fit-woman-man-gym_23-2149734689.jpg?_wi=2",              imageAlt: "Clases de Karate"
-            },
-            {
-              id: "6",              name: "Fitness",              price: "Programas personalizados",              imageSrc: "http://img.b2bpic.net/free-photo/full-shot-fit-woman-man-gym_23-2149734689.jpg?_wi=3",              imageAlt: "Clases de Fitness"
-            }
-          ]}
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
+        {/* Pricing Section */}
+        <section id="pricing" data-section="pricing" className="py-20">
+          <PricingCardNine
+            title="Planes de Membresía"
+            description="Elige el plan perfecto para ti y tu familia"
+            tag="Membresías"
+            tagIcon={Sparkles}
+            plans={[
+              {
+                id: "basic",                title: "Básico",                price: "$899",                period: "/mes",                imageSrc: "/images/plan-basic.jpg",                imageAlt: "Plan Básico",                button: { text: "Solicitar Membresía", href: "#contact" },
+                features: [
+                  "Acceso a albercas",                  "Uso de canchas (disponibilidad)",                  "Acceso a áreas comunes",                  "Descuentos en actividades"],
+              },
+              {
+                id: "premium",                title: "Premium",                price: "$1,499",                period: "/mes",                imageSrc: "/images/plan-premium.jpg",                imageAlt: "Plan Premium",                button: { text: "Solicitar Membresía", href: "#contact" },
+                features: [
+                  "Acceso completo a todas las instalaciones",                  "Entrenador personal (2 sesiones/mes)",                  "Clases grupales ilimitadas",                  "Estacionamiento prioritario",                  "Acceso a eventos especiales"],
+              },
+              {
+                id: "elite",                title: "Elite Familiar",                price: "$2,499",                period: "/mes",                imageSrc: "/images/plan-elite.jpg",                imageAlt: "Plan Elite",                button: { text: "Solicitar Membresía", href: "#contact" },
+                features: [
+                  "Acceso total para hasta 4 miembros",                  "Entrenador personal ilimitado",                  "Programas infantiles incluidos",                  "Spa y sauna acceso VIP",                  "Uso prioritario de canchas",                  "Eventos y torneos exclusivos"],
+              },
+            ]}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </section>
 
-      <div id="experience" data-section="experience">
-        <TestimonialCardSixteen
-          title="Experiencias que Transforman Vidas"
-          description="En el Deportivo Cañón de la Sierra vivimos momentos inolvidables de convivencia, deporte, naturaleza y comunidad que perduran en el corazón de nuestras familias."
-          tag="Testimonios"
-          tagIcon={Heart}
-          testimonials={[
-            {
-              id: "1",              name: "Familia García",              role: "Miembro Activo",              company: "5 años con nosotros",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/young-family-with-cute-little-daughter-resting-forest-sunset_1303-24073.jpg"
-            },
-            {
-              id: "2",              name: "Club de Tenis",              role: "Academia Profesional",              company: "Eventos regulares",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/happy-young-couple-playing-tennis-park_1268-36175.jpg?_wi=2"
-            },
-            {
-              id: "3",              name: "Comunidad Deportiva",              role: "Torneos Mensuales",              company: "Participación activa",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/nightlife-people-having-fun-bars-clubs_23-2149088603.jpg"
-            },
-            {
-              id: "4",              name: "Retiros Familiares",              role: "Convivencias",              company: "Fin de semana especiales",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-male-with-backpack-walking-narrow-pathway-middle-trees-plants_181624-2085.jpg?_wi=1"
-            }
-          ]}
-          kpiItems={[
-            { value: "20+", label: "Años de Tradición" },
-            { value: "1000+", label: "Familias Afiliadas" },
-            { value: "50+", label: "Eventos Anuales" }
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
+        {/* Testimonials Section */}
+        <section id="testimonials" data-section="testimonials" className="py-20">
+          <TestimonialCardSixteen
+            title="Lo que Nuestros Miembros Dicen"
+            description="Historias de transformación y bienestar en nuestra comunidad"
+            tag="Testimonios"
+            tagIcon={Heart}
+            testimonials={[
+              {
+                id: "1",                name: "Carlos Rodríguez",                role: "Empresario",                company: "Tech Solutions MTY",                rating: 5,
+                imageSrc: "/images/testimonial-1.jpg",                imageAlt: "Carlos Rodríguez"},
+              {
+                id: "2",                name: "María González",                role: "Profesora",                company: "Colegio Montessori",                rating: 5,
+                imageSrc: "/images/testimonial-2.jpg",                imageAlt: "María González"},
+              {
+                id: "3",                name: "Juan Martínez",                role: "Coach de Atletismo",                company: "Club de Corredores MTY",                rating: 5,
+                imageSrc: "/images/testimonial-3.jpg",                imageAlt: "Juan Martínez"},
+              {
+                id: "4",                name: "Ana López",                role: "Madre y Emprendedora",                company: "Mamás en Movimiento",                rating: 5,
+                imageSrc: "/images/testimonial-4.jpg",                imageAlt: "Ana López"},
+            ]}
+            kpiItems={[
+              { value: "98%", label: "Satisfacción de Miembros" },
+              { value: "5000+", label: "Familias Activas" },
+              { value: "15+", label: "Años de Excelencia" },
+            ]}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </section>
 
-      <div id="cta" data-section="cta">
-        <ContactText
-          text="¿Listo para unirte a nuestra comunidad deportiva? Contáctanos hoy y solicita tu membresía para disfrutar de todas nuestras instalaciones y actividades."
-          animationType="entrance-slide"
-          buttons={[
-            { text: "📞 Llamar Ahora", href: "tel:+528182660824" },
-            { text: "📝 Solicitar Información", href: "#contact" }
-          ]}
-          background={{ variant: "plain" }}
-          useInvertedBackground={false}
-        />
-      </div>
+        {/* Contact Section */}
+        <section id="contact" data-section="contact" className="py-20">
+          <ContactCenter
+            tag="Únete a Nosotros"
+            title="Comienza tu Transformación Hoy"
+            description="Solicita información sobre nuestras membresías y descubre por qué miles de familias monterreyanas confían en Deportivo Cañón."
+            tagIcon={Phone}
+            background={{ variant: "rotated-rays-animated-grid" }}
+            useInvertedBackground={false}
+            inputPlaceholder="Tu email"
+            buttonText="Solicitar Información"
+            termsText="Nos comprometemos a proteger tu privacidad. Recibirás información sobre nuestras membresías y promociones especiales."
+          />
+        </section>
+      </main>
 
-      <div id="contact" data-section="contact">
-        <ContactText
-          text="Carretera Nacional km 265, Los Cristales, Monterrey, Nuevo León | 📞 81 8266 0824 | 81 8317 8167 | 81 8317 8414 | 💬 WhatsApp disponible 24/7"
-          animationType="entrance-slide"
-          buttons={[
-            { text: "📍 Ver en Google Maps", href: "https://maps.google.com" },
-            { text: "💬 WhatsApp", href: "https://wa.me/528182660824" }
-          ]}
-          background={{ variant: "plain" }}
-          useInvertedBackground={false}
+      {/* Footer */}
+      <footer className="border-t border-accent/10 bg-card/30">
+        <FooterLogoReveal
+          logoText="Deportivo Cañón"
+          leftLink={{ text: "Política de Privacidad", href: "#" }}
+          rightLink={{ text: "Términos de Servicio", href: "#" }}
         />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterMedia
-          imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-male-with-backpack-walking-narrow-pathway-middle-trees-plants_181624-2085.jpg?_wi=2"
-          imageAlt="Naturaleza en Cañón de la Sierra"
-          logoText="Cañón de la Sierra"
-          copyrightText="© 2025 Deportivo Cañón de la Sierra A.C. | Todos los derechos reservados."
-          columns={[
-            {
-              title: "Contacto",              items: [
-                { label: "Llamar", href: "tel:+528182660824" },
-                { label: "WhatsApp", href: "https://wa.me/528182660824" },
-                { label: "Email", href: "mailto:info@canondelasierra.com" }
-              ]
-            },
-            {
-              title: "Navegación",              items: [
-                { label: "Inicio", href: "#hero" },
-                { label: "Instalaciones", href: "#installations" },
-                { label: "Actividades", href: "#activities" },
-                { label: "Contacto", href: "#contact" }
-              ]
-            },
-            {
-              title: "Ubicación",              items: [
-                { label: "Carretera Nacional km 265", href: "#" },
-                { label: "Los Cristales, Monterrey", href: "#" },
-                { label: "Nuevo León, México", href: "#" }
-              ]
-            }
-          ]}
-        />
-      </div>
+      </footer>
     </ThemeProvider>
   );
-}
+};
+
+export default page;

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-figtree), sans-serif;
+  font-family: var(--font-open-sans), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-figtree), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fafffb;
-  --card: #f7fffa;
-  --foreground: #001a0a;
-  --primary-cta: #0a7039;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #0d2b4d;
+  --primary-cta: #1e5a96;
   --primary-cta-text: #fafffb;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #a8d5f7;
   --secondary-cta-text: #001a0a;
-  --accent: #a8d9be;
-  --background-accent: #6bbf8e;
+  --accent: #4a9fd8;
+  --background-accent: #e8f3f9;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);