hero section 2.0

frontend/src/app/globals.css

@@ -1,23 +1,28 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Noto+Sans:wght@400;500;700;900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Noto+Sans:wght@400;500;700;900&display=swap");
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --bg-primary: #11121f;
+  --bg-secondary: #0c0c16;
+}
+
 body {
-  font-family: 'Inter', 'Noto Sans', sans-serif;
-  background-color: #0a0a10 !important;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  font-family: "Inter", "Noto Sans", sans-serif;
+  background-color: var(--bg-primary) !important;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
   scroll-behavior: smooth;
 }
 
-.app-container{
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+.app-container {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
   scroll-behavior: smooth;
   overflow: scroll;
-  max-height: 100dvh;
+  height: 100dvh;
   padding-top: 80px;
 }
 

frontend/src/app/index.css

@@ -11,7 +11,6 @@
 .index-page-container {
   display: flex;
   flex-direction: column;
-  margin: 0 auto;
   flex: 1;
 }
 

frontend/src/components/HeroSection.css

@@ -12,32 +12,80 @@
 .hero-container {
   position: relative;
   width: 100%;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .hero-section {
   display: flex;
   flex-direction: column;
-  min-height: 480px;
+  min-height: 30rem;
+  width: 100dvw;
   position: relative;
   border-radius: 12px;
-  padding: 1rem;
-  padding-bottom: 2.5rem;
+  animation: fadeIn 1s ease-in-out;
   justify-content: center;
-  animation: fadeIn 1s ease-in-out; /* Add fade-in animation */
 }
 
 .hero-image {
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100dvw;
+  height: 100dvh;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   transition: opacity 1s ease-in-out; /* Smooth transition */
   opacity: 0;
+  z-index: -1;
+  animation: hero-anim-landscape 15s infinite;
+}
+
+@keyframes hero-anim-portrait {
+  0% {
+    background-position: center;
+    background-size: 160% 140%;
+  }
+  25% {
+    background-position: top left;
+    background-size: 120% 100%;
+  }
+  50% {
+    background-position: bottom right;
+    background-size: 160% 140%;
+  }
+  75% {
+    background-position: top right;
+    background-size: 120% 100%;
+  }
+  100% {
+    background-position: center;
+    background-size: 160% 140%;
+  }
+}
+
+
+@keyframes hero-anim-landscape {
+  0% {
+    background-position: center;
+    background-size: 130% 150%;
+  }
+  25% {
+    background-position: top left;
+    background-size: 100% 120%;
+  }
+  50% {
+    background-position: bottom right;
+    background-size: 130% 150%;
+  }
+  75% {
+    background-position: top right;
+    background-size: 100% 120%;
+  }
+  100% {
+    background-position: center;
+    background-size: 130% 150%;
+  }
 }
 
 .hero-image.active {
@@ -47,24 +95,27 @@
 .hero-text {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   color: white;
   gap: 0.5rem;
   text-align: left;
   z-index: 1;
   height: 100%;
-  margin: 20px;
-  width: 49%;
+  margin-top: 30px;
+  margin-left: 20px;
+  width: 80%;
+  justify-content: space-around;
 }
 
 .hero-title {
   color: white;
-  font-size: 5rem;
+  font-size: 7rem;
   font-family: "Anton", sans-serif;
   font-weight: 400;
   font-style: normal;
   line-height: 1;
   transition: font-size 0.3s ease-in-out;
+  user-select: none;
+  width: auto;
 }
 
 .hero-section-play-button {
@@ -76,7 +127,7 @@
 
 .hero-description {
   color: white;
-  font-size: 1rem;
+  font-size: 1.2rem;
   font-weight: normal;
   line-height: 1.4;
   overflow: hidden; /* Hide text overflow */
@@ -85,13 +136,13 @@
   -webkit-box-orient: vertical; /* Set box orientation to vertical */
   text-overflow: ellipsis; /* Add ellipsis (...) */
   transition: font-size 0.3s ease-in-out;
+  user-select: none;
 }
 
 .hero-indicators {
   position: absolute;
   bottom: 1rem;
   left: 50%;
-  transform: translateX(-50%);
   display: flex;
   gap: 0.5rem;
 }
@@ -111,85 +162,30 @@
 }
 
 /* Responsive Styles */
-@media (max-width: 1200px) {
-  .hero-title {
-    font-size: 2rem;
-  }
-  .hero-description {
-    font-size: 0.875rem;
-  }
-  .hero-button {
-    height: 2rem;
-    font-size: 0.75rem;
-    padding: 0 0.75rem;
-  }
-  .indicator {
-    width: 15px;
-    height: 7px;
-  }
-}
-
-@media (max-width: 992px) {
-  .hero-section {
-    min-height: 400px;
+@media (orientation:portrait){
+  .hero-image{
+    height: 85dvw;
+    width: 100dvw;
+    animation: hero-anim-portrait 15s infinite;
   }
   .hero-title {
-    font-size: 1.75rem;
+    color: white;
+    font-size: 2.5rem;
   }
-  .hero-description {
-    font-size: 0.75rem;
-  }
-  .hero-button {
-    height: 1.75rem;
-    font-size: 0.675rem;
-    padding: 0 0.5rem;
-  }
-  .indicator {
-    width: 12px;
-    height: 6px;
-  }
-}
-
-@media (max-width: 768px) {
   .hero-section {
-    min-height: 300px;
-    padding: 0.5rem;
-    padding-bottom: 2rem;
+    min-height: 14rem;
   }
-  .hero-title {
-    font-size: 1.5rem;
-  }
-  .hero-description {
-    font-size: 0.875rem;
-  }
-  .hero-button {
-    height: 1.5rem;
-    font-size: 0.75rem;
-    padding: 0 0.5rem;
-  }
-  .indicator {
-    width: 15px;
-    height: 8px;
+  .hero-description{
+    font-size: .9rem;
   }
+  
 }
-
-@media (max-width: 576px) {
-  .hero-section {
-    min-height: 200px;
+@media (orientation:landscape){
+  .hero-section{
+    height: 3.5rem;
   }
-  .hero-title {
-    font-size: 1.25rem;
-  }
-  .hero-description {
-    font-size: 0.75rem;
-  }
-  .hero-button {
-    height: 1.25rem;
-    font-size: 0.625rem;
-    padding: 0 0.5rem;
+  .hero-text{
+    margin-top: 3rem;
+    margin-left: 4rem;
   }
-  .indicator {
-    width: 12px;
-    height: 6px;
-  }
-}
+}

frontend/src/components/HeroSection.js

@@ -1,116 +1,159 @@
-'use client';
-import { useState, useEffect, useRef } from 'react';
-import './HeroSection.css';
-import apiClient from '@/api/apiClient';
-import SkeletonLoader from '@/skeletons/HeroSection';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlay } from '@fortawesome/free-solid-svg-icons';
-import Link from 'next/link';
+"use client";
+import { useState, useEffect, useRef } from "react";
+import "./HeroSection.css";
+import apiClient from "@/api/apiClient";
+import SkeletonLoader from "@/skeletons/HeroSection";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlay } from "@fortawesome/free-solid-svg-icons";
+import Link from "next/link";
 
 const HeroSection = () => {
-    const [currentIndex, setCurrentIndex] = useState(0);
-    const intervalRef = useRef(null);
-    const [fadeOut, setFadeOut] = useState(false);
-    const [items, setItems] = useState([]);
-    const [loading, setLoading] = useState(true);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const intervalRef = useRef(null);
+  const [fadeOut, setFadeOut] = useState(false);
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [isDragging, setIsDragging] = useState(false);
+  const [startX, setStartX] = useState(0);
 
-    useEffect(() => {
-        const fetchRecentItems = async () => {
-            try {
-                const response = await apiClient.getRecent();
-                console.log(response);
-                const movies = response.movies.map(film => ({
-                    title: film[0],
-                    description: film[2],
-                    imageUrl: film[3],
-                    type: 'Movie'
-                }));
-                const series = response.series.map(serie => ({
-                    title: serie[0],
-                    description: serie[2],
-                    imageUrl: serie[3],
-                    type: 'Series'
-                }));
-                setItems([...movies, ...series]);
-            } catch (error) {
-                console.error('Error fetching recent items:', error);
-            } finally {
-                setLoading(false);
-            }
-        };
+  useEffect(() => {
+    const fetchRecentItems = async () => {
+      try {
+        const response = await apiClient.getRecent();
+        const movies = response.movies.map((film) => ({
+          title: film[0],
+          description: film[2],
+          imageUrl: film[3],
+          type: "Movie",
+        }));
+        const series = response.series.map((serie) => ({
+          title: serie[0],
+          description: serie[2],
+          imageUrl: serie[3],
+          type: "Series",
+        }));
+        setItems([...movies, ...series]);
+      } catch (error) {
+        console.error("Error fetching recent items:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRecentItems();
+  }, []);
 
-        fetchRecentItems();
-    }, []);
+  const startAutoSwitch = () => {
+    if (intervalRef.current) clearInterval(intervalRef.current);
+    intervalRef.current = setInterval(() => {
+      setFadeOut(true);
+      setTimeout(() => {
+        setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
+        setFadeOut(false);
+      }, 200);
+    }, 5000);
+  };
+
+  useEffect(() => {
+    if (items.length > 0) {
+      startAutoSwitch();
+    }
 
-    const startAutoSwitch = () => {
-        if (intervalRef.current) clearInterval(intervalRef.current);
-        intervalRef.current = setInterval(() => {
-            setFadeOut(true);
-            setTimeout(() => {
-                setCurrentIndex(prevIndex => (prevIndex + 1) % items.length);
-                setFadeOut(false);
-            }, 200);
-        }, 5000);
+    return () => {
+      clearInterval(intervalRef.current);
     };
+  }, [items]);
 
-    useEffect(() => {
-        if (items.length > 0) {
-            startAutoSwitch();
+  const handleSwipe = (direction) => {
+    setFadeOut(true);
+    setTimeout(() => {
+      setCurrentIndex((prevIndex) => {
+        if (direction === "left") {
+          return (prevIndex + 1) % items.length;
+        } else {
+          return (prevIndex - 1 + items.length) % items.length;
         }
+      });
+      setFadeOut(false);
+    }, 100);
+    startAutoSwitch();
+  };
 
-        return () => {
-            clearInterval(intervalRef.current);
-        };
-    }, [items]);
-
-    const handleIndicatorClick = (index) => {
-        setFadeOut(true);
-        setTimeout(() => {
-            setCurrentIndex(index);
-            setFadeOut(false);
-        }, 100);
-        startAutoSwitch();
+  const handleTouchStart = (e) => {
+    const touchStartX = e.touches[0].clientX;
+    setStartX(touchStartX);
+    const handleTouchMove = (event) => {
+      const touchEndX = event.touches[0].clientX;
+      const diffX = touchStartX - touchEndX;
+      if (diffX > 50) {
+        handleSwipe("left");
+        document.removeEventListener("touchmove", handleTouchMove);
+      } else if (diffX < -50) {
+        handleSwipe("right");
+        document.removeEventListener("touchmove", handleTouchMove);
+      }
     };
+    document.addEventListener("touchmove", handleTouchMove);
+  };
+
+  const handleMouseDown = (e) => {
+    setStartX(e.clientX);
+    setIsDragging(true);
+  };
 
-    if (loading) {
-        return <SkeletonLoader />;
+  const handleMouseMove = (e) => {
+    if (!isDragging) return;
+    const diffX = startX - e.clientX;
+    if (diffX > 50) {
+      handleSwipe("left");
+      setIsDragging(false);
+    } else if (diffX < -50) {
+      handleSwipe("right");
+      setIsDragging(false);
     }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
 
-    const { title, description, imageUrl, type } = items[currentIndex];
-    const linkPath = `/${type.toLowerCase()}/${encodeURIComponent(title)}`;
+  if (loading) {
+    return <SkeletonLoader />;
+  }
 
-    return (
-        <div className="hero-container">
-            <div className="hero-section">
-                {items.map((item, index) => (
-                    <div
-                        key={index}
-                        className={`hero-image ${index === currentIndex ? 'active' : ''} ${fadeOut ? 'fade-out' : ''}`}
-                        style={{ backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.1) 0%, #11121f 100%), url("${item.imageUrl}")` }}
-                    ></div>
-                ))}
-                <div className="hero-text">
-                    <h1 className="hero-title">{title}</h1>
-                    <Link href={linkPath}>
-                        <button className="hero-section-play-button">
-                            <FontAwesomeIcon icon={faPlay} size="lg" /> Play
-                        </button>
-                    </Link>
-                    <p className="hero-description">{description}</p>
-                </div>
-            </div>
+  const { title, description, imageUrl, type } = items[currentIndex];
+  const linkPath = `/${type.toLowerCase()}/${encodeURIComponent(title)}`;
 
-            <div className="hero-indicators">
-                {items.map((_, index) => (
-                    <div
-                        key={index}
-                        className={`indicator ${index === currentIndex ? 'active' : ''}`}
-                        onClick={() => handleIndicatorClick(index)}
-                    ></div>
-                ))}
-            </div>
+  return (
+    <div
+      className="hero-container"
+      onTouchStart={handleTouchStart}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+    >
+      <div className="hero-section">
+        {items.map((item, index) => (
+          <div
+            key={index}
+            className={`hero-image ${index === currentIndex ? "active" : ""} ${
+              fadeOut ? "fade-out" : ""
+            }`}
+            style={{
+              backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.1) 20%, #11121f 80%), url("${item.imageUrl}")`,
+            }}
+          ></div>
+        ))}
+        <div className="hero-text">
+          <Link href={linkPath}>
+            <h1 className="hero-title">{title}</h1>
+          </Link>
+          <p className="hero-description">{description}</p>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default HeroSection;

frontend/src/components/Sidebar.css

@@ -5,7 +5,7 @@
     top: 0;
     left: 0;
     height: 100dvh;
-    background-color: #0c0c16;
+    background-color: var(--bg-secondary);
     color: white;
     font-family: 'Inter', sans-serif;
     transition: width .5s ,height .5s;

frontend/src/skeletons/HeroSection.css

@@ -2,7 +2,7 @@
 
 .skeleton-container {
     position: relative;
-    width: 100%;
+    width: 100dvw;
     height: 480px; /* Set height to auto for responsiveness */
     display: flex;
     flex-direction: column;
@@ -89,7 +89,7 @@
 
 @media (max-width: 576px) {
     .skeleton-container {
-        height: 200px;
+        height: 225px;
     }
     .skeleton-title {
         width: 90%;