Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,17 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroLogo from '@/components/sections/hero/HeroLogo';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
 import SplitAbout from '@/components/sections/about/SplitAbout';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import { BookOpen, CheckCircle, Users } from "lucide-react";
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 
 export default function LandingPage() {
   return (
@@ -23,23 +22,18 @@ export default function LandingPage() {
         contentWidth="smallMedium"
         sizing="mediumLarge"
         background="circleGradient"
-        cardStyle="glass-depth"
-        primaryButtonStyle="double-inset"
-        secondaryButtonStyle="layered"
-        headingFontWeight="light"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="medium"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+      <NavbarStyleApple
       navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "Features",          id: "features"},
-        {
-          name: "Pricing",          id: "pricing"},
-        {
-          name: "Community",          id: "community"},
+        { name: "Home", id: "hero" },
+        { name: "Features", id: "features" },
+        { name: "Pricing", id: "pricing" },
       ]}
       brandName="Aizaan"
     />
@@ -50,10 +44,8 @@ export default function LandingPage() {
       logoText="Aizaan AI"
       description="Deepen your connection to faith through Spiritual Consistency. Aizaan transforms your daily worship into a seamless, meaningful practice anchored in peace and purpose."
       buttons={[
-        {
-          text: "Get Started",          href: "#contact"},
-        {
-          text: "Learn More",          href: "#features"},
+        { text: "Get Started", href: "#contact" },
+        { text: "Learn More", href: "#features" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/phone-16-pro-max_187299-46103.jpg?_wi=1"
     />
@@ -66,12 +58,9 @@ export default function LandingPage() {
       title="A New Era of Digital Worship"
       description="Aizaan combines ancient wisdom with modern technology. Our AI provides instant answers on Salah, fasting, and Zakat, ensuring you always feel guided."
       bulletPoints={[
-        {
-          title: "AI Scholar Assistant",          description: "Authentic, reliable guidance on halal/haram, Salah, and daily habits."},
-        {
-          title: "Smart Prayer System",          description: "Auto-location prayer times, Adhan, and missed prayer reminders."},
-        {
-          title: "Gamified Growth",          description: "Build spiritual consistency through streak tracking, XP rewards, and levels."},
+        { title: "AI Scholar Assistant", description: "Authentic, reliable guidance on halal/haram, Salah, and daily habits." },
+        { title: "Smart Prayer System", description: "Auto-location prayer times, Adhan, and missed prayer reminders." },
+        { title: "Gamified Growth", description: "Build spiritual consistency through streak tracking, XP rewards, levels, achievement badges, and AI-powered motivation that keeps you moving forward." },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/young-woman-preparing-her-bath-time_23-2149186333.jpg"
       mediaAnimation="slide-up"
@@ -84,15 +73,12 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
-          id: "f1",          title: "AI Chat Assistant",          subtitle: "24/7 Spiritual Guidance",          category: "AI",          value: "Reliable"},
-        {
-          id: "f2",          title: "Ramadan Mode",          subtitle: "Track Suhoor & Iftar",          category: "Seasonal",          value: "Integrated"},
-        {
-          id: "f3",          title: "Qur'an System",          subtitle: "Read & Listen Daily",          category: "Learning",          value: "Offline"},
+        { id: "f1", title: "Gamification Engine", subtitle: "Daily Quests & Streaks", category: "Engagement", value: "Active" },
+        { id: "f2", title: "Achievement Badges", subtitle: "Celebrate Progress", category: "Rewards", value: "Unlockable" },
+        { id: "f3", title: "AI Motivation", subtitle: "Personalized Encouragement", category: "Growth", value: "Adaptive" },
       ]}
-      title="Core App Features"
-      description="Built for consistency and personal growth."
+      title="Gamified Spiritual Journey"
+      description="Track your progress with daily challenges, streak recovery, and rewarding mini-goals."
     />
   </div>
 
@@ -102,122 +88,74 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       plans={[
-        {
-          id: "monthly",          title: "Monthly Access",          price: "₦2,500",          period: "/mo",          features: [
-            "Unlimited AI Chat",            "Voice AI Replies",            "Exclusive Badges",            "Custom Themes"],
-          button: {
-            text: "Choose Monthly",            href: "#"},
-          imageSrc: "http://img.b2bpic.net/free-photo/horizontal-phone-16-pro-max_187299-45891.jpg",          imageAlt: "Horizontal Phone 16 Pro Max"},
-        {
-          id: "yearly",          title: "Yearly Value",          price: "₦7,000",          period: "/yr",          features: [
-            "Everything Monthly",            "Deep Analytics",            "Priority Support",            "Early Access"],
-          button: {
-            text: "Choose Yearly",            href: "#"},
-          imageSrc: "http://img.b2bpic.net/free-photo/phone-16-pro-max_187299-46103.jpg?_wi=2",          imageAlt: "Horizontal Phone 16 Pro Max"},
+        { id: "monthly", title: "Monthly Access", price: "₦2,500", period: "/mo", features: ["Unlimited AI Chat", "Advanced Streaks", "XP Multipliers", "Custom Themes"], button: { text: "Choose Monthly", href: "#" }, imageSrc: "http://img.b2bpic.net/free-photo/horizontal-phone-16-pro-max_187299-45891.jpg" },
+        { id: "yearly", title: "Yearly Value", price: "₦7,000", period: "/yr", features: ["Everything Monthly", "Unlimited Streak Recovery", "Exclusive Badges", "Priority Support"], button: { text: "Choose Yearly", href: "#" }, imageSrc: "http://img.b2bpic.net/free-photo/phone-16-pro-max_187299-46103.jpg?_wi=2" },
       ]}
-      title="Premium Plans"
-      description="Unlock advanced tools to deepen your spiritual journey."
+      title="Premium Engagement"
+      description="Unlock advanced gamification features and priority support."
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardThree
+      <MetricCardTwo
       animationType="slide-up"
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
+      gridVariant="uniform-all-items-equal"
       metrics={[
-        {
-          id: "m1",          title: "Active Daily Users",          value: "10k+",          icon: Users,
-        },
-        {
-          id: "m2",          title: "Prayers Completed",          value: "1M+",          icon: CheckCircle,
-        },
-        {
-          id: "m3",          title: "Qur'an Verses Read",          value: "5M+",          icon: BookOpen,
-        },
+        { id: "m1", description: "Active Streaks", value: "50k+" },
+        { id: "m2", description: "Quests Completed", value: "250k+" },
+        { id: "m3", description: "Badges Earned", value: "1M+" },
       ]}
-      title="App Achievements"
-      description="Our community is growing in faith every single day."
+      title="Community Achievements"
+      description="Our community is celebrating spiritual milestones every day."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
-      useInvertedBackground={false}
-      testimonial="Aizaan has transformed how I track my daily prayers. The AI chat feature is incredibly insightful and trustworthy."
-      rating={5}
-      author="Abdulrahman A."
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-woman-posing-white-shirt_23-2149021854.jpg",          alt: "Sarah"},
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-young-brunette-woman_273609-37522.jpg",          alt: "John"},
-        {
-          src: "http://img.b2bpic.net/free-photo/people-collage-design_23-2148888275.jpg",          alt: "Aisha"},
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-young-man-blinks-eye-has-positive-expression-has-crisp-dark-hair-dressed-casually_273609-16607.jpg",          alt: "Bolu"},
-        {
-          src: "http://img.b2bpic.net/free-photo/smiley-man-with-suit-posing-black-white-medium-shot_23-2149411400.jpg",          alt: "Community Member"},
+      <TestimonialCardTwo
+      useInvertedBackground={true}
+      animationType="slide-up"
+      textboxLayout="default"
+      testimonials={[
+        { id: "t1", name: "Abdulrahman A.", role: "User", testimonial: "The streak system and daily challenges have completely changed my consistency. Getting badges for milestones makes it so rewarding!" }
       ]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="slide-up"
+      title="Community Voices"
+      description="Trusted by thousands worldwide."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
+      <FaqSplitMedia
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       faqs={[
-        {
-          id: "faq1",          title: "How does the payment work?",          content: "We use a secure Paystack integration for instant activation."},
-        {
-          id: "faq2",          title: "Is the AI guidance accurate?",          content: "Yes, our AI is carefully trained on authentic Hadith and Qur'an, with oversight for scholarly differences."},
-        {
-          id: "faq3",          title: "Can I use it offline?",          content: "Yes, our core Qur'an reader and prayer tools are offline-first."},
+        { id: "faq1", title: "How do I recover a missed streak?", content: "Premium members can use streak recovery tokens to restore their progress after a break." },
+        { id: "faq2", title: "Are there rewards for daily tasks?", content: "Yes! Completing quests earns you XP and digital badges displayed on your profile." },
+        { id: "faq3", title: "How does AI motivation work?", content: "Our AI analyzes your progress and sends personalized, timely encouragement to keep your momentum high." },
       ]}
-      title="Common Questions"
-      description="Got questions about the app? We're here to help."
+      title="Gamification Questions"
+      description="Learn more about how we keep you motivated."
       faqsAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient"}}
-      tag="Ready to Start?"
-      title="Begin Your Spiritual Growth Today"
-      description="Download Aizaan and join a growing community of believers focused on daily improvement."
-      buttons={[
-        {
-          text: "Download on Play Store",          href: "#"},
-      ]}
+      <ContactSplit
+      useInvertedBackground={true}
+      background={{ variant: "plain" }}
+      tag="Start Your Journey"
+      title="Unlock Your Growth Today"
+      description="Download Aizaan and start earning rewards for your spiritual journey."
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/golden-frame-green-backdrop_53876-102454.jpg"
+      <FooterBaseReveal
       logoText="Aizaan"
       columns={[
-        {
-          title: "Product",          items: [
-            {
-              label: "Features",              href: "#features"},
-            {
-              label: "Pricing",              href: "#pricing"},
-          ],
-        },
-        {
-          title: "Support",          items: [
-            {
-              label: "Help Center",              href: "#"},
-            {
-              label: "Contact Us",              href: "#"},
-          ],
-        },
+        { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
+        { title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "Contact Us", href: "#contact" }] },
       ]}
     />
   </div>