From 6b7f99d1608a1311ea025921627e9341831ad378 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 17 May 2026 16:28:02 +0000
Subject: [PATCH] Add src/app/payment/page.tsx

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

diff --git a/src/app/payment/page.tsx b/src/app/payment/page.tsx
new file mode 100644
index 0000000..55a6cfd
--- /dev/null
+++ b/src/app/payment/page.tsx
@@ -0,0 +1,67 @@
+"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';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import { useState } from 'react';
+
+export default function PaymentPage() {
+  const [paymentStep, setPaymentStep] = useState<'details' | 'confirm'>('details');
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="mediumLarge"
+        background="noise"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Products", id: "/#products" },
+            { name: "Payment", id: "/payment" },
+          ]}
+          brandName="ZUPEYR"
+        />
+        
+        <div className="min-h-screen pt-32 pb-20 px-6 max-w-4xl mx-auto">
+          {paymentStep === 'details' ? (
+            <ContactSplitForm
+              title="Secure Payment"
+              description="Select your payment method and complete the transaction securely."
+              inputs={[
+                { name: "name", type: "text", placeholder: "Full Name" },
+                { name: "phone", type: "tel", placeholder: "EVC/Zaad/Sahal Phone Number" }
+              ]}
+              multiSelect={{
+                name: "method",                label: "Select Payment Method",                options: ["EVC Plus", "Zaad", "Sahal"]
+              }}
+              buttonText="Pay Now"
+              onSubmit={() => setPaymentStep('confirm')}
+              className="bg-card p-8 rounded-2xl border border-accent"
+            />
+          ) : (
+            <div className="bg-card p-12 rounded-2xl border border-accent text-center">
+              <h2 className="text-3xl font-bold mb-4">Payment Confirmation</h2>
+              <p className="mb-8 text-lg">Your request has been submitted. Our team will process your order shortly. Please keep your phone ready for the verification prompt.</p>
+            </div>
+          )}
+        </div>
+
+        <FooterBaseCard
+          logoText="ZUPEYR STORE"
+          columns={[]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}