solved esim and hotel discount nav
This commit is contained in:
priyanshuvish
@@ -5,7 +5,6 @@ import Navbar from './Navbar';
|
||||
import { SubNavbar } from './SubNavbar';
|
||||
import { Footer } from './Footer';
|
||||
import { ImageWithFallback } from './figma/ImageWithFallback';
|
||||
import { Layout } from '../Layout';
|
||||
|
||||
interface EsimsPageProps {
|
||||
onBackClick: () => void;
|
||||
@@ -89,14 +88,44 @@ export function EsimsPage({
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout
|
||||
activeCity=""
|
||||
onSignInClick={onSignInClick}
|
||||
onSignOutClick={onSignOutClick}
|
||||
user={user}
|
||||
showCitySubmenu={true}
|
||||
>
|
||||
<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' }}>
|
||||
@@ -279,7 +308,7 @@ export function EsimsPage({
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,9 +5,8 @@ import Navbar from './Navbar';
|
||||
import { SubNavbar } from './SubNavbar';
|
||||
import { Footer } from './Footer';
|
||||
import { ImageWithFallback } from './figma/ImageWithFallback';
|
||||
import cityCardsLogo from '../assets/cit-logo.png';
|
||||
import cityCardsLogo from '../assets/cityLogo.png';
|
||||
import marriottHotelImage from '../assets/marriott-hotel.png';
|
||||
import { Layout } from '../Layout';
|
||||
|
||||
interface HotelDiscountsPageProps {
|
||||
onBackClick: () => void;
|
||||
@@ -80,192 +79,221 @@ export function HotelDiscountsPage({
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout
|
||||
activeCity=""
|
||||
onSignInClick={onSignInClick}
|
||||
onSignOutClick={onSignOutClick}
|
||||
user={user}
|
||||
showCitySubmenu={true}
|
||||
>
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Navbar */}
|
||||
<Navbar
|
||||
activeCity="Paris"
|
||||
onCityChange={() => {}}
|
||||
onHomeClick={onHomeClick}
|
||||
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}
|
||||
onHotelDiscountsClick={onHotelDiscountsClick}
|
||||
currentPage={currentPage}
|
||||
isUserSignedIn={!!user}
|
||||
user={user}
|
||||
/>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-64 pb-20 overflow-hidden">
|
||||
{/* Background Image with Overlay */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<ImageWithFallback
|
||||
src={marriottHotelImage}
|
||||
alt="Marriott Hotel"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/40 to-background" />
|
||||
</div>
|
||||
{/* Sub Navbar */}
|
||||
<SubNavbar
|
||||
activePage="hotel-discounts"
|
||||
onCityCardsClick={onCityCardsClick}
|
||||
onMagicItineraryClick={onMagicItineraryClick}
|
||||
onPostCardsClick={onPostCardsClick}
|
||||
onOffersClick={onOffersClick}
|
||||
onEsimsClick={onEsimsClick}
|
||||
onHotelDiscountsClick={onHotelDiscountsClick}
|
||||
/>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-64 pb-20 overflow-hidden">
|
||||
{/* Background Image with Overlay */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<ImageWithFallback
|
||||
src={marriottHotelImage}
|
||||
alt="Marriott Hotel"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/40 to-background" />
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center"
|
||||
>
|
||||
{/* CityCard Logo */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center"
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="flex justify-center mb-8"
|
||||
>
|
||||
{/* CityCard Logo */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="flex justify-center mb-8"
|
||||
>
|
||||
</motion.div>
|
||||
|
||||
{/* Heading */}
|
||||
<h1 className="font-poppins text-4xl md:text-5xl lg:text-6xl leading-tight mb-6 font-semibold text-white max-w-4xl mx-auto">
|
||||
Enjoy 20% Off Iconic Marriott Hotels — Exclusively with CityCard
|
||||
</h1>
|
||||
|
||||
{/* Tagline */}
|
||||
<p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal text-white/90 max-w-2xl mx-auto">
|
||||
Make every stay as unforgettable as the city you're exploring.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 1: Partnership Introduction - White Background */}
|
||||
<section className="py-20 md:py-28 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, margin: "-100px" }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="max-w-4xl mx-auto text-center"
|
||||
>
|
||||
<p className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-relaxed font-normal mb-8" style={{ color: '#1F2937' }}>
|
||||
Your CityCard unlocks more than just attractions — it also opens doors to exceptional stays.
|
||||
</p>
|
||||
<p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal" style={{ color: '#4B5563' }}>
|
||||
Thanks to our exclusive partnership with <span className="font-semibold" style={{ color: '#F95F62' }}>Marriott Hotels</span>, CityCard holders enjoy <span className="font-semibold" style={{ color: '#F95F62' }}>20% off best available rates</span> across a curated selection of properties in the city.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 2: Hotel Variety - Pink Background */}
|
||||
<section className="py-20 md:py-28" 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, margin: "-100px" }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="max-w-4xl mx-auto text-center"
|
||||
>
|
||||
<h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-6">
|
||||
<span className="font-light" style={{ color: '#1F2937' }}>Choose from a </span>
|
||||
<span className="font-bold" style={{ color: '#F95F62' }}>Wide Variety</span>
|
||||
</h2>
|
||||
<p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal" style={{ color: '#4B5563' }}>
|
||||
Choose from a wide variety of Marriott hotels — from elegant urban hideaways and premium city-centre locations to luxurious five-star experiences — all designed to make your trip <span className="font-semibold" style={{ color: '#F95F62' }}>effortless</span>, <span className="font-semibold" style={{ color: '#F95F62' }}>comfortable</span>, and <span className="font-semibold" style={{ color: '#F95F62' }}>memorable</span>.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 3: Benefits - White Background with Pink Cards */}
|
||||
<section className="py-20 md:py-28 bg-white">
|
||||
<div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
|
||||
{/* Heading */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
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' }}>Simply use your CityCard</span>
|
||||
<br />
|
||||
<span className="font-bold" style={{ color: '#F95F62' }}>booking link to:</span>
|
||||
</h2>
|
||||
</motion.div>
|
||||
<h1 className="font-poppins text-4xl md:text-5xl lg:text-6xl leading-tight mb-6 font-semibold text-white max-w-4xl mx-auto">
|
||||
Enjoy 20% Off Iconic Marriott Hotels — Exclusively with CityCard
|
||||
</h1>
|
||||
|
||||
{/* Benefits Grid */}
|
||||
<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto mb-16">
|
||||
{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 flex-col items-center text-center p-6 rounded-2xl transition-all duration-300 hover:shadow-lg"
|
||||
style={{ backgroundColor: '#FFF5F5' }}
|
||||
>
|
||||
<div className="w-16 h-16 rounded-full flex items-center justify-center mb-6" style={{ backgroundColor: '#F95F62' }}>
|
||||
<IconComponent className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="font-poppins text-lg font-semibold mb-3" style={{ color: '#1F2937' }}>
|
||||
{benefit.title}
|
||||
</h3>
|
||||
<p className="font-poppins text-base font-normal" style={{ color: '#4B5563' }}>
|
||||
{benefit.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
{/* Tagline */}
|
||||
<p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal text-white/90 max-w-2xl mx-auto">
|
||||
Make every stay as unforgettable as the city you're exploring.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 1: Partnership Introduction - White Background */}
|
||||
<section className="py-20 md:py-28 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, margin: "-100px" }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="max-w-4xl mx-auto text-center"
|
||||
>
|
||||
<p className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-relaxed font-normal mb-8" style={{ color: '#1F2937' }}>
|
||||
Your CityCard unlocks more than just attractions — it also opens doors to exceptional stays.
|
||||
</p>
|
||||
<p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal" style={{ color: '#4B5563' }}>
|
||||
Thanks to our exclusive partnership with <span className="font-semibold" style={{ color: '#F95F62' }}>Marriott Hotels</span>, CityCard holders enjoy <span className="font-semibold" style={{ color: '#F95F62' }}>20% off best available rates</span> across a curated selection of properties in the city.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 2: Hotel Variety - Pink Background */}
|
||||
<section className="py-20 md:py-28" 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, margin: "-100px" }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="max-w-4xl mx-auto text-center"
|
||||
>
|
||||
<h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-6">
|
||||
<span className="font-light" style={{ color: '#1F2937' }}>Choose from a </span>
|
||||
<span className="font-bold" style={{ color: '#F95F62' }}>Wide Variety</span>
|
||||
</h2>
|
||||
<p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal" style={{ color: '#4B5563' }}>
|
||||
Choose from a wide variety of Marriott hotels — from elegant urban hideaways and premium city-centre locations to luxurious five-star experiences — all designed to make your trip <span className="font-semibold" style={{ color: '#F95F62' }}>effortless</span>, <span className="font-semibold" style={{ color: '#F95F62' }}>comfortable</span>, and <span className="font-semibold" style={{ color: '#F95F62' }}>memorable</span>.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 3: Benefits - White Background with Pink Cards */}
|
||||
<section className="py-20 md:py-28 bg-white">
|
||||
<div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
|
||||
{/* Heading */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
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' }}>Simply use your CityCard</span>
|
||||
<br />
|
||||
<span className="font-bold" style={{ color: '#F95F62' }}>booking link to:</span>
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
{/* Benefits Grid */}
|
||||
<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto mb-16">
|
||||
{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 flex-col items-center text-center p-6 rounded-2xl transition-all duration-300 hover:shadow-lg"
|
||||
style={{ backgroundColor: '#FFF5F5' }}
|
||||
>
|
||||
<div className="w-16 h-16 rounded-full flex items-center justify-center mb-6" style={{ backgroundColor: '#F95F62' }}>
|
||||
<IconComponent className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="font-poppins text-lg font-semibold mb-3" style={{ color: '#1F2937' }}>
|
||||
{benefit.title}
|
||||
</h3>
|
||||
<p className="font-poppins text-base font-normal" style={{ color: '#4B5563' }}>
|
||||
{benefit.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Closing Statement */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="text-center"
|
||||
>
|
||||
<div className="max-w-4xl mx-auto mb-8">
|
||||
<p className="font-poppins text-2xl md:text-3xl leading-relaxed font-normal" style={{ color: '#1F2937' }}>
|
||||
It's just one more way <span className="font-bold" style={{ color: '#F95F62' }}>CityCard</span> makes exploring <span className="font-semibold" style={{ color: '#F95F62' }}>smarter</span>, <span className="font-semibold" style={{ color: '#F95F62' }}>simpler</span>, and <span className="font-semibold" style={{ color: '#F95F62' }}>more rewarding</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Closing Statement */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="text-center"
|
||||
<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' }}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto mb-8">
|
||||
<p className="font-poppins text-2xl md:text-3xl leading-relaxed font-normal" style={{ color: '#1F2937' }}>
|
||||
It's just one more way <span className="font-bold" style={{ color: '#F95F62' }}>CityCard</span> makes exploring <span className="font-semibold" style={{ color: '#F95F62' }}>smarter</span>, <span className="font-semibold" style={{ color: '#F95F62' }}>simpler</span>, and <span className="font-semibold" style={{ color: '#F95F62' }}>more rewarding</span>.
|
||||
</p>
|
||||
</div>
|
||||
Get Your CityCard Today
|
||||
<ArrowRight className="w-6 h-6 group-hover:translate-x-1 transition-transform duration-300" />
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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' }}
|
||||
>
|
||||
Get Your CityCard Today
|
||||
<ArrowRight className="w-6 h-6 group-hover:translate-x-1 transition-transform duration-300" />
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Trust Anchor Section with Logo */}
|
||||
<section className="py-16 bg-white border-t border-gray-100">
|
||||
<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: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="flex flex-col items-center text-center"
|
||||
>
|
||||
<img
|
||||
src={cityCardsLogo}
|
||||
alt="CityCard"
|
||||
className="h-12 md:h-14 w-auto object-contain mb-6"
|
||||
/>
|
||||
<p className="font-poppins text-lg md:text-xl font-normal max-w-2xl" style={{ color: '#4B5563' }}>
|
||||
Your gateway to unforgettable city experiences and exceptional hotel stays
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Trust Anchor Section with Logo */}
|
||||
<section className="py-16 bg-white border-t border-gray-100">
|
||||
<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: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="flex flex-col items-center text-center"
|
||||
>
|
||||
<img
|
||||
src={cityCardsLogo}
|
||||
alt="CityCard"
|
||||
className="h-12 md:h-14 w-auto object-contain mb-6"
|
||||
/>
|
||||
<p className="font-poppins text-lg md:text-xl font-normal max-w-2xl" style={{ color: '#4B5563' }}>
|
||||
Your gateway to unforgettable city experiences and exceptional hotel stays
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user