done Row & Banner

package.json

@@ -12,6 +12,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
+    "react-slick": "^0.28.1",
+    "slick-carousel": "^1.8.1",
     "web-vitals": "^2.1.2"
   },
   "scripts": {

src/App.css

@@ -1,38 +1,41 @@
-.App {
-  text-align: center;
+@import '~slick-carousel/slick/slick.css';
+@import '~slick-carousel/slick/slick-theme.css';
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.slider-prev {
+    left: 18 !important;
+}
+
+.slider-next {
+    right: -18 !important;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.slide-prev,
+.slide-next {
+    z-index: 99;
+    width: 30px;
+    height: 100%;
+    background: transparent;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.app {
+    background-color: #111;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+::-webkit-scrollbar {
+    width: 10px;
 }
 
-.App-link {
-  color: #61dafb;
+::-webkit-scrollbar-track {
+    border-radius: 10px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: gray;
 }

src/App.js

@@ -1,13 +1,31 @@
-import Movies from './components/Movies'
+import Row from './components/Row'
 import './App.css'
 import requests from './requests'
+import Banner from './components/Banner'
 
 function App() {
     return (
-        <div className="App">
-            <h1>Hey Thunder! This is Netflix-clone application</h1>
-            <Movies title="TRENDING NOW" fetchUrl={requests.fetchTrending} />
-            <Movies title="Top Rated" fetchUrl={requests.fetchTopRated} />
+        <div className="app">
+            {/* Navbar */}
+            {/* Banner */}
+            <Banner />
+            <Row title="TRENDING NOW" fetchUrl={requests.fetchTrending} />
+            <Row title="Top Rated" fetchUrl={requests.fetchTopRated} />
+            <Row title="Action Movies" fetchUrl={requests.fetchActionMovies} />
+            <Row
+                title="Animation Movies"
+                fetchUrl={requests.fetchAnimationMovies}
+            />
+            <Row title="Horror Movies" fetchUrl={requests.fetchHorrorMovies} />
+            <Row
+                title="Romance Movies"
+                fetchUrl={requests.fetchRomanceMovies}
+            />
+            <Row
+                title="Science Fiction Movies"
+                fetchUrl={requests.fetchScienceFictionMovies}
+            />
+            <Row title="War Movies" fetchUrl={requests.fetchWarMovies} />
         </div>
     )
 }

src/components/Banner/Banner.css

@@ -0,0 +1,54 @@
+.banner {
+    color: white;
+    object-fit: contain;
+    height: 448px;
+    margin-bottom: 1.5rem;
+}
+
+.banner__contents {
+    margin-left: 30px;
+    padding-top: 140px;
+}
+
+.banner__title {
+    font-size: 3rem;
+    font-weight: 800;
+    padding-bottom: 0.3rem;
+}
+
+.banner__description {
+    width: 45rem;
+    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;
+    margin-right: 1rem;
+    padding: 0.5rem 2rem;
+    background-color: rgba(51, 51, 51, 0.6);
+}
+
+.banner__button:hover {
+    color: #000;
+    background-color: #e6e6e6;
+    transition: all 0.2s;
+}
+
+.banner--fadeBottom {
+    height: 8rem;
+    background-image: linear-gradient(
+        180deg,
+        transparent,
+        rgba(37, 37, 37, 0.61),
+        #111
+    );
+}

src/components/Banner/index.jsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react'
+import axios from '../../axios'
+import requests from '../../requests'
+import './Banner.css'
+
+const baseImageUrl = 'https://image.tmdb.org/t/p/original'
+
+function Banner() {
+    const [movie, setMovie] = useState()
+    console.log(movie)
+    useEffect(() => {
+        async function fetchData() {
+            try {
+                const res = await axios.get(requests.fetchTrending)
+
+                setMovie(
+                    res.data.results[
+                        Math.floor(Math.random() * res.data.results.length)
+                    ]
+                )
+            } catch (err) {
+                console.log(err)
+            }
+        }
+        fetchData()
+    }, [])
+
+    function truncate(str, n) {
+        const s = ''
+        return str?.length > n ? str.substring(0, n) + '...' : str
+    }
+
+    return (
+        <header
+            className="banner"
+            style={{
+                backgroundSize: 'cover',
+                backgroundImage: `url("${baseImageUrl}/${movie?.backdrop_path}")`,
+                backgroundPosition: 'center center',
+            }}
+        >
+            <div className="banner__contents">
+                <h1 className="banner__title">
+                    {movie?.title || movie?.original_title}
+                </h1>
+                <div className="banner__buttons">
+                    <button className="banner__button">Play</button>
+                    <button className="banner__button">My List</button>
+                </div>
+                <h1 className="banner__description">
+                    {truncate(movie?.overview, 150)}
+                </h1>
+            </div>
+            <div className="banner--fadeBottom" />
+        </header>
+    )
+}
+
+export default Banner

src/components/Row/Row.css

@@ -0,0 +1,44 @@
+.row__title {
+    color: white;
+    margin-left: 20px;
+}
+
+.row__posters {
+    display: flex;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    padding: 20px;
+}
+
+.row__posters::-webkit-scrollbar {
+    display: none;
+}
+.row__poster {
+    object-fit: contain;
+    width: 100%;
+    max-height: 230px;
+    margin-right: 4px;
+    transition: transform 450ms;
+}
+
+.row__poster:hover {
+    transform: scale(1.08);
+}
+
+@media screen and (max-width: 992px) {
+    .row__poster {
+        max-height: 220px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .row__poster {
+        max-height: 200px;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .row__poster {
+        max-height: 150px;
+    }
+}