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/Footer.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/landingPage.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 TeamSection from "pages-sections/home/TeamSection.js";
import WorkSection from "pages-sections/home/WorkSection.js";

//image
import Logo from "assets/img/White.png";

const dashboardRoutes = [];

const useStyles = makeStyles(styles);

export default function LandingPage(props) {
    const classes = useStyles();
    const { ...rest } = props;
    return (
        <div>
            <Header
                color="info"
                routes={dashboardRoutes}
                rightLinks={<HeaderHome />}
                fixed
                changeColorOnScroll={{
                height: 400,
                color: "white"
                }}
                {...rest}
            />
        <Parallax responsive image={require("assets/img/bglanding.png")}>
            <div className={classes.container}>
            <GridContainer>
                <GridItem xs={12} sm={12} md={6}>
                <img
                    src={Logo} width="120%"
                />
                <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>
                </GridItem>
            </GridContainer>
            </div>
        </Parallax>
        <div className={classNames(classes.main, classes.mainRaised)}>
            <div className={classes.container}><br /><br /><br />
            <Carousel />
            <CoreValue />
            <BusineesPartner />
            <Gallery />
            {/* <TeamSection />
            <WorkSection /> */}
            </div>
        </div>
        <Footer />
        </div>
    );
}