Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -1,19 +1,29 @@
 "use client";
 
+import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import { Award, CheckCircle, Shield, Star, TrendingUp, Zap } 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,277 +31,137 @@ 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 
-        {
+                    key={opt}
-          name: "About",
+                    onClick={() => setBgVariant(opt)}
-          id: "#about",
+                    className={`w-10 h-10 rounded-full border-2 transition-all ${bgVariant === opt ? 'border-foreground scale-110' : 'border-transparent opacity-60'}`}
-        },
+                    style={{ background: opt === 'noiseDiagonalGradient' ? '#ccc' : opt === 'floatingGradient' ? 'linear-gradient(45deg, #6139e6, #b3a8e8)' : '#333' }}
-        {
+                    aria-label={`Set background to ${opt}`}
-          name: "Features",
+                >
-          id: "#features",
+                    <Palette className="mx-auto" size={16} />
-        },
+                </button>
-        {
+            ))}
-          name: "Pricing",
+        </div>
-          id: "#pricing",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
-      ]}
-      brandName="InnovatePro"
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="nav" data-section="nav">
-      <HeroBillboardScroll
+            <NavbarStyleApple
-      background={{
+              navItems={[
-        variant: "gradient-bars",
+                { name: "About", id: "#about" },
-      }}
+                { name: "Features", id: "#features" },
-      title="Empowering Your Digital Transformation"
+                { name: "Metrics", id: "#metrics" },
-      description="We deliver high-end software solutions designed to scale your business and streamline your operations with modern, intuitive design."
+                { name: "Contact", id: "#contact" },
-      buttons={[
+              ]}
-        {
+              brandName="InnovatePro"
-          text: "Get Started",
+            />
-          href: "#contact",
+        </div>
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797748.jpg?_wi=1"
-      imageAlt="Hero digital software interface"
-    />
-  </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?"
+              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."
-        {
+              buttons={[{ text: "Get Started / Empezar", href: "#contact" }]}
-          icon: CheckCircle,
+              imageSrc="http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797748.jpg?_wi=1"
-          label: "Projects Completed",
+              imageAlt="Hero digital software interface"
-          value: "200+",
+            />
-        },
+        </div>
-        {
-          icon: Shield,
-          label: "Security Compliance",
-          value: "100%",
-        },
-        {
-          icon: Zap,
-          label: "Avg. Speed Boost",
-          value: "45%",
-        },
-      ]}
-      metricsAnimation="blur-reveal"
-    />
-  </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={{
+                { icon: CheckCircle, label: "Projects / Proyectos", value: "200+" },
-        items: [
+                { icon: Shield, label: "Security / Seguridad", value: "100%" },
-          "Legacy overhead",
+                { icon: Zap, label: "Performance / Rendimiento", value: "45%" },
-          "Slow deployment cycles",
+              ]}
-          "Unsecured data silos",
+              metricsAnimation="blur-reveal"
-        ],
+            />
-      }}
+        </div>
-      positiveCard={{
-        items: [
-          "Seamless automation",
-          "Scalable cloud architecture",
-          "Enterprise-grade security",
-        ],
-      }}
-      title="Modern Solutions, Real Results"
-      description="Our robust feature set helps you focus on what matters most—growth and user satisfaction."
-    />
-  </div>
 
-  <div id="metrics" data-section="metrics">
+        <div id="features" data-section="features">
-      <MetricCardThree
+            <FeatureCardSixteen
-      animationType="depth-3d"
+              animationType="depth-3d"
-      textboxLayout="split"
+              textboxLayout="default"
-      useInvertedBackground={true}
+              useInvertedBackground={false}
-      metrics={[
+              negativeCard={{ items: ["Legacy overhead / Sistemas obsoletos", "Slow deployment / Despliegue lento", "Security risks / Riesgos de seguridad"] }}
-        {
+              positiveCard={{ items: ["Automation / Automatización", "Scalable Cloud / Nube escalable", "Enterprise Security / Seguridad empresarial"] }}
-          id: "m1",
+              title="Modern Solutions, Real Results / Soluciones Modernas, Resultados Reales"
-          icon: Star,
+              description="Helping you grow effectively. / Ayudándole a crecer de manera efectiva."
-          title: "Client Satisfaction",
+            />
-          value: "99%",
+        </div>
-        },
-        {
-          id: "m2",
-          icon: Award,
-          title: "Industry Awards",
-          value: "15",
-        },
-        {
-          id: "m3",
-          icon: TrendingUp,
-          title: "ROI Delivered",
-          value: "3.5x",
-        },
-      ]}
-      title="Proven Scalability"
-      description="Numbers speak for our performance and reliability across all sectors."
-    />
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="metrics" data-section="metrics">
-      <TestimonialCardOne
+            <MetricCardEleven
-      animationType="scale-rotate"
+              animationType="blur-reveal"
-      textboxLayout="split"
+              title="Proven Scalability / Escalabilidad Probada"
-      gridVariant="uniform-all-items-equal"
+              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}
-        {
+              metrics={[
-          id: "1",
+                { 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" },
-          name: "Sarah Miller",
+                { 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" }
-          role: "CTO",
+              ]}
-          company: "TechStream",
+            />
-          rating: 5,
+        </div>
-          imageSrc: "http://img.b2bpic.net/free-vector/cleaning-hand-drawn-icons-set-infographics-mobile-uxui-kit-print-design-include-brush-brushing-clean-scrub-plunger-restroom-toilet-tool-icon-set-vector_1057-11436.jpg",
-          imageAlt: "minimalist business tech icon set",
-        },
-        {
-          id: "2",
-          name: "James Chen",
-          role: "Product Lead",
-          company: "GlobalFlow",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797748.jpg?_wi=2",
-          imageAlt: "minimalist business tech icon set",
-        },
-        {
-          id: "3",
-          name: "Elena Rodriguez",
-          role: "CEO",
-          company: "InnovateHub",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/desk-arrangement-with-laptop_23-2148883522.jpg?_wi=1",
-          imageAlt: "minimalist business tech icon set",
-        },
-        {
-          id: "4",
-          name: "David Kim",
-          role: "Ops Manager",
-          company: "CloudNext",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-school-classroom-future-students_23-2150906124.jpg",
-          imageAlt: "minimalist business tech icon set",
-        },
-        {
-          id: "5",
-          name: "Lisa Wang",
-          role: "Director",
-          company: "StartupGen",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797672.jpg",
-          imageAlt: "minimalist business tech icon set",
-        },
-      ]}
-      title="Trusted by Industry Leaders"
-      description="Hear directly from the partners and clients who drive our progress."
-    />
-  </div>
 
-  <div id="faq" data-section="faq">
+        <div id="testimonials" data-section="testimonials">
-      <FaqSplitText
+            <TestimonialCardFive
-      useInvertedBackground={true}
+              title="Trusted by Industry Leaders / Líderes de la industria"
-      faqs={[
+              description="Our clients share their success stories. / Historias de éxito de nuestros clientes."
-        {
+              textboxLayout="split"
-          id: "f1",
+              useInvertedBackground={false}
-          title: "How long does implementation take?",
+              testimonials={[
-          content: "Usually 4-6 weeks depending on project scope.",
+                { 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: "f2",
+        </div>
-          title: "Do you provide support?",
-          content: "Yes, we offer 24/7 dedicated support for all our clients.",
-        },
-        {
-          id: "f3",
-          title: "Is the system scalable?",
-          content: "Absolutely, our architecture is built for infinite growth.",
-        },
-      ]}
-      sideTitle="Common Questions"
-      faqsAnimation="slide-up"
-    />
-  </div>
 
-  <div id="contact" data-section="contact">
+        <div id="faq" data-section="faq">
-      <ContactSplitForm
+            <FaqBase
-      useInvertedBackground={false}
+              title="Questions? / ¿Preguntas?"
-      title="Ready to Transform?"
+              description="Get the answers you need in English or Spanish. / Encuentre respuestas en inglés o español."
-      description="Get in touch with our team today and let's start your journey toward innovation."
+              faqsAnimation="blur-reveal"
-      inputs={[
+              textboxLayout="split"
-        {
+              useInvertedBackground={false}
-          name: "name",
+              faqs={[
-          type: "text",
+                { id: "f1", title: "How long? / ¿Cuánto tiempo?", content: "4-6 weeks / 4-6 semanas" },
-          placeholder: "Your Name",
+                { id: "f2", title: "Support? / ¿Soporte?", content: "24/7 global support / Soporte global 24/7" }
-          required: true,
+              ]}
-        },
+            />
-        {
+        </div>
-          name: "email",
-          type: "email",
-          placeholder: "Work Email",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "How can we help you?",
-        rows: 4,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/desk-arrangement-with-laptop_23-2148883522.jpg?_wi=2"
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="contact" data-section="contact">
-      <FooterLogoEmphasis
+            <ContactSplit
-      columns={[
+              tag="Contact"
-        {
+              title="Let's Innovate Together / Innovamos Juntos"
-          items: [
+              description="Reach out in your preferred language. / Contáctenos en su idioma preferido."
-            {
+              background={{ variant: "animated-grid" }}
-              label: "About",
+              useInvertedBackground={false}
-              href: "#about",
+              imageSrc="https://img.b2bpic.net/free-photo/close-up-businessman-shaking-hands_23-2149021288.jpg"
-            },
+            />
-            {
+        </div>
-              label: "Features",
+
-              href: "#features",
+        <div id="footer" data-section="footer">
-            },
+            <FooterCard
-          ],
+              logoText="InnovatePro"
-        },
+              copyrightText="© 2025 InnovatePro | Global Solutions"
-        {
+              socialLinks={[
-          items: [
+                  { icon: MessageSquare, href: "#", ariaLabel: "Social" },
-            {
+                  { icon: Phone, href: "#", ariaLabel: "Phone" }
-              label: "Privacy Policy",
+              ]}
-              href: "#",
+            />
-            },
+        </div>
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="InnovatePro"
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}