folder refactor

src/components/Footer/Footer.js

@@ -1,10 +1,8 @@
 import React from 'react';
-import NavigationItem from '../NavigationItems/NavigationItem/NavigationItem';  
 
 const footer = () => (
   
    <footer className="footer">
-   
       <div className="footer__copyright">
       &copy; 2018 Made with ❤️ by <a className="footer__copyright--link" href="http://andresio.com"> Andres Alcocer</a></div>
    </footer>

src/components/Header/Header.js

@@ -8,14 +8,9 @@ class Header extends Component {
   render() {
 
     const backgroundStyle = {
-     
-      // backgroundPosition: "center fixed",
-      // backgroundPosition: "center",
-      // backgroundAttachment: "fixed",
-    
       backgroundSize: "cover",
       backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`,
-       backgroundPosition: "center",
+      backgroundPosition: "center",
     }
 
     return (
@@ -40,6 +35,4 @@ class Header extends Component {
   }
 }
 
-
-
 export default Header; 

src/components/Movie/Movie.js

@@ -1,6 +1,5 @@
-import React, {Component} from 'react';
+import React from 'react';
  
-
 const movieRow = (props) => (
 
    <div className="movie">

src/components/Movie/MovieDetails/MovieDetails.js

@@ -4,7 +4,7 @@ import AddIcon from '../../../static/images/add.svg';
 import PlayIcon from '../../../static/images/play-button.svg'; 
  
 
-class MovieSummary extends Component {
+class MovieDetails extends Component {
 
 
    render() {
@@ -18,8 +18,7 @@ class MovieSummary extends Component {
               <span className="modal__rating">
                 Rating: {this.props.movie.vote_average * 10}%{" "}
               </span>
-              Release date: {this.props.movie.release_date || this.props.movie.first_air_date} Runtime:
+              Release date: {this.props.movie.release_date || this.props.movie.first_air_date }  Runtime: { this.props.movie.runtime || this.props.movie.episode_run_time}m
-              {this.props.movie.runtime || this.props.movie.episode_run_time} m
             </p>
             <p className="modal__episode">
               {this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""}
@@ -39,8 +38,4 @@ class MovieSummary extends Component {
    }
 }
 
-
+export default MovieDetails; 
-
-
-
-export default MovieSummary; 

src/components/NavigationItems/NavigationItems.js

@@ -1,52 +0,0 @@
-import React, { Component } from 'react'; 
-
-import NavigationItem from './NavigationItem/NavigationItem';
-import SearchLogo from '../../static/images/search-icon.svg'; 
-import SearchMovie from '../../containers/SearchMovie/SearchMovie'; 
-
-
-// const navigationItems = (props) => (
-//   <ul className="navigation__container">
-//     <NavigationItem link="/" exact>Netflix</NavigationItem>
-//     <NavigationItem link="/">Home</NavigationItem>
-//     <NavigationItem link="/">TV Shows</NavigationItem>
-//     <NavigationItem link="/">Movies</NavigationItem>
-//     <NavigationItem link="/">Recently Added</NavigationItem>
-//     <NavigationItem link="/">My List</NavigationItem>
-    
-//     <div className="navigation__container--left">
-//       <SearchLogo className="logo"/>
-//       <SearchMovie />
-//       {/* <input 
-//         placeholder="Title, people, genres" 
-//         type="text" /> */}
-//       {/* <p>hello</p>
-//       <p>hello</p> */}
-//     </div>
-//   </ul>
-// );
-
-// export default navigationItems; 
-
-class NavigationItems extends Component {
-
-
-  render() {
-    return (
-      <ul className="navigation__container">
-     <NavigationItem link="/" exact>Netflix</NavigationItem>
-     <NavigationItem link="/">Home</NavigationItem>
-     <NavigationItem link="/">TV Shows</NavigationItem>
-     <NavigationItem link="/">Movies</NavigationItem>
-     <NavigationItem link="/">Recently Added</NavigationItem>
-     <NavigationItem link="/">My List</NavigationItem>
-
-     <div className="navigation__container--left">
-       <SearchLogo className="logo"/>
-     </div>
-   </ul>
-    ); 
-  }
-}
-
-export default NavigationItems; 

src/components/Search/Search.js

@@ -1,12 +0,0 @@
-import React from 'react';
-
-const search = (props) => (
-   
-   <input
-      onChange={props.onSearch}
-      onClick={props.onShow}
-      type="text"
-      placeholder="Title, genres, people" />
-)
-
-export default search;

src/components/UI/Modal/Modal.js

@@ -18,7 +18,7 @@ class Modal extends Component {
             <Backdrop show={this.props.show} toggleBackdrop={this.props.modalClosed} />
                <div
                   style={backgroundStyle}
-                  className={"modal " + (this.props.show ? "show" : "hide")}>
+               className={(this.props.show ? "modal show" : "modal hide")}>
                   {this.props.children} 
                </div>
          </Aux>

src/containers/App.js

@@ -1,116 +1,16 @@
 import React, { Component } from 'react';
-import Navigation from "./Navigation/Navigation"
-import Layout from './Layout/Layout'; 
-import axios from 'axios'; 
-import MovieRow from '../components/MovieRow/MovieRow'
-import Modal from '../components/UI/Modal/Modal'; 
-import MovieSummary from '../components/MovieRow/MovieSummary/MovieSummary'; 
-import CancelIcon from '../static/images/cancel-music.svg'
 
+import Layout from './Layout/Layout'; 
 
 
 class App extends Component {
 
-  state = {
+  render() {
-    toggleMovieList: true,
+    return (
-    //an array that will hold all of our movies component 
+      <Layout/>
-    rows: [],
+    )
-    toggleModal: false,
-    movieDetails: {},
   }
 
-makeAipCall = (searchItem) => {
-  const url = `https://api.themoviedb.org/3/search/multi?api_key=9ea839ec7891591994ec0f540b4b199f&language=en-US&include_adult=false&query=${searchItem}`;
-      axios.get(url)
-         .then(res => {
-            // console.log(res.data.results); 
-            // extract the data from json object 
-            const results = res.data.results;
-            let movieImageUrl; 
-            let movieRows = [];
-            results.forEach((movie) => {
-               // manually build our image url and set it on the movie object 
-               if (movie.poster_path !== null && movie.media_type !== "person") {
-                  movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path;
-                 // pass in the movie object to our MovieRow component and keep it in a variable called 
-                 // movieComponent 
-                  const movieComponent = <MovieRow
-                   movieDetails={() => this.selectMovieHandler(movie)}
-                   key={movie.id}
-                   movieImage={movieImageUrl}
-                   movie={movie} />
-                 // push our movieComponent to our movieRows array; 
-                 movieRows.push(movieComponent);
-               } 
-              
-            })
-            // update state 
-            this.setState({ rows: movieRows });
-         }).catch(error => {
-            console.log(error);
-         });
-   }
-
-  onSearchHandler = (event) => {
-    this.setState({
-      toggleMovieList: false
-    }); 
-    const userInput = event.target.value; 
-    this.makeAipCall(userInput); 
-
-
-    if (userInput === "") {
-      this.setState({
-        toggleMovieList: true
-      }); 
-    } 
-  }
-
-  /* Get the appropriate details for a specific movie that was clicked */
-  selectMovieHandler = (movie) => {
-    this.setState({toggleModal: true}); 
-
-    let url; 
-    if (movie.media_type === "movie") {
-      const movieId = movie.id; 
-      console.log(movie.id); 
-      url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
-    } else if (movie.media_type === "tv") {
-      const tvId = movie.id 
-      url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
-    }
-
-    axios.get(url)
-      .then(res => {
-        console.log(res);
-        const movieData = res.data; 
-        // console.log(movieData); 
-        this.setState({movieDetails: movieData}); 
-      }).catch(error => {
-
-        console.log(error); 
-      }); 
-  
-  }
-
-  closeModal = () => {
-    this.setState({ toggleModal: false }); 
-  }
-
-   render() {
-
-      return (
-         <div>  
-          <Navigation showMovies={this.onSearchHandler} />
-          {this.state.toggleMovieList ? <Layout /> : <div 
-                                            className="search-container">{this.state.rows}</div>}
-          <Modal show={this.state.toggleModal} modalClosed={this.closeModal} movie={this.state.movieDetails}>
-            <MovieSummary movie={this.state.movieDetails}/>
-          </Modal>  
-         </div>
-
-      );
-   }
 }
 
 export default App; 

src/containers/Layout/Layout.js

@@ -1,50 +1,115 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'; 
-import axios from 'axios'; 
+import axios from "axios"; 
-import Header from '../../components/Header/Header'; 
-import MovieShowcase from '../MovieShowcase/MovieShowcase'; 
-import Footer from '../../components/Footer/Footer'; 
-import { BrowserRouter } from "react-router-dom"; 
 
+import Navbar from '../Navbar/Navbar'; 
+import MainContent from './MainContent/MainContent'; 
+import Movie from '../../components/Movie/Movie'; 
+import Modal from '../../components/UI/Modal/Modal'; 
+import MovieDetails from '../../components/Movie/MovieDetails/MovieDetails';
 
 class Layout extends Component {
+
   state = {
-    selectedMovie: {}
+    toggleMovieList: true,
-  };
+    //an array that will hold all of our movies component 
+    rows: [],
+    toggleModal: false,
+    movieDetails: {},
+  }
 
-  componentDidMount = () => {
+  makeAipCall = (searchItem) => {
-    this.getMovie();
+    const url = `https://api.themoviedb.org/3/search/multi?api_key=9ea839ec7891591994ec0f540b4b199f&language=en-US&include_adult=false&query=${searchItem}`;
-  };
+    axios.get(url)
-
-
-  getMovie = () => {
-    /**
-     * @param movieId narcos netflix series id 
-     */
-    const movieId = 63351;
-
-    const url = `https://api.themoviedb.org/3/tv/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
-    axios
-      .get(url)
       .then(res => {
-        const movieData = res.data;
+        // console.log(res.data.results); 
-        this.setState({ selectedMovie: movieData });
+        // extract the data from json object 
-      })
+        const results = res.data.results;
-      .catch(error => {
+        let movieImageUrl;
+        let movieRows = [];
+        results.forEach((movie) => {
+          // manually build our image url and set it on the movie object 
+          if (movie.poster_path !== null && movie.media_type !== "person") {
+            movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path;
+            // pass in the movie object to our MovieRow component and keep it in a variable called 
+            // movieComponent 
+            const movieComponent = <Movie
+              movieDetails={() => this.selectMovieHandler(movie)}
+              key={movie.id}
+              movieImage={movieImageUrl}
+              movie={movie} />
+            // push our movieComponent to our movieRows array; 
+            movieRows.push(movieComponent);
+          }
+
+        })
+        // update state 
+        this.setState({ rows: movieRows });
+      }).catch(error => {
         console.log(error);
       });
-  };
+  }
+
+  onSearchHandler = (event) => {
+    this.setState({
+      toggleMovieList: false
+    });
+    const userInput = event.target.value;
+    this.makeAipCall(userInput);
+
+
+    if (userInput === "") {
+      this.setState({
+        toggleMovieList: true
+      });
+    }
+  }
+
+  /* Get the appropriate details for a specific movie that was clicked */
+  selectMovieHandler = (movie) => {
+    this.setState({ toggleModal: true });
+
+    let url;
+    if (movie.media_type === "movie") {
+      const movieId = movie.id;
+      console.log(movie.id);
+      url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
+    } else if (movie.media_type === "tv") {
+      const tvId = movie.id
+      url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
+    }
+
+    axios.get(url)
+      .then(res => {
+        console.log(res);
+        const movieData = res.data;
+        // console.log(movieData); 
+        this.setState({ movieDetails: movieData });
+      }).catch(error => {
+
+        console.log(error);
+      });
+
+  }
+
+  closeModal = () => {
+    this.setState({ toggleModal: false });
+  }
 
   render() {
+
     return (
-      <BrowserRouter>
+      <div>
-        <div className="container">
+        <Navbar showMovies={this.onSearchHandler} />
-          <Header movie={this.state.selectedMovie} />
+        {this.state.toggleMovieList ? <MainContent /> : <div
-          <MovieShowcase />
+          className="search-container">{this.state.rows}</div>}
-          <Footer />
+        <Modal show={this.state.toggleModal} modalClosed={this.closeModal} movie={this.state.movieDetails}>
-        </div>
+          <MovieDetails movie={this.state.movieDetails} />
-      </BrowserRouter>
+        </Modal>
+      </div>
+
     );
   }
+
 }
 
 export default Layout; 

src/containers/Layout/MainContent/MainContent.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import Header from '../../../components/Header/Header';
+import MovieShowcase from '../MovieShowcase/MovieShowcase';
+import Footer from '../../../components/Footer/Footer';
+import { BrowserRouter } from "react-router-dom";
+
+
+class MainContent extends Component {
+  state = {
+    selectedMovie: {}
+  };
+
+  componentDidMount = () => {
+    this.getMovie();
+  };
+
+
+  getMovie = () => {
+    /**
+     * @param movieId narcos netflix series id 
+     */
+    const movieId = 63351;
+
+    const url = `https://api.themoviedb.org/3/tv/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
+    axios
+      .get(url)
+      .then(res => {
+        const movieData = res.data;
+        this.setState({ selectedMovie: movieData });
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  };
+
+  render() {
+    return (
+      <BrowserRouter>
+        <div className="container">
+          <Header movie={this.state.selectedMovie} />
+          <MovieShowcase />
+          <Footer />
+        </div>
+      </BrowserRouter>
+    );
+  }
+}
+
+export default MainContent; 

src/containers/MovieGenreRow/MovieGenre.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
  
 
-class movieShowcaseRow extends Component {
+class movieGenre extends Component {
 
 
    render() {
@@ -22,4 +22,4 @@ class movieShowcaseRow extends Component {
    }
 }
 
-export default movieShowcaseRow; 
+export default movieGenre; 

src/containers/MovieGenreRow/MovieGenreRow.js

@@ -1,10 +1,10 @@
 import React, { Component } from "react";
 import axios from 'axios'; 
-import MovieShowCaseRow from '../MovieShowcase/MovieShowcaseRow/MovieShowcaseRow'; 
+import MovieGenre from './MovieGenre'; 
 import Modal from "../../components/UI/Modal/Modal"; 
 import MovieSummary from '../../components/MovieRow/MovieSummary/MovieSummary'; 
 
-class MovieShowcase extends Component {
+class MovieGenreRow extends Component {
 
   state = {
     trendingMovieRow: [],
@@ -59,7 +59,7 @@ class MovieShowcase extends Component {
       
       if (movie.poster_path && movie.backdrop_path !== null) {
        
-        const movieComponent = <MovieShowCaseRow
+        const movieComponent = <MovieGenre
           movieDetails={() => this.getMovieDetails(movie)}
           key={movie.id}
           url={url}
@@ -82,7 +82,6 @@ class MovieShowcase extends Component {
    
     axios.get(url)
       .then(res => {
-        console.log(res);
         const movieRows = this.getMovieRows(res, url);
         
         this.setState({ trendingMovieRow: movieRows });
@@ -101,6 +100,7 @@ class MovieShowcase extends Component {
     axios.get(url)
       .then(res => {
         const movieRows = this.getMovieRows(res, url);
+
         this.setState({ topRatedRow: movieRows }); 
       }).catch(error => {
         console.log(error); 
@@ -115,8 +115,8 @@ class MovieShowcase extends Component {
 
     axios.get(url)
       .then(res => {
-        console.log(res);
         const movieRows = this.getMovieRows(res, url); 
+
         this.setState({ netflixOriginalsRow: movieRows }); 
       })
       .catch(error => {
@@ -129,8 +129,8 @@ class MovieShowcase extends Component {
 
     axios.get(url)
       .then(res => {
-       console.log(res);
         const movieRows = this.getMovieRows(res, url);
+
         this.setState({ actionMovieRow: movieRows });
       })
       .catch(error => {
@@ -143,8 +143,8 @@ class MovieShowcase extends Component {
 
     axios.get(url)
       .then(res => {
-       
         const movieRows = this.getMovieRows(res, url);
+
         this.setState({ comedyMovieRow: movieRows });
       })
       .catch(error => {
@@ -157,8 +157,8 @@ class MovieShowcase extends Component {
 
     axios.get(url)
       .then(res => {
-      
         const movieRows = this.getMovieRows(res, url);
+
         this.setState({ horrorMovieRow: movieRows });
       })
       .catch(error => {
@@ -171,8 +171,8 @@ class MovieShowcase extends Component {
 
     axios.get(url)
       .then(res => {
-      
         const movieRows = this.getMovieRows(res, url);
+
         this.setState({ romanceMovieRow: movieRows });
       })
       .catch(error => {
@@ -185,8 +185,8 @@ class MovieShowcase extends Component {
 
     axios.get(url)
       .then(res => {
-       
         const movieRows = this.getMovieRows(res, url);
+
         this.setState({ animatedMovieRow: movieRows });
       })
       .catch(error => {
@@ -199,8 +199,8 @@ class MovieShowcase extends Component {
 
     axios.get(url)
       .then(res => {
-      
         const movieRows = this.getMovieRows(res, url);
+
         this.setState({ documentaryRow: movieRows });
       })
       .catch(error => {
@@ -210,7 +210,6 @@ class MovieShowcase extends Component {
 
    render() {
 
-
       return (  
         <div className="movieShowcase">
           <h1 className="movieShowcase__heading">Netflix Originals</h1>
@@ -266,4 +265,4 @@ class MovieShowcase extends Component {
    }
 }
 
-export default MovieShowcase; 
+export default MovieGenreRow; 

src/containers/Navbar/DropdownContent.js

@@ -0,0 +1,36 @@
+import React from 'react'; 
+
+
+const dropdownContent = () => (
+  
+  <div className="dropdownContainer">
+    <div className="navigation__container--userLogo">
+      <div className="dropdownContent">
+        <div>
+          <div className="dropdownContent--user"></div>
+          <p className="dropdownContent--user-text">Andres</p>
+        </div>
+        <div>
+          <div className="dropdownContent--user dropdownContent--user-2"></div>
+          <p className="dropdownContent--user-text">Tony</p>
+        </div>
+        <div>
+          <div className="dropdownContent--user dropdownContent--user-3"></div>
+          <p className="dropdownContent--user-text">Luis</p>
+        </div>
+        <p className="dropdownContent-text">Manage Profiles</p>
+
+      </div>
+      <div className="dropdownContent dropdownContent--2">
+        <p className="dropdownContent-textOutside">Account</p>
+        <p className="dropdownContent-textOutside">Help Center</p>
+        <p className="dropdownContent-textOutside">Sign out of Netflix</p>
+      </div>
+    </div>
+  </div>
+
+  
+);
+
+export default dropdownContent; 
+

src/containers/Navbar/Navbar.js

@@ -1,9 +1,11 @@
 import React, { Component } from 'react';
-import NavigationItem from '../../components/NavigationItems/NavigationItem/NavigationItem'
+import NavigationItem from '../../components/NavigationItem/NavigationItem'
 import SearchLogo from '../../static/images/search-icon.svg'; 
 import NetflixLogo from '../../static/images/Netflix_Logo_RGB.png'; 
 import BellLogo from '../../static/images/bell-logo.svg';
 import DropdownArrow from '../../static/images/drop-down-arrow.svg'; 
+import DropdownContent from "./DropdownContent"; 
+
 
 class navigation extends Component {
  state = {
@@ -29,12 +31,10 @@ class navigation extends Component {
 
  
 
-
   render () {
 
     return (
       <nav className={"navigation " + (this.state.scrolling ? "black" : "")} >
-      
         <ul className="navigation__container">
           <NavigationItem link="/" exact><img className="navigation__container--logo" src={NetflixLogo} alt=""/></NavigationItem>
           <NavigationItem link="/">Home</NavigationItem>
@@ -57,37 +57,10 @@ class navigation extends Component {
           <NavigationItem link="/">KIDS</NavigationItem>         
           <NavigationItem link="/">DVD</NavigationItem>
           <BellLogo className="navigation__container--bellLogo" />  
-         
+
-            <div className="dropdownContainer">
+          <DropdownContent />
-            
-              <div className="navigation__container--userLogo">
-                <div className="dropdownContent">
-                <div>
-                  <div className="dropdownContent--user"></div>
-                  <p className="dropdownContent--user-text">Andres</p>
-                </div>
-                <div>
-                  <div className="dropdownContent--user dropdownContent--user-2"></div>
-                  <p className="dropdownContent--user-text">Tony</p>
-                </div>
-                <div>
-                  <div className="dropdownContent--user dropdownContent--user-3"></div>
-                  <p className="dropdownContent--user-text">Luis</p>
-                </div>
-                <p className="dropdownContent-text">Manage Profiles</p>
-             
-                </div>
-                <div className="dropdownContent dropdownContent--2">
-                <p className="dropdownContent-textOutside">Account</p>
-                <p className="dropdownContent-textOutside">Help Center</p>
-                <p className="dropdownContent-textOutside">Sign out of Netflix</p>
-                </div>
-              </div>
-            </div>
-  
           <DropdownArrow className="navigation__container--downArrow"/>
         </ul>
-        
       </nav>
     )
   }

src/static/sass/components/_backdrop.scss

@@ -6,5 +6,5 @@
    left: 0; 
    top: 0; 
    background-color: rgba($color-background, .7);
-   
+   transition: all .5s;
 }

src/static/sass/components/_modal.scss

@@ -2,12 +2,15 @@
    position: fixed;
    z-index: 500; 
    width: 100%;
-   top:  25%; 
+   top:  0; 
    left: 0; 
    color: #fff;
    height: 52rem;
+   opacity: 0;
+   // transform: scale(0);
    box-shadow: 0 1.5rem 4rem rgba($color-dark, .15);
-
+   // transition: all  2s 1s;
+     
    &__container {
       background: linear-gradient(90deg, #000 50%, transparent);
       width: 70%;
@@ -35,15 +38,6 @@
       font-size: 2rem;
    }
 
-   &__cancel {
-      cursor: pointer;
-      width: 1.8rem;
-      fill: #fff;
-      float: right;
-      padding-right: 2rem;
-      padding-top: 2rem;
-   }
-
    &__overview {
       color: $color-modal-grey-2;
       padding-top: 2rem;
@@ -86,11 +80,15 @@
 }
 
 .show {
+   transition: .5s .3s ease-out;
+   top: 25%;
+   left: 0;
+   visibility: visible;
    opacity: 1;
+ 
 }
 
 .hide {
-   transition: all 1s;
+    visibility: hidden;
-   display: none;
 }
 

src/static/sass/components/_movie.scss

@@ -8,12 +8,11 @@
       width: 17.5rem;
       cursor: pointer;
       transition: transform .3s;
-
+      -webkit-transition: transform .3s;
-      &:hover {
+      
-          z-index: -1;
+       &:hover {
-         transform: scale(1.25); 
+         transform: scale(1.25);
-
+       }
-      }
 
    }
 

src/static/sass/components/_movieShowcase.scss

@@ -11,9 +11,10 @@
       overflow-y: hidden;
       transition: transform 450ms;
       overflow-x: scroll;
-      
+      display: flex;
-      flex: 1 1 auto;
+      width: 95vw;
-      display: grid;
+      overflow: -moz-scrollbars-horizontal; 
+ 
       grid-template-columns: repeat(20, 1fr);
       column-gap: 0;
 
@@ -60,6 +61,7 @@
          padding-top: 3.5rem;
          padding-bottom: 4rem;
          height: 21.5rem;
+         min-height: 0;
         
          &:not(:last-child) {
             padding-right: .5rem;
@@ -71,6 +73,7 @@
          }
 
          &__netflix {
+            min-height: 0;
             padding-top: 3rem;
             padding-bottom: 4rem;
             padding-right: 1rem;

src/static/sass/layout/_header.scss

@@ -66,17 +66,8 @@
    }
 
    &--fadeBottom {
-      
-   //  height: 65vw;
-   // height: 34rem;
-   // padding-top: 45rem;
-      // width: 100%;
-      // height: 20vh;
       height: 27.4rem;
-      // padding-bottom: 100rem;
+      background-image: linear-gradient(180deg, transparent,rgba(37, 37, 37, 0.61), rgb(17, 17, 17));
-   //  transform: translateY(-1rem);
-   
-    background-image: linear-gradient(180deg, transparent,rgba(37, 37, 37, 0.61), rgb(17, 17, 17));
    }
 }