398 lines
16 KiB
TypeScript
398 lines
16 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'motion/react';
|
|
import { ArrowLeft, Sparkles, MapPin, Clock, Users, Calendar, Star, Zap, Heart, Camera } from 'lucide-react';
|
|
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';
|
|
|
|
interface User {
|
|
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;
|
|
}
|
|
|
|
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
|
|
}: MagicItineraryPageProps) {
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
{/* Navbar */}
|
|
<Navbar
|
|
activeCity=""
|
|
onCityChange={() => {}}
|
|
onSignInClick={onSignInClick}
|
|
onSignOutClick={onSignOutClick}
|
|
onPassesClick={onPassesClick}
|
|
onCheckoutClick={onCheckoutClick}
|
|
onHomeClick={onHomeClick}
|
|
onAttractionsClick={onAttractionsClick}
|
|
onBlogsClick={onBlogsClick}
|
|
onHowItWorksClick={onHowItWorksClick}
|
|
onFAQClick={onFAQClick}
|
|
onPrivacyPolicyClick={onPrivacyPolicyClick}
|
|
onAboutUsClick={onAboutUsClick}
|
|
onProfileClick={onProfileClick}
|
|
onCityCardsClick={onCityCardsClick}
|
|
onMagicItineraryClick={onMagicItineraryClick}
|
|
onPostCardsClick={onPostCardsClick}
|
|
onOffersClick={onOffersClick}
|
|
onEsimsClick={onEsimsClick}
|
|
onHotelDiscountsClick={onHotelDiscountsClick}
|
|
currentPage="magic-itinerary"
|
|
isUserSignedIn={!!user}
|
|
user={user}
|
|
/>
|
|
|
|
{/* Sub Navbar */}
|
|
<SubNavbar
|
|
activeTab="magic-itinerary"
|
|
onCityCardsClick={onCityCardsClick}
|
|
onMagicItineraryClick={onMagicItineraryClick}
|
|
onPostCardsClick={onPostCardsClick}
|
|
onOffersClick={onOffersClick}
|
|
onEsimsClick={onEsimsClick}
|
|
onHotelDiscountsClick={onHotelDiscountsClick}
|
|
/>
|
|
|
|
{/* 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="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="font-bold 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>
|
|
|
|
{/* 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 />
|
|
|
|
{/* 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="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>
|
|
|
|
{/* 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}
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="font-medium">{item.activity}</div>
|
|
<div className="text-xs text-white/80">{item.duration}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</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 />
|
|
|
|
{/* Footer */}
|
|
<Footer
|
|
onHomeClick={onHomeClick}
|
|
onMelbourneClick={onMelbourneClick}
|
|
onPassesClick={onPassesClick}
|
|
onSignInClick={onSignInClick}
|
|
onAttractionsClick={onAttractionsClick}
|
|
onBlogsClick={onBlogsClick}
|
|
onHowItWorksClick={onHowItWorksClick}
|
|
onFAQClick={onFAQClick}
|
|
onPrivacyPolicyClick={onPrivacyPolicyClick}
|
|
onContactUsClick={onContactUsClick}
|
|
currentPage={currentPage}
|
|
/>
|
|
</div>
|
|
);
|
|
} |