Update src/app/page.tsx

Merge version_2 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 ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+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 MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+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 TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import { BookOpen, CheckCircle, Users } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -23,31 +22,18 @@ export default function LandingPage() {
         contentWidth="smallMedium"
         sizing="mediumLarge"
         background="circleGradient"
-        cardStyle="glass-depth"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="double-inset"
+        primaryButtonStyle="flat"
-        secondaryButtonStyle="layered"
+        secondaryButtonStyle="solid"
-        headingFontWeight="light"
+        headingFontWeight="medium"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+      <NavbarStyleApple
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "Features", id: "features" },
-          id: "hero",
+        { name: "Pricing", id: "pricing" },
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
-        {
-          name: "Community",
-          id: "community",
-        },
       ]}
       brandName="Aizaan"
     />
@@ -56,16 +42,10 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroLogo
       logoText="Aizaan AI"
-      description="Your intelligent Islamic companion. Elevate your daily worship with AI-driven guidance, prayer tracking, and deep spiritual insights."
+      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: "Get Started",
+        { text: "Learn More", href: "#features" },
-          href: "#contact",
-        },
-        {
-          text: "Learn More",
-          href: "#features",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/phone-16-pro-max_187299-46103.jpg?_wi=1"
     />
@@ -78,18 +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: "AI Scholar Assistant",
+        { title: "Smart Prayer System", description: "Auto-location prayer times, Adhan, and missed prayer reminders." },
-          description: "Authentic, reliable guidance on halal/haram, Salah, and daily habits.",
+        { title: "Gamified Growth", description: "Build spiritual consistency through streak tracking, XP rewards, and levels." },
-        },
-        {
-          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.",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/young-woman-preparing-her-bath-time_23-2149186333.jpg"
       mediaAnimation="slide-up"
@@ -102,27 +73,9 @@ 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: "f1",
+        { id: "f2", title: "Ramadan Mode", subtitle: "Track Suhoor & Iftar", category: "Seasonal", value: "Integrated" },
-          title: "AI Chat Assistant",
+        { id: "f3", title: "Qur'an System", subtitle: "Read & Listen Daily", category: "Learning", value: "Offline" },
-          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",
-        },
       ]}
       title="Core App Features"
       description="Built for consistency and personal growth."
@@ -135,42 +88,8 @@ 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" },
-          id: "monthly",
+        { 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" },
-          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",
-        },
       ]}
       title="Premium Plans"
       description="Unlock advanced tools to deepen your spiritual journey."
@@ -178,29 +97,15 @@ export default function LandingPage() {
   </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", description: "Active Daily Users", value: "10k+" },
-          id: "m1",
+        { id: "m2", description: "Prayers Completed", value: "1M+" },
-          title: "Active Daily Users",
+        { id: "m3", description: "Qur'an Verses Read", value: "5M+" },
-          value: "10k+",
-          icon: Users,
-        },
-        {
-          id: "m2",
-          title: "Prayers Completed",
-          value: "1M+",
-          icon: CheckCircle,
-        },
-        {
-          id: "m3",
-          title: "Qur'an Verses Read",
-          value: "5M+",
-          icon: BookOpen,
-        },
       ]}
       title="App Achievements"
       description="Our community is growing in faith every single day."
@@ -208,58 +113,26 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
+      <TestimonialCardTwo
-      useInvertedBackground={false}
+      useInvertedBackground={true}
-      testimonial="Aizaan has transformed how I track my daily prayers. The AI chat feature is incredibly insightful and trustworthy."
+      animationType="slide-up"
-      rating={5}
+      textboxLayout="default"
-      author="Abdulrahman A."
+      testimonials={[
-      avatars={[
+        { id: "t1", name: "Abdulrahman A.", role: "User", testimonial: "Aizaan has transformed how I track my daily prayers. The AI chat feature is incredibly insightful and trustworthy." }
-        {
-          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",
-        },
       ]}
-      ratingAnimation="slide-up"
+      title="Community Voices"
-      avatarsAnimation="slide-up"
+      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: "faq1",
+        { 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." },
-          title: "How does the payment work?",
+        { id: "faq3", title: "Can I use it offline?", content: "Yes, our core Qur'an reader and prayer tools are offline-first." },
-          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.",
-        },
       ]}
       title="Common Questions"
       description="Got questions about the app? We're here to help."
@@ -268,58 +141,25 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
+      <ContactSplit
-      useInvertedBackground={false}
+      useInvertedBackground={true}
-      background={{
+      background={{ variant: "plain" }}
-        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: "#",
-        },
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterMedia
+      <FooterBaseReveal
-      imageSrc="http://img.b2bpic.net/free-photo/golden-frame-green-backdrop_53876-102454.jpg"
       logoText="Aizaan"
       columns={[
-        {
+        { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
-          title: "Product",
+        { title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "Contact Us", href: "#contact" }] },
-          items: [
-            {
-              label: "Features",
-              href: "#features",
-            },
-            {
-              label: "Pricing",
-              href: "#pricing",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Help Center",
-              href: "#",
-            },
-            {
-              label: "Contact Us",
-              href: "#",
-            },
-          ],
-        },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}