315 lines
12 KiB
TypeScript
315 lines
12 KiB
TypeScript
import { motion } from 'motion/react';
|
|
import { Wifi, MapPin, Camera, Users, Smartphone, QrCode, Check, ArrowRight } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import Navbar from './Navbar';
|
|
import { SubNavbar } from './SubNavbar';
|
|
import { Footer } from './Footer';
|
|
import { ImageWithFallback } from './figma/ImageWithFallback';
|
|
|
|
interface EsimsPageProps {
|
|
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;
|
|
currentPage: string;
|
|
user?: { email: string; name: string } | null;
|
|
}
|
|
|
|
export function EsimsPage({
|
|
onBackClick,
|
|
onHomeClick,
|
|
onMelbourneClick,
|
|
onPassesClick,
|
|
onCheckoutClick,
|
|
onSignInClick,
|
|
onSignOutClick,
|
|
onAttractionsClick,
|
|
onBlogsClick,
|
|
onHowItWorksClick,
|
|
onFAQClick,
|
|
onPrivacyPolicyClick,
|
|
onAboutUsClick,
|
|
onProfileClick,
|
|
onCityCardsClick,
|
|
onMagicItineraryClick,
|
|
onPostCardsClick,
|
|
onOffersClick,
|
|
onContactUsClick,
|
|
onEsimsClick,
|
|
onHotelDiscountsClick,
|
|
currentPage,
|
|
user
|
|
}: EsimsPageProps) {
|
|
|
|
const benefits = [
|
|
{
|
|
icon: MapPin,
|
|
title: "Navigate the city with ease",
|
|
description: "Access real-time maps and directions wherever you go"
|
|
},
|
|
{
|
|
icon: Smartphone,
|
|
title: "Book rides, access maps, and find attractions in real time",
|
|
description: "Stay connected to all essential travel services"
|
|
},
|
|
{
|
|
icon: Camera,
|
|
title: "Share photos and memories instantly",
|
|
description: "Upload and share your travel moments without delay"
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Stay connected with friends, family, and travel plans",
|
|
description: "Never miss important updates or messages while traveling"
|
|
}
|
|
];
|
|
|
|
const qrSteps = [
|
|
{ step: "1", label: "Receive QR Code", description: "Get your unique eSIM QR code with your CityCard" },
|
|
{ step: "2", label: "Scan Code", description: "Open your phone camera and scan the QR code" },
|
|
{ step: "3", label: "Connected", description: "You're online instantly - start exploring!" }
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
{/* Navbar */}
|
|
<Navbar
|
|
activeCity="Paris"
|
|
onCityChange={() => {}}
|
|
onHomeClick={onHomeClick}
|
|
onMelbourneClick={onMelbourneClick}
|
|
onPassesClick={onPassesClick}
|
|
onCheckoutClick={onCheckoutClick}
|
|
onSignInClick={onSignInClick}
|
|
onSignOutClick={onSignOutClick}
|
|
onAttractionsClick={onAttractionsClick}
|
|
onBlogsClick={onBlogsClick}
|
|
onHowItWorksClick={onHowItWorksClick}
|
|
onFAQClick={onFAQClick}
|
|
onPrivacyPolicyClick={onPrivacyPolicyClick}
|
|
onAboutUsClick={onAboutUsClick}
|
|
onProfileClick={onProfileClick}
|
|
onCityCardsClick={onCityCardsClick}
|
|
onMagicItineraryClick={onMagicItineraryClick}
|
|
onPostCardsClick={onPostCardsClick}
|
|
onOffersClick={onOffersClick}
|
|
onEsimsClick={onEsimsClick}
|
|
currentPage={currentPage}
|
|
isUserSignedIn={!!user}
|
|
user={user}
|
|
/>
|
|
|
|
{/* SubNavbar for Products */}
|
|
<SubNavbar
|
|
activeTab="esims"
|
|
onCityCardsClick={onCityCardsClick}
|
|
onMagicItineraryClick={onMagicItineraryClick}
|
|
onPostCardsClick={onPostCardsClick}
|
|
onOffersClick={onOffersClick}
|
|
onEsimsClick={onEsimsClick}
|
|
onHotelDiscountsClick={onHotelDiscountsClick}
|
|
/>
|
|
|
|
{/* Hero Section - eSIM Focus */}
|
|
<section className="relative pt-52 pb-20 overflow-hidden" style={{ backgroundColor: '#FFF5F5' }}>
|
|
<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-poppins text-5xl md:text-6xl lg:text-7xl leading-tight mb-6">
|
|
<span className="font-normal" style={{ color: '#1F2937' }}>Stay Connected Instantly</span>
|
|
<br />
|
|
<span className="font-normal" style={{ color: '#1F2937' }}>with Your</span>{' '}
|
|
<span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
|
|
Complimentary eSIM
|
|
</span>
|
|
</h1>
|
|
<p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal text-gray-600 mb-8 max-w-3xl mx-auto">
|
|
Because every unforgettable trip starts with seamless connectivity.
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Benefits Section */}
|
|
<section className="py-20 bg-white">
|
|
<div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
|
|
<span className="font-light" style={{ color: '#1F2937' }}>With your </span>
|
|
<span className="font-bold" style={{ color: '#F95F62' }}>eSIM</span>
|
|
<span className="font-light" style={{ color: '#1F2937' }}>, you can:</span>
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
|
{benefits.map((benefit, index) => {
|
|
const IconComponent = benefit.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
|
className="flex gap-4 p-6 rounded-2xl transition-all duration-300 hover:shadow-lg"
|
|
style={{ backgroundColor: '#FFF5F5' }}
|
|
>
|
|
<div className="flex-shrink-0">
|
|
<div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ backgroundColor: '#F95F62' }}>
|
|
<IconComponent className="w-6 h-6 text-white" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-poppins text-lg font-semibold mb-2" style={{ color: '#1F2937' }}>
|
|
{benefit.title}
|
|
</h3>
|
|
<p className="font-poppins text-base" style={{ color: '#4B5563' }}>
|
|
{benefit.description}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* QR Code Process Section */}
|
|
<section className="py-20" style={{ backgroundColor: '#FFF5F5' }}>
|
|
<div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
|
|
<span className="font-light" style={{ color: '#1F2937' }}>Simple </span>
|
|
<span className="font-bold" style={{ color: '#F95F62' }}>3-Step Process</span>
|
|
</h2>
|
|
<p className="font-poppins text-xl" style={{ color: '#4B5563' }}>
|
|
Get connected in seconds
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{qrSteps.map((step, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: index * 0.2 }}
|
|
className="relative"
|
|
>
|
|
{/* Connecting Line */}
|
|
{index < qrSteps.length - 1 && (
|
|
<div className="hidden md:block absolute top-16 left-1/2 w-full h-0.5 -z-10" style={{ backgroundColor: '#F95F62', opacity: 0.3 }} />
|
|
)}
|
|
|
|
<div className="bg-white rounded-2xl p-8 text-center shadow-lg hover:shadow-xl transition-shadow duration-300">
|
|
{/* Step Number */}
|
|
<div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6" style={{ backgroundColor: '#F95F62' }}>
|
|
<span className="font-poppins font-bold text-2xl text-white">{step.step}</span>
|
|
</div>
|
|
|
|
{/* Icon */}
|
|
<div className="mb-4">
|
|
{index === 0 && <QrCode className="w-12 h-12 mx-auto" style={{ color: '#F95F62' }} />}
|
|
{index === 1 && <Smartphone className="w-12 h-12 mx-auto" style={{ color: '#F95F62' }} />}
|
|
{index === 2 && <Wifi className="w-12 h-12 mx-auto" style={{ color: '#F95F62' }} />}
|
|
</div>
|
|
|
|
{/* Label */}
|
|
<h3 className="font-poppins text-xl font-bold mb-3" style={{ color: '#1F2937' }}>
|
|
{step.label}
|
|
</h3>
|
|
|
|
{/* Description */}
|
|
<p className="font-poppins text-base" style={{ color: '#4B5563' }}>
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* CityCard Logo Trust Anchor */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
className="text-center mt-16"
|
|
>
|
|
<div className="inline-flex items-center gap-3 px-6 py-3 bg-white rounded-full shadow-md">
|
|
<Check className="w-5 h-5" style={{ color: '#F95F62' }} />
|
|
<span className="font-poppins font-semibold text-lg" style={{ color: '#1F2937' }}>
|
|
Powered by <span style={{ color: '#F95F62' }}>CityCard</span>
|
|
</span>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Closing Statement Section */}
|
|
<section className="py-20 bg-white">
|
|
<div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
className="max-w-4xl mx-auto text-center"
|
|
>
|
|
<p className="font-poppins text-2xl md:text-3xl leading-relaxed mb-8" style={{ color: '#1F2937' }}>
|
|
It's one more way <span className="font-bold" style={{ color: '#F95F62' }}>CityCard</span> makes your journey <span className="font-semibold" style={{ color: '#F95F62' }}>smarter</span> and more <span className="font-semibold" style={{ color: '#F95F62' }}>effortless</span>.
|
|
</p>
|
|
|
|
<button
|
|
onClick={onCheckoutClick}
|
|
className="group px-10 py-5 rounded-full flex items-center gap-3 mx-auto transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl font-poppins font-semibold text-lg text-white"
|
|
style={{ backgroundColor: '#F95F62' }}
|
|
>
|
|
Start Your Journey Today
|
|
<ArrowRight className="w-6 h-6 group-hover:translate-x-1 transition-transform duration-300" />
|
|
</button>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|