ayrisdev/ayrisapart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fb

Browse Source
This commit is contained in:
ayrisdev
2026-04-19 17:23:31 +03:00
parent 9cad199125
commit 4f2188363a
122 changed files with 3215 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
components/Footer.tsx Normal file
View File

@@ -0,0 +1,126 @@
'use client'
import Link from 'next/link'
import Image from 'next/image'
import { Phone, Mail } from 'lucide-react'
export default function Footer({ lang, dict }: { lang: string, dict: any }) {
return (
<footer className="bg-[#141210] text-white pt-32 mt-48 pb-48 px-8 md:px-20 font-sans">
<div className="max-w-[1600px] mx-auto ">
{/* ROW 1: BRAND & CONTACT */}
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-20 mt-48">
<h2 className="text-7xl md:text-[100px] font-serif leading-none tracking-tight text-white uppercase">
AYRIS APART
</h2>
<div className="space-y-4 pt-10 md:pt-0">
<div className="flex items-center justify-end space-x-3 text-sm font-medium tracking-widest opacity-80">
<Phone size={15} className="opacity-60" /> <span>+90 543 231 87 13</span>
</div>
<div className="flex items-center justify-end space-x-3 text-sm font-medium tracking-widest opacity-80">
<Mail size={15} className="opacity-60" /> <span>hello@ayrisapart.com</span>
</div>
</div>
</div>
{/* THIN SEPARATOR LINE */}
<div className="w-full h-px bg-white/10 mb-20" />
{/* ROW 2: MAIN GRID */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-y-16 lg:gap-x-24 mb-32">
{/* LEFT CONTENT (CTA) */}
<div className="lg:col-span-5 space-y-10 max-w-sm">
<p className="text-white/70 text-[17px] leading-relaxed">
{lang === 'tr'
? "Konaklamanızı bugün ayırtın ve Ören kıyılarında deniz kenarı lüksünü, nefes kesen manzaraları ve unutulmaz anları keşfedin."
: "Book your stay today and discover seaside luxury, breathtaking views, and unforgettable moments on the shores of Oren."}
</p>
<Link
href={`/${lang}/reservation`}
className="inline-flex items-center space-x-2 border-b border-white/40 pb-1 group hover:border-white transition-all"
>
<span className="text-[#C88C4B] text-xl transform group-hover:translate-x-1 transition-transform">↳</span>
<span className="text-sm font-bold tracking-[0.3em] uppercase">{dict.footer.book}</span>
</Link>
</div>
{/* RIGHT LINKS */}
<div className="lg:col-span-7">
<div className="grid grid-cols-2 md:grid-cols-4 gap-12">
{/* EXPLORE */}
<div className="space-y-8">
<h4 className="text-[10px] font-bold tracking-[0.4em] opacity-40 uppercase">EXPLORE</h4>
<ul className="space-y-4 text-sm font-medium opacity-60 uppercase tracking-widest">
<li><Link href={`/${lang}`} className="hover:opacity-100 transition-opacity">{dict.nav.home}</Link></li>
<li><Link href={`/${lang}/about`} className="hover:opacity-100 transition-opacity">{dict.nav.about}</Link></li>
<li><Link href={`/${lang}/news`} className="hover:opacity-100 transition-opacity">{dict.nav.news}</Link></li>
<li><Link href={`/${lang}/suites`} className="hover:opacity-100 transition-opacity">{dict.nav.suites}</Link></li>
</ul>
</div>
{/* OTHERS */}
<div className="space-y-8">
<h4 className="text-[10px] font-bold tracking-[0.4em] opacity-40 uppercase">OTHERS</h4>
<ul className="space-y-4 text-sm font-medium opacity-60 uppercase tracking-widest">
<li><Link href={`/${lang}/services`} className="hover:opacity-100 transition-opacity">Services</Link></li>
<li><Link href={`/${lang}/activities`} className="hover:opacity-100 transition-opacity">Activities</Link></li>
<li><Link href={`/${lang}/gallery`} className="hover:opacity-100 transition-opacity">Gallery</Link></li>
<li><Link href={`/${lang}/contact`} className="hover:opacity-100 transition-opacity">{dict.nav.contact}</Link></li>
</ul>
</div>
{/* UTILITY */}
<div className="space-y-8">
<h4 className="text-[10px] font-bold tracking-[0.4em] opacity-40 uppercase">UTILITY</h4>
<ul className="space-y-4 text-sm font-medium opacity-60 uppercase tracking-widest">
<li><Link href={`/${lang}/license`} className="hover:opacity-100 transition-opacity">License</Link></li>
<li><Link href={`/${lang}/404`} className="hover:opacity-100 transition-opacity">404</Link></li>
</ul>
</div>
{/* SOCIALS */}
<div className="space-y-8">
<h4 className="text-[10px] font-bold tracking-[0.4em] opacity-40 uppercase">SOCIALS</h4>
<ul className="space-y-4 text-sm font-medium opacity-60 uppercase tracking-widest">
<li><a href="#" className="hover:opacity-100 transition-opacity">Instagram</a></li>
<li><a href="#" className="hover:opacity-100 transition-opacity">Facebook</a></li>
<li><a href="#" className="hover:opacity-100 transition-opacity">Twitter</a></li>
</ul>
</div>
</div>
</div>
</div>
{/* ROW 3: FINAL BOTTOM WITH CENTER ICON SPLIT */}
<div className="relative pt-12 flex flex-col md:flex-row justify-between items-center bg-[#141210]">
{/* The split line effect */}
<div className="absolute top-0 left-0 w-[45%] h-px bg-white/10 hidden lg:block" />
<div className="absolute top-0 right-0 w-[45%] h-px bg-white/10 hidden lg:block" />
<div className="text-[10px] font-bold tracking-[0.3em] opacity-40 uppercase items-center flex">
COPYRIGHT © AYRIS APART
</div>
{/* Central Decorative Logo Image */}
<div className="md:absolute md:left-1/2 md:-translate-x-1/2 md:-top-10 mb-8 md:mb-0">
<div className="relative w-24 h-24">
<Image
src="/logo.png"
alt="Ayris Apart Logo"
fill
className="object-contain filter brightness-0 invert"
/>
</div>
</div>
<div className="text-[10px] font-bold tracking-[0.3em] opacity-40 uppercase md:mt-0">
CREATED BY <a href="https://ayris.dev" target="_blank" className="hover:text-white transition-opacity">AYRISTECH</a>
</div>
</div>
</div>
</footer>
)
}