fb
This commit is contained in:
184
app/[lang]/contact/ContactClient.tsx
Normal file
184
app/[lang]/contact/ContactClient.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
'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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user