310 lines
13 KiB
TypeScript
310 lines
13 KiB
TypeScript
import { motion } from 'motion/react';
|
||
import { ImageWithFallback } from './figma/ImageWithFallback';
|
||
import { CheckCircle, Users, MapPin, Calendar, Coffee, Camera, Clock, Zap, Volume2, Star } from 'lucide-react';
|
||
|
||
export function MelbourneTourOverview() {
|
||
const whatsIncluded = [
|
||
{
|
||
icon: Coffee,
|
||
text: "Food and coffee tours in famous laneways",
|
||
color: "text-amber-600"
|
||
},
|
||
{
|
||
icon: MapPin,
|
||
text: "Transport via trams and walking tours",
|
||
color: "text-blue-600"
|
||
},
|
||
{
|
||
icon: Users,
|
||
text: "Local guides and cultural experiences",
|
||
color: "text-green-600"
|
||
},
|
||
{
|
||
icon: Zap,
|
||
text: "Skip-the-line access to major attractions",
|
||
color: "text-purple-600"
|
||
},
|
||
{
|
||
icon: Volume2,
|
||
text: "Audio guides and mobile app",
|
||
color: "text-indigo-600"
|
||
},
|
||
{
|
||
icon: Clock,
|
||
text: "Flexible timing and self-paced tours",
|
||
color: "text-rose-600"
|
||
}
|
||
];
|
||
|
||
const MelbourneTourHighlights = [
|
||
{
|
||
icon: Star,
|
||
text: "Experience the cultural capital's vibrant arts scene and hidden laneways",
|
||
color: "text-yellow-600"
|
||
},
|
||
{
|
||
icon: Coffee,
|
||
text: "Discover Melbourne's world-famous coffee culture and rooftop bars",
|
||
color: "text-amber-600"
|
||
},
|
||
{
|
||
icon: Camera,
|
||
text: "Capture stunning views from Eureka Skydeck and Royal Botanic Gardens",
|
||
color: "text-purple-600"
|
||
},
|
||
{
|
||
icon: Users,
|
||
text: "Enjoy food tours through Queen Victoria Market and ethnic quarters",
|
||
color: "text-green-600"
|
||
},
|
||
{
|
||
icon: MapPin,
|
||
text: "Explore sports culture at MCG and cultural sites in Federation Square",
|
||
color: "text-blue-600"
|
||
},
|
||
{
|
||
icon: Calendar,
|
||
text: "Access year-round events, festivals, and seasonal attractions",
|
||
color: "text-rose-600"
|
||
}
|
||
];
|
||
|
||
const SydneyTourHighlights = [
|
||
{
|
||
icon: Star,
|
||
text: "Experience Sydney’s iconic harbour lifestyle with Opera House and Harbour Bridge views",
|
||
color: "text-yellow-600"
|
||
},
|
||
{
|
||
icon: Coffee,
|
||
text: "Discover Sydney’s vibrant café culture, waterfront dining, and buzzing food markets",
|
||
color: "text-amber-600"
|
||
},
|
||
{
|
||
icon: Camera,
|
||
text: "Capture panoramic views from Sydney Tower Eye and scenic harbour cruises",
|
||
color: "text-purple-600"
|
||
},
|
||
{
|
||
icon: Users,
|
||
text: "Enjoy beachside vibes at Bondi and Manly, plus lively nightlife in Darling Harbour",
|
||
color: "text-green-600"
|
||
},
|
||
{
|
||
icon: MapPin,
|
||
text: "Explore historic charm in The Rocks and coastal walks like Bondi to Coogee",
|
||
color: "text-blue-600"
|
||
},
|
||
{
|
||
icon: Calendar,
|
||
text: "Access year-round festivals, cultural events, and dynamic harbour celebrations",
|
||
color: "text-rose-600"
|
||
}
|
||
];
|
||
|
||
|
||
const cityName = localStorage.getItem("cityName")
|
||
const selectedHighlights = cityName === 'Melbourne' ? MelbourneTourHighlights : SydneyTourHighlights;
|
||
|
||
return (
|
||
<section className="py-20 bg-gradient-to-br from-white via-gray-50/30 to-white relative overflow-hidden">
|
||
{/* Background Pattern */}
|
||
<div className="absolute inset-0 opacity-[0.02]">
|
||
<div className="absolute top-0 left-0 w-full h-full">
|
||
<div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-primary/20 opacity-30"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="container mx-auto px-4 relative z-10">
|
||
{/* Header */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
className="mb-16"
|
||
>
|
||
<h2 className="heading-dynamic font-merchant text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-8">
|
||
<span className="font-light">{cityName}</span>{' '}
|
||
<span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic pr-2">
|
||
Tour
|
||
</span>{' '}
|
||
<span className="font-normal">Overview</span>
|
||
</h2>
|
||
</motion.div>
|
||
|
||
{/* Main Content Grid */}
|
||
<div className="grid lg:grid-cols-2 gap-16 items-start">
|
||
{/* Left Content */}
|
||
<div className="space-y-12">
|
||
{/* Description */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.1 }}
|
||
viewport={{ once: true }}
|
||
>
|
||
<p className="text-lg md:text-xl text-gray-700 leading-relaxed">
|
||
{ cityName === 'Melbourne' && (
|
||
<span>
|
||
Melbourne is a must-visit cultural epicenter, and this spectacular experience unlocks
|
||
your access around the city in one easy pass. Save over the cost of visiting Melbourne's
|
||
landmarks, explore famous laneways and street art, enjoy world-class dining in hidden bars,
|
||
and immerse yourself in the sports capital's vibrant atmosphere. From Royal Botanic Gardens
|
||
to Federation Square, hotel pickup and drop-off all included.
|
||
</span>
|
||
)}
|
||
{ cityName === 'Sydney' && (
|
||
<span>
|
||
Sydney is a must-visit global destination, blending iconic landmarks with vibrant coastal charm, and this all-in-one experience gives you seamless access across the city. Save more while exploring Sydney’s top attractions, wander through historic neighborhoods like The Rocks, admire world-famous sights such as the Sydney Opera House and Harbour Bridge, and relax along stunning beaches like Bondi and Manly. Enjoy diverse dining from waterfront restaurants to hidden cafés, soak in the lively cultural scene, and experience the energy of Australia’s most dynamic harbor city—all with convenient access to key locations and experiences included.
|
||
</span>
|
||
)}
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* What's Included */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="bg-white rounded-3xl p-8 shadow-lg border border-gray-100"
|
||
>
|
||
<h3 className="font-merchant text-2xl md:text-3xl font-semibold text-gray-900 mb-6">
|
||
What Will You Experience
|
||
</h3>
|
||
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
{whatsIncluded.map((item, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, x: -20 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.4, delay: 0.3 + index * 0.1 }}
|
||
viewport={{ once: true }}
|
||
className="flex items-start gap-3 group"
|
||
>
|
||
<div className={`w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5 group-hover:bg-gray-200 transition-colors duration-200`}>
|
||
<item.icon className={`w-4 h-4 ${item.color}`} />
|
||
</div>
|
||
<span className="text-gray-700 font-medium leading-relaxed group-hover:text-gray-900 transition-colors duration-200">
|
||
{item.text}
|
||
</span>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Right Image */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 20 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.3 }}
|
||
viewport={{ once: true }}
|
||
className="relative"
|
||
>
|
||
<div className="relative rounded-3xl overflow-hidden shadow-2xl">
|
||
<ImageWithFallback
|
||
src="https://images.unsplash.com/photo-1720347247737-9252d85d3027?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjaXR5JTIwc2t5bGluZSUyMGZsaW5kZXJzJTIwc3RyZWV0fGVufDF8fHx8MTc1NzMzOTAyNHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
|
||
alt="Melbourne City Skyline"
|
||
className="w-full h-[400px] md:h-[500px] object-cover"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent"></div>
|
||
|
||
{/* Floating Badge */}
|
||
<div className="absolute top-6 left-6 bg-white/95 backdrop-blur-sm rounded-full px-4 py-2 shadow-lg">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
|
||
<span className="text-sm font-medium text-gray-900">Live Experience</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Tour Highlights - Full Width Below */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="mt-20"
|
||
>
|
||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||
{/* Left Image for Tour Highlights */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -20 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.5 }}
|
||
viewport={{ once: true }}
|
||
className="order-2 lg:order-1"
|
||
>
|
||
<div className="relative rounded-3xl overflow-hidden shadow-2xl">
|
||
<ImageWithFallback
|
||
src="https://images.unsplash.com/photo-1720347247737-9252d85d3027?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjaXR5JTIwc2t5bGluZSUyMGZsaW5kZXJzJTIwc3RyZWV0fGVufDF8fHx8MTc1NzMzOTAyNHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
|
||
alt="Melbourne Tour Highlights"
|
||
className="w-full h-[400px] md:h-[500px] object-cover"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-secondary/10"></div>
|
||
|
||
{/* Floating Stats */}
|
||
<div className="absolute bottom-6 right-6 bg-white/95 backdrop-blur-sm rounded-2xl p-4 shadow-lg">
|
||
<div className="text-center">
|
||
<div className="text-2xl font-bold text-gray-900">50+</div>
|
||
<div className="text-xs text-gray-600">Attractions</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Right Content - Tour Highlights */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 20 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.6 }}
|
||
viewport={{ once: true }}
|
||
className="order-1 lg:order-2"
|
||
>
|
||
<div className="bg-white rounded-3xl p-8 shadow-lg border border-gray-100">
|
||
<h3 className="font-merchant text-2xl md:text-3xl font-semibold text-gray-900 mb-8">
|
||
Tour Highlights
|
||
</h3>
|
||
|
||
<div className="space-y-6">
|
||
{selectedHighlights.map((highlight, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.4, delay: 0.7 + index * 0.1 }}
|
||
viewport={{ once: true }}
|
||
className="flex items-start gap-4 group"
|
||
>
|
||
<div className={`w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-gray-200 transition-all duration-200 group-hover:scale-110`}>
|
||
<highlight.icon className={`w-4 h-4 ${highlight.color}`} />
|
||
</div>
|
||
<p className="text-gray-700 font-medium leading-relaxed group-hover:text-gray-900 transition-colors duration-200">
|
||
{highlight.text}
|
||
</p>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Call to Action in Tour Highlights */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: 1.3 }}
|
||
viewport={{ once: true }}
|
||
className="mt-8 pt-6 border-t border-gray-100"
|
||
>
|
||
</motion.div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
} |