Switch to version 1: remove src/app/payment-processing/page.tsx
This commit is contained in:
@@ -1,119 +0,0 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user