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 && (
+
+ )}
+
+
+
+
+
+ >
+ );
+}
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 @@
+