added the main Hero Banner that shows a trending tv series/movie

src/App.css

@@ -1,3 +1,7 @@
 * {
   margin: 0;
 }
+
+.app {
+  background-color: #111;
+}

src/App.js

@@ -1,9 +1,11 @@
 import './App.css';
 import Row from './Row';
+import Banner from './Banner';
 import requests from './requests';
 function App() {
   return (
     <div className="app">
+      <Banner />
       <Row
         title="Netflix Originals"
         fetchUrl={requests.fetchNetflixOriginals}

src/Banner.css

@@ -0,0 +1,59 @@
+.banner {
+  color: white;
+  object-fit: contain;
+  height: 448px;
+  margin-bottom: 2rem;
+}
+
+.banner__contents {
+  margin-left: 30px;
+  padding-top: 140px;
+  height: 190px;
+}
+
+.banner__title {
+  font-size: 3rem;
+  font-weight: 800;
+  padding-bottom: 0.3rem;
+}
+
+.banner__description {
+  width: 45rem;
+  cursor: pointer;
+  line-height: 1.3;
+  padding-top: 1rem;
+  font-size: 0.8rem;
+  max-width: 360px;
+  height: 80px;
+}
+
+.banner__button {
+  cursor: pointer;
+  color: #fff;
+  outline: none;
+  border: none;
+  font-weight: 700;
+  border-radius: 0.2vw;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  margin-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: rgba(51, 51, 51, 0.5);
+}
+
+.banner__button:hover {
+  color: #000;
+  background-color: #e6e6e6;
+  transition: all 0.2s;
+}
+
+.banner--fadeBottom {
+  height: 7.4rem;
+  background-image: linear-gradient(
+    180deg,
+    transparent,
+    rgba(37, 37, 37, 0.61),
+    #111
+  );
+}

src/Banner.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import axios from './axios';
+import requests from './requests';
+import './Banner.css';
+
+const Banner = () => {
+  const [movie, setMovie] = useState([]);
+  const [showMovieDescription, setShowMovieDescription] = useState(false);
+
+  useEffect(() => {
+    async function fetchData() {
+      const request = await axios.get(requests.fetchNetflixOriginals);
+      const fetchedMovies = request.data.results;
+      const randomIndex = Math.floor(Math.random() * fetchedMovies.length - 1);
+      setMovie(fetchedMovies[randomIndex]);
+      return request;
+    }
+    fetchData();
+  }, []);
+
+  function truncate(str, max) {
+    return str?.length > max ? str.substr(0, max - 1) + '…' : str;
+  }
+
+  return (
+    <header
+      className="banner"
+      style={{
+        backgroundSize: 'cover',
+        backgroundImage: `url("https://image.tmdb.org/t/p/original${movie?.backdrop_path}")`,
+        backgroundPosition: 'center center',
+      }}
+    >
+      <div className="banner__contents">
+        <h1 className="banner__title">
+          {movie?.title || movie?.name || movie?.original_name}
+        </h1>
+
+        <div className="banner__buttons">
+          <button className="banner__button">Play</button>
+          <button className="banner__button">My List</button>
+        </div>
+
+        <h1
+          className="banner__description"
+          onClick={() => setShowMovieDescription(!showMovieDescription)}
+        >
+          {showMovieDescription
+            ? movie?.overview
+            : truncate(movie?.overview, 150)}
+        </h1>
+      </div>
+
+      <div className="banner--fadeBottom"></div>
+    </header>
+  );
+};
+
+export default Banner;

src/Row.css

@@ -1,5 +1,6 @@
 .row {
   margin-left: 20px;
+  color: white;
 }
 .row__title {
   padding-left: 20px;