0.0.0.3 Alpha

frontend/src/app/genres/[genre]/genres.css

@@ -0,0 +1,171 @@
+body {
+  color: #e0e0e0; /* Light text color */
+}
+/* Container for the genre page */
+.genre-page {
+  max-width: 100dvw;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #0a0b19; /* Slightly lighter dark background */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* Title styling */
+.genre-title {
+  font-size: 2rem;
+  text-align: center;
+  color: #ffffff; /* Light color for the title */
+}
+
+.genre-title-section{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Section styling */
+.section {
+  margin-bottom: 40px;
+}
+
+@media (orientation: landscape) {
+    .section {
+        margin-left: 25px;
+        margin-right: 25px;
+      }
+}
+
+.section h2 {
+  font-size: 1.8rem;
+  color: #cccccc; /* Lighter gray for section titles */
+}
+
+/* Horizontal scrolling container */
+.items-grid {
+  display: flex;
+  overflow-x: auto;
+  padding: 10px 0;
+  gap: 20px;
+}
+
+.items-grid::-webkit-scrollbar {
+  height: 8px;
+}
+
+.items-grid::-webkit-scrollbar-thumb {
+  background-color: #3c23cf;
+  border-radius: 4px;
+}
+
+.items-grid::-webkit-scrollbar-track {
+  background-color: #2c2c2c;
+}
+
+/* Card for each item */
+.item-card {
+  background-color: #2c2c2c; /* Dark card background */
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  transition: transform 0.3s, box-shadow 0.3s;
+  flex: 0 0 300px; /* Fixed width for horizontal scrolling */
+}
+
+.item-card:hover {
+  transform: scale(1.03);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
+}
+
+/* Styling for item link */
+.item-link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+
+.item-image {
+  width: 100%;
+  height: 120px; /* Fixed height for consistency */
+  object-fit: cover; /* Maintain aspect ratio and fill container */
+  display: block;
+}
+
+/* Item information */
+.item-info {
+  padding: 10px;
+}
+
+.item-title {
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin: 0;
+  color: #ffffff; /* Light color for item titles */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis; /* Handle overflow with ellipsis */
+}
+
+.item-description {
+  font-size: 0.9rem;
+  color: #b0b0b0; /* Lighter gray for descriptions */
+  margin: 5px 0 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis; /* Handle overflow with ellipsis */
+}
+
+/* Loading and error messages */
+.loading,
+.error {
+  font-size: 1.2rem;
+  text-align: center;
+  margin-top: 50px;
+}
+
+/* No items available message */
+.no-items {
+  font-size: 1.2rem;
+  color: #888888; /* Light gray for no items message */
+  text-align: center;
+  margin-top: 20px;
+}
+
+/* Load More Button container */
+.load-more-container {
+  text-align: center;
+  margin: 20px 0;
+}
+
+/* Load More Button styling */
+.load-more-button {
+  background-color: #1a1c3f; /* Accent color */
+  color: #ffffff;
+  border: 1px solid #4339ff;
+  border-radius: 4px;
+  padding: 10px 20px;
+  margin-left: 15px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.3s;
+}
+
+.load-more-button:hover {
+  background-color: #3700b3; /* Darker shade for hover */
+  transform: scale(1.05);
+}
+
+.load-more-button:focus {
+  outline: none;
+}
+
+.section-controls {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  justify-content: space-between;
+}
+
+.scroll-controls button {
+  margin-left: 10px;
+  margin-right: 10px;
+}

frontend/src/app/genres/[genre]/page.js

@@ -0,0 +1,145 @@
+"use client";
+import apiClient from "@/api/apiClient";
+import { useEffect, useState, useRef } from "react";
+import Link from "next/link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCaretLeft, faCaretRight } from "@fortawesome/free-solid-svg-icons";
+import "./genres.css";
+
+export default function GenrePage({ params }) {
+  const [genreItems, setGenreItems] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [itemLimit, setItemLimit] = useState(5);
+
+  const moviesRef = useRef(null);
+  const seriesRef = useRef(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const data = await apiClient.getGenreItems(params.genre, null, itemLimit);
+        if (data) {
+          setGenreItems(data);
+        } else {
+          setError("Genre data not found.");
+        }
+      } catch (err) {
+        setError("An error occurred while fetching genre data.");
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [params.genre, itemLimit]);
+
+  const loadMore = () => {
+    setItemLimit((prevLimit) => prevLimit + 5);
+  };
+
+  const scroll = (ref, direction) => {
+    if (ref.current) {
+      const scrollAmount = direction === "left" ? -360 : 360;
+      ref.current.scrollBy({ left: scrollAmount, behavior: "smooth" });
+    }
+  };
+
+  if (loading) {
+    return <div className="loading">Loading...</div>;
+  }
+
+  if (error) {
+    return <div className="error">Error: {error}</div>;
+  }
+
+  return (
+    <div className="genre-page">
+      <div className="genre-title-section">
+        <h1 className="genre-title">{params.genre}</h1>
+        <div className="load-more-container">
+          <button className="load-more-button" onClick={loadMore}>
+            Load More
+          </button>
+        </div>
+      </div>
+      {genreItems && (
+        <>
+          {genreItems.movies && genreItems.movies.length > 0 && (
+            <section className="section movies">
+              <div className="section-controls">
+                <h2>Movies</h2>
+                <div className="scroll-controls">
+                  <button onClick={() => scroll(moviesRef, "left")} className="scroll-button">
+                    <FontAwesomeIcon icon={faCaretLeft} size="2xl" />
+                  </button>
+                  <button onClick={() => scroll(moviesRef, "right")} className="scroll-button">
+                    <FontAwesomeIcon icon={faCaretRight} size="2xl" />
+                  </button>
+                </div>
+              </div>
+              <div className="items-grid" ref={moviesRef}>
+                {genreItems.movies.map((item, index) => (
+                  <div key={index} className="item-card">
+                    <Link href={`/movie/${item[0]}`} passHref>
+                      <div className="item-link">
+                        <img
+                          src={item[3] || `https://via.placeholder.com/400x100/1a1c3f/FFF?text=${encodeURIComponent(item[0])}`}
+                          alt={item[0]}
+                          className="item-image"
+                        />
+                        <div className="item-info">
+                          <h3 className="item-title">{item[0]}</h3>
+                          <p className="item-description">{item[2]}</p>
+                        </div>
+                      </div>
+                    </Link>
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+
+          {genreItems.series && genreItems.series.length > 0 && (
+            <section className="section series">
+              <div className="section-controls">
+                <h2>Series</h2>
+                <div className="scroll-controls">
+                  <button onClick={() => scroll(seriesRef, "left")} className="scroll-button">
+                    <FontAwesomeIcon icon={faCaretLeft} size="2xl" />
+                  </button>
+                  <button onClick={() => scroll(seriesRef, "right")} className="scroll-button">
+                    <FontAwesomeIcon icon={faCaretRight} size="2xl" />
+                  </button>
+                </div>
+              </div>
+              <div className="items-grid" ref={seriesRef}>
+                {genreItems.series.map((item, index) => (
+                  <div key={index} className="item-card">
+                    <Link href={`/series/${item[0]}`} passHref>
+                      <div className="item-link">
+                        <img
+                          src={item[3] || `https://via.placeholder.com/150?text=${encodeURIComponent(item[0])}`}
+                          alt={item[0]}
+                          className="item-image"
+                        />
+                        <div className="item-info">
+                          <h3 className="item-title">{item[0]}</h3>
+                          <p className="item-description">{item[2]}</p>
+                        </div>
+                      </div>
+                    </Link>
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+        </>
+      )}
+
+      {!genreItems ||
+        (!genreItems.movies && !genreItems.series && (
+          <p className="no-items">No items available for this genre.</p>
+        ))}
+    </div>
+  );
+}

frontend/src/app/index.css

@@ -0,0 +1,31 @@
+.index-page {
+  max-width: 100dvw;
+}
+
+@media (orientation: landscape) {
+  .index-page-container {
+    max-width: 80dvw;
+  }
+}
+
+.index-page-container {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  flex: 1;
+}
+
+.section-title {
+  color: #ffffff;
+  font-size: 1.4rem;
+  font-weight: bold;
+  margin: 16px 0;
+  padding-left: 16px;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
+  gap: 16px;
+  padding: 0 16px;
+}

frontend/src/app/movie/[title]/movie.css

@@ -0,0 +1,218 @@
+@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
+.movie-details-page {
+    position: relative;
+    overflow: hidden;
+    scroll-behavior: smooth;
+    color: #fff;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Backdrop Styling */
+.movie-details-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: 250% 150%; /* Adjusted size to create a zooming effect */
+    background-position: center;
+    z-index: -1;
+    animation: backdrop-anim-portrait 20s ease-in-out infinite;
+    filter: blur(10px);
+}
+
+@keyframes backdrop-anim-portrait {
+    0% {
+        background-position: center;
+        background-size: 350% 150%;
+    }
+    25% {
+        background-position: top left;
+        background-size: 320% 120%;
+    }
+    50% {
+        background-position: bottom right;
+        background-size: 350% 150%;
+    }
+    75% {
+        background-position: top right;
+        background-size: 320% 120%;
+    }
+    100% {
+        background-position: center;
+        background-size: 350% 150%;
+    }
+}
+
+@media (orientation:landscape){
+    .movie-details-backdrop {
+        background-size: 250% 150%; /* Adjusted size to create a zooming effect */
+        animation: backdrop-anim-landscape 20s ease-in-out infinite;
+    }
+}
+
+@keyframes backdrop-anim-landscape {
+    0% {
+        background-position: center;
+        background-size: 150% 150%;
+    }
+    25% {
+        background-position: top left;
+        background-size: 120% 120%;
+    }
+    50% {
+        background-position: bottom right;
+        background-size: 150% 150%;
+    }
+    75% {
+        background-position: top right;
+        background-size: 120% 120%;
+    }
+    100% {
+        background-position: center;
+        background-size: 150% 150%;
+    }
+}
+/* Container Styling */
+.movie-details-page-container {
+    position: relative;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* Header Styling */
+.movie-details-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.movie-details-header h1 {
+    font-size: 4rem;
+    font-family: "Anton", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    margin: 0;
+}
+
+/* Action Buttons */
+.movie-details-actions {
+    display: flex;
+    gap: 15px;
+}
+
+.play-button{
+    border: 1px solid #4339ff;
+    background-color: #17174a; /* Red button color */
+}
+
+.add-list-button{
+    background-color: #333;
+}
+
+.play-button,
+.add-list-button {
+    color: #fff;
+    padding: 12px 24px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.play-button:hover{
+    background-color: #27277c;
+}
+
+.add-list-button:hover {
+    background-color: #444;
+}
+
+.play-button:hover,
+.add-list-button:hover {
+    transform: scale(1.05);
+}
+
+/* Poster Styling */
+.movie-details-poster img {
+    width: 250px;
+    height: auto;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+    margin-bottom: 20px;
+}
+
+/* Info Section Styling */
+.movie-details-info {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.movie-details-metadata,
+.movie-details-overview {
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+}
+
+.movie-details-metadata p,
+.movie-details-overview p {
+    margin: 8px 0;
+    line-height: 1.6;
+}
+
+.movie-details-overview h2 {
+    margin-bottom: 15px;
+    font-size: 1.5rem;
+    border-bottom: 2px solid #4339ff;
+    padding-bottom: 5px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .movie-details-header h1 {
+        font-size: 3rem;
+    }
+
+    .movie-details-poster img {
+        width: 100%;
+        max-width: 200px;
+    }
+
+    .movie-details-info {
+        flex-direction: column;
+    }
+}
+
+.geners-section{
+    display: flex;
+    text-align: center;
+    align-items: center;
+}
+
+.genre-list {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .genre-item {
+    margin: 5px;
+  }
+  
+  .genre-link {
+    text-decoration: none;
+    color: #0082f3; /* Next.js blue color */
+    font-weight: bold;
+  }
+  
+  .genre-link:hover {
+    text-decoration: underline;
+  }
+  

frontend/src/app/movie/[title]/page.js

@@ -0,0 +1,149 @@
+"use client";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import "./movie.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faPlay,
+  faBookmark as faBookmarkSolid,
+} from "@fortawesome/free-solid-svg-icons";
+import { faBookmark as faBookmarkRegular } from "@fortawesome/free-regular-svg-icons";
+import apiClient from "@/api/apiClient";
+
+export default function MovieDetailsPage({ params }) {
+  const [metadata, setMetadata] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const decodedTitle = decodeURIComponent(params.title);
+        const data = await apiClient.getMovieMetadataByTitle(decodedTitle);
+        if (data) {
+          setMetadata(data);
+        } else {
+          setError("Movie metadata not found.");
+        }
+      } catch (err) {
+        setError("An error occurred while fetching movie metadata.");
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [params.title]);
+
+  if (loading) {
+    return <div className="movie-details-page-container">Loading...</div>;
+  }
+
+  if (error) {
+    return <div className="movie-details-page-container">Error: {error}</div>;
+  }
+
+  const englishTitle =
+    metadata?.data?.translations?.nameTranslations?.find(
+      (translation) => translation.language === "eng"
+    )?.name ||
+    metadata?.data?.name ||
+    "Title not available";
+
+  const englishOverview =
+    metadata?.data?.translations?.overviewTranslations?.find(
+      (translation) => translation.language === "eng"
+    )?.overview || "Overview not available";
+
+  const backdropImage = metadata?.data?.artworks?.find(
+    (artwork) => artwork.type === 15
+  )?.image;
+
+  const genres = metadata?.data?.genres || [];
+
+  return (
+    <div className="movie-details-page">
+      <div
+        className="movie-details-backdrop"
+        style={{
+          backgroundImage: `
+            linear-gradient(to right,  rgb(17 18 31 / 80%) 50%, transparent 50%),
+            linear-gradient(rgba(0, 0, 0, 0.1) 0%, #11121f 70%),
+            url("${backdropImage}")
+        `,
+        }}
+      ></div>
+
+      <div className="movie-details-page-container">
+        <div className="movie-details-header">
+          <h1>
+            {englishTitle} {"(" + metadata?.data?.year + ")" || ""}
+          </h1>
+        </div>
+        <div className="movie-details-poster">
+          <img
+            src={
+              metadata?.data?.image ||
+              "https://via.placeholder.com/800x450?text=No+Image+Available"
+            }
+            alt={`${englishTitle} Poster`}
+          />
+        </div>
+        <div className="movie-details-actions">
+          <Link href={"#play"}>
+            <button className="play-button">
+              <FontAwesomeIcon icon={faPlay} size="lg" /> Play
+            </button>
+          </Link>
+          <button className="add-list-button">
+            <FontAwesomeIcon icon={faBookmarkRegular} size="lg" /> MyList
+          </button>
+        </div>
+        <div className="movie-details-info">
+          <div className="movie-details-metadata">
+            <p className="geners-section">
+              <strong>Genre:</strong>{" "}
+              {genres.length > 0 ? (
+                <ul className="genre-list">
+                  {genres.map((genre) => (
+                    <li key={genre.id} className="genre-item">
+                      <Link href={`/genres/${genre.name}`} passHref>
+                        <label className="genre-link">{genre.name}</label>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                "Genres not available"
+              )}
+            </p>
+            <p>
+              <strong>Director / Writer:</strong> Jon Watts, Steve Ditko, Stan
+              Lee, Chris McKenna, Erik Sommers
+            </p>
+            <p>
+              <strong>Stars:</strong> Tom Holland, Angourie Rice, Samuel L.
+              Jackson, Zendaya, Jon Favreau, Jake Gyllenhaal, Marisa Tomei
+            </p>
+            <p>
+              <strong>Release Year:</strong> {metadata?.data?.year || "N/A"}
+            </p>
+            <p>
+              <strong>Runtime:</strong>{" "}
+              {metadata?.data?.runtime
+                ? `${metadata.data.runtime} minutes`
+                : "N/A"}
+            </p>
+          </div>
+          <div className="movie-details-overview">
+            <h2>Storyline</h2>
+            <p>{englishOverview}</p>
+            <p>
+              <strong>Content Rating:</strong>{" "}
+              {metadata?.data?.contentRatings?.[0]?.fullname || "Not Rated"}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/movies/page.js

@@ -7,6 +7,7 @@ import { useFilmContext } from '@/context/FilmContext';
 import './filmsPage.css';
 
 import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import Link from 'next/link';
 
 const FILMS_PER_PAGE = 2;
 
@@ -45,7 +46,7 @@ export default function FilmsPage() {
     <div className="films-page-container">
       <div className="films-page">
         {currentFilms.map(title => (
-          <MovieCard key={title} title={title} />
+          <Link href={`/movie/${title}`}><MovieCard key={title} title={title} /></Link>
         ))}
       </div>
       <div className="pagination-controls">

frontend/src/app/page.js

@@ -1,148 +1,27 @@
 import Head from "next/head";
 import HeroSection from "@/components/HeroSection";
+import "./index.css";
 
 const HomePage = () => {
   return (
     <>
       <Head>
-        <title>Home Page</title>
+        <title>Home</title>
         <meta
           name="description"
           content="Home page for the streaming service"
         />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div style={styles.container}>
-        <HeroSection />
-        <h2 style={styles.sectionTitle}>Popular TV Shows</h2>
-        <div style={styles.gridContainer}>
-          {[
-            "https://cdn.usegalileo.ai/stability/687bdd7d-7a06-425e-b527-7e18f4fe2201.png",
-            "https://cdn.usegalileo.ai/stability/acb62b11-0501-4e27-b6ba-83eed9b83e95.png",
-            "https://cdn.usegalileo.ai/stability/78f55a19-d0fa-4986-a7cb-60190a3fa76f.png",
-            "https://cdn.usegalileo.ai/stability/05bd1020-2f24-4a82-9b8f-2680fa920751.png",
-            "https://cdn.usegalileo.ai/stability/912a274b-dd29-4b40-9140-1c1dcd76bd07.png",
-            "https://cdn.usegalileo.ai/sdxl10/a9cf44f2-a00c-4aaa-8350-7c70cfaa4dd0.png",
-            "https://cdn.usegalileo.ai/stability/0eee4644-0e4c-4549-8c6a-c445b3903d3c.png",
-            "https://cdn.usegalileo.ai/sdxl10/089b78f9-0a0a-4f17-a7a1-4684c3b5efb1.png",
-            "https://cdn.usegalileo.ai/sdxl10/f4aa01e0-cfe0-4a32-a419-9ef37149b620.png",
-            "https://cdn.usegalileo.ai/stability/95bccea1-1d96-4395-bd11-feb0d7650b30.png",
-            "https://cdn.usegalileo.ai/stability/4a3482f4-899f-4dc9-9806-03025979894b.png",
-            "https://images.unsplash.com/photo-1639452127871-8c6ea78d2b11?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3w0NTI0NDl8MHwxfHNlYXJjaHw0fHxkYXJrJTIwdGhlbWV8ZW58MXx8fHwxNzI0NDkwMjIyfDA&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=1080",
-          ].map((url, index) => (
-            <div key={index} style={styles.imageWrapper}>
-              <div
-                style={{ ...styles.image, backgroundImage: `url(${url})` }}
-              />
-            </div>
-          ))}
-        </div>
-        <h2 style={styles.sectionTitle}>Trending Movies</h2>
-        <div style={styles.gridContainer}>
-          {[
-            "https://cdn.usegalileo.ai/sdxl10/e410f67a-8111-44e4-8370-99ffbfeeb7f1.png",
-            "https://cdn.usegalileo.ai/stability/953f8b85-e6b9-4906-8e47-c9d12bf6c9e6.png",
-            "https://cdn.usegalileo.ai/stability/58480847-a20d-4ad8-8ef7-aebf592bc4fb.png",
-            "https://cdn.usegalileo.ai/stability/e354bd6d-aa67-44be-be97-28be6bc058f0.png",
-            "https://cdn.usegalileo.ai/sdxl10/d251f08e-3da4-4d05-937d-1cbb318ca2e4.png",
-            "https://cdn.usegalileo.ai/stability/f870c303-f081-4ce7-b89a-5c7336dce39e.png",
-            "https://cdn.usegalileo.ai/stability/6fad613e-3db5-436f-a4d0-e5f4651a6fe0.png",
-            "https://cdn.usegalileo.ai/sdxl10/4b19f651-702b-4474-8800-e81184b43539.png",
-            "https://cdn.usegalileo.ai/stability/89022a7e-44c9-42d5-b671-2d10fe48ad07.png",
-            "https://cdn.usegalileo.ai/stability/a6873021-6f80-47de-bf2c-f4facf9a7eb7.png",
-            "https://cdn.usegalileo.ai/stability/a49b740a-d6ae-42da-a446-5877abf5c63d.png",
-            "https://cdn.usegalileo.ai/stability/2e6bd747-164e-4f5e-baf7-91fa3af15f25.png",
-          ].map((url, index) => (
-            <div key={index} style={styles.imageWrapper}>
-              <div
-                style={{ ...styles.image, backgroundImage: `url(${url})` }}
-              />
-            </div>
-          ))}
+      <div className="index-page">
+        <div className="index-page-container">
+          <HeroSection />
+          <h2 className="section-title">Popular TV Shows</h2>
+          <h2 className="section-title">Trending Movies</h2>
         </div>
       </div>
     </>
   );
 };
 
-const styles = {
-  container: {
-    display: "flex",
-    flexDirection: "column",
-    maxWidth: "960px",
-    margin: "0 auto",
-    flex: 1,
-  },
-  heroSection: {
-    display: "flex",
-    minHeight: "400px",
-    flexDirection: "column",
-    justifyContent: "flex-end",
-    backgroundImage:
-      'linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%), url("https://cdn.usegalileo.ai/sdxl10/5e86a222-949b-4c84-b77b-bec08e557e36.png")',
-    backgroundSize: "cover",
-    backgroundPosition: "center",
-
-    padding: "0 16px 40px",
-    borderRadius: "16px",
-    color: "#ffffff",
-    textAlign: "left",
-  },
-  heroContent: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "16px",
-  },
-  heroTitle: {
-    fontSize: "2.5rem",
-    fontWeight: "bold",
-    lineHeight: "1.2",
-  },
-  heroSubtitle: {
-    fontSize: "1rem",
-    fontWeight: "normal",
-    lineHeight: "1.4",
-  },
-  playButton: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "auto",
-    height: "40px",
-    padding: "0 16px",
-    borderRadius: "8px",
-    backgroundColor: "#695ffa",
-    color: "#ffffff",
-    fontSize: "1rem",
-    fontWeight: "bold",
-    cursor: "pointer",
-  },
-  sectionTitle: {
-    color: "#ffffff",
-    fontSize: "1.4rem",
-    fontWeight: "bold",
-    margin: "16px 0",
-    paddingLeft: "16px",
-  },
-  gridContainer: {
-    display: "grid",
-    gridTemplateColumns: "repeat(auto-fit, minmax(158px, 1fr))",
-    gap: "16px",
-    padding: "0 16px",
-  },
-  imageWrapper: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "8px",
-  },
-  image: {
-    width: "100%",
-    backgroundSize: "cover",
-    backgroundPosition: "center",
-    aspectRatio: "16/9",
-    borderRadius: "16px",
-    height: "100%",
-  },
-};
-
 export default HomePage;

frontend/src/app/search/page.js

@@ -1,12 +1,16 @@
-"use client"; // Indicate that this file is a client component in Next.js
-
-import { useState, useEffect } from "react";
+"use client";
+import { useState, useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSearch } from "@fortawesome/free-solid-svg-icons";
-import { search } from "@/api/searchApi"; // Ensure the path is correct for your API
+import {
+  faSearch,
+  faCaretLeft,
+  faCaretRight,
+} from "@fortawesome/free-solid-svg-icons";
+import { search } from "@/api/searchApi";
 import "./searchPage.css";
 import MovieCard from "@/components/MovieCard";
+import TvShowCard from "@/components/TvShowCard";
 
 const SearchPage = () => {
   const [query, setQuery] = useState("");
@@ -14,31 +18,45 @@ const SearchPage = () => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [debouncedQuery, setDebouncedQuery] = useState("");
+  const [loadingDelay, setLoadingDelay] = useState(null);
 
-  const router = useRouter(); // Use Next.js useRouter for navigation
+  const router = useRouter();
+  const timeoutRef = useRef(null);
+  const moviesRef = useRef(null);
+  const seriesRef = useRef(null);
 
   useEffect(() => {
-    const handler = setTimeout(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
       if (debouncedQuery) {
         handleSearch();
       }
-    }, 200); // Delay of 200ms
+    }, 200);
 
     return () => {
-      clearTimeout(handler);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
     };
   }, [debouncedQuery]);
 
   const handleSearch = async () => {
     setLoading(true);
     setError(null);
+
     try {
       const data = await search(debouncedQuery);
       setResults(data);
     } catch (err) {
       setError("Failed to fetch search results.");
     } finally {
-      setTimeout(() => setLoading(false), 500);
+      if (loadingDelay) {
+        clearTimeout(loadingDelay);
+      }
+      setLoadingDelay(setTimeout(() => setLoading(false), 800));
     }
   };
 
@@ -48,7 +66,14 @@ const SearchPage = () => {
   };
 
   const handleItemClick = (path) => {
-    router.push(path); // Use router.push for navigation
+    router.push(path);
+  };
+
+  const scroll = (ref, direction) => {
+    if (ref.current) {
+      const scrollAmount = direction === "left" ? -400 : 400;
+      ref.current.scrollBy({ left: scrollAmount, behavior: "smooth" });
+    }
   };
 
   return (
@@ -64,7 +89,7 @@ const SearchPage = () => {
         {loading && (
           <div className="loading-indicator">
             <div className="search-icon">
-              <FontAwesomeIcon icon={faSearch} size="xl"/>
+              <FontAwesomeIcon icon={faSearch} size="xl" />
             </div>
             <div className="spinner"></div>
           </div>
@@ -74,17 +99,33 @@ const SearchPage = () => {
       <div className="results-container">
         {results.films.length > 0 && (
           <div className="results-section">
-            <h2>Films</h2>
-            <ul className="results-list">
+            <div className="result-scroll">
+              <h2>Films</h2>
+              <div className="scroll-controls">
+                <button
+                  onClick={() => scroll(moviesRef, "left")}
+                  className="scroll-button"
+                >
+                  <FontAwesomeIcon icon={faCaretLeft} size="2xl" />
+                </button>
+                <button
+                  onClick={() => scroll(moviesRef, "right")}
+                  className="scroll-button"
+                >
+                  <FontAwesomeIcon icon={faCaretRight} size="2xl" />
+                </button>
+              </div>
+            </div>
+            <ul className="results-list" ref={moviesRef}>
               {results.films.map((film, index) => (
                 <li
                   key={index}
                   className="result-item"
                   onClick={() =>
-                    handleItemClick(`/film/${encodeURIComponent(film)}`)
+                    handleItemClick(`/movie/${encodeURIComponent(film)}`)
                   }
                 >
-                  <MovieCard title={film}/>
+                  <MovieCard title={film} />
                 </li>
               ))}
             </ul>
@@ -92,8 +133,24 @@ const SearchPage = () => {
         )}
         {results.tv_series.length > 0 && (
           <div className="results-section">
-            <h2>TV Series</h2>
-            <ul className="results-list">
+            <div className="result-scroll">
+              <h2>TV Series</h2>
+              <div className="scroll-controls">
+                <button
+                  onClick={() => scroll(seriesRef, "left")}
+                  className="scroll-button"
+                >
+                  <FontAwesomeIcon icon={faCaretLeft} size="2xl" />
+                </button>
+                <button
+                  onClick={() => scroll(seriesRef, "right")}
+                  className="scroll-button"
+                >
+                  <FontAwesomeIcon icon={faCaretRight} size="2xl" />
+                </button>
+              </div>
+            </div>
+            <ul className="results-list" ref={seriesRef}>
               {results.tv_series.map((series, index) => (
                 <li
                   key={index}
@@ -102,7 +159,7 @@ const SearchPage = () => {
                     handleItemClick(`/tvshow/${encodeURIComponent(series)}`)
                   }
                 >
-                  {series}
+                  <TvShowCard title={series} />
                 </li>
               ))}
             </ul>

frontend/src/app/search/searchPage.css

@@ -1,262 +1,278 @@
 .search-page {
-    background-color: #121212;
-    color: #ffffff;
-    min-height: 85vh;
-    transition: background-color 0.3s ease;
-    font-family: "Signika", sans-serif;
-    font-optical-sizing: auto;
-    font-style: normal;
-    font-variation-settings: "GRAD" 0;
+  background-color: #121212;
+  color: #ffffff;
+  height: 89dvh;
+  transition: background-color 0.3s ease;
+  font-family: "Signika", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-variation-settings: "GRAD" 0;
+  animation: pageLoad 1s ease;
 }
 
-/* Search container styles */
 .search-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 20px;
-    transition: transform 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  transition: transform 0.3s ease;
 }
 
 /* Input field styling with animation */
 .search-input {
-    width: 100%;
-    max-width: 600px;
-    padding: 10px;
-    font-size: 16px;
-    border: 1px solid #4339ff;
-    border-radius: 5px;
-    background-color: #1c2354;
-    color: #ffffff;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform .5s ease;
+  width: 100%;
+  max-width: 600px;
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #4339ff;
+  border-radius: 5px;
+  background-color: #1c2354;
+  color: #ffffff;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.5s ease;
 }
 
 .search-input:focus {
-    outline: none;
-    box-shadow: 0 0 15px rgba(17, 0, 255, 0.6);
-    transform: scale(1.02);
+  outline: none;
+  box-shadow: 0 0 15px rgba(17, 0, 255, 0.6);
+  transform: scale(1.02);
 }
 
 /* Loading indicator animation */
 .loading-indicator {
-    margin-top: 10px;
-    font-size: 18px;
-    color: #4339ff;
-    opacity: 0;
-    animation: fadeIn .3s forwards;
+  margin-top: 10px;
+  font-size: 18px;
+  color: #4339ff;
+  opacity: 0;
+  animation: fadeIn 0.3s forwards;
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* Error message styling */
 .error-message {
-    color: #ff3300;
-    text-align: center;
-    margin-top: 20px;
-    animation: bounce 1s infinite;
+  color: #ff3300;
+  text-align: center;
+  margin-top: 20px;
+  animation: bounce 1s infinite;
 }
 
 @keyframes bounce {
-    0%, 20%, 50%, 80%, 100% {
-        transform: translateY(0);
-    }
-    40% {
-        transform: translateY(-10px);
-    }
-    60% {
-        transform: translateY(-5px);
-    }
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-10px);
+  }
+  60% {
+    transform: translateY(-5px);
+  }
 }
 
-/* Results container styles */
 .results-container {
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  padding-left: 20px;
+  padding-right: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-/* Results section styles */
 .results-section {
-    width: 100%;
-    max-width: 800px;
-    margin-bottom: 20px;
-    transition: opacity 0.3s ease;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  white-space: nowrap;
 }
 
 .results-section h2 {
-    font-size: 24px;
-    border-bottom: 2px solid #444;
-    padding-bottom: 10px;
-    margin-bottom: 15px;
-    color: #7c81c7;
-    animation: fadeIn 1s ease;
+  font-size: 24px;
+  color: #99999b;
+  animation: fadeIn 1s ease;
+}
+
+.result-scroll {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  border-bottom: 1px solid #4a41ef;
+  padding-bottom: 5px;
+}
+.scroll-controls button {
+  margin-left: 10px;
+  margin-right: 10px;
+  color: #9b9a9f;
 }
 
-/* Results list styles */
 .results-list {
-    list-style-type: none;
-    padding: 0;
+  list-style-type: none;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  margin: 0;
+  scroll-behavior: smooth;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+
+.results-list::-webkit-scrollbar {
+  height: 8px;
+}
+
+.results-list::-webkit-scrollbar-thumb {
+  background-color: #3c23cf;
+  border-radius: 4px;
 }
 
 .result-item {
-    background-color: #1e1e1e;
-    border: 1px solid #444;
-    border-radius: 5px;
-    margin-bottom: 10px;
-    padding: 10px;
-    transition: background-color 0.3s ease, transform 0.3s ease;
-    animation: slideIn 0.5s ease;
+  background-color: #1e1e1e;
+  border: 1px solid #585858;
+  border-radius: 5px;
+  margin-right: 10px;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+  animation: slideIn 0.5s ease;
+  display: inline-block;
+  flex: 0 0 auto;
 }
 
 @keyframes slideIn {
-    from {
-        transform: translateY(20px);
-        opacity: 0;
-    }
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
 .result-item:hover {
-    background-color: #333;
-    transform: scale(1.02);
+  background-color: #333;
+  transform: scale(1.02);
 }
 
 /* Link styling */
 .result-link {
-    text-decoration: none;
-    color: #ffffff;
-    font-size: 18px;
-    transition: color 0.3s ease;
+  text-decoration: none;
+  color: #ffffff;
+  font-size: 18px;
+  transition: color 0.3s ease;
 }
 
 .result-link:hover {
-    text-decoration: underline;
-    color: #ff6f00;
-}
-
-/* Handle animations on page load */
-@keyframes pageLoad {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-.search-page {
-    animation: pageLoad 1s ease;
+  text-decoration: underline;
+  color: #ff6f00;
 }
 
 /* Loading indicator styles */
 .loading-indicator {
-    display: flex;
-    align-items: center;
-    margin-top: 20px;
-    font-size: 18px;
-    position: fixed;
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  font-size: 18px;
+  position: fixed;
 }
 
 .search-icon {
-    position: fixed;
-    z-index: 100;
-    color: #b3b7e4;
-    animation: search 1s infinite linear;
+  position: fixed;
+  z-index: 100;
+  color: #b3b7e4;
+  animation: search 1s infinite linear;
 }
 
 @keyframes search {
-    0% {
-        transform: translate(10px, -15px);
-    }
-    5% {
-        transform: translate(14.5px, -14.5px);
-    }
-    10% {
-        transform: translate(18.3px, -12.7px);
-    }
-    15% {
-        transform: translate(21.2px, -9.2px);
-    }
-    20% {
-        transform: translate(23px, -5px);
-    }
-    25% {
-        transform: translate(25px, 0px);
-    }
-    30% {
-        transform: translate(23px, 5px);
-    }
-    35% {
-        transform: translate(21.2px, 9.2px);
-    }
-    40% {
-        transform: translate(18.3px, 12.7px);
-    }
-    45% {
-        transform: translate(14.5px, 14.5px);
-    }
-    50% {
-        transform: translate(10px, 15px);
-    }
-    55% {
-        transform: translate(5.5px, 14.5px);
-    }
-    60% {
-        transform: translate(1.7px, 12.7px);
-    }
-    65% {
-        transform: translate(-2.2px, 9.2px);
-    }
-    70% {
-        transform: translate(-5px, 5px);
-    }
-    75% {
-        transform: translate(-5px, 0px);
-    }
-    80% {
-        transform: translate(-5px, -5px);
-    }
-    85% {
-        transform: translate(-2.2px, -9.2px);
-    }
-    90% {
-        transform: translate(1.7px, -12.7px);
-    }
-    95% {
-        transform: translate(5.5px, -14.5px);
-    }
-    100% {
-        transform: translate(10px, -15px);
-    }
+  0% {
+    transform: translate(10px, -15px);
+  }
+  5% {
+    transform: translate(14.5px, -14.5px);
+  }
+  10% {
+    transform: translate(18.3px, -12.7px);
+  }
+  15% {
+    transform: translate(21.2px, -9.2px);
+  }
+  20% {
+    transform: translate(23px, -5px);
+  }
+  25% {
+    transform: translate(25px, 0px);
+  }
+  30% {
+    transform: translate(23px, 5px);
+  }
+  35% {
+    transform: translate(21.2px, 9.2px);
+  }
+  40% {
+    transform: translate(18.3px, 12.7px);
+  }
+  45% {
+    transform: translate(14.5px, 14.5px);
+  }
+  50% {
+    transform: translate(10px, 15px);
+  }
+  55% {
+    transform: translate(5.5px, 14.5px);
+  }
+  60% {
+    transform: translate(1.7px, 12.7px);
+  }
+  65% {
+    transform: translate(-2.2px, 9.2px);
+  }
+  70% {
+    transform: translate(-5px, 5px);
+  }
+  75% {
+    transform: translate(-5px, 0px);
+  }
+  80% {
+    transform: translate(-5px, -5px);
+  }
+  85% {
+    transform: translate(-2.2px, -9.2px);
+  }
+  90% {
+    transform: translate(1.7px, -12.7px);
+  }
+  95% {
+    transform: translate(5.5px, -14.5px);
+  }
+  100% {
+    transform: translate(10px, -15px);
+  }
 }
 
 .loading-indicator .spinner {
-    width: 40px;
-    height: 40px;
-    background-image: linear-gradient(#146c98, #7139ff);
-    border: 3px solid #3939ff;
-    border-top: 4px solid transparent;
-    border-radius: 50%;
-    margin-right: 10px;
-    animation: spin 1s linear infinite;
+  width: 40px;
+  height: 40px;
+  background-image: linear-gradient(#146c98, #7139ff);
+  border: 3px solid #3939ff;
+  border-top: 4px solid transparent;
+  border-radius: 50%;
+  margin-right: 10px;
+  animation: spin 1s linear infinite;
 }
 
 /* Spinner animation */
 @keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

frontend/src/components/HeroSection.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=New+Amsterdam&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
   
 @keyframes fadeIn {
   0% {
@@ -60,8 +60,8 @@
 .hero-title {
   color: white;
   font-size: 5rem;
-  font-weight: 600;
-  font-family: "New Amsterdam", sans-serif;
+  font-family: "Anton", sans-serif;
+  font-weight: 400;
   font-style: normal;
   line-height: 1;
   transition: font-size 0.3s ease-in-out;

frontend/src/components/MovieCard.css

@@ -3,7 +3,7 @@
 .movie-card {
     position: relative;
     width: 150px;
-    height: 300px;
+    height: 250px;
     margin: 10px;
     border-radius: 8px;
     overflow: hidden;
@@ -20,22 +20,28 @@
   .image-container {
     position: relative;
     width: 100%;
-    height: 78%;
+    height: 80%;
   }
   
   .poster {
     object-fit: cover;
+    object-position: top;
     border-radius: 8px 8px 0 0;
-    width: 100%;
-    height: 100%;
+    animation: fade-in 2s forwards;
+    opacity: 0;
+  }
+
+  @keyframes fade-in{
+    0%{opacity: 0;}
+    100%{opacity: 1;}
   }
   
   .movie-info {
     position: relative;
     width: 100%;
-    height: 22%;
+    height: 28%;
     padding: 10px;
-    background: #202232;
+    background: #1b1c24;
     color: #fff;
     text-align: center;
     box-sizing: border-box;

frontend/src/components/Sidebar.css

@@ -68,7 +68,7 @@
   .sidebar-link {
     text-decoration: none;
     text-align: center;
-    justify-content: center;
+    justify-content: space-between;
     color: #b0b0b0;
     display: flex;
     align-items: center;
@@ -115,4 +115,5 @@
   .sidebar-item-text {
     font-size: 0.875rem;
     font-weight: 500;
+    margin-left: 10px;
   }

frontend/src/components/Sidebar.js

@@ -94,7 +94,7 @@ const Sidebar = () => {
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
             >
-              <SidebarItem icon={faTv} text="Series" />
+              <SidebarItem icon={faTv} text="TV Shows" />
             </Link>
             <Link
               href="/new"

frontend/src/components/TvShowCard.js

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import apiClient from '@/api/apiClient';
+import SkeletonLoader from '@/skeletons/movieCard';
+import './MovieCard.css';
+
+const TvShowCard = ({ title }) => {
+  const [movieData, setMovieData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchMovieData = async () => {
+      try {
+        const data = await apiClient.getSeriesCard(title);
+        setMovieData(data);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMovieData();
+  }, [title]);
+
+  if (loading) {
+    return <SkeletonLoader />;
+  }
+
+  if (error) {
+    return <div className="error">Error: {error}</div>;
+  }
+
+  return (
+    <div className="movie-card">
+      <div className="image-container">
+        <Image
+          src={movieData.image}
+          alt={`${movieData.title} poster`}
+          fill
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          priority
+          className="poster"
+        />
+      </div>
+      <div className="movie-info">
+        <h3 className="movie-title">{movieData.title}</h3>
+        <p className="movie-year">{movieData.year}</p>
+      </div>
+    </div>
+  );
+};
+
+export default TvShowCard;

frontend/src/lib/LoadBalancer.js

@@ -74,10 +74,13 @@ class LoadBalancerAPI {
   }
 
   async getGenreItems(genre, mediaType = null, limit = 5) {
-    const queryParams = new URLSearchParams({ genre, media_type: mediaType, limit });
+    const queryParams = new URLSearchParams({ genre, limit });
+    if (mediaType) {
+      queryParams.append('media_type', mediaType);
+    }
     return this._getRequest(`/api/get/genre?${queryParams.toString()}`);
   }
-
+  
   async getDownloadProgress(url) {
     return this._getRequestNoBase(url);
   }

frontend/src/lib/config.js

@@ -1,7 +1,7 @@
 const config = {
     apiBaseUrl: 'https://hans-den-load-balancer.hf.space',
     searchUrl: 'https://unicone-studio-search.hf.space/api/search',
-    version: "0.0.0.2 Alpha",
+    version: "0.0.0.3 Alpha",
   };
   
 export default config;

frontend/src/skeletons/movieCard.css

@@ -1,7 +1,7 @@
 .skeleton-loader {
     position: relative;
     width: 150px;
-    height: 300px;
+    height: 250px;
     margin: 10px;
     border-radius: 8px;
     overflow: hidden;
@@ -51,13 +51,13 @@
   
   @keyframes pulse {
     0% {
-      background-color: #202232;
+      background-color: #1b1c24;
     }
     50% {
-      background-color: #323450;
+      background-color: #323443;
     }
     100% {
-      background-color: #202232;
+      background-color: #1b1c24;
     }
   }