144 lines
6.6 KiB
TypeScript
144 lines
6.6 KiB
TypeScript
'use client';
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import Navbar from '@/components/Navbar';
|
|
import Footer from '@/components/Footer';
|
|
import { MapPin, Phone, Mail, Printer, Smartphone, Send } from 'lucide-react';
|
|
|
|
export default function ContactPage() {
|
|
const t = useTranslations('Contact');
|
|
|
|
return (
|
|
<main className="min-h-screen bg-bone">
|
|
<Navbar />
|
|
|
|
{/* Hero Header */}
|
|
<section className="pt-40 pb-20 px-6 max-w-7xl mx-auto text-center">
|
|
<span className="text-salmakis-blue font-bold tracking-[0.3em] uppercase text-xs mb-4 block">
|
|
Salmakis Villas
|
|
</span>
|
|
<h1 className="text-5xl md:text-7xl font-serif text-aegean-dark mb-6">
|
|
{t('title')}
|
|
</h1>
|
|
<p className="text-aegean-dark/60 max-w-2xl mx-auto text-lg leading-relaxed">
|
|
{t('description')}
|
|
</p>
|
|
<div className="w-24 h-[1px] bg-aegean-dark/20 mx-auto mt-12" />
|
|
</section>
|
|
|
|
{/* Contact Content */}
|
|
<section className="pb-24 px-6 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-20">
|
|
{/* Contact info cards */}
|
|
<div className="space-y-12">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div className="p-8 bg-white rounded-3xl border border-aegean-dark/5 shadow-sm space-y-4">
|
|
<div className="w-10 h-10 rounded-xl bg-salmakis-blue/10 flex items-center justify-center text-salmakis-blue">
|
|
<MapPin className="w-5 h-5" />
|
|
</div>
|
|
<h3 className="text-lg font-serif text-aegean-dark">{t('address')}</h3>
|
|
<p className="text-xs uppercase font-bold tracking-widest text-aegean-dark/50 leading-loose">
|
|
Dereköy yolu, Bademlik Mevkii Küme evleri No:24 Gürece Ortakent Bodrum/Muğla Türkiye
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-8 bg-white rounded-3xl border border-aegean-dark/5 shadow-sm space-y-4">
|
|
<div className="w-10 h-10 rounded-xl bg-salmakis-blue/10 flex items-center justify-center text-salmakis-blue">
|
|
<Phone className="w-5 h-5" />
|
|
</div>
|
|
<h3 className="text-lg font-serif text-aegean-dark">{t('phone')}</h3>
|
|
<div className="text-sm font-medium text-aegean-dark/70 space-y-1">
|
|
<p>+90 252 316 28 77</p>
|
|
<p>+90 252 316 27 38</p>
|
|
<p>+90 252 316 65 09</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-8 bg-white rounded-3xl border border-aegean-dark/5 shadow-sm space-y-4">
|
|
<div className="w-10 h-10 rounded-xl bg-salmakis-blue/10 flex items-center justify-center text-salmakis-blue">
|
|
<Smartphone className="w-5 h-5" />
|
|
</div>
|
|
<h3 className="text-lg font-serif text-aegean-dark">{t('mobile')}</h3>
|
|
<p className="text-sm font-medium text-aegean-dark/70">
|
|
+90 532 731 78 04
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-8 bg-white rounded-3xl border border-aegean-dark/5 shadow-sm space-y-4">
|
|
<div className="w-10 h-10 rounded-xl bg-salmakis-blue/10 flex items-center justify-center text-salmakis-blue">
|
|
<Mail className="w-5 h-5" />
|
|
</div>
|
|
<h3 className="text-lg font-serif text-aegean-dark">{t('email')}</h3>
|
|
<p className="text-sm font-medium text-aegean-dark/70">
|
|
info@salmakisvillas.com
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-8 bg-aegean-dark text-bone rounded-3xl shadow-xl flex items-center justify-between">
|
|
<div className="space-y-2">
|
|
<h3 className="text-xl font-serif text-sand">{t('fax')}</h3>
|
|
<p className="text-sm opacity-60">+90 252 316 27 37</p>
|
|
</div>
|
|
<Printer className="w-8 h-8 opacity-20" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contact Form */}
|
|
<div className="bg-white p-10 md:p-12 rounded-[2rem] shadow-2xl border border-aegean-dark/5">
|
|
<h2 className="text-3xl font-serif text-aegean-dark mb-8">Bize Mesaj Gönderin</h2>
|
|
<form className="space-y-6">
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-aegean-dark/40 ml-1">
|
|
{t('form_name')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="w-full bg-bone/50 border border-aegean-dark/5 rounded-2xl px-6 py-4 focus:outline-none focus:ring-2 focus:ring-salmakis-blue/20 transition-all font-sans"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-aegean-dark/40 ml-1">
|
|
{t('form_email')}
|
|
</label>
|
|
<input
|
|
type="email"
|
|
className="w-full bg-bone/50 border border-aegean-dark/5 rounded-2xl px-6 py-4 focus:outline-none focus:ring-2 focus:ring-salmakis-blue/20 transition-all font-sans"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-aegean-dark/40 ml-1">
|
|
{t('form_message')}
|
|
</label>
|
|
<textarea
|
|
rows={5}
|
|
className="w-full bg-bone/50 border border-aegean-dark/5 rounded-2xl px-6 py-4 focus:outline-none focus:ring-2 focus:ring-salmakis-blue/20 transition-all font-sans resize-none"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-aegean-dark hover:bg-salmakis-blue text-bone py-5 rounded-2xl font-bold uppercase tracking-[0.2em] text-xs flex items-center justify-center space-x-3 transition-all transform hover:-translate-y-1"
|
|
>
|
|
<span>{t('form_submit')}</span>
|
|
<Send className="w-4 h-4" />
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Map Section */}
|
|
<section className="h-[500px] w-full bg-aegean-dark/10 relative">
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m13!1d3183.1!2d27.35!3d37.05!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzfCsDAzJzAwLjAiTiAyN8KwMjEnMDAuMCJF!5e0!3m2!1sen!2str!4v1650000000000!5m2!1sen!2str"
|
|
className="w-full h-full grayscale opacity-80"
|
|
style={{ border: 0 }}
|
|
allowFullScreen={true}
|
|
loading="lazy"
|
|
/>
|
|
<div className="absolute inset-0 pointer-events-none shadow-[inset_0_0_100px_rgba(0,0,0,0.1)]" />
|
|
</section>
|
|
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|