My first React Page- Movie site clone

Enough with the tutorials and practice, now it's a time to build up something good and my own.
Starting with this movie clone app.
Just completed with my landing page made as simple as I can as a beginner
find out my repo: princepatel157/moviekiss-web-app
Please rate my work how is it going from the start and reply with the suggestion if any please...
Checkout the simplest code snippets:
  • CategoryBar.js:
  • import React from "react";
    import "./Catog.css";
    import { Link } from "react-router-dom";
    import HomeIcon from "@material-ui/icons/Home";
    import MovieIcon from "@material-ui/icons/Movie";
    import TvIcon from "@material-ui/icons/Tv";
    import LanguageIcon from "@material-ui/icons/Language";
    import TranslateIcon from "@material-ui/icons/Translate";
    import CalendarTodayIcon from "@material-ui/icons/CalendarToday";
    import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
    import MoreVertIcon from "@material-ui/icons/MoreVert";
    
    function Catog() {
      return (
        <>
          <div className="container cat_bar">
            <div className="row ">
              {/* home */}
              <div className="col-xs-2 block_item">
                <div className="dropdown">
                  <span className="option">
                    <HomeIcon className="icons" />
                    <Link to="/" className="home_cat_links">
                      Home
                    </Link>
                  </span>
                </div>
              </div>
    
              {/* movie */}
              <div className="col-xs-2">
                <div className="dropdown">
                  <span className="option">
                    <MovieIcon className="icons" />
                    Movies
                    <ArrowDropDownIcon className="icons" />
                  </span>
                  <div className="dropdown_content">
                    <p>
                      <Link to="#" className="cat_links">
                        Bollywood
                      </Link>
                    </p>
                    <p>
                      <Link to="#" className="cat_links">
                        Hollywood
                      </Link>
                    </p>
                    <p>
                      <Link to="#" className="cat_links">
                        Dual Audio
                      </Link>
                    </p>
                  </div>
                </div>
              </div>
    
              {/* web series */}
              <div className="col-xs-2">
                <div className="dropdown">
                  <span className="option">
                    <LanguageIcon className="icons" />
                    Web Series
                    <ArrowDropDownIcon className="icons" />
                  </span>
                  <div className="dropdown_content">
                    <p>
                      <Link to="#" className="cat_links">
                        Hindi Dubbed
                      </Link>
                    </p>
                    <p>
                      <Link to="#" className="cat_links">
                        Adult
                      </Link>
                    </p>
                    <p>
                      <Link to="#" className="cat_links">
                        Netflix
                      </Link>
                    </p>
                  </div>
                </div>
              </div>
    
              {/* tv shows */}
              <div className="col-xs-2">
                <div className="dropdown">
                  <span className="option">
                    <TvIcon className="icons" />
                    Tv Shows
                    <ArrowDropDownIcon className="icons" />
                  </span>
                  <div className="dropdown_content">
                    <p>
                      <Link to="#" className="cat_links">
                        Action
                      </Link>
                    </p>
                    <p>
                      <Link to="#" className="cat_links">
                        Adventure
                      </Link>
                    </p>
                    <p>
                      <Link to="#" className="cat_links">
                        Animation
                      </Link>
                    </p>
                  </div>
                </div>
              </div>
    
              {/* dual audio */}
              <div className="col-xs-2">
                <div className="dropdown">
                  <span className="option">
                    <TranslateIcon className="icons" />
                    Dual Audio
                    <ArrowDropDownIcon className="icons" />
                  </span>
                  <div className="dropdown_content">
                    <p>
                      <Link to="#" className="cat_links">
                        Movie
                      </Link>
                    </p>
                    <p>
                      <Link to="#" className="cat_links">
                        Series
                      </Link>
                    </p>
                  </div>
                </div>
              </div>
    
              {/* year */}
              <div className="col-xs-2">
                <div className="dropdown">
                  <span className="option">
                    <CalendarTodayIcon className="icons" />
                    Year
                    <ArrowDropDownIcon className="icons" />
                  </span>
                  <div className="dropdown_content">
                    <p>
                      <Link to="#" className="cat_links">
                        2020
                      </Link>
                    </p>
                    <p>
                      <Link to="#" className="cat_links">
                        2019
                      </Link>
                    </p>
                    <p>
                      <Link to="#" className="cat_links">
                        2018
                      </Link>
                    </p>
                    <p>
                      <Link to="#" className="cat_links">
                        before 2018
                      </Link>
                    </p>
                  </div>
                </div>
              </div>
              {/* more */}
              <div className="col-xs-2 block_item">
                <div className="dropdown">
                  <span className="option">
                    <Link to="/" className="more_cat_links">
                      More
                      <MoreVertIcon className="icons" />
                    </Link>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </>
      );
    }
    
    export default Catog;
  • CategoryBar.css
  • .cat_bar {
      margin-left: auto;
      margin-right: auto;
      align-items: center;
    }
    .dropdown {
      position: relative;
      display: flex;
      justify-content: flex-end;
      padding: 10px;
      background-color: rgb(173, 235, 216);
      margin-right: 2px;
      margin-left: 2px;
    }
    .dropdown_content {
      display: none;
      position: absolute;
      z-index: 1;
      background-color: #94ff9a;
      min-width: 120px;
      padding: 12px 16px;
    }
    .dropdown:hover .dropdown_content {
      display: block;
      background-color: rgb(148, 236, 210);
    }
    .dropdown:hover {
      background-color: rgb(75, 241, 192);
    }
    .cat_links {
      text-decoration: none;
    }
    .icons {
      padding: 1px;
      margin-right: 10px;
      margin-left: 10px;
    }
    .home_cat_links {
      padding-right: 10px;
    }
    .more_cat_links {
      padding-left: 10px;
    }
  • ProductFrame.js:
  • import React from "react";
    import "./Product.css";
    
    const Poduct = (props) => {
      return (
        <>
          <div className="product">
            <div className="product_img">
              <img src={props.image} alt="" />
            </div>
            <div className="product_info">{props.name}</div>
          </div>
        </>
      );
    };
    
    export default Poduct;
  • ProductFrame.css:
  • .product {
      display: flex;
      flex-direction: column;
      /* align-items: center; */
      width: 200px;
      height: 450px;
      margin-left: 60px;
      margin-top: 40px;
      margin-bottom: 20px;
      background-color: white;
    }
    .product_img {
      width: 100%;
      height: 100%;
    }
    .product_info {
      font-weight: 700;
      /* padding-left: 3px; */
      text-align: center;
      margin-bottom: 15px;
    }
    ***For the whole Code refer my git-hub repo -> https://github.com/princepatel157/moviekiss-web-app

    21

    This website collects cookies to deliver better user experience

    My first React Page- Movie site clone