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-07 10:09:00 +03:00
parent a739bf37f2
commit 6eb8632050
16 changed files with 430 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,9 @@ import Box from '@mui/material/Box';
import {Typography} from "@mui/material";
import SectionStyled from './SectionStyled';
import {styled} from "@mui/material/styles";
import Icon1 from "./images/icons/Handshake";
import Icon2 from "./images/icons/UserCircle";
import Icon3 from "./images/icons/DoneIcon";
const BoxPluses = styled('div')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
@ -70,7 +73,7 @@ export default function Component () {
marginBottom: '10px',
}}
>
<Square/>
<Icon1/>
<Typography fontSize={'18px'} lineHeight={'22.33px'}>
Человек ощущает заботу и склоняется к выбору вашей компании</Typography>
</BoxCard>
@ -84,7 +87,7 @@ export default function Component () {
marginBottom: '10px',
}}
>
<Square/>
<Icon2/>
<Typography fontSize={'18px'} lineHeight={'22.33px'} paddingBottom={'18px'}>
Получаете заинтересованного, квалифицированного клиента</Typography>
</BoxCard>
@ -98,7 +101,7 @@ export default function Component () {
marginBottom: '10px',
}}
>
<Square/>
<Icon3/>
<Typography fontSize={'18px'} lineHeight={'22.33px'} paddingBottom={'18px'}>
Увеличиваете качество цифрового общения и конверсию в продажи</Typography>
</BoxCard>

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

@ -59,7 +59,7 @@ export default function Component() {
borderRadius: '8px',
padding: '8px 17px',
}}
>Личный кабинет</Button>
>Предрегистрация</Button>
</SectionStyled>
)
}

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

@ -5,14 +5,16 @@ import SectionStyled from './SectionStyled';
import {styled} from "@mui/material/styles";
import YoutobeIcon from "../../assets/LandingPict/youtobeIcon";
import OneIconBorder from "@icons/OneIconBorder";
import CalendarIcon from "../../assets/LandingPict/calendarIcon";
import TwoIcon from "./images/icons/IconNumber2";
import ThreeIcon from "./images/icons/IconNumber3";
import FourIcon from "./images/icons/IconNumber4";
import Firstblock1 from "./images/firstblock1.png";
import Firstblock2 from "./images/firstblock2.png";
import Firstblock3 from "./images/firstblock3.png";
import Firstblock4 from "./images/firstblock4.png";
import Icon1 from "./images/icons/Group127";
import Icon2 from "./images/icons/Group128";
import Icon3 from "./images/icons/Group129";
import Icon1 from "./images/icons/vkIcon";
import Icon2 from "./images/icons/clipIcon";
import Icon3 from "./images/icons/tiktokIcon";
import Icon4 from "./images/icons/Group133";
import Icon5 from "./images/icons/Group134";
import Icon6 from "./images/icons/Group135";
@ -30,7 +32,7 @@ import Icon17 from "./images/icons/Group151";
import Icon18 from "./images/icons/Group152";
import Icon19 from "./images/icons/Group153";
import Icon20 from "./images/icons/Group154";
import Icon21 from "./images/icons/Group22";
import Icon21 from "./images/icons/Network";
export default function HowItWorks () {
return(
@ -122,7 +124,7 @@ export default function HowItWorks () {
sx={{
display: 'flex',
flexDirection: 'column',
maxWidth: '427px',
maxWidth: '507px',
height: '50%',
justifyContent: 'end',
}}
@ -139,11 +141,12 @@ export default function HowItWorks () {
<Box
sx={{
display: 'flex',
width: '126px',
// width: '126px',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon21/>
@ -152,11 +155,12 @@ export default function HowItWorks () {
<Box
sx={{
display: 'flex',
width: '126px',
// width: '126px',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon2/>
@ -168,17 +172,18 @@ export default function HowItWorks () {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
padding: '20px 20px 0 0',
padding: '20px 94px 0 0',
}}
>
<Box
sx={{
display: 'flex',
width: '126px',
// width: '126px',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon1/>
@ -187,11 +192,12 @@ export default function HowItWorks () {
<Box
sx={{
display: 'flex',
width: '126px',
// width: '126px',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon3/>
@ -248,7 +254,7 @@ export default function HowItWorks () {
background: "#EEE4FC"
}}
>
<OneIconBorder color={"#7E2AEA"}/>
<TwoIcon/>
</Box>
<Box
@ -282,18 +288,22 @@ export default function HowItWorks () {
<Box
sx={{
display: "flex",
flexWrap: 'wrap',
// flexWrap: 'wrap',
justifyContent: 'space-between',
width: '74%',
marginTop: '15px',
gap: "15px"
}}
>
<CalendarIcon/>
<CalendarIcon/>
<CalendarIcon/>
<CalendarIcon/>
<CalendarIcon/>
<CalendarIcon/>
<Icon4/>
<Icon5/>
<Icon6/>
<Icon7/>
<Icon8/>
<Icon9/>
<Icon10/>
<Icon11/>
<Icon12/>
<Icon13/>
</Box>
</Box>
</Box>
@ -343,7 +353,7 @@ export default function HowItWorks () {
background: "#EEE4FC"
}}
>
<OneIconBorder color={"#7E2AEA"}/>
<ThreeIcon/>
</Box>
<Box
sx={{
@ -363,7 +373,7 @@ export default function HowItWorks () {
sx={{
display: 'flex',
flexDirection: 'column',
maxWidth: '427px',
maxWidth: '497px',
minHeight: '50%',
justifyContent: 'end',
}}
@ -379,11 +389,11 @@ export default function HowItWorks () {
<Box
sx={{
display: 'flex',
width: '126px',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon14/>
@ -392,11 +402,11 @@ export default function HowItWorks () {
<Box
sx={{
display: 'flex',
width: '126px',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon15/>
@ -413,11 +423,11 @@ export default function HowItWorks () {
<Box
sx={{
display: 'flex',
width: '126px',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon16/>
@ -472,7 +482,7 @@ export default function HowItWorks () {
background: "#EEE4FC",
}}
>
<OneIconBorder color={"#7E2AEA"}/>
<FourIcon/>
</Box>
<Box
sx={{
@ -491,7 +501,7 @@ export default function HowItWorks () {
sx={{
display: 'flex',
flexDirection: 'column',
maxWidth: '427px',
maxWidth: '520px',
height: '50%',
justifyContent: 'end',
}}
@ -507,11 +517,11 @@ export default function HowItWorks () {
<Box
sx={{
display: 'flex',
width: '126px',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon17/>
@ -520,32 +530,32 @@ export default function HowItWorks () {
<Box
sx={{
display: 'flex',
width: '126px',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon18/>
<Typography fontSize='18px'> воронки и чат боты</Typography>
<Typography fontSize='18px'> воронки и чат-боты</Typography>
</Box>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
padding: '20px 20px 0 0',
padding: '20px 79px 0 0',
}}
>
<Box
sx={{
display: 'flex',
width: '126px',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon19/>
@ -554,11 +564,11 @@ export default function HowItWorks () {
<Box
sx={{
display: 'flex',
width: '126px',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon20/>

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

@ -2,15 +2,16 @@ import React from 'react';
import Box from '@mui/material/Box';
import {Typography} from "@mui/material";
import SectionStyled from './SectionStyled';
import Link from '@mui/material/Link';
import {styled} from "@mui/material/styles";
import Notebook from "../../assets/LandingPict/notebook";
import BigBlock from "./images/bigblock.png";
import Button from "@mui/material/Button";
// import Note from './image/note.png'
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import Link from '@mui/material/Link';
// import CalendarW from './image/calendar-W.svg'
// import CalendarP from './image/calendar-P.svg'
import {styled} from "@mui/material/styles";
import Notebook from "../../assets/LandingPict/notebook";
import CalendarIcon from "../../assets/LandingPict/calendarIcon";
const BoxUse = styled('div')(({ theme }) => ({
@ -122,7 +123,7 @@ function Quiz () {
export default function Component () {
return (
<SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
sxsect={{minHeight: '1620px', alignItems: 'flex-start'}}
sxsect={{minHeight: '809px', alignItems: 'flex-start'}}
sxcont={{
display: 'flex',
flexDirection: 'column',
@ -131,89 +132,89 @@ export default function Component () {
padding: '16px 10px 50px 10px',
}}
>
<Box
sx={{
height: '50%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-around',
marginTop: '34px',
width:'100%',
}}
>
<BoxUse
sx={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
marginTop: '20px',
}}
>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
gap: '20px'
{/*<Box*/}
{/* sx={{*/}
{/* height: '50%',*/}
{/* display: 'flex',*/}
{/* flexDirection: 'column',*/}
{/* justifyContent: 'space-around',*/}
{/* marginTop: '34px',*/}
{/* width:'100%',*/}
{/* }}*/}
{/*>*/}
{/* <BoxUse*/}
{/* sx={{*/}
{/* display: 'flex',*/}
{/* flexWrap: 'wrap',*/}
{/* justifyContent: 'space-between',*/}
{/* marginTop: '20px',*/}
{/* }}*/}
{/* >*/}
{/* <Box*/}
{/* sx={{*/}
{/* display: 'flex',*/}
{/* flexDirection: 'column',*/}
{/* gap: '20px'*/}
}}
>
<Typography variant='h6' fontSize={'36px'}>Как используют квиз</Typography>
<Typography marginBottom={'10px'} fontSize={'18px'}>В крупном и малом бизнесе</Typography>
</Box>
<BoxButtons
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexWrap: 'wrap',
marginBottom: '40px',
maxWidth: '357px',
width: '100%',
}}
>
<Button variant='outlined'
sx={{
color: '#000000',
borderColor: '#000000',
}}
>
Посмотреть все кейсы
</Button>
<Box>
<Button variant='contained'
sx={{
height: '44px',
width: '44px',
borderRadius: '50%',
minWidth: '44px',
marginRight: '10px',
}}
><ArrowBackIcon/></Button>
<Button variant='contained'
sx={{
height: '44px',
width: '44px',
borderRadius: '50%',
minWidth: '44px',
}}
><ArrowForwardIcon/></Button>
</Box>
</BoxButtons>
</BoxUse>
<BoxUse
sx={{
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
minHeight: '530px',
marginTop: '6px',
}}
>
<Quiz/>
<Quiz/>
<Quiz/>
</BoxUse>
</Box>
{/* }}*/}
{/* >*/}
{/* <Typography variant='h6' fontSize={'36px'}>Как используют квиз</Typography>*/}
{/* <Typography marginBottom={'10px'} fontSize={'18px'}>В крупном и малом бизнесе</Typography>*/}
{/* </Box>*/}
{/* <BoxButtons*/}
{/* sx={{*/}
{/* display: 'flex',*/}
{/* justifyContent: 'space-between',*/}
{/* alignItems: 'center',*/}
{/* flexWrap: 'wrap',*/}
{/* marginBottom: '40px',*/}
{/* maxWidth: '357px',*/}
{/* width: '100%',*/}
{/* }}*/}
{/* >*/}
{/* <Button variant='outlined'*/}
{/* sx={{*/}
{/* color: '#000000',*/}
{/* borderColor: '#000000',*/}
{/* }}*/}
{/* >*/}
{/* Посмотреть все кейсы*/}
{/* </Button>*/}
{/* <Box>*/}
{/* <Button variant='contained'*/}
{/* sx={{*/}
{/* height: '44px',*/}
{/* width: '44px',*/}
{/* borderRadius: '50%',*/}
{/* minWidth: '44px',*/}
{/* marginRight: '10px',*/}
{/* }}*/}
{/* ><ArrowBackIcon/></Button>*/}
{/* <Button variant='contained'*/}
{/* sx={{*/}
{/* height: '44px',*/}
{/* width: '44px',*/}
{/* borderRadius: '50%',*/}
{/* minWidth: '44px',*/}
{/* }}*/}
{/* ><ArrowForwardIcon/></Button>*/}
{/* </Box>*/}
{/* </BoxButtons>*/}
{/* </BoxUse>*/}
{/* <BoxUse*/}
{/* sx={{*/}
{/* display: 'flex',*/}
{/* justifyContent: 'space-between',*/}
{/* flexWrap: 'wrap',*/}
{/* minHeight: '530px',*/}
{/* marginTop: '6px',*/}
{/* }}*/}
{/* >*/}
{/* <Quiz/>*/}
{/* <Quiz/>*/}
{/* <Quiz/>*/}
{/* </BoxUse>*/}
{/*</Box>*/}
<Box
sx={{
height: '50%',
@ -238,87 +239,87 @@ export default function Component () {
Изящное решение исследовательских и бизнес-задач
</Typography>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
width: '100%',
flexWrap: 'wrap',
marginTop: '60px',
}}
>
<Button
sx={{
width: '275px',
height: '66px',
borderRadius: '12px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-around',
paddingRight: '77px',
textTransform: 'none',
backgroundColor: '#7e2aea',
color: '#ffffff',
}}
>
<CalendarIcon/>
<Typography>Исследования</Typography>
</Button>
<Button
sx={{
width: '275px',
height: '66px',
backgroundColor: '#ffffff',
borderRadius: '12px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-around',
paddingRight: '77px',
textTransform: 'none',
color: '#4D4D4D',
}}
//variant='template'
>
<CalendarIcon/>
<Typography>Сегментация</Typography>
</Button>
<Button
sx={{
width: '275px',
height: '66px',
backgroundColor: '#ffffff',
borderRadius: '12px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-around',
paddingRight: '77px',
textTransform: 'none',
color: '#4D4D4D',
}}
//variant='template'
>
<CalendarIcon/>
<Typography>Тестирование</Typography>
</Button>
<Button
//variant='template'
sx={{
width: '275px',
height: '66px',
backgroundColor: '#ffffff',
borderRadius: '12px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-around',
paddingRight: '77px',
textTransform: 'none',
color: '#4D4D4D',
}}
>
<CalendarIcon/>
<Typography>E-commerce</Typography>
</Button>
</Box>
{/*<Box*/}
{/* sx={{*/}
{/* display: 'flex',*/}
{/* justifyContent: 'space-between',*/}
{/* width: '100%',*/}
{/* flexWrap: 'wrap',*/}
{/* marginTop: '60px',*/}
{/* }}*/}
{/*>*/}
{/* <Button*/}
{/* sx={{*/}
{/* width: '275px',*/}
{/* height: '66px',*/}
{/* borderRadius: '12px',*/}
{/* display: 'flex',*/}
{/* alignItems: 'center',*/}
{/* justifyContent: 'space-around',*/}
{/* paddingRight: '77px',*/}
{/* textTransform: 'none',*/}
{/* backgroundColor: '#7e2aea',*/}
{/* color: '#ffffff',*/}
{/* }}*/}
{/* >*/}
{/* <CalendarIcon/>*/}
{/* <Typography>Исследования</Typography>*/}
{/* </Button>*/}
{/* <Button*/}
{/* sx={{*/}
{/* width: '275px',*/}
{/* height: '66px',*/}
{/* backgroundColor: '#ffffff',*/}
{/* borderRadius: '12px',*/}
{/* display: 'flex',*/}
{/* alignItems: 'center',*/}
{/* justifyContent: 'space-around',*/}
{/* paddingRight: '77px',*/}
{/* textTransform: 'none',*/}
{/* color: '#4D4D4D',*/}
{/* }}*/}
{/* //variant='template'*/}
{/* >*/}
{/* <CalendarIcon/>*/}
{/* <Typography>Сегментация</Typography>*/}
{/* </Button>*/}
{/* <Button*/}
{/* sx={{*/}
{/* width: '275px',*/}
{/* height: '66px',*/}
{/* backgroundColor: '#ffffff',*/}
{/* borderRadius: '12px',*/}
{/* display: 'flex',*/}
{/* alignItems: 'center',*/}
{/* justifyContent: 'space-around',*/}
{/* paddingRight: '77px',*/}
{/* textTransform: 'none',*/}
{/* color: '#4D4D4D',*/}
{/* }}*/}
{/* //variant='template'*/}
{/* >*/}
{/* <CalendarIcon/>*/}
{/* <Typography>Тестирование</Typography>*/}
{/* </Button>*/}
{/* <Button*/}
{/* //variant='template'*/}
{/* sx={{*/}
{/* width: '275px',*/}
{/* height: '66px',*/}
{/* backgroundColor: '#ffffff',*/}
{/* borderRadius: '12px',*/}
{/* display: 'flex',*/}
{/* alignItems: 'center',*/}
{/* justifyContent: 'space-around',*/}
{/* paddingRight: '77px',*/}
{/* textTransform: 'none',*/}
{/* color: '#4D4D4D',*/}
{/* }}*/}
{/* >*/}
{/* <CalendarIcon/>*/}
{/* <Typography>E-commerce</Typography>*/}
{/* </Button>*/}
{/*</Box>*/}
<Box
sx={{
width: '100%',
@ -366,13 +367,15 @@ export default function Component () {
}}
>
<Box
component={"img"}
src={BigBlock}
sx={{
width: '100%',
height: '418px',
backgroundColor: '#c8dade',
borderRadius: '12px',
}}
> </Box>
/>
</Box>
</Box>
</Box>

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

@ -21,10 +21,10 @@ export default function Landing() {
<HowItWorks/>
<BusinessPluses/>
<HowToUse/>
<WhatTheySay/>
<StartWithTemplates/>
{/*<WhatTheySay/>*/}
{/*<StartWithTemplates/>*/}
<WhatTheFeatures/>
<Blog/>
{/*<Blog/>*/}
<Questions/>
<Footer />
</>

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

@ -3,7 +3,14 @@ import Box from '@mui/material/Box';
import {Typography} from "@mui/material";
import SectionStyled from './SectionStyled';
import Button from "@mui/material/Button";
import Desktop from '../../assets/LandingPict/Desktop.png';
// import Desktop from '../../assets/LandingPict/Desktop.png';
import Desktop1 from './images/Frame 1171274552.png';
import Desktop2 from './images/Frame 1171274552-1.png';
import Desktop3 from './images/Frame 1171274552-2.png';
import Desktop4 from './images/Frame 1171274552-3.png';
import Desktop5 from './images/Frame 1171274552-4.png';
import Desktop6 from './images/Frame 1171274552-5.png';
import Desktop7 from './images/Frame 1171274552-6.png';
import {styled} from "@mui/material/styles";
//
// const BoxCard = styled('div')(({ theme }) => ({
@ -19,6 +26,7 @@ const BoxCardHead = styled('div')(({ theme }) => ({
}));
interface Props {
children: React.ReactNode;
image: string;
}
function BoxFich(props: Props) {
@ -52,7 +60,7 @@ function BoxFich(props: Props) {
alignItems: 'end',
}}
>
<img src={Desktop} width={'96%'}/>
<img src={props.image} width={'96%'}/>
</Box>
</Box>
)
@ -92,7 +100,7 @@ export default function Component () {
lineHeight:'43px',
}}
>
Что по фичам?
{/*Что по фичам?*/}
</Typography>
<Typography
sx={{
@ -102,10 +110,10 @@ export default function Component () {
margin: '20px 0 10px 0',
}}
>
Самый функциональный конструктор квизов
{/*Самый функциональный конструктор квизов*/}
</Typography>
</Box>
<BoxFich>
<BoxFich image={Desktop1}>
<Box maxWidth={'174px'}>
<Typography
sx={{
@ -138,7 +146,7 @@ export default function Component () {
</Typography>
</Box>
</BoxFich>
<BoxFich>
<BoxFich image={Desktop2}>
<Box maxWidth={'227px'}>
<Typography
sx={{
@ -169,7 +177,7 @@ export default function Component () {
</Typography>
</Box>
</BoxFich>
<BoxFich>
<BoxFich image={Desktop3}>
<Box maxWidth={'227px'}>
<Typography
sx={{
@ -200,7 +208,7 @@ export default function Component () {
</Typography>
</Box>
</BoxFich>
<BoxFich>
<BoxFich image={Desktop4}>
<Box maxWidth={'226px'}>
<Typography
sx={{
@ -242,7 +250,7 @@ export default function Component () {
alignItems: "end"
}}
>
<BoxFich>
<BoxFich image={Desktop5}>
<Box maxWidth={'227px'}>
<Typography
sx={{
@ -273,7 +281,7 @@ export default function Component () {
</Typography>
</Box>
</BoxFich>
<BoxFich>
<BoxFich image={Desktop6}>
<Box maxWidth={'227px'}>
<Typography
sx={{
@ -303,7 +311,7 @@ export default function Component () {
</Typography>
</Box>
</BoxFich>
<BoxFich>
<BoxFich image={Desktop7}>
<Box maxWidth={'220px'}>
<Typography
sx={{

34
src/pages/Landing/images/icons/DoneIcon.tsx Normal file
View File

File diff suppressed because one or more lines are too long

35
src/pages/Landing/images/icons/Handshake.tsx Normal file
View File

@ -0,0 +1,35 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({color}:Props) {
return (
<Box
sx={{
height: "59px",
width: "59px",
display: "flex",
borderRadius: "6px",
background: "#5A1EA8",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Handshake">
<path id="Vector" d="M36.6691 18.5555L32.9063 20.4293L28.0312 11.1059L31.8398 9.20158C32.1229 9.05731 32.4515 9.03079 32.754 9.12782C33.0565 9.22485 33.3084 9.43756 33.4547 9.71955L37.2023 16.8949C37.2783 17.0386 37.3248 17.196 37.3391 17.3578C37.3534 17.5197 37.3352 17.6828 37.2855 17.8375C37.2358 17.9922 37.1557 18.1355 37.0498 18.2588C36.944 18.3821 36.8146 18.4829 36.6691 18.5555V18.5555Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" d="M6.093 20.2769L2.33011 18.3878C2.18523 18.3168 2.0561 18.2174 1.9504 18.0955C1.84471 17.9736 1.76461 17.8317 1.71487 17.6782C1.66513 17.5247 1.64676 17.3628 1.66085 17.202C1.67494 17.0413 1.72121 16.885 1.79691 16.7425L5.54457 9.56714C5.69117 9.28536 5.94199 9.07194 6.24362 8.97234C6.54525 8.87275 6.87384 8.89485 7.15941 9.03394L10.968 10.9382L6.093 20.2769Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_3" d="M32.9062 20.4292L30.4688 23.2933L24.8625 28.8995C24.7097 29.0424 24.5246 29.1461 24.3229 29.2018C24.1213 29.2576 23.9092 29.2636 23.7047 29.2194L14.8687 27.0104C14.7073 26.9655 14.5569 26.8877 14.427 26.7819L6.09375 20.2769" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_4" d="M30.4692 23.2935L23.7661 18.4185L21.8161 19.881C20.9712 20.5115 19.9453 20.8522 18.8911 20.8522C17.8369 20.8522 16.8109 20.5115 15.9661 19.881L15.1434 19.2564C15.0043 19.1506 14.8892 19.0165 14.8058 18.8629C14.7224 18.7094 14.6726 18.5398 14.6596 18.3656C14.6467 18.1913 14.6709 18.0163 14.7306 17.852C14.7904 17.6878 14.8844 17.5382 15.0063 17.413L20.9782 11.4564C21.0904 11.3447 21.2234 11.2563 21.3698 11.1962C21.5162 11.1361 21.673 11.1054 21.8313 11.106H28.0317" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_5" d="M11.0586 10.9383L18.8738 8.65318C19.1515 8.57354 19.4485 8.59514 19.7117 8.71412L24.9828 11.1059" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_6" d="M17.0625 32.434L12.477 31.2762C12.2901 31.234 12.1171 31.1448 11.9742 31.0172L8.53125 28.0312" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
</Box>
)
};

27
src/pages/Landing/images/icons/IconNumber2.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function OneIconBorder({color}:Props) {
return (
<Box
sx={{
height: "36px",
width: "36px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="36" height="36" rx="6" fill="#EEE4FC"/>
<path d="M18 27C22.9706 27 27 22.9706 27 18C27 13.0294 22.9706 9 18 9C13.0294 9 9 13.0294 9 18C9 22.9706 13.0294 27 18 27Z" stroke="#7E2AEA" stroke-width="1.5" stroke-miterlimit="10"/>
<path d="M16.2696 15.3945C16.4382 14.9964 16.7392 14.6687 17.1216 14.4669C17.504 14.2651 17.9444 14.2015 18.3683 14.2871C18.7921 14.3726 19.1734 14.6018 19.4477 14.9361C19.7219 15.2704 19.8723 15.6892 19.8734 16.1216C19.8751 16.4951 19.7633 16.8604 19.5529 17.1691V17.1691L16.1211 21.75H19.8734" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

28
src/pages/Landing/images/icons/IconNumber3.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function OneIconBorder({color}:Props) {
return (
<Box
sx={{
height: "36px",
width: "36px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="36" height="36" rx="6" fill="#EEE4FC"/>
<path d="M18 27C22.9706 27 27 22.9706 27 18C27 13.0294 22.9706 9 18 9C13.0294 9 9 13.0294 9 18C9 22.9706 13.0294 27 18 27Z" stroke="#7E2AEA" stroke-width="1.5" stroke-miterlimit="10"/>
<path d="M16.125 14.25H19.875L17.6875 17.375C18.0472 17.375 18.4014 17.4638 18.7186 17.6334C19.0359 17.8029 19.3064 18.0482 19.5062 18.3473C19.7061 18.6464 19.8291 18.9901 19.8643 19.3481C19.8996 19.7061 19.846 20.0673 19.7083 20.3996C19.5707 20.732 19.3532 21.0252 19.0751 21.2535C18.797 21.4817 18.467 21.6378 18.1141 21.708C17.7613 21.7781 17.3967 21.7602 17.0524 21.6558C16.7082 21.5514 16.395 21.3637 16.1406 21.1094" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

29
src/pages/Landing/images/icons/IconNumber4.tsx Normal file
View File

@ -0,0 +1,29 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function OneIconBorder({color}:Props) {
return (
<Box
sx={{
height: "36px",
width: "36px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="36" height="36" rx="6" fill="#EEE4FC"/>
<path d="M18 27C22.9706 27 27 22.9706 27 18C27 13.0294 22.9706 9 18 9C13.0294 9 9 13.0294 9 18C9 22.9706 13.0294 27 18 27Z" stroke="#7E2AEA" stroke-width="1.5" stroke-miterlimit="10"/>
<path d="M17.6251 14.0779L15.75 19.3906H19.5002" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.5 16.8904V21.8906" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

0
src/pages/Landing/images/icons/Group22.tsx → src/pages/Landing/images/icons/Network.tsx
View File

34
src/pages/Landing/images/icons/UserCircle.tsx Normal file
View File

@ -0,0 +1,34 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({color}:Props) {
return (
<Box
sx={{
height: "59px",
width: "59px",
display: "flex",
borderRadius: "6px",
background: "#5A1EA8",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="UserCircle">
<path id="Vector" d="M19.5 24.375C22.8655 24.375 25.5938 21.6467 25.5938 18.2812C25.5938 14.9158 22.8655 12.1875 19.5 12.1875C16.1345 12.1875 13.4062 14.9158 13.4062 18.2812C13.4062 21.6467 16.1345 24.375 19.5 24.375Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
<path id="Vector_2" d="M9.71875 30.3773C10.6357 28.5711 12.0349 27.0542 13.7613 25.9946C15.4876 24.9349 17.4736 24.374 19.4992 24.374C21.5248 24.374 23.5109 24.9349 25.2372 25.9946C26.9635 27.0542 28.3627 28.5711 29.2797 30.3773" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_3" d="M34.0184 17.7481C34.0923 18.3291 34.1279 18.9143 34.125 19.5C34.125 22.3926 33.2673 25.2202 31.6602 27.6252C30.0532 30.0303 27.7691 31.9048 25.0968 33.0118C22.4244 34.1187 19.4838 34.4083 16.6468 33.844C13.8098 33.2797 11.2039 31.8868 9.15857 29.8415C7.11323 27.7961 5.72033 25.1902 5.15602 22.3532C4.59171 19.5162 4.88134 16.5756 5.98827 13.9033C7.0952 11.2309 8.96972 8.94679 11.3748 7.33978C13.7799 5.73276 16.6075 4.87502 19.5 4.87502C19.9527 4.87216 20.4052 4.8925 20.8559 4.93596" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_4" d="M30.6413 6.18713C30.9363 6.06408 31.2532 6.00067 31.5735 6.00064C31.8934 6.00091 32.2109 6.06444 32.5056 6.18747C32.8003 6.31051 33.067 6.49057 33.29 6.71703C33.7454 7.18125 34 7.80218 34 8.44844C34 9.09471 33.7454 9.71563 33.29 10.1799L30.2104 13.2843C29.8192 13.6787 29.1817 13.6787 28.7905 13.2843L25.7099 10.179C25.2546 9.71475 25 9.09382 25 8.44755C25 7.80129 25.2546 7.18036 25.7099 6.71614C25.9332 6.48951 26.2003 6.30938 26.4953 6.18638C26.7902 6.06337 27.1072 6 27.4274 6C27.7476 6 28.0646 6.06337 28.3596 6.18638C28.6546 6.30938 28.9216 6.48951 29.1449 6.71614L29.5004 7.07611L29.856 6.71703C30.0793 6.49035 30.3463 6.31017 30.6413 6.18713Z" fill="white"/>
</g>
</svg>
</Box>
)
};

0
src/pages/Landing/images/icons/Group128.tsx → src/pages/Landing/images/icons/clipIcon.tsx
View File

0
src/pages/Landing/images/icons/Group129.tsx → src/pages/Landing/images/icons/tiktokIcon.tsx
View File

0
src/pages/Landing/images/icons/Group127.tsx → src/pages/Landing/images/icons/vkIcon.tsx
View File