text: 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
  import Icon from "@material-ui/core/Icon";
  // core components
  import Header from "components/Header/Header.js";
  import Footer from "components/Footer/Footer.js";
  import Button from "components/CustomButtons/Button.js";
  import GridContainer from "components/Grid/GridContainer.js";
  import GridItem from "components/Grid/GridItem.js";
  import HeaderLinks from "components/Header/HeaderLinks.js";
  import Parallax from "components/Parallax/Parallax.js";
  
  import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
  import Link from "next/link";
  
  const useStyles = makeStyles(styles);
  
  export default function Home(props) {
    const classes = useStyles();
    const { ...rest } = props;
    const imageClasses = classNames(
      classes.imgRaised,
      classes.imgRoundedCircle,
      classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    return (
      <div>
        <Header
          color="transparent"
          brand="NextJS Material Kit"
          rightLinks={<HeaderLinks />}
          fixed
          changeColorOnScroll={{
            height: 200,
            color: "white",
          }}
          {...rest}
        />
        <Parallax small filter image={require("assets/img/profile-bg.jpg")} />
        <div className={classNames(classes.main, classes.mainRaised)}>
          <div>
            <div className={classes.container}>
              <GridContainer justify="center">
                <GridItem xs={12} sm={12} md={6}>
                  <div className={classes.profile}>
                    <div>
                      <img
                        src={
                          "https://i.pinimg.com/originals/c7/4a/fe/c74afe7a1b5c13e4556749b17073fb25.png"
                        }
                        alt="..."
                        className={imageClasses}
                      />
                    </div>
                    <div className={classes.name}>
                      <h3 className={classes.title}>Flim Mini Project</h3>
                      <h6>Feature App</h6>
                      <Link href="/mailbox">
                        <Button color="primary" size="lg">
                          <Icon className={classes.icons}>mail</Icon> Mail App
                        </Button>
                      </Link>
                    </div>
                  </div>
                </GridItem>
              </GridContainer>
            </div>
          </div>
        </div>
        <Footer />
      </div>
    );
  }
  