SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

новые текста + мобильная адаптация лендинга

Browse Source
This commit is contained in:
Tamara 2023-10-11 01:22:03 +03:00
parent fa3039a800
commit c3d44d6546
16 changed files with 759 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/LandingPict/youtobeIcon.tsx
View File

@ -3,15 +3,16 @@ import { Box } from "@mui/material";
interface Props {
color?: string;
width?: string;
}
export default function YoutobeIcon({color}:Props) {
export default function YoutobeIcon({color, width}:Props) {
return (
<Box
sx={{
height: "75px",
width: "120px",
width: {width} || "120px",
display: "flex",
alignItems: "center",
justifyContent: "center",

35
src/pages/Landing/BusinessPluses.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import Box from '@mui/material/Box';
import {Typography} from "@mui/material";
import {Typography, useMediaQuery, useTheme} from "@mui/material";
import SectionStyled from './SectionStyled';
import {styled} from "@mui/material/styles";
import Icon1 from "./images/icons/Handshake";
@ -10,36 +10,26 @@ import Icon3 from "./images/icons/DoneIcon";
const BoxPluses = styled('div')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
// alignItems: 'center',
// textAlign: 'center',
width: '100%',
},
}));
const BoxCard = styled('div')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
alignItems: 'center',
// alignItems: 'center',
},
}));
const BoxText = styled('div')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
textAlign: 'center',
marginBottom: '40px',
[theme.breakpoints.down(600)]: {
marginBottom: '20px',
},
}));
function Square () {
return(
<Box sx={{
width: '59px',
height: '59px',
backgroundColor: '#CBDADE',
borderRadius: '6px',
}}
> </Box>
)
}
export default function Component () {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
return(
<SectionStyled tag={'section'} bg={'#7e2aea'} mwidth={'1160px'}
sxsect={{minHeight: '394px'}}
@ -48,19 +38,18 @@ export default function Component () {
justifyContent: 'space-around',
height: '100%',
color:'#ffffff',
padding: '55px 14px 63px 10px'
padding: isMobile ? '60px 16px 32px 16px' : '55px 14px 63px 10px'
}}
>
<BoxText
// marginBottom={'40px'}
>
<Typography marginBottom={'40px'} variant={'h6'} fontSize={'36px'}>В чем плюсы для бизнеса</Typography>
<BoxText>
<Typography sx={{marginBottom: isMobile ? 0 : '40px'}} variant={'h6'} fontSize={'36px'}>В чем плюсы для бизнеса</Typography>
</BoxText>
<BoxPluses
sx={{
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
gap: isMobile ? "17px" : undefined
}}
>
<BoxCard

31
src/pages/Landing/Counter.tsx
View File

@ -1,31 +1,28 @@
import React from 'react';
import Box from '@mui/material/Box';
import {Typography} from "@mui/material";
import { styled } from '@mui/material/styles';
import {Typography, useMediaQuery, useTheme} from "@mui/material";
const Root = styled('section')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
height: 'auto',
},
}));
export default function Counter() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
return(
<Root
<Box
sx={{
width: '100%',
fontFamily: 'Rubik',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: 0,
boxSizing: "border-box",
padding: isMobile ? "0 40px" : undefined,
}}
>
<Box
sx={{
maxWidth: '1160px',
height: '190px',
height: isMobile ? "587px": "190px",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
@ -34,9 +31,9 @@ export default function Counter() {
color: '#ffffff',
borderRadius: '8px',
boxSizing: "border-box",
padding: '30px 60px 30px 20px',
padding: isMobile ? '10px 60px 30px 35px' : '30px 60px 30px 20px',
width: '100%',
marginTop: "106px"
marginTop: isMobile ? "483px" : "106px"
}}
>
<Box
@ -44,11 +41,11 @@ export default function Counter() {
width: '203px',
}}
>
<Typography variant='h3' fontSize={'50px'} fontWeight={'500'}>14 дней</Typography>
<Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>14 дней</Typography>
<Typography> бесплатно, полный функционал</Typography>
</Box>
<Box>
<Typography variant='h3' fontSize={'50px'} fontWeight={'500'}>10 мин</Typography>
<Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>5 мин</Typography>
<Box
sx={{
width: '131px',
@ -58,7 +55,7 @@ export default function Counter() {
</Box>
</Box>
<Box>
<Typography variant='h3' fontSize={'50px'} fontWeight={'500'}>482 800</Typography>
<Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>482 800</Typography>
<Box
sx={{
width: '200px',
@ -72,10 +69,10 @@ export default function Counter() {
width: '177px',
}}
>
<Typography variant='h3' fontWeight={'500'}>76</Typography>
<Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>760</Typography>
<Typography>готовых шаблонов для разных ниш</Typography>
</Box>
</Box>
</Root>
</Box>
)
}

41
src/pages/Landing/FooterLanding.tsx
View File

@ -5,30 +5,12 @@ import Button from "@mui/material/Button";
import PenaLogo from "../../ui_kit/PenaLogo";
import SectionStyled from './SectionStyled';
import {styled} from "@mui/material/styles";
import {useMediaQuery, useTheme} from "@mui/material";
const RootBox = styled('div')(({ theme }) => ({
[theme.breakpoints.down('sm')]: {
justifyContent: 'center',
},
}));
const BoxServis = styled('div')(({ theme}) => ({
[theme.breakpoints.down('lg')]: {
width: '100%',
display: 'flex',
justifyContent: 'center',
textAlign: 'center',
alignItems: 'center',
}
}));
const BoxMenu = styled('div')(({ theme }) => ({
[theme.breakpoints.down('xs')]: {
width: '100%',
},
}));
export default function Component() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
return(
<SectionStyled tag={'footer'} bg={'#252734'} mwidth={'1160px'}
sxsect={{
@ -39,17 +21,17 @@ export default function Component() {
alignItems: 'flex-start',
flexDirection: 'column',
minHeight: '236px',
padding: '56px 0px',
padding: isMobile ? '40px 16px 74px 16px' : '56px 0px',
boxSizing: 'border-box',
}}>
<RootBox
<Box
sx={{
display: 'flex',
height: '50%',
alignItems: "center",
width: "100%",
flexWrap: 'wrap',
gap: "120px"
gap: isMobile ? "65px" : "120px"
}}
>
<Box
@ -81,18 +63,19 @@ export default function Component() {
flexWrap: 'wrap',
}}
>
<BoxMenu
<Box
sx={{
display: 'flex',
flexDirection: 'column',
'button':{color: '#F2F3F7', textTransform: 'none'},
}}
>
<Button variant="text" sx={{fontSize: "16px", fontWeight: 500}}>Место под документ 1</Button>
<Button variant="text" sx={{fontSize: "16px", fontWeight: 500}}>Место под документ 2</Button>
</BoxMenu>
<Button variant="text" sx={{fontSize: "16px", fontWeight: 500}}>
Пользовательское соглашение
</Button>
</Box>
</Box>
</RootBox>
</Box>
</SectionStyled>
)
}

8
src/pages/Landing/HeaderLanding.tsx
View File

@ -2,12 +2,14 @@ import React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import SectionStyled from './SectionStyled';
import PenaLogo from "../../ui_kit/PenaLogo";
import NavMenuItem from "@ui_kit/Header/NavMenuItem";
import QuizLogo from "./images/icons/QuizLogo";
import { useMediaQuery, useTheme } from "@mui/material";
const buttonMenu = ['Меню 1', 'Меню 2', 'Меню 3', 'Меню 4', 'Меню 5', 'Меню 1', 'Меню 2']
export default function Component() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const [select, setSelect] = React.useState(0)
return (
<SectionStyled tag={'header'} bg={'#F2F3F7'} mwidth={'1160px'}
@ -23,7 +25,7 @@ export default function Component() {
alignItems: 'center',
padding: '0 10px'
}}>
<PenaLogo width={150} />
<QuizLogo width={isMobile ? 100 : 150} />
<Box
sx={{
maxWidth: '595px',

22
src/pages/Landing/Hero.tsx
View File

@ -2,7 +2,7 @@ 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 {Typography, useMediaQuery, useTheme} from "@mui/material";
import abstraction from '../../assets/Quiz-main.png'
import SectionStyled from './SectionStyled';
import {styled} from "@mui/material/styles";
@ -10,17 +10,18 @@ import { Link, redirect } from 'react-router-dom';
import { setIsContactFormOpen } from "../../stores/contactForm";
export default function Component() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
return(
<SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
sxsect={{
height: '660px',
height: isMobile ? '702px' : '660px',
}}
sxcont={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: 0,
padding: isMobile ? "300px 16px 0 16px" : 0,
marginBottom: "55px",
}}>
<Box
@ -31,11 +32,11 @@ export default function Component() {
height: '100%',
justifyContent: 'space-between',
alignItems: "flex-start",
position: 'relative'
position: 'relative',
}}
>
<Typography variant='h2'>
Опросник
Pena Quiz
</Typography>
<Box
sx={{
@ -43,7 +44,7 @@ export default function Component() {
minHeight: '64px',
}}>
<Typography variant='body1'>
Помогаем посетителю оставить заявку. Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети.
Помогаем посетителю оставить заявку. Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети
</Typography>
</Box>
<Link to="/list" style={{textDecoration: "none"}}>
@ -60,9 +61,10 @@ export default function Component() {
src={abstraction}
sx={{
position: "absolute",
bottom: "-291px",
width: "810px",
left: "401px"
bottom: isMobile ? undefined : "-291px",
width: isMobile ? "430px" : "810px",
left: isMobile ? "-44px" : "401px",
top: isMobile ? "-386px" : undefined
}}
/>
</Box>

161
src/pages/Landing/HowItWorks.tsx
View File

@ -1,8 +1,7 @@
import React from 'react';
import Box from '@mui/material/Box';
import {Typography} from "@mui/material";
import {Typography, useMediaQuery, useTheme} from "@mui/material";
import SectionStyled from './SectionStyled';
import {styled} from "@mui/material/styles";
import YoutobeIcon from "../../assets/LandingPict/youtobeIcon";
import OneIconBorder from "@icons/OneIconBorder";
import TwoIcon from "./images/icons/IconNumber2";
@ -35,10 +34,13 @@ import Icon20 from "./images/icons/Group154";
import Icon21 from "./images/icons/Network";
export default function HowItWorks () {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
return(
<SectionStyled tag={'section'} bg={'#333647'} sxsect={{minHeight: '2375px'}} mwidth={'1160px'}
sxcont={{
padding: '232px 10px 0 10px',
padding: isMobile ? '603px 16px 0 16px' : '232px 10px 0 10px',
boxSizing: 'border-box'
}}
>
<Box color='#ffffff'
@ -46,7 +48,8 @@ export default function HowItWorks () {
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
marginBottom: '65px',
marginBottom: isMobile ? "10px" : '65px',
gap: isMobile ? "30px" : undefined,
}}
>
<Box
@ -62,12 +65,14 @@ export default function HowItWorks () {
justifyContent: 'space-between',
alignItems: 'center',
flexWrap: 'wrap',
gap: "17px",
flexDirection: isMobile ? "row-reverse" : undefined,
}}
>
<Box width='140px' marginRight='17px'>
<Box width='140px'>
<Typography fontSize='18px'>Видео о квизах 2 мин</Typography>
</Box>
<YoutobeIcon />
<YoutobeIcon width={isMobile ? "73px" : "120px"} />
</Box>
</Box>
<Box
@ -79,12 +84,12 @@ export default function HowItWorks () {
flexWrap: 'wrap',
alignItems: 'center',
borderRadius: '8px',
marginBottom: '107px',
marginBottom: isMobile ? "26px" : "107px",
}}
>
<Box
sx={{
width: '50%',
width: isMobile ? undefined : '50%',
padding: '20px',
minHeight: '401px',
display: 'flex',
@ -112,13 +117,31 @@ export default function HowItWorks () {
justifyContent: 'flex-start',
display: "flex",
flexDirection: 'column',
width: "453px",
gap: "20px"
width: isMobile ? "335px" : "453px",
gap: isMobile ? 0 : "20px",
marginTop: isMobile ? "10px" : 0
}}
>
<Typography variant='h6' fontSize='36px'>Начало диалога</Typography>
<Typography fontSize='18px'>Квиз, как любезный дворецкий, в нужный момент предлагает свою помощь и начинает диалог</Typography>
<Typography variant='h6' fontSize='36px'>
Начало диалога
</Typography>
<Typography fontSize='18px'>
Квиз, как любезный дворецкий, в нужный момент предлагает свою помощь и начинает диалог
</Typography>
</Box>
{isMobile &&
<Box
component={"img"}
src={Firstblock1}
sx={{
backgroundColor: '#C8DADE',
width: '302px',
height: '193px',
borderRadius: '12px',
}}
/>
}
<Box
sx={{
@ -127,22 +150,27 @@ export default function HowItWorks () {
maxWidth: '507px',
height: '50%',
justifyContent: 'end',
marginTop: isMobile ? "20px" : undefined
}}
>
<Typography variant='h6' fontSize='20px'>квиз можно использовать</Typography>
<Typography variant='h6' fontSize='20px'>
квиз можно использовать
</Typography>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
padding: '20px 20px 0 0',
padding: '20px 20px 0 0',
flexDirection: isMobile ? "column" : "row",
gap: isMobile ? "10px" : undefined
}}
>
<Box
sx={{
display: 'flex',
// width: '126px',
justifyContent: 'space-between',
justifyContent: isMobile ? "start" : 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
@ -156,7 +184,7 @@ export default function HowItWorks () {
sx={{
display: 'flex',
// width: '126px',
justifyContent: 'space-between',
justifyContent: isMobile ? "start" : 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
@ -172,7 +200,8 @@ export default function HowItWorks () {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
padding: '20px 94px 0 0',
padding: isMobile ? "10px 94px 0 0" : "20px 94px 0 0",
gap: isMobile ? "10px" : undefined
}}
>
<Box
@ -210,6 +239,7 @@ export default function HowItWorks () {
component={"img"}
src={Firstblock1}
sx={{
display: isMobile ? "none" : "block",
backgroundColor: '#C8DADE',
width: '564px',
height: '360px',
@ -226,14 +256,14 @@ export default function HowItWorks () {
display: 'flex',
alignItems: 'center',
borderRadius: '8px',
marginBottom: '107px',
marginBottom: isMobile ? "26px" : "107px",
flexWrap: 'wrap',
boxSizing: "border-box"
}}
>
<Box
sx={{
width: '50%',
width: isMobile ? undefined : '50%',
minHeight: '401px',
display: 'flex',
flexDirection: 'column',
@ -263,32 +293,45 @@ export default function HowItWorks () {
display: 'flex',
justifyContent: 'space-around',
flexDirection: 'column',
marginBottom: '90px',
gap: "20px"
marginBottom: isMobile ? '23px' : '90px',
gap: isMobile ? 0 : "20px",
marginTop: isMobile ? "7px" : undefined
}}
>
<Typography variant='h6' fontSize='calc(27px + 6 * (100vw / 1160))'>
<Typography variant='h6' fontSize='36px'>
Задаем вопросы
</Typography>
<Typography fontSize='18px' maxWidth='444px'>
<Typography fontSize='18px' sx={{maxWidth: isMobile ? "335px":"444px" }} >
Забота заключается в том, чтобы интересоваться желаниями посетителя, задавать уточняющие вопросы и помогать делать правильный выбор
</Typography>
</Box>
{isMobile &&
<Box
component={"img"}
src={Firstblock2}
sx={{
backgroundColor: '#C8DADE',
width: '302px',
height: '193px',
borderRadius: '12px',
}}
/>
}
<Box
sx={{
display: 'flex',
flexDirection: 'column',
maxWidth: '427px',
maxWidth: isMobile ? "245px" : "500px",
height: '50%',
justifyContent: 'end',
marginTop: isMobile ? "40px" : undefined
}}
>
<Typography variant='h6' fontSize='20px'>10 форматов вопроса</Typography>
<Box
sx={{
display: "flex",
// flexWrap: 'wrap',
flexWrap: 'wrap',
justifyContent: 'space-between',
marginTop: '15px',
gap: "15px"
@ -311,6 +354,7 @@ export default function HowItWorks () {
component={"img"}
src={Firstblock2}
sx={{
display: isMobile ? "none" : "block",
backgroundColor: '#C8DADE',
width: '564px',
height: '360px',
@ -326,14 +370,14 @@ export default function HowItWorks () {
display: 'flex',
alignItems: 'center',
borderRadius: '8px',
marginBottom: '107px',
marginBottom: isMobile ? "26px" : "107px",
flexWrap: 'wrap',
boxSizing: "border-box"
}}
>
<Box
sx={{
width: '50%',
width: isMobile ? undefined : '50%',
height: '100%',
padding: '20px',
gap: "10px",
@ -368,7 +412,18 @@ export default function HowItWorks () {
<Typography variant='h6' fontSize='36px' lineHeight='normal'>Показываем рекомендацию</Typography>
<Typography fontSize='18px'>На основе ответов мы подбираем наиболее подходящие товары или услуги</Typography>
</Box>
{isMobile &&
<Box
component={"img"}
src={Firstblock3}
sx={{
backgroundColor: '#C8DADE',
width: '302px',
height: '193px',
borderRadius: '12px',
}}
/>
}
<Box
sx={{
display: 'flex',
@ -382,14 +437,16 @@ export default function HowItWorks () {
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
justifyContent: isMobile ? 'start' : 'space-between',
padding: '20px 20px 0 0',
flexDirection: isMobile ? "column" : "row",
gap: isMobile ? "15px" : undefined
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
justifyContent: isMobile ? 'start' : 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
@ -402,7 +459,7 @@ export default function HowItWorks () {
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
justifyContent: isMobile ? 'start' : 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
@ -441,6 +498,7 @@ export default function HowItWorks () {
component={"img"}
src={Firstblock3}
sx={{
display: isMobile ? "none" : "block",
backgroundColor: '#C8DADE',
width: '564px',
height: '360px',
@ -457,17 +515,20 @@ export default function HowItWorks () {
display: 'flex',
alignItems: 'center',
borderRadius: '8px',
marginBottom: '126px',
marginBottom: isMobile ? "25px" : "126px",
flexWrap: 'wrap',
boxSizing: "border-box"
}}
>
<Box
sx={{
width: '50%',
width: isMobile ? undefined :'50%',
height: '100%',
padding: '20px',
boxSizing: "border-box"
boxSizing: "border-box",
gap: "20px",
display: "flex",
flexDirection: "column"
}}
>
@ -491,12 +552,24 @@ export default function HowItWorks () {
display: "flex",
flexDirection: 'column',
maxWidth: '457px',
marginTop: isMobile ? "-13px" : 0
}}
>
<Typography variant='h6' fontSize='calc(27px + 6 * (100vw / 1160))'>Узнаем контакт</Typography>
<Typography variant='h6' fontSize='36px'>Узнаем контакт</Typography>
<Typography fontSize='18px'>Только в конце диалога спрашиваем контакты. Здесь посетитель уже знает, что вы позаботились предложить ему то, что надо и с большей вероятностью оставит заявку</Typography>
</Box>
{isMobile &&
<Box
component={"img"}
src={Firstblock4}
sx={{
backgroundColor: '#C8DADE',
width: '302px',
height: '193px',
borderRadius: '12px',
}}
/>
}
<Box
sx={{
display: 'flex',
@ -504,6 +577,7 @@ export default function HowItWorks () {
maxWidth: '520px',
height: '50%',
justifyContent: 'end',
marginTop: isMobile ? "20px" : 0
}}
>
<Typography variant='h6' fontSize='20px'>что можно делать на последнем шаге</Typography>
@ -512,12 +586,14 @@ export default function HowItWorks () {
display: 'flex',
justifyContent: 'space-between',
padding: '20px 20px 0 0',
flexDirection: isMobile ? "column" : "row",
gap: isMobile ? "15px" : undefined
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
justifyContent: isMobile ? 'start' : 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
@ -530,7 +606,7 @@ export default function HowItWorks () {
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
justifyContent: isMobile ? 'start' : 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
@ -546,12 +622,14 @@ export default function HowItWorks () {
display: 'flex',
justifyContent: 'space-between',
padding: '20px 79px 0 0',
flexDirection: isMobile ? "column" : "row",
gap: isMobile ? "15px" : undefined
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
justifyContent: isMobile ? 'start' : 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
@ -564,7 +642,7 @@ export default function HowItWorks () {
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
justifyContent: isMobile ? 'start' : 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
@ -582,6 +660,7 @@ export default function HowItWorks () {
component={"img"}
src={Firstblock4}
sx={{
display: isMobile ? "none" : "block",
backgroundColor: '#C8DADE',
width: '564px',
height: '360px',

49
src/pages/Landing/HowToUse.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import Box from '@mui/material/Box';
import {Typography} from "@mui/material";
import {Typography, useMediaQuery, useTheme} from "@mui/material";
import SectionStyled from './SectionStyled';
import Link from '@mui/material/Link';
import {styled} from "@mui/material/styles";
@ -14,20 +14,20 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
// import CalendarP from './image/calendar-P.svg'
import CalendarIcon from "../../assets/LandingPict/calendarIcon";
const BoxUse = styled('div')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
justifyContent: 'center',
},
}));
const BoxButtons = styled('div')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
flexDirection: 'column',
alignItems: 'center',
height: '100px',
width: '260px'
},
}));
// const BoxUse = styled('div')(({ theme }) => ({
// [theme.breakpoints.down('md')]: {
// justifyContent: 'center',
// },
// }));
//
// const BoxButtons = styled('div')(({ theme }) => ({
// [theme.breakpoints.down('md')]: {
// flexDirection: 'column',
// alignItems: 'center',
// height: '100px',
// width: '260px'
// },
// }));
const BoxQuiz = styled('div')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
@ -121,6 +121,8 @@ function Quiz () {
}
export default function Component () {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
return (
<SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
sxsect={{minHeight: '809px', alignItems: 'flex-start'}}
@ -129,7 +131,7 @@ export default function Component () {
flexDirection: 'column',
justifyContent: 'space-between',
height: '100%',
padding: '16px 10px 50px 10px',
padding: isMobile ? "16px 16px 70px 16px" : '16px 10px 50px 10px',
}}
>
{/*<Box*/}
@ -228,7 +230,8 @@ export default function Component () {
display: "flex",
flexDirection: "column",
gap: "16px",
marginTop:'52px'
marginTop: "52px",
maxWidth: isMobile ? "273px" : undefined
}}
>
<Typography variant='h6' fontSize={'36px'} maxWidth={'420px'} lineHeight={'42.66px'}>
@ -328,10 +331,11 @@ export default function Component () {
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
padding: '22px 22px 22px 50px',
padding: isMobile ? "0 27px 22px 20px" : "22px 22px 22px 50px",
borderRadius: '12px',
marginTop: '60px',
boxSizing: "border-box"
marginTop: isMobile ? "35px" : "60px",
boxSizing: "border-box",
boxShadow: "0px 6.6501px 5.32008px 0px rgba(126, 42, 234, 0.03), 0px 12.52155px 10.01724px 0px rgba(126, 42, 234, 0.04), 0px 22.33631px 17.86905px 0px rgba(126, 42, 234, 0.04)",
}}
>
<Box
@ -353,7 +357,8 @@ export default function Component () {
marginTop: '19px',
}}
>
<Typography fontSize={'18px'} lineHeight={'21px'} color={'#4D4D4D'}>Марквиз помогает проверять гипотезы
<Typography fontSize={'18px'} lineHeight={'21px'} color={'#4D4D4D'}>
Опросник помогает проверять гипотезы
и принимать грамотные решения основанные
на данных. Создавайте опросы, собирайте обратную связь и анализируйте ответы
в удобной аналитике в личном кабинете.
@ -371,7 +376,7 @@ export default function Component () {
src={BigBlock}
sx={{
width: '100%',
height: '418px',
height: isMobile ? '228px' : '418px',
backgroundColor: '#c8dade',
borderRadius: '12px',
}}

7
src/pages/Landing/Landing.tsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import {CssBaseline, useMediaQuery, useTheme} from "@mui/material";
import Header from './HeaderLanding';
import Footer from './FooterLanding';
import Hero from './Hero';
@ -11,11 +12,15 @@ import HowToUse from './HowToUse';
import WhatTheySay from './WhatTheySay';
import StartWithTemplates from './StartWithTemplates';
import WhatTheFeatures from './WhatTheFeatures';
import FullScreenDialog from "./headerMobileLanding";
export default function Landing() {
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
return (
<>
<Header/>
<CssBaseline />
{isTablet ? <FullScreenDialog/> : <Header/> }
<Hero/>
<Counter/>
<HowItWorks/>

35
src/pages/Landing/Questions.tsx
View File

@ -4,13 +4,8 @@ import Typography from '@mui/material/Typography';
import Button from "@mui/material/Button";
import SectionStyled from './SectionStyled';
import {styled} from "@mui/material/styles";
import {useMediaQuery, useTheme} from "@mui/material";
const BoxQuestions = styled('div')(({ theme }) => ({
[theme.breakpoints.down('lg')]: {
alignItems: 'center',
width: '100%',
},
}));
const BoxSpan = styled('div')(({ theme }) => ({
[theme.breakpoints.down('lg')]: {
@ -29,6 +24,8 @@ const BoxButtons = styled('div')(({ theme }) => ({
}));
export default function Component() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
return(
<SectionStyled tag={'section'} bg={'#7E2AEA'} mwidth={'1160px'}
sxsect={{
@ -39,9 +36,9 @@ export default function Component() {
flexWrap: 'wrap',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 10px',
padding: isMobile ? '85px 16px 50px 16px' : 0,
}}>
<BoxQuestions
<Box
sx={{
display: 'flex',
flexDirection: 'column',
@ -50,13 +47,20 @@ export default function Component() {
>
<Typography variant='h1' color={'#FFFFFF'}
sx={{
fontSize: '36px',
fontSize: isMobile ? '24px' : '36px',
fontWeight: '500',
lineHeight: '43px',
}}
>
Остались вопросы?
</Typography>
{isMobile &&
<Typography color={'#FFFFFF'} fontSize={'18px'} marginTop={'20px'}>
Сервисы помогают предпринимателям, маркетологам и агентствам сделать
интернет-маркетинг прозрачным и эффективным. С нами не придется тратить
рекламный бюджет впустую и терять клиентов на сайте.
</Typography>
}
<BoxButtons
sx={{
display: 'flex',
@ -67,7 +71,7 @@ export default function Component() {
<Button variant="outlined"
sx={{
width: '180px',
marginTop: '40px',
marginTop: isMobile ? '25px' : '40px',
border: '1px solid #ffffff',
color: '#ffffff',
backgroundColor: "transparent",
@ -84,8 +88,8 @@ export default function Component() {
<Button variant="contained"
sx={{
width: '180px',
marginTop: '40px',
marginLeft: '22px',
marginTop: isMobile ? '20px' : '40px',
marginLeft: isMobile ? 0 : '22px',
backgroundColor: '#FFFFFF',
color: '#252734',
textTransform: 'none',
@ -99,7 +103,7 @@ export default function Component() {
Подробнее
</Button>
</BoxButtons>
</BoxQuestions>
</Box>
<BoxSpan
sx={{
display: 'flex',
@ -108,12 +112,15 @@ export default function Component() {
>
<Box
sx={{
display: isMobile ? "none" : "flex",
minHeight: '139px',
maxWidth: '460px',
}}
>
<Typography color={'#FFFFFF'} fontSize={'18px'}>
Сервисы помогают предпринимателям, маркетологам и агентствам сделать интернет-маркетинг прозрачным и эффективным. С нами не придется тратить рекламный бюджет впустую и терять клиентов на сайте.
Сервисы помогают предпринимателям, маркетологам и агентствам сделать
интернет-маркетинг прозрачным и эффективным. С нами не придется тратить
рекламный бюджет впустую и терять клиентов на сайте.
</Typography>
</Box>
</BoxSpan>

300
src/pages/Landing/WhatTheFeatures.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import React, {useState} from 'react';
import Box from '@mui/material/Box';
import {Typography} from "@mui/material";
import {Typography, useMediaQuery, useTheme} from "@mui/material";
import SectionStyled from './SectionStyled';
import Button from "@mui/material/Button";
// import Desktop from '../../assets/LandingPict/Desktop.png';
@ -30,6 +30,8 @@ interface Props {
}
function BoxFich(props: Props) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
return(
<Box
sx={{
@ -38,6 +40,10 @@ function BoxFich(props: Props) {
backgroundColor: '#252734',
borderRadius: '12px',
overflow: 'hidden',
display: "flex",
flexDirection: "column",
justifyContent: isMobile ? "space-between" : undefined,
height: isMobile ? "450px" : undefined
}}
>
<BoxCardHead
@ -48,7 +54,8 @@ function BoxFich(props: Props) {
minHeight: '50%',
padding: '20px',
flexWrap: 'wrap',
boxSizing: "border-box"
boxSizing: "border-box",
gap: isMobile ? "16px" : undefined
}}
>
{props.children}
@ -67,6 +74,10 @@ function BoxFich(props: Props) {
}
export default function Component () {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const [open, setOpen] = useState(false);
return (
<SectionStyled tag={'section'} bg={'#333647'} mwidth={'1160px'}
sxsect={{minHeight: '2074px',}}
@ -74,8 +85,9 @@ export default function Component () {
display: 'flex',
justifyContent: 'space-between',
minHeight: '2074px',
padding: '20px 10px 20px 10px',
padding: isMobile ? "20px 16px 40px 16px" : "30px 0",
color: '#ffffff',
flexWrap: "wrap"
}}
>
{/*левая колонка*/}
@ -83,7 +95,7 @@ export default function Component () {
sx={{
display: 'flex',
flexDirection: 'column',
gap: "120px",
gap: isMobile ? "25px" : "120px",
paddingTop: "46px"
}}
>
@ -91,7 +103,7 @@ export default function Component () {
sx={{
maxWidth: '400px',
minHeight: '84px',
marginBottom: "-55px"
marginBottom: isMobile ? 0 : "-55px"
}}>
<Typography variant='h1'
sx={{
@ -100,7 +112,7 @@ export default function Component () {
lineHeight:'43px',
}}
>
{/*Что по фичам?*/}
Что по фичам?
</Typography>
<Typography
sx={{
@ -110,7 +122,7 @@ export default function Component () {
margin: '20px 0 10px 0',
}}
>
{/*Самый функциональный конструктор квизов*/}
Самый функциональный конструктор квизов
</Typography>
</Box>
<BoxFich image={Desktop1}>
@ -131,7 +143,7 @@ export default function Component () {
fontWeight: '500',
lineHeight: '28.44px'
}}
>Landing Page с привязкой домена</Typography>
>Привязка к вашему домену</Typography>
</Box>
<Box maxWidth={'230px'}>
<Typography
@ -141,8 +153,8 @@ export default function Component () {
lineHeight: '21px',
}}
>
Создайте простой Landing Page на Marquiz и привяжите к собственному домену.
Отдельный сайт для квиза больше не нужен —
Привяжите квиз к своему брендовому домену и получайте
максимальную отдачу от каждой заявки
</Typography>
</Box>
</BoxFich>
@ -172,8 +184,8 @@ export default function Component () {
lineHeight: '21px',
}}
>
Создайте простой Landing Page на Marquiz и привяжите к собственному домену.
Отдельный сайт для квиза больше не нужен —
Внутренняя аналитика считает конверсию квиза на каждом шаге,
показывает развернутую статистику по ответам и пользователям
</Typography>
</Box>
</BoxFich>
@ -203,8 +215,8 @@ export default function Component () {
lineHeight: '21px',
}}
>
Создайте простой Landing Page на Marquiz и привяжите к собственному домену.
Отдельный сайт для квиза больше не нужен —
Самый удобный инструмент для проведения исследований аудитории ,
больше вас не сдерживают никакие ограничения.
</Typography>
</Box>
</BoxFich>
@ -234,151 +246,169 @@ export default function Component () {
lineHeight: '21px',
}}
>
Создайте простой Landing Page на Marquiz и привяжите к собственному домену.
Отдельный сайт для квиза больше не нужен —
Тест увеличит вовлеченность аудитории, покажет правильные
или неправильные ответы и все это в игровой форме
</Typography>
</Box>
</BoxFich>
</Box>
{/*правая колонка*/}
<Box
sx={{
display: 'flex',
flexDirection: 'column',
paddingTop: "106px",
gap: "113px",
alignItems: "end"
}}
>
<BoxFich image={Desktop5}>
<Box maxWidth={'227px'}>
<Typography
sx={{
color: '#7e2aea',
fontSize: '24px',
fontWeight: '500',
lineHeight: '28.44px'
}}
>02</Typography>
<Typography variant={'h6'}
<Box>
<Box
sx={{
display: open ? 'flex' : "none",
flexDirection: 'column',
paddingTop: isMobile ? "25px" : "106px",
gap: isMobile ? "25px" : "113px",
alignItems: "end"
}}
>
<BoxFich image={Desktop5}>
<Box maxWidth={'227px'}>
<Typography
sx={{
color: '#7e2aea',
fontSize: '24px',
fontWeight: '500',
lineHeight: '28.44px'
}}
>Повышение конверсии</Typography>
</Box>
<Box maxWidth={'233px'}>
<Typography
sx={{
fontSize: '18px',
fontWeight: '400',
lineHeight: '21px',
}}
>
Конверсию можно увеличить, добавив тающую скидку,
консультанта с подсказками или бонус, который пользователь получит в конце квиза
</Typography>
</Box>
</BoxFich>
<BoxFich image={Desktop6}>
<Box maxWidth={'227px'}>
<Typography
sx={{
color: '#7e2aea',
fontSize: '24px',
fontWeight: '500',
lineHeight: '28.44px'
}}>04</Typography>
<Typography variant={'h6'}
>02</Typography>
<Typography variant={'h6'}
sx={{
fontSize: '24px',
fontWeight: '500',
lineHeight: '28.44px'
}}
>Повышение конверсии</Typography>
</Box>
<Box maxWidth={'233px'}>
<Typography
sx={{
fontSize: '18px',
fontWeight: '400',
lineHeight: '21px',
}}
>
Конверсию можно увеличить, добавив тающую скидку,
консультанта с подсказками или бонус, который пользователь получит в конце квиза
</Typography>
</Box>
</BoxFich>
<BoxFich image={Desktop6}>
<Box maxWidth={'227px'}>
<Typography
sx={{
color: '#7e2aea',
fontSize: '24px',
fontWeight: '500',
lineHeight: '28.44px'
}}>04</Typography>
<Typography variant={'h6'}
sx={{
fontSize: '24px',
fontWeight: '500',
lineHeight: '28.44px'
}}
>Расширенеие настройки дизайна</Typography>
</Box>
<Box maxWidth={'230px'}>
<Typography
sx={{
fontSize: '18px',
fontWeight: '400',
lineHeight: '21px',
}}
>
Настройте цвета, шрифт и выберите формат стартовой страницы,
чтобы сделать свой квиз уникальным
</Typography>
</Box>
</BoxFich>
<BoxFich image={Desktop7}>
<Box maxWidth={'220px'}>
<Typography
sx={{
color: '#7e2aea',
fontSize: '24px',
fontWeight: '500',
lineHeight: '28.44px'
}}
>Расширенеие настройки дизайна</Typography>
</Box>
<Box maxWidth={'230px'}>
<Typography
sx={{
fontSize: '18px',
fontWeight: '400',
lineHeight: '21px',
}}
>
Конверсию можно увеличить, добавив тающую скидку,
консультанта с подсказками или бонус, который пользователь получит в конце квиза
</Typography>
</Box>
</BoxFich>
<BoxFich image={Desktop7}>
<Box maxWidth={'220px'}>
<Typography
sx={{
color: '#7e2aea',
fontSize: '24px',
fontWeight: '500',
lineHeight: '28.44px'
}}
>06</Typography>
<Typography variant={'h6'}
>06</Typography>
<Typography variant={'h6'}
sx={{
fontSize: '24px',
fontWeight: '500',
lineHeight: '28.44px'
}}
>А/Б тестирование</Typography>
</Box>
<Box maxWidth={'230px'}>
<Typography
sx={{
fontSize: '24px',
fontWeight: '500',
lineHeight: '28.44px'
fontSize: '18px',
fontWeight: '400',
lineHeight: '21px',
}}
>А/Б тестирование</Typography>
</Box>
<Box maxWidth={'230px'}>
<Typography
sx={{
fontSize: '18px',
fontWeight: '400',
lineHeight: '21px',
}}
>
Конверсию можно увеличить, добавив тающую скидку,
консультанта с подсказками или бонус, который пользователь получит в конце квиза
</Typography>
</Box>
</BoxFich>
>
Без программистов и сложных настроек - создавайте разные версии квизов
и сравнивайте их эффективность прямо внутри Опросника
</Typography>
</Box>
</BoxFich>
</Box>
<Box
sx={{
maxWidth: '458px',
maxWidth: '500px',
minHeight: '390px',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
padding: '87px 22px 0 42px',
padding: isMobile ? "40px 0 0 0" : '217px 22px 0 20px',
}}
>
<Typography variant={'h6'}
sx={{
fontSize: '24px',
fontWeight: '500',
lineHeight: '28px',
width: '60%',
}}
>70 бесплатных заявок на баланс</Typography>
<Typography
<Box
sx={{
fontSize: '18px',
fontWeight: '400',
lineHeight: '21.33px',
marginTop: '32px',
display: "flex",
flexDirection: isMobile ? "column-reverse" : "column",
gap: "47px",
alignItems: "flex-start",
}}
>Создайте простой Landing Page на Marquiz и привяжите к собственному домену. Отдельный сайт для квиза больше не нужен — </Typography>
<Button variant="outlined"
sx={{
textTransform: 'none',
color: '#ffffff',
backgroundColor: 'transparent',
fontSize: '18px',
borderRadius: '8px',
borderColor: '#ffffff',
marginTop: '72px',
}}
>Все возможности сервиса</Button>
>
<Box>
<Typography variant={'h6'}
sx={{
fontSize: '24px',
fontWeight: '500',
lineHeight: '28px',
width: '60%',
}}
>Первые 14 дней бесплатно</Typography>
<Typography
sx={{
fontSize: '18px',
fontWeight: '400',
lineHeight: '21.33px',
marginTop: '32px',
}}
>
Пробуйте, экспериментируйте, а наша отзывчивая техническая поддержка
поможет и проконсультирует в любой момент,
больше вы не останетесь 1 на 1 со своими проблемами.
</Typography>
</Box>
<Button variant="outlined"
onClick={() => setOpen((isOpened) => !isOpened)}
sx={{
textTransform: 'none',
color: '#ffffff',
backgroundColor: 'transparent',
fontSize: '18px',
borderRadius: '8px',
borderColor: '#ffffff',
}}
>Все возможности сервиса</Button>
</Box>
<Button variant="contained"
sx={{
textTransform: 'none',
@ -387,8 +417,8 @@ export default function Component () {
borderRadius: '8px',
padding: '10px 32px',
marginTop: '27px',
}}
>Создать квиз</Button>
}}>
Создать квиз</Button>
</Box>
</Box>
</SectionStyled>

248
src/pages/Landing/headerMobileLanding.tsx Normal file
View File

@ -0,0 +1,248 @@
import { useState } from "react";
import * as React from "react";
import {} from "react-router-dom";
import { useLocation, Link } from "react-router-dom";
import {
useMediaQuery,
useTheme,
Button,
Dialog,
ListItem,
AppBar,
List,
Toolbar,
IconButton,
Box,
Slide,
} from "@mui/material";
import { TransitionProps } from "@mui/material/transitions";
import SectionStyled from "./SectionStyled";
import CloseIcon from "./images/icons/CloseIcon";
import MenuIcon from "./images/icons/MenuIcon";
import Logotip from "./images/icons/QuizLogo";
// import logotipBlack from "../Icons/Logo/black_logo_PenaHab.svg";
// import logotipBlackMobile from "../Icons/Logo/black_logo_PenaHab_mobile.svg";
const buttonMenu: { path: string; title: string }[] = [
{ path: "/", title: "Меню 1" },
{ path: "/", title: "Меню 2" },
{ path: "/", title: "Меню 3" },
{ path: "/", title: "Меню 4" },
{ path: "/", title: "Меню 5" },
{ path: "/", title: "Меню 6" },
{ path: "/", title: "Меню 7" },
{ path: "/", title: "Меню 8" },
];
interface Props {
theme?: "dark" | "light";
bgColor?: string;
}
const Transition = React.forwardRef(function Transition(
props: TransitionProps & {
children: React.ReactElement;
},
ref: React.Ref<unknown>
) {
return <Slide direction={"left"} ref={ref} {...props} />;
});
const height = "80px";
export default function FullScreenDialog({
theme = "dark",
bgColor = "#F2F3F7",
}: Props) {
const [open, setOpen] = useState(false);
const location = useLocation();
const themeMUI = useTheme();
const isMobile = useMediaQuery(themeMUI.breakpoints.down("md"));
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<>
<SectionStyled
tag="header"
bg={bgColor}
mwidth={"1200px"}
sxsect={{
minHeight: isMobile? "50px" : {height},
position: "fixed",
zIndex: 11
}}
sxcont={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
svg: { color: "#000000" },
}}
>
<Box sx={{ bgcolor: "none", paddingTop: isMobile? "6px" : 0 }}>
<Logotip width={150}/>
</Box>
{!isMobile && (
<Button
// onClick={() => setIsContactFormOpen(true)}
disableRipple
sx={{
color: "black",
border: "1px solid black",
ml: "auto",
mr: "38px",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
padding: "8px 17px",
"&:hover": {
background: "rgba(126, 42, 234, 0.07)",
bgcolor: "#7E2AEA",
},
}}
>
Предрегистрация
</Button>
)}
<Button disableRipple variant="text" onClick={handleClickOpen}>
<MenuIcon />
</Button>
<Dialog
fullScreen
sx={{ width: isMobile ? "100%" : "320px", ml: "auto", height: "100%" }}
open={open}
onClose={handleClose}
TransitionComponent={Transition}
>
<AppBar
sx={{
position: "relative",
background: theme === "dark" ? "#252734" : "#F2F3F7",
boxShadow: "none",
height: isMobile ? "66px" : "100px",
}}
>
<Toolbar
sx={{
display: "flex",
justifyContent: "space-between",
svg: { color: theme === "dark" ? "#ffffff" : "#000000" },
pt: "12px",
}}
>
{isMobile && (
<Logotip width={150}/>
)}
<IconButton
sx={{ ml: "auto" }}
edge="start"
color="inherit"
onClick={handleClose}
aria-label="close"
>
<CloseIcon />
</IconButton>
</Toolbar>
</AppBar>
<List
sx={{
background: theme === "dark" ? "#252734" : "#F2F3F7",
height: "100vh",
p: "0",
}}
>
<ListItem
sx={{
pl: "40px",
flexDirection: "column",
alignItems: isMobile ? "stretch" : "end",
}}
>
{buttonMenu.map(({ path, title }) => (
<Link
key={path}
to={path}
style={{
textDecoration: "none",
height: "20px",
marginBottom: "25px",
}}
>
<Button
disableRipple
variant="text"
sx={{
color:
location.pathname === path
? "#7E2AEA"
: theme === "dark"
? "white"
: "black",
height: "20px",
textTransform: "none",
fontSize: "16px",
"&:hover": {
background: "none",
color: "#7E2AEA",
},
}}
>
{title}
</Button>
</Link>
))}
</ListItem>
{isMobile ? (
<Button
// onClick={() => setIsContactFormOpen(true)}
variant="outlined"
sx={{
position: "absolute",
bottom: 0,
mb: "60px",
width: "188px",
color: theme === "dark" ? "white" : "black",
border: "1px solid black",
ml: "40px",
mt: "180px",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
padding: "8px 17px",
}}
>
Предрегистрация
</Button>
) : (
<Box
sx={{
position: "absolute",
right: "40px",
bottom: "60px",
}}
>
<Logotip width={150}/>
</Box>
)}
</List>
</Dialog>
</SectionStyled>
<Box sx={{height: isMobile ? "50px" : {height}}} />
</>
);
}

25
src/pages/Landing/images/icons/CloseIcon.tsx Normal file
View File

@ -0,0 +1,25 @@
import { useLocation } from "react-router-dom";
import { Box } from "@mui/material";
export default function CloseIcon() {
const location = useLocation();
return (
<Box
sx={{
width: "30px",
height: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
"&:hover path": {
stroke: "#7E2AEA",
},
}}
>
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L25 25M1 25L25 1" stroke={location.pathname === "/" ? "white" : "black"} />
</svg>
</Box>
);
}

42
src/pages/Landing/images/icons/MenuIcon.tsx Normal file
View File

@ -0,0 +1,42 @@
import { Box } from "@mui/material";
import { useLocation } from "react-router-dom";
export default function MenuIcon() {
const location = useLocation();
return (
<Box
sx={{
width: "30px",
height: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
"&:hover path": {
stroke: "#7E2AEA",
},
}}
>
<svg width="27" height="18" viewBox="0 0 27 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M26 1.15002L1 1.15002"
stroke={"black"}
strokeWidth="1.5"
strokeLinecap="round"
/>
<path
d="M26 9.15002L1 9.15002"
stroke={ "black"}
strokeWidth="1.5"
strokeLinecap="round"
/>
<path
d="M26 17.15H1"
stroke={"black"}
strokeWidth="1.5"
strokeLinecap="round"
/>
</svg>
</Box>
);
}

30
src/pages/Landing/images/icons/QuizLogo.tsx Normal file
View File

@ -0,0 +1,30 @@
import { useTheme } from "@mui/material";
interface Props {
width: number;
}
export default function QuizLogo({ width }: Props) {
const theme = useTheme();
return (
<svg style={{ minWidth: width }} width={width} viewBox="0 0 149 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3258_71703)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5091 2.75764C15.4332 2.05385 11.2415 8.58037 7.34253 13.2981C3.92083 17.4383 1.37308 22.1148 1.07715 27.4802C0.762314 33.1885 1.79779 39.1334 5.68668 43.32C9.69244 47.6324 15.6929 50.3572 21.5091 49.4762C26.8423 48.6684 29.2022 42.8117 33.1728 39.1568C37.4842 35.1882 45.5165 33.3425 45.4051 27.4802C45.2935 21.609 36.8162 20.4598 32.7372 16.2397C28.5122 11.8685 27.5447 3.45678 21.5091 2.75764Z" fill="#7E2AEA"/>
<circle cx="36.626" cy="47.2429" r="3.3526" fill="#7E2AEA"/>
<circle cx="33.2733" cy="10.0479" r="1.27718" fill="#7E2AEA"/>
<path d="M53.705 26.1072C53.3326 22.4867 51.6293 19.1334 48.9253 16.6973C46.2212 14.2612 42.709 12.9158 39.0694 12.9218C38.5526 12.9221 38.0363 12.9491 37.5223 13.0028C33.9035 13.3828 30.5535 15.0893 28.1185 17.7933C25.6835 20.4973 24.3361 24.0071 24.3359 27.6458V27.6458V48.6801H30.6462V39.7405C33.1134 41.457 36.0481 42.3747 39.0536 42.3698C39.5704 42.3696 40.0867 42.3426 40.6007 42.2888C42.5237 42.0867 44.3881 41.5078 46.0874 40.5852C47.7867 39.6626 49.2876 38.4142 50.5045 36.9115C51.7213 35.4088 52.6303 33.6811 53.1794 31.8271C53.7286 29.9731 53.9072 28.0291 53.705 26.1061V26.1072ZM45.6005 32.9433C44.9074 33.8044 44.0502 34.5194 43.0788 35.0469C42.1074 35.5744 41.0409 35.9039 39.9413 36.0164C39.6464 36.047 39.3501 36.0625 39.0536 36.0627C37.1452 36.0609 35.2941 35.4104 33.8041 34.218C32.3142 33.0256 31.2738 31.362 30.8539 29.5004C30.434 27.6388 30.6594 25.6897 31.4931 23.9731C32.3269 22.2564 33.7195 20.8743 35.4423 20.0534C37.1652 19.2325 39.1159 19.0217 40.9743 19.4556C42.8327 19.8895 44.4884 20.9423 45.6696 22.4412C46.8509 23.9401 47.4875 25.796 47.4749 27.7044C47.4623 29.6127 46.8014 31.4601 45.6005 32.9433Z" fill="#151515"/>
<path d="M70.1665 12.9218C69.6497 12.922 69.1333 12.9491 68.6194 13.0028C64.8697 13.3977 61.4144 15.216 58.9656 18.083C56.5168 20.95 55.2612 24.6472 55.4575 28.4125C55.6538 32.1779 57.2872 35.7244 60.0209 38.3212C62.7545 40.9179 66.3803 42.367 70.1507 42.3698C70.6674 42.3696 71.1838 42.3426 71.6978 42.2888C74.4013 42.001 76.973 40.9725 79.1295 39.3167C81.286 37.6609 82.9436 35.442 83.9197 32.9044H76.7271L76.6976 32.9412C75.7763 34.08 74.5737 34.9585 73.2086 35.4899C71.8436 36.0212 70.3635 36.187 68.9147 35.9708C67.4659 35.7546 66.0987 35.1639 64.9483 34.2572C63.7979 33.3505 62.9041 32.1591 62.3554 30.8009H84.5466C85.0138 28.6512 84.9941 26.4241 84.489 24.2829C83.9839 22.1417 83.0061 20.1407 81.6273 18.4264C80.2485 16.7121 78.5037 15.328 76.5206 14.3756C74.5375 13.4231 72.3664 12.9264 70.1665 12.9218V12.9218ZM62.3554 24.4907C62.9298 23.0767 63.8772 21.8452 65.0964 20.9272C66.3157 20.0093 67.7612 19.4394 69.2788 19.2784C69.5737 19.2477 69.87 19.2323 70.1665 19.2321C71.8425 19.2293 73.481 19.7288 74.8705 20.6661C76.2599 21.6034 77.3367 22.9355 77.9618 24.4907H62.3554Z" fill="#151515"/>
<path d="M100.135 12.9218C97.7229 12.918 95.357 13.5812 93.2986 14.8381V12.9218H86.9883V42.3698H93.2986V26.0683C93.2986 24.2552 94.0188 22.5164 95.3008 21.2344C96.5829 19.9523 98.3216 19.2321 100.135 19.2321C101.948 19.2321 103.687 19.9523 104.969 21.2344C106.251 22.5164 106.971 24.2552 106.971 26.0683V42.3698H113.281V26.0683C113.281 22.5816 111.896 19.2378 109.431 16.7723C106.965 14.3069 103.621 12.9218 100.135 12.9218Z" fill="#151515"/>
<path d="M144.833 29.5273V12.9218H138.523V15.5511C136.056 13.834 133.121 12.9161 130.116 12.9218C129.599 12.9221 129.083 12.9491 128.569 13.0028C124.819 13.3977 121.364 15.2161 118.915 18.083C116.466 20.95 115.21 24.6472 115.407 28.4126C115.603 32.1779 117.236 35.7244 119.97 38.3212C122.704 40.918 126.329 42.3671 130.1 42.3698C130.617 42.3696 131.133 42.3426 131.647 42.2888C135.314 41.9135 138.705 40.1663 141.139 37.3973C143.03 39.9275 145.769 41.6925 148.854 42.3698V35.7545C147.657 35.2122 146.641 34.3366 145.928 33.2323C145.215 32.128 144.835 30.8418 144.833 29.5273ZM136.647 32.9412C135.954 33.8021 135.096 34.517 134.125 35.0445C133.154 35.572 132.087 35.9016 130.988 36.0143C130.693 36.0449 130.396 36.0604 130.1 36.0606C127.944 36.0605 125.87 35.2328 124.307 33.7484C122.744 32.2639 121.81 30.2359 121.698 28.0829C121.586 25.9299 122.305 23.8161 123.707 22.1778C125.108 20.5395 127.085 19.5016 129.229 19.2784C129.524 19.2477 129.82 19.2323 130.116 19.2321C131.704 19.2335 133.26 19.6845 134.603 20.5331C135.946 21.3816 137.021 22.593 137.704 24.0271C138.388 25.4613 138.651 27.0595 138.464 28.637C138.277 30.2145 137.647 31.7067 136.647 32.9412Z" fill="#151515"/>
<path d="M123.338 57.5645V54.1748C123.106 54.4753 122.816 54.7144 122.469 54.8921C122.122 55.0656 121.747 55.1523 121.345 55.1523C120.579 55.1523 119.949 54.8646 119.454 54.2891C118.87 53.6162 118.578 52.7043 118.578 51.5532C118.578 50.4699 118.851 49.6257 119.396 49.0205C119.947 48.4111 120.628 48.1064 121.44 48.1064C121.889 48.1064 122.276 48.2017 122.602 48.3921C122.932 48.5825 123.224 48.8703 123.478 49.2554V48.2588H125.122V57.5645H123.338ZM123.396 51.5469C123.396 50.8571 123.254 50.3451 122.97 50.0107C122.691 49.6722 122.34 49.5029 121.917 49.5029C121.485 49.5029 121.123 49.6743 120.831 50.0171C120.543 50.3599 120.399 50.9036 120.399 51.6484C120.399 52.389 120.539 52.9243 120.818 53.2544C121.098 53.5802 121.443 53.7432 121.853 53.7432C122.264 53.7432 122.623 53.5591 122.932 53.1909C123.241 52.8228 123.396 52.2747 123.396 51.5469ZM131.317 55V53.9907C131.072 54.3504 130.748 54.634 130.346 54.8413C129.948 55.0487 129.527 55.1523 129.083 55.1523C128.63 55.1523 128.224 55.0529 127.864 54.854C127.505 54.6551 127.244 54.3758 127.083 54.0161C126.923 53.6564 126.842 53.1592 126.842 52.5244V48.2588H128.626V51.3564C128.626 52.3044 128.658 52.8862 128.721 53.1021C128.789 53.3136 128.91 53.4829 129.083 53.6099C129.257 53.7326 129.477 53.7939 129.743 53.7939C130.048 53.7939 130.321 53.7114 130.562 53.5464C130.803 53.3771 130.968 53.1698 131.057 52.9243C131.146 52.6746 131.19 52.0674 131.19 51.1025V48.2588H132.974V55H131.317ZM134.828 47.3447V45.6943H136.611V47.3447H134.828ZM134.828 55V48.2588H136.611V55H134.828ZM137.729 55V53.6099L140.255 50.709C140.67 50.235 140.976 49.8986 141.175 49.6997C140.968 49.7124 140.695 49.7209 140.356 49.7251L137.976 49.7378V48.2588H143.549V49.522L140.972 52.4927L140.064 53.4766C140.56 53.4469 140.866 53.4321 140.985 53.4321H143.746V55H137.729Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_3258_71703">
<rect width="149" height="57.6774" fill="white"/>
</clipPath>
</defs>
</svg>
);
}

17
src/pages/Landing/images/icons/logo_PenaHab.svg Normal file
View File

@ -0,0 +1,17 @@
<svg width="149" height="58" viewBox="0 0 149 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3258_71703)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5091 2.75764C15.4332 2.05385 11.2415 8.58037 7.34253 13.2981C3.92083 17.4383 1.37308 22.1148 1.07715 27.4802C0.762314 33.1885 1.79779 39.1334 5.68668 43.32C9.69244 47.6324 15.6929 50.3572 21.5091 49.4762C26.8423 48.6684 29.2022 42.8117 33.1728 39.1568C37.4842 35.1882 45.5165 33.3425 45.4051 27.4802C45.2935 21.609 36.8162 20.4598 32.7372 16.2397C28.5122 11.8685 27.5447 3.45678 21.5091 2.75764Z" fill="#7E2AEA"/>
<circle cx="36.626" cy="47.2429" r="3.3526" fill="#7E2AEA"/>
<circle cx="33.2733" cy="10.0479" r="1.27718" fill="#7E2AEA"/>
<path d="M53.705 26.1072C53.3326 22.4867 51.6293 19.1334 48.9253 16.6973C46.2212 14.2612 42.709 12.9158 39.0694 12.9218C38.5526 12.9221 38.0363 12.9491 37.5223 13.0028C33.9035 13.3828 30.5535 15.0893 28.1185 17.7933C25.6835 20.4973 24.3361 24.0071 24.3359 27.6458V27.6458V48.6801H30.6462V39.7405C33.1134 41.457 36.0481 42.3747 39.0536 42.3698C39.5704 42.3696 40.0867 42.3426 40.6007 42.2888C42.5237 42.0867 44.3881 41.5078 46.0874 40.5852C47.7867 39.6626 49.2876 38.4142 50.5045 36.9115C51.7213 35.4088 52.6303 33.6811 53.1794 31.8271C53.7286 29.9731 53.9072 28.0291 53.705 26.1061V26.1072ZM45.6005 32.9433C44.9074 33.8044 44.0502 34.5194 43.0788 35.0469C42.1074 35.5744 41.0409 35.9039 39.9413 36.0164C39.6464 36.047 39.3501 36.0625 39.0536 36.0627C37.1452 36.0609 35.2941 35.4104 33.8041 34.218C32.3142 33.0256 31.2738 31.362 30.8539 29.5004C30.434 27.6388 30.6594 25.6897 31.4931 23.9731C32.3269 22.2564 33.7195 20.8743 35.4423 20.0534C37.1652 19.2325 39.1159 19.0217 40.9743 19.4556C42.8327 19.8895 44.4884 20.9423 45.6696 22.4412C46.8509 23.9401 47.4875 25.796 47.4749 27.7044C47.4623 29.6127 46.8014 31.4601 45.6005 32.9433Z" fill="#151515"/>
<path d="M70.1665 12.9218C69.6497 12.922 69.1333 12.9491 68.6194 13.0028C64.8697 13.3977 61.4144 15.216 58.9656 18.083C56.5168 20.95 55.2612 24.6472 55.4575 28.4125C55.6538 32.1779 57.2872 35.7244 60.0209 38.3212C62.7545 40.9179 66.3803 42.367 70.1507 42.3698C70.6674 42.3696 71.1838 42.3426 71.6978 42.2888C74.4013 42.001 76.973 40.9725 79.1295 39.3167C81.286 37.6609 82.9436 35.442 83.9197 32.9044H76.7271L76.6976 32.9412C75.7763 34.08 74.5737 34.9585 73.2086 35.4899C71.8436 36.0212 70.3635 36.187 68.9147 35.9708C67.4659 35.7546 66.0987 35.1639 64.9483 34.2572C63.7979 33.3505 62.9041 32.1591 62.3554 30.8009H84.5466C85.0138 28.6512 84.9941 26.4241 84.489 24.2829C83.9839 22.1417 83.0061 20.1407 81.6273 18.4264C80.2485 16.7121 78.5037 15.328 76.5206 14.3756C74.5375 13.4231 72.3664 12.9264 70.1665 12.9218V12.9218ZM62.3554 24.4907C62.9298 23.0767 63.8772 21.8452 65.0964 20.9272C66.3157 20.0093 67.7612 19.4394 69.2788 19.2784C69.5737 19.2477 69.87 19.2323 70.1665 19.2321C71.8425 19.2293 73.481 19.7288 74.8705 20.6661C76.2599 21.6034 77.3367 22.9355 77.9618 24.4907H62.3554Z" fill="#151515"/>
<path d="M100.135 12.9218C97.7229 12.918 95.357 13.5812 93.2986 14.8381V12.9218H86.9883V42.3698H93.2986V26.0683C93.2986 24.2552 94.0188 22.5164 95.3008 21.2344C96.5829 19.9523 98.3216 19.2321 100.135 19.2321C101.948 19.2321 103.687 19.9523 104.969 21.2344C106.251 22.5164 106.971 24.2552 106.971 26.0683V42.3698H113.281V26.0683C113.281 22.5816 111.896 19.2378 109.431 16.7723C106.965 14.3069 103.621 12.9218 100.135 12.9218Z" fill="#151515"/>
<path d="M144.833 29.5273V12.9218H138.523V15.5511C136.056 13.834 133.121 12.9161 130.116 12.9218C129.599 12.9221 129.083 12.9491 128.569 13.0028C124.819 13.3977 121.364 15.2161 118.915 18.083C116.466 20.95 115.21 24.6472 115.407 28.4126C115.603 32.1779 117.236 35.7244 119.97 38.3212C122.704 40.918 126.329 42.3671 130.1 42.3698C130.617 42.3696 131.133 42.3426 131.647 42.2888C135.314 41.9135 138.705 40.1663 141.139 37.3973C143.03 39.9275 145.769 41.6925 148.854 42.3698V35.7545C147.657 35.2122 146.641 34.3366 145.928 33.2323C145.215 32.128 144.835 30.8418 144.833 29.5273ZM136.647 32.9412C135.954 33.8021 135.096 34.517 134.125 35.0445C133.154 35.572 132.087 35.9016 130.988 36.0143C130.693 36.0449 130.396 36.0604 130.1 36.0606C127.944 36.0605 125.87 35.2328 124.307 33.7484C122.744 32.2639 121.81 30.2359 121.698 28.0829C121.586 25.9299 122.305 23.8161 123.707 22.1778C125.108 20.5395 127.085 19.5016 129.229 19.2784C129.524 19.2477 129.82 19.2323 130.116 19.2321C131.704 19.2335 133.26 19.6845 134.603 20.5331C135.946 21.3816 137.021 22.593 137.704 24.0271C138.388 25.4613 138.651 27.0595 138.464 28.637C138.277 30.2145 137.647 31.7067 136.647 32.9412Z" fill="#151515"/>
<path d="M123.338 57.5645V54.1748C123.106 54.4753 122.816 54.7144 122.469 54.8921C122.122 55.0656 121.747 55.1523 121.345 55.1523C120.579 55.1523 119.949 54.8646 119.454 54.2891C118.87 53.6162 118.578 52.7043 118.578 51.5532C118.578 50.4699 118.851 49.6257 119.396 49.0205C119.947 48.4111 120.628 48.1064 121.44 48.1064C121.889 48.1064 122.276 48.2017 122.602 48.3921C122.932 48.5825 123.224 48.8703 123.478 49.2554V48.2588H125.122V57.5645H123.338ZM123.396 51.5469C123.396 50.8571 123.254 50.3451 122.97 50.0107C122.691 49.6722 122.34 49.5029 121.917 49.5029C121.485 49.5029 121.123 49.6743 120.831 50.0171C120.543 50.3599 120.399 50.9036 120.399 51.6484C120.399 52.389 120.539 52.9243 120.818 53.2544C121.098 53.5802 121.443 53.7432 121.853 53.7432C122.264 53.7432 122.623 53.5591 122.932 53.1909C123.241 52.8228 123.396 52.2747 123.396 51.5469ZM131.317 55V53.9907C131.072 54.3504 130.748 54.634 130.346 54.8413C129.948 55.0487 129.527 55.1523 129.083 55.1523C128.63 55.1523 128.224 55.0529 127.864 54.854C127.505 54.6551 127.244 54.3758 127.083 54.0161C126.923 53.6564 126.842 53.1592 126.842 52.5244V48.2588H128.626V51.3564C128.626 52.3044 128.658 52.8862 128.721 53.1021C128.789 53.3136 128.91 53.4829 129.083 53.6099C129.257 53.7326 129.477 53.7939 129.743 53.7939C130.048 53.7939 130.321 53.7114 130.562 53.5464C130.803 53.3771 130.968 53.1698 131.057 52.9243C131.146 52.6746 131.19 52.0674 131.19 51.1025V48.2588H132.974V55H131.317ZM134.828 47.3447V45.6943H136.611V47.3447H134.828ZM134.828 55V48.2588H136.611V55H134.828ZM137.729 55V53.6099L140.255 50.709C140.67 50.235 140.976 49.8986 141.175 49.6997C140.968 49.7124 140.695 49.7209 140.356 49.7251L137.976 49.7378V48.2588H143.549V49.522L140.972 52.4927L140.064 53.4766C140.56 53.4469 140.866 53.4321 140.985 53.4321H143.746V55H137.729Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_3258_71703">
<rect width="149" height="57.6774" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB