Add src/app/customer-display/page.tsx

src/app/customer-display/page.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import { CreditCard, History } from "lucide-react";
+
+export default function CustomerDisplayPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="mediumSmall"
+        sizing="large"
+        background="circleGradient"
+        cardStyle="outline"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "#hero" },
+              { name: "About", id: "#about" },
+              { name: "Services", id: "#services" },
+              { name: "Products", id: "#products" },
+              { name: "Pricing", id: "#pricing" },
+              { name: "FAQ", id: "#faq" },
+              { name: "Contact", id: "#contact" },
+              { name: "Customer Display", id: "/customer-display" },
+              { name: "Payment Processing", id: "/payment-processing" }
+            ]}
+            button={{ text: "Get in Touch", href: "#contact" }}
+            logoSrc="http://img.b2bpic.net/free-vector/letter-b-luxury-brand-logo_1035-8689.jpg"
+            brandName="16 Av. de Blossac"
+          />
+        </div>
+
+        <main className="min-h-screen py-16 flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+          <div className="max-w-4xl w-full p-8 space-y-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
+            <h1 className="text-3xl font-bold text-center text-gray-900 dark:text-white">Customer Display</h1>
+            <p className="text-center text-gray-600 dark:text-gray-300">View your order status and payment information.</p>
+
+            <div className="space-y-6">
+              <div className="p-6 bg-gray-100 dark:bg-gray-700 rounded-md shadow-sm">
+                <h2 className="flex items-center text-xl font-semibold text-gray-800 dark:text-white mb-4">
+                  <History className="mr-2 text-primary-cta" /> Order Status
+                </h2>
+                <div className="space-y-2 text-gray-700 dark:text-gray-200">
+                  <p><strong>Order ID:</strong> #123456789</p>
+                  <p><strong>Status:</strong> <span className="text-green-600 font-medium">Processing</span></p>
+                  <p><strong>Items:</strong> 3</p>
+                  <p><strong>Estimated Delivery:</strong> 2-3 business days</p>
+                </div>
+              </div>
+
+              <div className="p-6 bg-gray-100 dark:bg-gray-700 rounded-md shadow-sm">
+                <h2 className="flex items-center text-xl font-semibold text-gray-800 dark:text-white mb-4">
+                  <CreditCard className="mr-2 text-primary-cta" /> Payment Information
+                </h2>
+                <div className="space-y-2 text-gray-700 dark:text-gray-200">
+                  <p><strong>Amount Due:</strong> €125.00</p>
+                  <p><strong>Payment Method:</strong> Credit Card (**** **** **** 1234)</p>
+                  <p><strong>Transaction ID:</strong> TXN-987654321</p>
+                  <p><strong>Payment Status:</strong> <span className="text-blue-600 font-medium">Authorized</span></p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}