Merge pull request #40 from ThanishaDewangan/swoc

Swoc : Movie Card UI

frontend/src/components/Movies/MoviePage.css

@@ -1,87 +1,86 @@
 .movie-page {
-    padding: 20px;
-    color: white;
-    background-color: #1e272d;
-  }
-
-  .movie-page h1 {
-    text-align: center;
-    margin-bottom: 20px;
-    font-size: 2rem;
-  }
-
-  .movie-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    justify-content: center;
-  }
-
-  .movie-card {
-    background-color: #2c3e50;
-    padding: 20px;
-    border-radius: 10px;
-    width: 200px;
-    text-align: center;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    transition: transform 0.2s;
-  }
-
-  .movie-card:hover {
-    transform: scale(1.05);
-  }
-
-  .movie-card img {
-    width: 100%;
-    border-radius: 10px;
-  }
-
-  .movie-card h2 {
-    font-size: 18px;
-    margin: 10px 0;
-  }
-
-  .movie-card p {
-    font-size: 14px;
-    color: #bdc3c7;
-  }
-
-  .movie-buttons {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    justify-content: center;
-    margin-top: 10px;
-  }
-
-  .movie-buttons button {
-    background-color: #3498db;
-    color: white;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.2s;
-  }
-
-  .movie-buttons button:hover {
-    background-color: #2980b9;
-  }
-
-  .movie-buttons .thumbs-up,
-  .movie-buttons .thumbs-down,
-  .movie-buttons .add-to-list,
-  .movie-buttons .download,
-  .movie-buttons .share {
-    background-color: transparent;
-    color: #bdc3c7;
-    font-size: 1.2rem;
-  }
-
-  .movie-buttons .thumbs-up:hover,
-  .movie-buttons .thumbs-down:hover,
-  .movie-buttons .add-to-list:hover,
-  .movie-buttons .download:hover,
-  .movie-buttons .share:hover {
-    color: white;
-  }
+  padding: 20px;
+  color: white;
+  background-color: #141414;
+}
+
+.movie-page h1 {
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 2.5rem;
+  color: #ff5722;
+}
+
+.movie-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  justify-content: center;
+}
+
+.movie-card {
+  background-color: #1e272d;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+}
+
+.movie-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+}
+
+.movie-card-header {
+  position: relative;
+}
+
+.movie-image {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.movie-card-body {
+  padding: 20px;
+  text-align: center;
+}
+
+.movie-card-body h2 {
+  font-size: 1.5rem;
+  margin: 10px 0;
+  color: #ff5722;
+}
+
+.movie-card-body p {
+  font-size: 1rem;
+  color: #bdc3c7;
+  margin-bottom: 10px;
+}
+
+.movie-details {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 10px;
+  color: #90A4AE;
+}
+
+.movie-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.movie-buttons button {
+  background-color: #ff5722;
+  color: white;
+  border: none;
+  padding: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out;
+}
+
+.movie-buttons button:hover {
+  background-color: #e64a19;
+}

frontend/src/components/Movies/MoviePage.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { getAllMovies } from "../../api/Movie_api/getAllmovie";
 import "./MoviePage.css";
+import { Link } from "react-router-dom";
 
 const MoviePage = () => {
   const [movies, setMovies] = useState([]);
@@ -9,7 +10,7 @@ const MoviePage = () => {
     const fetchMovies = async () => {
       try {
         const movies = await getAllMovies();
-        console.log("Fetched movies:", movies); // Add this line
+        console.log("Fetched movies:", movies);
         setMovies(movies);
       } catch (error) {
         console.error("Error fetching movies:", error);
@@ -21,24 +22,15 @@ const MoviePage = () => {
 
   return (
     <div className="movie-page">
-      <h1>Season 1</h1>
-      <div className="movie-list">
+      <div className="movie-grid">
         {movies.map((movie) => (
-          <div key={movie._id} className="movie-card">
-            <img src={movie.image} alt={movie.title} />
-            <h2>{movie.title}</h2>
-            <p>{movie.description}</p>
-            <div className="movie-buttons">
-              <button className="play-now">Play Now</button>
-              <button className="watch-trailer">Watch Trailer</button>
-              <button className="watch-prime">Watch with Prime</button>
-              <button className="thumbs-up">👍</button>
-              <button className="thumbs-down">👎</button>
-              <button className="add-to-list">+</button>
-              <button className="download">⬇️</button>
-              <button className="share">🔗</button>
+          <Link to={`/movie/${movie._id}`} key={movie._id} className="movie-card-link">
+            <div className="movie-card">
+              <div className="movie-card-header">
+                <img src={movie.image} alt={movie.title} className="movie-image" />
+              </div>
             </div>
-          </div>
+          </Link>
         ))}
       </div>
     </div>