improved search UI

frontend/src/app/movies/filmsPage.css

@@ -13,6 +13,11 @@ body {
   padding: 20px;
   max-width: 1200px;
   margin: 0 auto;
+  height: 80dvh;
+  overflow-y: scroll;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+  scroll-behavior: smooth;
 }
 
 /* Films Grid */
@@ -43,32 +48,34 @@ body {
   margin-top: 20px;
   display: flex;
   align-items: center;
+  position: absolute;
+  bottom: 1dvh;
 }
 
 /* Pagination Button */
 .pagination-button {
-  background-color: #3f0071;
+  background-color: #1c2354;
+  border: 1px solid #4339ff;
   color: #ffffff;
-  border: none;
   border-radius: 50%;
   padding: 10px;
-  width: 50px;
-  height: 50px;
+  width: 40px;
+  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: background-color 0.3s, transform 0.3s;
+  transition: background-color 1s, border .5s;
 }
 
 .pagination-button.enabled:hover {
-  background-color: #5c0097;
-  transform: scale(1.1);
+  background-color: #273281;
 }
 
 .pagination-button.disabled {
   background-color: #333;
   cursor: not-allowed;
+  border: none;
 }
 
 /* Page Info */

frontend/src/app/movies/page.js

@@ -8,7 +8,7 @@ import './filmsPage.css';
 
 import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
 
-const FILMS_PER_PAGE = 10;
+const FILMS_PER_PAGE = 2;
 
 export default function FilmsPage() {
   const { films, setFilms } = useFilmContext();
@@ -56,7 +56,7 @@ export default function FilmsPage() {
         >
           <FontAwesomeIcon 
             icon={faChevronLeft}
-            size="2xl"
+            size="xl"
           />
         </button>
         <span className="page-info">
@@ -69,7 +69,7 @@ export default function FilmsPage() {
         >
           <FontAwesomeIcon 
             icon={faChevronRight}
-            size="2xl"
+            size="xl"
           />
         </button>
       </div>

frontend/src/app/search/page.js

@@ -2,8 +2,11 @@
 
 import { useState, useEffect } 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 "./searchPage.css";
+import MovieCard from "@/components/MovieCard";
 
 const SearchPage = () => {
   const [query, setQuery] = useState("");
@@ -35,7 +38,7 @@ const SearchPage = () => {
     } catch (err) {
       setError("Failed to fetch search results.");
     } finally {
-      setLoading(false);
+      setTimeout(() => setLoading(false), 500);
     }
   };
 
@@ -60,6 +63,9 @@ const SearchPage = () => {
         />
         {loading && (
           <div className="loading-indicator">
+            <div className="search-icon">
+              <FontAwesomeIcon icon={faSearch} size="xl"/>
+            </div>
             <div className="spinner"></div>
           </div>
         )}
@@ -74,9 +80,11 @@ const SearchPage = () => {
                 <li
                   key={index}
                   className="result-item"
-                  onClick={() => handleItemClick(`/film/${encodeURIComponent(film)}`)}
+                  onClick={() =>
+                    handleItemClick(`/film/${encodeURIComponent(film)}`)
+                  }
                 >
-                  {film}
+                  <MovieCard title={film}/>
                 </li>
               ))}
             </ul>
@@ -90,7 +98,9 @@ const SearchPage = () => {
                 <li
                   key={index}
                   className="result-item"
-                  onClick={() => handleItemClick(`/tvshow/${encodeURIComponent(series)}`)}
+                  onClick={() =>
+                    handleItemClick(`/tvshow/${encodeURIComponent(series)}`)
+                  }
                 >
                   {series}
                 </li>

frontend/src/app/search/searchPage.css

@@ -24,17 +24,16 @@
     max-width: 600px;
     padding: 10px;
     font-size: 16px;
-    border: 1px solid #444;
+    border: 1px solid #4339ff;
     border-radius: 5px;
-    background-color: #1e1e1e;
+    background-color: #1c2354;
     color: #ffffff;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform .5s ease;
 }
 
 .search-input:focus {
     outline: none;
-    border-color: #ff6f00;
-    box-shadow: 0 0 8px rgba(255, 111, 0, 0.6);
+    box-shadow: 0 0 15px rgba(17, 0, 255, 0.6);
     transform: scale(1.02);
 }
 
@@ -42,9 +41,9 @@
 .loading-indicator {
     margin-top: 10px;
     font-size: 18px;
-    color: #ff6f00;
+    color: #4339ff;
     opacity: 0;
-    animation: fadeIn 1s forwards;
+    animation: fadeIn .3s forwards;
 }
 
 @keyframes fadeIn {
@@ -58,7 +57,7 @@
 
 /* Error message styling */
 .error-message {
-    color: #ff6f00;
+    color: #ff3300;
     text-align: center;
     margin-top: 20px;
     animation: bounce 1s infinite;
@@ -97,7 +96,7 @@
     border-bottom: 2px solid #444;
     padding-bottom: 10px;
     margin-bottom: 15px;
-    color: #ff6f00;
+    color: #7c81c7;
     animation: fadeIn 1s ease;
 }
 
@@ -165,13 +164,87 @@
     align-items: center;
     margin-top: 20px;
     font-size: 18px;
-    color: #ff6f00;
+    position: fixed;
+}
+
+.search-icon {
+    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);
+    }
 }
 
 .loading-indicator .spinner {
-    width: 20px;
-    height: 20px;
-    border: 4px solid #ff6f00;
+    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;

frontend/src/components/Header.js

@@ -1,4 +1,5 @@
 import "./Header.css";
+import Link from "next/link";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
 import Image from "next/image";
@@ -18,9 +19,9 @@ const Header = () => {
           />
         </div>
       </div>
-      <button className="search-button">
+      <Link href="/search" className="search-button">
         <FontAwesomeIcon icon={faSearch} size="xl" />
-      </button>
+      </Link>
     </div>
   );
 };

frontend/src/components/Sidebar.css

@@ -77,11 +77,11 @@
     margin-bottom: 8px;
     margin-left: 10px;
     margin-right: 10px;
-    background-color: #161527;
+    background-color: #12121f;
     cursor: pointer;
     white-space: nowrap;
     position: relative;
-    transition: color 0.3s ease, transform 0.3s ease;
+    transition: color 0.3s ease, border .3s ease-in-out, background-color .5s ease-in-out;
   }
 
   .sidebar-link.active {
@@ -92,7 +92,6 @@
   
   .sidebar-link:hover {
     color: #ffffff;
-    transform: translateY(-2px);
     border: 1px solid #4339ff;
   }