121 lines
4.1 KiB
TypeScript
121 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { useCookieConsent } from "@/components/cookies";
|
|
import { useTranslation } from "@/lib/hooks/useTranslation";
|
|
import { container } from "@/lib/utils";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
export function Footer() {
|
|
const { t } = useTranslation();
|
|
const { openModal } = useCookieConsent();
|
|
|
|
// Definiraj linkove s prijevodima
|
|
const navLinks = [
|
|
{ name: t('footer.build_box'), href: "/build-box" },
|
|
{ name: t('footer.products'), href: "/products" },
|
|
{ name: t('footer.about'), href: "/about" }
|
|
];
|
|
|
|
const legalLinks = [
|
|
{ name: t('footer.privacy_policy'), href: "/privacy-policy" },
|
|
{ name: t('footer.terms_of_service'), href: "/terms-of-service" },
|
|
{ name: t('footer.cookies_settings'), href: "#", isButton: true }
|
|
];
|
|
|
|
const socialLinks = [
|
|
{ name: t('footer.social.facebook'), href: "https://facebook.com/sentshop", icon: "/assets/images/Facebook.png" },
|
|
{ name: t('footer.social.instagram'), href: "https://instagram.com/sentshop", icon: "/assets/images/Instagram.png" }
|
|
];
|
|
|
|
const handleCookiesSettings = () => {
|
|
openModal();
|
|
};
|
|
|
|
return (
|
|
<footer className="bg-gray-100">
|
|
<div className={container}>
|
|
{/* Main footer content */}
|
|
<div className="py-12">
|
|
<div className="flex flex-col md:flex-row md:justify-between md:items-center">
|
|
{/* Logo */}
|
|
<div className="flex justify-center md:justify-start mb-8 md:mb-0">
|
|
<Link href="/" aria-label="Logo">
|
|
<Image
|
|
src="/assets/images/logo.svg"
|
|
alt="SENT logo"
|
|
width={125}
|
|
height={35}
|
|
className="w-[125px] h-auto object-contain"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex flex-col items-center md:flex-row md:space-x-8 mb-8 md:mb-0">
|
|
{navLinks.map((link, index) => (
|
|
<Link
|
|
key={index}
|
|
href={link.href}
|
|
className="text-[16px] font-bold text-gray-700 hover:text-gray-900 mb-4 md:mb-0"
|
|
>
|
|
{link.name}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Social media icons */}
|
|
<div className="flex items-center justify-center md:justify-end space-x-6 mb-8 md:mb-0">
|
|
{socialLinks.map((social, index) => (
|
|
<Link
|
|
key={index}
|
|
href={social.href}
|
|
aria-label={social.name}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-gray-500 hover:text-gray-700"
|
|
>
|
|
<Image
|
|
src={social.icon}
|
|
alt={social.name}
|
|
width={20}
|
|
height={20}
|
|
/>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Legal footer */}
|
|
<div className="border-t border-gray-200">
|
|
<div className="py-6">
|
|
<div className="flex flex-col md:flex-row justify-center items-center text-[14px] leading-[21px] text-gray-500 space-y-4 md:space-y-0 md:space-x-6">
|
|
<span>© {new Date().getFullYear()} Sent. {t('footer.all_rights_reserved')}</span>
|
|
{legalLinks.map((link, index) => (
|
|
link.isButton ? (
|
|
<button
|
|
key={index}
|
|
onClick={handleCookiesSettings}
|
|
className="hover:text-gray-700 text-[14px] leading-[21px]"
|
|
>
|
|
{link.name}
|
|
</button>
|
|
) : (
|
|
<Link
|
|
key={index}
|
|
href={link.href}
|
|
className="hover:text-gray-700 text-[14px] leading-[21px]"
|
|
>
|
|
{link.name}
|
|
</Link>
|
|
)
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|