Add src/app/checkout/page.tsx

src/app/checkout/page.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import TextAnimation from "@/components/text/TextAnimation";
+import { Facebook, Instagram, Twitter } from "lucide-react";
+
+export default function CheckoutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="small"
+        sizing="mediumLarge"
+        background="circleGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Menu", id: "#menu" },
+              { name: "Features", id: "#features" },
+              { name: "Pricing", id: "#pricing" },
+              { name: "Reviews", id: "#testimonials" },
+              { name: "FAQ", id: "#faq" },
+              { name: "Checkout", id: "/checkout" },
+              { name: "Contact", id: "#contact" }
+            ]}
+            brandName="Food Paradise"
+          />
+        </div>
+
+        <div id="checkout-content" data-section="checkout-content" className="min-h-screen py-20 flex flex-col justify-center items-center text-center px-4">
+            <TextAnimation
+                title="Your Order & Payment"
+                type="entrance-slide"
+                className="mb-8"
+            />
+            <p className="text-lg mb-6 max-w-2xl">
+                We're excited for you to enjoy your Food Paradise meal! Here you can finalize your order and choose your preferred payment method.
+            </p>
+
+            <div className="flex flex-col gap-4 mb-8 max-w-xl w-full text-left">
+                <h3 className="text-2xl font-semibold">Payment Options:</h3>
+                <p className="text-md">
+                    We support secure payments via Razorpay (Credit/Debit Cards, UPI, Netbanking), convenient Cash on Delivery, and various digital Wallets. Select your preferred option at checkout.
+                </p>
+                <h3 className="text-2xl font-semibold">Order Confirmation:</h3>
+                <p className="text-md">
+                    Once your payment is successful, you'll receive an instant order confirmation via email and WhatsApp, detailing your meal and estimated delivery time.
+                </p>
+                <h3 className="text-2xl font-semibold">Live Delivery Tracking:</h3>
+                <p className="text-md">
+                    Track your Food Paradise order in real-time from our kitchen to your doorstep. Get live updates on its journey and estimated arrival time directly on our platform.
+                </p>
+            </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterCard
+                logoText="Food Paradise"
+                copyrightText="© 2024 Food Paradise. All rights reserved."
+                socialLinks={[
+                    { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+                    { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+                    { icon: Twitter, href: "#", ariaLabel: "Twitter" }
+                ]}
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}