From 50231292f90d04302c37a37bc944d5c198a4cbe3 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Thu, 14 Mar 2024 11:14:15 +0100
Subject: [PATCH] refactoring clouds to propper component

---
 src/assets/css/components/animation/Clouds.scss | 13 +++++++++++++
 src/components/animations/Clouds.jsx            | 16 ++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 src/assets/css/components/animation/Clouds.scss
 create mode 100644 src/components/animations/Clouds.jsx

diff --git a/src/assets/css/components/animation/Clouds.scss b/src/assets/css/components/animation/Clouds.scss
new file mode 100644
index 0000000..460755f
--- /dev/null
+++ b/src/assets/css/components/animation/Clouds.scss
@@ -0,0 +1,13 @@
+.cloud-animation {
+	@apply w-full h-full fixed top-0 left-0;
+	z-index: 90;
+	position: fixed;
+	z-index: 40;
+	pointer-events: none;
+	scale: 1.1;
+	filter: blur(2px);
+	svg {
+		width: 100px;
+		heigth: 100px;
+	}
+}
diff --git a/src/components/animations/Clouds.jsx b/src/components/animations/Clouds.jsx
new file mode 100644
index 0000000..5547f7f
--- /dev/null
+++ b/src/components/animations/Clouds.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import cloudPageTransition from "../../assets/animations/transition-nuages-pages";
+import Lottie from "lottie-react";
+
+export default function Clouds() {
+	return (
+		<Lottie
+			className='cloud-animation'
+			animationData={cloudPageTransition}
+			speed={21}
+			loop={false}
+			autoplay
+		/>
+	);
+}