110 lines
6.6 KiB
TypeScript
110 lines
6.6 KiB
TypeScript
'use client';
|
|
|
|
import { use } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
interface PageProps {
|
|
params: Promise<{ locale: string }>;
|
|
}
|
|
|
|
export default function ContactPage({ params }: PageProps) {
|
|
const { locale: _locale } = use(params);
|
|
const t = useTranslations('Contact');
|
|
return (
|
|
<div className="pt-40 pb-24 px-6 md:px-24 min-h-screen bg-surface">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-24">
|
|
{/* Editorial Column */}
|
|
<div className="md:col-span-12 lg:col-span-5">
|
|
<span className="font-label text-xs tracking-[0.4em] text-secondary uppercase mb-4 block">{t('reservation_concierge')}</span>
|
|
<h1 className="text-primary font-headline text-6xl md:text-8xl mb-8 leading-tight">
|
|
{t('title1')} <br />
|
|
<span className="text-secondary italic">{t('title2')}</span>
|
|
</h1>
|
|
<div className="h-px w-24 bg-secondary mb-12"></div>
|
|
|
|
<div className="space-y-16 mt-24">
|
|
<div>
|
|
<h3 className="font-label text-xs tracking-[0.2em] text-secondary mb-4 uppercase">{t('headquarters')}</h3>
|
|
<p className="font-body text-xl text-primary font-light leading-relaxed">
|
|
{t('hq_address1')} <br />
|
|
{t('hq_address2')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
|
<div>
|
|
<h3 className="font-label text-xs tracking-[0.2em] text-secondary mb-4 uppercase">{t('direct_line')}</h3>
|
|
<p className="font-body text-xl text-primary font-light">+90 (252) 316 12 34</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-label text-xs tracking-[0.2em] text-secondary mb-4 uppercase">{t('digital_mail')}</h3>
|
|
<p className="font-body text-xl text-primary font-light">atelier@salmakis.com</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-8">
|
|
<button className="flex items-center gap-4 bg-[#0a0a0a] text-white px-12 py-5 hover:bg-secondary transition-all">
|
|
<span className="font-headline text-xs tracking-[0.3em] uppercase">{t('whatsapp_btn')}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Minimalist Form Column */}
|
|
<div className="md:col-span-12 lg:col-span-7 bg-white p-12 md:p-20">
|
|
<h2 className="font-headline text-3xl mb-12 text-primary uppercase tracking-widest border-b border-outline-variant/10 pb-6">{t('form_title')}</h2>
|
|
<form className="space-y-12">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
|
<div className="flex flex-col group">
|
|
<label className="font-label text-[10px] tracking-[0.2em] text-secondary uppercase mb-2 group-focus-within:text-primary transition-colors">{t('first_name_label')}</label>
|
|
<input type="text" className="border-b border-outline-variant py-3 focus:border-secondary transition-all outline-none bg-transparent font-body text-lg font-light" placeholder={t('first_name_placeholder')} />
|
|
</div>
|
|
<div className="flex flex-col group">
|
|
<label className="font-label text-[10px] tracking-[0.2em] text-secondary uppercase mb-2 group-focus-within:text-primary transition-colors">{t('last_name_label')}</label>
|
|
<input type="text" className="border-b border-outline-variant py-3 focus:border-secondary transition-all outline-none bg-transparent font-body text-lg font-light" placeholder={t('last_name_placeholder')} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col group">
|
|
<label className="font-label text-[10px] tracking-[0.2em] text-secondary uppercase mb-2 group-focus-within:text-primary transition-colors">{t('email_label')}</label>
|
|
<input type="email" className="border-b border-outline-variant py-3 focus:border-secondary transition-all outline-none bg-transparent font-body text-lg font-light" placeholder={t('email_placeholder')} />
|
|
</div>
|
|
|
|
<div className="flex flex-col group">
|
|
<label className="font-label text-[10px] tracking-[0.2em] text-secondary uppercase mb-2 group-focus-within:text-primary transition-colors">{t('yacht_label')}</label>
|
|
<select className="border-b border-outline-variant py-3 focus:border-secondary transition-all outline-none bg-transparent font-body text-lg font-light appearance-none">
|
|
<option>M/S MEIRA</option>
|
|
<option>M/Y PRINCESS MELDA</option>
|
|
<option>QUEEN OF SALMAKIS</option>
|
|
<option>DOLCE MARE</option>
|
|
<option>SUNWORLD-8</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
|
<div className="flex flex-col group">
|
|
<label className="font-label text-[10px] tracking-[0.2em] text-secondary uppercase mb-2 group-focus-within:text-primary transition-colors">{t('charter_start')}</label>
|
|
<input type="date" className="border-b border-outline-variant py-3 focus:border-secondary transition-all outline-none bg-transparent font-body text-lg font-light" />
|
|
</div>
|
|
<div className="flex flex-col group">
|
|
<label className="font-label text-[10px] tracking-[0.2em] text-secondary uppercase mb-2 group-focus-within:text-primary transition-colors">{t('charter_end')}</label>
|
|
<input type="date" className="border-b border-outline-variant py-3 focus:border-secondary transition-all outline-none bg-transparent font-body text-lg font-light" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col pt-4 group">
|
|
<label className="font-label text-[10px] tracking-[0.2em] text-secondary uppercase mb-2 group-focus-within:text-primary transition-colors">{t('requirements_label')}</label>
|
|
<textarea rows={4} className="border-b border-outline-variant py-3 focus:border-secondary transition-all outline-none bg-transparent font-body text-lg font-light resize-none" placeholder={t('requirements_placeholder')}></textarea>
|
|
</div>
|
|
|
|
<button className="w-full bg-secondary text-white py-6 font-headline tracking-[0.4em] uppercase hover:bg-primary transition-all">{t('submit_btn')}</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|