Add src/app/pricing/page.tsx

2026-03-23 06:11:52 +00:00
parent d97b5d6c6c
commit 4d8edd7417
1 changed files with 107 additions and 0 deletions
--- a/src/app/pricing/page.tsx
+++ b/src/app/pricing/page.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
+import { Star } from "lucide-react";
+
+export default function PricingPage() {
+  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={[
+              { name: "Home", id: "home", href: "/" },
+              { name: "Book a Ride", id: "book-ride", href: "/book-ride" },
+              { name: "How it Works", id: "how-it-works", href: "/#how-it-works" },
+              { name: "About Us", id: "about-us", href: "/about" },
+              { name: "Pricing", id: "pricing", href: "/pricing" },
+              { name: "Contact", id: "contact", href: "/#contact" }
+            ]}
+            brandName="BookMyRide"
+          />
+        </div>
+
+        <div id="pricing" data-section="pricing">
+          <PricingCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Flexible Pricing Plans for Every Rider"
+            description="Choose the plan that best suits your travel frequency and needs."
+            plans={[
+              {
+                id: "basic",                name: "Basic",                price: "$5/ride",                buttons: [{ text: "Select Basic", href: "#" }],
+                features: [
+                  "Standard Vehicles",                  "Real-time Tracking",                  "24/7 Support"],
+              },
+              {
+                id: "premium",                name: "Premium",                price: "$10/ride",                badge: "Popular",                badgeIcon: Star,
+                buttons: [{ text: "Select Premium", href: "#" }],
+                features: [
+                  "Premium Vehicles",                  "Priority Support",                  "In-ride Entertainment",                  "Free Cancellations"],
+              },
+              {
+                id: "business",                name: "Business",                price: "$15/ride",                buttons: [{ text: "Select Business", href: "#" }],
+                features: [
+                  "Executive Cars",                  "Dedicated Account Manager",                  "Expense Reports",                  "Flexible Booking"],
+              },
+            ]}
+          />
+        </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 interface"
+            columns={[
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "/about" },
+                  { label: "Careers", href: "#" },
+                  { label: "Blog", href: "#" },
+                ],
+              },
+              {
+                title: "Services",                items: [
+                  { label: "Book a Ride", href: "/book-ride" },
+                  { label: "How It Works", href: "/#how-it-works" },
+                  { label: "Ride Types", href: "#" },
+                ],
+              },
+              {
+                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: "#" },
+                ],
+              },
+            ]}
+            logoText="BookMyRide"
+            copyrightText="© 2024 BookMyRide. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}