195 lines
8.4 KiB
TypeScript
195 lines
8.4 KiB
TypeScript
import { ArrowRight, Star, Clock, MapPin } from 'lucide-react';
|
|
import { ImageWithFallback } from './figma/ImageWithFallback';
|
|
import { Button } from './ui/button';
|
|
import { motion } from 'motion/react';
|
|
|
|
const otherCities = [
|
|
{
|
|
id: 1,
|
|
name: 'London',
|
|
country: 'United Kingdom',
|
|
rating: 4.8,
|
|
experiences: 180,
|
|
duration: '2-3 days',
|
|
highlight: 'Historic Landmarks',
|
|
image: 'https://images.unsplash.com/photo-1559788591-f5ea2371b915?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsb25kb24lMjBicmlkZ2UlMjBjaXR5c2NhcGV8ZW58MXx8fHwxNzU2MTIzNTYyfDA&ixlib=rb-4.1.0&q=80&w=1080',
|
|
description: 'Discover centuries of history, royal palaces, and world-class museums in England\'s capital city.'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Hong Kong',
|
|
country: 'China',
|
|
rating: 4.7,
|
|
experiences: 125,
|
|
duration: '3-4 days',
|
|
highlight: 'Urban Adventure',
|
|
image: 'https://images.unsplash.com/photo-1698416286339-7edbf0922953?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob25nJTIwa29uZyUyMHNreWxpbmUlMjBuaWdodHxlbnwxfHx8fDE3NTYxMjM1NjZ8MA&ixlib=rb-4.1.0&q=80&w=1080',
|
|
description: 'Experience the perfect blend of East meets West with stunning skylines and incredible cuisine.'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Istanbul',
|
|
country: 'Turkey',
|
|
rating: 4.6,
|
|
experiences: 95,
|
|
duration: '3-5 days',
|
|
highlight: 'Cultural Heritage',
|
|
image: 'https://images.unsplash.com/photo-1669117403979-be8e9448d9b3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpc3RhbmJ1bCUyMGJvc3Bob3J1cyUyMG1vc3F1ZXxlbnwxfHx8fDE3NTYxMjM1NzB8MA&ixlib=rb-4.1.0&q=80&w=1080',
|
|
description: 'Immerse yourself in the crossroads of Europe and Asia with stunning architecture and rich history.'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Cairo',
|
|
country: 'Egypt',
|
|
rating: 4.5,
|
|
experiences: 78,
|
|
duration: '4-5 days',
|
|
highlight: 'Ancient Wonders',
|
|
image: 'https://images.unsplash.com/photo-1705874930271-88eeb8f533dc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjYWlybyUyMHB5cmFtaWRzJTIwYW5jaWVudHxlbnwxfHx8fDE3NTYxMjM1NzR8MA&ixlib=rb-4.1.0&q=80&w=1080',
|
|
description: 'Journey through millennia of civilization with the Great Pyramids and the treasures of the Nile.'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'Vancouver',
|
|
country: 'Canada',
|
|
rating: 4.8,
|
|
experiences: 110,
|
|
duration: '2-3 days',
|
|
highlight: 'Nature & City',
|
|
image: 'https://images.unsplash.com/photo-1730661906876-18bfc6e95f2f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx2YW5jb3V2ZXIlMjBtb3VudGFpbnMlMjBjaXR5c2NhcGV8ZW58MXx8fHwxNzU2MTIzNTc4fDA&ixlib=rb-4.1.0&q=80&w=1080',
|
|
description: 'Where urban sophistication meets breathtaking natural beauty, from mountains to ocean.'
|
|
},
|
|
{
|
|
id: 6,
|
|
name: 'Miami',
|
|
country: 'United States',
|
|
rating: 4.6,
|
|
experiences: 135,
|
|
duration: '3-4 days',
|
|
highlight: 'Beach Culture',
|
|
image: 'https://images.unsplash.com/photo-1735825713164-192ff57874bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtaWFtaSUyMGJlYWNoJTIwYXJ0JTIwZGVjb3xlbnwxfHx8fDE3NTYxMjM1ODR8MA&ixlib=rb-4.1.0&q=80&w=1080',
|
|
description: 'Dive into vibrant Art Deco architecture, world-famous beaches, and electric nightlife.'
|
|
}
|
|
];
|
|
|
|
export function OtherCities() {
|
|
return (
|
|
<section className="py-20 bg-white">
|
|
<div className="container mx-auto px-4">
|
|
{/* Header */}
|
|
<motion.div
|
|
className="text-center mb-16"
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<h2 className="heading-dynamic text-4xl md:text-5xl text-gray-900 mb-6">
|
|
<span className="font-light">Explore</span>{' '}
|
|
<span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
|
|
Amazing
|
|
</span>{' '}
|
|
<span className="font-normal">Cities</span>{' '}
|
|
<span className="font-semibold text-emphasis">Worldwide</span>
|
|
</h2>
|
|
<p className="font-poppins text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed font-normal">
|
|
Discover incredible destinations around the world with our comprehensive city guides and curated experiences.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Cities Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{otherCities.map((city, index) => (
|
|
<motion.div
|
|
key={city.id}
|
|
className="group relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500"
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -8 }}
|
|
>
|
|
{/* Image */}
|
|
<div className="relative h-64 overflow-hidden">
|
|
<ImageWithFallback
|
|
src={city.image}
|
|
alt={city.name}
|
|
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
|
|
/>
|
|
|
|
{/* Gradient Overlay */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent" />
|
|
|
|
{/* Rating Badge */}
|
|
<div className="absolute top-4 left-4 bg-white/95 backdrop-blur-sm px-3 py-1 rounded-full flex items-center gap-1">
|
|
<Star className="w-4 h-4 text-yellow-500 fill-current" />
|
|
<span className="text-sm font-semibold text-gray-900">{city.rating}</span>
|
|
</div>
|
|
|
|
{/* Highlight Badge */}
|
|
<div className="absolute top-4 right-4 bg-primary/90 backdrop-blur-sm px-3 py-1 rounded-full">
|
|
<span className="text-sm font-medium text-white">{city.highlight}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-6">
|
|
{/* City Info */}
|
|
<div className="mb-4">
|
|
<h3 className="text-2xl font-bold text-gray-900 mb-1">{city.name}</h3>
|
|
<div className="flex items-center text-gray-600 mb-3">
|
|
<MapPin className="w-4 h-4 mr-1" />
|
|
<span className="text-sm">{city.country}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="flex items-center justify-between mb-4 text-sm text-gray-600">
|
|
<div className="flex items-center gap-1">
|
|
<span className="font-semibold text-primary">{city.experiences}</span>
|
|
<span>experiences</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Clock className="w-4 h-4" />
|
|
<span>{city.duration}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<p className="text-gray-600 mb-6 line-clamp-3">
|
|
{city.description}
|
|
</p>
|
|
|
|
{/* CTA Button */}
|
|
<Button
|
|
className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-medium py-3 rounded-2xl transition-all duration-300 group/btn"
|
|
>
|
|
<span>Explore {city.name}</span>
|
|
<ArrowRight className="w-4 h-4 ml-2 group-hover/btn:translate-x-1 transition-transform duration-300" />
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bottom CTA */}
|
|
<motion.div
|
|
className="text-center mt-16"
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="px-8 py-4 text-lg border-2 border-primary text-primary hover:bg-primary hover:text-white transition-all duration-300"
|
|
>
|
|
<span>View All Cities</span>
|
|
<ArrowRight className="w-5 h-5 ml-2" />
|
|
</Button>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |