Add src/app/order/page.tsx

src/app/order/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import CardStack from '@/components/cardStack/CardStack';
+import { useState } from 'react';
+
+export default function OrderPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-bubble"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="mediumSmall"
+        sizing="largeSmall"
+        background="circleGradient"
+        cardStyle="solid"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Bestsellers", id: "/#bestsellers" },
+              { name: "Reviews", id: "/#testimonials" },
+              { name: "Order", id: "/order" },
+            ]}
+            brandName="Maarus Bakers"
+          />
+        </div>
+
+        <div className="pt-32 pb-20">
+            <CardStack 
+                title="Custom Cake Ordering"
+                description="Step-by-step customization to craft your perfect cake."
+                textboxLayout="default"
+                animationType="slide-up"
+                gridVariant="uniform-all-items-equal"
+            >
+                <div className="p-8 text-center bg-card rounded-2xl">
+                   <h3 className="text-xl font-semibold mb-4">Step 1: Choose Your Flavor</h3>
+                   <p>Select your favorite sponge flavor: Vanilla, Chocolate, Red Velvet, or Lemon.</p>
+                </div>
+                <div className="p-8 text-center bg-card rounded-2xl">
+                   <h3 className="text-xl font-semibold mb-4">Step 2: Choose Your Size</h3>
+                   <p>Pick your size: 6-inch (8 servings), 8-inch (12 servings), or 10-inch (20 servings).</p>
+                </div>
+                <div className="p-8 text-center bg-card rounded-2xl">
+                   <h3 className="text-xl font-semibold mb-4">Step 3: Add Toppings</h3>
+                   <p>Personalize with fresh fruits, chocolate ganache, or edible flowers.</p>
+                </div>
+            </CardStack>
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            useInvertedBackground={false}
+            background={{ variant: "plain" }}
+            tag="Need Assistance?"
+            title="Get in Touch"
+            description="Our master bakers are here to help you finalize your custom order."
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Maarus Bakers"
+            columns={[
+              { title: "Quick Links", items: [{ label: "Home", href: "/" }, { label: "Order", href: "/order" }] },
+              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}