650 lines
35 KiB
TypeScript
650 lines
35 KiB
TypeScript
import { useState } from 'react';
|
||
import { Button } from '../ui/button';
|
||
import { Input } from '../ui/input';
|
||
import { Label } from '../ui/label';
|
||
import { Textarea } from '../ui/textarea';
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
|
||
import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
|
||
import { Checkbox } from '../ui/checkbox';
|
||
import { CheckCircle, Users, Star, Shield, LogIn, Award, TrendingUp, Handshake } from 'lucide-react';
|
||
import { toast } from 'sonner';
|
||
// import backgroundImage from 'figma:asset/ee01d864b6e23a8197b42f3168c98eedec9d2440.png';
|
||
|
||
interface ApplicationFormPageProps {
|
||
onAdminLogin: () => void;
|
||
}
|
||
|
||
export function ApplicationFormPage({ onAdminLogin }: ApplicationFormPageProps) {
|
||
const [formData, setFormData] = useState({
|
||
country: '',
|
||
state: '',
|
||
district: '',
|
||
name: '',
|
||
interestedCity: '',
|
||
email: '',
|
||
pincode: '',
|
||
mobile: '',
|
||
ownRoyalEnfield: '',
|
||
royalEnfieldModel: '',
|
||
age: '',
|
||
education: '',
|
||
companyName: '',
|
||
source: '',
|
||
existingDealer: '',
|
||
description: '',
|
||
address: '',
|
||
acceptTerms: false
|
||
});
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
|
||
// Validate required fields
|
||
if (!formData.country || !formData.state || !formData.district || !formData.name ||
|
||
!formData.interestedCity || !formData.email || !formData.pincode || !formData.mobile ||
|
||
!formData.ownRoyalEnfield || !formData.age || !formData.education ||
|
||
!formData.companyName || !formData.source || !formData.existingDealer ||
|
||
!formData.description || !formData.address) {
|
||
toast.error('Please fill in all required fields');
|
||
return;
|
||
}
|
||
|
||
// Validate Royal Enfield model if they own one
|
||
if (formData.ownRoyalEnfield === 'yes' && !formData.royalEnfieldModel) {
|
||
toast.error('Please select your Royal Enfield model');
|
||
return;
|
||
}
|
||
|
||
// Validate terms acceptance
|
||
if (!formData.acceptTerms) {
|
||
toast.error('Please accept the terms and conditions to continue');
|
||
return;
|
||
}
|
||
|
||
// Success message
|
||
toast.success('Application submitted successfully! We will contact you soon.');
|
||
|
||
// Reset form
|
||
setFormData({
|
||
country: '',
|
||
state: '',
|
||
district: '',
|
||
name: '',
|
||
interestedCity: '',
|
||
email: '',
|
||
pincode: '',
|
||
mobile: '',
|
||
ownRoyalEnfield: '',
|
||
royalEnfieldModel: '',
|
||
age: '',
|
||
education: '',
|
||
companyName: '',
|
||
source: '',
|
||
existingDealer: '',
|
||
description: '',
|
||
address: '',
|
||
acceptTerms: false
|
||
});
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-slate-950">
|
||
{/* Header */}
|
||
<header className="bg-black/90 backdrop-blur-md border-b border-amber-500/20 sticky top-0 z-50 shadow-xl">
|
||
<div className="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
|
||
<div className="flex items-center gap-4">
|
||
<div className="w-12 h-12 bg-gradient-to-br from-amber-500 to-orange-600 rounded-lg flex items-center justify-center shadow-lg">
|
||
<span className="text-white text-xl">RE</span>
|
||
</div>
|
||
<div>
|
||
<h1 className="text-white text-2xl tracking-tight">Royal Enfield</h1>
|
||
<p className="text-amber-400/80 text-xs tracking-wide uppercase">Dealer Partnership Portal</p>
|
||
</div>
|
||
</div>
|
||
<Button
|
||
variant="outline"
|
||
onClick={onAdminLogin}
|
||
className="flex items-center gap-2 bg-white/5 border-amber-500/30 text-amber-400 hover:bg-amber-500/10 hover:border-amber-500/50 hover:text-amber-300 transition-all"
|
||
>
|
||
<LogIn className="w-4 h-4" />
|
||
Admin Login
|
||
</Button>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Hero Section */}
|
||
<section className="relative py-24 overflow-hidden">
|
||
<div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950"></div>
|
||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(251,191,36,0.1),transparent_50%)]"></div>
|
||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,rgba(251,146,60,0.1),transparent_50%)]"></div>
|
||
|
||
<div className="max-w-7xl mx-auto px-6 text-center relative z-10">
|
||
<div className="inline-block mb-6">
|
||
<div className="bg-amber-500/10 border border-amber-500/30 rounded-full px-6 py-2">
|
||
<p className="text-amber-400 text-sm tracking-wide">Since 1901 • Legacy of Excellence</p>
|
||
</div>
|
||
</div>
|
||
<h1 className="text-5xl md:text-6xl text-white mb-6 tracking-tight">
|
||
Join the Royal Enfield
|
||
<span className="block text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-500">
|
||
Partnership Network
|
||
</span>
|
||
</h1>
|
||
<p className="text-slate-300 text-lg md:text-xl max-w-3xl mx-auto mb-12 leading-relaxed">
|
||
Become part of our legendary heritage and bring the spirit of Pure Motorcycling to riders in your community
|
||
</p>
|
||
<div className="flex flex-wrap justify-center gap-8">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-full bg-amber-500/20 flex items-center justify-center">
|
||
<CheckCircle className="w-5 h-5 text-amber-400" />
|
||
</div>
|
||
<span className="text-slate-200">120+ Year Heritage</span>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-full bg-amber-500/20 flex items-center justify-center">
|
||
<CheckCircle className="w-5 h-5 text-amber-400" />
|
||
</div>
|
||
<span className="text-slate-200">Global Recognition</span>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-full bg-amber-500/20 flex items-center justify-center">
|
||
<CheckCircle className="w-5 h-5 text-amber-400" />
|
||
</div>
|
||
<span className="text-slate-200">Premium Support</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Why Partner Section */}
|
||
<section className="py-20 bg-slate-900/50">
|
||
<div className="max-w-7xl mx-auto px-6">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-4xl text-white mb-4">Why Partner With Royal Enfield?</h2>
|
||
<p className="text-slate-400 text-lg">Unmatched benefits for ambitious entrepreneurs</p>
|
||
</div>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{/* Premium Brand */}
|
||
<div className="group relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur border border-slate-700/50 rounded-2xl p-8 text-center hover:border-amber-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-amber-500/10">
|
||
<div className="w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform shadow-lg">
|
||
<Star className="w-8 h-8 text-white" />
|
||
</div>
|
||
<h3 className="text-white text-xl mb-3">Premium Brand</h3>
|
||
<p className="text-slate-400 text-sm leading-relaxed">
|
||
Represent a legendary brand trusted by millions worldwide since 1901
|
||
</p>
|
||
</div>
|
||
|
||
{/* Strong Support */}
|
||
<div className="group relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur border border-slate-700/50 rounded-2xl p-8 text-center hover:border-amber-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-amber-500/10">
|
||
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform shadow-lg">
|
||
<Handshake className="w-8 h-8 text-white" />
|
||
</div>
|
||
<h3 className="text-white text-xl mb-3">Complete Support</h3>
|
||
<p className="text-slate-400 text-sm leading-relaxed">
|
||
Comprehensive training, marketing, and ongoing operational support
|
||
</p>
|
||
</div>
|
||
|
||
{/* Growth Opportunity */}
|
||
<div className="group relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur border border-slate-700/50 rounded-2xl p-8 text-center hover:border-amber-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-amber-500/10">
|
||
<div className="w-16 h-16 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform shadow-lg">
|
||
<TrendingUp className="w-8 h-8 text-white" />
|
||
</div>
|
||
<h3 className="text-white text-xl mb-3">Growth Potential</h3>
|
||
<p className="text-slate-400 text-sm leading-relaxed">
|
||
Tap into expanding markets with increasing customer demand
|
||
</p>
|
||
</div>
|
||
|
||
{/* Proven Success */}
|
||
<div className="group relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur border border-slate-700/50 rounded-2xl p-8 text-center hover:border-amber-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-amber-500/10">
|
||
<div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform shadow-lg">
|
||
<Award className="w-8 h-8 text-white" />
|
||
</div>
|
||
<h3 className="text-white text-xl mb-3">Proven Model</h3>
|
||
<p className="text-slate-400 text-sm leading-relaxed">
|
||
Join thousands of successful dealers in our global network
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Application Form Section */}
|
||
<section className="relative py-24 overflow-hidden">
|
||
{/* Background Image with Overlay */}
|
||
<div className="absolute inset-0">
|
||
{/* <img
|
||
src={backgroundImage}
|
||
alt="Royal Enfield Showroom"
|
||
className="w-full h-full object-cover"
|
||
/> */}
|
||
<div className="absolute inset-0 bg-gradient-to-br from-slate-950/95 via-slate-900/90 to-slate-950/95 backdrop-blur-sm"></div>
|
||
</div>
|
||
|
||
<div className="max-w-4xl mx-auto px-6 relative z-10">
|
||
<div className="text-center mb-12">
|
||
<div className="inline-block mb-4">
|
||
<div className="bg-amber-500/10 border border-amber-500/30 rounded-full px-5 py-2">
|
||
<p className="text-amber-400 text-sm tracking-wide">Start Your Journey</p>
|
||
</div>
|
||
</div>
|
||
<h2 className="text-4xl text-white mb-4">Dealership Application</h2>
|
||
<p className="text-slate-300 text-lg">
|
||
Complete the form below to begin your partnership with Royal Enfield
|
||
</p>
|
||
</div>
|
||
|
||
<form onSubmit={handleSubmit} className="bg-slate-900/60 backdrop-blur-xl rounded-3xl border border-slate-700/50 p-10 shadow-2xl">
|
||
<div className="space-y-7">
|
||
{/* Name & Email */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<Label htmlFor="name" className="flex items-center gap-2 text-slate-200 mb-3">
|
||
<Users className="w-4 h-4 text-amber-400" />
|
||
Full Name <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<Input
|
||
id="name"
|
||
placeholder="Enter your full name"
|
||
value={formData.name}
|
||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||
required
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label htmlFor="email" className="flex items-center gap-2 text-slate-200 mb-3">
|
||
<span className="text-amber-400">✉️</span>
|
||
Email Address <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<Input
|
||
id="email"
|
||
type="email"
|
||
placeholder="your-email@example.com"
|
||
value={formData.email}
|
||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Mobile & Age */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<Label htmlFor="mobile" className="flex items-center gap-2 text-slate-200 mb-3">
|
||
<span className="text-amber-400">📱</span>
|
||
Mobile Number <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<Input
|
||
id="mobile"
|
||
type="tel"
|
||
placeholder="+91 98765 43210"
|
||
value={formData.mobile}
|
||
onChange={(e) => setFormData({ ...formData, mobile: e.target.value })}
|
||
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||
required
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label htmlFor="age" className="flex items-center gap-2 text-slate-200 mb-3">
|
||
<span className="text-amber-400">👤</span>
|
||
Age <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<Input
|
||
id="age"
|
||
type="number"
|
||
placeholder="Enter your age"
|
||
value={formData.age}
|
||
onChange={(e) => setFormData({ ...formData, age: e.target.value })}
|
||
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Country, State, District */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div>
|
||
<Label htmlFor="country" className="flex items-center gap-2 text-slate-200 mb-3">
|
||
<span className="text-amber-400">🌍</span>
|
||
Country <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<Select value={formData.country} onValueChange={(value) => setFormData({ ...formData, country: value })}>
|
||
<SelectTrigger className="bg-slate-800/50 border-slate-600/50 text-white focus:border-amber-500/50 focus:ring-amber-500/20">
|
||
<SelectValue placeholder="Select country" />
|
||
</SelectTrigger>
|
||
<SelectContent className="bg-slate-800 border-slate-700 text-white">
|
||
<SelectItem value="india">India</SelectItem>
|
||
<SelectItem value="nepal">Nepal</SelectItem>
|
||
<SelectItem value="bangladesh">Bangladesh</SelectItem>
|
||
<SelectItem value="sri-lanka">Sri Lanka</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div>
|
||
<Label htmlFor="state" className="flex items-center gap-2 text-slate-200 mb-3">
|
||
<span className="text-amber-400">🏛️</span>
|
||
State <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<Select value={formData.state} onValueChange={(value) => setFormData({ ...formData, state: value })}>
|
||
<SelectTrigger className="bg-slate-800/50 border-slate-600/50 text-white focus:border-amber-500/50 focus:ring-amber-500/20">
|
||
<SelectValue placeholder="Select state" />
|
||
</SelectTrigger>
|
||
<SelectContent className="bg-slate-800 border-slate-700 text-white">
|
||
<SelectItem value="maharashtra">Maharashtra</SelectItem>
|
||
<SelectItem value="karnataka">Karnataka</SelectItem>
|
||
<SelectItem value="tamil-nadu">Tamil Nadu</SelectItem>
|
||
<SelectItem value="delhi">Delhi</SelectItem>
|
||
<SelectItem value="rajasthan">Rajasthan</SelectItem>
|
||
<SelectItem value="uttar-pradesh">Uttar Pradesh</SelectItem>
|
||
<SelectItem value="gujarat">Gujarat</SelectItem>
|
||
<SelectItem value="west-bengal">West Bengal</SelectItem>
|
||
<SelectItem value="andhra-pradesh">Andhra Pradesh</SelectItem>
|
||
<SelectItem value="telangana">Telangana</SelectItem>
|
||
<SelectItem value="kerala">Kerala</SelectItem>
|
||
<SelectItem value="punjab">Punjab</SelectItem>
|
||
<SelectItem value="haryana">Haryana</SelectItem>
|
||
<SelectItem value="madhya-pradesh">Madhya Pradesh</SelectItem>
|
||
<SelectItem value="odisha">Odisha</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div>
|
||
<Label htmlFor="district" className="flex items-center gap-2 text-slate-200 mb-3">
|
||
<span className="text-amber-400">📍</span>
|
||
District <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<Input
|
||
id="district"
|
||
placeholder="Enter district"
|
||
value={formData.district}
|
||
onChange={(e) => setFormData({ ...formData, district: e.target.value })}
|
||
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Interested City & Pincode */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<Label htmlFor="interestedCity" className="flex items-center gap-2 text-slate-200 mb-3">
|
||
<span className="text-amber-400">🏙️</span>
|
||
Interested City for Dealership <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<Input
|
||
id="interestedCity"
|
||
placeholder="Enter city name"
|
||
value={formData.interestedCity}
|
||
onChange={(e) => setFormData({ ...formData, interestedCity: e.target.value })}
|
||
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||
required
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label htmlFor="pincode" className="flex items-center gap-2 text-slate-200 mb-3">
|
||
<span className="text-amber-400">📮</span>
|
||
Pincode <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<Input
|
||
id="pincode"
|
||
type="text"
|
||
placeholder="Enter pincode"
|
||
value={formData.pincode}
|
||
onChange={(e) => setFormData({ ...formData, pincode: e.target.value })}
|
||
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Education & Company Name */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<Label htmlFor="education" className="flex items-center gap-2 text-slate-200 mb-3">
|
||
<span className="text-amber-400">🎓</span>
|
||
Education Qualification <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<Select value={formData.education} onValueChange={(value) => setFormData({ ...formData, education: value })}>
|
||
<SelectTrigger className="bg-slate-800/50 border-slate-600/50 text-white focus:border-amber-500/50 focus:ring-amber-500/20">
|
||
<SelectValue placeholder="Select qualification" />
|
||
</SelectTrigger>
|
||
<SelectContent className="bg-slate-800 border-slate-700 text-white">
|
||
<SelectItem value="high-school">High School</SelectItem>
|
||
<SelectItem value="diploma">Diploma</SelectItem>
|
||
<SelectItem value="bachelors">Bachelor's Degree</SelectItem>
|
||
<SelectItem value="masters">Master's Degree</SelectItem>
|
||
<SelectItem value="doctorate">Doctorate</SelectItem>
|
||
<SelectItem value="other">Other</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div>
|
||
<Label htmlFor="companyName" className="flex items-center gap-2 text-slate-200 mb-3">
|
||
<span className="text-amber-400">🏢</span>
|
||
Company Name <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<Input
|
||
id="companyName"
|
||
placeholder="Enter company name"
|
||
value={formData.companyName}
|
||
onChange={(e) => setFormData({ ...formData, companyName: e.target.value })}
|
||
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Source */}
|
||
<div>
|
||
<Label htmlFor="source" className="flex items-center gap-2 text-slate-200 mb-3">
|
||
<span className="text-amber-400">📢</span>
|
||
How did you hear about us? <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<Select value={formData.source} onValueChange={(value) => setFormData({ ...formData, source: value })}>
|
||
<SelectTrigger className="bg-slate-800/50 border-slate-600/50 text-white focus:border-amber-500/50 focus:ring-amber-500/20">
|
||
<SelectValue placeholder="Select source" />
|
||
</SelectTrigger>
|
||
<SelectContent className="bg-slate-800 border-slate-700 text-white">
|
||
<SelectItem value="existing-dealer">Existing RE Dealer</SelectItem>
|
||
<SelectItem value="customer">Customer</SelectItem>
|
||
<SelectItem value="re-employee">RE Employee</SelectItem>
|
||
<SelectItem value="newspaper">Newspaper</SelectItem>
|
||
<SelectItem value="website">Website</SelectItem>
|
||
<SelectItem value="friend">Friend</SelectItem>
|
||
<SelectItem value="other">Other</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
{/* Do you own a Royal Enfield? */}
|
||
<div>
|
||
<Label className="flex items-center gap-2 text-slate-200 mb-4">
|
||
<span className="text-amber-400">🏍️</span>
|
||
Do you own a Royal Enfield? <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<RadioGroup value={formData.ownRoyalEnfield} onValueChange={(value) => setFormData({ ...formData, ownRoyalEnfield: value, royalEnfieldModel: value === 'no' ? '' : formData.royalEnfieldModel })}>
|
||
<div className="flex items-center space-x-8">
|
||
<div className="flex items-center space-x-3">
|
||
<RadioGroupItem value="yes" id="own-yes" className="border-amber-400/60 hover:border-amber-400 data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500/20" />
|
||
<Label htmlFor="own-yes" className="cursor-pointer text-slate-200 hover:text-amber-300">Yes</Label>
|
||
</div>
|
||
<div className="flex items-center space-x-3">
|
||
<RadioGroupItem value="no" id="own-no" className="border-amber-400/60 hover:border-amber-400 data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500/20" />
|
||
<Label htmlFor="no" className="cursor-pointer text-slate-200 hover:text-amber-300">No</Label>
|
||
</div>
|
||
</div>
|
||
</RadioGroup>
|
||
</div>
|
||
|
||
{/* Royal Enfield Model - Conditional */}
|
||
{formData.ownRoyalEnfield === 'yes' && (
|
||
<div className="animate-in fade-in slide-in-from-top-2 duration-300">
|
||
<Label htmlFor="royalEnfieldModel" className="flex items-center gap-2 text-slate-200 mb-3">
|
||
<span className="text-amber-400">🏍️</span>
|
||
Which Royal Enfield model do you own? <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<Select value={formData.royalEnfieldModel} onValueChange={(value) => setFormData({ ...formData, royalEnfieldModel: value })}>
|
||
<SelectTrigger className="bg-slate-800/50 border-slate-600/50 text-white focus:border-amber-500/50 focus:ring-amber-500/20">
|
||
<SelectValue placeholder="Select your bike model" />
|
||
</SelectTrigger>
|
||
<SelectContent className="bg-slate-800 border-slate-700 text-white">
|
||
<SelectItem value="classic-350">Classic 350</SelectItem>
|
||
<SelectItem value="meteor-350">Meteor 350</SelectItem>
|
||
<SelectItem value="hunter-350">Hunter 350</SelectItem>
|
||
<SelectItem value="bullet-350">Bullet 350</SelectItem>
|
||
<SelectItem value="himalayan">Himalayan</SelectItem>
|
||
<SelectItem value="scram-411">Scram 411</SelectItem>
|
||
<SelectItem value="interceptor-650">Interceptor 650</SelectItem>
|
||
<SelectItem value="continental-gt-650">Continental GT 650</SelectItem>
|
||
<SelectItem value="super-meteor-650">Super Meteor 650</SelectItem>
|
||
<SelectItem value="shotgun-650">Shotgun 650</SelectItem>
|
||
<SelectItem value="himalayan-450">Himalayan 450</SelectItem>
|
||
<SelectItem value="other">Other</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
)}
|
||
|
||
{/* Existing Dealer/Vendor */}
|
||
<div>
|
||
<Label className="flex items-center gap-2 text-slate-200 mb-4">
|
||
<span className="text-amber-400">🏪</span>
|
||
Are you an existing dealer/vendor of Royal Enfield? <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<RadioGroup value={formData.existingDealer} onValueChange={(value) => setFormData({ ...formData, existingDealer: value })}>
|
||
<div className="flex items-center space-x-8">
|
||
<div className="flex items-center space-x-3">
|
||
<RadioGroupItem value="yes" id="dealer-yes" className="border-amber-400/60 hover:border-amber-400 data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500/20" />
|
||
<Label htmlFor="dealer-yes" className="cursor-pointer text-slate-200 hover:text-amber-300">Yes</Label>
|
||
</div>
|
||
<div className="flex items-center space-x-3">
|
||
<RadioGroupItem value="no" id="dealer-no" className="border-amber-400/60 hover:border-amber-400 data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500/20" />
|
||
<Label htmlFor="dealer-no" className="cursor-pointer text-slate-200 hover:text-amber-300">No</Label>
|
||
</div>
|
||
</div>
|
||
</RadioGroup>
|
||
</div>
|
||
|
||
{/* Address */}
|
||
<div>
|
||
<Label htmlFor="address" className="flex items-center gap-2 text-slate-200 mb-3">
|
||
<span className="text-amber-400">🏠</span>
|
||
Address <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<Textarea
|
||
id="address"
|
||
placeholder="Enter your complete address including landmarks"
|
||
value={formData.address}
|
||
onChange={(e) => setFormData({ ...formData, address: e.target.value })}
|
||
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||
rows={3}
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
{/* Description */}
|
||
<div>
|
||
<Label htmlFor="description" className="flex items-center gap-2 text-slate-200 mb-3">
|
||
<span className="text-amber-400">📝</span>
|
||
Description <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<Textarea
|
||
id="description"
|
||
placeholder="Tell us about your business background, experience, and why you want to become a Royal Enfield dealer..."
|
||
value={formData.description}
|
||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||
rows={5}
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
{/* Terms and Conditions */}
|
||
<div className="flex items-start space-x-3 bg-slate-800/30 p-5 rounded-xl border border-slate-700/50">
|
||
<Checkbox
|
||
id="terms"
|
||
checked={formData.acceptTerms}
|
||
onCheckedChange={(checked) => setFormData({ ...formData, acceptTerms: checked as boolean })}
|
||
className="border-slate-600 data-[state=checked]:bg-amber-500 data-[state=checked]:border-amber-500 mt-0.5"
|
||
/>
|
||
<div className="flex-1">
|
||
<Label htmlFor="terms" className="cursor-pointer text-slate-200">
|
||
I accept the terms and conditions <span className="text-amber-500">*</span>
|
||
</Label>
|
||
<p className="text-slate-400 text-xs mt-2 leading-relaxed">
|
||
By submitting this form, you agree to our privacy policy and terms of service.
|
||
We will use your information to process your dealership application.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Submit Button */}
|
||
<Button
|
||
type="submit"
|
||
className="w-full bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-600 hover:to-orange-700 text-white py-6 text-lg shadow-xl shadow-amber-500/20 hover:shadow-2xl hover:shadow-amber-500/30 transition-all duration-300"
|
||
>
|
||
Submit Application
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<footer className="bg-black/90 backdrop-blur-md border-t border-slate-800 py-16">
|
||
<div className="max-w-7xl mx-auto px-6">
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
|
||
{/* About Section */}
|
||
<div>
|
||
<div className="w-12 h-12 bg-gradient-to-br from-amber-500 to-orange-600 rounded-lg flex items-center justify-center shadow-lg mb-6">
|
||
<span className="text-white text-xl">RE</span>
|
||
</div>
|
||
<p className="text-slate-400 text-sm leading-relaxed mb-4">
|
||
Since 1901, Royal Enfield has been the world's oldest motorcycle brand in continuous production,
|
||
creating timeless motorcycles that define the pure motorcycling experience.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Quick Links */}
|
||
<div>
|
||
<h3 className="text-white mb-6">Quick Links</h3>
|
||
<ul className="space-y-3 text-sm">
|
||
<li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">About Royal Enfield</a></li>
|
||
<li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Our Motorcycles</a></li>
|
||
<li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Service & Support</a></li>
|
||
<li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Contact Us</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Dealership & Contact */}
|
||
<div>
|
||
<h3 className="text-white mb-6">Dealership Support</h3>
|
||
<ul className="space-y-3 text-sm mb-8">
|
||
<li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Application Process</a></li>
|
||
<li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Partnership Requirements</a></li>
|
||
<li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Training & Support</a></li>
|
||
<li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">FAQs</a></li>
|
||
</ul>
|
||
<div className="space-y-2 text-sm">
|
||
<p className="text-slate-400">Email: <span className="text-amber-400">dealership@royalenfield.com</span></p>
|
||
<p className="text-slate-400">Phone: <span className="text-amber-400">+91 1800-123-7567</span></p>
|
||
<p className="text-slate-500">Mon-Fri, 9:00 AM - 6:00 PM IST</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="border-t border-slate-800 mt-12 pt-8 text-center">
|
||
<p className="text-slate-500 text-sm">
|
||
© 2024 Royal Enfield. All rights reserved. | Made like a gun, goes like a bullet.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
);
|
||
}
|