327 lines
15 KiB
TypeScript
327 lines
15 KiB
TypeScript
import { motion } from 'motion/react';
|
|
import { ArrowRight, Wifi, Hotel } from 'lucide-react';
|
|
|
|
interface HotelEsimOffersProps {
|
|
onEsimsClick?: () => void;
|
|
onHotelDiscountsClick?: () => void;
|
|
}
|
|
|
|
export function HotelEsimOffers({ onEsimsClick, onHotelDiscountsClick }: HotelEsimOffersProps) {
|
|
const cityName = localStorage.getItem("cityName")
|
|
return (
|
|
<div>
|
|
<div className="space-y-0">
|
|
|
|
{/* e-SIM Offers Section */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
className="relative overflow-hidden bg-white py-20 md:py-28"
|
|
>
|
|
{/* Subtle Background Elements */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<motion.div
|
|
className="absolute top-0 right-0 w-96 h-96 bg-primary/5 rounded-full blur-3xl"
|
|
animate={{
|
|
scale: [1, 1.2, 1],
|
|
opacity: [0.3, 0.5, 0.3],
|
|
}}
|
|
transition={{
|
|
duration: 8,
|
|
repeat: Infinity,
|
|
ease: "easeInOut"
|
|
}}
|
|
/>
|
|
<motion.div
|
|
className="absolute bottom-0 left-0 w-72 h-72 bg-orange-200/20 rounded-full blur-2xl"
|
|
animate={{
|
|
scale: [1, 1.3, 1],
|
|
opacity: [0.2, 0.4, 0.2],
|
|
}}
|
|
transition={{
|
|
duration: 6,
|
|
repeat: Infinity,
|
|
ease: "easeInOut"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-6xl mx-auto relative z-10">
|
|
{/* Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<motion.div
|
|
className="inline-flex items-center gap-2 bg-primary/10 px-4 py-2 rounded-full mb-6"
|
|
whileHover={{ scale: 1.05 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<Wifi className="w-4 h-4 text-primary" />
|
|
<span className="font-poppins text-sm font-medium text-primary">
|
|
Stay Connected in {cityName}
|
|
</span>
|
|
</motion.div>
|
|
<h2 className="font-poppins text-3xl md:text-5xl lg:text-6xl leading-tight text-foreground mb-6">
|
|
<span className="font-light">Travel </span>
|
|
<span className="font-bold text-primary italic">Connected</span>
|
|
</h2>
|
|
<p className="font-poppins text-xl leading-relaxed font-normal text-gray-700 max-w-2xl mx-auto">
|
|
Get instant e-SIM connectivity across Australia. Stay online from the moment you land in {cityName}.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Main Card */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.3 }}
|
|
onClick={onEsimsClick}
|
|
className="bg-gradient-to-br from-primary to-orange-500 rounded-3xl p-8 md:p-12 shadow-2xl cursor-pointer group relative overflow-hidden"
|
|
whileHover={{ scale: 1.02 }}
|
|
>
|
|
<motion.div
|
|
className="absolute top-0 right-0 w-40 h-40 bg-white/20 rounded-full blur-2xl"
|
|
animate={{
|
|
scale: [1, 1.5, 1],
|
|
}}
|
|
transition={{
|
|
duration: 4,
|
|
repeat: Infinity,
|
|
ease: "easeInOut"
|
|
}}
|
|
/>
|
|
|
|
<div className="relative z-10 grid md:grid-cols-2 gap-8 items-center">
|
|
{/* Left Content */}
|
|
<div>
|
|
<div className="inline-flex items-center gap-2 bg-white/20 px-3 py-1 rounded-full mb-4">
|
|
<span className="font-poppins text-xs font-semibold text-white">🇦🇺 AUSTRALIA-WIDE COVERAGE</span>
|
|
</div>
|
|
<h3 className="font-poppins text-3xl md:text-4xl font-semibold text-white mb-4 leading-tight">
|
|
Exclusive e-SIM Offers for {cityName} Visitors
|
|
</h3>
|
|
<p className="font-poppins text-base text-white/90 mb-6">
|
|
No more hunting for local SIM cards at the airport. Activate your e-SIM instantly and explore {cityName} with seamless connectivity.
|
|
</p>
|
|
|
|
<motion.div
|
|
className="inline-flex items-center gap-3 bg-white text-primary py-4 px-8 rounded-full font-poppins font-semibold"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
>
|
|
<span>Explore Plans</span>
|
|
<motion.div
|
|
animate={{ x: [0, 5, 0] }}
|
|
transition={{ duration: 1.5, repeat: Infinity }}
|
|
>
|
|
<ArrowRight className="w-5 h-5" />
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Right Features */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{[
|
|
{ icon: '🌐', label: 'Australia Coverage', value: '100%', unit: 'nationwide' },
|
|
{ icon: '⚡', label: 'Instant Setup', value: '< 1', unit: 'minute' },
|
|
{ icon: '💰', label: 'Save Up To', value: '85%', unit: 'vs roaming' },
|
|
{ icon: '🔒', label: 'Secure', value: '100%', unit: 'encrypted' }
|
|
].map((item, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.4, delay: 0.4 + index * 0.1 }}
|
|
className="bg-white/15 backdrop-blur-md rounded-2xl p-4 text-center"
|
|
>
|
|
<div className="text-3xl mb-2">{item.icon}</div>
|
|
<div className="font-poppins text-2xl font-bold text-white mb-1">{item.value}</div>
|
|
<div className="font-poppins text-xs text-white/80">{item.unit}</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Hotel Discounts Section */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
className="relative overflow-hidden bg-gradient-to-br from-orange-50 via-pink-50 to-red-50 py-20 md:py-28"
|
|
>
|
|
{/* Animated Background Elements */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<motion.div
|
|
className="absolute top-0 right-0 w-96 h-96 bg-primary/10 rounded-full blur-3xl"
|
|
animate={{
|
|
scale: [1, 1.2, 1],
|
|
opacity: [0.3, 0.5, 0.3],
|
|
}}
|
|
transition={{
|
|
duration: 8,
|
|
repeat: Infinity,
|
|
ease: "easeInOut"
|
|
}}
|
|
/>
|
|
<motion.div
|
|
className="absolute bottom-0 left-0 w-72 h-72 bg-orange-200/30 rounded-full blur-2xl"
|
|
animate={{
|
|
scale: [1, 1.3, 1],
|
|
opacity: [0.2, 0.4, 0.2],
|
|
}}
|
|
transition={{
|
|
duration: 6,
|
|
repeat: Infinity,
|
|
ease: "easeInOut"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-6xl mx-auto relative z-10">
|
|
{/* Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<motion.div
|
|
className="inline-flex items-center gap-2 bg-primary/10 px-4 py-2 rounded-full mb-6"
|
|
whileHover={{ scale: 1.05 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<Hotel className="w-4 h-4 text-primary" />
|
|
<span className="font-poppins text-sm font-medium text-primary">
|
|
Premium {cityName} Hotels
|
|
</span>
|
|
</motion.div>
|
|
<h2 className="font-poppins text-3xl md:text-5xl lg:text-6xl leading-tight text-foreground mb-6">
|
|
<span className="font-light">Sleep in </span>
|
|
<span className="font-bold text-primary italic">Luxury</span>
|
|
</h2>
|
|
<p className="font-poppins text-xl leading-relaxed font-normal text-gray-700 max-w-2xl mx-auto">
|
|
Unlock exclusive rates at {cityName}'s finest hotels. Your CityCard membership opens doors to premium CBD and waterfront stays.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Main Card */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.3 }}
|
|
onClick={onHotelDiscountsClick}
|
|
className="bg-white rounded-3xl p-8 md:p-12 shadow-2xl cursor-pointer group relative overflow-hidden border border-gray-100"
|
|
whileHover={{ scale: 1.02, y: -5 }}
|
|
>
|
|
<div className="grid md:grid-cols-2 gap-8 items-center mb-8">
|
|
{/* Left Content */}
|
|
<div>
|
|
<div className="inline-flex items-center gap-2 bg-gradient-to-r from-primary to-orange-500 px-4 py-2 rounded-full mb-4">
|
|
<span className="font-poppins text-xs font-semibold text-white">🔥 MARRIOTT BONVOY PARTNER</span>
|
|
</div>
|
|
<h3 className="font-poppins text-3xl md:text-4xl font-semibold text-foreground mb-4 leading-tight">
|
|
{cityName} Premium Stays at <span className="text-primary italic">Unbeatable Prices</span>
|
|
</h3>
|
|
<p className="font-poppins text-base text-gray-700 mb-6">
|
|
Access exclusive member rates at {cityName}'s top hotels including Crown Towers, W {cityName}, and premium CBD properties. Enjoy complimentary upgrades and special amenities.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Right - Savings Badge */}
|
|
<div className="flex justify-center">
|
|
<motion.div
|
|
className="relative"
|
|
whileHover={{ rotate: [0, -5, 5, 0] }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<div className="bg-gradient-to-br from-primary to-orange-500 rounded-3xl p-8 text-center shadow-xl">
|
|
<div className="font-poppins text-6xl font-bold text-white mb-2">25%</div>
|
|
<div className="font-poppins text-lg text-white/90 mb-1">Average Savings</div>
|
|
<div className="font-poppins text-sm text-white/70">on {cityName} hotels</div>
|
|
</div>
|
|
<motion.div
|
|
className="absolute -top-2 -right-2 bg-yellow-400 rounded-full px-3 py-1"
|
|
animate={{
|
|
scale: [1, 1.1, 1],
|
|
}}
|
|
transition={{
|
|
duration: 2,
|
|
repeat: Infinity,
|
|
}}
|
|
>
|
|
<span className="font-poppins text-xs font-bold text-gray-900">NEW</span>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
|
|
{[
|
|
{ icon: '🏆', title: 'Premium Locations', desc: 'CBD, Southbank & St Kilda' },
|
|
{ icon: '💎', title: 'Member Perks', desc: 'Free upgrades included' },
|
|
{ icon: '⚡', title: 'Instant Booking', desc: 'Confirm in seconds' }
|
|
].map((feature, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
|
|
className="flex items-start gap-3 p-4 rounded-2xl bg-gradient-to-br from-orange-50 to-pink-50"
|
|
>
|
|
<div className="text-3xl">{feature.icon}</div>
|
|
<div>
|
|
<h4 className="font-poppins font-semibold text-foreground mb-1">{feature.title}</h4>
|
|
<p className="font-poppins text-sm text-gray-600">{feature.desc}</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA */}
|
|
<div className="text-center">
|
|
<motion.div
|
|
className="inline-flex items-center gap-3 bg-primary text-white py-4 px-8 rounded-full font-poppins font-semibold shadow-lg"
|
|
whileHover={{ scale: 1.05, boxShadow: "0 20px 60px rgba(249, 95, 98, 0.4)" }}
|
|
whileTap={{ scale: 0.98 }}
|
|
>
|
|
<span>View Hotel Deals</span>
|
|
<motion.div
|
|
animate={{ x: [0, 5, 0] }}
|
|
transition={{ duration: 1.5, repeat: Infinity }}
|
|
>
|
|
<ArrowRight className="w-5 h-5" />
|
|
</motion.div>
|
|
</motion.div>
|
|
<p className="font-poppins text-sm text-gray-500 mt-4">
|
|
Limited time offer • No booking fees • Best price guarantee
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|