error page

frontend/next.config.mjs

@@ -1,8 +1,28 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    images: {
-        domains: ['artworks.thetvdb.com','via.placeholder.com','eu.ui-avatars.com'],
+  images: {
+    dangerouslyAllowSVG: true,
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'artworks.thetvdb.com',
+        port: '',
+        pathname: '/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'via.placeholder.com',
+        port: '',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'eu.ui-avatars.com',
+        port: '',
+        pathname: '/api/**',
+      },
+    ],
+  },
 };
 
 export default nextConfig;

frontend/src/app/_error.js

@@ -0,0 +1,61 @@
+"use client";
+import Link from "next/link";
+
+export default function ErrorPage({ errorMessage }) {
+  return (
+    <div style={styles.container}>
+      <h1 style={styles.title}>Something Went Wrong</h1>
+      <p style={styles.message}>{errorMessage}</p>
+      <Link href="/" style={styles.link}>
+        Go Home
+      </Link>
+    </div>
+  );
+}
+
+const styles = {
+  container: {
+    position: 'absolute',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100dvh',
+    width:'100dvw',
+    top:'0',
+    textAlign: 'center',
+    color: 'white',
+    padding: '20px',
+    overflow: 'hidden',
+  },
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: 'url("/404_bg.jpg") no-repeat center center/cover',
+    filter: "blur(5px)",
+    zIndex: -1, // Sends the overlay behind the text
+  },
+  title: {
+    fontSize: "3rem",
+    fontWeight: "bold",
+    color: "#ff4747",
+  },
+  message: {
+    fontSize: "1.5rem",
+    margin: "20px 0",
+  },
+  link: {
+    marginTop: "20px",
+    padding: "12px 20px",
+    backgroundColor: "var(--bg-primary)", // Semi-transparent red
+    color: "white",
+    textDecoration: "none",
+    borderRadius: "5px",
+    border: "2px solid var(--primary-special-color)",
+    transition: "background-color 0.3s ease",
+    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.5)",
+  },
+};

frontend/src/app/globals.css

@@ -7,6 +7,7 @@
 :root {
   --bg-primary: #11121f;
   --bg-secondary: #0c0c16;
+  --primary-special-color:#5454ff;
 }
 
 body {

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

@@ -196,6 +196,7 @@
 .movie-genre-list {
   list-style-type: none;
   padding: 0;
+  margin: 0;
   display: flex;
   text-align: center;
   justify-content: center;

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

@@ -12,6 +12,7 @@ import { faBookmark as faBookmarkRegular } from "@fortawesome/free-regular-svg-i
 import apiClient from "@/api/apiClient";
 import { Spinner } from "@/components/Spinner";
 import CastSection from "@/components/CastSection";
+import NotFound from "@/app/not-found";
 
 export default function MovieDetailsPage({ params }) {
   const [metadata, setMetadata] = useState(null);
@@ -46,7 +47,7 @@ export default function MovieDetailsPage({ params }) {
   }
 
   if (error) {
-    return <div className="movie-details-page-container">Error: {error}</div>;
+    return <NotFound/>;
   }
 
   const englishTitle =

frontend/src/app/not-found.js

@@ -0,0 +1,60 @@
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <div style={styles.container}>
+      <div style={styles.overlay}></div>
+      <h2 style={styles.title}>Whoops!</h2>
+      <p style={styles.message}>Sorry, the page you're looking for doesn't exist.</p>
+      <Link href="/" style={styles.link}>Go Home</Link>
+    </div>
+  )
+}
+
+const styles = {
+  container: {
+    position: 'absolute',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100dvh',
+    width:'100dvw',
+    top:'0',
+    textAlign: 'center',
+    color: 'white',
+    padding: '20px',
+    overflow: 'hidden',
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: 'url("/404_bg.jpg") no-repeat center center/cover',
+    filter: 'blur(5px)',
+    zIndex: -1, // Sends the overlay behind the text
+  },
+  title: {
+    fontSize: '3rem',
+    fontWeight: 'bold',
+    textShadow: '2px 2px 4px rgba(0, 0, 0, 0.7)',
+  },
+  message: {
+    fontSize: '1.5rem',
+    margin: '20px 0',
+    textShadow: '1px 1px 3px rgba(0, 0, 0, 0.7)',
+  },
+  link: {
+    marginTop: '20px',
+    padding: '12px 20px',
+    backgroundColor: 'var(--bg-primary)', // Semi-transparent red
+    color: 'white',
+    textDecoration: 'none',
+    borderRadius: '5px',
+    border: '2px solid var(--primary-special-color)',
+    transition: 'background-color 0.3s ease',
+    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.5)',
+  },
+}

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

@@ -6,6 +6,8 @@ import "./MoviePlayerPage.css";
 import { Spinner } from "@/components/Spinner";
 import { ProgressBar, Container, Row, Col, Alert } from "react-bootstrap";
 import "bootstrap/dist/css/bootstrap.min.css";
+import NotFound from "@/app/not-found";
+import ErrorPage from "@/app/_error";
 
 const DEBUG = false; // Set to true to enable debug mode
 
@@ -118,15 +120,17 @@ export default function FilmPlayer({ params }) {
           <Spinner />
         </div>
       )}
-      {error && <Alert variant="danger">{error}</Alert>}
+      {error === "Failed to fetch movie card" ? (
+        <NotFound />
+      ) : error && (
+        <ErrorPage errorMessage={error} />
+      )}
       {downloadProgressUrl && downloadProgress ? (
         <div className="download-status">
           <Alert variant="info">
             <strong>{downloadProgress.status}</strong> -{" "}
             {downloadProgress.progress.toFixed(2)}%{" "}
-            <p>
-              Wait for {downloadProgress.eta.toFixed(1)} Seconds
-            </p>
+            <p>Wait for {downloadProgress.eta.toFixed(1)} Seconds</p>
           </Alert>
         </div>
       ) : (

frontend/src/app/tvshows/page.js

@@ -1,14 +1,8 @@
-import { Spinner } from "@/components/Spinner";
+import NotFound from '../not-found';
 import './TvShows.css';
 
 export default function TVShows() {
   return (
-    <>
-      <div className="page-container">
-        <h1>TV Shows</h1>
-        <p className='text-white'>Browse our TV show collection.</p>
-        <Spinner/>
-      </div>
-    </>
+    <NotFound/>
   );
 }

frontend/src/components/Header.css

@@ -38,4 +38,5 @@
     padding: 15px;
     padding-right: 25px;
     position: absolute;
+    color: white;
   }

frontend/src/components/Sidebar.css

@@ -57,6 +57,7 @@
   .sidebar-title {
     font-size: 1.25rem;
     margin-left: 16px;
+    margin-bottom: 0;
     white-space: nowrap;
   }
 
@@ -116,4 +117,9 @@
     font-size: 0.875rem;
     font-weight: 500;
     margin-left: 10px;
+  }
+
+  
+  .sidebar-svg{
+    color: white !important;
   }

frontend/src/components/Sidebar.js

@@ -9,12 +9,12 @@ import {
   faBars,
   faCogs,
   faHome,
-  faStar,
   faTv,
   faFilm,
   faBookBookmark,
   faCodeCommit,
   faBook,
+  faCubes,
 } from "@fortawesome/free-solid-svg-icons";
 import config from "@/lib/config";
 
@@ -115,12 +115,12 @@ const Sidebar = () => {
               <SidebarItem icon={faTv} text="TV Shows" />
             </Link>
             <Link
-              href="/new"
-              className={`sidebar-link ${pathname === "/new" ? "active" : ""}`}
+              href="/genre"
+              className={`sidebar-link ${pathname === "/genre" ? "active" : ""}`}
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
             >
-              <SidebarItem icon={faStar} text="New" />
+              <SidebarItem icon={faCubes} text="Categories" />
             </Link>
             <Link
               href="/mylist"