refactoring clouds to propper component

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  '
 						/>