55 lines
No EOL
2 KiB
TypeScript
55 lines
No EOL
2 KiB
TypeScript
import { MapPin, Star, Clock } from "lucide-react";
|
|
|
|
const SpotlightsSection = () => {
|
|
const spotlights = [
|
|
{
|
|
icon: MapPin,
|
|
title: "Prime Locations",
|
|
description: "Strategically located properties in the heart of major cities and tourist destinations worldwide."
|
|
},
|
|
{
|
|
icon: Star,
|
|
title: "Premium Service",
|
|
description: "Exceptional hospitality with personalized service tailored to exceed your expectations every time."
|
|
},
|
|
{
|
|
icon: Clock,
|
|
title: "Instant Booking",
|
|
description: "Book instantly with real-time availability and immediate confirmation for a seamless experience."
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section className="py-16 lg:py-24 bg-muted/20">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Section Title */}
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-section-title">spotlights</h2>
|
|
<p className="text-muted-foreground text-lg mt-4 max-w-2xl mx-auto">
|
|
Discover what makes our accommodation service stand out from the rest
|
|
</p>
|
|
</div>
|
|
|
|
{/* Spotlights Grid */}
|
|
<div className="grid md:grid-cols-3 gap-8 lg:gap-12">
|
|
{spotlights.map((spotlight, index) => (
|
|
<div key={index} className="text-center space-y-6 group">
|
|
<div className="mx-auto w-20 h-20 bg-secondary/10 rounded-2xl flex items-center justify-center group-hover:bg-secondary/20 transition-colors duration-300">
|
|
<spotlight.icon className="w-10 h-10 text-secondary" />
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<h3 className="text-xl font-medium">{spotlight.title}</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{spotlight.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default SpotlightsSection; |