From 75d07e0d049688a41bb1f5033ea3954a00f192ab Mon Sep 17 00:00:00 2001
From: Vins <vincent.alamelle@smart-chain.fr>
Date: Wed, 24 Jul 2024 16:08:49 +0200
Subject: [PATCH] Footer design system

---
 .../DesignSystem/Footer/classes.module.scss   | 42 +++++++++++++++++++
 .../DesignSystem/Footer/desktop.tsx           | 20 +++++++++
 .../Components/DesignSystem/Footer/index.tsx  | 17 ++++++++
 .../Components/DesignSystem/Footer/mobile.tsx | 18 ++++++++
 .../Components/DesignSystem/Footer/tablet.tsx | 20 +++++++++
 .../Components/Layouts/DesignSystem/index.tsx |  2 +
 src/front/Themes/constants.scss               |  2 +-
 7 files changed, 120 insertions(+), 1 deletion(-)
 create mode 100644 src/front/Components/DesignSystem/Footer/classes.module.scss
 create mode 100644 src/front/Components/DesignSystem/Footer/desktop.tsx
 create mode 100644 src/front/Components/DesignSystem/Footer/index.tsx
 create mode 100644 src/front/Components/DesignSystem/Footer/mobile.tsx
 create mode 100644 src/front/Components/DesignSystem/Footer/tablet.tsx

diff --git a/src/front/Components/DesignSystem/Footer/classes.module.scss b/src/front/Components/DesignSystem/Footer/classes.module.scss
new file mode 100644
index 00000000..0df500d9
--- /dev/null
+++ b/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: "|";
+		}
+	}
+}
diff --git a/src/front/Components/DesignSystem/Footer/desktop.tsx b/src/front/Components/DesignSystem/Footer/desktop.tsx
new file mode 100644
index 00000000..d0eb1772
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/src/front/Components/DesignSystem/Footer/index.tsx b/src/front/Components/DesignSystem/Footer/index.tsx
new file mode 100644
index 00000000..bd56d8f9
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/src/front/Components/DesignSystem/Footer/mobile.tsx b/src/front/Components/DesignSystem/Footer/mobile.tsx
new file mode 100644
index 00000000..12f962bd
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/src/front/Components/DesignSystem/Footer/tablet.tsx b/src/front/Components/DesignSystem/Footer/tablet.tsx
new file mode 100644
index 00000000..adec78f9
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index 4152498b..4da7b128 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/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>
 	);
diff --git a/src/front/Themes/constants.scss b/src/front/Themes/constants.scss
index a9b8ab4a..c7ce74cb 100644
--- a/src/front/Themes/constants.scss
+++ b/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);