83 lines
5.4 KiB
TypeScript
83 lines
5.4 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from "next-intl";
|
|
import Link from "next/link";
|
|
import { mockData } from "@/lib/mock-data";
|
|
import { Share2, Mail } from "lucide-react";
|
|
|
|
const FacebookIcon = ({ className }: { className?: string }) => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
|
|
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
|
|
</svg>
|
|
);
|
|
|
|
const InstagramIcon = ({ className }: { className?: string }) => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
|
|
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
|
|
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
|
|
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
|
|
</svg>
|
|
);
|
|
|
|
export function Footer() {
|
|
const t = useTranslations("footer");
|
|
|
|
return (
|
|
<footer className="w-full bg-surface-container-high dark:bg-inverse-surface border-t border-outline-variant/20 dark:border-outline/20">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 px-4 md:px-12 py-24 max-w-7xl mx-auto">
|
|
<div className="space-y-6">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src={mockData.logos.main} alt="Kordon Apart Logo" className="h-10 w-auto" />
|
|
<p className="font-body-md text-on-surface-variant dark:text-outline pr-4">
|
|
{t("desc")}
|
|
</p>
|
|
<div className="flex gap-4">
|
|
<Link href={mockData.contact.social.facebook} className="w-10 h-10 rounded-full bg-primary/5 dark:bg-primary-fixed-dim/10 flex items-center justify-center text-primary dark:text-primary-fixed-dim hover:bg-primary dark:hover:bg-primary-fixed-dim hover:text-white dark:hover:text-primary-fixed transition-all">
|
|
<FacebookIcon className="w-5 h-5" />
|
|
</Link>
|
|
<Link href={mockData.contact.social.instagram} className="w-10 h-10 rounded-full bg-primary/5 dark:bg-primary-fixed-dim/10 flex items-center justify-center text-primary dark:text-primary-fixed-dim hover:bg-primary dark:hover:bg-primary-fixed-dim hover:text-white dark:hover:text-primary-fixed transition-all">
|
|
<InstagramIcon className="w-5 h-5" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<h4 className="font-label-sm text-[12px] text-primary dark:text-primary-fixed-dim uppercase font-bold tracking-widest">{t("pages")}</h4>
|
|
<ul className="space-y-3">
|
|
<li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("accommodations")}</Link></li>
|
|
<li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("about")}</Link></li>
|
|
<li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("reviews")}</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<h4 className="font-label-sm text-[12px] text-primary dark:text-primary-fixed-dim uppercase font-bold tracking-widest">{t("legal")}</h4>
|
|
<ul className="space-y-3">
|
|
<li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("privacyPolicy")}</Link></li>
|
|
<li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("userAgreement")}</Link></li>
|
|
<li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("cookiePolicy")}</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<h4 className="font-label-sm text-[12px] text-primary dark:text-primary-fixed-dim uppercase font-bold tracking-widest">{t("contact")}</h4>
|
|
<p className="font-body-md text-on-surface-variant dark:text-outline">{mockData.contact.address}</p>
|
|
<p className="font-body-md text-on-surface-variant dark:text-outline">{mockData.contact.phone}</p>
|
|
<p className="font-body-md text-on-surface-variant dark:text-outline">{mockData.contact.email}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-4 md:px-12 py-8 border-t border-outline-variant/30 dark:border-outline/20 flex flex-col md:flex-row justify-between items-center gap-4">
|
|
<span className="font-body-md text-on-surface-variant/70 dark:text-outline/70">
|
|
© {new Date().getFullYear()} Kordon Apart. {t("rights")}
|
|
</span>
|
|
<div className="flex gap-8 items-center">
|
|
<Link href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="text-primary dark:text-primary-fixed-dim font-semibold font-body-md hover:underline">
|
|
Created by ayris.tech
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|