53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
import {
|
|
Tv,
|
|
Wifi,
|
|
CookingPot,
|
|
Coffee,
|
|
Waves,
|
|
Car,
|
|
CreditCard,
|
|
PawPrint,
|
|
} from "lucide-react";
|
|
|
|
const amenities = [
|
|
{ icon: Wifi, label: "WiFi" },
|
|
{ icon: CookingPot, label: "Aneks kuchenny" },
|
|
{ icon: Tv, label: "Telewizor" },
|
|
{ icon: Coffee, label: "Czajnik elektryczny" },
|
|
{ icon: Waves, label: "Sprzęt plażowy" },
|
|
{ icon: Car, label: "Parking" },
|
|
{ icon: CreditCard, label: "Płatność kartą" },
|
|
{ icon: PawPrint, label: "Zwierzęta mile widziane" },
|
|
];
|
|
|
|
export function Amenities() {
|
|
return (
|
|
<section id="amenities" className="py-24 bg-background">
|
|
<div className="container mx-auto px-6">
|
|
<div className="text-center mb-16">
|
|
<p className="text-primary uppercase tracking-[0.2em] text-sm font-medium mb-4">
|
|
Wyposażenie pokoi i domków
|
|
</p>
|
|
<p className="text-muted-foreground max-w-2xl mx-auto">
|
|
Każdy domek i pokój wyposażony jest w prywatną łazienkę, balkon lub taras, lodówkę, zastawę stołową i wszystko co potrzebne do komfortowego wypoczynku.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6 max-w-5xl mx-auto">
|
|
{amenities.map((amenity) => (
|
|
<div
|
|
key={amenity.label}
|
|
className="flex flex-col items-center text-center p-6 rounded-2xl bg-card border border-border hover:border-primary/30 hover:shadow-md transition-all group"
|
|
>
|
|
<div className="w-14 h-14 rounded-full bg-secondary flex items-center justify-center mb-4 group-hover:bg-accent transition-colors">
|
|
<amenity.icon className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<span className="text-sm text-foreground font-medium">{amenity.label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|