90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
import footerDecorPng from "&/images/footer/composition-footer.svg";
|
||
import logoWatermark from "&/images/footer/icon-qualimaine 1.png";
|
||
import footerChickenRight from "&/images/vectors/poulet-eat.svg";
|
||
import useTrans from "@/hooks/use-translations";
|
||
|
||
import CookieNoticeLink from "../cookie/CookieNoticeLink";
|
||
|
||
export default function Footer() {
|
||
return (
|
||
<footer
|
||
id={useTrans("footer.contactSlug")}
|
||
className="relative w-full overflow-hidden"
|
||
>
|
||
<div className="relative h-[160px] w-full overflow-hidden md:h-[270px] lg:h-[360px]">
|
||
<img
|
||
src={footerDecorPng}
|
||
alt=""
|
||
aria-hidden="true"
|
||
className="pointer-events-none absolute -bottom-1 lg:bottom-0 left-1/2 z-0 w-[80%] max-w-[850px] -translate-x-1/2 lg:left-1/4 lg:w-[35%]"
|
||
/>
|
||
<img
|
||
src={footerChickenRight}
|
||
alt=""
|
||
aria-hidden="true"
|
||
className="pointer-events-none absolute -right-8 top-[155px] z-0 rotate-y-180 opacity-10 hidden w-[220px] lg:block lg:w-[280px]"
|
||
/>
|
||
</div>
|
||
|
||
<div className="relative bg-[#464341] px-8 py-12 md:px-12 lg:px-[60px]">
|
||
<img
|
||
src={logoWatermark}
|
||
alt=""
|
||
aria-hidden="true"
|
||
className="pointer-events-none absolute bottom-24 right-8 z-0 hidden w-[350px] md:block lg:right-64"
|
||
/>
|
||
|
||
<div className="relative z-10 mx-auto max-w-[1320px] text-center">
|
||
<h2 className="font-sans text-3xl lg:text-[32px] font-extrabold text-white uppercase">
|
||
{useTrans("footer.title")}
|
||
</h2>
|
||
|
||
<p className="mt-4 font-sans text-xl lg:text-[22px] text-white">
|
||
{useTrans("footer.contactText")}
|
||
<br />
|
||
<a
|
||
href={`mailto:${useTrans("footer.email")}`}
|
||
className="font-bold text-[18px] underline"
|
||
>
|
||
{useTrans("footer.email")}
|
||
</a>
|
||
</p>
|
||
|
||
<div className="mt-8 font-sans text-[22px] leading-relaxed text-white">
|
||
<p>{useTrans("footer.company")}</p>
|
||
<p>{useTrans("footer.address")}</p>
|
||
<p>{useTrans("footer.postalCity")}</p>
|
||
<p>{useTrans("footer.country")}</p>
|
||
</div>
|
||
|
||
<div className="mx-auto my-5 h-1 w-60 rounded-full bg-band md:w-5xl" />
|
||
|
||
<p className="mx-auto mt-6 font-sans text-[16px] lg:text-[18px] text-band">
|
||
{useTrans("footer.disclaimer")}
|
||
</p>
|
||
|
||
<div className="mt-8 lg:flex flex-wrap items-start lg:items-center justify-center gap-x-2 gap-y-1 font-sans text-[16px] lg:text-[18px] text-band">
|
||
<a
|
||
href={route("front.mentions-legales")}
|
||
className="font-bold underline hover:text-white"
|
||
>
|
||
{useTrans("footer.legalNotice")}
|
||
</a>
|
||
<span className="text-band px-0.5">–</span>
|
||
<a
|
||
href={route("front.privacy-policy")}
|
||
className="font-bold underline hover:text-white"
|
||
>
|
||
{useTrans("footer.privacyPolicy")}
|
||
</a>
|
||
<span className="text-band px-0.5">–</span>
|
||
<CookieNoticeLink
|
||
className="font-bold underline cursor-pointer hover:text-white"
|
||
label={useTrans("footer.cookieManagement")}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
}
|