b

app/contact/page.tsx

@@ -0,0 +1,68 @@
+'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>
+  )
+}