Merge version_2 into main

Merge version_2 into main

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 FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import { Globe, Shield, Zap } from "lucide-react";
+import ContactText from '@/components/sections/contact/ContactText';
+import FaqBase from '@/components/sections/faq/FaqBase';
+import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+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"
-        sizing="largeSmall"
+        contentWidth="medium"
+        sizing="medium"
         background="noise"
-        cardStyle="subtle-shadow"
-        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="radial-glow"
-        headingFontWeight="semibold"
+        cardStyle="outline"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="glass"
+        headingFontWeight="medium"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Stats",
-          id: "stats",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="NexAI"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Features", id: "features" },
+              { name: "Performance", id: "stats" },
+              { name: "FAQ", id: "faq" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="NexAI"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardScroll
-      background={{
-        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."
-      buttons={[
-        {
-          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="hero" data-section="hero">
+          <HeroBillboard
+            background={{ variant: "plain" }}
+            title="Intelligence, Elevated."
+            description="The next generation of conversational AI. Designed for enterprises that demand precision, privacy, and performance in every interaction."
+            buttons={[{ text: "Get Started", href: "#contact" }]}
+            className="bg-background"
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentyEight
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          id: "1",
-          title: "Instant Context",
-          subtitle: "Seamlessly remembers and applies conversation history to every request.",
-          category: "Performance",
-          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="features" data-section="features">
+          <FeatureCardSixteen
+            title="Designed for Performance"
+            description="Superior conversational capabilities with deep contextual understanding."
+            textboxLayout="default"
+            useInvertedBackground={true}
+            animationType="blur-reveal"
+            negativeCard={{ items: ["Latency spikes", "Manual data entry", "Fragmented context"] }}
+            positiveCard={{ items: ["Sub-15ms response", "Autonomous processing", "Context-aware logic"] }}
+          />
+        </div>
 
-  <div id="stats" data-section="stats">
-      <MetricCardThree
-      animationType="depth-3d"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          icon: Zap,
-          title: "Latency",
-          value: "12ms",
-        },
-        {
-          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="stats" data-section="stats">
+          <MetricCardEleven
+            title="Unmatched Efficiency"
+            description="Proven impact across global enterprise infrastructures."
+            textboxLayout="split"
+            animationType="blur-reveal"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "m1", title: "Latency", value: "12ms", description: "Average response time", imageSrc: "https://images.unsplash.com/photo-1677442136019-21780ecad995?q=80&w=800" },
+              { id: "m2", title: "Uptime", value: "99.9%", description: "High availability", imageSrc: "https://images.unsplash.com/photo-1639815188546-c56037a34651?q=80&w=800" }
+            ]}
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "f1",
-          title: "Is my data secure?",
-          content: "Absolutely. We employ bank-grade encryption.",
-        },
-        {
-          id: "f2",
-          title: "Can I integrate custom APIs?",
-          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="faq" data-section="faq">
+          <FaqBase
+            title="Questions & Answers"
+            description="Clear insights into our technology and deployment."
+            textboxLayout="default"
+            faqsAnimation="slide-up"
+            useInvertedBackground={false}
+            faqs={[
+              { 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." }
+            ]}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "rotated-rays-static",
-      }}
-      tag="Ready to scale?"
-      title="Schedule a Consultation"
-      description="Contact our sales team today to learn how we can integrate intelligent conversational models into your stack."
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactText
+            text="Ready to transform your enterprise intelligence? Contact our team for a private consultation."
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
+            buttons={[{ text: "Book Consultation" }]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Product",
-              href: "#",
-            },
-            {
-              label: "Security",
-              href: "#",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Documentation",
-              href: "#",
-            },
-            {
-              label: "Support",
-              href: "#",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="NexAI"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            logoText="NexAI"
+            imageSrc="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=1600"
+            columns={[
+              { title: "Product", items: [{ label: "Features", href: "#" }, { label: "Security", href: "#" }] },
+              { title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#contact" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

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