arya-branch #3
@@ -5,364 +5,422 @@ import { Button } from './ui/button';
|
||||
import { Card, CardContent } from './ui/card';
|
||||
import { Badge } from './ui/badge';
|
||||
import Navbar from './Navbar';
|
||||
// import SubNavbar from './SubNavbar';
|
||||
import { Footer } from './Footer';
|
||||
import { MobileAppSection } from './MobileAppSection';
|
||||
import { EnhancedTestimonials } from './EnhancedTestimonials';
|
||||
import { HowItWorks } from './HowItWorks';
|
||||
import { ImageWithFallback } from './figma/ImageWithFallback';
|
||||
import { PersonalizedTourHero } from './PersonalizedTourHero';
|
||||
import { Layout } from '../Layout';
|
||||
|
||||
interface User {
|
||||
email: string;
|
||||
name: string;
|
||||
email: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface MagicItineraryPageProps {
|
||||
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;
|
||||
onContactUsClick?: () => void;
|
||||
onEsimsClick?: () => void;
|
||||
onHotelDiscountsClick?: () => void;
|
||||
onCreateItineraryClick: () => void;
|
||||
onViewItineraryClick: () => void;
|
||||
currentPage: string;
|
||||
user: User | null;
|
||||
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 MagicItineraryPage({
|
||||
onBackClick,
|
||||
onHomeClick,
|
||||
onMelbourneClick,
|
||||
onPassesClick,
|
||||
onCheckoutClick,
|
||||
onSignInClick,
|
||||
onSignOutClick,
|
||||
onAttractionsClick,
|
||||
onBlogsClick,
|
||||
onHowItWorksClick,
|
||||
onFAQClick,
|
||||
onPrivacyPolicyClick,
|
||||
onAboutUsClick,
|
||||
onProfileClick,
|
||||
onCityCardsClick,
|
||||
onMagicItineraryClick,
|
||||
onPostCardsClick,
|
||||
onOffersClick,
|
||||
onContactUsClick,
|
||||
onEsimsClick,
|
||||
onHotelDiscountsClick,
|
||||
onCreateItineraryClick,
|
||||
onViewItineraryClick,
|
||||
currentPage,
|
||||
user
|
||||
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
|
||||
}: MagicItineraryPageProps) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Navbar */}
|
||||
<Layout
|
||||
activeCity="Melbourne"
|
||||
onSignInClick={onSignInClick}
|
||||
onSignOutClick={onSignOutClick}
|
||||
user={user}
|
||||
>
|
||||
return (
|
||||
|
||||
{/* Sub Navbar */}
|
||||
{/* <SubNavbar
|
||||
activeTab="magic-itinerary"
|
||||
onCityCardsClick={onCityCardsClick}
|
||||
onMagicItineraryClick={onMagicItineraryClick}
|
||||
onPostCardsClick={onPostCardsClick}
|
||||
onOffersClick={onOffersClick}
|
||||
onEsimsClick={onEsimsClick}
|
||||
onHotelDiscountsClick={onHotelDiscountsClick}
|
||||
/> */}
|
||||
<Layout activeCity="Landingpage" onSignInClick={onSignInClick} onSignOutClick={onSignOutClick} user={user}>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-52 pb-20 overflow-hidden">
|
||||
{/* Background gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-secondary/5 to-background"></div>
|
||||
<div className="min-h-screen bg-background">
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<motion.div
|
||||
className="max-w-4xl mx-auto text-center"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl leading-tight mb-6">
|
||||
<span className="font-light ">Plan Your Perfect</span>{' '}
|
||||
<span className="pr-2 font-bold inline-block italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
|
||||
Melbourne Adventure
|
||||
</span>
|
||||
</h1>
|
||||
<p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
Let our AI create a personalized itinerary just for you. Answer a few questions about your preferences,
|
||||
and we'll craft the perfect Melbourne experience tailored to your interests.
|
||||
</p>
|
||||
<Button
|
||||
onClick={onCreateItineraryClick}
|
||||
className="bg-primary hover:bg-primary/90 text-white px-8 py-6 font-poppins font-semibold text-lg"
|
||||
>
|
||||
Create My Magic Itinerary
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
{/* Hero Section */}
|
||||
<PersonalizedTourHero
|
||||
onCreateItineraryClick={onCreateItineraryClick}
|
||||
/>
|
||||
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute top-20 left-10 w-20 h-20 bg-primary/10 rounded-full blur-xl"></div>
|
||||
<div className="absolute bottom-20 right-10 w-32 h-32 bg-secondary/10 rounded-full blur-xl"></div>
|
||||
</section>
|
||||
{/* How It Works Section */}
|
||||
<HowItWorks />
|
||||
|
||||
{/* How It Works Section */}
|
||||
<HowItWorks />
|
||||
{/* Features 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">Smart Features for</span>{' '}
|
||||
<span className="font-bold" style={{ color: '#F95F62' }}>Smart Travelers</span>
|
||||
</h2>
|
||||
<p className="font-poppins text-base md:text-lg font-normal text-gray-600 leading-relaxed">
|
||||
Experience intelligent trip planning powered by AI technology
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="py-16 bg-gradient-to-br from-gray-50 to-gray-100">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Left side - Features */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<h2 className="font-merchant text-3xl mb-6">
|
||||
<span className="text-gray-900">Smart Features for</span><br />
|
||||
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">Smart Travelers</span>
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start">
|
||||
{/* Left side - Features */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="space-y-5"
|
||||
>
|
||||
{[
|
||||
{
|
||||
icon: <Sparkles className="w-5 h-5" style={{ color: '#F95F62' }} />,
|
||||
title: 'AI-Powered Recommendations',
|
||||
description: 'Our advanced AI analyzes your preferences to suggest the perfect experiences'
|
||||
},
|
||||
{
|
||||
icon: <Clock className="w-5 h-5" style={{ color: '#F95F62' }} />,
|
||||
title: 'Optimized Scheduling',
|
||||
description: 'Smart timing that considers opening hours, travel time, and crowd patterns'
|
||||
},
|
||||
{
|
||||
icon: <MapPin className="w-5 h-5" style={{ color: '#F95F62' }} />,
|
||||
title: 'Location-Based Planning',
|
||||
description: 'Efficiently planned routes that minimize travel time and maximize experiences'
|
||||
},
|
||||
{
|
||||
icon: <Camera className="w-5 h-5" style={{ color: '#F95F62' }} />,
|
||||
title: 'Instagram-Worthy Spots',
|
||||
description: 'Discover hidden gems and perfect photo opportunities along your journey'
|
||||
}
|
||||
].map((feature, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 + 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"
|
||||
>
|
||||
{/* Subtle accent line */}
|
||||
<div
|
||||
className="absolute top-0 left-0 w-1 h-full rounded-l-2xl transition-all duration-300 group-hover:w-1.5"
|
||||
style={{ backgroundColor: '#F95F62' }}
|
||||
/>
|
||||
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{
|
||||
icon: <Sparkles className="w-6 h-6 text-purple-600" />,
|
||||
title: 'AI-Powered Recommendations',
|
||||
description: 'Our advanced AI analyzes your preferences to suggest the perfect experiences'
|
||||
},
|
||||
{
|
||||
icon: <Clock className="w-6 h-6 text-pink-600" />,
|
||||
title: 'Optimized Scheduling',
|
||||
description: 'Smart timing that considers opening hours, travel time, and crowd patterns'
|
||||
},
|
||||
{
|
||||
icon: <MapPin className="w-6 h-6 text-purple-600" />,
|
||||
title: 'Location-Based Planning',
|
||||
description: 'Efficiently planned routes that minimize travel time and maximize experiences'
|
||||
},
|
||||
{
|
||||
icon: <Camera className="w-6 h-6 text-pink-600" />,
|
||||
title: 'Instagram-Worthy Spots',
|
||||
description: 'Discover hidden gems and perfect photo opportunities along your journey'
|
||||
}
|
||||
].map((feature, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 + index * 0.1 }}
|
||||
className="flex items-start space-x-4"
|
||||
>
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-white rounded-lg flex items-center justify-center shadow-md">
|
||||
{feature.icon}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-merchant text-lg mb-2">{feature.title}</h3>
|
||||
<p className="text-gray-600 font-poppins">{feature.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="flex items-start gap-4 ml-2">
|
||||
<div
|
||||
className="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center 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>
|
||||
<div className="flex-1">
|
||||
<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>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Right side - Visual */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl p-8 text-white">
|
||||
<h3 className="font-merchant text-2xl mb-6">Sample Itinerary</h3>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ time: '9:00 AM', activity: 'Coffee at Degraves Street', duration: '30 min' },
|
||||
{ time: '10:00 AM', activity: 'Royal Botanic Gardens', duration: '2 hours' },
|
||||
{ time: '1:00 PM', activity: 'Lunch at Queen Victoria Market', duration: '1 hour' },
|
||||
{ time: '3:00 PM', activity: 'Street Art Tour in Hosier Lane', duration: '1.5 hours' },
|
||||
{ time: '6:00 PM', activity: 'Sunset at Eureka Skydeck', duration: '1 hour' }
|
||||
].map((item, index) => (
|
||||
<div key={index} className="flex items-center space-x-4 bg-white/10 rounded-lg p-3">
|
||||
<div className="text-sm font-bold bg-white/20 px-2 py-1 rounded">
|
||||
{item.time}
|
||||
{/* Right side - Sample Itinerary */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="bg-white rounded-3xl p-8 shadow-lg border border-gray-100 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: 'rgba(249, 95, 98, 0.1)' }}>
|
||||
<Calendar className="w-5 h-5" style={{ color: '#F95F62' }} />
|
||||
</div>
|
||||
<h3 className="font-poppins text-xl md:text-2xl font-semibold leading-snug text-gray-900">
|
||||
Sample Day Itinerary
|
||||
</h3>
|
||||
</div>
|
||||
<p className="font-poppins text-sm font-normal text-gray-600 leading-relaxed">
|
||||
A perfectly planned Melbourne adventure
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="relative space-y-4">
|
||||
{/* Vertical line */}
|
||||
<div className="absolute left-[15px] top-3 bottom-3 w-0.5 bg-gray-200" />
|
||||
|
||||
{[
|
||||
{ time: '9:00 AM', activity: 'Coffee at Degraves Street', duration: '30 min', emoji: '☕' },
|
||||
{ time: '10:00 AM', activity: 'Royal Botanic Gardens', duration: '2 hours', emoji: '🌿' },
|
||||
{ time: '1:00 PM', activity: 'Lunch at Queen Victoria Market', duration: '1 hour', emoji: '🍽️' },
|
||||
{ time: '3:00 PM', activity: 'Street Art Tour in Hosier Lane', duration: '1.5 hours', emoji: '🎨' },
|
||||
{ time: '6:00 PM', activity: 'Sunset at Eureka Skydeck', duration: '1 hour', emoji: '🌅' }
|
||||
].map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.5 + index * 0.1 }}
|
||||
className="relative flex items-start gap-4 pl-10"
|
||||
>
|
||||
{/* Timeline dot */}
|
||||
<div
|
||||
className="absolute left-0 w-8 h-8 rounded-full border-4 border-white flex items-center justify-center shadow-sm"
|
||||
style={{ backgroundColor: index === 0 ? '#F95F62' : '#ffffff', borderColor: '#F95F62' }}
|
||||
>
|
||||
{index === 0 && <div className="w-2 h-2 rounded-full bg-white" />}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 bg-gray-50 rounded-xl p-4 hover:bg-gray-100 transition-colors duration-200">
|
||||
<div className="flex items-start justify-between gap-3 mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg">{item.emoji}</span>
|
||||
<span className="font-poppins text-sm font-semibold" style={{ color: '#F95F62' }}>
|
||||
{item.time}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-poppins text-xs font-medium text-gray-500 bg-white px-2 py-1 rounded-full">
|
||||
{item.duration}
|
||||
</span>
|
||||
</div>
|
||||
<p className="font-poppins text-sm md:text-base font-medium text-gray-900 leading-snug">
|
||||
{item.activity}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Decorative gradient blur */}
|
||||
<div
|
||||
className="absolute -bottom-20 -right-20 w-40 h-40 rounded-full blur-3xl opacity-20 pointer-events-none"
|
||||
style={{ backgroundColor: '#F95F62' }}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{item.activity}</div>
|
||||
<div className="text-xs text-white/80">{item.duration}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits Section */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<h2 className="font-merchant text-3xl mb-4">Why Use Magic Itinerary?</h2>
|
||||
<p className="text-gray-600 font-poppins max-w-2xl mx-auto">
|
||||
Save time, discover more, and create unforgettable memories with personalized planning
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{
|
||||
icon: <Clock className="w-6 h-6" style={{ color: '#F95F62' }} />,
|
||||
title: 'Save Planning Time',
|
||||
description: 'Skip hours of research. Get a complete itinerary in under 5 minutes.',
|
||||
stat: '90% faster than manual planning'
|
||||
},
|
||||
{
|
||||
icon: <Star className="w-6 h-6" style={{ color: '#F95F62' }} />,
|
||||
title: 'Discover Hidden Gems',
|
||||
description: 'Find unique experiences and local favorites you might have missed.',
|
||||
stat: '50+ curated hidden spots'
|
||||
},
|
||||
{
|
||||
icon: <Heart className="w-6 h-6" style={{ color: '#F95F62' }} />,
|
||||
title: 'Personalized Experience',
|
||||
description: 'Every itinerary is unique, tailored specifically to your preferences.',
|
||||
stat: '1000+ possible combinations'
|
||||
}
|
||||
].map((benefit, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 + index * 0.1 }}
|
||||
>
|
||||
<Card className="h-full text-center hover:shadow-lg transition-shadow duration-300 border-gray-100">
|
||||
<CardContent className="p-8">
|
||||
<div className="flex justify-center mb-6">
|
||||
<div
|
||||
className="w-12 h-12 rounded-full flex items-center justify-center"
|
||||
style={{ backgroundColor: 'rgba(249, 95, 98, 0.1)' }}
|
||||
>
|
||||
{benefit.icon}
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="font-poppins text-xl md:text-2xl font-semibold leading-snug text-gray-900 mb-3">
|
||||
{benefit.title}
|
||||
</h3>
|
||||
<p className="font-poppins text-base font-normal leading-relaxed text-gray-600 mb-4">
|
||||
{benefit.description}
|
||||
</p>
|
||||
<Badge
|
||||
className="border-none font-poppins text-sm font-medium"
|
||||
style={{ backgroundColor: 'rgba(249, 95, 98, 0.1)', color: '#F95F62' }}
|
||||
>
|
||||
{benefit.stat}
|
||||
</Badge>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What's Included Section */}
|
||||
<section className="py-20 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-center mb-16 max-w-3xl mx-auto"
|
||||
>
|
||||
<h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
|
||||
<span className="font-light text-gray-800">Everything You Need,</span>{' '}
|
||||
<span className="font-bold" style={{ color: '#F95F62' }}>All Included</span>
|
||||
</h2>
|
||||
<p className="font-poppins text-base md:text-lg font-normal leading-relaxed text-gray-600">
|
||||
Your Magic Itinerary comes with comprehensive features for an amazing Melbourne experience
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{[
|
||||
{
|
||||
emoji: '⏰',
|
||||
title: 'Detailed Timeline',
|
||||
description: 'Hour-by-hour schedule with optimal timing'
|
||||
},
|
||||
{
|
||||
emoji: '🚇',
|
||||
title: 'Transportation Tips',
|
||||
description: 'Best routes and transport options between locations'
|
||||
},
|
||||
{
|
||||
emoji: '⭐',
|
||||
title: 'Local Recommendations',
|
||||
description: 'Insider tips on food, shopping, and experiences'
|
||||
},
|
||||
{
|
||||
emoji: '💰',
|
||||
title: 'Budget Planning',
|
||||
description: 'Estimated costs and money-saving suggestions'
|
||||
},
|
||||
{
|
||||
emoji: '☔',
|
||||
title: 'Weather Backup Plans',
|
||||
description: 'Alternative indoor activities for rainy days'
|
||||
},
|
||||
{
|
||||
emoji: '📸',
|
||||
title: 'Photo Opportunities',
|
||||
description: 'Best spots and times for Instagram-worthy shots'
|
||||
},
|
||||
{
|
||||
emoji: '🏛️',
|
||||
title: 'Cultural Insights',
|
||||
description: 'Local history and interesting facts about each location'
|
||||
},
|
||||
{
|
||||
emoji: '🔔',
|
||||
title: 'Real-time Updates',
|
||||
description: 'Live information on closures, events, and crowds'
|
||||
}
|
||||
].map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 + index * 0.05 }}
|
||||
className="group"
|
||||
>
|
||||
<div className="h-full bg-white rounded-2xl p-6 border border-gray-100 hover:border-gray-200 transition-all duration-300 hover:shadow-lg">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="text-5xl mb-4 transition-all duration-300 group-hover:scale-110">
|
||||
{item.emoji}
|
||||
</div>
|
||||
<h3 className="font-poppins text-lg font-semibold leading-snug text-gray-900 mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="font-poppins text-sm font-normal leading-relaxed text-gray-600">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
|
||||
|
||||
{/* Mobile App Section */}
|
||||
<MobileAppSection />
|
||||
|
||||
{/* Customer Reviews */}
|
||||
<EnhancedTestimonials />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits Section */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<h2 className="font-merchant text-3xl mb-4">Why Use Magic Itinerary?</h2>
|
||||
<p className="text-gray-600 font-poppins max-w-2xl mx-auto">
|
||||
Save time, discover more, and create unforgettable memories with personalized planning
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{
|
||||
icon: <Clock className="w-12 h-12 text-purple-600" />,
|
||||
title: 'Save Planning Time',
|
||||
description: 'Skip hours of research. Get a complete itinerary in under 5 minutes.',
|
||||
stat: '90% faster than manual planning'
|
||||
},
|
||||
{
|
||||
icon: <Star className="w-12 h-12 text-pink-600" />,
|
||||
title: 'Discover Hidden Gems',
|
||||
description: 'Find unique experiences and local favorites you might have missed.',
|
||||
stat: '50+ curated hidden spots'
|
||||
},
|
||||
{
|
||||
icon: <Heart className="w-12 h-12 text-purple-600" />,
|
||||
title: 'Personalized Experience',
|
||||
description: 'Every itinerary is unique, tailored specifically to your preferences.',
|
||||
stat: '1000+ possible combinations'
|
||||
}
|
||||
].map((benefit, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 + index * 0.1 }}
|
||||
>
|
||||
<Card className="h-full text-center hover:shadow-lg transition-shadow duration-300">
|
||||
<CardContent className="p-8">
|
||||
<div className="mb-4">
|
||||
{benefit.icon}
|
||||
</div>
|
||||
<h3 className="font-merchant text-xl mb-3">{benefit.title}</h3>
|
||||
<p className="text-gray-600 font-poppins mb-4">{benefit.description}</p>
|
||||
<Badge className="bg-gradient-to-r from-purple-100 to-pink-100 text-purple-700 border-none">
|
||||
{benefit.stat}
|
||||
</Badge>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What's Included Section */}
|
||||
<section className="py-16 bg-gradient-to-br from-purple-50 to-pink-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<h2 className="font-merchant text-3xl mb-4">What's Included</h2>
|
||||
<p className="text-gray-600 font-poppins max-w-2xl mx-auto">
|
||||
Your Magic Itinerary comes with everything you need for an amazing Melbourne experience
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{[
|
||||
{
|
||||
title: 'Detailed Timeline',
|
||||
description: 'Hour-by-hour schedule with optimal timing'
|
||||
},
|
||||
{
|
||||
title: 'Transportation Tips',
|
||||
description: 'Best routes and transport options between locations'
|
||||
},
|
||||
{
|
||||
title: 'Local Recommendations',
|
||||
description: 'Insider tips on food, shopping, and experiences'
|
||||
},
|
||||
{
|
||||
title: 'Budget Planning',
|
||||
description: 'Estimated costs and money-saving suggestions'
|
||||
},
|
||||
{
|
||||
title: 'Weather Backup Plans',
|
||||
description: 'Alternative indoor activities for rainy days'
|
||||
},
|
||||
{
|
||||
title: 'Photo Opportunities',
|
||||
description: 'Best spots and times for Instagram-worthy shots'
|
||||
},
|
||||
{
|
||||
title: 'Cultural Insights',
|
||||
description: 'Local history and interesting facts about each location'
|
||||
},
|
||||
{
|
||||
title: 'Real-time Updates',
|
||||
description: 'Live information on closures, events, and crowds'
|
||||
}
|
||||
].map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 + index * 0.05 }}
|
||||
>
|
||||
<Card className="h-full hover:shadow-md transition-shadow duration-300">
|
||||
<CardContent className="p-6 text-center">
|
||||
<h3 className="font-merchant text-lg mb-2">{item.title}</h3>
|
||||
<p className="text-gray-600 font-poppins text-sm">{item.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
|
||||
|
||||
{/* Mobile App Section */}
|
||||
<MobileAppSection />
|
||||
|
||||
{/* Customer Reviews */}
|
||||
<EnhancedTestimonials />
|
||||
|
||||
|
||||
</Layout>
|
||||
</div>
|
||||
);
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user