Update src/app/page.tsx

src/app/page.tsx

@@ -2,14 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactText from '@/components/sections/contact/ContactText';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
+import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import { Globe, Shield, Zap } from "lucide-react";
+import { Zap, Shield, Globe } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -17,201 +17,97 @@ export default function LandingPage() {
         defaultButtonVariant="elastic-effect"
         defaultTextAnimation="reveal-blur"
         borderRadius="soft"
-        contentWidth="smallMedium"
+        contentWidth="medium"
-        sizing="largeSmall"
+        sizing="medium"
         background="noise"
-        cardStyle="subtle-shadow"
+        cardStyle="outline"
-        primaryButtonStyle="primary-glow"
+        primaryButtonStyle="flat"
-        secondaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
-        headingFontWeight="semibold"
+        headingFontWeight="medium"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarStyleApple
+          <NavbarLayoutFloatingOverlay
-      navItems={[
+            navItems={[
-        {
+              { name: "Features", id: "features" },
-          name: "Features",
+              { name: "Performance", id: "stats" },
-          id: "features",
+              { name: "FAQ", id: "faq" },
-        },
+              { name: "Contact", id: "contact" },
-        {
+            ]}
-          name: "Stats",
+            brandName="NexAI"
-          id: "stats",
+          />
-        },
+        </div>
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="NexAI"
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroBillboardScroll
+          <HeroBillboard
-      background={{
+            background={{ variant: "plain" }}
-        variant: "gradient-bars",
+            title="Intelligence, Elevated."
-      }}
+            description="The next generation of conversational AI. Designed for enterprises that demand precision, privacy, and performance in every interaction."
-      title="Intelligence, Elevated."
+            buttons={[{ text: "Get Started", href: "#contact" }]}
-      description="The next generation of conversational AI. Designed for enterprises that demand precision, privacy, and performance in every interaction."
+            className="bg-background"
-      buttons={[
+          />
-        {
+        </div>
-          text: "Get Started",
-          href: "#contact",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/professional-young-woman-holding-mobile-phone_23-2148452658.jpg"
-      imageAlt="AI Chatbot Interface Concept"
-    />
-  </div>
 
-  <div id="features" data-section="features">
+        <div id="features" data-section="features">
-      <FeatureCardTwentyEight
+          <FeatureCardSixteen
-      animationType="slide-up"
+            title="Designed for Performance"
-      textboxLayout="default"
+            description="Superior conversational capabilities with deep contextual understanding."
-      useInvertedBackground={true}
+            textboxLayout="default"
-      features={[
+            useInvertedBackground={true}
-        {
+            animationType="blur-reveal"
-          id: "1",
+            negativeCard={{ items: ["Latency spikes", "Manual data entry", "Fragmented context"] }}
-          title: "Instant Context",
+            positiveCard={{ items: ["Sub-15ms response", "Autonomous processing", "Context-aware logic"] }}
-          subtitle: "Seamlessly remembers and applies conversation history to every request.",
+          />
-          category: "Performance",
+        </div>
-          value: "99.9%",
-        },
-        {
-          id: "2",
-          title: "Global Scale",
-          subtitle: "Deploy across any region with local latency optimizations built-in.",
-          category: "Operations",
-          value: "120+",
-        },
-        {
-          id: "3",
-          title: "Secure Logic",
-          subtitle: "Enterprise-grade encryption and data privacy protocols as standard.",
-          category: "Security",
-          value: "ISO",
-        },
-      ]}
-      title="Designed for Performance"
-      description="Experience superior conversational capabilities built with a deep understanding of natural language and context."
-    />
-  </div>
 
-  <div id="stats" data-section="stats">
+        <div id="stats" data-section="stats">
-      <MetricCardThree
+          <MetricCardEleven
-      animationType="depth-3d"
+            title="Unmatched Efficiency"
-      textboxLayout="default"
+            description="Proven impact across global enterprise infrastructures."
-      useInvertedBackground={false}
+            textboxLayout="split"
-      metrics={[
+            animationType="blur-reveal"
-        {
+            useInvertedBackground={false}
-          id: "m1",
+            metrics={[
-          icon: Zap,
+              { id: "m1", title: "Latency", value: "12ms", description: "Average response time", imageSrc: "https://images.unsplash.com/photo-1677442136019-21780ecad995?q=80&w=800" },
-          title: "Latency",
+              { id: "m2", title: "Uptime", value: "99.9%", description: "High availability", imageSrc: "https://images.unsplash.com/photo-1639815188546-c56037a34651?q=80&w=800" }
-          value: "12ms",
+            ]}
-        },
+          />
-        {
+        </div>
-          id: "m2",
-          icon: Shield,
-          title: "Uptime",
-          value: "99.9%",
-        },
-        {
-          id: "m3",
-          icon: Globe,
-          title: "Requests",
-          value: "10M+",
-        },
-      ]}
-      title="Unmatched Efficiency"
-      description="Proven performance across multiple industry sectors."
-    />
-  </div>
 
-  <div id="faq" data-section="faq">
+        <div id="faq" data-section="faq">
-      <FaqSplitMedia
+          <FaqBase
-      textboxLayout="split"
+            title="Questions & Answers"
-      useInvertedBackground={true}
+            description="Clear insights into our technology and deployment."
-      faqs={[
+            textboxLayout="default"
-        {
+            faqsAnimation="slide-up"
-          id: "f1",
+            useInvertedBackground={false}
-          title: "Is my data secure?",
+            faqs={[
-          content: "Absolutely. We employ bank-grade encryption.",
+              { id: "f1", title: "Is my data private?", content: "Yes, we use enterprise-grade encryption for all interactions." },
-        },
+              { id: "f2", title: "How is latency managed?", content: "Through edge-computing optimizations globally." }
-        {
+            ]}
-          id: "f2",
+          />
-          title: "Can I integrate custom APIs?",
+        </div>
-          content: "Yes, our robust API architecture supports deep custom integrations.",
-        },
-        {
-          id: "f3",
-          title: "Is support available?",
-          content: "Premium support is included with all enterprise plans.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/close-up-it-professional-using-tablet-building-ai-algorithms_482257-92639.jpg"
-      mediaAnimation="slide-up"
-      title="Frequently Asked Questions"
-      description="Get clear answers to your questions about implementation, pricing, and capabilities."
-      faqsAnimation="blur-reveal"
-    />
-  </div>
 
-  <div id="contact" data-section="contact">
+        <div id="contact" data-section="contact">
-      <ContactCenter
+          <ContactText
-      useInvertedBackground={false}
+            text="Ready to transform your enterprise intelligence? Contact our team for a private consultation."
-      background={{
+            background={{ variant: "plain" }}
-        variant: "rotated-rays-static",
+            useInvertedBackground={false}
-      }}
+            buttons={[{ text: "Book Consultation" }]}
-      tag="Ready to scale?"
+          />
-      title="Schedule a Consultation"
+        </div>
-      description="Contact our sales team today to learn how we can integrate intelligent conversational models into your stack."
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+          <FooterMedia
-      columns={[
+            logoText="NexAI"
-        {
+            imageSrc="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=1600"
-          items: [
+            columns={[
-            {
+              { title: "Product", items: [{ label: "Features", href: "#" }, { label: "Security", href: "#" }] },
-              label: "Product",
+              { title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#contact" }] }
-              href: "#",
+            ]}
-            },
+          />
-            {
+        </div>
-              label: "Security",
-              href: "#",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Documentation",
-              href: "#",
-            },
-            {
-              label: "Support",
-              href: "#",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="NexAI"
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
+  --background: #ffffff;
-  --card: #161616;
+  --card: #f0f0f0;
-  --foreground: #ffffff;
+  --foreground: #000000;
-  --primary-cta: #ffffff;
+  --primary-cta: #000000;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #161616;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #ffffff;
-  --accent: #333333;
+  --accent: #000000;
-  --background-accent: #1a1a1a;
+  --background-accent: #e0e0e0;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);