357 lines
16 KiB
TypeScript
357 lines
16 KiB
TypeScript
import { ArrowRight, Hotel, Mail, MapPin, Sparkles, Ticket, Wifi } from 'lucide-react';
|
||
import { motion } from 'motion/react';
|
||
import { Layout } from '../Layout';
|
||
import { ImageWithFallback } from './figma/ImageWithFallback';
|
||
import { SmartSaving } from './SmartSaving';
|
||
import { Badge } from './ui/badge';
|
||
import { Button } from './ui/button';
|
||
import { WhatsIncludedHero } from './WhatsIncludedHero';
|
||
|
||
interface User {
|
||
email: string;
|
||
name: string;
|
||
}
|
||
|
||
interface WhatsIncludedProps {
|
||
onBackClick: () => void;
|
||
onHomeClick: () => void;
|
||
onMelbourneClick: () => void;
|
||
onPassesClick: () => void;
|
||
onCheckoutClick: () => void;
|
||
onSignInClick: () => void;
|
||
onSignOutClick?: () => void;
|
||
onAttractionsClick: () => void;
|
||
onBlogsClick: () => void;
|
||
onHowItWorksClick: () => void;
|
||
onFAQClick: () => void;
|
||
onPrivacyPolicyClick: () => void;
|
||
onAboutUsClick: () => void;
|
||
onProfileClick: () => void;
|
||
onCityCardsClick: () => void;
|
||
onMagicItineraryClick: () => void;
|
||
onPostCardsClick: () => void;
|
||
onOffersClick: () => void;
|
||
onSuperSavingsClick?: () => void;
|
||
onContactUsClick?: () => void;
|
||
onEsimsClick?: () => void;
|
||
onHotelDiscountsClick?: () => void;
|
||
onCreateItineraryClick: () => void;
|
||
onViewItineraryClick: () => void;
|
||
currentPage: string;
|
||
user: User | null;
|
||
}
|
||
|
||
export function WhatsIncluded({
|
||
onBackClick,
|
||
onHomeClick,
|
||
onMelbourneClick,
|
||
onPassesClick,
|
||
onCheckoutClick,
|
||
onSignInClick,
|
||
onSignOutClick,
|
||
onAttractionsClick,
|
||
onBlogsClick,
|
||
onHowItWorksClick,
|
||
onFAQClick,
|
||
onPrivacyPolicyClick,
|
||
onAboutUsClick,
|
||
onProfileClick,
|
||
onCityCardsClick,
|
||
onMagicItineraryClick,
|
||
onPostCardsClick,
|
||
onOffersClick,
|
||
onSuperSavingsClick,
|
||
onContactUsClick,
|
||
onEsimsClick,
|
||
onHotelDiscountsClick,
|
||
onCreateItineraryClick,
|
||
onViewItineraryClick,
|
||
currentPage,
|
||
user
|
||
}: WhatsIncludedProps) {
|
||
return (
|
||
<Layout
|
||
activeCity="Landingpage"
|
||
onSignInClick={onSignInClick}
|
||
onSignOutClick={onSignOutClick}
|
||
user={user}
|
||
>
|
||
<div className="min-h-screen bg-background">
|
||
|
||
{/* Hero Section */}
|
||
<WhatsIncludedHero
|
||
onCreateItineraryClick={onCreateItineraryClick}
|
||
/>
|
||
|
||
{/* What's Inside Your CityCard Section */}
|
||
<section className="py-16 bg-gradient-to-br from-gray-50 to-gray-100">
|
||
<div className="container mx-auto px-4">
|
||
{/* Section Header */}
|
||
<motion.div
|
||
className="text-center mb-16 max-w-3xl mx-auto"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
>
|
||
<h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
|
||
<span className="font-light text-gray-800">What's Inside Your</span>{' '}
|
||
<span className="font-semibold" style={{ color: '#F95F62' }}>CityCard</span>
|
||
</h2>
|
||
<p className="font-poppins text-base md:text-lg font-normal text-gray-600 leading-relaxed">
|
||
Everything you need for an unforgettable journey in one card
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* Features Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||
{[
|
||
{
|
||
icon: <Ticket className="w-6 h-6" style={{ color: '#F95F62' }} />,
|
||
title: 'Access to Top Attractions & Tours',
|
||
description: 'Skip the lines and explore the best destinations with priority access'
|
||
},
|
||
{
|
||
icon: <Hotel className="w-6 h-6" style={{ color: '#F95F62' }} />,
|
||
title: 'Discounts on Select Hotels',
|
||
description: 'Save on accommodations with exclusive partner hotel deals'
|
||
},
|
||
{
|
||
icon: <Sparkles className="w-6 h-6" style={{ color: '#F95F62' }} />,
|
||
title: 'Magic Itinerary',
|
||
description: 'Your auto-curated travel plan tailored to your preferences'
|
||
},
|
||
{
|
||
icon: <Mail className="w-6 h-6" style={{ color: '#F95F62' }} />,
|
||
title: 'Signature Postcard',
|
||
description: 'Share your journey with a real postcard, mailed worldwide'
|
||
},
|
||
{
|
||
icon: <Wifi className="w-6 h-6" style={{ color: '#F95F62' }} />,
|
||
title: 'CityCards eSIM',
|
||
description: 'Stay connected with seamless data connectivity wherever you go'
|
||
}
|
||
].map((feature, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.2 + index * 0.1 }}
|
||
className="group relative bg-white rounded-2xl p-6 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-gray-200"
|
||
>
|
||
{/* Icon */}
|
||
<div
|
||
className="w-14 h-14 rounded-xl flex items-center justify-center mb-4 shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:shadow-md"
|
||
style={{ backgroundColor: 'rgba(249, 95, 98, 0.1)' }}
|
||
>
|
||
{feature.icon}
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div>
|
||
<h3 className="font-poppins text-lg md:text-xl font-semibold leading-snug text-gray-900 mb-2">
|
||
{feature.title}
|
||
</h3>
|
||
<p className="font-poppins text-sm md:text-base font-normal leading-relaxed text-gray-600">
|
||
{feature.description}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Hover accent */}
|
||
<div
|
||
className="absolute bottom-0 left-0 right-0 h-1 rounded-b-2xl transition-all duration-300 opacity-0 group-hover:opacity-100"
|
||
style={{ backgroundColor: '#F95F62' }}
|
||
/>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Benefits Section */}
|
||
{/* Featured City - Melbourne Section */}
|
||
<section className="py-16 bg-white">
|
||
<div className="container mx-auto px-4">
|
||
{/* Section Header */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
className="text-center mb-12 max-w-4xl mx-auto"
|
||
>
|
||
<h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
|
||
<span className="font-semibold text-gray-800">Featured City</span>
|
||
<span className="font-normal text-gray-400 mx-3">—</span>
|
||
<span className="font-semibold" style={{ color: '#F95F62' }}>Melbourne</span>
|
||
</h2>
|
||
<p className="font-poppins text-base md:text-lg font-normal text-gray-600 leading-relaxed max-w-3xl mx-auto">
|
||
Explore Melbourne's iconic landmarks, vibrant culture, world-class dining, and hidden gems – all included with your Melbourne CityCard
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* Featured Attractions Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
||
{[
|
||
{
|
||
id: 1,
|
||
name: "Royal Botanic Gardens",
|
||
category: "Gardens",
|
||
image: "https://images.unsplash.com/photo-1721272962395-a848331ce92d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjByb3lhbCUyMGJvdGFuaWMlMjBnYXJkZW5zfGVufDF8fHx8MTc1NzMzNzc4OXww&ixlib=rb-4.1.0&q=80&w=1080"
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "Federation Square",
|
||
category: "Landmarks",
|
||
image: "https://images.unsplash.com/photo-1639655001512-e4b58d4874b8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBmZWRlcmF0aW9uJTIwc3F1YXJlfGVufDF8fHx8MTc1NzMzNzc5Mnww&ixlib=rb-4.1.0&q=80&w=1080"
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "Queen Victoria Market",
|
||
category: "Markets",
|
||
image: "https://images.unsplash.com/photo-1676454953709-e0be46f62490?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBxdWVlbiUyMHZpY3RvcmlhJTIwbWFya2V0fGVufDF8fHx8MTc1NzMzNzc5Nnww&ixlib=rb-4.1.0&q=80&w=1080"
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "Eureka Skydeck",
|
||
category: "Views",
|
||
image: "https://images.unsplash.com/photo-1629677713183-29248e1268d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBldXJla2ElMjB0b3dlcnxlbnwxfHx8fDE3NTczMzc4MDB8MA&ixlib=rb-4.1.0&q=80&w=1080"
|
||
},
|
||
{
|
||
id: 5,
|
||
name: "St Kilda Beach & Pier",
|
||
category: "Beach",
|
||
image: "https://images.unsplash.com/photo-1674732954456-159835c0a46b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBzdCUyMGtpbGRhJTIwYmVhY2h8ZW58MXx8fHwxNzU3MzM3ODAzfDA&ixlib=rb-4.1.0&q=80&w=1080"
|
||
},
|
||
{
|
||
id: 6,
|
||
name: "Melbourne Laneways",
|
||
category: "Street Art",
|
||
image: "https://images.unsplash.com/photo-1705120624704-0970afc29fea?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBsYW5ld2F5cyUyMHN0cmVldCUyMGFydHxlbnwxfHx8fDE3NTczMzc4MDd8MA&ixlib=rb-4.1.0&q=80&w=1080"
|
||
},
|
||
{
|
||
id: 7,
|
||
name: "Melbourne Zoo",
|
||
category: "Wildlife",
|
||
image: "https://images.unsplash.com/photo-1681429477985-30dc7b88dd5b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjB6b28lMjBhbmltYWxzfGVufDF8fHx8MTc1NzMzNzgxMHww&ixlib=rb-4.1.0&q=80&w=1080"
|
||
},
|
||
{
|
||
id: 8,
|
||
name: "Royal Exhibition Building",
|
||
category: "Heritage",
|
||
image: "https://images.unsplash.com/photo-1720523794299-c3b445d71a51?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjByb3lhbCUyMGV4aGliaXRpb24lMjBidWlsZGluZ3xlbnwxfHx8fDE3NTczMzc4MTR8MA&ixlib=rb-4.1.0&q=80&w=1080"
|
||
}
|
||
].map((attraction, index) => (
|
||
<motion.div
|
||
key={attraction.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: 0.1 + index * 0.05 }}
|
||
className="group cursor-pointer"
|
||
>
|
||
<div className="relative rounded-2xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300">
|
||
{/* Image */}
|
||
<div className="relative h-64 overflow-hidden">
|
||
<ImageWithFallback
|
||
src={attraction.image}
|
||
alt={attraction.name}
|
||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||
/>
|
||
{/* Gradient Overlay */}
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||
|
||
{/* Category Badge */}
|
||
<div className="absolute top-4 right-4">
|
||
<Badge
|
||
className="border-none font-poppins font-medium text-xs backdrop-blur-sm"
|
||
style={{ backgroundColor: 'rgba(255, 255, 255, 0.95)', color: '#F95F62' }}
|
||
>
|
||
{attraction.category}
|
||
</Badge>
|
||
</div>
|
||
|
||
{/* Attraction Name */}
|
||
<div className="absolute bottom-0 left-0 right-0 p-5">
|
||
<h3 className="font-poppins text-lg md:text-xl font-semibold leading-snug text-white mb-1">
|
||
{attraction.name}
|
||
</h3>
|
||
<p className="font-poppins text-sm font-normal text-white/90">
|
||
Melbourne, Australia
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
{/* View Full List CTA */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.5 }}
|
||
className="text-center"
|
||
>
|
||
<Button
|
||
onClick={onMelbourneClick}
|
||
size="lg"
|
||
className="font-poppins font-semibold px-8 py-6 text-base hover:shadow-xl transition-all duration-300"
|
||
style={{ backgroundColor: '#F95F62' }}
|
||
>
|
||
View Full List on Melbourne CityCard
|
||
<MapPin className="ml-2 w-5 h-5" />
|
||
</Button>
|
||
<p className="font-poppins text-sm font-normal text-gray-600 mt-4">
|
||
Over 40+ attractions included with your Melbourne CityCard
|
||
</p>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* How It Works Section - Smart Savings */}
|
||
<SmartSaving />
|
||
|
||
|
||
{/* CTA Section */}
|
||
<section className="mt-20 py-32 md:py-40 bg-gradient-to-br from-primary to-secondary relative overflow-hidden">
|
||
<div className="absolute inset-0 opacity-10">
|
||
<div className="absolute top-0 left-0 w-96 h-96 bg-white rounded-full blur-3xl" />
|
||
<div className="absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full blur-3xl" />
|
||
</div>
|
||
|
||
<div className="container mx-auto px-4 relative z-10">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
className="text-center max-w-3xl mx-auto"
|
||
>
|
||
<h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||
Ready to Start Your Adventure?
|
||
</h2>
|
||
<p className="font-poppins text-lg md:text-xl text-white/90 mb-8 font-normal leading-relaxed">
|
||
Join millions of travelers who've discovered the smarter way to explore cities
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Button
|
||
onClick={onCheckoutClick}
|
||
className="px-10 py-6 rounded-full font-poppins font-semibold text-lg bg-white text-primary hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-xl"
|
||
>
|
||
Select Your City
|
||
<ArrowRight className="w-5 h-5 ml-2" />
|
||
</Button>
|
||
<Button
|
||
onClick={onPassesClick}
|
||
variant="outline"
|
||
className="px-10 py-6 rounded-full font-poppins font-semibold text-lg border-2 border-white !text-white bg-transparent hover:!bg-white hover:!text-primary transition-all duration-300"
|
||
>
|
||
View All Passes
|
||
</Button>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
} |