72 lines
3.0 KiB
TypeScript
72 lines
3.0 KiB
TypeScript
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, useMediaQuery, useTheme} 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() {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
||
return(
|
||
<SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
|
||
sxsect={{
|
||
height: isMobile ? '702px' : (isTablet ? '986px' : '660px'),
|
||
}}
|
||
sxcont={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
padding: isMobile ? "300px 16px 0 16px" : (isTablet ? "494px 40px 0 40px" : 0),
|
||
marginBottom: isMobile ? '55px' : (isTablet ? 0 : "55px"),
|
||
}}>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: '30px',
|
||
height: '100%',
|
||
justifyContent: 'space-between',
|
||
alignItems: "flex-start",
|
||
position: 'relative',
|
||
}}
|
||
>
|
||
<Typography variant='h2'>
|
||
Pena Quiz
|
||
</Typography>
|
||
<Box
|
||
sx={{
|
||
maxWidth: isTablet ? '715px' : '420px',
|
||
minHeight: '64px',
|
||
}}>
|
||
<Typography variant='body1'>
|
||
Помогаем посетителю оставить заявку. <br style={{display: isTablet ? 'flex' : "none"}}/> Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети
|
||
</Typography>
|
||
</Box>
|
||
<Link to="/list" style={{textDecoration: "none"}}>
|
||
<Button variant="contained"
|
||
>
|
||
Попробуйте бесплатно
|
||
|
||
</Button>
|
||
</Link>
|
||
|
||
<Box
|
||
component={"img"}
|
||
src={abstraction}
|
||
sx={{
|
||
position: "absolute",
|
||
bottom: isMobile ? undefined : (isTablet? "138px" : "-291px"),
|
||
width: isMobile ? "403px" : "810px",
|
||
left: isMobile ? "-44px" : (isTablet? "54px" : "401px"),
|
||
top: isMobile ? "-386px" : undefined
|
||
}}
|
||
/>
|
||
</Box>
|
||
</SectionStyled>
|
||
)
|
||
} |