<repo_name>Akhlak-Hossain-Jim/demo-project-Zaynax-LTD<file_sep>/src/assets/components/Blog.js
import React from "react";

import "../styles/components/blog.scss";
import "../styles/components/boxModel.scss";

// blog image importation
import blogImg1 from "../media/posters/26801830821918.png";
import blogImg2 from "../media/posters/26824312324126.png";
import blogImg3 from "../media/posters/Hair-Care.png";
import blogImg4 from "../media/posters/Image 117.png";

function Blog() {
  return (
    <div className="blogSection grid_parent">
      <h3>LATEST BLOGS</h3>
      <p>
        This is a place devoted to giving you deeper insight into the news,
        <br />
        trends, people and technology behind Bing.
      </p>
      <div className="flex">
        <img src={blogImg1} alt="" />
        <img src={blogImg2} alt="" />
        <img src={blogImg3} alt="" />
        <img src={blogImg4} alt="" />
      </div>
      <div className="flex">
        <span className="indicators active"></span>
        <span className="indicators"></span>
        <span className="indicators"></span>
        <span className="indicators"></span>
        <span className="indicators"></span>
      </div>
    </div>
  );
}

export default Blog;
<file_sep>/src/assets/components/Header.js
import React from "react";
import { Link } from "react-router-dom";

import "../styles/components/header.scss";
import "../styles/components/boxModel.scss";

import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import searchIcon from "../media/social icons/loupe.png";

function Header() {
  return (
    <header>
      <nav className="nav first__nav">
        <Link className="items nav__items active">Homepage</Link>
        <Link className="items nav__items second">All Product</Link>
      </nav>
      <nav className="nav flex secondery_nav">
        <div className="showing_products">
          Showing
          <span>{/* {from}*/}1</span> - {/* {to} */}40 of{" "}
          {/* {total products}*/}
          80,068 products
        </div>
        <div className="filter_by flex">
          <div className="resp_filter flex">
            <div
              className="item"
              onClick={() => {
                document.querySelector("#filters").classList.toggle("fly");
              }}
            >
              Filter
            </div>
          </div>
          <div className="filters flex" id="filters">
            <div className="rexp">
              <div className="refined_by flex">
                <span>Refine by | </span>&nbsp;&nbsp;&nbsp;Price{" "}
                <ArrowDropDownIcon />
              </div>
              <div className="short_by flex">
                <span>Sort by | </span>&nbsp;&nbsp;&nbsp;Best Seller{" "}
                <ArrowDropDownIcon />
              </div>
            </div>
          </div>
          <div className="search_bar flex">
            <div style={{ flexBasis: 1 }}></div>
            <div className="search flex">
              <input type="text" placeholder="Search" id="searchInput" />
              <div className="icon">
                <img
                  src={searchIcon}
                  alt=""
                  onClick={() => {
                    document
                      .querySelector("#searchInput")
                      .classList.toggle("fly");
                  }}
                />
              </div>
            </div>
          </div>
        </div>
      </nav>
    </header>
  );
}

export default Header;
<file_sep>/src/assets/components/ReactHelmet.js
import React from "react";
import { Helmet } from "react-helmet";

class ReactHelmet extends React.Component {
  render() {
    return (
      <Helmet>
        <meta charSet="utf-8" />
        <title>{this.props.pageTitle}</title>
        <link rel="canonical" href={this.props.cononical} />
      </Helmet>
    );
  }
}

export default ReactHelmet;
<file_sep>/src/assets/components/Footer.js
import React from "react";

// style imports
import "../styles/components/footer.scss";
import "../styles/components/boxModel.scss";

// image logo imports
import footerIllastration from "../media/footer illastration.png";

import SendIcon from "@material-ui/icons/Send";

import facebookIcon from "../media/social icons/002-facebook-logo.png";
import tweeterIcon from "../media/social icons/001-twitter-logo-silhouette.png";
import linkedinIcon from "../media/social icons/004-linkedin-logo.png";
import instagramIcon from "../media/social icons/instagram (1).png";
import youtubeIcon from "../media/social icons/005-youtube.png";

import bkashIcon from "../media/vendor icons/BKash-bKash-Logo.png";
import nagadIcon from "../media/vendor icons/nagad-logo-7A70CCFEE0-seeklogo.com.png";
// import roketIcon from "../media/vendor icons/005-youtube.png";
import visaIcon from "../media/vendor icons/g4158.png";
import mastercardIcon from "../media/vendor icons/Mastercard-logo.png";
import amairicanExpressIcon from "../media/vendor icons/amex-logo-png.png";

import hotlinkeIcon from "../media/social icons/customer-service-2-line.png";
import callIcon from "../media/social icons/phone-line.png";
import emailIcon from "../media/social icons/mail-send-line.png";

function Footer() {
  return (
    <footer>
      <div className="grid__parent">
        <img
          className="col_1_4 footer__illustration"
          src={footerIllastration}
          alt=""
        />
        <div className="col_2_4 mid_section">
          <section className="social_link_container flex">
            <a href="null" className="social_links fa">
              <img src={facebookIcon} alt="" className="social_link" />
            </a>
            <a href="null" className="social_links">
              <img src={tweeterIcon} alt="" className="social_link" />
            </a>
            <a href="null" className="social_links">
              <img src={linkedinIcon} alt="" className="social_link" />
            </a>
            <a href="null" className="social_links">
              <img src={instagramIcon} alt="" className="social_link" />
            </a>
            <a href="null" className="social_links">
              <img src={youtubeIcon} alt="" className="social_link" />
            </a>
          </section>

          <section className="subscription">
            <h3>SUBSCRIBE</h3>
            <h6>Get the leatest news from zDrop</h6>
            <form action="./action" className="flex">
              <input
                type="email"
                name="email"
                id="getEmail"
                placeholder="Email address"
              />
              <SendIcon role="button" className="submit_ico" />
            </form>
            <div className="quick_links flex">
              <a href="null" className="link">
                About zDrop
              </a>
              <a href="null" className="link">
                FAQ & Support
              </a>
              <a href="null" className="link">
                Term & Condition
              </a>
              <a href="null" className="link">
                Privacy Policy
              </a>
            </div>
          </section>

          <section className="payment_partner flex">
            <a href="null">
              <img src={bkashIcon} alt="" />
            </a>
            <a href="null">
              <img src={nagadIcon} alt="" />
            </a>
            <a href="null">
              <img src={visaIcon} alt="" />
            </a>
            <a href="null">
              <img src={mastercardIcon} alt="" />
            </a>
            <a href="null">
              <img src={amairicanExpressIcon} alt="" />
            </a>
            {/* <a href="">
              <img src="" alt="" />
            </a> */}
          </section>
        </div>
        <div className="col_3_4 right_sec flex">
          <section className="contact">
            <h3>CONTACT US</h3>
            <div className="block flex">
              <div className="img_con">
                <img src={hotlinkeIcon} alt="" />
              </div>
              <div>
                <h5>Hotline:</h5>
                <br />
                <h6>
                  <a href="tel:+8801929459195">
                    +8801929459195 (10am-10pm/Sat-Thur)
                  </a>
                </h6>
              </div>
            </div>
            <div className="block flex">
              <div className="img_con">
                <img src={callIcon} alt="" />
              </div>
              <div>
                <h5>Whole Sales</h5>
                <br />
                <h6>
                  <a href="tel:+8801929459195">01929459195 (10am-12pm)</a>
                </h6>
              </div>
            </div>
            <div className="block flex">
              <div className="img_con">
                <img src={emailIcon} alt="" />
              </div>
              <div>
                <h5>Email</h5>
                <br />
                <h6>
                  <a href="mailto:<EMAIL>">
                    <EMAIL>
                  </a>
                </h6>
              </div>
            </div>
          </section>
        </div>
      </div>
    </footer>
  );
}

export default Footer;
<file_sep>/src/assets/components/Promotions.js
import React from "react";

import "../styles/components/Promotion.scss";
import "../styles/components/boxModel.scss";

import FavoriteIcon from "@material-ui/icons/Favorite";
import TurnedInIcon from "@material-ui/icons/TurnedIn";
import SendIcon from "@material-ui/icons/Send";
import AccountBalanceWalletIcon from "@material-ui/icons/AccountBalanceWallet";
import SmsRoundedIcon from "@material-ui/icons/SmsRounded";

function Promotions() {
  return (
    <div className="promotions flex">
      <div className="promotionBox">
        <FavoriteIcon className="icon pink" />
        <h4>Quality and Saving</h4>
        <p>Comprehensive quality control and affordable prices</p>
      </div>
      <div className="promotionBox">
        <TurnedInIcon className="icon blue" />
        <h4>Global Brands</h4>
        <p>Buy you favorite items from your favorite global brands</p>
      </div>
      <div className="promotionBox">
        <SendIcon className="icon orange" />
        <h4>Fast Delivery</h4>
        <p>Fast and convenient door to door delivery</p>
      </div>
      <div className="promotionBox">
        <AccountBalanceWalletIcon className="icon ass" />
        <h4>Secure Payment</h4>
        <p>Different secure payment methods</p>
      </div>
      <div className="promotionBox">
        <SmsRoundedIcon className="icon green" />
        <h4>Professional Service</h4>
        <p>Efficient customer support from passionate team</p>
      </div>
    </div>
  );
}

export default Promotions;
<file_sep>/src/App.js
import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import "./assets/styles/app.scss";
import Footer from "./assets/components/Footer";
import Header from "./assets/components/Header";
import ProductPage from "./assets/pages/ProductPage";

function App() {
  return (
    <div className="app">
      <Router>
        <Header />
        <ProductPage />
        <Footer />
      </Router>
    </div>
  );
}

export default App;
