movie details better

src/components/MovieDetails/MovieDetails.jsx

@@ -5,7 +5,6 @@ import styles from './MovieDetails.module.css';
 
 const MovieDetails = () => {
   const { movieId } = useParams();
-
   const [movie, setMovie] = useState(null);
 
   useEffect(() => {
@@ -32,17 +31,20 @@ const MovieDetails = () => {
         alt={movie.title}
         className={styles.poster}
       />
-      <h2>
+      <h2 className={styles.title}>
         {movie.title} ({movie.release_date.split('-')[0]})
       </h2>
-      <p>User Score: {movie.vote_average * 10}%</p>
-      <h3>Overview</h3>
-      <p>{movie.overview}</p>
-      <h3>Genres</h3>
-      <p>{movie.genres.map(genre => genre.name).join(', ')}</p>
-
-      <h3>Additional information</h3>
-      <ul>
+      <p className={styles.score}>
+        User Score: {(movie.vote_average * 10).toFixed(1)}%
+      </p>
+      <h3 className={styles.overviewTitle}>Overview</h3>
+      <p className={styles.overview}>{movie.overview}</p>
+      <h3 className={styles.genresTitle}>Genres</h3>
+      <p className={styles.genres}>
+        {movie.genres.map(genre => genre.name).join(', ')}
+      </p>
+      <h3 className={styles.additionalInfoTitle}>Additional information</h3>
+      <ul className={styles.additionalInfoList}>
         <li>
           <Link to={`/movies/${movieId}/cast`} className={styles.link}>
             Cast

src/components/MovieDetails/MovieDetails.module.css

@@ -1,44 +1,76 @@
 .container {
-  max-width: 800px;
-  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   padding: 20px;
+  text-align: center;
 }
 
 .button {
   background-color: #66b2ff;
+  color: white;
   border: none;
   padding: 10px 20px;
+  border-radius: 5px;
   cursor: pointer;
   margin-bottom: 20px;
-  color: white;
   font-weight: bold;
-  border-radius: 5px;
-}
-
-.button:hover {
-  background-color: #005bb5;
 }
 
 .poster {
   width: 300px;
-  float: left;
-  margin-right: 20px;
+  height: auto;
+  border-radius: 10px;
+  margin-bottom: 20px;
 }
 
-h2 {
+.title {
+  font-size: 2em;
+  font-weight: bold;
   color: #003366;
+  margin-bottom: 10px;
 }
 
-h3 {
-  color: #005bb5;
+.score {
+  font-size: 1.2em;
+  font-weight: bold;
+  color: #666;
+  margin-bottom: 20px;
 }
 
-.link {
+.overviewTitle,
+.genresTitle,
+.additionalInfoTitle {
+  font-size: 1.5em;
+  font-weight: bold;
   color: #003366;
+  margin-top: 20px;
+}
+
+.overview,
+.genres {
+  font-size: 1.2em;
+  color: #333;
+  margin-bottom: 20px;
+  width: 50%;
+}
+
+.additionalInfoList {
+  list-style: none;
+  padding: 0;
+}
+
+.additionalInfoList li {
+  margin-bottom: 10px;
+}
+
+.link {
+  color: #66b2ff;
+  font-size: 1.2em;
   text-decoration: none;
+  font-weight: bold;
 }
 
 .link:hover {
-  color: #66b2ff;
   text-decoration: underline;
 }