Update src/app/checkout/page.tsx
This commit is contained in:
@@ -1,241 +1,449 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from "@/components/theme/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import { CreditCard, Smartphone, Home } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from '@/components/theme-provider';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ReactLenis from 'lenis/react';
|
||||
import { useState } from 'react';
|
||||
import { CreditCard, Wallet, DollarSign } from 'lucide-react';
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Platform", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Checkout", href: "/checkout" },
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Features", href: "#features" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Community", items: [
|
||||
{ label: "Petrolheads", href: "/" },
|
||||
{ label: "Car Lovers", href: "/" },
|
||||
{ label: "Events", href: "#features" },
|
||||
{ label: "Forums", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Help Center", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Privacy", href: "/" },
|
||||
{ label: "Terms", href: "/" },
|
||||
],
|
||||
},
|
||||
const navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'Checkout', id: '/checkout' },
|
||||
];
|
||||
|
||||
export default function CheckoutPage() {
|
||||
const [selectedMethod, setSelectedMethod] = useState<string | null>(null);
|
||||
interface ShippingFormData {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
street: string;
|
||||
city: string;
|
||||
state: string;
|
||||
zipCode: string;
|
||||
country: string;
|
||||
}
|
||||
|
||||
const paymentMethods = [
|
||||
{
|
||||
id: "ideal", name: "iDEAL", description: "Direct bank transfer (Netherlands)", icon: "💳"},
|
||||
{
|
||||
id: "paypal", name: "PayPal", description: "Pay securely with your PayPal account", icon: "🅿️"},
|
||||
{
|
||||
id: "mastercard", name: "Mastercard", description: "Credit/Debit card payment", icon: "💳"},
|
||||
interface OrderItem {
|
||||
id: string;
|
||||
name: string;
|
||||
price: number;
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
export default function CheckoutPage() {
|
||||
const [shippingData, setShippingData] = useState<ShippingFormData>({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
street: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zipCode: '',
|
||||
country: '',
|
||||
});
|
||||
|
||||
const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<string>('ideal');
|
||||
const [currentStep, setCurrentStep] = useState<'shipping' | 'order' | 'payment'>('shipping');
|
||||
|
||||
const orderItems: OrderItem[] = [
|
||||
{ id: '1', name: 'Premium Subscription (1 Year)', price: 99.99, quantity: 1 },
|
||||
{ id: '2', name: 'Support Package', price: 49.99, quantity: 1 },
|
||||
];
|
||||
|
||||
const subtotal = orderItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
|
||||
const shipping = 10.0;
|
||||
const tax = (subtotal + shipping) * 0.21; // 21% VAT
|
||||
const total = subtotal + shipping + tax;
|
||||
|
||||
const handleShippingChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setShippingData(prev => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleShippingSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setCurrentStep('order');
|
||||
};
|
||||
|
||||
const handlePaymentSubmit = () => {
|
||||
console.log('Processing payment with method:', selectedPaymentMethod);
|
||||
alert(`Payment processing with ${selectedPaymentMethod.toUpperCase()}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLarge"
|
||||
background="fluid"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Checkout", id: "/checkout" },
|
||||
]}
|
||||
brandName="PetrolHeads"
|
||||
/>
|
||||
|
||||
<div className="min-h-screen py-20 px-4 md:px-8">
|
||||
<div className="w-full max-w-2xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-12 text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4 text-foreground">
|
||||
Secure Checkout
|
||||
</h1>
|
||||
<p className="text-lg text-foreground/70">
|
||||
Select your preferred payment method to complete your purchase
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Order Summary */}
|
||||
<div
|
||||
className="bg-card rounded-2xl p-8 mb-8 border border-accent/20"
|
||||
>
|
||||
<h2 className="text-xl font-semibold mb-6 text-foreground">
|
||||
Order Summary
|
||||
</h2>
|
||||
<div className="space-y-4 mb-6">
|
||||
<div className="flex justify-between items-center pb-4 border-b border-accent/20">
|
||||
<span className="text-foreground/70">Premium Membership (Annual)</span>
|
||||
<span className="font-semibold text-foreground">$299.00</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center pb-4 border-b border-accent/20">
|
||||
<span className="text-foreground/70">Performance Bundle</span>
|
||||
<span className="font-semibold text-foreground">$149.00</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-lg font-bold">
|
||||
<span className="text-foreground">Total:</span>
|
||||
<span className="text-primary-cta">$448.00</span>
|
||||
<ReactLenis root>
|
||||
<NavbarStyleApple navItems={navItems} brandName="Webild" />
|
||||
<div className="min-h-screen bg-gradient-to-b from-background to-background/50 pt-20 pb-16">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
{/* Progress Steps */}
|
||||
<div className="mb-12">
|
||||
<div className="flex justify-between items-center max-w-2xl mx-auto">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className={`w-12 h-12 rounded-full flex items-center justify-center font-semibold transition-all ${
|
||||
currentStep === 'shipping' || (currentStep !== 'shipping')
|
||||
? 'bg-primary-cta text-white'
|
||||
: 'bg-background-accent text-foreground'
|
||||
}`}>
|
||||
1
|
||||
</div>
|
||||
<p className="text-sm mt-2 font-medium">Shipping</p>
|
||||
</div>
|
||||
<div className={`flex-1 h-1 mx-4 transition-all ${
|
||||
currentStep !== 'shipping' ? 'bg-primary-cta' : 'bg-background-accent'
|
||||
}`} />
|
||||
<div className="flex flex-col items-center">
|
||||
<div className={`w-12 h-12 rounded-full flex items-center justify-center font-semibold transition-all ${
|
||||
currentStep === 'order' || currentStep === 'payment'
|
||||
? 'bg-primary-cta text-white'
|
||||
: 'bg-background-accent text-foreground'
|
||||
}`}>
|
||||
2
|
||||
</div>
|
||||
<p className="text-sm mt-2 font-medium">Order Summary</p>
|
||||
</div>
|
||||
<div className={`flex-1 h-1 mx-4 transition-all ${
|
||||
currentStep === 'payment' ? 'bg-primary-cta' : 'bg-background-accent'
|
||||
}`} />
|
||||
<div className="flex flex-col items-center">
|
||||
<div className={`w-12 h-12 rounded-full flex items-center justify-center font-semibold transition-all ${
|
||||
currentStep === 'payment'
|
||||
? 'bg-primary-cta text-white'
|
||||
: 'bg-background-accent text-foreground'
|
||||
}`}>
|
||||
3
|
||||
</div>
|
||||
<p className="text-sm mt-2 font-medium">Payment</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Methods */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-xl font-semibold mb-6 text-foreground">
|
||||
Select Payment Method
|
||||
</h2>
|
||||
<div className="grid gap-4">
|
||||
{paymentMethods.map((method) => (
|
||||
<button
|
||||
key={method.id}
|
||||
onClick={() => setSelectedMethod(method.id)}
|
||||
className={`p-6 rounded-xl border-2 transition-all duration-300 text-left ${
|
||||
selectedMethod === method.id
|
||||
? "border-primary-cta bg-primary-cta/10"
|
||||
: "border-accent/30 hover:border-primary-cta/50 bg-card"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-4">
|
||||
<span className="text-3xl">{method.icon}</span>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Main Content */}
|
||||
<div className="lg:col-span-2">
|
||||
{/* Shipping Form */}
|
||||
{currentStep === 'shipping' && (
|
||||
<div className="bg-card rounded-lg p-8 backdrop-blur-md border border-primary-cta/10">
|
||||
<h2 className="text-2xl font-bold mb-6 text-foreground">Shipping Information</h2>
|
||||
<form onSubmit={handleShippingSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">First Name</label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstName"
|
||||
value={shippingData.firstName}
|
||||
onChange={handleShippingChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-primary-cta/20 bg-background/50 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta/50 transition-colors"
|
||||
placeholder="John"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Last Name</label>
|
||||
<input
|
||||
type="text"
|
||||
name="lastName"
|
||||
value={shippingData.lastName}
|
||||
onChange={handleShippingChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-primary-cta/20 bg-background/50 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta/50 transition-colors"
|
||||
placeholder="Doe"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={shippingData.email}
|
||||
onChange={handleShippingChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-primary-cta/20 bg-background/50 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta/50 transition-colors"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Phone</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={shippingData.phone}
|
||||
onChange={handleShippingChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-primary-cta/20 bg-background/50 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta/50 transition-colors"
|
||||
placeholder="+31 6 12345678"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground mb-1">
|
||||
{method.name}
|
||||
</h3>
|
||||
<p className="text-sm text-foreground/60">
|
||||
{method.description}
|
||||
</p>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Street Address</label>
|
||||
<input
|
||||
type="text"
|
||||
name="street"
|
||||
value={shippingData.street}
|
||||
onChange={handleShippingChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-primary-cta/20 bg-background/50 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta/50 transition-colors"
|
||||
placeholder="123 Main Street"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">City</label>
|
||||
<input
|
||||
type="text"
|
||||
name="city"
|
||||
value={shippingData.city}
|
||||
onChange={handleShippingChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-primary-cta/20 bg-background/50 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta/50 transition-colors"
|
||||
placeholder="Amsterdam"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">State/Province</label>
|
||||
<input
|
||||
type="text"
|
||||
name="state"
|
||||
value={shippingData.state}
|
||||
onChange={handleShippingChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-primary-cta/20 bg-background/50 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta/50 transition-colors"
|
||||
placeholder="North Holland"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">ZIP Code</label>
|
||||
<input
|
||||
type="text"
|
||||
name="zipCode"
|
||||
value={shippingData.zipCode}
|
||||
onChange={handleShippingChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-primary-cta/20 bg-background/50 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta/50 transition-colors"
|
||||
placeholder="1012 NX"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Country</label>
|
||||
<select
|
||||
name="country"
|
||||
value={shippingData.country}
|
||||
onChange={handleShippingChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg border border-primary-cta/20 bg-background/50 text-foreground focus:outline-none focus:border-primary-cta/50 transition-colors"
|
||||
>
|
||||
<option value="">Select Country</option>
|
||||
<option value="NL">Netherlands</option>
|
||||
<option value="DE">Germany</option>
|
||||
<option value="BE">Belgium</option>
|
||||
<option value="FR">France</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full mt-8 px-6 py-3 bg-gradient-to-r from-primary-cta to-accent text-white font-semibold rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Continue to Order Review
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Order Summary */}
|
||||
{currentStep === 'order' && (
|
||||
<div className="bg-card rounded-lg p-8 backdrop-blur-md border border-primary-cta/10">
|
||||
<h2 className="text-2xl font-bold mb-6 text-foreground">Order Summary</h2>
|
||||
<div className="space-y-4 mb-8">
|
||||
{orderItems.map(item => (
|
||||
<div key={item.id} className="flex justify-between items-center pb-4 border-b border-primary-cta/10">
|
||||
<div>
|
||||
<p className="font-medium text-foreground">{item.name}</p>
|
||||
<p className="text-sm text-foreground/60">Quantity: {item.quantity}</p>
|
||||
</div>
|
||||
<p className="font-semibold text-foreground">${(item.price * item.quantity).toFixed(2)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 bg-background/50 rounded-lg p-4">
|
||||
<div className="flex justify-between text-foreground">
|
||||
<span>Subtotal</span>
|
||||
<span>${subtotal.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-foreground">
|
||||
<span>Shipping</span>
|
||||
<span>${shipping.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-foreground">
|
||||
<span>Tax (21%)</span>
|
||||
<span>${tax.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-lg font-bold text-primary-cta pt-3 border-t border-primary-cta/20">
|
||||
<span>Total</span>
|
||||
<span>${total.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`w-5 h-5 rounded-full border-2 mt-1 ${
|
||||
selectedMethod === method.id
|
||||
? "border-primary-cta bg-primary-cta"
|
||||
: "border-accent/40"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selected Method Details */}
|
||||
{selectedMethod && (
|
||||
<div className="bg-card rounded-xl p-6 mb-8 border border-accent/20">
|
||||
{selectedMethod === "ideal" && (
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
|
||||
<Home className="w-5 h-5" /> iDEAL Payment
|
||||
</h3>
|
||||
<p className="text-sm text-foreground/70 mb-4">
|
||||
You will be redirected to your bank to complete the payment securely.
|
||||
</p>
|
||||
<div className="bg-background/50 p-4 rounded-lg text-sm text-foreground/60">
|
||||
Supported by all major Dutch banks including ING, ABN AMRO, and Rabobank.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{selectedMethod === "paypal" && (
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
|
||||
🅿️ PayPal Payment
|
||||
</h3>
|
||||
<p className="text-sm text-foreground/70 mb-4">
|
||||
Sign in to your PayPal account to complete the transaction securely.
|
||||
</p>
|
||||
<div className="bg-background/50 p-4 rounded-lg text-sm text-foreground/60">
|
||||
Your PayPal account provides buyer protection for this purchase.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{selectedMethod === "mastercard" && (
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
|
||||
<CreditCard className="w-5 h-5" /> Mastercard Payment
|
||||
</h3>
|
||||
<p className="text-sm text-foreground/70 mb-4">
|
||||
Enter your Mastercard details below. Your payment is secured with SSL encryption.
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Card Number"
|
||||
className="w-full px-4 py-3 rounded-lg bg-background border border-accent/30 text-foreground placeholder-foreground/40 focus:outline-none focus:border-primary-cta"
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="MM/YY"
|
||||
className="px-4 py-3 rounded-lg bg-background border border-accent/30 text-foreground placeholder-foreground/40 focus:outline-none focus:border-primary-cta"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="CVC"
|
||||
className="px-4 py-3 rounded-lg bg-background border border-accent/30 text-foreground placeholder-foreground/40 focus:outline-none focus:border-primary-cta"
|
||||
/>
|
||||
<div className="mt-8 flex gap-4">
|
||||
<button
|
||||
onClick={() => setCurrentStep('shipping')}
|
||||
className="flex-1 px-6 py-3 border border-primary-cta/50 text-foreground font-semibold rounded-lg hover:bg-background/50 transition-colors"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentStep('payment')}
|
||||
className="flex-1 px-6 py-3 bg-gradient-to-r from-primary-cta to-accent text-white font-semibold rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Continue to Payment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Payment Methods */}
|
||||
{currentStep === 'payment' && (
|
||||
<div className="bg-card rounded-lg p-8 backdrop-blur-md border border-primary-cta/10">
|
||||
<h2 className="text-2xl font-bold mb-6 text-foreground">Select Payment Method</h2>
|
||||
<div className="space-y-4">
|
||||
{/* iDEAL */}
|
||||
<label className="flex items-center p-4 border-2 border-primary-cta/20 rounded-lg cursor-pointer hover:border-primary-cta/50 transition-colors" style={{
|
||||
borderColor: selectedPaymentMethod === 'ideal' ? 'var(--primary-cta)' : 'var(--primary-cta)20'
|
||||
}}>
|
||||
<input
|
||||
type="radio"
|
||||
name="payment"
|
||||
value="ideal"
|
||||
checked={selectedPaymentMethod === 'ideal'}
|
||||
onChange={(e) => setSelectedPaymentMethod(e.target.value)}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<DollarSign className="w-6 h-6 ml-4 text-accent" />
|
||||
<div className="ml-4">
|
||||
<p className="font-semibold text-foreground">iDEAL</p>
|
||||
<p className="text-sm text-foreground/60">Direct bank transfer (Popular in Netherlands)</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* PayPal */}
|
||||
<label className="flex items-center p-4 border-2 border-primary-cta/20 rounded-lg cursor-pointer hover:border-primary-cta/50 transition-colors" style={{
|
||||
borderColor: selectedPaymentMethod === 'paypal' ? 'var(--primary-cta)' : 'var(--primary-cta)20'
|
||||
}}>
|
||||
<input
|
||||
type="radio"
|
||||
name="payment"
|
||||
value="paypal"
|
||||
checked={selectedPaymentMethod === 'paypal'}
|
||||
onChange={(e) => setSelectedPaymentMethod(e.target.value)}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<Wallet className="w-6 h-6 ml-4 text-accent" />
|
||||
<div className="ml-4">
|
||||
<p className="font-semibold text-foreground">PayPal</p>
|
||||
<p className="text-sm text-foreground/60">Fast and secure payment with PayPal</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Mastercard */}
|
||||
<label className="flex items-center p-4 border-2 border-primary-cta/20 rounded-lg cursor-pointer hover:border-primary-cta/50 transition-colors" style={{
|
||||
borderColor: selectedPaymentMethod === 'mastercard' ? 'var(--primary-cta)' : 'var(--primary-cta)20'
|
||||
}}>
|
||||
<input
|
||||
type="radio"
|
||||
name="payment"
|
||||
value="mastercard"
|
||||
checked={selectedPaymentMethod === 'mastercard'}
|
||||
onChange={(e) => setSelectedPaymentMethod(e.target.value)}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<CreditCard className="w-6 h-6 ml-4 text-accent" />
|
||||
<div className="ml-4">
|
||||
<p className="font-semibold text-foreground">Mastercard</p>
|
||||
<p className="text-sm text-foreground/60">Credit or debit card payment</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex gap-4">
|
||||
<button
|
||||
onClick={() => setCurrentStep('order')}
|
||||
className="flex-1 px-6 py-3 border border-primary-cta/50 text-foreground font-semibold rounded-lg hover:bg-background/50 transition-colors"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={handlePaymentSubmit}
|
||||
className="flex-1 px-6 py-3 bg-gradient-to-r from-primary-cta to-accent text-white font-semibold rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Complete Payment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Order Summary Sidebar */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="bg-card rounded-lg p-6 backdrop-blur-md border border-primary-cta/10 sticky top-24">
|
||||
<h3 className="text-xl font-bold mb-6 text-foreground">Order Total</h3>
|
||||
<div className="space-y-3 mb-6">
|
||||
<div className="flex justify-between text-sm text-foreground/80">
|
||||
<span>Subtotal</span>
|
||||
<span>${subtotal.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm text-foreground/80">
|
||||
<span>Shipping</span>
|
||||
<span>${shipping.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm text-foreground/80">
|
||||
<span>Tax (21%)</span>
|
||||
<span>${tax.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gradient-to-r from-primary-cta/10 to-accent/10 rounded-lg p-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-semibold text-foreground">Total</span>
|
||||
<span className="text-2xl font-bold text-primary-cta">${total.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 pt-6 border-t border-primary-cta/10">
|
||||
<p className="text-xs text-foreground/60">✓ Secure payment</p>
|
||||
<p className="text-xs text-foreground/60">✓ Money-back guarantee</p>
|
||||
<p className="text-xs text-foreground/60">✓ Fast delivery</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => (window.location.href = "/")}
|
||||
className="flex-1 px-6 py-3 rounded-lg border border-accent/30 text-foreground font-semibold hover:border-primary-cta/50 transition-all duration-300"
|
||||
>
|
||||
Back to Home
|
||||
</button>
|
||||
<button
|
||||
disabled={!selectedMethod}
|
||||
className={`flex-1 px-6 py-3 rounded-lg font-semibold transition-all duration-300 ${
|
||||
selectedMethod
|
||||
? "bg-primary-cta text-primary-cta-text hover:opacity-90"
|
||||
: "bg-accent/30 text-foreground/50 cursor-not-allowed"
|
||||
}`}
|
||||
>
|
||||
Complete Payment
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Security Note */}
|
||||
<div className="mt-8 p-4 bg-background/50 rounded-lg text-center text-sm text-foreground/60">
|
||||
🔒 Your payment information is secure and encrypted. We never store your full card details.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FooterBaseReveal
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2025 PetrolHeads | United by Passion"
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user