207 lines
11 KiB
TypeScript
207 lines
11 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import Image from 'next/image'
|
|
import BougainvilleaMotif from '@/components/BougainvilleaMotif'
|
|
import { MapPin, Waves, ShoppingBasket, Coffee, PersonStanding, Phone, Mail, Clock } from 'lucide-react'
|
|
import { useTranslations } from 'next-intl'
|
|
|
|
const EASE: [number, number, number, number] = [0.22, 1, 0.36, 1]
|
|
|
|
export default function ContactPage() {
|
|
const t = useTranslations('contact')
|
|
|
|
return (
|
|
<div className="bg-background min-h-screen text-on-surface pt-32 pb-section-gap">
|
|
{/* Hero Section */}
|
|
<section className="px-margin-mobile md:px-gutter max-w-container-max mx-auto mb-12">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, ease: EASE }}
|
|
className="relative inline-block mb-4"
|
|
>
|
|
<span className="absolute -top-6 -left-4 text-accent-pink/30 -rotate-12 pointer-events-none">
|
|
<BougainvilleaMotif className="w-12 h-12" />
|
|
</span>
|
|
<h1 className="font-serif text-[40px] md:text-[48px] font-semibold text-on-surface">{t('title')}</h1>
|
|
</motion.div>
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.1, ease: EASE }}
|
|
className="font-sans text-[18px] text-on-surface-variant max-w-2xl"
|
|
>
|
|
{t('description')}
|
|
</motion.p>
|
|
</section>
|
|
|
|
{/* Location Grid */}
|
|
<section className="bg-surface-container-low py-16 mb-16">
|
|
<div className="px-margin-mobile md:px-gutter max-w-container-max mx-auto grid grid-cols-1 lg:grid-cols-12 gap-gutter items-start">
|
|
|
|
{/* Map Container */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, ease: EASE }}
|
|
className="lg:col-span-8 rounded-[24px] overflow-hidden aspect-video shadow-[0_32px_64px_-12px_rgba(112,90,76,0.08)] border border-outline-variant/30 relative bg-surface-container-high"
|
|
>
|
|
<div className="w-full h-full flex flex-col items-center justify-center text-secondary-container">
|
|
<MapPin className="w-16 h-16 mb-4 text-primary/40" />
|
|
<span className="text-primary/60 font-sans font-medium">{t('connect.map_placeholder')}</span>
|
|
</div>
|
|
|
|
{/* Mock Map Interaction Layer */}
|
|
<div className="absolute bottom-6 left-6 bg-surface/90 backdrop-blur-md p-4 rounded-xl shadow-lg border border-outline-variant/20 flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white">
|
|
<MapPin className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<p className="font-sans font-bold text-[12px] text-on-surface uppercase tracking-wider">{t('connect.address_title')}</p>
|
|
<p className="font-sans text-[16px] text-secondary">{t('connect.address_value')}</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Highlights List */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, ease: EASE, delay: 0.2 }}
|
|
className="lg:col-span-4 space-y-8"
|
|
>
|
|
<div className="relative">
|
|
<h2 className="font-serif text-[24px] font-medium text-secondary">{t('walking_distance')}</h2>
|
|
<div className="h-1 w-12 bg-accent-pink mt-2 rounded-full"></div>
|
|
</div>
|
|
|
|
<ul className="space-y-6">
|
|
{[
|
|
{ icon: Waves, title: t('locations.beach.title'), desc: t('locations.beach.desc') },
|
|
{ icon: ShoppingBasket, title: t('locations.market.title'), desc: t('locations.market.desc') },
|
|
{ icon: Coffee, title: t('locations.cafe.title'), desc: t('locations.cafe.desc') },
|
|
{ icon: PersonStanding, title: t('locations.hiking.title'), desc: t('locations.hiking.desc') },
|
|
].map((item, idx) => (
|
|
<li key={idx} className="flex items-start gap-4 p-4 rounded-2xl bg-surface transition-transform hover:translate-x-2 duration-300 shadow-sm border border-outline-variant/10">
|
|
<item.icon className="w-6 h-6 text-primary mt-1 shrink-0" />
|
|
<div>
|
|
<p className="font-sans font-bold text-[14px] text-on-surface tracking-wide">{item.title}</p>
|
|
<p className="font-sans text-[16px] text-on-surface-variant mt-1">{item.desc}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contact Section */}
|
|
<section className="px-margin-mobile md:px-gutter max-w-container-max mx-auto">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
|
|
|
{/* Contact Form Card */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, ease: EASE }}
|
|
className="bg-surface p-8 md:p-12 rounded-[32px] shadow-[0_32px_64px_-12px_rgba(112,90,76,0.08)] border border-outline-variant/20"
|
|
>
|
|
<h3 className="font-serif text-[32px] font-semibold text-on-surface mb-8">{t('form.title')}</h3>
|
|
<form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<label className="font-sans font-bold text-secondary text-[12px] uppercase tracking-widest ml-1">{t('form.name')}</label>
|
|
<input type="text" placeholder={t('form.name_placeholder')} className="w-full bg-surface-container-low border-none rounded-xl p-4 focus:ring-2 focus:ring-primary focus:outline-none transition-all font-sans text-[16px] outline-none" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="font-sans font-bold text-secondary text-[12px] uppercase tracking-widest ml-1">{t('form.email')}</label>
|
|
<input type="email" placeholder={t('form.email_placeholder')} className="w-full bg-surface-container-low border-none rounded-xl p-4 focus:ring-2 focus:ring-primary focus:outline-none transition-all font-sans text-[16px] outline-none" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="font-sans font-bold text-secondary text-[12px] uppercase tracking-widest ml-1">{t('form.subject')}</label>
|
|
<input type="text" placeholder={t('form.subject_placeholder')} className="w-full bg-surface-container-low border-none rounded-xl p-4 focus:ring-2 focus:ring-primary focus:outline-none transition-all font-sans text-[16px] outline-none" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="font-sans font-bold text-secondary text-[12px] uppercase tracking-widest ml-1">{t('form.message')}</label>
|
|
<textarea rows={4} placeholder={t('form.message_placeholder')} className="w-full bg-surface-container-low border-none rounded-xl p-4 focus:ring-2 focus:ring-primary focus:outline-none transition-all font-sans text-[16px] outline-none"></textarea>
|
|
</div>
|
|
|
|
<button type="submit" className="w-full bg-accent-pink text-white py-4 rounded-full font-sans font-bold text-[14px] tracking-wider uppercase hover:opacity-90 transition-all duration-300 transform hover:-translate-y-1 shadow-md cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-accent-pink/50 focus-visible:ring-offset-2">
|
|
{t('form.submit')}
|
|
</button>
|
|
</form>
|
|
</motion.div>
|
|
|
|
{/* Contact Details & Visual */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, ease: EASE, delay: 0.2 }}
|
|
className="space-y-12"
|
|
>
|
|
<div className="space-y-6">
|
|
<h3 className="font-serif text-[32px] font-semibold text-on-surface">{t('connect.title')}</h3>
|
|
<p className="font-sans text-[18px] text-on-surface-variant">
|
|
{t('connect.description')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
|
|
<Phone className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<p className="font-sans font-bold text-[12px] text-on-surface-variant uppercase tracking-wider">{t('connect.phone')}</p>
|
|
<p className="font-sans text-[16px] text-secondary font-medium">+90 530 510 98 42</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
|
|
<Mail className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<p className="font-sans font-bold text-[12px] text-on-surface-variant uppercase tracking-wider">{t('connect.email')}</p>
|
|
<p className="font-sans text-[16px] text-secondary font-medium">iletisim@sitarapart.com</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
|
|
<Clock className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<p className="font-sans font-bold text-[12px] text-on-surface-variant uppercase tracking-wider">{t('connect.check_in')}</p>
|
|
<p className="font-sans text-[16px] text-secondary font-medium">{t('connect.check_out')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Decorative Image */}
|
|
<div className="relative rounded-[24px] overflow-hidden aspect-[4/3] shadow-md border border-outline-variant/20">
|
|
<Image
|
|
src="https://images.unsplash.com/photo-1596394516093-501ba68a0ba6?auto=format&fit=crop&q=80"
|
|
alt="Akyaka Details"
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 50vw"
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|