2026-05-28 16:52:17 +00:00
1 changed files with 91 additions and 0 deletions
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+export default function CheckoutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="small"
+        sizing="mediumLargeSizeLargeTitles"
+        background="noise"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="layered"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/#about" },
+              { name: "Products", id: "/#products" },
+              { name: "Education", id: "/#education" },
+              { name: "Testimonials", id: "/#testimonials" },
+              { name: "Contact", id: "/#contact" },
+              { name: "Checkout", id: "/checkout" }
+            ]}
+            brandName="The Vegan Marie"
+          />
+        </div>
+
+        <div className="flex flex-col items-center justify-center min-h-[calc(100vh-200px)] py-16 px-4 md:px-8">
+          <h1 className="text-4xl md:text-5xl font-extrabold text-foreground mb-6 text-center">
+            Secure Checkout
+          </h1>
+          <p className="text-lg text-foreground-secondary text-center max-w-2xl mb-12">
+            Complete your purchase with our secure payment system. Thank you for choosing The Vegan Marie!
+          </p>
+          <div className="w-full max-w-xl p-8 bg-card rounded-xl shadow-lg border border-accent/20">
+            {/* Placeholder for payment integration */}
+            <div className="text-center text-foreground-secondary text-xl min-h-32 flex items-center justify-center border-2 border-dashed border-accent/40 rounded-lg p-4">
+              Payment Integration Coming Soon...
+            </div>
+            <button className="mt-8 w-full py-3 px-6 bg-primary-cta text-white font-semibold rounded-lg hover:opacity-90 transition-opacity duration-300">
+              Continue to Payment
+            </button>
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="The Vegan Marie"
+            columns={[
+              {
+                title: "Shop",                items: [
+                  { label: "Herbal Teas", href: "/#products" },
+                  { label: "Herbal Powders", href: "/#products" },
+                  { label: "Sea Moss Blends", href: "/#products" },
+                  { label: "Remedies & Roots", href: "/#products" }
+                ]
+              },
+              {
+                title: "Learn",                items: [
+                  { label: "Our Story", href: "/#about" },
+                  { label: "Herbal Benefits", href: "/#features" },
+                  { label: "Wellness Education", href: "/#education" },
+                  { label: "FAQ", href: "/#faq" }
+                ]
+              },
+              {
+                title: "Connect",                items: [
+                  { label: "Contact Us", href: "/#contact" },
+                  { label: "Shipping & Returns", href: "#" },
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" }
+                ]
+              }
+            ]}
+            copyrightText="© 2024 The Vegan Marie. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}