93 lines
2.8 KiB
TypeScript
93 lines
2.8 KiB
TypeScript
import { SITE_NAME } from "@/lib/constants";
|
|
import { FaFacebook, FaYoutube } from "react-icons/fa";
|
|
import Logo from "./logo";
|
|
|
|
const sections = [
|
|
{
|
|
title: "Resources",
|
|
links: [
|
|
{ name: "Accueil", href: "/" },
|
|
{ name: "Planning", href: "/planning" },
|
|
{ name: "À propos", href: "/about" },
|
|
{ name: "Galerie", href: "/gallery" },
|
|
{ name: "Blog", href: "/blogs" },
|
|
{ name: "Contact", href: "/contact" },
|
|
],
|
|
},
|
|
];
|
|
|
|
const Footer = () => {
|
|
return (
|
|
<section className="p-16">
|
|
<div className="">
|
|
<footer>
|
|
<div className="flex flex-col items-center justify-between gap-10 text-center lg:flex-row lg:text-left">
|
|
<div className="flex w-full max-w-96 shrink flex-col items-center justify-between gap-6 lg:items-start">
|
|
<div>
|
|
<span className="flex items-center justify-center gap-4 lg:justify-start">
|
|
<Logo className="h-11 w-11" />
|
|
<p className="text-3xl font-semibold">
|
|
{SITE_NAME}
|
|
</p>
|
|
</span>
|
|
<p className="mt-6 text-sm text-muted-foreground"></p>
|
|
</div>
|
|
<ul className="flex items-center space-x-6 text-muted-foreground">
|
|
<li className="font-medium hover:text-primary">
|
|
<a href="https://www.facebook.com/wingtsun.picardie">
|
|
<FaFacebook className="size-6" />
|
|
</a>
|
|
</li>
|
|
<li className="font-medium hover:text-primary">
|
|
<a href="https://www.youtube.com/@WingTsunPicardie">
|
|
<FaYoutube className="size-6" />
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div
|
|
className={`grid grid-cols-[${sections.length}] gap-6 lg:gap-20`}
|
|
>
|
|
{sections.map((section, sectionIdx) => (
|
|
<div key={sectionIdx}>
|
|
<h3 className="mb-6 font-bold">
|
|
{section.title}
|
|
</h3>
|
|
<ul className="space-y-4 text-sm text-muted-foreground">
|
|
{section.links.map((link, linkIdx) => (
|
|
<li
|
|
key={linkIdx}
|
|
className="font-medium hover:text-primary"
|
|
>
|
|
<a href={link.href}>
|
|
{link.name}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="mt-20 flex flex-col justify-between gap-4 border-t pt-8 text-center text-sm font-medium text-muted-foreground lg:flex-row lg:items-center lg:text-left">
|
|
<p>
|
|
© {new Date(Date.now()).getFullYear()} {SITE_NAME}.
|
|
Tous droits réservés.
|
|
</p>
|
|
<ul className="flex justify-center gap-4 lg:justify-start">
|
|
<li className="hover:text-primary">
|
|
<a href="#"> Terms and Conditions</a>
|
|
</li>
|
|
<li className="hover:text-primary">
|
|
<a href="#"> Privacy Policy</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|