Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
@@ -11,9 +12,18 @@ import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll'
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import { Award, CheckCircle, Shield, Star, TrendingUp, Zap, MessageSquare, Phone } from "lucide-react";
+import { CheckCircle, Shield, Zap, MessageSquare, Phone, Palette } from "lucide-react";
 
 export default function LandingPage() {
+  const [bgVariant, setBgVariant] = useState<any>("noiseDiagonalGradient");
+
+  const backgroundOptions = [
+    "noiseDiagonalGradient", 
+    "floatingGradient", 
+    "grid", 
+    "aurora"
+  ];
+
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
@@ -21,122 +31,136 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="smallMedium"
         sizing="largeSmall"
-        background="noiseDiagonalGradient"
+        background={bgVariant}
         cardStyle="inset"
         primaryButtonStyle="diagonal-gradient"
         secondaryButtonStyle="layered"
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div className="fixed bottom-6 right-6 z-50 flex gap-2">
-      <NavbarStyleApple
+            {backgroundOptions.map((opt) => (
-      navItems={[
+                <button 
-        { name: "About", id: "#about" },
+                    key={opt}
-        { name: "Features", id: "#features" },
+                    onClick={() => setBgVariant(opt)}
-        { name: "Metrics", id: "#metrics" },
+                    className={`w-10 h-10 rounded-full border-2 transition-all ${bgVariant === opt ? 'border-foreground scale-110' : 'border-transparent opacity-60'}`}
-        { name: "Contact", id: "#contact" },
+                    style={{ background: opt === 'noiseDiagonalGradient' ? '#ccc' : opt === 'floatingGradient' ? 'linear-gradient(45deg, #6139e6, #b3a8e8)' : '#333' }}
-      ]}
+                    aria-label={`Set background to ${opt}`}
-      brandName="InnovatePro"
+                >
-    />
+                    <Palette className="mx-auto" size={16} />
-  </div>
+                </button>
+            ))}
+        </div>
 
-  <div id="hero" data-section="hero">
+        <div id="nav" data-section="nav">
-      <HeroBillboardScroll
+            <NavbarStyleApple
-      background={{ variant: "gradient-bars" }}
+              navItems={[
-      title="Empowering Your Digital Transformation / Transformación Digital"
+                { name: "About", id: "#about" },
-      description="We deliver high-end software solutions designed to scale your business and streamline your operations with modern, intuitive design. / Entregamos soluciones de software de alta gama diseñadas para escalar su negocio y optimizar sus operaciones."
+                { name: "Features", id: "#features" },
-      buttons={[{ text: "Get Started / Empezar", href: "#contact" }]}
+                { name: "Metrics", id: "#metrics" },
-      imageSrc="http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797748.jpg?_wi=1"
+                { name: "Contact", id: "#contact" },
-      imageAlt="Hero digital software interface"
+              ]}
-    />
+              brandName="InnovatePro"
-  </div>
+            />
+        </div>
 
-  <div id="about" data-section="about">
+        <div id="hero" data-section="hero">
-      <AboutMetric
+            <HeroBillboardScroll
-      useInvertedBackground={true}
+              background={{ variant: "gradient-bars" }}
-      title="Why Choose InnovatePro? / ¿Por qué elegir InnovatePro?"
+              title="Empowering Your Digital Transformation / Transformación Digital"
-      metrics={[
+              description="We deliver high-end software solutions designed to scale your business and streamline your operations with modern, intuitive design. / Entregamos soluciones de software de alta gama diseñadas para escalar su negocio y optimizar sus operaciones."
-        { icon: CheckCircle, label: "Projects / Proyectos", value: "200+" },
+              buttons={[{ text: "Get Started / Empezar", href: "#contact" }]}
-        { icon: Shield, label: "Security / Seguridad", value: "100%" },
+              imageSrc="http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797748.jpg?_wi=1"
-        { icon: Zap, label: "Performance / Rendimiento", value: "45%" },
+              imageAlt="Hero digital software interface"
-      ]}
+            />
-      metricsAnimation="blur-reveal"
+        </div>
-    />
-  </div>
 
-  <div id="features" data-section="features">
+        <div id="about" data-section="about">
-      <FeatureCardSixteen
+            <AboutMetric
-      animationType="depth-3d"
+              useInvertedBackground={true}
-      textboxLayout="default"
+              title="Why Choose InnovatePro? / ¿Por qué elegir InnovatePro?"
-      useInvertedBackground={false}
+              metrics={[
-      negativeCard={{ items: ["Legacy overhead / Sistemas obsoletos", "Slow deployment / Despliegue lento", "Security risks / Riesgos de seguridad"] }}
+                { icon: CheckCircle, label: "Projects / Proyectos", value: "200+" },
-      positiveCard={{ items: ["Automation / Automatización", "Scalable Cloud / Nube escalable", "Enterprise Security / Seguridad empresarial"] }}
+                { icon: Shield, label: "Security / Seguridad", value: "100%" },
-      title="Modern Solutions, Real Results / Soluciones Modernas, Resultados Reales"
+                { icon: Zap, label: "Performance / Rendimiento", value: "45%" },
-      description="Helping you grow effectively. / Ayudándole a crecer de manera efectiva."
+              ]}
-    />
+              metricsAnimation="blur-reveal"
-  </div>
+            />
+        </div>
 
-  <div id="metrics" data-section="metrics">
+        <div id="features" data-section="features">
-      <MetricCardEleven
+            <FeatureCardSixteen
-      animationType="blur-reveal"
+              animationType="depth-3d"
-      title="Proven Scalability / Escalabilidad Probada"
+              textboxLayout="default"
-      description="Numbers speak for our performance across all global markets. / Los números hablan de nuestro desempeño en todos los mercados globales."
+              useInvertedBackground={false}
-      textboxLayout="split"
+              negativeCard={{ items: ["Legacy overhead / Sistemas obsoletos", "Slow deployment / Despliegue lento", "Security risks / Riesgos de seguridad"] }}
-      useInvertedBackground={true}
+              positiveCard={{ items: ["Automation / Automatización", "Scalable Cloud / Nube escalable", "Enterprise Security / Seguridad empresarial"] }}
-      metrics={[
+              title="Modern Solutions, Real Results / Soluciones Modernas, Resultados Reales"
-        { id: "m1", title: "Satisfaction / Satisfacción", value: "99%", description: "High client retention. / Alta retención.", imageSrc: "https://img.b2bpic.net/free-photo/digital-marketing-concept_23-2149157297.jpg" },
+              description="Helping you grow effectively. / Ayudándole a crecer de manera efectiva."
-        { id: "m2", title: "Awards / Premios", value: "15", description: "Industry recognition. / Reconocimiento.", imageSrc: "https://img.b2bpic.net/free-photo/gold-trophy-dark-background_23-2149021235.jpg" }
+            />
-      ]}
+        </div>
-    />
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="metrics" data-section="metrics">
-      <TestimonialCardFive
+            <MetricCardEleven
-      title="Trusted by Industry Leaders / Líderes de la industria"
+              animationType="blur-reveal"
-      description="Our clients share their success stories. / Historias de éxito de nuestros clientes."
+              title="Proven Scalability / Escalabilidad Probada"
-      textboxLayout="split"
+              description="Numbers speak for our performance across all global markets. / Los números hablan de nuestro desempeño en todos los mercados globales."
-      useInvertedBackground={false}
+              textboxLayout="split"
-      testimonials={[
+              useInvertedBackground={true}
-        { id: "1", name: "Sarah Miller", date: "2024-05", title: "CTO", quote: "Exceptional delivery. / Entrega excepcional.", tag: "Enterprise", avatarSrc: "https://i.pravatar.cc/100?u=1", imageSrc: "https://img.b2bpic.net/free-photo/people-working-office_23-2149021255.jpg" }
+              metrics={[
-      ]}
+                { id: "m1", title: "Satisfaction / Satisfacción", value: "99%", description: "High client retention. / Alta retención.", imageSrc: "https://img.b2bpic.net/free-photo/digital-marketing-concept_23-2149157297.jpg" },
-    />
+                { id: "m2", title: "Awards / Premios", value: "15", description: "Industry recognition. / Reconocimiento.", imageSrc: "https://img.b2bpic.net/free-photo/gold-trophy-dark-background_23-2149021235.jpg" }
-  </div>
+              ]}
+            />
+        </div>
 
-  <div id="faq" data-section="faq">
+        <div id="testimonials" data-section="testimonials">
-      <FaqBase
+            <TestimonialCardFive
-      title="Questions? / ¿Preguntas?"
+              title="Trusted by Industry Leaders / Líderes de la industria"
-      description="Get the answers you need in English or Spanish. / Encuentre respuestas en inglés o español."
+              description="Our clients share their success stories. / Historias de éxito de nuestros clientes."
-      faqsAnimation="blur-reveal"
+              textboxLayout="split"
-      textboxLayout="split"
+              useInvertedBackground={false}
-      useInvertedBackground={false}
+              testimonials={[
-      faqs={[
+                { id: "1", name: "Sarah Miller", date: "2024-05", title: "CTO", quote: "Exceptional delivery. / Entrega excepcional.", tag: "Enterprise", avatarSrc: "https://i.pravatar.cc/100?u=1", imageSrc: "https://img.b2bpic.net/free-photo/people-working-office_23-2149021255.jpg" }
-        { id: "f1", title: "How long? / ¿Cuánto tiempo?", content: "4-6 weeks / 4-6 semanas" },
+              ]}
-        { id: "f2", title: "Support? / ¿Soporte?", content: "24/7 global support / Soporte global 24/7" }
+            />
-      ]}
+        </div>
-    />
-  </div>
 
-  <div id="contact" data-section="contact">
+        <div id="faq" data-section="faq">
-      <ContactSplit
+            <FaqBase
-      tag="Contact"
+              title="Questions? / ¿Preguntas?"
-      title="Let's Innovate Together / Innovamos Juntos"
+              description="Get the answers you need in English or Spanish. / Encuentre respuestas en inglés o español."
-      description="Reach out in your preferred language. / Contáctenos en su idioma preferido."
+              faqsAnimation="blur-reveal"
-      background={{ variant: "animated-grid" }}
+              textboxLayout="split"
-      useInvertedBackground={false}
+              useInvertedBackground={false}
-      imageSrc="https://img.b2bpic.net/free-photo/close-up-businessman-shaking-hands_23-2149021288.jpg"
+              faqs={[
-    />
+                { id: "f1", title: "How long? / ¿Cuánto tiempo?", content: "4-6 weeks / 4-6 semanas" },
-  </div>
+                { id: "f2", title: "Support? / ¿Soporte?", content: "24/7 global support / Soporte global 24/7" }
+              ]}
+            />
+        </div>
 
-  <div id="footer" data-section="footer">
+        <div id="contact" data-section="contact">
-      <FooterCard
+            <ContactSplit
-      logoText="InnovatePro"
+              tag="Contact"
-      copyrightText="© 2025 InnovatePro | Global Solutions"
+              title="Let's Innovate Together / Innovamos Juntos"
-      socialLinks={[
+              description="Reach out in your preferred language. / Contáctenos en su idioma preferido."
-          { icon: MessageSquare, href: "#", ariaLabel: "Social" },
+              background={{ variant: "animated-grid" }}
-          { icon: Phone, href: "#", ariaLabel: "Phone" }
+              useInvertedBackground={false}
-      ]}
+              imageSrc="https://img.b2bpic.net/free-photo/close-up-businessman-shaking-hands_23-2149021288.jpg"
-    />
+            />
-  </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterCard
+              logoText="InnovatePro"
+              copyrightText="© 2025 InnovatePro | Global Solutions"
+              socialLinks={[
+                  { icon: MessageSquare, href: "#", ariaLabel: "Social" },
+                  { icon: Phone, href: "#", ariaLabel: "Phone" }
+              ]}
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );