Some small improvements

src/index.css

@@ -1,6 +1,7 @@
 :root {
     --primary: #14bbaa;
     --secondary: #2c3c4c;
+    scroll-behavior: smooth;
 }
 
 *,
@@ -14,6 +15,7 @@ body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
         "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
         "Helvetica Neue", sans-serif;
+
     margin: 0;
     background-color: var(--secondary);
 }

src/pages/Actor.jsx

@@ -66,50 +66,38 @@ const Actor = () => {
         <>
             <TopBar />
             <div className={styles.Container}>
-                <hr />
+                <div className={styles.Top}>
-                <h1 className={styles.Name}>{actor?.name}</h1>
+                    <h1 className={styles.Name}>{actor?.name}</h1>
-                <div className={styles.Section}>
+                    <div className={styles.Section}>
-                    <h2>Biography</h2>
+                        <h2>Biography</h2>
-                    <div>
+                        <div>
-                        {actor?.biography ? (
+                            {actor?.biography ? (
-                            <a
+                                <a
-                                href="#"
+                                    href="#"
-                                className={styles.Collapse}
+                                    className={styles.Collapse}
-                                onClick={() =>
+                                    onClick={() =>
-                                    setCollapsed((collapsed) => !collapsed)
+                                        setCollapsed((collapsed) => !collapsed)
-                                }
-                            >
-                                <p
-                                    className={
-                                        collapsed ? styles.Collapsed : ""
                                     }
                                 >
-                                    {actor.biography}
+                                    <p
-                                </p>
+                                        className={`${
+                                            collapsed ? styles.Collapsed : ""
+                                        } ${styles.Biography}`}
+                                    >
+                                        {actor.biography}
+                                    </p>
 
-                                <p className={styles.ReadMore}>
+                                    <p className={styles.ReadMore}>
-                                    {collapsed ? "Read More" : "Read Less"}
+                                        {collapsed ? "Read More" : "Read Less"}
-                                </p>
+                                    </p>
-
+                                </a>
-                                <p>{collapsed}</p>
+                            ) : (
-                            </a>
+                                <p>No biography available.</p>
-                        ) : (
+                            )}
-                            <p>No biography available.</p>
+                        </div>
-                        )}
-                    </div>
-                </div>
-                <div className={styles.Section}>
-                    <h2>Images</h2>
-                    <div className={styles.Images}>
-                        {images?.profiles.map((image) => (
-                            <img
-                                key={image.file_path}
-                                className={styles.Image}
-                                src={`https://image.tmdb.org/t/p/w300${image.file_path}`}
-                            />
-                        ))}
                     </div>
                 </div>
+
                 <div className={styles.Section}>
                     <h2>Movies</h2>
                     <div className={styles.Credits}>
@@ -125,6 +113,18 @@ const Actor = () => {
                         ))}
                     </div>
                 </div>
+                <div className={styles.Section}>
+                    <h2>Images</h2>
+                    <div className={styles.Images}>
+                        {images?.profiles.map((image) => (
+                            <img
+                                key={image.file_path}
+                                className={styles.Image}
+                                src={`https://image.tmdb.org/t/p/w300${image.file_path}`}
+                            />
+                        ))}
+                    </div>
+                </div>
             </div>
         </>
     )

src/pages/Movie.jsx

@@ -65,15 +65,32 @@ const Movie = () => {
                         backgroundImage: `url(${movie?.backdropUrl})`,
                     }}
                 >
+                    <img className={styles.Thumb} src={movie?.posterUrl} />
+
                     <div className={styles.Summary}>
-                        <h2 className={styles.Title}>
+                        <h1 className={styles.Title}>
                             {movie?.title} - {movie?.year}
-                        </h2>
+                        </h1>
-                        <p>{movie?.tagline}</p>
+                        <p className={styles.Tagline}>{movie?.tagline}</p>
-                        <p className={styles.Overview}>{movie?.overview}</p>
+                        <a href="#bottom" className={styles.More}>
+                            <p>More info</p>
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="30"
+                                height="30"
+                                fill="currentColor"
+                                class="bi bi-chevron-down"
+                                viewBox="0 0 16 16"
+                            >
+                                <path
+                                    fill-rule="evenodd"
+                                    d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+                                />
+                            </svg>
+                        </a>
                     </div>
                 </div>
-                <div className={styles.Bottom}>
+                <div className={styles.Bottom} id="bottom">
                     <div className={styles.Tags}>
                         {movie?.genres.map((genre) => (
                             <p key={genre}>{genre}</p>
@@ -93,6 +110,10 @@ const Movie = () => {
                             </svg>
                         </p>
                     </div>
+                    <div className={styles.Section}>
+                        <h1 className={styles.Header}>Overview</h1>
+                        <p className={styles.Overview}>{movie?.overview}</p>
+                    </div>
                     <div className={styles.Section}>
                         <h1 className={styles.Header}>Your Rating</h1>
                         <Rate rating={rating} setRating={setRating} />

src/styles/Actor.module.css

@@ -9,6 +9,14 @@
     margin-top: 10px;
 }
 
+.Biography {
+    -webkit-box-orient: vertical;
+    font-size: 1.3em;
+    white-space: pre-line;
+    display: -webkit-box;
+    overflow: hidden;
+}
+
 .Images {
     display: flex;
     overflow: scroll;
@@ -27,11 +35,6 @@
 
 .Collapsed {
     -webkit-line-clamp: 5;
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    overflow-wrap: break-word;
 }
 
 .Collapse {

src/styles/Movie.module.css

@@ -12,13 +12,46 @@
     justify-content: flex-end;
 }
 
+.Thumb {
+    position: absolute;
+    left: 40px;
+    bottom: 50px;
+    box-shadow: 5px 5px 50px #00000030;
+}
+
 .Summary {
     background: linear-gradient(#00000035, black);
-    height: 15%;
+    height: 30%;
+    font-size: 20px;
     overflow: scroll;
     text-align: center;
 }
 
+.Overview {
+    font-size: 1.3em;
+}
+
+.More {
+    color: white;
+    font-size: 1.3em;
+    font-weight: bold;
+}
+
+.More:not(:hover) {
+    text-decoration: none;
+}
+
+.Title {
+    margin-top: 10px;
+    margin-bottom: 15px;
+    font-size: 70px;
+}
+
+.Tagline {
+    font-size: 30px;
+    font-weight: bold;
+}
+
 .Bottom {
     background-color: black;
     height: 100vh;

src/styles/TopBar.module.css

@@ -6,9 +6,9 @@
     display: grid;
     width: 100%;
     grid-template-columns: 1fr;
-    padding: 10px 30px;
+    padding: 20px 30px;
     gap: 10px;
-    background: linear-gradient(to bottom, #00000090, #00000010);
+    background: #00000050;
     color: white;
 }
 
@@ -33,6 +33,7 @@
 
 .Container.Absolute {
     position: absolute;
+    background: linear-gradient(to bottom, #00000090, #00000010);
 }
 
 .Container a {