updated the login buttons
This commit is contained in:
ArtChaos189
parent
203c8d5f93
commit
9defa6abce
@ -1,34 +1,45 @@
|
||||
import React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import SectionStyled from './SectionStyled';
|
||||
import React from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import SectionStyled from "./SectionStyled";
|
||||
import NavMenuItem from "@ui_kit/Header/NavMenuItem";
|
||||
import QuizLogo from "./images/icons/QuizLogo";
|
||||
import { useMediaQuery, useTheme } from "@mui/material";
|
||||
import { setIsContactFormOpen } from "../../stores/contactForm";
|
||||
import { useUserStore } from "@root/user";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const buttonMenu = ['Меню 1', 'Меню 2', 'Меню 3', 'Меню 4', 'Меню 5', 'Меню 1', 'Меню 2']
|
||||
const buttonMenu = ["Меню 1", "Меню 2", "Меню 3", "Меню 4", "Меню 5", "Меню 1", "Меню 2"];
|
||||
|
||||
export default function Component() {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
||||
const [select, setSelect] = React.useState(0)
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const [select, setSelect] = React.useState(0);
|
||||
const userId = useUserStore((state) => state.userId);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const onClick = () => (userId ? navigate("/list") : setIsContactFormOpen(true));
|
||||
|
||||
return (
|
||||
<SectionStyled tag={'header'} bg={'#F2F3F7'} mwidth={'1160px'}
|
||||
<SectionStyled
|
||||
tag={"header"}
|
||||
bg={"#F2F3F7"}
|
||||
mwidth={"1160px"}
|
||||
sxsect={{
|
||||
minHeight: '80px',
|
||||
borderBottom: '1px solid #E3E3E3',
|
||||
minHeight: "80px",
|
||||
borderBottom: "1px solid #E3E3E3",
|
||||
position: "relative",
|
||||
padding: isMobile ? "0 16px" : isTablet ? "0 40px" : 0,
|
||||
zIndex: 3
|
||||
zIndex: 3,
|
||||
}}
|
||||
sxcont={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 0
|
||||
}}>
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<QuizLogo width={isMobile ? 100 : 150} />
|
||||
{/*<Box*/}
|
||||
{/* sx={{*/}
|
||||
@ -54,19 +65,22 @@ export default function Component() {
|
||||
{/* />*/}
|
||||
{/* ))}*/}
|
||||
{/*</Box>*/}
|
||||
<Button variant="outlined"
|
||||
onClick={() => setIsContactFormOpen(true)}
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={onClick}
|
||||
sx={{
|
||||
color: 'black',
|
||||
border: '1px solid black',
|
||||
textTransform: 'none',
|
||||
fontWeight: '400',
|
||||
fontSize: '18px',
|
||||
lineHeight: '24px',
|
||||
borderRadius: '8px',
|
||||
padding: '8px 17px',
|
||||
color: "black",
|
||||
border: "1px solid black",
|
||||
textTransform: "none",
|
||||
fontWeight: "400",
|
||||
fontSize: "18px",
|
||||
lineHeight: "24px",
|
||||
borderRadius: "8px",
|
||||
padding: "8px 17px",
|
||||
}}
|
||||
>Предрегистрация</Button>
|
||||
>
|
||||
{userId ? "Войти" : " Регистрация / Войти"}
|
||||
</Button>
|
||||
</SectionStyled>
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -1,59 +1,66 @@
|
||||
import React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import {Typography, useMediaQuery, useTheme} from "@mui/material";
|
||||
import abstraction from '../../assets/Quiz-main.png'
|
||||
import SectionStyled from './SectionStyled';
|
||||
import { Link, redirect } from 'react-router-dom';
|
||||
import {setIsContactFormOpen} from "@root/contactForm";
|
||||
import React from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import { Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import abstraction from "../../assets/Quiz-main.png";
|
||||
import SectionStyled from "./SectionStyled";
|
||||
import { Link, redirect, useNavigate } from "react-router-dom";
|
||||
import { setIsContactFormOpen } from "@root/contactForm";
|
||||
import { useUserStore } from "@root/user";
|
||||
|
||||
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'}
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const userId = useUserStore((state) => state.userId);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const tryItForFreeonClick = () => (userId ? navigate("/list") : setIsContactFormOpen(true));
|
||||
|
||||
return (
|
||||
<SectionStyled
|
||||
tag={"section"}
|
||||
bg={"#f2f3f7"}
|
||||
mwidth={"1160px"}
|
||||
sxsect={{
|
||||
height: isMobile ? '702px' : (isTablet ? '986px' : '660px'),
|
||||
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',
|
||||
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",
|
||||
}}
|
||||
>
|
||||
<Typography variant='h2'>
|
||||
Pena Quiz
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: isTablet ? '715px' : '420px',
|
||||
minHeight: '64px',
|
||||
}}>
|
||||
<Typography variant='body1'>
|
||||
Помогаем посетителю оставить заявку. <br style={{display: isTablet ? 'flex' : "none"}}/> Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети
|
||||
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"
|
||||
onClick={() => setIsContactFormOpen(true)}
|
||||
>
|
||||
<Button variant="contained" onClick={tryItForFreeonClick}>
|
||||
Попробуйте бесплатно
|
||||
|
||||
</Button>
|
||||
{/*</Link>*/}
|
||||
|
||||
@ -62,14 +69,14 @@ export default function Component() {
|
||||
src={abstraction}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: isMobile ? undefined : (isTablet? "138px" : "-291px"),
|
||||
bottom: isMobile ? undefined : isTablet ? "138px" : "-291px",
|
||||
maxWidth: isMobile ? "403px" : "810px",
|
||||
width: isMobile ? "100%" : undefined,
|
||||
left: isMobile ? "-20px" : (isTablet? "54px" : "401px"),
|
||||
top: isMobile ? "-345px" : undefined
|
||||
left: isMobile ? "-20px" : isTablet ? "54px" : "401px",
|
||||
top: isMobile ? "-345px" : undefined,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</SectionStyled>
|
||||
)
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user