Add src/app/checkout/page.tsx

2026-06-03 10:32:10 +00:00
parent a902ccc906
commit 5052621b78
1 changed files with 88 additions and 0 deletions
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import ContactCenter from '@/components/sections/contact/ContactCenter'; // Reusing ContactCenter for checkout form
+
+export default function CheckoutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="mediumLargeSizeMediumTitles"
+        background="none"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "#services" },
+              { name: "Barbers", id: "#barbers" },
+              { name: "Pricing", id: "#pricing" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "FAQ", id: "#faq" },
+              { name: "Cart", id: "/cart" },
+              { name: "Checkout", id: "/checkout" }
+            ]}
+            button={{ text: "Book Now", href: "#contact" }}
+            brandName="The Modern Cut"
+          />
+        </div>
+
+        <div id="checkout" data-section="checkout">
+          <ContactCenter
+            tag="Secure Payment"
+            title="Complete Your Order"
+            description="Enter your shipping and payment details to finalize your grooming appointment."
+            inputPlaceholder="Your Email Address" // Repurpose for general contact info
+            buttonText="Place Order"
+            onSubmit={(email) => { console.log("Order placed for:", email); window.location.href = "/order-confirmation"; }}
+            useInvertedBackground={true}
+            background={{ variant: "plain" }}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="The Modern Cut"
+            columns={[
+              {
+                title: "Services",                items: [
+                  { label: "Haircuts", href: "#services" },
+                  { label: "Shaves", href: "#services" },
+                  { label: "Beard Trims", href: "#services" },
+                  { label: "Styling", href: "#services" }
+                ]
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "#about" },
+                  { label: "Our Team", href: "#barbers" },
+                  { label: "Pricing", href: "#pricing" },
+                  { label: "Contact", href: "#contact" }
+                ]
+              },
+              {
+                title: "Support",                items: [
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" }
+                ]
+              }
+            ]}
+            copyrightText="© 2024 The Modern Cut. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}