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;
}