From 3a6bc8585274f5064742bd0b1bf93c585554a3ed Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 3 Jun 2026 23:58:17 +0000
Subject: [PATCH] Add src/app/payment-processing/page.tsx

---
 src/app/payment-processing/page.tsx | 119 ++++++++++++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 src/app/payment-processing/page.tsx

diff --git a/src/app/payment-processing/page.tsx b/src/app/payment-processing/page.tsx
new file mode 100644
index 0000000..468e86f
--- /dev/null
+++ b/src/app/payment-processing/page.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import { CreditCard, DollarSign } from "lucide-react";
+
+export default function PaymentProcessingPage() {
+  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">Payment Processing</h1>
+            <p className="text-center text-gray-600 dark:text-gray-300">Choose your preferred payment method.</p>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {/* Card Payment Section */}
+              <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" /> Card Payment
+                </h2>
+                <form className="space-y-4">
+                  <div>
+                    <label htmlFor="cardNumber" className="block text-sm font-medium text-gray-700 dark:text-gray-200">Card Number</label>
+                    <input
+                      type="text"
+                      id="cardNumber"
+                      className="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
+                      placeholder="**** **** **** ****"
+                    />
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label htmlFor="expiry" className="block text-sm font-medium text-gray-700 dark:text-gray-200">Expiry Date</label>
+                      <input
+                        type="text"
+                        id="expiry"
+                        className="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
+                        placeholder="MM/YY"
+                      />
+                    </div>
+                    <div>
+                      <label htmlFor="cvc" className="block text-sm font-medium text-gray-700 dark:text-gray-200">CVC</label>
+                      <input
+                        type="text"
+                        id="cvc"
+                        className="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
+                        placeholder="123"
+                      />
+                    </div>
+                  </div>
+                  <button
+                    type="submit"
+                    className="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-cta hover:bg-primary-cta/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
+                  >
+                    Pay with Card
+                  </button>
+                </form>
+              </div>
+
+              {/* Cash Payment Section */}
+              <div className="p-6 bg-gray-100 dark:bg-gray-700 rounded-md shadow-sm flex flex-col justify-between">
+                <div>
+                  <h2 className="flex items-center text-xl font-semibold text-gray-800 dark:text-white mb-4">
+                    <DollarSign className="mr-2 text-primary-cta" /> Cash Payment
+                  </h2>
+                  <p className="text-gray-700 dark:text-gray-200 mb-4">
+                    Please present your order details at the counter to complete your cash payment.
+                    Our staff will assist you with the process.
+                  </p>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                    Note: Exact change is appreciated for faster service.
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  className="mt-4 w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
+                >
+                  Proceed with Cash
+                </button>
+              </div>
+            </div>
+          </div>
+        </main>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}