import React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
// import logotip from "./image/black_logo_PenaHab.svg";
import {Typography} from "@mui/material";
import abstraction from '../../assets/Quiz-main.png'
import SectionStyled from './SectionStyled';
import {styled} from "@mui/material/styles";
import { Link, redirect } from 'react-router-dom';


export default function Component() {
    return(
        <SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
                       sxsect={{
                           height: '660px',
                       }}
                       sxcont={{
                           display: 'flex',
                           justifyContent: 'space-between',
                           alignItems: 'center',
                           padding: 0,

                           marginBottom: "55px",
                       }}>
            <Box
                sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    gap: '30px',
                    height: '100%',
                    justifyContent: 'space-between',
                    alignItems: "flex-start",
                    position: 'relative'
                }}
            >
                <Typography variant='h2'>
                    Опросник
                </Typography>
                <Box
                    sx={{
                        maxWidth: '420px',
                        minHeight: '64px',
                    }}>
                    <Typography variant='body1'>
                        Помогаем посетителю оставить заявку. Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети.
                    </Typography>
                </Box>
                    <Link to="/list" style={{textDecoration: "none"}}>
                <Button variant="contained"
                >
                    Попробуйте бесплатно
                    
                </Button>
                    </Link>

                <Box
                    component={"img"}
                    src={abstraction}
                    sx={{
                        position: "absolute",
                        bottom: "-291px",
                        width: "810px",
                        left: "401px"
                    }}
                />
            </Box>
        </SectionStyled>
    )
}