59 lines
2.5 KiB
TypeScript
59 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { MapPin, Clock, Phone, Mail } from "lucide-react";
|
|
|
|
export function Info() {
|
|
return (
|
|
<section className="py-20 bg-stone-900 text-stone-100">
|
|
<Container>
|
|
<div className="grid md:grid-cols-3 gap-12">
|
|
{/* Location */}
|
|
<div className="text-center md:text-left">
|
|
<div className="flex justify-center md:justify-start mb-4">
|
|
<div className="p-3 bg-amber-600/20 rounded-full text-amber-500">
|
|
<MapPin className="w-6 h-6" />
|
|
</div>
|
|
</div>
|
|
<h3 className="text-xl font-serif mb-4 text-amber-50">Location</h3>
|
|
<p className="text-stone-400 mb-2">123 Avenue des Champs-Élysées</p>
|
|
<p className="text-stone-400">75008 Paris, France</p>
|
|
</div>
|
|
|
|
{/* Hours */}
|
|
<div className="text-center md:text-left">
|
|
<div className="flex justify-center md:justify-start mb-4">
|
|
<div className="p-3 bg-amber-600/20 rounded-full text-amber-500">
|
|
<Clock className="w-6 h-6" />
|
|
</div>
|
|
</div>
|
|
<h3 className="text-xl font-serif mb-4 text-amber-50">Opening Hours</h3>
|
|
<div className="text-stone-400 space-y-1">
|
|
<p><span className="text-stone-300 w-24 inline-block">Mon - Thu:</span> 18:00 - 23:00</p>
|
|
<p><span className="text-stone-300 w-24 inline-block">Fri - Sat:</span> 17:00 - 00:00</p>
|
|
<p><span className="text-stone-300 w-24 inline-block">Sunday:</span> Closed</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contact */}
|
|
<div className="text-center md:text-left">
|
|
<div className="flex justify-center md:justify-start mb-4">
|
|
<div className="p-3 bg-amber-600/20 rounded-full text-amber-500">
|
|
<Phone className="w-6 h-6" />
|
|
</div>
|
|
</div>
|
|
<h3 className="text-xl font-serif mb-4 text-amber-50">Contact</h3>
|
|
<p className="text-stone-400 mb-2 flex items-center justify-center md:justify-start gap-2">
|
|
<Phone className="w-4 h-4" /> +33 1 23 45 67 89
|
|
</p>
|
|
<p className="text-stone-400 flex items-center justify-center md:justify-start gap-2">
|
|
<Mail className="w-4 h-4" /> reservations@lumiere.com
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|