mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-27 00:52:50 +00:00
Updated booking widget
This commit is contained in:
Roba Boru
@@ -169,14 +169,18 @@ function StationModal({
|
||||
function PassengerModal({
|
||||
adultCount,
|
||||
childCount,
|
||||
nationality,
|
||||
onChangeAdult,
|
||||
onChangeChild,
|
||||
onChangeNationality,
|
||||
onClose,
|
||||
}: {
|
||||
adultCount: number;
|
||||
childCount: number;
|
||||
nationality: string;
|
||||
onChangeAdult: (n: number) => void;
|
||||
onChangeChild: (n: number) => void;
|
||||
onChangeNationality: (v: string) => void;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const rows = [
|
||||
@@ -184,30 +188,31 @@ function PassengerModal({
|
||||
{ label: 'Children', sub: '< 5 years • First child free', val: childCount, min: 0, max: 9, onChange: onChangeChild },
|
||||
];
|
||||
|
||||
const natOptions = [
|
||||
{ value: 'ETHIOPIAN', label: '🇪🇹 Ethiopian' },
|
||||
{ value: 'DJIBOUTIAN', label: '🇩🇯 Djiboutian' },
|
||||
{ value: 'OTHER', label: '🌍 Other' },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div className="fixed inset-0 z-[99] bg-black/40" onClick={onClose} />
|
||||
{/* Bottom sheet */}
|
||||
<div
|
||||
className="fixed inset-x-0 bottom-0 z-[100] bg-white dark:bg-gray-900 rounded-t-2xl shadow-2xl"
|
||||
className="fixed inset-x-0 bottom-0 sm:inset-auto sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 z-[100] bg-white dark:bg-gray-900 rounded-t-2xl sm:rounded-2xl shadow-2xl w-full sm:w-96"
|
||||
style={{ animation: 'pax-slide-up 0.25s cubic-bezier(0.32,0.72,0,1)' }}
|
||||
>
|
||||
{/* Handle */}
|
||||
<div className="flex justify-center pt-3 pb-1">
|
||||
<div className="w-10 h-1 rounded-full bg-gray-300 dark:bg-gray-600" />
|
||||
</div>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 py-3 border-b border-gray-100 dark:border-gray-800">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="w-4 h-4 text-primary" />
|
||||
<h2 className="text-base font-bold text-gray-900 dark:text-white">Passengers</h2>
|
||||
<h2 className="text-base font-bold text-gray-900 dark:text-white">Passengers & Nationality</h2>
|
||||
</div>
|
||||
<button type="button" onClick={onClose} className="w-9 h-9 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
|
||||
<button type="button" onClick={onClose} className="w-9 h-9 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-800">
|
||||
<X className="w-5 h-5 text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
{/* Rows */}
|
||||
<div className="px-5 py-4 space-y-5">
|
||||
{rows.map(({ label, sub, val, min, max, onChange }, i) => (
|
||||
<div key={label}>
|
||||
@@ -218,35 +223,38 @@ function PassengerModal({
|
||||
<p className="text-xs text-gray-400 mt-0.5">{sub}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => val > min && onChange(val - 1)}
|
||||
disabled={val <= min}
|
||||
className="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-700 flex items-center justify-center hover:border-primary hover:text-primary transition-colors disabled:opacity-30"
|
||||
>
|
||||
<button type="button" onClick={() => val > min && onChange(val - 1)} disabled={val <= min}
|
||||
className="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-700 flex items-center justify-center hover:border-primary hover:text-primary disabled:opacity-30">
|
||||
<Minus className="w-4 h-4" />
|
||||
</button>
|
||||
<span className="w-6 text-center text-lg font-bold text-gray-900 dark:text-white tabular-nums">{val}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => val < max && onChange(val + 1)}
|
||||
disabled={val >= max}
|
||||
className="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-700 flex items-center justify-center hover:border-primary hover:text-primary transition-colors disabled:opacity-30"
|
||||
>
|
||||
<button type="button" onClick={() => val < max && onChange(val + 1)} disabled={val >= max}
|
||||
className="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-700 flex items-center justify-center hover:border-primary hover:text-primary disabled:opacity-30">
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="border-t border-gray-100 dark:border-gray-800 -mx-5 pt-5 px-5">
|
||||
<p className="text-sm font-semibold text-gray-900 dark:text-white mb-3">Nationality</p>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{natOptions.map((opt) => (
|
||||
<button key={opt.value} type="button" onClick={() => onChangeNationality(opt.value)}
|
||||
className={`py-2.5 px-2 rounded-xl border-2 text-xs font-semibold transition-all ${
|
||||
nationality === opt.value
|
||||
? 'border-primary bg-primary/5 text-primary'
|
||||
: 'border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:border-gray-300'
|
||||
}`}>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Done */}
|
||||
<div className="px-5 pb-8 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="w-full py-3.5 bg-[rgb(20,113,76)] text-white font-bold text-sm rounded-xl"
|
||||
>
|
||||
<button type="button" onClick={onClose}
|
||||
className="w-full py-3.5 bg-[rgb(20,113,76)] text-white font-bold text-sm rounded-xl">
|
||||
Done — {adultCount + childCount} Passenger{adultCount + childCount !== 1 ? 's' : ''}
|
||||
</button>
|
||||
</div>
|
||||
@@ -265,6 +273,7 @@ function StationDropdown({
|
||||
onSelect,
|
||||
error,
|
||||
recentIds,
|
||||
onOpen,
|
||||
}: {
|
||||
stations: Station[];
|
||||
value: string;
|
||||
@@ -273,6 +282,7 @@ function StationDropdown({
|
||||
onSelect: (s: Station) => void;
|
||||
error?: string;
|
||||
recentIds: string[];
|
||||
onOpen?: () => void;
|
||||
}) {
|
||||
const [query, setQuery] = useState('');
|
||||
const [open, setOpen] = useState(false);
|
||||
@@ -315,7 +325,7 @@ function StationDropdown({
|
||||
ref={inputRef}
|
||||
value={displayValue}
|
||||
onChange={(e) => { setQuery(e.target.value); setOpen(true); }}
|
||||
onFocus={() => { setQuery(''); setOpen(true); }}
|
||||
onFocus={() => { setQuery(''); setOpen(true); onOpen?.(); }}
|
||||
placeholder={placeholder}
|
||||
className="w-full pl-10 pr-8 py-3.5 bg-transparent rounded-xl focus:outline-none text-sm text-gray-900 dark:text-white placeholder-gray-400"
|
||||
/>
|
||||
@@ -331,7 +341,7 @@ function StationDropdown({
|
||||
</div>
|
||||
|
||||
{open && (
|
||||
<div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-xl z-50 max-h-56 overflow-y-auto overflow-x-hidden scrollbar-hide">
|
||||
<div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-xl z-[200] max-h-56 overflow-y-auto overflow-x-hidden scrollbar-hide">
|
||||
{!query && recentIds.length > 0 && (
|
||||
<div className="px-3 pt-2 pb-1">
|
||||
<p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wide mb-1">Recent</p>
|
||||
@@ -395,6 +405,16 @@ export default function SearchPage() {
|
||||
try { return JSON.parse(localStorage.getItem('edr_recent_stations') || '[]'); } catch { return []; }
|
||||
});
|
||||
const passengerRef = useRef<HTMLDivElement>(null);
|
||||
const widgetRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const scrollWidgetIntoView = () => {
|
||||
const el = widgetRef.current;
|
||||
if (!el) return;
|
||||
const headerHeight = 64;
|
||||
const marginTop = 24;
|
||||
const top = el.getBoundingClientRect().top + window.scrollY - headerHeight - marginTop;
|
||||
window.scrollTo({ top, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const { data: stations = [], isLoading, error } = useQuery<Station[]>({
|
||||
queryKey: ['stations'],
|
||||
@@ -517,14 +537,16 @@ export default function SearchPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<div className="bg-gray-50 dark:bg-gray-950">
|
||||
{/* Passenger modal (mobile) */}
|
||||
{passengerModalOpen && (
|
||||
<PassengerModal
|
||||
adultCount={adultCount || 1}
|
||||
childCount={childCount || 0}
|
||||
nationality={watch('nationality')}
|
||||
onChangeAdult={(n) => setValue('adultCount', n)}
|
||||
onChangeChild={(n) => setValue('childCount', n)}
|
||||
onChangeNationality={(v) => setValue('nationality', v as any)}
|
||||
onClose={() => setPassengerModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
@@ -557,299 +579,219 @@ export default function SearchPage() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Hero Banner */}
|
||||
<div className="relative bg-gradient-to-br from-[rgb(14,80,54)] via-[rgb(20,113,76)] to-[rgb(16,140,90)] overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute top-4 right-8 w-32 h-32 border-2 border-white rounded-full" />
|
||||
<div className="absolute top-12 right-20 w-20 h-20 border border-white rounded-full" />
|
||||
<div className="absolute -bottom-6 left-10 w-40 h-40 border border-white rounded-full" />
|
||||
{/* ── 90vh hero with banner image ── */}
|
||||
<section
|
||||
className="relative"
|
||||
style={{ height: '90vh', minHeight: '560px' }}
|
||||
>
|
||||
{/* Background image */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
style={{ backgroundImage: 'url(/banner.jpg)' }}
|
||||
/>
|
||||
{/* Gradient overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-black/70 via-black/40 to-transparent" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
|
||||
|
||||
{/* Hero headline — top area */}
|
||||
<div className="relative z-10 pt-16 md:pt-20 px-6 md:px-12 max-w-6xl mx-auto">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white leading-tight drop-shadow-lg max-w-2xl">
|
||||
Where are you<br className="hidden sm:block" /> headed today?
|
||||
</h1>
|
||||
<p className="text-white/60 text-sm md:text-base mt-3">Book your train journey across East Africa</p>
|
||||
</div>
|
||||
<div className="container mx-auto px-4 pt-8 pb-20 md:pt-10 md:pb-24 relative z-10">
|
||||
|
||||
{/* ── Widget — absolutely positioned at bottom with margin ── */}
|
||||
<div className="absolute bottom-8 left-0 right-0 z-[50] px-4 md:px-6" ref={widgetRef}>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
|
||||
Where are you headed?
|
||||
</h1>
|
||||
<p className="text-white/70 text-sm md:text-base mt-2">Search and book train tickets fast & easy</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl border border-white/20 overflow-visible">
|
||||
|
||||
{/* Search Card — pulled up over the hero */}
|
||||
<div className="container mx-auto px-4 -mt-14 relative z-20 pb-8">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl border border-gray-100 dark:border-gray-800 overflow-visible">
|
||||
|
||||
{/* Error banner */}
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 px-5 py-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-sm border-b border-red-100 dark:border-red-900/30 rounded-t-2xl">
|
||||
<span>⚠️</span>
|
||||
<span>Unable to load stations. Please check your connection.</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-5 md:p-6 space-y-3">
|
||||
|
||||
{/* ── Row 1 (mobile stacked): Stations + Date ── */}
|
||||
|
||||
{/* Mobile station fields */}
|
||||
<div className="flex flex-col gap-3 md:hidden">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">From</label>
|
||||
<button type="button" onClick={() => setStationModal('origin')} className="w-full">
|
||||
<div className={`flex items-center gap-2.5 px-3.5 py-3.5 border-2 rounded-xl transition-all ${
|
||||
errors.originStationId ? 'border-red-400' : originId ? 'border-primary bg-primary/5' : 'border-gray-200 dark:border-gray-700'
|
||||
}`}>
|
||||
<MapPin className="w-4 h-4 text-primary flex-shrink-0" />
|
||||
<span className={`text-sm ${originStation ? 'font-semibold text-gray-900 dark:text-white' : 'text-gray-400'}`}>
|
||||
{originStation?.name ?? 'Select departure'}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
{errors.originStationId && <p className="text-xs text-red-500">{errors.originStationId.message}</p>}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">To</label>
|
||||
<button type="button" onClick={handleSwap} disabled={!originId || !destId} className="flex items-center gap-1 text-xs text-primary font-medium disabled:opacity-30">
|
||||
<ArrowLeftRight className={`w-3.5 h-3.5 transition-transform duration-300 ${swapping ? 'rotate-180' : ''}`} />
|
||||
Swap
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" onClick={() => setStationModal('destination')} className="w-full">
|
||||
<div className={`flex items-center gap-2.5 px-3.5 py-3.5 border-2 rounded-xl transition-all ${
|
||||
errors.destinationStationId ? 'border-red-400' : destId ? 'border-primary bg-primary/5' : 'border-gray-200 dark:border-gray-700'
|
||||
}`}>
|
||||
<MapPin className="w-4 h-4 text-primary flex-shrink-0" />
|
||||
<span className={`text-sm ${destStation ? 'font-semibold text-gray-900 dark:text-white' : 'text-gray-400'}`}>
|
||||
{destStation?.name ?? 'Select destination'}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
{errors.destinationStationId && <p className="text-xs text-red-500">{errors.destinationStationId.message}</p>}
|
||||
</div>
|
||||
{/* Date (mobile) */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Departure Date</label>
|
||||
<div className="relative z-30">
|
||||
<ModernDatePicker
|
||||
value={departureDate ? new Date(departureDate + 'T00:00:00') : undefined}
|
||||
onChange={(date) => setValue('departureDate', `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`)}
|
||||
minDate={new Date()}
|
||||
placeholder="Select date"
|
||||
/>
|
||||
</div>
|
||||
{errors.departureDate && <p className="text-xs text-red-500">{errors.departureDate.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Row 1: From [swap] To + Date (3 equal cols) */}
|
||||
<div className="hidden md:grid md:grid-cols-3 gap-3 items-end">
|
||||
{/* From + To with swap */}
|
||||
<div className="col-span-2 flex items-end gap-2">
|
||||
<div className="flex-1 space-y-1.5">
|
||||
<label className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">From</label>
|
||||
<StationDropdown stations={stations} value={originId} excludeId={destId} placeholder="Select departure" recentIds={recentStationIds} onSelect={(s) => { setValue('originStationId', s.id); if (s.id) saveRecent(s.id); }} error={errors.originStationId?.message} />
|
||||
{errors.originStationId && <p className="text-xs text-red-500">{errors.originStationId.message}</p>}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSwap}
|
||||
disabled={!originId || !destId}
|
||||
className={`flex-shrink-0 mb-0.5 w-9 h-9 bg-gray-50 dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700 rounded-full flex items-center justify-center hover:border-primary hover:bg-primary/5 transition-all duration-200 disabled:opacity-30 ${swapping ? 'rotate-180' : ''}`}
|
||||
title="Swap stations"
|
||||
>
|
||||
<ArrowLeftRight className="w-4 h-4 text-gray-500" />
|
||||
</button>
|
||||
<div className="flex-1 space-y-1.5">
|
||||
<label className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">To</label>
|
||||
<StationDropdown stations={stations} value={destId} excludeId={originId} placeholder="Select destination" recentIds={recentStationIds} onSelect={(s) => { setValue('destinationStationId', s.id); if (s.id) saveRecent(s.id); }} error={errors.destinationStationId?.message} />
|
||||
{errors.destinationStationId && <p className="text-xs text-red-500">{errors.destinationStationId.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
{/* Date */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Departure Date</label>
|
||||
<div className="relative z-30">
|
||||
<ModernDatePicker
|
||||
value={departureDate ? new Date(departureDate + 'T00:00:00') : undefined}
|
||||
onChange={(date) => setValue('departureDate', `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`)}
|
||||
minDate={new Date()}
|
||||
placeholder="Select date"
|
||||
/>
|
||||
</div>
|
||||
{errors.departureDate && <p className="text-xs text-red-500">{errors.departureDate.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Route preview pill */}
|
||||
{originStation && destStation && (
|
||||
<div className="flex items-center gap-2 px-3 py-2 bg-primary/5 dark:bg-primary/10 rounded-lg text-xs text-primary font-medium animate-bounce-in">
|
||||
<Train className="w-3.5 h-3.5" />
|
||||
<span>{originStation.name}</span>
|
||||
<ArrowRight className="w-3 h-3" />
|
||||
<span>{destStation.name}</span>
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 px-5 py-3 bg-red-50 text-red-600 text-sm border-b border-red-100 rounded-t-2xl">
|
||||
<span>⚠️</span>
|
||||
<span>Unable to load stations. Please check your connection.</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Row 2: Passengers | Nationality | Search Button ── */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 items-end">
|
||||
<div className="p-4 md:p-5">
|
||||
|
||||
{/* Passengers */}
|
||||
<div className="space-y-1.5" ref={passengerRef}>
|
||||
<label className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Passengers</label>
|
||||
|
||||
{/* Mobile: opens bottom-sheet modal */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPassengerModalOpen(true)}
|
||||
className="sm:hidden w-full flex items-center justify-between px-3.5 py-3.5 border-2 border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800"
|
||||
>
|
||||
<span className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
{/* Mobile: stacked */}
|
||||
<div className="flex flex-col gap-3 md:hidden">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">From</label>
|
||||
<button type="button" onClick={() => { window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior }); setStationModal('origin'); }} className="w-full">
|
||||
<div className={`flex items-center gap-2.5 px-3.5 py-3 border-2 rounded-xl transition-all ${
|
||||
errors.originStationId ? 'border-red-400' : originId ? 'border-primary bg-primary/5' : 'border-gray-200'
|
||||
}`}>
|
||||
<MapPin className="w-4 h-4 text-primary flex-shrink-0" />
|
||||
<span className={`text-sm ${originStation ? 'font-semibold text-gray-900' : 'text-gray-400'}`}>
|
||||
{originStation?.name ?? 'Select departure'}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">To</label>
|
||||
<button type="button" onClick={handleSwap} disabled={!originId || !destId}
|
||||
className="flex items-center gap-1 text-xs text-primary font-medium disabled:opacity-30">
|
||||
<ArrowLeftRight className={`w-3.5 h-3.5 transition-transform duration-300 ${swapping ? 'rotate-180' : ''}`} />
|
||||
Swap
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" onClick={() => { window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior }); setStationModal('destination'); }} className="w-full">
|
||||
<div className={`flex items-center gap-2.5 px-3.5 py-3 border-2 rounded-xl transition-all ${
|
||||
errors.destinationStationId ? 'border-red-400' : destId ? 'border-primary bg-primary/5' : 'border-gray-200'
|
||||
}`}>
|
||||
<MapPin className="w-4 h-4 text-primary flex-shrink-0" />
|
||||
<span className={`text-sm ${destStation ? 'font-semibold text-gray-900' : 'text-gray-400'}`}>
|
||||
{destStation?.name ?? 'Select destination'}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">Date</label>
|
||||
<div className="relative z-30">
|
||||
<ModernDatePicker
|
||||
value={departureDate ? new Date(departureDate + 'T00:00:00') : undefined}
|
||||
onChange={(date) => setValue('departureDate', `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`)}
|
||||
minDate={new Date()} placeholder="Select date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Pax + Nationality combined trigger */}
|
||||
<button type="button" onClick={() => setPassengerModalOpen(true)}
|
||||
className="w-full flex items-center justify-between px-3.5 py-3 border-2 border-gray-200 rounded-xl bg-white">
|
||||
<span className="flex items-center gap-2 text-sm font-medium text-gray-900">
|
||||
<Users className="w-4 h-4 text-primary" />
|
||||
{totalPassengers} Passenger{totalPassengers !== 1 ? 's' : ''}
|
||||
{childCount > 0 && <span className="text-xs bg-primary/10 text-primary px-1.5 py-0.5 rounded-md">{childCount} child</span>}
|
||||
{totalPassengers} Pax · {watch('nationality') === 'ETHIOPIAN' ? '🇪🇹' : watch('nationality') === 'DJIBOUTIAN' ? '🇩🇯' : '🌍'}
|
||||
</span>
|
||||
<ChevronDown className="w-4 h-4 text-primary" />
|
||||
</button>
|
||||
|
||||
{/* sm+: inline dropdown */}
|
||||
<div className="hidden sm:block relative z-20">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsPassengerOpen(!isPassengerOpen)}
|
||||
className={`w-full flex items-center justify-between px-3.5 py-3.5 border-2 rounded-xl transition-all duration-200 bg-white dark:bg-gray-800 ${
|
||||
isPassengerOpen ? 'border-primary ring-2 ring-primary/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
<Users className="w-4 h-4 text-primary" />
|
||||
{totalPassengers} Pax
|
||||
{childCount > 0 && <span className="text-xs bg-primary/10 text-primary px-1.5 py-0.5 rounded-md">{childCount} child</span>}
|
||||
</span>
|
||||
<ChevronDown className={`w-4 h-4 text-primary transition-transform duration-200 ${isPassengerOpen ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
{isPassengerOpen && (
|
||||
<div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-xl z-50 p-4 space-y-4">
|
||||
{[
|
||||
{ label: 'Adults', sub: '≥ 5 years', key: 'adultCount' as const, val: adultCount || 1, min: 1, max: 9 },
|
||||
{ label: 'Children', sub: '< 5 years • First free', key: 'childCount' as const, val: childCount || 0, min: 0, max: 9 },
|
||||
].map(({ label, sub, key, val, min, max }, i) => (
|
||||
<div key={key}>
|
||||
{i > 0 && <div className="border-t border-gray-100 dark:border-gray-700 -mx-4 mb-4" />}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-gray-900 dark:text-white">{label}</p>
|
||||
<p className="text-xs text-gray-400 mt-0.5">{sub}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button type="button" onClick={() => val > min && setValue(key, val - 1)} disabled={val <= min} className="w-8 h-8 rounded-full border-2 border-gray-200 dark:border-gray-600 flex items-center justify-center hover:border-primary hover:text-primary transition-colors disabled:opacity-30"><Minus className="w-3.5 h-3.5" /></button>
|
||||
<span className="w-6 text-center font-bold text-gray-900 dark:text-white tabular-nums">{val}</span>
|
||||
<button type="button" onClick={() => val < max && setValue(key, val + 1)} disabled={val >= max} className="w-8 h-8 rounded-full border-2 border-gray-200 dark:border-gray-600 flex items-center justify-center hover:border-primary hover:text-primary transition-colors disabled:opacity-30"><Plus className="w-3.5 h-3.5" /></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<button type="button" onClick={() => setIsPassengerOpen(false)} className="w-full py-2.5 bg-primary text-white text-sm font-semibold rounded-lg">Done</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nationality */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Nationality</label>
|
||||
<select
|
||||
{...register('nationality')}
|
||||
className="w-full px-3.5 py-3.5 border-2 border-gray-200 dark:border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white transition-all"
|
||||
>
|
||||
<option value="ETHIOPIAN">🇪🇹 Ethiopian</option>
|
||||
<option value="DJIBOUTIAN">🇩🇯 Djiboutian</option>
|
||||
<option value="OTHER">🌍 Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Search Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full flex items-center justify-center gap-2.5 py-3.5 bg-[rgb(20,113,76)] hover:bg-[rgb(16,89,60)] text-white font-bold text-sm rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Search className="w-5 h-5" />
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ── Promo Code (collapsed by default) ── */}
|
||||
<div>
|
||||
{!promoVisible ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPromoVisible(true)}
|
||||
className="flex items-center gap-1.5 text-xs text-primary font-medium hover:underline transition-colors"
|
||||
>
|
||||
<Gift className="w-3.5 h-3.5" />
|
||||
Apply Promo Code
|
||||
<button type="submit" disabled={isLoading}
|
||||
className="w-full flex items-center justify-center gap-2 py-3.5 bg-[rgb(20,113,76)] hover:bg-[rgb(16,89,60)] text-white font-bold text-sm rounded-xl transition-all shadow-lg disabled:opacity-50">
|
||||
<Search className="w-5 h-5" />
|
||||
Search
|
||||
</button>
|
||||
) : (
|
||||
<div className="flex flex-col gap-1.5 animate-bounce-in">
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1 relative">
|
||||
<Gift className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-primary" />
|
||||
<input
|
||||
type="text"
|
||||
value={promoCode}
|
||||
onChange={(e) => { setPromoCode(e.target.value.toUpperCase()); if (promoValidation) setPromoValidation(null); }}
|
||||
placeholder="Enter promo code"
|
||||
onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), handleValidatePromo())}
|
||||
className="w-full pl-9 pr-3 py-2.5 border-2 border-gray-200 dark:border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 transition-all"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleValidatePromo}
|
||||
disabled={!promoCode || promoLoading}
|
||||
className="px-4 py-2.5 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors disabled:opacity-40 text-sm font-semibold"
|
||||
>
|
||||
{promoLoading ? '...' : 'Apply'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setPromoVisible(false); setPromoCode(''); setPromoValidation(null); }}
|
||||
className="p-2.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
{promoValidation && (
|
||||
<div className={`flex items-center gap-1.5 text-xs ${promoValidation.valid ? 'text-green-600' : 'text-red-500'}`}>
|
||||
{promoValidation.valid && <Check className="w-3.5 h-3.5" />}
|
||||
{promoValidation.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Desktop: single row — From [swap] To | Date | Pax+Nat | Search */}
|
||||
<div className="hidden md:flex items-end gap-2">
|
||||
{/* From */}
|
||||
<div className="flex-1 min-w-0 space-y-1">
|
||||
<label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">From</label>
|
||||
<StationDropdown stations={stations} value={originId} excludeId={destId} placeholder="Departure station"
|
||||
recentIds={recentStationIds} onSelect={(s) => { setValue('originStationId', s.id); if (s.id) saveRecent(s.id); }} error={errors.originStationId?.message} onOpen={scrollWidgetIntoView} />
|
||||
{errors.originStationId && <p className="text-xs text-red-500">{errors.originStationId.message}</p>}
|
||||
</div>
|
||||
)}
|
||||
{/* Swap */}
|
||||
<button type="button" onClick={handleSwap} disabled={!originId || !destId}
|
||||
className={`flex-shrink-0 mb-0.5 w-9 h-9 bg-gray-50 border-2 border-gray-200 rounded-full flex items-center justify-center hover:border-primary hover:bg-primary/5 transition-all disabled:opacity-30 ${swapping ? 'rotate-180' : ''}`}>
|
||||
<ArrowLeftRight className="w-4 h-4 text-gray-500" />
|
||||
</button>
|
||||
{/* To */}
|
||||
<div className="flex-1 min-w-0 space-y-1">
|
||||
<label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">To</label>
|
||||
<StationDropdown stations={stations} value={destId} excludeId={originId} placeholder="Destination station"
|
||||
recentIds={recentStationIds} onSelect={(s) => { setValue('destinationStationId', s.id); if (s.id) saveRecent(s.id); }} error={errors.destinationStationId?.message} onOpen={scrollWidgetIntoView} />
|
||||
{errors.destinationStationId && <p className="text-xs text-red-500">{errors.destinationStationId.message}</p>}
|
||||
</div>
|
||||
{/* Divider */}
|
||||
<div className="w-px h-10 bg-gray-200 mb-0.5 flex-shrink-0" />
|
||||
{/* Date */}
|
||||
<div className="w-44 flex-shrink-0 space-y-1">
|
||||
<label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">Date</label>
|
||||
<div className="relative z-30">
|
||||
<ModernDatePicker
|
||||
value={departureDate ? new Date(departureDate + 'T00:00:00') : undefined}
|
||||
onChange={(date) => setValue('departureDate', `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`)}
|
||||
minDate={new Date()} placeholder="Select date"
|
||||
/>
|
||||
</div>
|
||||
{errors.departureDate && <p className="text-xs text-red-500">{errors.departureDate.message}</p>}
|
||||
</div>
|
||||
{/* Divider */}
|
||||
<div className="w-px h-10 bg-gray-200 mb-0.5 flex-shrink-0" />
|
||||
{/* Pax + Nationality combined — opens shared modal */}
|
||||
<div className="w-44 flex-shrink-0 space-y-1">
|
||||
<label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">Passengers</label>
|
||||
<button type="button" onClick={() => setPassengerModalOpen(true)}
|
||||
className="w-full flex items-center justify-between px-3 py-3.5 border-2 border-gray-200 rounded-xl bg-white hover:border-gray-300 transition-all">
|
||||
<span className="flex items-center gap-1.5 text-sm font-medium text-gray-900 truncate">
|
||||
<Users className="w-4 h-4 text-primary flex-shrink-0" />
|
||||
{totalPassengers} Pax · {watch('nationality') === 'ETHIOPIAN' ? '🇪🇹' : watch('nationality') === 'DJIBOUTIAN' ? '🇩🇯' : '🌍'}
|
||||
</span>
|
||||
<ChevronDown className="w-4 h-4 text-primary flex-shrink-0" />
|
||||
</button>
|
||||
</div>
|
||||
{/* Search */}
|
||||
<button type="submit" disabled={isLoading}
|
||||
className="flex-shrink-0 flex items-center justify-center gap-2 px-5 py-3.5 bg-[rgb(20,113,76)] hover:bg-[rgb(16,89,60)] text-white font-bold text-sm rounded-xl transition-all shadow-lg hover:shadow-xl disabled:opacity-50">
|
||||
<Search className="w-5 h-5" />
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Promo */}
|
||||
<div className="mt-3">
|
||||
{!promoVisible ? (
|
||||
<button type="button" onClick={() => setPromoVisible(true)}
|
||||
className="flex items-center gap-1.5 text-xs text-primary font-medium hover:underline">
|
||||
<Gift className="w-3.5 h-3.5" />
|
||||
Apply Promo Code
|
||||
</button>
|
||||
) : (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1 relative">
|
||||
<Gift className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-primary" />
|
||||
<input type="text" value={promoCode}
|
||||
onChange={(e) => { setPromoCode(e.target.value.toUpperCase()); if (promoValidation) setPromoValidation(null); }}
|
||||
placeholder="Enter promo code"
|
||||
onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), handleValidatePromo())}
|
||||
className="w-full pl-9 pr-3 py-2.5 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 text-sm bg-white placeholder-gray-400"
|
||||
autoFocus />
|
||||
</div>
|
||||
<button type="button" onClick={handleValidatePromo} disabled={!promoCode || promoLoading}
|
||||
className="px-4 py-2.5 bg-gray-100 text-gray-700 rounded-xl hover:bg-gray-200 disabled:opacity-40 text-sm font-semibold">
|
||||
{promoLoading ? '...' : 'Apply'}
|
||||
</button>
|
||||
<button type="button" onClick={() => { setPromoVisible(false); setPromoCode(''); setPromoValidation(null); }}
|
||||
className="p-2.5 text-gray-400 hover:text-gray-600 rounded-xl hover:bg-gray-100">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
{promoValidation && (
|
||||
<div className={`flex items-center gap-1.5 text-xs ${promoValidation.valid ? 'text-green-600' : 'text-red-500'}`}>
|
||||
{promoValidation.valid && <Check className="w-3.5 h-3.5" />}
|
||||
{promoValidation.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Popular Routes ── */}
|
||||
<div className="mt-8">
|
||||
{/* Popular Routes — below hero */}
|
||||
<div className="bg-gray-50 dark:bg-gray-950 py-10">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Zap className="w-4 h-4 text-primary" />
|
||||
<h2 className="text-base font-bold text-gray-900 dark:text-white">Popular Routes</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
{POPULAR_ROUTES.map((route, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
type="button"
|
||||
onClick={() => handlePopularRoute(route.from, route.to)}
|
||||
className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl p-4 hover:border-primary hover:shadow-md transition-all text-left group active:scale-95"
|
||||
>
|
||||
<button key={idx} type="button" onClick={() => handlePopularRoute(route.from, route.to)}
|
||||
className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl p-4 hover:border-primary hover:shadow-md transition-all text-left active:scale-95">
|
||||
<div className="text-xl mb-2">{route.icon}</div>
|
||||
<div className="flex items-center gap-1.5 text-sm font-semibold text-gray-900 dark:text-white">
|
||||
<span>{route.from}</span>
|
||||
@@ -867,14 +809,92 @@ export default function SearchPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Promotions Section */}
|
||||
<div className="bg-white dark:bg-gray-900 py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<span className="text-lg">🎁</span>
|
||||
<h2 className="text-base font-bold text-gray-900 dark:text-white">Offers & Promotions</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||||
|
||||
{/* Wide promo card */}
|
||||
<div className="md:col-span-2 relative rounded-2xl overflow-hidden min-h-[220px] group cursor-pointer">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[rgb(14,80,54)] to-[rgb(20,140,90)]" />
|
||||
<div className="absolute inset-0 opacity-10" style={{
|
||||
backgroundImage: 'repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,0.3) 20px, rgba(255,255,255,0.3) 21px)'
|
||||
}} />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/30 to-transparent" />
|
||||
<div className="relative z-10 p-7 flex flex-col justify-between h-full min-h-[220px]">
|
||||
<div>
|
||||
<span className="inline-block px-3 py-1 bg-white/20 text-white text-xs font-semibold rounded-full mb-3 backdrop-blur-sm">
|
||||
Limited Time
|
||||
</span>
|
||||
<h3 className="text-2xl font-extrabold text-white leading-tight mb-2">
|
||||
20% Off Weekend<br />Travel
|
||||
</h3>
|
||||
<p className="text-white/70 text-sm max-w-xs">
|
||||
Book any weekend journey and save 20%. Valid for all seat classes.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
<span className="text-white/60 text-xs">Valid until 31 Dec 2024</span>
|
||||
<span className="flex items-center gap-1.5 text-white text-sm font-semibold group-hover:gap-3 transition-all">
|
||||
Book now <ArrowRight className="w-4 h-4" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Narrow promo cards */}
|
||||
<div className="flex flex-col gap-5">
|
||||
<div className="relative rounded-2xl overflow-hidden min-h-[100px] group cursor-pointer">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-amber-500 to-orange-600" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/20 to-transparent" />
|
||||
<div className="relative z-10 p-5 flex flex-col justify-between h-full min-h-[100px]">
|
||||
<div>
|
||||
<span className="inline-block px-2.5 py-0.5 bg-white/25 text-white text-xs font-semibold rounded-full mb-2 backdrop-blur-sm">New</span>
|
||||
<h3 className="text-lg font-bold text-white leading-tight">Family Package</h3>
|
||||
<p className="text-white/75 text-xs mt-1">4 tickets for the price of 3</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-end mt-3">
|
||||
<span className="flex items-center gap-1 text-white text-xs font-semibold group-hover:gap-2 transition-all">
|
||||
Learn more <ArrowRight className="w-3.5 h-3.5" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative rounded-2xl overflow-hidden min-h-[100px] group cursor-pointer">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-700" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/20 to-transparent" />
|
||||
<div className="relative z-10 p-5 flex flex-col justify-between h-full min-h-[100px]">
|
||||
<div>
|
||||
<span className="inline-block px-2.5 py-0.5 bg-white/25 text-white text-xs font-semibold rounded-full mb-2 backdrop-blur-sm">Student</span>
|
||||
<h3 className="text-lg font-bold text-white leading-tight">Student Discount</h3>
|
||||
<p className="text-white/75 text-xs mt-1">15% off with valid student ID</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-end mt-3">
|
||||
<span className="flex items-center gap-1 text-white text-xs font-semibold group-hover:gap-2 transition-all">
|
||||
Learn more <ArrowRight className="w-3.5 h-3.5" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
@keyframes slide-up {
|
||||
from { transform: translateY(100%); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
.animate-slide-up {
|
||||
animation: slide-up 0.25s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
.animate-slide-up { animation: slide-up 0.25s cubic-bezier(0.32, 0.72, 0, 1); }
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,438 +1 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { getTranslation, Language, useLanguage } from '@/lib/i18n';
|
||||
import Link from 'next/link';
|
||||
import { SearchWidget } from '@/components/SearchWidget';
|
||||
import { Zap, Heart, Shield, Clock, ArrowRight, Train, MapPin, Calendar } from 'lucide-react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import { Station } from '@/types';
|
||||
|
||||
const styles = `
|
||||
.hero-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(to bottom right, rgb(20, 113, 76), transparent);
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.dark .hero-section {
|
||||
background: linear-gradient(to bottom right, rgb(20, 113, 76), transparent);
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.hero-heading {
|
||||
font-size: clamp(1rem, 3vw, 2.75rem);
|
||||
font-weight: 700;
|
||||
margin-bottom: 24px;
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.dark .hero-heading {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hero-subheading {
|
||||
font-size: clamp(1rem, 3vw, 1.5rem);
|
||||
color: #4b5563;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.dark .hero-subheading {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
padding: 32px 16px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.dark .stats-grid {
|
||||
border-top-color: #374151;
|
||||
border-bottom-color: #374151;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: rgb(20, 113, 76);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.dark .stat-label {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.features-section {
|
||||
padding: 80px 20px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.dark .features-section {
|
||||
background-color: #111827;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 40px;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.dark .section-title {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background-color: white;
|
||||
border: 2px solid #f3f4f6;
|
||||
border-radius: 18px;
|
||||
padding: 24px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dark .feature-card {
|
||||
background-color: #1f2937;
|
||||
border-color: #374151;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
border-color: rgb(20, 113, 76);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.feature-icon-bg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: rgb(20, 113, 76);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: 8px;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.dark .feature-title {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.dark .feature-desc {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
padding: 80px 20px;
|
||||
background: #f3f4f6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dark .cta-section {
|
||||
background: #111827;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
max-width: 42rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 24px;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.dark .cta-title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cta-text {
|
||||
font-size: 1.125rem;
|
||||
color: #4b5563;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.dark .cta-text {
|
||||
color: #e0e7ff;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 32px;
|
||||
background-color: white;
|
||||
color: rgb(20 113 76 / var(--tw-bg-opacity, 1));
|
||||
font-weight: 700;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background-color: #f0f9ff;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.bounce {
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
.bounce:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.bounce:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.search-widget-transparent {
|
||||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
border-color: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
.dark .search-widget-transparent {
|
||||
background-color: rgba(31, 41, 55, 0.95) !important;
|
||||
border-color: rgba(55, 65, 81, 0.2) !important;
|
||||
}
|
||||
`;
|
||||
|
||||
export default function Home() {
|
||||
const [lang, setLang] = useState<Language>('en');
|
||||
const { getLang } = useLanguage();
|
||||
const t = (key: string) => getTranslation(lang, key);
|
||||
|
||||
useEffect(() => {
|
||||
setLang(getLang());
|
||||
const handleLanguageChange = (e: any) => setLang(e.detail);
|
||||
window.addEventListener('languageChange', handleLanguageChange);
|
||||
return () => window.removeEventListener('languageChange', handleLanguageChange);
|
||||
}, [getLang]);
|
||||
|
||||
const { data: stations } = useQuery<Station[]>({
|
||||
queryKey: ['stations'],
|
||||
queryFn: async () => await apiClient.get('/stations') as Station[],
|
||||
});
|
||||
|
||||
const getStationByName = (name: string) => {
|
||||
if (!stations) return null;
|
||||
const exactMatch = stations.find(s => s.name.toLowerCase() === name.toLowerCase());
|
||||
if (exactMatch) return exactMatch;
|
||||
return stations.find(s => s.name.toLowerCase().includes(name.toLowerCase()));
|
||||
};
|
||||
|
||||
const handlePopularRoute = (fromName: string, toName: string) => {
|
||||
const origin = getStationByName(fromName);
|
||||
const destination = getStationByName(toName);
|
||||
|
||||
if (origin && destination) {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
};
|
||||
|
||||
const popularRoutes = [
|
||||
{ from: 'Sebeta', to: 'Nagad', duration: '12h' },
|
||||
{ from: 'Sebeta', to: 'Diredawa', duration: '8h' },
|
||||
{ from: 'Diredawa', to: 'Nagad', duration: '4h' },
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: Heart,
|
||||
title: t('home.comfortable'),
|
||||
desc: t('home.comfortDesc'),
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: t('home.affordable'),
|
||||
desc: t('home.affordableDesc'),
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: t('home.safe'),
|
||||
desc: t('home.safeDesc'),
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: t('home.fast'),
|
||||
desc: t('home.fastDesc'),
|
||||
},
|
||||
];
|
||||
|
||||
const highlights = [
|
||||
{
|
||||
icon: Train,
|
||||
title: 'Modern fleet',
|
||||
desc: 'Comfortable trains with modern amenities',
|
||||
},
|
||||
{
|
||||
icon: MapPin,
|
||||
title: '21 stations',
|
||||
desc: 'Connecting Ethiopia and Djibouti',
|
||||
},
|
||||
{
|
||||
icon: Calendar,
|
||||
title: 'Easy booking',
|
||||
desc: 'Book tickets in just a few clicks',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<style>{styles}</style>
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<section className="hero-section">
|
||||
<div className="hero-content">
|
||||
<h1 className="hero-heading">{t('home.hero')}</h1>
|
||||
<p className="hero-subheading">{t('home.heroSub')}</p>
|
||||
|
||||
<SearchWidget />
|
||||
|
||||
{/* Highlights */}
|
||||
<div className="grid md:grid-cols-3 gap-6 mt-12 max-w-6xl mx-auto">
|
||||
{highlights.map((highlight, idx) => {
|
||||
const Icon = highlight.icon;
|
||||
return (
|
||||
<div key={idx} className="feature-card">
|
||||
<div className="feature-icon-bg">
|
||||
<Icon size={24} color="white" />
|
||||
</div>
|
||||
<h3 className="feature-title">{highlight.title}</h3>
|
||||
<p className="feature-desc">{highlight.desc}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Popular Routes Section */}
|
||||
<section className="py-16 bg-gray-50 dark:bg-gray-900">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<h2 className="section-title">Popular Routes</h2>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
{popularRoutes.map((route, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
type="button"
|
||||
onClick={() => handlePopularRoute(route.from, route.to)}
|
||||
className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-5 hover:border-primary hover:shadow-md transition-all text-left group"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold text-gray-900 dark:text-gray-100 mb-1">{route.from}</div>
|
||||
<ArrowRight className="w-4 h-4 text-primary my-2" />
|
||||
<div className="font-semibold text-gray-900 dark:text-gray-100">{route.to}</div>
|
||||
</div>
|
||||
<Train className="w-5 h-5 text-primary opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">{route.duration} journey</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="features-section">
|
||||
<h2 className="section-title">{t('home.features')}</h2>
|
||||
<div className="features-grid">
|
||||
{features.map((feature, idx) => {
|
||||
const Icon = feature.icon;
|
||||
return (
|
||||
<div key={idx} className="feature-card">
|
||||
<div className="feature-icon-bg">
|
||||
<Icon size={24} color="white" />
|
||||
</div>
|
||||
<h3 className="feature-title">{feature.title}</h3>
|
||||
<p className="feature-desc">{feature.desc}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="cta-section">
|
||||
<div className="cta-content">
|
||||
<h2 className="cta-title">Ready to start your journey?</h2>
|
||||
<p className="cta-text">Book your train tickets in just a few minutes and enjoy a comfortable ride.</p>
|
||||
<Link href="/booking/search" className="cta-button">
|
||||
{t('home.cta')}
|
||||
<ArrowRight size={20} />
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export { default } from '@/app/booking/search/page';
|
||||
|
||||
Reference in New Issue
Block a user