185 lines
8.8 KiB
TypeScript
185 lines
8.8 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from "framer-motion"
|
|
import { Mail, Phone, MapPin, Clock, ArrowUpRight, MessageCircle } from 'lucide-react'
|
|
import Link from "next/link"
|
|
|
|
|
|
|
|
const InstagramIcon = ({ size = 20 }: { size?: number }) => (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
|
|
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
|
|
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
|
|
</svg>
|
|
)
|
|
|
|
export default function ContactClient({ lang, dict }: { lang: string, dict: any }) {
|
|
return (
|
|
<main className="bg-[#FAF7F0] min-h-screen text-[#1A1A1A]">
|
|
|
|
|
|
{/* HERO SECTION */}
|
|
<section className="pt-64 pb-32 px-6">
|
|
<div className="max-w-[1400px] mx-auto">
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 40 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1, ease: [0.33, 1, 0.68, 1] }}
|
|
className="text-[12vw] md:text-[150px] font-serif leading-[0.8] tracking-tight uppercase"
|
|
>
|
|
{dict.contact.title.split(' ')[0]} <br /> <span className="italic ml-[5vw]">{dict.contact.title.split(' ').slice(1).join(' ')}</span>
|
|
</motion.h1>
|
|
</div>
|
|
</section>
|
|
|
|
{/* MINIMALIST INFO GRID */}
|
|
<section className="py-24 px-6 md:px-12 max-w-[1400px] mx-auto">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-0.5 bg-[#1A1A1A]/10 border border-[#1A1A1A]/10">
|
|
|
|
{/* Address */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
className="bg-[#FAF7F0] p-16 space-y-12 flex flex-col justify-between aspect-square"
|
|
>
|
|
<MapPin size={32} strokeWidth={1} className="text-[#C88C4B]" />
|
|
<div className="space-y-6">
|
|
<h3 className="text-3xl font-serif">{dict.contact.visit.t}</h3>
|
|
<p className="text-xl text-[#1A1A1A]/60 italic leading-relaxed">
|
|
{dict.contact.visit.d}
|
|
</p>
|
|
<Link href="https://www.google.com/maps/search/?api=1&query=Ayris+Apart+Milas+Ören" target="_blank" className="inline-flex items-center space-x-2 text-xs font-bold uppercase tracking-[0.3em] border-b border-[#1A1A1A] pb-1">
|
|
<span>{dict.contact.btn.map}</span>
|
|
<ArrowUpRight size={14} />
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Direct Connect */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.1 }}
|
|
className="bg-[#FAF7F0] p-16 space-y-12 flex flex-col justify-between aspect-square"
|
|
>
|
|
<Phone size={32} strokeWidth={1} className="text-[#C88C4B]" />
|
|
<div className="space-y-6">
|
|
<h3 className="text-3xl font-serif">{dict.contact.call.t}</h3>
|
|
<div className="space-y-2">
|
|
<p className="text-2xl font-medium">+90 543 231 87 13</p>
|
|
<p className="text-lg text-[#1A1A1A]/50 italic">{dict.contact.call.d}</p>
|
|
</div>
|
|
<Link href="tel:+905432318713" className="inline-flex items-center space-x-2 text-xs font-bold uppercase tracking-[0.3em] border-b border-[#1A1A1A] pb-1">
|
|
<span>{dict.contact.btn.call}</span>
|
|
<ArrowUpRight size={14} />
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Email */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.2 }}
|
|
className="bg-[#FAF7F0] p-16 space-y-12 flex flex-col justify-between aspect-square"
|
|
>
|
|
<Mail size={32} strokeWidth={1} className="text-[#C88C4B]" />
|
|
<div className="space-y-6">
|
|
<h3 className="text-3xl font-serif">{dict.contact.write.t}</h3>
|
|
<div className="space-y-2">
|
|
<p className="text-2xl font-medium">hello@ayrisapart.com</p>
|
|
<p className="text-lg text-[#1A1A1A]/50 italic">{dict.contact.write.d}</p>
|
|
</div>
|
|
<Link href="mailto:hello@ayrisapart.com" className="inline-flex items-center space-x-2 text-xs font-bold uppercase tracking-[0.3em] border-b border-[#1A1A1A] pb-1">
|
|
<span>{dict.contact.btn.mail}</span>
|
|
<ArrowUpRight size={14} />
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* WhatsApp */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
className="bg-[#FAF7F0] p-16 space-y-12 flex flex-col justify-between aspect-square"
|
|
>
|
|
<MessageCircle size={32} strokeWidth={1} className="text-[#C88C4B]" />
|
|
<div className="space-y-6">
|
|
<h3 className="text-3xl font-serif">{dict.contact.wa.t}</h3>
|
|
<p className="text-xl text-[#1A1A1A]/60 italic leading-relaxed">
|
|
{dict.contact.wa.d}
|
|
</p>
|
|
<Link href="https://wa.me/905432318713" target="_blank" className="inline-flex items-center space-x-2 text-xs font-bold uppercase tracking-[0.3em] border-b border-[#1A1A1A] pb-1">
|
|
<span>{dict.contact.btn.wa}</span>
|
|
<ArrowUpRight size={14} />
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Instagram */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.1 }}
|
|
className="bg-[#FAF7F0] p-16 space-y-12 flex flex-col justify-between aspect-square"
|
|
>
|
|
<InstagramIcon size={32} />
|
|
<div className="space-y-6">
|
|
<h3 className="text-3xl font-serif">{dict.contact.ig.t}</h3>
|
|
<p className="text-xl text-[#1A1A1A]/60 italic leading-relaxed">
|
|
{dict.contact.ig.d}
|
|
</p>
|
|
<Link href="#" className="inline-flex items-center space-x-2 text-xs font-bold uppercase tracking-[0.3em] border-b border-[#1A1A1A] pb-1">
|
|
<span>{dict.contact.btn.ig}</span>
|
|
<ArrowUpRight size={14} />
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Working Hours */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.2 }}
|
|
className="bg-[#FAF7F0] p-16 space-y-12 flex flex-col justify-between aspect-square"
|
|
>
|
|
<Clock size={32} strokeWidth={1} className="text-[#C88C4B]" />
|
|
<div className="space-y-6">
|
|
<h3 className="text-3xl font-serif">{dict.contact.hours.t}</h3>
|
|
<div className="space-y-2">
|
|
<p className="text-xl font-medium">{dict.contact.hours.d}</p>
|
|
<p className="text-lg text-[#1A1A1A]/50 italic">{dict.contact.hours.sub}</p>
|
|
</div>
|
|
<div className="text-[10px] font-bold uppercase tracking-[0.4em] text-[#1A1A1A]/30">Open 24/7 for you</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FULL WIDTH MAP SECTION */}
|
|
<section className="py-24">
|
|
<div className="h-[600px] w-full relative grayscale hover:grayscale-0 transition-all duration-1000">
|
|
<iframe
|
|
src="https://maps.google.com/maps?q=Ayris+Apart+Milas+Ören&t=&z=15&ie=UTF8&iwloc=&output=embed"
|
|
width="100%"
|
|
height="100%"
|
|
style={{ border: 0 }}
|
|
allowFullScreen
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
></iframe>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
</main>
|
|
)
|
|
}
|