Enhance movie management features by adding MovieList component to display user's watchlist; update MovieCard to include add/remove functionality for watchlist; refactor SearchMovies layout for improved structure; adjust global styles for primary color.

src/components/molecules/SearchMovies/index.tsx

@@ -14,24 +14,29 @@ export const SearchMovies = () => {
   };
 
   return (
-    <div className="container">
-      <div className="row justify-center">
-        <div className="col-5">
-          <SearchInput onChange={handleSearch} />
+    <section className="my-6">
+      <div className="container">
+        <div className="row justify-center">
+          <div className="col-5">
+            <SearchInput onChange={handleSearch} />
+          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mt-8">
+          {results.map((result) => (
+            <MovieCard
+              key={result.id}
+              id={result.id}
+              title={result.title}
+              releaseDate={result.release_date}
+              popularity={result.popularity}
+              overview={result.overview}
+              imagePath={result.poster_path}
+              seen={false}
+              favorite={false}
+            />
+          ))}
         </div>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mt-8">
-        {results.map((result) => (
-          <MovieCard
-            key={result.id}
-            title={result.title}
-            releaseDate={result.release_date}
-            popularity={result.popularity}
-            overview={result.overview}
-            imagePath={result.poster_path}
-          />
-        ))}
-      </div>
-    </div>
+    </section>
   );
 };