introducing component

src/assets/css/components/layout/Footer.scss

@@ -0,0 +1,73 @@
+.cta--home {
+	@apply mx-auto;
+}
+.footer {
+	@apply px-10 py-24 xl:p-32 w-screen relative z-10 text-slate-900;
+	margin: 10rem calc(50% - 50vw) 0 calc(50% - 50vw) !important;
+	transform: translateY(30px);
+
+	box-sizing: border-box;
+	p {
+		@apply m-0;
+	}
+	&:after {
+		@apply block w-full h-full absolute left-0 top-0 bg-white;
+		content: "";
+		z-index: -1;
+		transform: skew(0deg, -2deg);
+	}
+
+	&__cover_worker {
+		@apply absolute top-0 left-1/2;
+		transform: translate(-43%, -50%);
+	}
+	&__app-horizontal-logo {
+		@apply block w-full h-auto;
+	}
+	&__colophon {
+		@apply flex flex-col md:flex-row gap-x-12 gap-y-4 pt-24 items-start;
+
+		.logo-lhoist {
+			@apply w-40 h-auto;
+		}
+		.credits {
+			@apply text-left;
+			p {
+				width: max-content;
+			}
+		}
+		.year {
+			@apply font-bold;
+		}
+	}
+
+	&__links {
+		@apply flex 
+		flex-col
+		text-left
+		md:flex-row
+		gap-x-4
+		md:ml-auto
+		flex-wrap
+		lg:justify-end
+		my-0 p-0;
+		li {
+			list-style: none !important;
+		}
+		a {
+			@apply no-underline 
+			text-slate-900
+	 
+			hover:underline
+			hover:text-lhoistdark
+			underline-offset-4;
+			font-weight: 600;
+		}
+		.made_by {
+			@apply w-full text-left lg:text-right text-lhoist pt-2 opacity-90;
+			a {
+				@apply text-lhoist;
+			}
+		}
+	}
+}

src/components/ui/Footer.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import coverWorker from "../../assets/img/illustrations/cover_worker.svg";
+import staySafeLogoHorizontal from "../../assets/img/logos/stay-safe-logo-horizontal.svg";
+import logoLhoist from "../../assets/img/logos/logo-lhoist.svg";
+
+import { Link } from "react-router-dom";
+import { useUser } from "../../hooks/useUser";
+export default function Footer() {
+	const { screensTranslations } = useUser();
+
+	if (!screensTranslations || !screensTranslations.home) return <p>loading</p>;
+	const footerTranslations = screensTranslations.footer;
+	const pagesNameTranslations = screensTranslations.pagesName;
+
+	return (
+		<>
+			<Link
+				to={"/Home"}
+				className='cta cta--construction cta--round cta--button-icon cta--home'></Link>
+			<footer className='footer'>
+				<img className='footer__cover_worker' src={coverWorker} alt='' />
+				<img className='footer__app-horizontal-logo' src={staySafeLogoHorizontal} alt='' />
+
+				<div className='footer__colophon'>
+					<img className='logo-lhoist' src={logoLhoist} alt='' />
+					<div className='credits'>
+						<p>
+							<span className='year'>© 2024 Lhoist, </span>
+							{footerTranslations?.copyright}
+						</p>
+						<p> {footerTranslations?.all_rights_reserved}</p>
+					</div>
+
+					<ul className='footer__links'>
+						<li>
+							<Link to='/conditions'>
+								{pagesNameTranslations?.conditions}
+							</Link>
+						</li>
+						<li>
+							<Link to='/cookies'>{pagesNameTranslations?.cookies}</Link>
+						</li>
+						<li>
+							<Link to='/confidentiality'>
+								{pagesNameTranslations?.confidentiality}
+							</Link>
+						</li>
+						<li className='made_by'>
+							Web & graphic design by{" "}
+							<a target='_blank' href='https://deligraph.com/'>
+								Deligraph
+							</a>
+						</li>
+					</ul>
+				</div>
+			</footer>
+		</>
+	);
+}