119 lines
6.8 KiB
TypeScript
119 lines
6.8 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { getSettings, getLocations } from "@/app/actions";
|
||
import Link from "next/link";
|
||
import DynamicLogo from "./DynamicLogo";
|
||
|
||
export default function Footer() {
|
||
const [settings, setSettings] = useState<any>(null);
|
||
const [locations, setLocations] = useState<any[]>([]);
|
||
|
||
useEffect(() => {
|
||
async function fetchData() {
|
||
const [sData, lData] = await Promise.all([
|
||
getSettings(),
|
||
getLocations()
|
||
]);
|
||
if (sData) setSettings(sData);
|
||
if (lData) setLocations(lData);
|
||
}
|
||
fetchData();
|
||
}, []);
|
||
|
||
return (
|
||
<footer className="border-t border-black/10">
|
||
{/* Main Footer Content */}
|
||
<div className="max-w-7xl mx-auto px-6 md:px-12 py-16 md:py-20">
|
||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-8">
|
||
|
||
{/* Left Column - Logo & Description */}
|
||
<div className="md:col-span-4 flex flex-col justify-between gap-12">
|
||
{/* Logo */}
|
||
<Link href="/" className="inline-block focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4 rounded-sm" aria-label="Muğla Dijital - Ana Sayfaya Dön">
|
||
<div className="relative w-40 h-12">
|
||
<DynamicLogo
|
||
src="/logo.png"
|
||
color="black"
|
||
width="100%"
|
||
height="100%"
|
||
size="contain"
|
||
/>
|
||
</div>
|
||
</Link>
|
||
|
||
{/* Description */}
|
||
<p className="text-[11px] text-black/50 leading-[1.8] max-w-xs">
|
||
{settings?.footer_description || "Muğla Dijital olarak markaların dijital dünyada özgün bir şekilde var olmasını sağlıyoruz. Drone çekimi, video prodüksiyon ve sosyal medya yönetimi ile gerçek bağlantılar kuruyoruz."}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Regions Column - Dynamic districts */}
|
||
<div className="md:col-span-2 flex flex-col gap-6" role="navigation" aria-label="Hizmet Bölgeleri">
|
||
<span className="text-[10px] tracking-[0.2em] uppercase text-black/30">Bölgeler</span>
|
||
<div className="flex flex-col gap-2">
|
||
{locations.map((loc) => (
|
||
<Link
|
||
key={loc.id}
|
||
href={`/services?region=${loc.slug}`}
|
||
className="text-[11px] font-bold uppercase hover:text-primary transition-colors focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded-sm"
|
||
aria-label={`${loc.name} bölgesi hizmetlerimiz`}
|
||
>
|
||
{loc.name}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Center Column - Menu label + divider */}
|
||
<div className="md:col-span-2 flex flex-col items-center gap-6 hidden md:flex" aria-hidden="true">
|
||
<div className="flex flex-col items-center gap-4">
|
||
<div className="w-px h-8 bg-black/10" />
|
||
<span className="text-[10px] tracking-[0.2em] uppercase text-black/30">Menu</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Column - Navigation Links */}
|
||
<div className="md:col-span-4 flex flex-col items-start md:items-end gap-3" role="navigation" aria-label="Footer Navigasyon">
|
||
{[
|
||
{ label: "Çalışmalar", href: "/works" },
|
||
{ label: "Hizmetler", href: "/services" },
|
||
{ label: "Partnerler", href: "/partners" },
|
||
{ label: "Hakkımızda", href: "/about" },
|
||
{ label: "İletişim", href: "/contact" },
|
||
].map((item) => (
|
||
<Link
|
||
key={item.label}
|
||
href={item.href}
|
||
className="text-2xl md:text-3xl font-extrabold uppercase tracking-tight text-black hover:text-primary transition-colors leading-tight focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4 rounded-sm"
|
||
>
|
||
{item.label}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom Bar */}
|
||
<div className="border-t border-black/10">
|
||
<div className="max-w-7xl mx-auto px-6 md:px-12 py-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
||
{/* Copyright & Legal */}
|
||
<div className="flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-8">
|
||
<p className="text-[10px] text-black/25 tracking-[0.05em]">
|
||
© {settings?.site_name || "Muğla Dijital"} {new Date().getFullYear()}. Tüm hakları saklıdır.
|
||
</p>
|
||
<div className="flex gap-4">
|
||
<Link href="/privacy" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-black transition-colors uppercase focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded-sm" aria-label="Gizlilik Politikası Sayfası">Gizlilik Politikası</Link>
|
||
<Link href="/terms" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-black transition-colors uppercase focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded-sm" aria-label="Kullanım Şartları Sayfası">Kullanım Şartları</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Credit */}
|
||
<a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-primary transition-colors uppercase focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded-sm" aria-label="Tasarım ve Yazılım: ayris.tech">
|
||
created by ayris.tech
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
} |