tbg-ecomm-nextjs/pages/home.js

import React from "react";
// nodejs library that concatenates classes
import classNames from "classnames";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// @material-ui/icons

// core components
import Header from "components/Header/Header.js";
import Footer from "components/Footer/FooterHome.js";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Button from "components/CustomButtons/Button.js";
import HeaderHome from "components/Header/HeaderHome.js";
import Parallax from "components/Parallax/Parallax.js";

import styles from "assets/jss/nextjs-material-kit/pages/home.js";

// Sections for this page
import Carousel from "pages-sections/home/Carousel.js"
import CoreValue from "pages-sections/home/CoreValue.js";
import BusineesPartner from "pages-sections/home/Businees-Partner.js";
import Gallery from "pages-sections/home/gallery.js";
import stylecss from "../pages/home.css";

//image
import Logo from "assets/img/Black.png";
import Wa from "assets/img/wa.png"

const dashboardRoutes = [];
const useStyles = makeStyles(styles);

export default function LandingPage(props) {
    const classes = useStyles();
    const { ...rest } = props;
    console.log(stylecss.act);
    return (
        <div>
        <Header color="dark" routes={dashboardRoutes} rightLinks={<HeaderHome />} fixed/>
        <Parallax color="dark" responsive image={require("assets/img/bga.png")}>
            <div>
            <GridContainer>
                <GridItem>
                <div align="center">
                    <img
                        src={Logo} width="80%"
                    />
                    <br /><br/>
                    <Button
                        color="danger"
                        size="lg"
                        href="https://www.youtube.com/channel/UCRUULlhLxKUpXK1Ti4Jrjkw"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        <i className="fas fa-play" />
                        Watch video
                    </Button>
                </div>
                </GridItem>
            </GridContainer>
            </div>
        </Parallax>
        <div className={classNames(classes.main, classes.mainRaised)}>
            <div className={classes.container}>
                <Carousel />
                <CoreValue id={'section1'}/>
                <BusineesPartner />
                {/* <Gallery /> */}
                <a href="https://wa.me/087797315685" target="_blank" className="float">
                    <i className="fa fa-phone my-float"></i>
                </a>
            </div>
        </div><br/>
        <Footer />
        </div>
    );
}