91 lines
4.2 KiB
TypeScript
91 lines
4.2 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { getSettings } from "@/app/actions";
|
||
import Link from "next/link";
|
||
import DynamicLogo from "./DynamicLogo";
|
||
|
||
export default function Footer() {
|
||
const [settings, setSettings] = useState<any>(null);
|
||
|
||
useEffect(() => {
|
||
async function fetchSettings() {
|
||
const data = await getSettings();
|
||
if (data) setSettings(data);
|
||
}
|
||
fetchSettings();
|
||
}, []);
|
||
|
||
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-5 flex flex-col justify-between gap-12">
|
||
{/* Logo */}
|
||
<Link href="/" className="inline-block">
|
||
<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/40 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>
|
||
|
||
{/* Center Column - Menu label + divider */}
|
||
<div className="md:col-span-2 flex flex-col items-center gap-6 hidden md:flex">
|
||
<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-5 flex flex-col items-start md:items-end gap-3">
|
||
{[
|
||
{ 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-4xl font-extrabold uppercase tracking-tight text-black hover:text-primary transition-colors leading-tight"
|
||
>
|
||
{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 */}
|
||
<p className="text-[10px] text-black/25 tracking-[0.05em]">
|
||
© {settings?.site_name || "Muğla Dijital"} {new Date().getFullYear()}. Dijital çözümler üreten ajans.
|
||
</p>
|
||
|
||
{/* 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">
|
||
created by ayris.tech
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
} |