Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -3,16 +3,16 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureBento from '@/components/sections/feature/FeatureBento';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import { BarChart2, CheckCircle, FileText, Lightbulb, Network, Users, Zap, Search } from "lucide-react";
+import { BarChart2, CheckCircle, FileText, Lightbulb, Network, Users, Zap, Search, BookOpen } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -34,10 +34,11 @@ export default function LandingPage() {
       navItems={[
         { name: "Home", id: "#hero" },
         { name: "Features", id: "#features" },
+        { name: "Mock Tests", id: "#mock-test" },
         { name: "Pricing", id: "#pricing" },
         { name: "Contact", id: "#contact" },
       ]}
-      brandName="LearnAI"
+      brandName="zn class"
     />
   </div>
 
@@ -63,12 +64,17 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="mock-test" data-section="mock-test" className="py-16">
-     <div className="container mx-auto px-6 text-center">
-        <h2 className="text-3xl font-bold mb-6">Practice Mock Tests</h2>
-        <p className="mb-8 opacity-70">Evaluate your progress with our curated mock exam series.</p>
-        <button className="bg-primary-cta text-white px-8 py-3 rounded-full">Take a Practice Exam</button>
-     </div>
+  <div id="mock-test" data-section="mock-test">
+      <AboutMetric
+      useInvertedBackground={true}
+      title="Practice Mock Tests"
+      metrics={[
+        { icon: BookOpen, label: "Practice Exams", value: "500+" },
+        { icon: Zap, label: "Instant Feedback", value: "Always" },
+        { icon: CheckCircle, label: "Exam Readiness", value: "100%" }
+      ]}
+      metricsAnimation="slide-up"
+    />
   </div>
 
   <div id="metrics" data-section="metrics">
@@ -141,30 +147,33 @@ export default function LandingPage() {
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={true}
+      <FaqBase
+      title="Common Questions"
+      description="Find answers to frequently asked questions about our AI platform."
       faqs={[{ id: "f1", title: "How does the AI work?", content: "Neural networks parse your notes." }, { id: "f2", title: "Is my data private?", content: "Yes, encrypted." }]}
-      sideTitle="Common Questions"
-      faqsAnimation="blur-reveal"
+      faqsAnimation="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={true}
+      className="text-left"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{ variant: "sparkles-gradient" }}
+      <ContactCenter
       tag="Contact Us"
       title="Ready to Start Your Journey?"
       description="Get in touch to learn more about our AI capabilities."
-      imageSrc="http://img.b2bpic.net/free-photo/system-administrator-ai-server-farm_482257-75524.jpg"
-      mediaAnimation="slide-up"
+      useInvertedBackground={false}
+      background={{ variant: "plain" }}
+      className="text-left"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[{ items: [{ label: "Product", href: "#products" }, { label: "Pricing", href: "#pricing" }] }]}
-      logoText="LearnAI"
+      <FooterBase
+      columns={[{ title: "Company", items: [{ label: "Product", href: "#products" }, { label: "Pricing", href: "#pricing" }] }]}
+      logoText="zn class"
+      className="text-left"
     />
   </div>
       </ReactLenis>