184 lines
8.9 KiB
TypeScript
184 lines
8.9 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
export default function AppointmentPage() {
|
|
return (
|
|
<div className="relative min-h-screen bg-black tech-grid scanlines">
|
|
{/* Animated background elements */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<div className="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse"></div>
|
|
<div className="absolute bottom-1/4 right-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse delay-1000"></div>
|
|
</div>
|
|
|
|
<div className="relative mx-auto max-w-4xl px-4 py-12">
|
|
<div className="relative rounded-lg border-2 border-white/30 bg-black/80 backdrop-blur-sm p-8 neon-border-glow">
|
|
<div className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/5 to-transparent"></div>
|
|
<div className="relative">
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-2 w-2 rounded-full bg-white animate-pulse"></div>
|
|
<h1 className="text-3xl font-bold text-white uppercase tracking-wider neon-glow">
|
|
Book a New Appointment
|
|
</h1>
|
|
</div>
|
|
<Link
|
|
href="/"
|
|
className="text-sm font-medium text-white/60 hover:text-white transition-colors font-mono uppercase tracking-wider border border-white/20 px-3 py-1 rounded hover:border-white/40 hover:bg-white/10"
|
|
>
|
|
← Back to Home
|
|
</Link>
|
|
</div>
|
|
|
|
<p className="mb-8 text-white/70 font-mono">
|
|
FILL OUT THE FORM BELOW TO SCHEDULE A SERVICE APPOINTMENT FOR YOUR VEHICLE.
|
|
</p>
|
|
|
|
{/* Appointment Form */}
|
|
<form className="space-y-6">
|
|
<div className="grid gap-6 sm:grid-cols-2">
|
|
<div>
|
|
<label
|
|
htmlFor="vehicleNumber"
|
|
className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
|
|
>
|
|
Vehicle Number <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
id="vehicleNumber"
|
|
type="text"
|
|
placeholder="ABC-1234"
|
|
className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="vehicleMake"
|
|
className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
|
|
>
|
|
Vehicle Make <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
id="vehicleMake"
|
|
type="text"
|
|
placeholder="Honda, Toyota"
|
|
className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="vehicleModel"
|
|
className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
|
|
>
|
|
Vehicle Model <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
id="vehicleModel"
|
|
type="text"
|
|
placeholder="Civic, Camry"
|
|
className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="serviceType"
|
|
className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
|
|
>
|
|
Service Type <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
id="serviceType"
|
|
className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all [&>option]:bg-black [&>option]:text-white"
|
|
required
|
|
>
|
|
<option value="">SELECT SERVICE TYPE</option>
|
|
<option value="regular">Regular Service</option>
|
|
<option value="repair">Repair</option>
|
|
<option value="inspection">Inspection</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="preferredDate"
|
|
className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
|
|
>
|
|
Preferred Date <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
id="preferredDate"
|
|
type="date"
|
|
className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all [&::-webkit-calendar-picker-indicator]:invert [&::-webkit-calendar-picker-indicator]:cursor-pointer"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="preferredTime"
|
|
className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
|
|
>
|
|
Preferred Time <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
id="preferredTime"
|
|
className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all [&>option]:bg-black [&>option]:text-white"
|
|
required
|
|
>
|
|
<option value="">SELECT TIME</option>
|
|
<option value="09:00">09:00 AM</option>
|
|
<option value="10:00">10:00 AM</option>
|
|
<option value="11:00">11:00 AM</option>
|
|
<option value="12:00">12:00 PM</option>
|
|
<option value="13:00">13:00 PM</option>
|
|
<option value="14:00">14:00 PM</option>
|
|
<option value="15:00">15:00 PM</option>
|
|
<option value="16:00">16:00 PM</option>
|
|
<option value="17:00">17:00 PM</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="additionalNotes"
|
|
className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
|
|
>
|
|
Additional Notes
|
|
</label>
|
|
<textarea
|
|
id="additionalNotes"
|
|
rows={4}
|
|
placeholder="ANY SPECIFIC REQUIREMENTS OR ISSUES..."
|
|
className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-4 pt-4">
|
|
<Link
|
|
href="/"
|
|
className="flex-1 rounded-lg border-2 border-white/30 bg-black/50 px-6 py-3 text-center font-medium uppercase tracking-wider text-white transition-all hover:bg-white/10 hover:border-white/50 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)]"
|
|
>
|
|
Cancel
|
|
</Link>
|
|
<button
|
|
type="submit"
|
|
className="flex-1 rounded-lg border-2 border-white/30 bg-white/5 px-6 py-3 font-bold uppercase tracking-wider text-white transition-all hover:bg-white/10 hover:border-white/50 hover:text-gray-200 hover:shadow-[0_0_20px_rgba(255,255,255,0.3)] focus:outline-none focus:ring-2 focus:ring-white/30"
|
|
>
|
|
Book Appointment
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|