Footer design system

src/front/Components/DesignSystem/Footer/classes.module.scss

@@ -0,0 +1,42 @@
+@import "@Themes/constants.scss";
+
+.root {
+	border-top: 1px solid var(--footer-border, #d7dce0);
+	background: var(--footer-background, #fff);
+	padding: var(--spacing-1-5) 0;
+	font-family: var(--font-title-family, Poppins);
+	font-size: 12px;
+	font-weight: var(--font-text-weight-regular, 400);
+	letter-spacing: 0.06px;
+	.sub-root {
+		display: flex;
+		align-items: center;
+		gap: var(--Radius-lg, 16px);
+		white-space: nowrap;
+		justify-content: center;
+	}
+
+	@media (max-width: 660px) or (min-width: 768px) {
+		.tablet {
+			display: none;
+		}
+	}
+
+	@media (min-width: 660px) {
+		.mobile {
+			display: none;
+		}
+	}
+
+	@media (max-width: 769px) {
+		.desktop {
+			display: none;
+		}
+	}
+
+	.separator {
+		&::before {
+			content: "|";
+		}
+	}
+}

src/front/Components/DesignSystem/Footer/desktop.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import classes from "./classes.module.scss";
+
+type IProps = {
+	className?: string;
+};
+
+export default function Desktop({ className }: IProps) {
+	return (
+		<div className={[classes["sub-root"], className].join(" ")}>
+			<span>© Copyright lecoffre 2024</span>
+			<span className={classes["separator"]} />
+			<a href="/terms">Conditions d'utilisation</a>
+			<span className={classes["separator"]} />
+			<a href="/privacy">Politique de confidentialité</a>
+			<span className={classes["separator"]} />
+			<a href="/cookies">Politique des cookies</a>
+		</div>
+	);
+}

src/front/Components/DesignSystem/Footer/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import Mobile from "./mobile";
+import Desktop from "./desktop";
+import Tablet from "./tablet";
+
+type IProps = {};
+
+export default function Footer(props: IProps) {
+	return (
+		<footer className={classes["root"]}>
+			<Mobile className={classes["mobile"]} />
+			<Tablet className={classes["tablet"]} />
+			<Desktop className={classes["desktop"]} />
+		</footer>
+	);
+}

src/front/Components/DesignSystem/Footer/mobile.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import classes from "./classes.module.scss";
+
+type IProps = {
+	className?: string;
+};
+
+export default function Mobile({ className }: IProps) {
+	return (
+		<div className={[classes["sub-root"], className].join(" ")}>
+			<span>© Lecoffre 2024</span>
+			<span className={classes["separator"]} />
+			<a href="/terms">Juridiques</a>
+			<span className={classes["separator"]} />
+			<a href="/cookies">Cookies</a>
+		</div>
+	);
+}

src/front/Components/DesignSystem/Footer/tablet.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import classes from "./classes.module.scss";
+
+type IProps = {
+	className?: string;
+};
+
+export default function Tablet({ className }: IProps) {
+	return (
+		<div className={[classes["sub-root"], className].join(" ")}>
+			<span>© Lecoffre 2024</span>
+			<span className={classes["separator"]} />
+			<a href="/terms">Conditions d'utilisation</a>
+			<span className={classes["separator"]} />
+			<a href="/privacy">Politique de confidentialité</a>
+			<span className={classes["separator"]} />
+			<a href="/cookies">Politique des cookies</a>
+		</div>
+	);
+}

src/front/Components/Layouts/DesignSystem/index.tsx

@@ -14,6 +14,7 @@ import NumberPicker from "@Front/Components/Elements/NumberPicker";
 import Tabs from "@Front/Components/Elements/Tabs";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import useOpenable from "@Front/Hooks/useOpenable";
+import Footer from "@Front/Components/DesignSystem/Footer";
 import {
 	ArchiveBoxIcon,
 	ArrowLongLeftIcon,
@@ -797,6 +798,7 @@ export default function DesignSystem() {
 						variant={EAlertVariant.NEUTRAL}
 					/>
 				</div>
+				<Footer />
 			</div>
 		</DefaultTemplate>
 	);

src/front/Themes/constants.scss

@@ -3,7 +3,7 @@ $screen-l: 1439px;
 $screen-ls: 1280px;
 $screen-m: 1023px;
 $screen-s: 767px;
-// $screen-xs: 424px;
+$screen-xs: 424px;
 
 $custom-easing: cubic-bezier(0.645, 0.045, 0.355, 1);