remove calendar from attraction details page
This commit is contained in:
aryabenade
@@ -258,131 +258,7 @@ export function AttractionDetailsPage({
|
||||
</div>
|
||||
|
||||
{/* Right Sidebar - Calendar and Booking */}
|
||||
<div className="lg:sticky lg:top-32 space-y-8 self-start">
|
||||
{/* Calendar Widget with Custom Design */}
|
||||
<Card className="p-6 bg-white shadow-lg border border-primary/10">
|
||||
<div className="mb-6">
|
||||
<h3 className="text-xl font-bold text-primary mb-1">Select Date</h3>
|
||||
<p className="text-sm text-gray-600">Choose your preferred visit date</p>
|
||||
</div>
|
||||
|
||||
{/* Custom Calendar Design */}
|
||||
<div className="space-y-4">
|
||||
{/* Calendar Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<button className="p-2 hover:bg-primary/10 rounded-lg transition-colors">
|
||||
<ChevronLeft className="w-5 h-5 text-primary" />
|
||||
</button>
|
||||
<span className="font-semibold text-gray-900">September 2025</span>
|
||||
<button className="p-2 hover:bg-primary/10 rounded-lg transition-colors">
|
||||
<ChevronRight className="w-5 h-5 text-primary" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Days of week */}
|
||||
<div className="grid grid-cols-7 gap-1 text-center text-sm font-medium text-gray-500">
|
||||
<div>Su</div>
|
||||
<div>Mo</div>
|
||||
<div>Tu</div>
|
||||
<div>We</div>
|
||||
<div>Th</div>
|
||||
<div>Fr</div>
|
||||
<div>Sa</div>
|
||||
</div>
|
||||
|
||||
{/* Calendar Grid */}
|
||||
<div className="grid grid-cols-7 gap-1">
|
||||
{/* Previous month */}
|
||||
<button className="h-10 w-10 text-sm text-gray-300 hover:bg-gray-50 rounded">31</button>
|
||||
|
||||
{/* Current month */}
|
||||
{Array.from({ length: 30 }, (_, i) => {
|
||||
const day = i + 1;
|
||||
const isSelected = day === 27;
|
||||
const isToday = day === 15;
|
||||
return (
|
||||
<button
|
||||
key={day}
|
||||
className={`h-10 w-10 text-sm rounded font-medium transition-all duration-200 ${isSelected
|
||||
? 'bg-primary text-white shadow-lg scale-105'
|
||||
: isToday
|
||||
? 'bg-primary/10 text-primary border border-primary/20'
|
||||
: 'text-gray-700 hover:bg-primary/5 hover:text-primary'
|
||||
}`}
|
||||
>
|
||||
{day}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Next month */}
|
||||
{Array.from({ length: 4 }, (_, i) => (
|
||||
<button
|
||||
key={`next-${i + 1}`}
|
||||
className="h-10 w-10 text-sm text-gray-300 hover:bg-gray-50 rounded"
|
||||
>
|
||||
{i + 1}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selected Date Display */}
|
||||
<div className="mt-6 p-4 bg-primary/5 rounded-lg border border-primary/10">
|
||||
<div className="flex items-center gap-3">
|
||||
<Calendar className="w-5 h-5 text-primary" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">Selected Date</p>
|
||||
<p className="text-lg font-semibold text-primary">September 27, 2025</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Pricing Card */}
|
||||
<Card className="p-6 bg-gradient-to-br from-primary/5 to-primary/10 border border-primary/20">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-600">Adult Ticket</span>
|
||||
<span className="font-bold text-xl text-primary">{attraction.ticketPriceAdult}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-600">Service Fee</span>
|
||||
<span className="font-medium text-gray-900">$5</span>
|
||||
</div>
|
||||
<div className="border-t border-primary/20 pt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-semibold text-gray-900">Total</span>
|
||||
<span className="font-bold text-2xl text-primary">${attraction.ticketPriceAdult + 5}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Confirm Booking Button */}
|
||||
<Button
|
||||
className="w-full bg-primary text-white hover:bg-primary/90 py-6 text-lg rounded-xl font-semibold transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-[1.02] relative overflow-hidden group"
|
||||
onClick={() => onCheckoutClick()}
|
||||
>
|
||||
<span className="relative z-10 flex items-center justify-center gap-2">
|
||||
<Check className="w-5 h-5" />
|
||||
Confirm Booking
|
||||
</span>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
|
||||
</Button>
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<div className="flex items-center justify-center gap-4 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-1">
|
||||
<Check className="w-4 h-4 text-primary" />
|
||||
<span>Instant Confirmation</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<X className="w-4 h-4 text-primary" />
|
||||
<span>Free Cancellation</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user