import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Button from '@material-ui/core/Button';
import CameraIcon from '@material-ui/icons/PhotoCamera';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import CssBaseline from '@material-ui/core/CssBaseline';
import Grid from '@material-ui/core/Grid';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import {makeStyles} from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Link from '@material-ui/core/Link';
import VideoVimeo from '../components/atoms/VideoVimeo'
import 'video-react/dist/video-react.css';
import {Player} from 'video-react';
import Hidden from '@material-ui/core/Hidden';
import dynamic from 'next/dynamic'
import OgHead from '../components/atoms/OgHead';
import getConfig from 'next/config'

const Footer = dynamic(() => import ('../components/organisms/FooterAccueil'), {ssr: false});

function Copyright() {
    return (
        <Typography variant="body2" color="textSecondary" align="center">
            {'Copyright © '}
            <Link color="inherit" href="https://material-ui.com/">
                Your Website
            </Link>{' '} {new Date().getFullYear()}
            {'.'}
        </Typography>
    );
}

const useStyles = makeStyles((theme) => ({
    icon: {
        marginRight: theme.spacing(2)
    },
    actionBtn: {
        marginBottom: "0.75em",
        display: "block"
    },
    bttn: {
        color: "#fff",
        background: "#FF6A6C",
        border: "2px solid #FF6A6C",
        padding: "15px"
    },
    heroSection: {
        //  background:
        // "url('https://blog.talentstube.com/wp-content/uploads/2021/02/realisation-off
        // r e-emploi-video-smartphone-modele.jpg') center center no-repeat scroll",
        // backgroundSize: "cover",
        padding: "5em 0 9em",
        position: "relative",
        color: "#fff",
    },

    mieuxQueTexteSection: {
        backgroundColor:"#fff",
        zIndex:"100",
        paddingTop: "",
        [
            theme
                .breakpoints
                .down('md')
        ]: {
            paddingTop: "0"
        }
    },
    mieuxQueTexteTexte: {
        color: "#fff",
        font: "normal normal bold 1.625em/1.769em Roboto",
        letterSpacing: "2",
    },
    bloc1Section: {
        paddingLeft: "5em",
        paddingRight: "5em"
    },

    heroSectionMobile: {
        background: "url('/statique/images/accueil/adoptez-le-recrutement-video.jpg') center top  no-repeat scroll",
        padding: "5em 0 9em",
        position: "relative",
        color: "#fff",
        backgroundSize: "cover",
    },
    container: {
        paddingRight: "15px",
        paddingLeft: "15px",
        marginRight: "auto",
        marginLeft: "auto"
    },
    containerMobile: {},
    colMd12: {
        position: "relative",
        minHeight: "1px",
        paddingLeft: "4em",
        paddingRight: "4em",

        [
            theme
                .breakpoints
                .down('md')
        ]: {
            paddingLeft: "2em",
            paddingRight: "2em",
        }
    },
    welcomeMessageLogo: {
        marginBottom:"80px",
        textAlign: "left"
    },
    welcomeMessage: {

        textAlign: "left"
    },
    welcomeMessageH1: {
        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
        fontSize: "50px",
        fontWeight: "700",
        lineHeight: "1.2em !important",
        color: "#fff",
        maxWidth: "600px"
    },
    welcomeMessageP: {
        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
        fontSize: "20px",
        marginBottom: "0",
        color: "#fff",
        fontWeight: "400",
        maxWidth: "600px",
        marginBottom:"80px",
    },
    videoBackground: {
        position: "absolute",
        right: "0",
        bottom: "0",
        top: "0",
        minWidth: "100%",
        minHeight: "50%",
        height: "50%",
        width: "auto",
        height: "auto",
        zIndex: "-100",
        // background: `url("/statique/images/recrutement-video.jpg")` ,

    },
    overlay: {
        position: "absolute",
        width: "100%",
        minHeight: "100%",
        background: "rgba(0, 0, 0, 0.36)",
        top: "0"
    },
    overlayMobile: {

        width: "100%",
        minHeight: "100%",

        top: "0"
    },
    heroContent: {
        backgroundColor: "#1689FB",
        // backgroundImage:"/statique/images/recrutement-video.jpg",
        // background:"https://source.unsplash.com/random", backgroundImage:
        // `url("/statique/images/recrutement-video.jpg")` ,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: "center",
        padding: theme.spacing(8, 0, 6)
    },
    cartoucheJeSuis:{
        backgroundColor: "#fff",
    },
    bloc1: {
        backgroundColor: "#1E2327",
        // backgroundImage:"/statique/images/recrutement-video.jpg",
        // background:"https://source.unsplash.com/random", backgroundImage:
        // `url("/statique/images/recrutement-video.jpg")` ,
        color: "#FFFFFF",
        backgroundRepeat: 'no-repeat',
        backgroundPosition: "center",
        padding: theme.spacing(8, 0, 6),
        marginTop: "60px"
    },
    bloc2: {
        backgroundColor: "transparent",
        // backgroundImage:"/statique/images/recrutement-video.jpg",
        // background:"https://source.unsplash.com/random", backgroundImage:
        // `url("/statique/images/recrutement-video.jpg")` ,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: "center",

        marginTop: "0px"
    },
    bloc3: {
        backgroundColor: "transparent",
        // backgroundImage:"/statique/images/recrutement-video.jpg",
        // background:"https://source.unsplash.com/random", backgroundImage:
        // `url("/statique/images/recrutement-video.jpg")` ,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: "center",
        marginTop: "60px"
    },
    bloc4: {
        backgroundColor: "#FCFCFC",
        // backgroundImage:"/statique/images/recrutement-video.jpg",
        // background:"https://source.unsplash.com/random", backgroundImage:
        // `url("/statique/images/recrutement-video.jpg")` ,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: "center",
        marginTop: "60px"
    },
    footerDiv: {
        backgroundColor: "#1E2327",
        // backgroundImage:"/statique/images/recrutement-video.jpg",
        // background:"https://source.unsplash.com/random", backgroundImage:
        // `url("/statique/images/recrutement-video.jpg")` ,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: "center",
        padding: theme.spacing(8, 0, 6)
    },
    bloc2Titre1: {
        textAlign: "left",
        font: "normal normal bold 2.625em/1.667em Roboto",
        letterSpacing: "2",
        color: "#1E2327",
        opacity: "1",
        lineHeight: "1em"
    },
    bloc2Titre2: {
        textAlign: "left",
        font: "normal normal bold 1.625em/1.769em Roboto",
        letterSpacing: "2",
        color: "#1E2327",
        opacity: "1",
        lineHeight: "2em"
    },
    bloc2Titre3: {
        textAlign: "left",
        font: "normal normal normal 1.25em/1.9em Roboto",
        letterSpacing: "2",
        color: "#1E2327",
        opacity: "1",
        lineHeight: "3em"
    },
    bloc2Paragraphe: {
        textAlign: "left",
        font: "normal normal normal 1em/2em Roboto",
        letterSpacing: "2",
        color: "#1E2327",
        opacity: "1",
        lineHeight: "2em",
        marginBottom: '62px'
    },
    heroButtons: {
        marginTop: theme.spacing(4)
    },
    recruteurButton: {

        width: "182px",
        height: "49px",
        background: "#25D89A 0% 0% no-repeat padding-box",
        border: "2px solid #25D89A",
        borderRadius: "5px",
        opacity: "1",
        color: "#fff",
        fontWeight: "700",
        textTransform: "inherit"
    },
    talentButton: {

        width: "182px",
        height: "49px",
        border: "2px solid #FFFFFF",
        color: "#FFFFFF",
        borderRadius: "5px",
        opacity: "1",
        textTransform: "inherit",
        background: "transparent",
        fontWeight: "700",
        '&:hover': {
            background: "#ffffff 0% 0% no-repeat padding-box",
            color: "#25D89A"
        }
    },
    cardGrid: {

        paddingBottom: theme.spacing(8)
    },
    cardGauche: {

        display: 'flex',
        flexDirection: 'column',
        background: "#E7F3FF 0% 0% no-repeat padding-box",
        boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
        padding: "50px",
        minHeight:"650px",
        '&:hover': {
            boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
        },

        [
            theme
                .breakpoints
                .down('md')
        ]: {
            padding: "50px 0px",
        }
    },
    cardDroite: {
        display: 'flex',
        flexDirection: 'column',
        background: "#F8FBFF 0% 0% no-repeat padding-box",
        boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
        padding: "50px ",
        minHeight:"650px",
        '&:hover': {
            boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
        },

        [
            theme
                .breakpoints
                .down('md')
        ]: {
            padding: "50px 0px",
        }
    },
    cardDroiteGris: {
        display: 'flex',
        flexDirection: 'column',
        background: "#FCFCFC 0% 0% no-repeat padding-box",
        boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
        padding: "50px",
        '&:hover': {
            boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
        }
    },
    bloc1Droite: {
        backgroundColor: "transparent",
        boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
        '&:hover': {
            boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
        }
    },
    bloc3Droite: {
        backgroundColor: "transparent",
        boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
        '&:hover': {
            boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
        }
    },
    blocGris: {
        backgroundColor: "transparent",
        boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)",
        verticalAlign:"middle",
        '&:hover': {
            boxShadow: "0px 0px 0px rgba(30, 35, 39, 0.15)"
        }
    },
    bloc1DroiteH1: {
        textAlign: "left",
        font: "normal normal bold 2.625em/1.667em Roboto",
        letterSpacing: "2",
        color: "#ffffff",
        opacity: "1",
        lineHeight: "1.5em"
    },
    bloc1DroiteParagraphe: {
        textAlign: "left",
        font: "normal normal normal 1em/2em Roboto",
        letterSpacing: "2",
        color: "#ffffff",
        opacity: "1",
        lineHeight: "2em",
        marginBottom: '62px'
    },
    bloc1Gauche: {
        backgroundColor: "transparent",
        verticalAlign:"middle"
    },
    cardMedia: {
        paddingTop: '500px', // 16:9
    },
    cardContent: {
        flexGrow: 1
    },
    footer: {
        backgroundColor: theme.palette.background.paper,
        padding: theme.spacing(6)
    }
}));
const {publicRuntimeConfig} = getConfig();
const cards = [1, 2];

export default function Index() {
    const classes = useStyles();
    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
    const imgUrl = DefaultUrl
    return (
        <React.Fragment>
            <OgHead
                seo_title="Espace candidat - Plateforme de recrutement en vidéo | Talents Tube"
                seo_description="Talents Tube est la première plateforme réservée aux offres d'emploi vidéo, vidéo marque employeur et aux CV vidéos. Découvrez une nouvelle méthode de recrutement."
                seo_url="www.talentstube.com"
                image={imgUrl}
                seo_key="Recrutement, video"></OgHead>

            <main>
                {/* Hero unit */}

                <header >

                    <Hidden smDown>
                        <div className={classes.heroSection}>
                            <video autoPlay loop muted className={classes.videoBackground}>
                                <source
                                    src={"/statique/video/adoptez-le-recrutement-video.mp4"}
                                    type='video/mp4'/>

                            </video>

                        

                            <div className={classes.colMd12}>
                                <div className={classes.welcomeMessageLogo}>
                                    <img src="/statique/images/talents-tube-logo.svg"/>
                                </div>
                                <div className={classes.welcomeMessage}>
                                    <h1 className={classes.welcomeMessageH1}>Adoptez le recrutement vidéo</h1>
                                    <p className={classes.welcomeMessageP}>Talents Tube favorise la mise en relation
                                        de candidats et d’entreprises et tout ça en vidéo !</p>
                                </div>
                                <div className={classes.heroButtons}></div>
                                <div className={classes.actionBtn}>
                                    <Grid container spacing={2} justify="left">
                                        <Grid item>
                                            <Link href="https://recruteur.talentstube.com"  >
                                                <Button variant="contained" className={classes.recruteurButton}>
                                                    Je suis recruteur
                                                </Button>
                                            </Link>
                                        </Grid>
                                        <Grid item>
                                            <Link href="indexTalent"  >
                                                <Button variant="contained" className={classes.talentButton}>
                                                    Je suis talent
                                                </Button>
                                            </Link>
                                        </Grid>
                                    </Grid>
                                    {/* <button
                                            className={classes.recruteurButton}
                                            data-toggle="modal"
                                            data-target="#exampleModal">JE SUIS RECRUTEUR</button>
                                        <button
                                            className={classes.talentButton}
                                            data-toggle="modal"
                                            data-target=".bd-example-modal-lg">JE SUIS TALENT</button> */}
                                </div>
                            </div>
                        </div>

                    </Hidden>
                    <Hidden mdUp>
                        <div className={classes.heroSectionMobile}>
                            <div className={classes.overlayMobile}>
                                <div className={classes.containerMobile}>

                                    <div className={classes.colMd12}>
                                        <div className={classes.welcomeMessageLogo}>
                                            <img src="/statique/images/talents-tube-logo.svg"/>
                                        </div>
                                        <div className={classes.welcomeMessage}>
                                            <h1 className={classes.welcomeMessageH1}>Adoptez le recrutement vidéo</h1>
                                            <p className={classes.welcomeMessageP}>Talents Tube favorise la mise en relation
                                                de candidats et d’entreprises et tout ça en vidéo !</p>
                                        </div>
                                        <div className={classes.heroButtons}></div>
                                        <div className={classes.actionBtn}>
                                            <Grid container spacing={2} justify="left">
                                                <Grid item>
                                                    <Link href="https://recruteur.talentstube.com"  >
                                                        <Button variant="contained" className={classes.recruteurButton}>
                                                            Je suis recruteur
                                                        </Button>
                                                    </Link>
                                                </Grid>
                                                <Grid item>
                                                    <Link href="indexTalent"  >
                                                        <Button variant="contained" className={classes.talentButton}>
                                                            Je suis talent
                                                        </Button>
                                                    </Link>
                                                </Grid>
                                            </Grid>
                                            {/* <button
                                            className={classes.recruteurButton}
                                            data-toggle="modal"
                                            data-target="#exampleModal">JE SUIS RECRUTEUR</button>
                                        <button
                                            className={classes.talentButton}
                                            data-toggle="modal"
                                            data-target=".bd-example-modal-lg">JE SUIS TALENT</button> */}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </Hidden>
                    <section className={classes.mieuxQueTexteSection}>
                        <div className={classes.heroContent}>

                            <Container maxWidth="lg">
                                <Typography variant="h4" align="center" className={classes.mieuxQueTexteTexte}>
                                    « Parce que vous méritez mieux que du texte ! »
                                </Typography>

                            </Container>
                        </div>
                    </section>   
                </header>
                                         
                <section >
                    <div className={classes.cartoucheJeSuis}>
                        <Container className={classes.cardGrid} maxWidth="xl">
                            {/* End hero unit */}
                            <Grid container spacing={0}>

                                <Grid item key={1} xs={24} sm={12} md={6}>
                                    <Card className={classes.cardGauche}>

                                        <CardContent >
                                            <Typography gutterBottom component="h2" className={classes.bloc2Titre1}>
                                                Je suis recruteur
                                            </Typography>
                                            <Typography gutterBottom component="h3" className={classes.bloc2Titre2}>
                                                Talent introuvable ? Métier en tension ?
                                            </Typography>
                                            <Typography className={classes.bloc2Titre3} component="h4">
                                                Rencontrez vos futurs collaborateurs autrement, en vidéo
                                            </Typography>
                                            <Typography className={classes.bloc2Paragraphe}>
                                                <b>Publiez une offre d’emploi vidéo :</b><br/>
                                                <ul>
                                                    <li>Pas besoin d’une super vidéo, montrez simplement votre entreprise en donnant
                                                        la parole à vos salariés</li>
                                                </ul>
                                                <b>Recevez des candidatures vidéo :</b><br/>
                                                <ul>
                                                    <li>Au-delà des compétences, découvrez les vraies personnes derrière le CV
                                                    </li>
                                                </ul>
                                                <ul>
                                                    <li>
                                                        Gagnez du temps dans votre présélection, rencontrez uniquement les candidats
                                                        réellement impliqués</li>
                                                </ul>
                                                <b>Ne vous limitez plus à des mots, osez un recrutement plus qualitatif !</b><br/>
                                            </Typography>
                                            <Link href="https://recruteur.talentstube.com"  >
                                                <Button variant="contained" className={classes.recruteurButton}>
                                                    En savoir plus
                                                </Button>
                                            </Link>
                                        </CardContent>

                                    </Card>
                                </Grid>
                                <Grid item key={2} xs={24} sm={12} md={6}>
                                    <Card className={classes.cardDroite}>

                                        <CardContent className={classes.cardContent}>
                                            <Typography gutterBottom component="h2" className={classes.bloc2Titre1}>
                                                Je suis candidat
                                            </Typography>
                                            <Typography gutterBottom component="h3" className={classes.bloc2Titre2}>
                                                Marre des envois de CV sans réponse ?
                                            </Typography>
                                            <Typography className={classes.bloc2Titre3} component="h4">
                                                Rencontrez votre futur employeur autrement, en vidéo :
                                            </Typography>
                                            <Typography className={classes.bloc2Paragraphe}>
                                                <b>Consultez des offres d’emploi video :</b><br/>
                                                <ul>
                                                    <li>L’offre est en vidéo pour mieux comprendre l’entreprise, le métier,
                                                        l’équipe… Votre candidature est aussi en vidéo. Vous êtes à égalité !</li>
                                                </ul>
                                                <b>Déposez votre candidature en vidéo :</b><br/>
                                                <ul>
                                                    <li>Tout le monde a du talent et votre personnalité est aujourd’hui votre
                                                        meilleur atout
                                                    </li>
                                                </ul>
                                                <ul>
                                                    <li>Pas besoin d’une « belle » vidéo, soyez vrai et authentique</li>
                                                </ul>
                                                <b>Dévoilez gratuitement qui vous êtes, au-delà des mots !</b>
                                            </Typography>
                                            <Link href="indexTalent"  >
                                                <Button variant="contained" className={classes.recruteurButton}>
                                                    Je me lance
                                                </Button>
                                            </Link>
                                        </CardContent>

                                    </Card>
                                </Grid>
                            </Grid>
                        </Container>
                    </div>
                    <div className={classes.bloc1}>
                        <Container className={classes.cardGrid} maxWidth="lg">
                            {/* End hero unit */}
                            <Grid container spacing={10}>

                                <Grid item key={2} xs={24} sm={12} md={6}>
                                    <Card className={classes.bloc1Droite}>

                                        <CardContent className={classes.bloc1Droite}>
                                            <Typography
                                                gutterBottom
                                                component="h2"
                                                color="#fff"
                                                className={classes.bloc1DroiteH1}>
                                                Notre mission : Remettre l’humain au cœur des recrutements
                                            </Typography>
                                            <Typography className={classes.bloc1DroiteParagraphe}>
                                                Chez Talents Tube, nous pensons que la technologie ne doit pas remplacer
                                                l’humain mais être à son service. C’est pour cette raison que nous proposons un
                                                outil de recrutement vidéo alliant digital et humain, afin de redonner la parole
                                                aux candidats et aux entreprises. Talents Tube est aujourd’hui la SEULE
                                                plateforme de recrutement qui permet aux entreprises de publier des offres
                                                d’emploi en vidéo et de recevoir des candidatures en vidéo.
                                            </Typography>
                                        </CardContent>

                                    </Card>
                                </Grid>
                                <Hidden smDown>
                                    <Grid item key={1} xs={24} sm={12} md={6}>
                                        <Card className={classes.bloc1Gauche}>

                                            <CardMedia
                                                className={classes.cardMedia}
                                                image="/statique/images/accueil/candidature-en-video.png"></CardMedia>

                                        </Card>
                                    </Grid>
                                </Hidden>
                            </Grid>
                        </Container>
                    </div>

                    <div className={classes.bloc3}>
                        <Container className={classes.cardGrid} maxWidth="lg">
                            {/* End hero unit */}
                            <Grid container spacing={10}>
                                <Hidden smDown>
                                    <Grid item key={1} xs={24} sm={12} md={6}>
                                        {/* <Card className={classes.bloc1Gauche}>
                                            <CardMedia
                                                className={classes.cardMedia}
                                                image="/statique/images/accueil/recrutement-video-talents-tube-equipe.jpg"></CardMedia>

                                        </Card> */}
                                        <img src="/statique/images/accueil/recrutement-video-talents-tube-equipe.jpg"></img>
                                    </Grid>
                                </Hidden>
                                <Grid item key={2} xs={24} sm={12} md={6}>
                                    <Card className={classes.bloc3Droite}>

                                        <CardContent className={classes.bloc1Droite}>
                                            <Typography
                                                gutterBottom
                                                component="h2"
                                                color="#fff"
                                                className={classes.bloc2Titre1}>
                                                Pourquoi nous ?
                                            </Typography>
                                            <Typography className={classes.bloc2Titre2}>
                                                Parce que nous sommes les SEULS à savoir le faire !
                                            </Typography>
                                            <Typography className={classes.bloc2Paragraphe}>
                                                Notre équipe est composée d’experts métier qui sauront vous accompagner dans
                                                toutes vos demandes que vous soyez candidat ou recruteur. En recherche
                                                d’évolution constante, nous avons à cœur de créer une relation de proximité afin
                                                d’adapter NOTRE solution à VOS besoins et ainsi créer une expérience utilisateur
                                                inoubliable. <br/><br/>
                                                Composée d’experts de la fonction RH & Recrutement, nous sommes
                                                passionnés par ce que nous faisons. Notre SEUL objectif : favoriser la rencontre
                                                d’entreprises formidables et de candidats uniques pour une performance commune.
                                            </Typography>
                                        </CardContent>

                                    </Card>
                                </Grid>
                            </Grid>
                        </Container>
                    </div>

                    <div className={classes.bloc4}>
                        <Container className={classes.cardGrid} maxWidth="lg">
                            {/* End hero unit */}
                            <Grid container spacing={10}>

                                <Grid item key={2} xs={12} sm={12} md={6}>
                                    <Card className={classes.blocGris}>

                                        <CardContent  >
                                            <Typography
                                                gutterBottom
    
                                                component="h2"
                                                color="#fff"
                                                className={classes.bloc2Titre1}>
                                                Ils recrutent déjà avec Talents Tube!
                                            </Typography>
                                            <Card className={classes.cardDroiteGris}>
                                                <img src="/statique/images/accueil/recrutement-video-entreprises.png"/>

                                            </Card>
                                            
                                        </CardContent>

                                    </Card>
                                </Grid>
                                <Grid item key={1} xs={12} sm={12} md={6}>
                                    <Card className={classes.blocGris}>

                                        <iframe
                                            width="100%"
                                            height="315"
                                            src="https://www.youtube.com/embed/sKh0u7Mbdps"
                                            frameborder="0"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                            allowfullscreen></iframe>

                                    </Card>
                                </Grid>
                            </Grid>
                        </Container>
                    </div>
                    {/* <div className={classes.footerDiv}>

                        <Container maxWidth="sm"></Container>
                    </div> */}
                    <Footer/>
                </section>

            </main>

        </React.Fragment>
    );
}