From 72bd165a1a0dec54f5298a2b87da0f5c4afeed61 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Wed, 13 Mar 2024 17:51:07 +0100
Subject: [PATCH] introducing component

---
 src/assets/css/components/ui/Marquee.scss | 27 +++++++++++++++++
 src/components/ui/Marquee.jsx             | 36 +++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 src/assets/css/components/ui/Marquee.scss
 create mode 100644 src/components/ui/Marquee.jsx

diff --git a/src/assets/css/components/ui/Marquee.scss b/src/assets/css/components/ui/Marquee.scss
new file mode 100644
index 0000000..9883b05
--- /dev/null
+++ b/src/assets/css/components/ui/Marquee.scss
@@ -0,0 +1,27 @@
+.marquee {
+	@apply w-screen bg-construction p-4 py-10 text-slate-900 text-zuume uppercase text-6xl xl:text-7xl font-bold;
+	margin: 2rem calc(50% - 50vw) !important;
+	rotate: -2deg;
+
+	div {
+		@apply flex;
+	}
+	p {
+		@apply text-zuume w-fit;
+		white-space: nowrap;
+		will-change: transform;
+		animation: marquee 20s linear infinite;
+	}
+	span {
+		@apply text-zuume w-fit;
+	}
+}
+
+@keyframes marquee {
+	0% {
+		transform: translateX(0vw);
+	}
+	100% {
+		transform: translateX(-100%);
+	}
+}
diff --git a/src/components/ui/Marquee.jsx b/src/components/ui/Marquee.jsx
new file mode 100644
index 0000000..65e0429
--- /dev/null
+++ b/src/components/ui/Marquee.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+export default function Marquee({ children }) {
+	return (
+		<div className='marquee'>
+			<div>
+				<p>
+					<span lang='fr'>Restez en sécurité</span>
+					<span lang='en'>Stay Safe</span>
+					<span lang='es'>Mantente a salvo</span>
+					<span lang='pt'>Fique seguro</span>
+					<span lang='de'>Bleib sicher</span>
+					<span lang='da'>Vær sikker</span>
+					<span lang='fi'>Pysy turvassa</span>
+					<span lang='pl'>Bądź bezpieczny</span>
+					<span lang='cs'>Buď v bezpečí</span>
+					<span lang='sk'>Buďte v bezpeí</span>
+					<span lang='ms'>Kekal selamat</span>
+				</p>
+				<p>
+					<span lang='fr'>Restez en sécurité</span>
+					<span lang='en'>Stay Safe</span>
+					<span lang='es'>Mantente a salvo</span>
+					<span lang='pt'>Fique seguro</span>
+					<span lang='de'>Bleib sicher</span>
+					<span lang='da'>Vær sikker</span>
+					<span lang='fi'>Pysy turvassa</span>
+					<span lang='pl'>Bądź bezpieczny</span>
+					<span lang='cs'>Buď v bezpečí</span>
+					<span lang='sk'>Buďte v bezpeí</span>
+					<span lang='ms'>Kekal selamat</span>
+				</p>
+			</div>
+		</div>
+	);
+}