120 lines
3.2 KiB
TypeScript
120 lines
3.2 KiB
TypeScript
import { SITE_NAME } from "@/lib/constants";
|
|
import {
|
|
FaFacebook,
|
|
FaInstagram,
|
|
FaLinkedin,
|
|
FaTwitter,
|
|
FaYoutube,
|
|
} from "react-icons/fa";
|
|
|
|
const sections = [
|
|
{
|
|
title: "Product",
|
|
links: [
|
|
{ name: "Overview", href: "#" },
|
|
{ name: "Pricing", href: "#" },
|
|
{ name: "Marketplace", href: "#" },
|
|
{ name: "Features", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
links: [
|
|
{ name: "About", href: "#" },
|
|
{ name: "Team", href: "#" },
|
|
{ name: "Blog", href: "#" },
|
|
{ name: "Careers", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Resources",
|
|
links: [
|
|
{ name: "Help", href: "#" },
|
|
{ name: "Sales", href: "#" },
|
|
{ name: "Advertise", href: "#" },
|
|
{ name: "Privacy", href: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
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">
|
|
<img
|
|
src="https://shadcnblocks.com/images/block/block-1.svg"
|
|
alt="logo"
|
|
className="h-11"
|
|
/>
|
|
<p className="text-3xl font-semibold">
|
|
{SITE_NAME}
|
|
</p>
|
|
</span>
|
|
<p className="mt-6 text-sm text-muted-foreground">
|
|
A collection of 100+ responsive HTML
|
|
templates for your startup business or side
|
|
project.
|
|
</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-3 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;
|