69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
|
|
const socialLinks = [
|
|
{ name: 'FACEBOOK', href: 'https://facebook.com' },
|
|
{ name: 'INSTAGRAM', href: 'https://instagram.com' },
|
|
{ name: 'LINKEDIN', href: 'https://linkedin.com' },
|
|
{ name: '***', href: '**' },
|
|
]
|
|
|
|
const offices = [
|
|
{
|
|
num: '01',
|
|
name: 'Fethiye | Merkez Ofis',
|
|
address: 'Karagözler, 48300 Fethiye/Muğla',
|
|
phone: '0553 093 72 25'
|
|
}
|
|
]
|
|
|
|
export default function ContactPage() {
|
|
|
|
return (
|
|
<main className="relative min-h-screen bg-[#111111] text-white flex flex-col selection:bg-white selection:text-black">
|
|
|
|
<div className="flex-1 flex flex-col justify-center items-end px-10 pt-40">
|
|
<div className="flex flex-wrap justify-end gap-4">
|
|
{socialLinks.map((link) => (
|
|
<Link
|
|
key={link.name}
|
|
href={link.href}
|
|
className="border border-white/20 px-4 py-2 text-[10px] font-extrabold tracking-widest hover:bg-white hover:text-black transition-all duration-300 rounded-[1px]"
|
|
>
|
|
{link.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full px-10 pb-40">
|
|
<div className="border-t border-white/20">
|
|
{offices.map((office) => (
|
|
<div
|
|
key={office.num}
|
|
className="grid grid-cols-1 md:grid-cols-[60px_1fr_1fr_1fr] gap-8 py-10 border-b border-white/20 items-start hover:bg-white hover:text-black px-6 -mx-6 transition-all duration-300 group cursor-default"
|
|
>
|
|
<div className="text-[12px] font-bold text-white/40 group-hover:text-black/40">
|
|
{office.num}
|
|
</div>
|
|
<div className="text-[20px] md:text-[24px] font-normal tracking-tight">
|
|
{office.name}
|
|
</div>
|
|
<div className="text-[12px] leading-relaxed text-zinc-400 group-hover:text-black whitespace-pre-line">
|
|
{office.address}
|
|
</div>
|
|
<div className="text-[12px] font-bold text-right group-hover:text-black">
|
|
{office.phone}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</main>
|
|
)
|
|
}
|