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

---
 src/pages/Home.jsx | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 841e7d0..633540a 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,4 +1,3 @@
-import Lottie from "lottie-react";
 import { useUser } from "../hooks/useUser";
 import { Link } from "react-router-dom";
 
@@ -7,25 +6,19 @@ import coverWorker from "../assets/img/illustrations/cover_worker.svg";
 import screenWorker1 from "../assets/img/illustrations/screen_worker_1.svg";
 import screenWorker2 from "../assets/img/illustrations/screen_worker_2.svg";
 import AnimatedPage from "../components/AnimatedPage";
-import cloudPageTransition from "../assets/animations/transition-nuages-pages";
+
+import Clouds from "../components/animations/Clouds";
 
 export default function Home() {
 	const { screensTranslations } = useUser();
 
 	if (!screensTranslations || !screensTranslations.home) return <p>loading</p>;
 	const currentScreenTranslations = screensTranslations.home;
+	const uiTranslations = screensTranslations.ui;
 
 	return (
 		<>
-			<Lottie
-				// lottieRef={playerRef}
-				className='test-load-animation'
-				animationData={cloudPageTransition}
-				speed={21}
-				loop={false}
-				autoplay
-			/>
-
+			<Clouds />
 			<AnimatedPage className='page-container page-container--home'>
 				<div className='screen screen--home'>
 					<Nav />
@@ -37,6 +30,7 @@ export default function Home() {
 							{currentScreenTranslations.app_description}
 						</p>
 						<Link
+							title={uiTranslations.start}
 							to='/select-profile'
 							className='cta cta--construction cta--round cta--button-icon cta--play  '
 						/>