201 lines
9.3 KiB
TypeScript
201 lines
9.3 KiB
TypeScript
import { Ticket, TrendingDown, Sparkles, DollarSign, Calendar, Check } from 'lucide-react';
|
|
import { motion } from 'motion/react';
|
|
|
|
const attractions = [
|
|
{ name: 'Royal Botanic Gardens', price: 25 },
|
|
{ name: 'Eureka Skydeck', price: 32 },
|
|
{ name: 'Queen Victoria Market Tour', price: 45 },
|
|
{ name: 'Melbourne Zoo', price: 42 },
|
|
{ name: 'Street Art Tour', price: 55 },
|
|
{ name: 'Harbour Cruise', price: 38 },
|
|
{ name: 'Royal Exhibition Building', price: 25 },
|
|
{ name: 'Melbourne Museum', price: 28 }
|
|
];
|
|
|
|
export function SmartSaving() {
|
|
const totalIndividualPrice = attractions.reduce((sum, attr) => sum + attr.price, 0);
|
|
const cityCardPrice = 99;
|
|
const savings = totalIndividualPrice - cityCardPrice;
|
|
const savingsPercent = Math.round((savings / totalIndividualPrice) * 100);
|
|
|
|
return (
|
|
<section className="py-12 md:py-16 bg-gradient-to-br from-green-50/30 to-blue-50/30">
|
|
<div className="container mx-auto px-4">
|
|
{/* Header */}
|
|
<div className="text-center mb-10">
|
|
<div className="inline-flex items-center gap-2 bg-gradient-to-r from-primary/10 to-secondary/10 px-4 py-2 rounded-full mb-4">
|
|
<div className="w-2 h-2 bg-gradient-to-r from-primary to-secondary rounded-full"></div>
|
|
<span className="font-poppins text-sm font-medium bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
|
|
Maximum Value
|
|
</span>
|
|
</div>
|
|
<h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight text-gray-900 mb-3">
|
|
<span className="font-semibold" style={{ color: '#F95F62' }}>Smart Savings</span>
|
|
</h2>
|
|
<p className="font-poppins text-lg leading-relaxed font-normal text-gray-600 max-w-3xl mx-auto">
|
|
Save up to 40% compared to buying individual tickets
|
|
</p>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="bg-white rounded-3xl p-8 border border-gray-100 shadow-lg">
|
|
|
|
{/* Hero Tagline Cards */}
|
|
<div className="mb-8">
|
|
<div className="grid grid-cols-3 gap-4 max-w-md mx-auto">
|
|
{/* 3 Days Card */}
|
|
<motion.div
|
|
className="rounded-2xl p-4 text-center"
|
|
style={{ backgroundColor: 'rgba(249, 95, 98, 0.08)' }}
|
|
animate={{
|
|
boxShadow: [
|
|
'0 4px 6px rgba(249, 95, 98, 0.1)',
|
|
'0 8px 16px rgba(249, 95, 98, 0.2)',
|
|
'0 4px 6px rgba(249, 95, 98, 0.1)'
|
|
],
|
|
}}
|
|
transition={{
|
|
duration: 2,
|
|
repeat: Infinity,
|
|
ease: "easeInOut"
|
|
}}
|
|
>
|
|
<Calendar className="w-8 h-8 mx-auto mb-2" style={{ color: '#F95F62' }} />
|
|
<div className="font-poppins font-semibold text-2xl mb-1" style={{ color: '#F95F62' }}>3</div>
|
|
<div className="font-poppins text-xs font-medium text-gray-600">Days</div>
|
|
</motion.div>
|
|
|
|
{/* 8 Experiences Card */}
|
|
<motion.div
|
|
className="rounded-2xl p-4 text-center"
|
|
style={{ backgroundColor: 'rgba(249, 95, 98, 0.08)' }}
|
|
animate={{
|
|
boxShadow: [
|
|
'0 4px 6px rgba(249, 95, 98, 0.1)',
|
|
'0 8px 16px rgba(249, 95, 98, 0.2)',
|
|
'0 4px 6px rgba(249, 95, 98, 0.1)'
|
|
],
|
|
}}
|
|
transition={{
|
|
duration: 2,
|
|
repeat: Infinity,
|
|
delay: 0.3,
|
|
ease: "easeInOut"
|
|
}}
|
|
>
|
|
<Ticket className="w-8 h-8 mx-auto mb-2" style={{ color: '#F95F62' }} />
|
|
<div className="font-poppins font-semibold text-2xl mb-1" style={{ color: '#F95F62' }}>8</div>
|
|
<div className="font-poppins text-xs font-medium text-gray-600">Experiences</div>
|
|
</motion.div>
|
|
|
|
{/* 1 Pass Card */}
|
|
<motion.div
|
|
className="rounded-2xl p-4 text-center"
|
|
style={{ backgroundColor: 'rgba(249, 95, 98, 0.08)' }}
|
|
animate={{
|
|
boxShadow: [
|
|
'0 4px 6px rgba(249, 95, 98, 0.1)',
|
|
'0 8px 16px rgba(249, 95, 98, 0.2)',
|
|
'0 4px 6px rgba(249, 95, 98, 0.1)'
|
|
],
|
|
}}
|
|
transition={{
|
|
duration: 2,
|
|
repeat: Infinity,
|
|
delay: 0.6,
|
|
ease: "easeInOut"
|
|
}}
|
|
>
|
|
<Sparkles className="w-8 h-8 mx-auto mb-2" style={{ color: '#F95F62' }} />
|
|
<div className="font-poppins font-semibold text-2xl mb-1" style={{ color: '#F95F62' }}>1</div>
|
|
<div className="font-poppins text-xs font-medium text-gray-600">Pass</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Price Comparison */}
|
|
<div className="max-w-md mx-auto space-y-3 mb-8">
|
|
<div className="flex items-center justify-between py-2 border-b border-gray-100">
|
|
<span className="font-poppins font-normal text-sm text-gray-600">Individual Tickets Total:</span>
|
|
<span className="font-poppins font-semibold text-lg text-gray-900">${totalIndividualPrice}</span>
|
|
</div>
|
|
|
|
<div className="flex justify-center -my-1">
|
|
<motion.div
|
|
animate={{ y: [0, 5, 0] }}
|
|
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
|
|
>
|
|
<TrendingDown className="w-5 h-5" style={{ color: '#F95F62' }} />
|
|
</motion.div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-2 border-b border-gray-100">
|
|
<span className="font-poppins font-normal text-sm text-gray-600">CityCard Price:</span>
|
|
<span className="font-poppins font-semibold text-lg" style={{ color: '#F95F62' }}>${cityCardPrice}</span>
|
|
</div>
|
|
|
|
<motion.div
|
|
className="flex items-center justify-between py-3 px-4 rounded-xl"
|
|
style={{ backgroundColor: 'rgba(249, 95, 98, 0.1)' }}
|
|
animate={{
|
|
backgroundColor: ['rgba(249, 95, 98, 0.1)', 'rgba(249, 95, 98, 0.18)', 'rgba(249, 95, 98, 0.1)'],
|
|
}}
|
|
transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<DollarSign className="w-5 h-5" style={{ color: '#F95F62' }} />
|
|
<span className="font-poppins font-semibold text-sm text-gray-900">You Save:</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="font-poppins font-semibold text-xl" style={{ color: '#F95F62' }}>${savings}</div>
|
|
<div className="font-poppins text-xs font-medium" style={{ color: '#F95F62' }}>({savingsPercent}% off)</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Attractions Included */}
|
|
<div className="mb-6">
|
|
<h3 className="font-poppins font-semibold text-gray-900 mb-4 text-center">
|
|
What's Included
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 max-w-2xl mx-auto">
|
|
{attractions.map((attraction, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="flex items-center justify-between p-2.5 rounded-lg bg-gray-50"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Ticket className="w-4 h-4 text-gray-600" />
|
|
<span className="font-poppins text-sm font-normal text-gray-900">{attraction.name}</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="font-poppins text-xs font-medium text-gray-400 line-through">${attraction.price}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Benefits */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 max-w-2xl mx-auto">
|
|
{[
|
|
'Skip-the-line access',
|
|
'Flexible 3-day validity',
|
|
'Digital pass on phone',
|
|
'Free 24hr cancellation'
|
|
].map((benefit, idx) => (
|
|
<div key={idx} className="flex items-center gap-2">
|
|
<div className="w-4 h-4 rounded-full flex items-center justify-center" style={{ backgroundColor: 'rgba(249, 95, 98, 0.1)' }}>
|
|
<Check className="w-2.5 h-2.5" style={{ color: '#F95F62' }} />
|
|
</div>
|
|
<span className="font-poppins text-sm font-normal text-gray-700">{benefit}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |