diff --git a/src/assets/LandingPict/youtobeIcon.tsx b/src/assets/LandingPict/youtobeIcon.tsx index 01694bf5..4419cb3d 100644 --- a/src/assets/LandingPict/youtobeIcon.tsx +++ b/src/assets/LandingPict/youtobeIcon.tsx @@ -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 ( ({ [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( - - ) -} export default function Component () { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); return( - - В чем плюсы для бизнеса + + В чем плюсы для бизнеса ({ - [theme.breakpoints.down('md')]: { - height: 'auto', - }, -})); export default function Counter() { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); return( - - 14 дней + 14 дней бесплатно, полный функционал - 10 мин + 5 мин - 482 800 + 482 800 - 76 + 760 готовых шаблонов для разных ниш - + ) } \ No newline at end of file diff --git a/src/pages/Landing/FooterLanding.tsx b/src/pages/Landing/FooterLanding.tsx index bfb92823..8173efb4 100644 --- a/src/pages/Landing/FooterLanding.tsx +++ b/src/pages/Landing/FooterLanding.tsx @@ -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( - - - - - + + - + ) } \ No newline at end of file diff --git a/src/pages/Landing/HeaderLanding.tsx b/src/pages/Landing/HeaderLanding.tsx index b6fa7497..60187cb2 100644 --- a/src/pages/Landing/HeaderLanding.tsx +++ b/src/pages/Landing/HeaderLanding.tsx @@ -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 ( - + - Опросник + Pena Quiz - Помогаем посетителю оставить заявку. Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети. + Помогаем посетителю оставить заявку. Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети @@ -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 }} /> diff --git a/src/pages/Landing/HowItWorks.tsx b/src/pages/Landing/HowItWorks.tsx index 659ee0c6..46b760c8 100644 --- a/src/pages/Landing/HowItWorks.tsx +++ b/src/pages/Landing/HowItWorks.tsx @@ -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( - + Видео о квизах 2 мин - + - Начало диалога - Квиз, как любезный дворецкий, в нужный момент предлагает свою помощь и начинает диалог + + Начало диалога + + + Квиз, как любезный дворецкий, в нужный момент предлагает свою помощь и начинает диалог + + {isMobile && + + } - квиз можно использовать + + квиз можно использовать + - + Задаем вопросы - + Забота заключается в том, чтобы интересоваться желаниями посетителя, задавать уточняющие вопросы и помогать делать правильный выбор - + {isMobile && + + } 10 форматов вопроса Показываем рекомендацию На основе ответов мы подбираем наиболее подходящие товары или услуги - + {isMobile && + + } @@ -491,12 +552,24 @@ export default function HowItWorks () { display: "flex", flexDirection: 'column', maxWidth: '457px', + marginTop: isMobile ? "-13px" : 0 }} > - Узнаем контакт + Узнаем контакт Только в конце диалога спрашиваем контакты. Здесь посетитель уже знает, что вы позаботились предложить ему то, что надо и с большей вероятностью оставит заявку - + {isMobile && + + } что можно делать на последнем шаге @@ -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 }} > ({ - [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 ( {/* @@ -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)", }} > - Марквиз помогает проверять гипотезы + + Опросник помогает проверять гипотезы и принимать грамотные решения основанные на данных. Создавайте опросы, собирайте обратную связь и анализируйте ответы в удобной аналитике в личном кабинете. @@ -371,7 +376,7 @@ export default function Component () { src={BigBlock} sx={{ width: '100%', - height: '418px', + height: isMobile ? '228px' : '418px', backgroundColor: '#c8dade', borderRadius: '12px', }} diff --git a/src/pages/Landing/Landing.tsx b/src/pages/Landing/Landing.tsx index 03de49a7..399d6337 100644 --- a/src/pages/Landing/Landing.tsx +++ b/src/pages/Landing/Landing.tsx @@ -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 ( <> -
+ + {isTablet ? :
} diff --git a/src/pages/Landing/Questions.tsx b/src/pages/Landing/Questions.tsx index 1e5c0022..ab079324 100644 --- a/src/pages/Landing/Questions.tsx +++ b/src/pages/Landing/Questions.tsx @@ -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( - Остались вопросы? + {isMobile && + + Сервисы помогают предпринимателям, маркетологам и агентствам сделать + интернет-маркетинг прозрачным и эффективным. С нами не придется тратить + рекламный бюджет впустую и терять клиентов на сайте. + + } - + - Сервисы помогают предпринимателям, маркетологам и агентствам сделать интернет-маркетинг прозрачным и эффективным. С нами не придется тратить рекламный бюджет впустую и терять клиентов на сайте. + Сервисы помогают предпринимателям, маркетологам и агентствам сделать + интернет-маркетинг прозрачным и эффективным. С нами не придется тратить + рекламный бюджет впустую и терять клиентов на сайте. diff --git a/src/pages/Landing/WhatTheFeatures.tsx b/src/pages/Landing/WhatTheFeatures.tsx index 9b70ddd5..b785589c 100644 --- a/src/pages/Landing/WhatTheFeatures.tsx +++ b/src/pages/Landing/WhatTheFeatures.tsx @@ -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( {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 ( {/*левая колонка*/} @@ -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" }}> - {/*Что по фичам?*/} + Что по фичам? - {/*Самый функциональный конструктор квизов*/} + Самый функциональный конструктор квизов @@ -131,7 +143,7 @@ export default function Component () { fontWeight: '500', lineHeight: '28.44px' }} - >Landing Page с привязкой домена + >Привязка к вашему домену - Создайте простой Landing Page на Marquiz и привяжите к собственному домену. - Отдельный сайт для квиза больше не нужен — + Привяжите квиз к своему брендовому домену и получайте + максимальную отдачу от каждой заявки @@ -172,8 +184,8 @@ export default function Component () { lineHeight: '21px', }} > - Создайте простой Landing Page на Marquiz и привяжите к собственному домену. - Отдельный сайт для квиза больше не нужен — + Внутренняя аналитика считает конверсию квиза на каждом шаге, + показывает развернутую статистику по ответам и пользователям @@ -203,8 +215,8 @@ export default function Component () { lineHeight: '21px', }} > - Создайте простой Landing Page на Marquiz и привяжите к собственному домену. - Отдельный сайт для квиза больше не нужен — + Самый удобный инструмент для проведения исследований аудитории , + больше вас не сдерживают никакие ограничения. @@ -234,151 +246,169 @@ export default function Component () { lineHeight: '21px', }} > - Создайте простой Landing Page на Marquiz и привяжите к собственному домену. - Отдельный сайт для квиза больше не нужен — + Тест увеличит вовлеченность аудитории, покажет правильные + или неправильные ответы и все это в игровой форме {/*правая колонка*/} - - - - 02 - + + + + Повышение конверсии - - - - Конверсию можно увеличить, добавив тающую скидку, - консультанта с подсказками или бонус, который пользователь получит в конце квиза - - - - - - 04 - 02 + Повышение конверсии + + + + Конверсию можно увеличить, добавив тающую скидку, + консультанта с подсказками или бонус, который пользователь получит в конце квиза + + + + + + 04 + Расширенеие настройки дизайна + + + + Настройте цвета, шрифт и выберите формат стартовой страницы, + чтобы сделать свой квиз уникальным + + + + + + Расширенеие настройки дизайна - - - - Конверсию можно увеличить, добавив тающую скидку, - консультанта с подсказками или бонус, который пользователь получит в конце квиза - - - - - - 06 - 06 + А/Б тестирование + + + А/Б тестирование - - - - Конверсию можно увеличить, добавив тающую скидку, - консультанта с подсказками или бонус, который пользователь получит в конце квиза - - - + > + Без программистов и сложных настроек - создавайте разные версии квизов + и сравнивайте их эффективность прямо внутри Опросника + + + + - 70 бесплатных заявок на баланс - Создайте простой Landing Page на Marquiz и привяжите к собственному домену. Отдельный сайт для квиза больше не нужен — - + > + + Первые 14 дней бесплатно + + Пробуйте, экспериментируйте, а наша отзывчивая техническая поддержка + поможет и проконсультирует в любой момент, + больше вы не останетесь 1 на 1 со своими проблемами. + + + + + }}> + Создать квиз diff --git a/src/pages/Landing/headerMobileLanding.tsx b/src/pages/Landing/headerMobileLanding.tsx new file mode 100644 index 00000000..1202ac11 --- /dev/null +++ b/src/pages/Landing/headerMobileLanding.tsx @@ -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 +) { + return ; +}); + +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 ( + <> + + + + + {!isMobile && ( + + )} + + + + + + {isMobile && ( + + )} + + + + + + + + {buttonMenu.map(({ path, title }) => ( + + + + ))} + + {isMobile ? ( + + ) : ( + + + + )} + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/CloseIcon.tsx b/src/pages/Landing/images/icons/CloseIcon.tsx new file mode 100644 index 00000000..da650bb7 --- /dev/null +++ b/src/pages/Landing/images/icons/CloseIcon.tsx @@ -0,0 +1,25 @@ +import { useLocation } from "react-router-dom"; +import { Box } from "@mui/material"; + +export default function CloseIcon() { + const location = useLocation(); + return ( + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/MenuIcon.tsx b/src/pages/Landing/images/icons/MenuIcon.tsx new file mode 100644 index 00000000..5f45adab --- /dev/null +++ b/src/pages/Landing/images/icons/MenuIcon.tsx @@ -0,0 +1,42 @@ +import { Box } from "@mui/material"; +import { useLocation } from "react-router-dom"; + +export default function MenuIcon() { + const location = useLocation(); + return ( + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/QuizLogo.tsx b/src/pages/Landing/images/icons/QuizLogo.tsx new file mode 100644 index 00000000..459a5e89 --- /dev/null +++ b/src/pages/Landing/images/icons/QuizLogo.tsx @@ -0,0 +1,30 @@ +import { useTheme } from "@mui/material"; + + +interface Props { + width: number; +} + +export default function QuizLogo({ width }: Props) { + const theme = useTheme(); + + return ( + + + + + + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/pages/Landing/images/icons/logo_PenaHab.svg b/src/pages/Landing/images/icons/logo_PenaHab.svg new file mode 100644 index 00000000..92192db4 --- /dev/null +++ b/src/pages/Landing/images/icons/logo_PenaHab.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + +