Pop up add

frontend/src/pages/Home.jsx

@@ -5,10 +5,13 @@ import DynamicHeroSlider from "../components/DynamicHeroSlider";
 import CategoryDisplay from "../components/CategoryDisplay";
 import MovieGenreTabsContainer from "../components/MovieGenreTabsContainer";
 import LogoContainer from "../components/LogoContainer";
+import { useUser } from "../contexts/UserContext";
 
 function Home() {
   const { movies } = useMovies();
   const [categories, setCategories] = useState([]);
+  const { user } = useUser();
+  const [showAd, setShowAd] = useState(false);
 
   const getCategories = () => {
     axios
@@ -25,11 +28,28 @@ function Home() {
     getCategories();
   }, []);
 
+  useEffect(() => {
+    setShowAd(true);
+    const timer = setTimeout(() => {
+      setShowAd(false);
+    }, 6000);
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
     <div className="home">
       <div className="movies-display-section">
         <LogoContainer />
         <DynamicHeroSlider movies={movies} />
+        <button
+          type="button"
+          className={`pub ${showAd ? "show" : "hide"}`}
+          onClick={() =>
+            window.open("https://open.spotify.com/intl-fr", "_blank")
+          }
+        >
+          {!user && <img src="/src/assets/icons/pub_spotify.jpg" alt="pub" />}
+        </button>
         <MovieGenreTabsContainer categories={categories} />
         {categories.map((categorie) => (
           <CategoryDisplay

frontend/src/sass/_home.scss

@@ -17,6 +17,27 @@
       calc(var(--spacing-constant) * 2 * 1.5)
     );
     display: flex;
+    .pub {
+      border: none;
+      position: fixed;
+      right: 0;
+      z-index: 9999;
+      top: 50%;
+      transform: translateX(100%);
+      transition: transform 1s ease-in-out;
+      width: 80%;
+      max-width: 800px;
+      img {
+        width: 100%;
+        height: auto;
+      }
+      &.show {
+        transform: translateX(0);
+      }
+      &.hide {
+        transform: translateX(100%);
+      }
+    }
   }
 }