feat: add project files
This commit is contained in:
mstfyldz
@@ -0,0 +1,163 @@
|
||||
"use client";
|
||||
|
||||
const socials = [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://instagram.com/moybeachakyaka",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="w-5 h-5">
|
||||
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
|
||||
<circle cx="12" cy="12" r="4" />
|
||||
<circle cx="17.5" cy="6.5" r="0.5" fill="currentColor" stroke="none" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "https://facebook.com/moybeachakyaka",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
|
||||
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "YouTube",
|
||||
href: "https://youtube.com/@moybeach",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
|
||||
<path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.96-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z" />
|
||||
<polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" fill="white" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default function Footer({ dict }: { dict: any }) {
|
||||
const links = [
|
||||
{ label: dict.nav.about, href: "#about" },
|
||||
{ label: dict.nav.services, href: "#services" },
|
||||
{ label: dict.nav.gallery, href: "#gallery" },
|
||||
{ label: dict.nav.contact, href: "#contact" },
|
||||
];
|
||||
|
||||
return (
|
||||
<footer className="relative bg-sea-dark text-sand-light overflow-hidden">
|
||||
|
||||
{/* Large decorative brand name — background texture */}
|
||||
<div className="absolute inset-x-0 top-0 flex items-start justify-center pointer-events-none select-none overflow-hidden">
|
||||
<span className="text-[clamp(6rem,20vw,18rem)] font-serif text-white/[0.03] leading-none tracking-tight whitespace-nowrap">
|
||||
MOY BEACH
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
|
||||
{/* Top section */}
|
||||
<div className="container mx-auto px-6 max-w-6xl pt-20 pb-14">
|
||||
<div className="grid md:grid-cols-3 gap-12 items-start">
|
||||
|
||||
{/* Brand column */}
|
||||
<div className="md:col-span-1">
|
||||
<p className="text-2xl md:text-3xl font-serif text-white tracking-wide mb-3">MOY BEACH</p>
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-coral mb-6">Akyaka · Muğla</p>
|
||||
<p className="text-sm text-sand-light/60 leading-relaxed mb-8">
|
||||
{dict.footer.desc}
|
||||
</p>
|
||||
|
||||
{/* Social icons */}
|
||||
<div className="flex gap-3">
|
||||
{socials.map((s) => (
|
||||
<a
|
||||
key={s.label}
|
||||
href={s.href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label={s.label}
|
||||
className="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center text-sand-light/60 hover:text-white hover:border-coral hover:bg-coral/10 transition-all duration-300"
|
||||
>
|
||||
{s.icon}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation column */}
|
||||
<div>
|
||||
<h4 className="text-[11px] uppercase tracking-[0.25em] text-sand-dark mb-5">{dict.footer.pages}</h4>
|
||||
<ul className="space-y-3">
|
||||
{links.map((l) => (
|
||||
<li key={l.label}>
|
||||
<a
|
||||
href={l.href}
|
||||
className="text-sm text-sand-light/65 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
|
||||
>
|
||||
<span className="w-0 group-hover:w-3 h-px bg-coral transition-all duration-300 shrink-0" />
|
||||
{l.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact column */}
|
||||
<div>
|
||||
<h4 className="text-[11px] uppercase tracking-[0.25em] text-sand-dark mb-5">{dict.footer.contact}</h4>
|
||||
<ul className="space-y-4 text-sm text-sand-light/65">
|
||||
<li className="leading-relaxed">
|
||||
{dict.contact.address.text1}<br />
|
||||
{dict.contact.address.text2}
|
||||
</li>
|
||||
<li>
|
||||
<a href="tel:+905344656235" className="hover:text-white transition-colors">
|
||||
+90 534 465 62 35
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:info@moybeachakyaka.com" className="hover:text-white transition-colors">
|
||||
info@moybeachakyaka.com
|
||||
</a>
|
||||
</li>
|
||||
<li className="text-sand-light/45">{dict.contact.hours.text}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-white/[0.07]" />
|
||||
|
||||
{/* Bottom bar */}
|
||||
<div className="container mx-auto px-6 max-w-6xl py-6 flex flex-col sm:flex-row justify-between items-center gap-3 text-[11px] text-sand-light/35">
|
||||
<p>© {new Date().getFullYear()} {dict.footer.rights}</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<span>{dict.footer.created_by}</span>
|
||||
<a
|
||||
href="https://ayris.tech"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="hover:text-sand-light/70 transition-colors underline underline-offset-4"
|
||||
>
|
||||
ayris.tech
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Floating WhatsApp Button */}
|
||||
<a
|
||||
href="https://wa.me/905344656235"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="fixed bottom-6 right-6 z-50 bg-[#25D366] text-white p-3.5 rounded-full shadow-xl hover:scale-110 transition-transform"
|
||||
aria-label="WhatsApp ile iletişime geçin"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" className="w-6 h-6 fill-current">
|
||||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user