264 lines
11 KiB
TypeScript
264 lines
11 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 tourHighlights = [
|
|
{
|
|
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"
|
|
}
|
|
];
|
|
|
|
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">Melbourne</span>{' '}
|
|
<span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">
|
|
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">
|
|
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.
|
|
</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">
|
|
{tourHighlights.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>
|
|
);
|
|
} |