Merge version_2 into main

Merge version_2 into main

src/app/about/page.tsx

@@ -4,10 +4,10 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
-import FooterBase from '@/components/sections/footer/FooterBase';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Car, Clock, CreditCard, Map, MapPin, MessageCircle, Receipt, Settings, Star, UserCheck, Wallet } from "lucide-react";
 
 export default function LandingPage() {
@@ -29,45 +29,33 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "/"},
-          id: "home",
-
-        },
         {
-          name: "Book a Ride",
+          name: "Book a Ride",          id: "/#hero"},
-          id: "book-ride",
-
-        },
         {
-          name: "How it Works",
+          name: "How it Works",          id: "/#how-it-works"},
-          id: "how-it-works",
-
-        },
         {
-          name: "About Us",
+          name: "About Us",          id: "/about"},
-          id: "about-us",
-
-        },
         {
-          name: "Contact",
+          name: "Features",          id: "/#features"},
-          id: "contact",
-
-        },
         {
-          name: "User Login",
+          name: "Products",          id: "/#products"},
-          id: "user-login",
-
-        },
         {
-          name: "Driver Login",
+          name: "Metrics",          id: "/#metrics-overview"},
-          id: "driver-login",
-
-        },
         {
-          name: "Admin Login",
+          name: "Pricing",          id: "/#pricing"},
-          id: "admin-login",
+        {
-
+          name: "Testimonials",          id: "/#testimonials"},
-        },
+        {
+          name: "FAQ",          id: "/#faq"},
+        {
+          name: "Contact",          id: "/#contact"},
+        {
+          name: "User Login",          id: "/user-login"},
+        {
+          name: "Driver Login",          id: "/driver-login"},
+        {
+          name: "Admin Login",          id: "/admin-login"},
       ]}
       brandName="BookMyRide"
     />
@@ -81,27 +69,17 @@ export default function LandingPage() {
       description="At BookMyRide, we believe in a future where transportation is seamless, sustainable, and accessible to everyone. We're driven by innovation and a commitment to our community, constantly striving to enhance your travel experience."
       buttons={[
         {
-          text: "Learn More",
+          text: "Learn More",          href: "/how-it-works"},
-          href: "/how-it-works",
-        },
       ]}
       bulletPoints={[
         {
-          title: "Reliability You Can Trust",
+          title: "Reliability You Can Trust",          description: "Always on time, every time. Our network of drivers ensures you reach your destination without a hitch."},
-          description: "Always on time, every time. Our network of drivers ensures you reach your destination without a hitch.",
-        },
         {
-          title: "Safety First, Always",
+          title: "Safety First, Always",          description: "Your well-being is our top priority. Advanced safety features and rigorous driver vetting are standard."},
-          description: "Your well-being is our top priority. Advanced safety features and rigorous driver vetting are standard.",
-        },
         {
-          title: "Affordable & Transparent Pricing",
+          title: "Affordable & Transparent Pricing",          description: "Enjoy clear, upfront fares with no hidden surprises. Quality service shouldn't break the bank."},
-          description: "Enjoy clear, upfront fares with no hidden surprises. Quality service shouldn't break the bank.",
-        },
         {
-          title: "Eco-Conscious Choices",
+          title: "Eco-Conscious Choices",          description: "Committed to a greener planet, we offer eco-friendly ride options for sustainable travel."},
-          description: "Committed to a greener planet, we offer eco-friendly ride options for sustainable travel.",
-        },
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-futuristic-ride-sharing-app-interface--1774242857229-5c166130.png?_wi=2"
       imageAlt="A futuristic ride-sharing app interface on a smartphone"
@@ -116,19 +94,13 @@ export default function LandingPage() {
       metrics={[
         {
           icon: Car,
-          label: "Rides Completed",
+          label: "Rides Completed",          value: "500K+"},
-          value: "500K+",
-        },
         {
           icon: Star,
-          label: "Average Rating",
+          label: "Average Rating",          value: "4.9"},
-          value: "4.9",
-        },
         {
           icon: MapPin,
-          label: "Cities Served",
+          label: "Cities Served",          value: "100+"},
-          value: "100+",
-        },
       ]}
       metricsAnimation="slide-up"
     />
@@ -141,74 +113,50 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         {
-          id: "1",
+          id: "1",          title: "Instant Booking & Tracking",          description: "Request a ride in seconds and watch your driver arrive in real-time.",          media: {
-          title: "Instant Booking & Tracking",
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/an-illustration-of-a-hand-holding-a-smar-1774242855926-911a9587.png?_wi=3",            imageAlt: "Hand holding smartphone with ride request screen"},
-          description: "Request a ride in seconds and watch your driver arrive in real-time.",
-          media: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/an-illustration-of-a-hand-holding-a-smar-1774242855926-911a9587.png?_wi=3",
-            imageAlt: "Hand holding smartphone with ride request screen",
-          },
           items: [
             {
               icon: Map,
-              text: "Real-time map updates",
+              text: "Real-time map updates"},
-            },
             {
               icon: Clock,
-              text: "Estimated arrival times",
+              text: "Estimated arrival times"},
-            },
             {
               icon: MessageCircle,
-              text: "Driver contact in-app",
+              text: "Driver contact in-app"},
-            },
           ],
           reverse: false,
         },
         {
-          id: "2",
+          id: "2",          title: "Secure & Flexible Payments",          description: "Pay how you want, securely and effortlessly.",          media: {
-          title: "Secure & Flexible Payments",
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/an-illustration-of-a-secure-mobile-payme-1774242855753-d94bf0a6.png?_wi=3",            imageAlt: "Smartphone showing secure mobile payment interface"},
-          description: "Pay how you want, securely and effortlessly.",
-          media: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/an-illustration-of-a-secure-mobile-payme-1774242855753-d94bf0a6.png?_wi=3",
-            imageAlt: "Smartphone showing secure mobile payment interface",
-          },
           items: [
             {
               icon: Wallet,
-              text: "Multiple payment options",
+              text: "Multiple payment options"},
-            },
             {
               icon: CreditCard,
-              text: "In-app cashless transactions",
+              text: "In-app cashless transactions"},
-            },
             {
               icon: Receipt,
-              text: "Fare transparency",
+              text: "Fare transparency"},
-            },
           ],
           reverse: true,
         },
         {
-          id: "3",
+          id: "3",          title: "Comfort & Professionalism",          description: "Enjoy a comfortable ride with vetted, professional drivers.",          media: {
-          title: "Comfort & Professionalism",
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/an-illustration-of-a-comfortable-interio-1774242855299-fa38a449.png?_wi=3",            imageAlt: "Comfortable interior of a modern car"},
-          description: "Enjoy a comfortable ride with vetted, professional drivers.",
-          media: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/an-illustration-of-a-comfortable-interio-1774242855299-fa38a449.png?_wi=3",
-            imageAlt: "Comfortable interior of a modern car",
-          },
           items: [
             {
               icon: Car,
-              text: "Clean, comfortable vehicles",
+              text: "Clean, comfortable vehicles"},
-            },
             {
               icon: UserCheck,
-              text: "Highly-rated drivers",
+              text: "Highly-rated drivers"},
-            },
             {
               icon: Settings,
-              text: "Personalized journey preferences",
+              text: "Personalized journey preferences"},
-            },
           ],
           reverse: false,
         },
@@ -225,41 +173,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
+          id: "1",          name: "Sarah Chen",          handle: "@sarah_travels",          testimonial: "BookMyRide has completely changed my daily commute. Always reliable, always on time, and the drivers are so friendly!",          rating: 5,
-          name: "Sarah Chen",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/professional-headshot-of-a-smiling-young-1774242857187-53c82054.png",          imageAlt: "Professional headshot of Sarah Chen"},
-          handle: "@sarah_travels",
-          testimonial: "BookMyRide has completely changed my daily commute. Always reliable, always on time, and the drivers are so friendly!",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/professional-headshot-of-a-smiling-young-1774242857187-53c82054.png",
-          imageAlt: "Professional headshot of Sarah Chen",
-        },
         {
-          id: "2",
+          id: "2",          name: "Mark Johnson",          handle: "@tech_mark",          testimonial: "As a business traveler, punctuality is key. BookMyRide never disappoints and the premium options are fantastic.",          rating: 5,
-          name: "Mark Johnson",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/professional-headshot-of-a-confident-man-1774242854791-73eb0078.png",          imageAlt: "Professional headshot of Mark Johnson"},
-          handle: "@tech_mark",
-          testimonial: "As a business traveler, punctuality is key. BookMyRide never disappoints and the premium options are fantastic.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/professional-headshot-of-a-confident-man-1774242854791-73eb0078.png",
-          imageAlt: "Professional headshot of Mark Johnson",
-        },
         {
-          id: "3",
+          id: "3",          name: "Emily Rodriguez",          handle: "@emily_explorer",          testimonial: "The app is super easy to use, and I love the transparency in pricing. BookMyRide is my go-to for city trips!",          rating: 4,
-          name: "Emily Rodriguez",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/professional-headshot-of-a-smiling-middl-1774242855069-c4c66ff7.png",          imageAlt: "Professional headshot of Emily Rodriguez"},
-          handle: "@emily_explorer",
-          testimonial: "The app is super easy to use, and I love the transparency in pricing. BookMyRide is my go-to for city trips!",
-          rating: 4,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/professional-headshot-of-a-smiling-middl-1774242855069-c4c66ff7.png",
-          imageAlt: "Professional headshot of Emily Rodriguez",
-        },
         {
-          id: "4",
+          id: "4",          name: "David Lee",          handle: "@urban_david",          testimonial: "Safe, clean, and efficient. I appreciate the focus on safety features. Highly recommend to everyone.",          rating: 5,
-          name: "David Lee",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/professional-headshot-of-a-thoughtful-yo-1774242855507-be4b1113.png",          imageAlt: "Professional headshot of David Lee"},
-          handle: "@urban_david",
-          testimonial: "Safe, clean, and efficient. I appreciate the focus on safety features. Highly recommend to everyone.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/professional-headshot-of-a-thoughtful-yo-1774242855507-be4b1113.png",
-          imageAlt: "Professional headshot of David Lee",
-        },
       ]}
       showRating={true}
       title="Voices of Our Community"
@@ -268,58 +192,49 @@ export default function LandingPage() {
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBase
+      <FooterMedia
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-futuristic-ride-sharing-app-interface--1774242857229-5c166130.png?_wi=1"
+      imageAlt="BookMyRide App Screenshot"
+      logoText="BookMyRide"
       columns={[
         {
-          title: "Services",
+          title: "Company",          items: [
-          items: [
             {
-              label: "Book a Ride",
+              label: "About Us",              href: "/about"},
-              href: "/book-ride",
-            },
             {
-              label: "How it Works",
+              label: "Careers",              href: "#"},
-              href: "/how-it-works",
-            },
-            {
-              label: "Driver Signup",
-              href: "/driver-register",
-            },
           ],
         },
         {
-          title: "Company",
+          title: "Services",          items: [
-          items: [
             {
-              label: "About Us",
+              label: "Book a Ride",              href: "/book-ride"},
-              href: "/about",
-            },
             {
-              label: "Contact",
+              label: "How It Works",              href: "/#how-it-works"},
-              href: "/contact",
-            },
             {
-              label: "Careers",
+              label: "Ride Types",              href: "/#products"},
-              href: "#",
-            },
           ],
         },
         {
-          title: "Legal",
+          title: "Support",          items: [
-          items: [
             {
-              label: "Privacy Policy",
+              label: "Help Center",              href: "/#faq"},
-              href: "#",
-            },
             {
-              label: "Terms of Service",
+              label: "Contact Us",              href: "/#contact"},
-              href: "#",
+            {
-            },
+              label: "Safety Guidelines",              href: "#"},
+          ],
+        },
+        {
+          title: "Legal",          items: [
+            {
+              label: "Privacy Policy",              href: "#"},
+            {
+              label: "Terms of Service",              href: "#"},
           ],
         },
       ]}
-      logoText="BookMyRide"
+      copyrightText="© 2024 BookMyRide. All rights reserved."
-      copyrightText="© 2025 BookMyRide. All rights reserved."
     />
   </div>
       </ReactLenis>

src/app/page.tsx

@@ -2,16 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import SplitAbout from '@/components/sections/about/SplitAbout';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { Car, Star, MapPin, CheckCircle } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -32,89 +31,74 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "Home",
+          name: "Home", id: "/"
-          id: "home",
-
         },
         {
-          name: "Book a Ride",
+          name: "Book a Ride", id: "/book-ride"
-          id: "book-ride",
-
         },
         {
-          name: "How it Works",
+          name: "How it Works", id: "/#how-it-works"
-          id: "how-it-works",
-
         },
         {
-          name: "About Us",
+          name: "About Us", id: "/about"
-          id: "about-us",
-
         },
         {
-          name: "Contact",
+          name: "Pricing", id: "/pricing"
-          id: "contact",
-
         },
         {
-          name: "User Login",
+          name: "Contact", id: "/#contact"
-          id: "user-login",
+        }
-
-        },
-        {
-          name: "Driver Login",
-          id: "driver-login",
-
-        },
-        {
-          name: "Admin Login",
-          id: "admin-login",
-
-        },
       ]}
       brandName="BookMyRide"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboard
+      <HeroBillboardCarousel
       background={{
-        variant: "downward-rays-animated-grid",
+        variant: "downward-rays-animated-grid"}}
-      }}
       title="Your Ride, Just a Tap Away"
       description="Experience seamless and safe travel with BookMyRide. Instant bookings, reliable drivers, and affordable fares await."
       tag="Start Your Journey"
       buttons={[
         {
-          text: "Book Now",
+          text: "Book Now",          href: "/book-ride"},
-          href: "/book-ride",
+        {
+          text: "Learn More",          href: "/#how-it-works"},
+      ]}
+      mediaItems={[
+        {
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-futuristic-ride-sharing-app-interface--1774242857229-5c166130.png?_wi=1",          imageAlt: "Ride booking app interface on a smartphone"}
+      ]}
+    />
+  </div>
+
+  <div id="about" data-section="about">
+      <SplitAbout
+      textboxLayout="default"
+      useInvertedBackground={true}
+      title="Our Mission to Reshape Mobility"
+      description="At BookMyRide, we believe in a future where transportation is seamless, sustainable, and accessible to everyone. We're driven by innovation and a commitment to our community, constantly striving to enhance your travel experience."
+      buttons={[
+        {
+          text: "Learn More",          href: "/about"},
+      ]}
+      bulletPoints={[
+        {
+          title: "Reliability You Can Trust",          description: "Always on time, every time. Our network of drivers ensures you reach your destination without a hitch.",          icon: CheckCircle
         },
         {
-          text: "Learn More",
+          title: "Safety First, Always",          description: "Your well-being is our top priority. Advanced safety features and rigorous driver vetting are standard.",          icon: CheckCircle
-          href: "#how-it-works",
+        },
+        {
+          title: "Affordable & Transparent Pricing",          description: "Enjoy clear, upfront fares with no hidden surprises. Quality service shouldn't break the bank.",          icon: CheckCircle
+        },
+        {
+          title: "Eco-Conscious Choices",          description: "Committed to a greener planet, we offer eco-friendly ride options for sustainable travel.",          icon: CheckCircle
         },
       ]}
-      avatars={[
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-futuristic-ride-sharing-app-interface--1774242857229-5c166130.png?_wi=2"
-        {
+      imageAlt="A futuristic ride-sharing app interface on a smartphone"
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/professional-headshot-of-a-smiling-young-1774242857187-53c82054.png",
-          alt: "Rider Sarah",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/professional-headshot-of-a-confident-man-1774242854791-73eb0078.png",
-          alt: "Rider Michael",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/professional-headshot-of-a-smiling-middl-1774242855069-c4c66ff7.png",
-          alt: "Rider Emily",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/professional-headshot-of-a-thoughtful-yo-1774242855507-be4b1113.png",
-          alt: "Rider David",
-        },
-      ]}
-      avatarText="Join thousands of happy riders!"
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-futuristic-ride-sharing-app-interface--1774242857229-5c166130.png?_wi=1"
-      imageAlt="Ride booking app interface on a smartphone"
       mediaAnimation="slide-up"
     />
   </div>
@@ -127,84 +111,13 @@ export default function LandingPage() {
       features={[
         {
           id: 1,
-          title: "Request a Ride",
+          title: "Request a Ride",          description: "Open the app, enter your destination, and choose your preferred ride type. Get an instant fare estimate.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/an-illustration-of-a-hand-holding-a-smar-1774242855926-911a9587.png?_wi=1",          imageAlt: "Hand holding smartphone with ride request screen"},
-          description: "Open the app, enter your destination, and choose your preferred ride type. Get an instant fare estimate.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/an-illustration-of-a-hand-holding-a-smar-1774242855926-911a9587.png?_wi=1",
-          imageAlt: "Hand holding smartphone with ride request screen",
-        },
         {
           id: 2,
-          title: "Enjoy Your Ride",
+          title: "Enjoy Your Ride",          description: "A nearby driver will accept your request. Track your driver's arrival and enjoy a comfortable journey to your destination.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/an-illustration-of-a-comfortable-interio-1774242855299-fa38a449.png?_wi=1",          imageAlt: "Interior of a modern car during a ride"},
-          description: "A nearby driver will accept your request. Track your driver's arrival and enjoy a comfortable journey to your destination.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/an-illustration-of-a-comfortable-interio-1774242855299-fa38a449.png?_wi=1",
-          imageAlt: "Interior of a modern car during a ride",
-        },
         {
           id: 3,
-          title: "Pay with Ease",
+          title: "Pay with Ease",          description: "Securely pay through the app using various payment methods. Rate your driver and provide feedback on your experience.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/an-illustration-of-a-secure-mobile-payme-1774242855753-d94bf0a6.png?_wi=1",          imageAlt: "Mobile payment interface on a smartphone"},
-          description: "Securely pay through the app using various payment methods. Rate your driver and provide feedback on your experience.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/an-illustration-of-a-secure-mobile-payme-1774242855753-d94bf0a6.png?_wi=1",
-          imageAlt: "Mobile payment interface on a smartphone",
-        },
-      ]}
-      title="How It Works: Seamlessly Book Your Ride"
-      description="Booking a ride with BookMyRide is easy and intuitive. Follow these simple steps for a stress-free experience."
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <MetricSplitMediaAbout
-      useInvertedBackground={true}
-      title="About BookMyRide: Driving the Future of Commute"
-      description="BookMyRide is dedicated to transforming urban mobility with innovative technology and a commitment to rider satisfaction. We connect you with reliable transportation, ensuring every journey is safe, comfortable, and efficient."
-      metrics={[
-        {
-          value: "10M+",
-          title: "Rides Completed",
-        },
-        {
-          value: "50K+",
-          title: "Active Drivers",
-        },
-        {
-          value: "100+",
-          title: "Cities Served",
-        },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-clean-modern-infographic-displaying-ke-1774242855781-d47d661d.png"
-      imageAlt="Infographic showing ride-sharing statistics"
-      mediaAnimation="slide-up"
-      metricsAnimation="blur-reveal"
-    />
-  </div>
-
-  <div id="features" data-section="features">
-      <FeatureCardSeven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          id: 1,
-          title: "Request a Ride",
-          description: "Open the app, enter your destination, and choose your preferred ride type. Get an instant fare estimate.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/an-illustration-of-a-hand-holding-a-smar-1774242855926-911a9587.png?_wi=2",
-          imageAlt: "Hand holding smartphone with ride request screen",
-        },
-        {
-          id: 2,
-          title: "Enjoy Your Ride",
-          description: "A nearby driver will accept your request. Track your driver's arrival and enjoy a comfortable journey to your destination.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/an-illustration-of-a-comfortable-interio-1774242855299-fa38a449.png?_wi=2",
-          imageAlt: "Interior of a modern car during a ride",
-        },
-        {
-          id: 3,
-          title: "Pay with Ease",
-          description: "Securely pay through the app using various payment methods. Rate your driver and provide feedback on your experience.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/an-illustration-of-a-secure-mobile-payme-1774242855753-d94bf0a6.png?_wi=2",
-          imageAlt: "Mobile payment interface on a smartphone",
-        },
       ]}
       title="How It Works: Seamlessly Book Your Ride"
       description="Booking a ride with BookMyRide is easy and intuitive. Follow these simple steps for a stress-free experience."
@@ -212,247 +125,107 @@ export default function LandingPage() {
   </div>
 
   <div id="products" data-section="products">
-      <ProductCardFour
+      <ProductCardThree
       animationType="slide-up"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
         {
-          id: "economy",
+          id: "economy",          name: "Economy",          price: "Starting at $5",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-sleek-modern-economy-car-suitable-for--1774242855965-a269bd96.png",          imageAlt: "Modern economy car"},
-          name: "Economy",
-          price: "Starting at $5",
-          variant: "Affordable & Quick",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-sleek-modern-economy-car-suitable-for--1774242855965-a269bd96.png",
-          imageAlt: "Modern economy car",
-        },
         {
-          id: "comfort",
+          id: "comfort",          name: "Comfort",          price: "Starting at $10",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-luxurious-high-end-sedan-ideal-for-pre-1774242855806-70ef39b0.png",          imageAlt: "Comfort class car"},
-          name: "Comfort",
-          price: "Starting at $10",
-          variant: "Spacious & Relaxing",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-luxurious-high-end-sedan-ideal-for-pre-1774242855806-70ef39b0.png",
-          imageAlt: "Comfort class car",
-        },
         {
-          id: "suv",
+          id: "suv",          name: "SUV",          price: "Starting at $15",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-robust-and-spacious-suv-perfect-for-gr-1774242855550-c33cf1b1.png",          imageAlt: "Spacious SUV"},
-          name: "SUV",
-          price: "Starting at $15",
-          variant: "For Groups & Luggage",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-robust-and-spacious-suv-perfect-for-gr-1774242855550-c33cf1b1.png",
-          imageAlt: "Spacious SUV",
-        },
       ]}
       title="Our Fleet: Rides for Every Occasion"
       description="From daily commutes to special events, choose the perfect ride that fits your needs and budget."
     />
   </div>
 
-  <div id="testimonials" data-section="testimonials">
+  <div id="metrics" data-section="metrics">
-      <TestimonialCardFive
+      <MetricCardOne
+      animationType="slide-up"
       textboxLayout="default"
+      gridVariant="uniform-all-items-equal"
       useInvertedBackground={true}
-      testimonials={[
+      title="Our Impact in Numbers"
+      description="See the scale of BookMyRide's reach and reliability."
+      metrics={[
         {
-          id: "1",
+          id: "1",          value: "500K+",          title: "Rides Completed",          description: "Across all cities since launch.",          icon: Car
-          name: "Sarah J.",
-          date: "2 days ago",
-          title: "Reliable and Punctual",
-          quote: "BookMyRide has been a game-changer for my daily commute. Always on time and the drivers are incredibly professional. Highly recommended!",
-          tag: "Daily Commuter",
-          avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/professional-headshot-of-a-smiling-young-1774242857187-53c82054.png",
-          avatarAlt: "Sarah J. avatar",
         },
         {
-          id: "2",
+          id: "2",          value: "4.9",          title: "Average Rating",          description: "From thousands of satisfied riders.",          icon: Star
-          name: "Michael C.",
-          date: "1 week ago",
-          title: "Best App for City Travel",
-          quote: "I travel frequently for business, and BookMyRide makes it so much easier. The app is user-friendly, and the rides are always comfortable.",
-          tag: "Business Traveler",
-          avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/professional-headshot-of-a-confident-man-1774242854791-73eb0078.png",
-          avatarAlt: "Michael C. avatar",
         },
         {
-          id: "3",
+          id: "3",          value: "100+",          title: "Cities Served",          description: "Expanding our network daily.",          icon: MapPin
-          name: "Emily R.",
-          date: "3 weeks ago",
-          title: "Safe and Convenient",
-          quote: "As a student, safety is my top priority. BookMyRide's features give me peace of mind, especially when traveling late at night.",
-          tag: "Student Rider",
-          avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/professional-headshot-of-a-smiling-middl-1774242855069-c4c66ff7.png",
-          avatarAlt: "Emily R. avatar",
-        },
-        {
-          id: "4",
-          name: "David K.",
-          date: "1 month ago",
-          title: "Great Value for Money",
-          quote: "I'm always impressed by the affordable fares and quality of service. BookMyRide offers excellent value without compromising on comfort.",
-          tag: "Value Seeker",
-          avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/professional-headshot-of-a-thoughtful-yo-1774242855507-be4b1113.png",
-          avatarAlt: "David K. avatar",
         },
       ]}
-      title="What Our Riders Say: Trusted by Thousands"
-      description="Hear directly from our satisfied customers about their BookMyRide experiences."
-    />
-  </div>
-
-  <div id="social-proof" data-section="social-proof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Payment Solutions",
-        "Logistics Tech",
-        "Automotive Innovation",
-        "Urban Mobility",
-        "Data & Analytics",
-        "Smart City",
-        "Venture Capital",
-      ]}
-      logos={[
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-stylized-abstract-logo-for-a-fictional-1774242855868-a94c7307.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-clean-geometric-logo-for-a-global-logi-1774242856408-f8f53abe.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-sleek-minimalist-logo-for-a-major-auto-1774242854749-5bf7b837.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-dynamic-abstract-logo-for-an-urban-pla-1774242855427-d2d1e82a.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-clean-professional-logo-for-a-data-ana-1774242855522-b08942b9.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-modern-bold-logo-for-a-smart-city-tech-1774242854431-13316309.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-sleek-and-minimal-logo-for-a-venture-c-1774242855151-b86b19cf.png",
-      ]}
-      title="Our Partners: Powering Your Journey"
-      description="We collaborate with industry leaders to ensure the best experience, from secure payments to reliable vehicles."
-      speed={30}
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "1",
-          title: "How do I book a ride?",
-          content: "Simply open the BookMyRide app, enter your destination, choose your ride type, and confirm. A driver will be assigned shortly.",
-        },
-        {
-          id: "2",
-          title: "What payment methods are accepted?",
-          content: "We accept various payment methods including credit/debit cards, digital wallets, and cash, depending on your region.",
-        },
-        {
-          id: "3",
-          title: "Can I schedule a ride in advance?",
-          content: "Yes, you can schedule a ride for a later time or date using the 'Schedule Ride' option in the app.",
-        },
-        {
-          id: "4",
-          title: "Is BookMyRide available 24/7?",
-          content: "Yes, our services and customer support are available 24 hours a day, 7 days a week.",
-        },
-        {
-          id: "5",
-          title: "How are drivers screened?",
-          content: "All our drivers undergo a rigorous background check, vehicle inspection, and regular performance evaluations to ensure your safety.",
-        },
-      ]}
-      title="Frequently Asked Questions: Get Your Answers Here"
-      description="Find quick answers to the most common questions about BookMyRide's services."
-      faqsAnimation="blur-reveal"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactSplitForm
       useInvertedBackground={false}
-      background={{
+      title="Ready to Ride? Get in Touch!"
-        variant: "downward-rays-static",
+      description="Have questions or need support? Fill out the form below and we'll get back to you shortly."
-      }}
+      inputs={[
-      text="Ready to Ride? Book Your First Trip Now!"
+        { name: "name", type: "text", placeholder: "Your Name", required: true },
-      buttons={[
+        { name: "email", type: "email", placeholder: "Your Email", required: true },
-        {
-          text: "Get the App",
-          href: "/book-ride",
-        },
-        {
-          text: "Contact Support",
-          href: "/contact",
-        },
       ]}
+      textarea={{ name: "message", placeholder: "Your Message", rows: 4, required: true }}
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-futuristic-ride-sharing-app-interface--1774242857229-5c166130.png?_wi=1"
+      imageAlt="BookMyRide app interface"
+      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
+      <FooterMedia
-      logoText="BookMyRide"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-futuristic-ride-sharing-app-interface--1774242857229-5c166130.png?_wi=1"
+      imageAlt="BookMyRide app interface"
       columns={[
         {
-          title: "Company",
+          title: "Company",          items: [
-          items: [
             {
-              label: "About Us",
+              label: "About Us",              href: "/about"},
-              href: "/about",
-            },
             {
-              label: "Careers",
+              label: "Careers",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Blog",
+              label: "Blog",              href: "#"},
-              href: "#",
-            },
           ],
         },
         {
-          title: "Services",
+          title: "Services",          items: [
-          items: [
             {
-              label: "Book a Ride",
+              label: "Book a Ride",              href: "/book-ride"},
-              href: "/book-ride",
-            },
             {
-              label: "How It Works",
+              label: "How It Works",              href: "/#how-it-works"},
-              href: "/how-it-works",
-            },
             {
-              label: "Ride Types",
+              label: "Ride Types",              href: "#"},
-              href: "#",
-            },
           ],
         },
         {
-          title: "Support",
+          title: "Support",          items: [
-          items: [
             {
-              label: "Help Center",
+              label: "Help Center",              href: "/faq"},
-              href: "/faq",
-            },
             {
-              label: "Contact Us",
+              label: "Contact Us",              href: "/#contact"},
-              href: "/contact",
-            },
             {
-              label: "Safety Guidelines",
+              label: "Safety Guidelines",              href: "#"},
-              href: "#",
-            },
           ],
         },
         {
-          title: "Legal",
+          title: "Legal",          items: [
-          items: [
             {
-              label: "Privacy Policy",
+              label: "Privacy Policy",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Terms of Service",
+              label: "Terms of Service",              href: "#"},
-              href: "#",
-            },
           ],
         },
       ]}
+      logoText="BookMyRide"
       copyrightText="© 2024 BookMyRide. All rights reserved."
     />
   </div>

src/app/pricing/page.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+
+export default function PricingPage() {
+  const navItems = [
+    {
+      name: "Home",      id: "/"
+    },
+    {
+      name: "Book a Ride",      id: "/#hero"
+    },
+    {
+      name: "How it Works",      id: "/#how-it-works"
+    },
+    {
+      name: "About Us",      id: "/about"
+    },
+    {
+      name: "Features",      id: "/#features"
+    },
+    {
+      name: "Products",      id: "/#products"
+    },
+    {
+      name: "Metrics",      id: "/#metrics-overview"
+    },
+    {
+      name: "Pricing",      id: "/#pricing"
+    },
+    {
+      name: "Testimonials",      id: "/#testimonials"
+    },
+    {
+      name: "FAQ",      id: "/#faq"
+    },
+    {
+      name: "Contact",      id: "/#contact"
+    },
+    {
+      name: "User Login",      id: "/user-login"
+    },
+    {
+      name: "Driver Login",      id: "/driver-login"
+    },
+    {
+      name: "Admin Login",      id: "/admin-login"
+    }
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="compact"
+        sizing="largeSmallSizeLargeTitles"
+        background="floatingGradient"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={navItems}
+            brandName="BookMyRide"
+          />
+        </div>
+
+        <div id="pricing" data-section="pricing">
+          <PricingCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Transparent Pricing for Every Journey"
+            description="Choose the plan that best fits your travel needs, from casual rides to daily commutes."
+            plans={[
+              {
+                id: "basic",                name: "Basic Ride",                price: "$1.20/mile",                badge: "Economy",                features: [
+                  "Standard Sedans",                  "Up to 3 Passengers",                  "Basic Support"
+                ],
+                buttons: [{ text: "Select Basic", href: "/checkout?plan=basic" }]
+              },
+              {
+                id: "premium",                name: "Premium Comfort",                price: "$2.50/mile",                badge: "Popular",                features: [
+                  "Luxury Sedans",                  "Up to 4 Passengers",                  "Priority Support",                  "In-Car Wi-Fi"
+                ],
+                buttons: [{ text: "Select Premium", href: "/checkout?plan=premium" }]
+              },
+              {
+                id: "executive",                name: "Executive Class",                price: "$4.00/mile",                badge: "Business",                features: [
+                  "Executive Cars",                  "Personal Chauffeur",                  "24/7 Concierge",                  "Premium Amenities",                  "Flexible Cancellations"
+                ],
+                buttons: [{ text: "Select Executive", href: "/checkout?plan=executive" }]
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BKff17coHlcXqmygbowlBlEBUI/a-futuristic-ride-sharing-app-interface--1774242857229-5c166130.png?_wi=1"
+            imageAlt="BookMyRide App Screenshot"
+            logoText="BookMyRide"
+            columns={[
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "/about" },
+                  { label: "Careers", href: "#" }
+                ]
+              },
+              {
+                title: "Services",                items: [
+                  { label: "Book a Ride", href: "/book-ride" },
+                  { label: "How It Works", href: "/#how-it-works" },
+                  { label: "Ride Types", href: "/#products" }
+                ]
+              },
+              {
+                title: "Support",                items: [
+                  { label: "Help Center", href: "/#faq" },
+                  { label: "Contact Us", href: "/#contact" },
+                  { label: "Safety Guidelines", href: "#" }
+                ]
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" }
+                ]
+              }
+            ]}
+            copyrightText="© 2024 BookMyRide. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}