Merge branch 'adapter' into quiz-preview

This commit is contained in:
Nastya 2023-10-15 20:56:24 +03:00
commit eb316888be
75 changed files with 35774 additions and 169 deletions

31358
package-lock.json generated Executable file

File diff suppressed because it is too large Load Diff

@ -18,6 +18,7 @@
"@types/react": "^18.0.0",
"@types/react-dnd": "^3.0.2",
"@types/react-dom": "^18.0.0",
"axios": "^1.5.1",
"dayjs": "^1.11.10",
"emoji-mart": "^5.5.2",
"file-saver": "^2.0.5",
@ -39,6 +40,7 @@
"typescript": "^4.4.2",
"use-debounce": "^9.0.4",
"web-vitals": "^2.1.0",
"yup": "^1.3.2",
"zustand": "^4.3.8"
},
"scripts": {
@ -51,7 +53,17 @@
"extends": [
"react-app",
"react-app/jest"
]
],
"rules": {
"quotes": [
"warn",
"double",
{
"avoidEscape": true,
"allowTemplateLiterals": true
}
]
}
},
"browserslist": {
"production": [

17
src/api/contactForm.ts Normal file

@ -0,0 +1,17 @@
import axios from "axios";
export function sendContactFormRequest(body: {
contact: string;
whoami: string;
}) {
return axios("https://squiz.pena.digital/feedback/callme", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
data: body,
});
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@ -0,0 +1,35 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function CalendarIcon({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">
<g id="Group 22">
<rect id="Border" width="36" height="36" rx="6" fill="#7E2AEA"/>
<g id="Group 21">
<path id="Vector" d="M25.5 9.75H10.5C10.0858 9.75 9.75 10.0858 9.75 10.5V25.5C9.75 25.9142 10.0858 26.25 10.5 26.25H25.5C25.9142 26.25 26.25 25.9142 26.25 25.5V10.5C26.25 10.0858 25.9142 9.75 25.5 9.75Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" d="M22.5 8.25V11.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_3" d="M13.5 8.25V11.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_4" d="M9.75 14.25H26.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_5" d="M14.625 18H17.25L15.75 19.875C15.9969 19.8746 16.24 19.9351 16.4579 20.0512C16.6757 20.1672 16.8616 20.3353 16.999 20.5404C17.1363 20.7455 17.2209 20.9814 17.2453 21.2271C17.2696 21.4727 17.2329 21.7206 17.1385 21.9487C17.0441 22.1768 16.8949 22.378 16.704 22.5346C16.5132 22.6912 16.2866 22.7983 16.0445 22.8463C15.8024 22.8944 15.5521 22.8819 15.3159 22.81C15.0798 22.7382 14.865 22.6091 14.6906 22.4344" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_6" d="M19.5 19.125L21 18V22.875" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
</svg>
</Box>
);
}

@ -0,0 +1,192 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function Notebook({color}:Props) {
return (
<Box
sx={{
height: "171px",
width: "279px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="279" height="171" viewBox="0 0 279 171" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M123.717 1.39258V3.94582L126.959 3.94582C127.348 3.94582 127.663 4.26075 127.663 4.64924V6.96329C127.663 7.60426 128.182 8.12386 128.823 8.12386L150.642 8.12386C151.283 8.12386 151.802 7.60426 151.802 6.96329V4.64924C151.802 4.26075 152.117 3.94582 152.506 3.94582L155.284 3.94582V1.39258L123.717 1.39258Z" fill="black"/>
<circle cx="139.409" cy="4.55077" r="1.06935" transform="rotate(-180 139.409 4.55077)" fill="url(#paint0_linear_3_590)"/>
<circle cx="139.385" cy="4.52608" r="0.580283" fill="url(#paint1_radial_3_590)"/>
<g filter="url(#filter0_f_3_590)">
<path d="M139.383 4.17799C139.291 4.17799 139.202 4.2269 139.137 4.31396C139.072 4.40102 139.035 4.5191 139.035 4.64222C139.035 4.76534 139.072 4.88342 139.137 4.97048C139.202 5.05754 139.291 5.10645 139.383 5.10645L139.383 4.64222L139.383 4.17799Z" fill="url(#paint2_linear_3_590)"/>
</g>
<g filter="url(#filter1_f_3_590)">
<circle cx="139.384" cy="4.29403" r="0.116057" fill="#50326D"/>
</g>
<g filter="url(#filter2_f_3_590)">
<path d="M139.501 5.10643C139.624 5.10643 139.742 5.05752 139.829 4.97046C139.916 4.8834 139.965 4.76533 139.965 4.6422C139.965 4.51908 139.916 4.40101 139.829 4.31395C139.742 4.22689 139.624 4.17798 139.501 4.17798L139.501 4.6422L139.501 5.10643Z" fill="url(#paint3_linear_3_590)"/>
</g>
<g filter="url(#filter3_f_3_590)">
<ellipse cx="139.5" cy="4.75815" rx="0.232113" ry="0.116057" fill="url(#paint4_linear_3_590)"/>
</g>
<path d="M117.914 159.462H139.501V162.711H121.164C119.369 162.711 117.914 161.257 117.914 159.462Z" fill="url(#paint5_radial_3_590)"/>
<path d="M117.914 159.462H139.501V162.711H121.164C119.369 162.711 117.914 161.257 117.914 159.462Z" fill="url(#paint6_linear_3_590)"/>
<path d="M161.088 159.462H139.501V162.712H157.838C159.633 162.712 161.088 161.257 161.088 159.462Z" fill="url(#paint7_radial_3_590)"/>
<path d="M161.088 159.462H139.501V162.712H157.838C159.633 162.712 161.088 161.257 161.088 159.462Z" fill="url(#paint8_linear_3_590)"/>
<path d="M249.523 169.443L248.826 168.747H264.958L264.262 169.443H249.523Z" fill="url(#paint9_linear_3_590)"/>
<rect x="249.521" y="169.443" width="14.8552" height="0.232113" rx="0.116057" fill="#2A2A2A"/>
<path d="M249.754 169.675H264.145L263.813 170.165C263.725 170.294 263.58 170.371 263.424 170.371H250.474C250.319 170.371 250.173 170.294 250.086 170.165L249.754 169.675Z" fill="url(#paint10_linear_3_590)"/>
<path d="M14.6241 169.443L13.9277 168.747H30.0596L29.3633 169.443H14.6241Z" fill="url(#paint11_linear_3_590)"/>
<rect x="14.625" y="169.443" width="14.6231" height="0.232113" rx="0.116057" fill="#2A2A2A"/>
<path d="M14.8555 169.675H29.0144L28.6894 170.162C28.6024 170.293 28.456 170.371 28.2992 170.371H15.5707C15.4139 170.371 15.2675 170.293 15.1805 170.162L14.8555 169.675Z" fill="url(#paint12_linear_3_590)"/>
<path d="M21.9376 6.79972C21.9376 3.23858 24.8245 0.35171 28.3857 0.35171L250.613 0.35171C254.174 0.35171 257.061 3.23858 257.061 6.79973V159.11L21.9376 159.11L21.9376 6.79972Z" stroke="url(#paint13_linear_3_590)" stroke-width="0.70342"/>
<path d="M22.633 6.79261C22.633 3.61996 25.2049 1.048 28.3776 1.048L250.619 1.048C253.792 1.048 256.364 3.61994 256.364 6.7926V159.11L22.633 159.11L22.633 6.79261Z" fill="black" stroke="#2D2E31" stroke-width="0.70342"/>
<rect x="22.9805" y="153.891" width="233.042" height="5.57072" fill="url(#paint14_linear_3_590)"/>
<g filter="url(#filter4_iii_3_590)">
<path d="M0 159.462L279 159.462V164.057C279 166.647 276.9 168.746 274.311 168.746L4.68946 168.746C2.09954 168.746 0 166.647 0 164.057L0 159.462Z" fill="#D1D2D4"/>
<path d="M0 159.462L279 159.462V164.057C279 166.647 276.9 168.746 274.311 168.746L4.68946 168.746C2.09954 168.746 0 166.647 0 164.057L0 159.462Z" fill="url(#paint15_linear_3_590)"/>
</g>
<mask id="mask0_3_590"
// style="mask-type:alpha"
maskUnits="userSpaceOnUse" x="26" y="10" width="227" height="144">
<rect x="26.0039" y="10.0527" width="226.184" height="143.839" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_3_590)">
<rect x="26.0039" y="10.0525" width="226.184" height="143.839" fill="#F0F1F6"/>
</g>
<defs>
<filter id="filter0_f_3_590" x="138.709" y="3.85232" width="0.998971" height="1.57978" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="0.162829" result="effect1_foregroundBlur_3_590"/>
</filter>
<filter id="filter1_f_3_590" x="138.125" y="3.0356" width="2.51719" height="2.51694" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="0.571191" result="effect1_foregroundBlur_3_590"/>
</filter>
<filter id="filter2_f_3_590" x="139.174" y="3.85232" width="1.11616" height="1.57978" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="0.162829" result="effect1_foregroundBlur_3_590"/>
</filter>
<filter id="filter3_f_3_590" x="138.887" y="4.2613" width="1.22643" height="0.993766" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="0.190397" result="effect1_foregroundBlur_3_590"/>
</filter>
<filter id="filter4_iii_3_590" x="0" y="156.648" width="279" height="12.0981" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-3.98605"/>
<feGaussianBlur stdDeviation="1.40684"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.502066 0 0 0 0 0.502766 0 0 0 0 0.504167 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3_590"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.40684"/>
<feGaussianBlur stdDeviation="0.586183"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.900764 0 0 0 0 0.904549 0 0 0 0 0.908333 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_3_590" result="effect2_innerShadow_3_590"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-0.234473"/>
<feGaussianBlur stdDeviation="0.35171"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.616667 0 0 0 0 0.616667 0 0 0 0 0.616667 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect2_innerShadow_3_590" result="effect3_innerShadow_3_590"/>
</filter>
<linearGradient id="paint0_linear_3_590" x1="138.529" y1="3.98464" x2="140.227" y2="4.99109" gradientUnits="userSpaceOnUse">
<stop stop-color="#222222"/>
<stop offset="1" stop-color="#0B0B0B"/>
</linearGradient>
<radialGradient id="paint1_radial_3_590" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(139.385 4.47333) rotate(37.875) scale(0.601477 0.605921)">
<stop stop-color="#152457"/>
<stop offset="1"/>
</radialGradient>
<linearGradient id="paint2_linear_3_590" x1="139.122" y1="4.28115" x2="139.417" y2="5.07777" gradientUnits="userSpaceOnUse">
<stop stop-color="#20569B"/>
<stop offset="0.677083" stop-color="#061127"/>
</linearGradient>
<linearGradient id="paint3_linear_3_590" x1="139.849" y1="5.00327" x2="139.615" y2="4.16228" gradientUnits="userSpaceOnUse">
<stop stop-color="#3D6495"/>
<stop offset="0.71875" stop-color="#061127"/>
</linearGradient>
<linearGradient id="paint4_linear_3_590" x1="139.809" y1="4.83552" x2="139.7" y2="4.56205" gradientUnits="userSpaceOnUse">
<stop stop-color="#3291AF"/>
<stop offset="1" stop-color="#3291AF" stop-opacity="0"/>
</linearGradient>
<radialGradient id="paint5_radial_3_590" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(128.707 159.462) rotate(90) scale(4.52621 30.0669)">
<stop stop-color="white"/>
<stop offset="1" stop-color="#D9D9D9"/>
</radialGradient>
<linearGradient id="paint6_linear_3_590" x1="118.32" y1="161.551" x2="122.556" y2="159.462" gradientUnits="userSpaceOnUse">
<stop offset="0.00209588" stop-color="#242424"/>
<stop offset="0.34936" stop-color="#EFEFEF"/>
</linearGradient>
<radialGradient id="paint7_radial_3_590" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(150.295 159.462) rotate(90) scale(4.52621 30.0669)">
<stop stop-color="white"/>
<stop offset="1" stop-color="#D9D9D9"/>
</radialGradient>
<linearGradient id="paint8_linear_3_590" x1="160.682" y1="161.551" x2="156.446" y2="159.462" gradientUnits="userSpaceOnUse">
<stop offset="0.00209588" stop-color="#242424"/>
<stop offset="0.34936" stop-color="#EFEFEF"/>
</linearGradient>
<linearGradient id="paint9_linear_3_590" x1="248.826" y1="168.863" x2="264.842" y2="168.863" gradientUnits="userSpaceOnUse">
<stop stop-color="#D1D2D4"/>
<stop offset="0.063237" stop-color="#818181"/>
<stop offset="0.507008" stop-color="#D0D0D0"/>
<stop offset="0.864583" stop-color="#818181"/>
<stop offset="1" stop-color="#D1D2D4"/>
</linearGradient>
<linearGradient id="paint10_linear_3_590" x1="249.99" y1="169.907" x2="264.145" y2="169.907" gradientUnits="userSpaceOnUse">
<stop stop-color="#4D4D4D"/>
<stop offset="0.156699" stop-color="#292929"/>
<stop offset="0.501829" stop-color="#6A6A6A"/>
<stop offset="0.884758" stop-color="#2E2D2D"/>
<stop offset="1" stop-color="#4D4D4D"/>
</linearGradient>
<linearGradient id="paint11_linear_3_590" x1="13.9277" y1="168.863" x2="29.9435" y2="168.863" gradientUnits="userSpaceOnUse">
<stop stop-color="#D1D2D4"/>
<stop offset="0.063237" stop-color="#818181"/>
<stop offset="0.507008" stop-color="#D0D0D0"/>
<stop offset="0.864583" stop-color="#818181"/>
<stop offset="1" stop-color="#D1D2D4"/>
</linearGradient>
<linearGradient id="paint12_linear_3_590" x1="15.0876" y1="169.907" x2="29.0144" y2="169.907" gradientUnits="userSpaceOnUse">
<stop stop-color="#4D4D4D"/>
<stop offset="0.156699" stop-color="#292929"/>
<stop offset="0.501829" stop-color="#6A6A6A"/>
<stop offset="0.884758" stop-color="#2E2D2D"/>
<stop offset="1" stop-color="#4D4D4D"/>
</linearGradient>
<linearGradient id="paint13_linear_3_590" x1="16.9437" y1="-2.17555e-06" x2="77.177" y2="59.8852" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#737475"/>
</linearGradient>
<linearGradient id="paint14_linear_3_590" x1="139.501" y1="153.891" x2="139.501" y2="159.462" gradientUnits="userSpaceOnUse">
<stop stop-color="#2D2D2D"/>
<stop offset="1"/>
</linearGradient>
<linearGradient id="paint15_linear_3_590" x1="0" y1="164.104" x2="279" y2="164.104" gradientUnits="userSpaceOnUse">
<stop stop-color="#A9AAAC"/>
<stop offset="0.0205416" stop-color="#F2F2F2" stop-opacity="0.921875"/>
<stop offset="0.0339099" stop-color="#787879"/>
<stop offset="0.124814" stop-color="#D6D6D6" stop-opacity="0.606575"/>
<stop offset="0.515625" stop-color="#E4E4E4" stop-opacity="0"/>
<stop offset="0.864583" stop-color="#D7D7D7" stop-opacity="0.666378"/>
<stop offset="0.973923" stop-color="#848484"/>
<stop offset="0.992314" stop-color="#F4F4F4"/>
<stop offset="1" stop-color="#BFBFBF"/>
</linearGradient>
</defs>
</svg>
</Box>
);
}

@ -0,0 +1,25 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function TitleIcon({color}:Props) {
return (
<Box
sx={{
height: "30px",
width: "33px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="33" height="30" viewBox="0 0 33 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Title" d="M33 0V5.11111C31.3704 5.40741 30.037 6.14815 29 7.33334C28.037 8.44445 27.2963 9.85185 26.7778 11.5556C26.3333 13.2593 26.1111 15.1111 26.1111 17.1111H32V30H19.6667V18.3333C19.6667 14.037 20.2963 10.6296 21.5556 8.11111C22.8889 5.5926 24.5556 3.70371 26.5556 2.44445C28.6296 1.18518 30.7778 0.37037 33 0ZM13.3333 0V5.11111C11.7037 5.40741 10.3704 6.14815 9.33333 7.33334C8.37037 8.44445 7.62963 9.85185 7.11111 11.5556C6.66667 13.2593 6.44444 15.1111 6.44444 17.1111H12.3333V30H0V18.3333C0 14.037 0.629629 10.6296 1.88889 8.11111C3.22222 5.5926 4.88889 3.70371 6.88889 2.44445C8.96296 1.18518 11.1111 0.37037 13.3333 0Z" fill="#7E2AEA"/>
</svg>
</Box>
);
}

@ -0,0 +1,57 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
width?: string;
}
export default function YoutobeIcon({color, width}:Props) {
return (
<Box
sx={{
height: "75px",
width: {width} || "120px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="120" height="75" viewBox="0 0 120 75" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_105_15)">
<rect width="120" height="75" fill="none"/>
<g filter="url(#filter0_ddd_105_15)">
<rect width="120" height="75" rx="12" fill="#FB5607"/>
</g>
<path d="M84 37L48 16.2154V57.7846L84 37Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ddd_105_15" x="-17.869" y="0" width="155.738" height="115.205" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6.6501"/>
<feGaussianBlur stdDeviation="2.66004"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.494118 0 0 0 0 0.164706 0 0 0 0 0.917647 0 0 0 0.0282725 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_105_15"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="12.5216"/>
<feGaussianBlur stdDeviation="5.00862"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.494118 0 0 0 0 0.164706 0 0 0 0 0.917647 0 0 0 0.035 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_105_15" result="effect2_dropShadow_105_15"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="22.3363"/>
<feGaussianBlur stdDeviation="8.93452"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.494118 0 0 0 0 0.164706 0 0 0 0 0.917647 0 0 0 0.0417275 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_105_15" result="effect3_dropShadow_105_15"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_105_15" result="shape"/>
</filter>
<clipPath id="clip0_105_15">
<rect width="120" height="75" fill="white"/>
</clipPath>
</defs>
</svg>
</Box>
);
}

BIN
src/assets/Quiz-main.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 165 KiB

15
src/assets/icons/x.tsx Normal file

@ -0,0 +1,15 @@
import { useTheme } from "@mui/material";
interface Props {
width?: number;
}
export default function PenaLogo({ width }: Props) {
const theme = useTheme();
return (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.39844 2.39999L21.5984 21.6M2.39844 21.6L21.5984 2.39999" stroke="black"/>
</svg>
)}

@ -14,7 +14,10 @@ import InstallQuiz from "./pages/InstallQuiz/InstallQuiz";
import { Result } from "./pages/Result/Result";
import { Setting } from "./pages/Result/Setting";
import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
import ContactFormModal from "@ui_kit/ContactForm";
import ImageCrop from "@ui_kit/Modal/ImageCrop";
import Landing from "./pages/Landing/Landing";
import { SnackbarProvider } from 'notistack'
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import "dayjs/locale/ru";
@ -32,18 +35,13 @@ const routeslink: {
header: boolean;
sidebar: boolean;
}[] = [
{ path: "/", page: <MyQuizzesFull />, header: false, sidebar: false },
{
path: "/questions/:quizId",
page: <QuestionsPage />,
header: true,
sidebar: true,
},
{ path: "/contacts", page: <ContactFormPage />, header: true, sidebar: true },
{ path: "/result", page: <Result />, header: true, sidebar: true },
{ path: "/settings", page: <Setting />, header: true, sidebar: true },
{ path: "/install", page: <InstallQuiz />, header: true, sidebar: true },
];
{ path: "/list", page: <MyQuizzesFull />, header: false, sidebar: false },
{ path: "/questions/:quizId", page: <QuestionsPage />, header: true, sidebar: true,},
{ path: "/contacts", page: <ContactFormPage />, header: true, sidebar: true },
{ path: "/result", page: <Result />, header: true, sidebar: true },
{ path: "/settings", page: <Setting />, header: true, sidebar: true },
{ path: "/install", page: <InstallQuiz />, header: true, sidebar: true },
];
const root = createRoot(document.getElementById("root")!);
@ -51,15 +49,19 @@ root.render(
<DndProvider backend={HTML5Backend}>
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="ru" localeText={localeText}>
<ThemeProvider theme={lightTheme}>
<BrowserRouter>
<Routes>
{routeslink.map((e, i) => (
<Route key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar} />} />
))}
<Route path="setting/:quizId" element={<StartPage />} />
<Route path="crop" element={<ImageCrop />} />
</Routes>
</BrowserRouter>
<SnackbarProvider>
<ContactFormModal />
<BrowserRouter>
<Routes>
{routeslink.map((e, i) => (
<Route key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar} />} />
))}
<Route path="setting/:quizId" element={<StartPage />} />
<Route path="crop" element={<ImageCrop />} />
<Route path="/" element={<Landing/>}/>
</Routes>
</BrowserRouter>
</SnackbarProvider>
</ThemeProvider>
</LocalizationProvider>
</DndProvider>

105
src/pages/Landing/Blog.tsx Normal file

@ -0,0 +1,105 @@
import React from 'react';
import Box from '@mui/material/Box';
import {Typography} from "@mui/material";
import SectionStyled from './SectionStyled';
import {styled} from "@mui/material/styles";
const BoxCardBlog = styled('div')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
width: '100%',
maxWidth: 'none',
},
}));
function CardBlog () {
return(
<BoxCardBlog
sx={{
width: '360px',
height: '292px',
display: 'flex',
flexDirection: 'column',
backgroundColor: '#ffffff',
borderRadius: '12px',
marginBottom: '10px',
}}
>
<Box
sx={{
width: '100%',
height: '62%',
backgroundColor: '#C8DADE',
borderTopLeftRadius: '12px',
borderTopRightRadius: '12px',
}}
>
</Box>
<Box
sx={{
padding: '16px 20px',
maxWidth: '100%',
}}
>
<Typography color={"#4D4D4D"} fontSize={"16px"}>01.09.2022</Typography>
<Typography variant='h6' fontSize='18px' color={"#4D4D4D"} maxWidth={"300px"}>Как продвигать квиз за 10 000 в месяц</Typography>
</Box>
</BoxCardBlog>
)
}
export default function Component() {
return(
<SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
sxsect={{
minHeight: '596px',
}}
sxcont={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
padding: '10px',
}}>
<Box
sx={{
display: 'flex',
alignItems: 'flex-start',
width: '100%',
flexDirection: 'column',
}}
>
<Typography variant='h4' fontWeight={'500'}>Блог</Typography>
<Box
sx={{
maxWidth: '361px',
}}
>
<Typography
sx={{fontSize: '18px',}}
>
Кейсы, дайджесты и отборные рекомендации
</Typography>
</Box>
</Box>
<Box
sx={{
display: "flex",
justifyContent: 'space-between',
alignItems: 'center',
flexWrap: 'wrap',
width: '100%',
marginTop: '40px',
}}
>
<CardBlog/>
<CardBlog/>
<CardBlog/>
</Box>
</SectionStyled>
)
}

@ -0,0 +1,100 @@
import React from 'react';
import Box from '@mui/material/Box';
import {Typography, useMediaQuery, useTheme} 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')]: {
flexDirection: 'column',
// alignItems: 'center',
// textAlign: 'center',
width: '100%',
},
}));
const BoxCard = styled('div')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
// alignItems: 'center',
},
}));
const BoxText = styled('div')(({ theme }) => ({
[theme.breakpoints.down(600)]: {
marginBottom: '20px',
},
}));
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={'#7e2aea'} mwidth={'1160px'}
sxsect={{minHeight: '394px'}}
sxcont={{display: 'flex',
flexDirection: 'column',
justifyContent: 'space-around',
height: '100%',
color:'#ffffff',
padding: isMobile ? '60px 16px 32px 16px' : (isTablet ? "55px 40px 63px 40px" : '55px 14px 63px 10px'),
}}
>
<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
sx={{
maxWidth: isTablet ? '285px' : '290px',
height: '151px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
marginBottom: '10px',
}}
>
<Icon1/>
<Typography fontSize={'18px'} lineHeight={'22.33px'}>
Человек ощущает заботу и склоняется к выбору вашей компании</Typography>
</BoxCard>
<BoxCard
sx={{
maxWidth: isTablet ? '285px' : '290px',
height: '151px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
marginBottom: '10px',
}}
>
<Icon2/>
<Typography fontSize={'18px'} lineHeight={'22.33px'} paddingBottom={'18px'}>
Получаете заинтересованного, квалифицированного клиента</Typography>
</BoxCard>
<BoxCard
sx={{
maxWidth: isTablet? '307px' : '346px',
height: '151px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
marginBottom: '10px',
}}
>
<Icon3/>
<Typography fontSize={'18px'} lineHeight={'22.33px'} paddingBottom={'18px'}>
Увеличиваете качество цифрового общения и конверсию в продажи</Typography>
</BoxCard>
</BoxPluses>
</SectionStyled>
)}

@ -0,0 +1,88 @@
import React from 'react';
import Box from '@mui/material/Box';
import {Typography, useMediaQuery, useTheme} from "@mui/material";
export default function Counter() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
return(
<Box
sx={{
width: '100%',
fontFamily: 'Rubik',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: 0,
boxSizing: "border-box",
padding: isTablet ? "0 40px" : undefined,
}}
>
<Box
sx={{
maxWidth: '1160px',
height: isMobile ? "587px" : isTablet ? "341px" : "190px",
display: 'flex',
justifyContent: 'space-between',
alignItems: isTablet ? 'start' : 'center',
flexWrap: 'wrap',
backgroundColor: '#7E2AEA',
color: '#ffffff',
borderRadius: '8px',
boxSizing: "border-box",
padding: isMobile ? '42px 60px 30px 35px' : isTablet ? '37px 99px 0px 100px' : '30px 60px 30px 20px',
width: '100%',
marginTop: isMobile ? "483px" : isTablet ? "258px" : "106px",
rowGap: isMobile ? undefined : (isTablet ? '51px' : undefined),
}}
>
<Box
sx={{
width: isTablet ? '305px' : '203px',
}}
>
<Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>14 дней</Typography>
<Typography> бесплатно, полный функционал</Typography>
</Box>
<Box
sx={{
width: isTablet ? '305px' : undefined
}}
>
<Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>5 мин</Typography>
<Box
sx={{
width: isTablet ? '200px' : '131px',
}}
>
<Typography >для создания квиза</Typography>
</Box>
</Box>
<Box
sx={{
width: isTablet ? '305px' : undefined
}}
>
<Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>482 800</Typography>
<Box
sx={{
width: isMobile? '200px' : (isTablet ? '250px' : '200px'),
}}
>
<Typography >квизов создано клиентами</Typography>
</Box>
</Box>
<Box
sx={{
width: isTablet ? '305px' : '177px',
}}
>
<Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>760</Typography>
<Typography>готовых шаблонов для разных ниш</Typography>
</Box>
</Box>
</Box>
)
}

@ -0,0 +1,83 @@
import React from 'react';
import Box from "@mui/material/Box";
import Typography from '@mui/material/Typography';
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";
export default function Component() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
return(
<SectionStyled tag={'footer'} bg={'#252734'} mwidth={'1160px'}
sxsect={{
justifyContent: 'space-around',
}}
sxcont={{
display: 'flex',
alignItems: 'flex-start',
flexDirection: 'column',
minHeight: '236px',
padding: isMobile ? '40px 16px 74px 16px' : isTablet ? '56px 40px' : '56px 0px',
boxSizing: 'border-box',
}}>
<Box
sx={{
display: 'flex',
height: '50%',
alignItems: "center",
width: "100%",
flexWrap: 'wrap',
gap: isMobile ? "65px" : "120px"
}}
>
<Box
sx={{
width: '170px',
height: '48px',
backgroundSize: 'contain',
marginTop: isMobile ? undefined : isTablet ? '15px' : 0
}}
>
<svg width="124" height="48" viewBox="0 0 124 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9015 2.29269C12.8451 1.70698 9.35663 7.13845 6.11187 11.0646C3.26427 14.5102 1.144 18.402 0.897728 22.8672C0.635712 27.6177 1.49746 32.5651 4.73385 36.0493C8.06749 39.6381 13.0612 41.9057 17.9015 41.1726C22.3399 40.5003 24.3038 35.6263 27.6082 32.5846C31.1962 29.2819 37.8808 27.7458 37.7881 22.8672C37.6952 17.9811 30.6403 17.0247 27.2457 13.5127C23.7296 9.87488 22.9244 2.87452 17.9015 2.29269Z" fill="#7E2AEA"/>
<ellipse cx="30.4815" cy="39.3174" rx="2.79008" ry="2.79008" fill="#7E2AEA"/>
<circle cx="27.6918" cy="8.36074" r="1.06289" fill="#7E2AEA"/>
<path d="M44.6914 21.725C44.3815 18.712 42.964 15.9213 40.7136 13.894C38.4632 11.8666 35.5403 10.7469 32.5114 10.752C32.0814 10.7522 31.6516 10.7747 31.2239 10.8194C28.2122 11.1356 25.4243 12.5558 23.3979 14.8061C21.3715 17.0563 20.2501 19.9773 20.25 23.0055V23.0055V40.5105H25.5015V33.0709C27.5548 34.4993 29.997 35.2631 32.4983 35.259C32.9283 35.2589 33.3581 35.2364 33.7858 35.1916C35.3861 35.0234 36.9377 34.5417 38.3519 33.7738C39.7661 33.006 41.0152 31.9671 42.0279 30.7166C43.0405 29.466 43.797 28.0282 44.254 26.4852C44.711 24.9423 44.8596 23.3245 44.6914 21.7241V21.725ZM37.9467 27.4141C37.3698 28.1307 36.6565 28.7258 35.8481 29.1648C35.0397 29.6038 34.1522 29.878 33.237 29.9716C32.9916 29.9971 32.745 30.01 32.4983 30.0101C30.9101 30.0087 29.3696 29.4673 28.1296 28.475C26.8896 27.4826 26.0238 26.0982 25.6743 24.5489C25.3249 22.9996 25.5125 21.3776 26.2063 19.949C26.9002 18.5204 28.0591 17.3701 29.4929 16.687C30.9267 16.0038 32.5501 15.8284 34.0967 16.1895C35.6433 16.5506 37.0212 17.4267 38.0042 18.6741C38.9873 19.9215 39.517 21.466 39.5066 23.0542C39.4961 24.6424 38.9461 26.1798 37.9467 27.4141Z" fill="#F2F3F7"/>
<path d="M58.3944 10.7529C57.9643 10.7531 57.5346 10.7756 57.1069 10.8203C53.9863 11.149 51.1108 12.6622 49.0728 15.0482C47.0349 17.4341 45.99 20.511 46.1534 23.6445C46.3168 26.7781 47.676 29.7296 49.9511 31.8906C52.2261 34.0517 55.2434 35.2577 58.3813 35.26C58.8113 35.2598 59.241 35.2373 59.6688 35.1926C61.9187 34.9531 64.0589 34.0972 65.8536 32.7192C67.6482 31.3412 69.0277 29.4945 69.8401 27.3827H63.8542L63.8297 27.4133C63.063 28.3611 62.0621 29.0922 60.9261 29.5344C59.7901 29.9766 58.5583 30.1146 57.3527 29.9347C56.147 29.7547 55.0092 29.2632 54.0517 28.5086C53.0943 27.754 52.3505 26.7625 51.8939 25.6322H70.3617C70.7505 23.8431 70.7342 21.9897 70.3138 20.2078C69.8934 18.4259 69.0797 16.7606 67.9323 15.3339C66.7848 13.9073 65.3327 12.7554 63.6824 11.9628C62.032 11.1701 60.2252 10.7567 58.3944 10.7529V10.7529ZM51.8939 20.3807C52.3719 19.204 53.1603 18.1791 54.175 17.4152C55.1897 16.6512 56.3927 16.177 57.6557 16.043C57.9011 16.0175 58.1477 16.0046 58.3944 16.0044C59.7892 16.0021 61.1528 16.4178 62.3091 17.1978C63.4655 17.9779 64.3615 19.0865 64.8818 20.3807H51.8939Z" fill="#F2F3F7"/>
<path d="M83.3332 10.752C81.3261 10.7488 79.3571 11.3007 77.6441 12.3467V10.752H72.3926V35.259H77.6441V21.6926C77.6441 20.1838 78.2435 18.7367 79.3104 17.6698C80.3773 16.6029 81.8244 16.0035 83.3332 16.0035C84.8421 16.0035 86.2891 16.6029 87.3561 17.6698C88.423 18.7367 89.0224 20.1838 89.0224 21.6926V35.259H94.2739V21.6926C94.2739 18.791 93.1212 16.0082 91.0694 13.9564C89.0177 11.9046 86.2349 10.752 83.3332 10.752Z" fill="#F2F3F7"/>
<path d="M120.533 24.5723V10.753H115.282V12.9411C113.229 11.512 110.786 10.7482 108.285 10.753C107.855 10.7531 107.425 10.7756 106.998 10.8203C103.877 11.149 101.001 12.6622 98.9635 15.0482C96.9255 17.4341 95.8806 20.511 96.044 23.6446C96.2074 26.7781 97.5667 29.7296 99.8417 31.8907C102.117 34.0517 105.134 35.2577 108.272 35.26C108.702 35.2598 109.132 35.2373 109.559 35.1926C112.612 34.8802 115.433 33.4262 117.459 31.1218C119.032 33.2274 121.312 34.6963 123.879 35.26V29.7547C122.883 29.3034 122.037 28.5746 121.444 27.6556C120.851 26.7366 120.535 25.6662 120.533 24.5723ZM113.72 27.4134C113.143 28.1298 112.43 28.7247 111.622 29.1637C110.813 29.6027 109.926 29.8771 109.011 29.9709C108.765 29.9963 108.519 30.0092 108.272 30.0094C106.478 30.0093 104.752 29.3205 103.451 28.0851C102.15 26.8497 101.373 25.162 101.28 23.3702C101.187 21.5784 101.785 19.8193 102.951 18.4559C104.117 17.0925 105.763 16.2287 107.547 16.043C107.792 16.0175 108.039 16.0046 108.285 16.0045C109.607 16.0056 110.902 16.3809 112.019 17.0871C113.137 17.7933 114.032 18.8015 114.6 19.9949C115.169 21.1884 115.388 22.5185 115.232 23.8313C115.077 25.1441 114.552 26.386 113.72 27.4134Z" fill="#F2F3F7"/>
<path d="M101.904 37.9189V40.8434C102.395 40.2683 102.983 39.9807 103.667 39.9807C104.018 39.9807 104.334 40.0459 104.616 40.1761C104.899 40.3063 105.11 40.4727 105.251 40.6752C105.396 40.8778 105.494 41.1021 105.544 41.348C105.599 41.594 105.626 41.9756 105.626 42.4929V45.8731H104.101V42.8293C104.101 42.2252 104.072 41.8418 104.014 41.679C103.956 41.5162 103.853 41.3878 103.705 41.2938C103.56 41.1961 103.378 41.1473 103.157 41.1473C102.904 41.1473 102.678 41.2088 102.479 41.3318C102.28 41.4547 102.133 41.641 102.039 41.8906C101.949 42.1366 101.904 42.5019 101.904 42.9866V45.8731H100.379V37.9189H101.904Z" fill="#F2F3F7"/>
<path d="M110.97 45.8731V45.0104C110.76 45.3179 110.484 45.5603 110.14 45.7375C109.8 45.9147 109.44 46.0034 109.06 46.0034C108.673 46.0034 108.326 45.9184 108.018 45.7484C107.711 45.5783 107.488 45.3396 107.351 45.0321C107.214 44.7247 107.145 44.2997 107.145 43.7571V40.111H108.67V42.7587C108.67 43.569 108.697 44.0664 108.751 44.2508C108.809 44.4317 108.912 44.5764 109.06 44.6849C109.208 44.7898 109.397 44.8422 109.624 44.8422C109.885 44.8422 110.118 44.7717 110.324 44.6306C110.531 44.486 110.672 44.3087 110.748 44.0989C110.824 43.8855 110.862 43.3664 110.862 42.5417V40.111H112.386V45.8731H110.97Z" fill="#F2F3F7"/>
<path d="M113.905 45.8731V37.9189H115.43V40.7838C115.9 40.2484 116.457 39.9807 117.101 39.9807C117.803 39.9807 118.383 40.2358 118.843 40.7458C119.302 41.2522 119.532 41.981 119.532 42.9324C119.532 43.9162 119.297 44.674 118.827 45.2058C118.36 45.7375 117.792 46.0034 117.123 46.0034C116.794 46.0034 116.468 45.922 116.146 45.7592C115.828 45.5928 115.553 45.3487 115.322 45.0267V45.8731H113.905ZM115.419 42.8673C115.419 43.4641 115.513 43.9054 115.701 44.1912C115.965 44.5963 116.316 44.7988 116.754 44.7988C117.09 44.7988 117.376 44.656 117.611 44.3702C117.85 44.0808 117.969 43.6269 117.969 43.0083C117.969 42.35 117.85 41.8762 117.611 41.5868C117.372 41.2938 117.067 41.1473 116.694 41.1473C116.329 41.1473 116.025 41.2902 115.783 41.5759C115.54 41.8581 115.419 42.2885 115.419 42.8673Z" fill="#F2F3F7"/>
</svg>
<Typography color={"#727074"} fontSize={"14px"}>(с) 2023 Examplelink.com</Typography>
</Box>
<Box
sx={{
display: 'flex',
width: '457px',
flexWrap: 'wrap',
}}
>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
'button':{color: '#F2F3F7', textTransform: 'none'},
}}
>
<Button variant="text" sx={{fontSize: "16px", fontWeight: 500}}>
Пользовательское соглашение
</Button>
</Box>
</Box>
</Box>
</SectionStyled>
)
}

@ -0,0 +1,70 @@
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";
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'}
sxsect={{
minHeight: '80px',
borderBottom: '1px solid #E3E3E3',
position: "relative",
zIndex: 3
}}
sxcont={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 10px'
}}>
<QuizLogo width={isMobile ? 100 : 150} />
<Box
sx={{
maxWidth: '595px',
width: '100%',
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
marginRight: "138px",
}}
>
{buttonMenu.map( (element, index) => (
<NavMenuItem
text={element}
// component={Link}
// to={url}
key={index}
onClick={() => {
setSelect(index);
}}
isActive={select === index}
/>
))}
</Box>
<Button variant="outlined"
onClick={() => setIsContactFormOpen(true)}
sx={{
color: 'black',
border: '1px solid black',
textTransform: 'none',
fontWeight: '400',
fontSize: '18px',
lineHeight: '24px',
borderRadius: '8px',
padding: '8px 17px',
}}
>Предрегистрация</Button>
</SectionStyled>
)
}

@ -0,0 +1,72 @@
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, useMediaQuery, useTheme} from "@mui/material";
import abstraction from '../../assets/Quiz-main.png'
import SectionStyled from './SectionStyled';
import {styled} from "@mui/material/styles";
import { Link, redirect } from 'react-router-dom';
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'}
sxsect={{
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',
}}
>
<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"
>
Попробуйте бесплатно
</Button>
</Link>
<Box
component={"img"}
src={abstraction}
sx={{
position: "absolute",
bottom: isMobile ? undefined : (isTablet? "138px" : "-291px"),
width: isMobile ? "430px" : "810px",
left: isMobile ? "-44px" : (isTablet? "54px" : "401px"),
top: isMobile ? "-386px" : undefined
}}
/>
</Box>
</SectionStyled>
)
}

@ -0,0 +1,677 @@
import React from 'react';
import Box from '@mui/material/Box';
import {Typography, useMediaQuery, useTheme} from "@mui/material";
import SectionStyled from './SectionStyled';
import YoutobeIcon from "../../assets/LandingPict/youtobeIcon";
import OneIconBorder from "@icons/OneIconBorder";
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/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";
import Icon7 from "./images/icons/Group136";
import Icon8 from "./images/icons/Group137";
import Icon9 from "./images/icons/Group138";
import Icon10 from "./images/icons/Group139";
import Icon11 from "./images/icons/Group140";
import Icon12 from "./images/icons/Group141";
import Icon13 from "./images/icons/Group142";
import Icon14 from "./images/icons/Group147";
import Icon15 from "./images/icons/Group148";
import Icon16 from "./images/icons/Group149";
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/Network";
export default function HowItWorks () {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
return(
<SectionStyled tag={'section'} bg={'#333647'} sxsect={{minHeight: '2375px'}} mwidth={'1160px'}
sxcont={{
padding: isMobile ? '603px 16px 0 16px' : (isTablet ? '383px 40px 0 40px':'232px 10px 0 10px'),
boxSizing: 'border-box'
}}
>
<Box color='#ffffff'
sx={{
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
marginBottom: isMobile ? "10px" : '65px',
gap: isMobile ? "30px" : undefined,
}}
>
<Box
sx={{
}}
>
<Typography variant='h6' fontSize='36px' >Как это работает</Typography>
<Typography fontSize='18px'>Квиз как диалог</Typography>
</Box>
<Box
sx={{
display: "flex",
justifyContent: 'space-between',
alignItems: 'center',
flexWrap: 'wrap',
gap: "17px",
flexDirection: isMobile ? "row-reverse" : undefined,
}}
>
<Box width='140px'>
<Typography fontSize='18px'>Видео о квизах 2 мин</Typography>
</Box>
<YoutobeIcon width={isMobile ? "73px" : "120px"} />
</Box>
</Box>
<Box
sx={{
minHeight: '400px',
backgroundColor: '#ffffff',
width: '100%',
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
borderRadius: '8px',
marginBottom: isMobile ? "26px" : (isTablet ? "60px" : "107px"),
}}
>
<Box
sx={{
width: isTablet ? undefined : '50%',
padding: '20px',
minHeight: '401px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
boxSizing: "border-box"
}}
>
<Box
sx={{
height: "36px",
width: "36px",
justifyContent: "center",
alignItems: "center",
display: "flex",
borderRadius: "6px",
background: "#EEE4FC"
}}
>
<OneIconBorder color={"#7E2AEA"}/>
</Box>
<Box
sx={{
minHeight: isTablet ? '121px' : '162px',
justifyContent: 'flex-start',
display: "flex",
flexDirection: 'column',
width: isMobile ? "335px" : (isTablet ? "840px" : "453px"),
gap: isMobile ? 0 : "20px",
marginTop: isMobile ? "10px" : 0
}}
>
<Typography variant='h6' fontSize='36px'>
Начало диалога
</Typography>
<Typography fontSize='18px'>
Квиз, как любезный дворецкий, в нужный момент предлагает свою помощь и начинает диалог
</Typography>
</Box>
{isTablet &&
<Box
component={"img"}
src={Firstblock1}
sx={{
backgroundColor: '#C8DADE',
width: isMobile ? '302px' : '880px',
height: isMobile ? '193px': '561px',
borderRadius: '12px',
}}
/>
}
<Box
sx={{
display: 'flex',
flexDirection: 'column',
maxWidth: isTablet ? '489px' : '507px',
height: '50%',
justifyContent: 'end',
marginTop: isMobile ? "20px" : (isTablet ? "34px" : undefined)
}}
>
<Typography variant='h6' fontSize='20px'>
квиз можно использовать
</Typography>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
padding: isTablet ? '20px 0 0 0' : '20px 20px 0 0',
flexDirection: isMobile ? "column" : "row",
gap: isMobile ? "10px" : undefined
}}
>
<Box
sx={{
display: 'flex',
// width: '126px',
justifyContent: isMobile ? "start" : 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon21/>
<Typography fontSize='18px'> на сайте</Typography>
</Box>
<Box
sx={{
display: 'flex',
// width: '126px',
justifyContent: isMobile ? "start" : 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon2/>
<Typography fontSize='18px'> по прямой ссылке</Typography>
</Box>
</Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
padding: isMobile ? "10px 94px 0 0" : isTablet ? "20px 76px 0 0" : "20px 94px 0 0",
gap: isMobile ? "10px" : undefined
}}
>
<Box
sx={{
display: 'flex',
// width: '126px',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon1/>
<Typography fontSize='18px'> Вконтакте</Typography>
</Box>
<Box
sx={{
display: 'flex',
// width: '126px',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon3/>
<Typography fontSize='18px'> в Тик-ток</Typography>
</Box>
</Box>
</Box>
</Box>
<Box
component={"img"}
src={Firstblock1}
sx={{
display: isTablet ? "none" : "block",
backgroundColor: '#C8DADE',
width: '564px',
height: '360px',
borderRadius: '12px',
}}
/>
</Box>
<Box
sx={{
minHeight: '400px',
backgroundColor: '#ffffff',
width: '100%',
display: 'flex',
alignItems: 'center',
borderRadius: '8px',
marginBottom: isMobile ? "26px" : (isTablet ? "60px" : "107px"),
flexWrap: 'wrap',
boxSizing: "border-box"
}}
>
<Box
sx={{
width: isTablet ? undefined : '50%',
minHeight: '401px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
padding: '20px',
boxSizing: "border-box"
}}
>
<Box
sx={{
height: "36px",
width: "36px",
justifyContent: "center",
alignItems: "center",
display: "flex",
borderRadius: "6px",
background: "#EEE4FC"
}}
>
<TwoIcon/>
</Box>
<Box
sx={{
minHeight: '40%',
display: 'flex',
justifyContent: 'space-around',
flexDirection: 'column',
marginBottom: isMobile ? '23px' : isTablet ? '15px' : '90px',
gap: isMobile ? 0 : "20px",
marginTop: isMobile ? "7px" : undefined
}}
>
<Typography variant='h6' fontSize='36px'>
Задаем вопросы
</Typography>
<Typography fontSize='18px' sx={{maxWidth: isMobile ? "335px" : isTablet ? "100%" : "444px" }} >
Забота заключается в том, чтобы интересоваться желаниями посетителя, задавать уточняющие вопросы и помогать делать правильный выбор
</Typography>
</Box>
{isTablet &&
<Box
component={"img"}
src={Firstblock2}
sx={{
backgroundColor: '#C8DADE',
width: isMobile ? '302px' : '880px',
height: isMobile ? '193px': '561px',
borderRadius: '12px',
}}
/>
}
<Box
sx={{
display: 'flex',
flexDirection: 'column',
maxWidth: isMobile ? "245px" : "500px",
height: '50%',
justifyContent: 'end',
marginTop: isMobile ? "40px" : isTablet ? "35px" : undefined
}}
>
<Typography variant='h6' fontSize='20px'>10 форматов вопроса</Typography>
<Box
sx={{
display: "flex",
flexWrap: 'wrap',
justifyContent: 'space-between',
marginTop: '15px',
gap: "15px"
}}
>
<Icon4/>
<Icon5/>
<Icon6/>
<Icon7/>
<Icon8/>
<Icon9/>
<Icon10/>
<Icon11/>
<Icon12/>
<Icon13/>
</Box>
</Box>
</Box>
<Box
component={"img"}
src={Firstblock2}
sx={{
display: isTablet ? "none" : "block",
backgroundColor: '#C8DADE',
width: '564px',
height: '360px',
borderRadius: '12px',
}}
/>
</Box>
<Box
sx={{
minHeight: '400px',
backgroundColor: '#ffffff',
width: '100%',
display: 'flex',
alignItems: 'center',
borderRadius: '8px',
marginBottom: isMobile ? "26px" : (isTablet ? "60px" : "107px"),
flexWrap: 'wrap',
boxSizing: "border-box"
}}
>
<Box
sx={{
width: isTablet ? undefined : '50%',
height: '100%',
padding: '20px',
gap: "10px",
display: "flex",
flexDirection: "column",
boxSizing: "border-box"
}}
>
<Box
sx={{
height: "36px",
width: "36px",
justifyContent: "center",
alignItems: "center",
display: "flex",
borderRadius: "6px",
background: "#EEE4FC"
}}
>
<ThreeIcon/>
</Box>
<Box
sx={{
minHeight: '40%',
justifyContent: 'space-around',
display: "flex",
flexDirection: 'column',
maxWidth: isTablet ? "100%" : '388px',
gap: "20px"
}}
>
<Typography variant='h6' fontSize='36px' lineHeight='normal'>Показываем рекомендацию</Typography>
<Typography fontSize='18px'>На основе ответов мы подбираем наиболее подходящие товары или услуги</Typography>
</Box>
{isTablet &&
<Box
component={"img"}
src={Firstblock3}
sx={{
backgroundColor: '#C8DADE',
width: isMobile ? '302px' : '880px',
height: isMobile ? '193px': '561px',
borderRadius: '12px',
}}
/>
}
<Box
sx={{
display: 'flex',
flexDirection: 'column',
maxWidth: '497px',
minHeight: '50%',
justifyContent: 'end',
marginTop: isMobile ? undefined : isTablet ? " 34px" : undefined
}}
>
<Typography variant='h6' fontSize='20px'>точный показ результатов</Typography>
<Box
sx={{
display: 'flex',
justifyContent: isMobile ? 'start' : 'space-between',
padding: '20px 20px 0 0',
flexDirection: isMobile ? "column" : "row",
gap: isMobile ? "15px" : undefined
}}
>
<Box
sx={{
display: 'flex',
justifyContent: isMobile ? 'start' : 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon14/>
<Typography fontSize='18px'> логика ветвления</Typography>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: isMobile ? 'start' : 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon15/>
<Typography fontSize='18px'> калькулятор цен</Typography>
</Box>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
padding: '20px 20px 0 0',
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon16/>
<Typography fontSize='18px'> скидки</Typography>
</Box>
</Box>
</Box>
</Box>
<Box
component={"img"}
src={Firstblock3}
sx={{
display: isTablet ? "none" : "block",
backgroundColor: '#C8DADE',
width: '564px',
height: '360px',
boxSizing: "border-box",
borderRadius: '12px',
}}
/>
</Box>
<Box
sx={{
minHeight: '400px',
backgroundColor: '#ffffff',
width: '100%',
display: 'flex',
alignItems: 'center',
borderRadius: '8px',
marginBottom: isMobile ? "25px" : (isTablet ? "60px" : "126px"),
flexWrap: 'wrap',
boxSizing: "border-box"
}}
>
<Box
sx={{
width: isTablet ? undefined :'50%',
height: '100%',
padding: '20px',
boxSizing: "border-box",
gap: "20px",
display: "flex",
flexDirection: "column"
}}
>
<Box
sx={{
height: "36px",
width: "36px",
justifyContent: "center",
alignItems: "center",
display: "flex",
borderRadius: "6px",
background: "#EEE4FC",
}}
>
<FourIcon/>
</Box>
<Box
sx={{
minHeight: '40%',
justifyContent: 'space-around',
display: "flex",
flexDirection: 'column',
maxWidth: isTablet ? "100%" :'457px',
marginTop: isMobile ? "-13px" : 0
}}
>
<Typography variant='h6' fontSize='36px'>Узнаем контакт</Typography>
<Typography fontSize='18px'>Только в конце диалога спрашиваем контакты. Здесь посетитель уже знает, что вы позаботились предложить ему то, что надо и с большей вероятностью оставит заявку</Typography>
</Box>
{isTablet &&
<Box
component={"img"}
src={Firstblock4}
sx={{
backgroundColor: '#C8DADE',
width: isMobile ? '302px' : '880px',
height: isMobile ? '193px': '561px',
borderRadius: '12px',
}}
/>
}
<Box
sx={{
display: 'flex',
flexDirection: 'column',
maxWidth: '520px',
height: '50%',
justifyContent: 'end',
marginTop: isMobile ? "20px" : 0
}}
>
<Typography variant='h6' fontSize='20px'>что можно делать на последнем шаге</Typography>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
padding: '20px 20px 0 0',
flexDirection: isMobile ? "column" : "row",
gap: isMobile ? "15px" : undefined
}}
>
<Box
sx={{
display: 'flex',
justifyContent: isMobile ? 'start' : 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon17/>
<Typography fontSize='18px'> сбор контактов</Typography>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: isMobile ? 'start' : 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon18/>
<Typography fontSize='18px'> воронки и чат-боты</Typography>
</Box>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
padding: '20px 79px 0 0',
flexDirection: isMobile ? "column" : "row",
gap: isMobile ? "15px" : undefined
}}
>
<Box
sx={{
display: 'flex',
justifyContent: isMobile ? 'start' : 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon19/>
<Typography fontSize='18px'> интеграция с CRM</Typography>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: isMobile ? 'start' : 'space-between',
alignItems: 'center',
padding: '0',
flexWrap: 'wrap',
gap: "15px"
}}
>
<Icon20/>
<Typography fontSize='18px'> прием оплат</Typography>
</Box>
</Box>
</Box>
</Box>
<Box
component={"img"}
src={Firstblock4}
sx={{
display: isTablet ? "none" : "block",
backgroundColor: '#C8DADE',
width: '564px',
height: '360px',
borderRadius: '12px',
}}
/>
</Box>
</SectionStyled>
)
}

@ -0,0 +1,392 @@
import React from 'react';
import Box from '@mui/material/Box';
import {Typography, useMediaQuery, useTheme} 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 CalendarW from './image/calendar-W.svg'
// 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 BoxQuiz = styled('div')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
maxWidth: '530px',
},
}));
function Quiz () {
return(
<BoxQuiz
sx={{
maxWidth: '360px',
height: '462px',
backgroundColor: '#ffffff',
borderRadius: '12px',
display: 'flex',
flexDirection: 'column',
// justifyContent: 'space-around',
alignItems: 'center',
padding: '20px 20px 10px 20px',
marginTop: '36px',
gap: "25px",
boxSizing: "border-box"
}}
>
<Box>
<Notebook/>
</Box>
<Box
sx={{
minHeight: '86px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',}}
>
<Typography variant='h6'>Обучение английскому</Typography>
<Typography color={"#4D4D4D"} >Квиз в сторис для блогера преподавателя английского языка.</Typography>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
width: '100%',
}}
>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
}}
>
<Typography fontWeight={600}>период:</Typography>
<Typography fontWeight={600}>трафик:</Typography>
<Typography fontWeight={600}>результат:</Typography>
</Box>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'end',
}}
>
<Typography>24 часа</Typography>
<Typography>Сторисы</Typography>
<Typography>386 заявок</Typography>
</Box>
</Box>
<Box
sx={{
width: '100%',
display: 'flex',
justifyContent: 'start',}}
>
<Link href="#"
sx={{
color: "#7E2AEA",
textUnderlineOffset: "7px",
fontSize: '16px',
fontWeight: '500',
lineHeight: '20px',
textAlign: 'center'
}} >
Подробнее
</Link>
</Box>
</BoxQuiz>
)
}
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'}
sxsect={{minHeight: '809px', alignItems: 'flex-start'}}
sxcont={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
height: '100%',
padding: isMobile ? "16px 16px 70px 16px" : isTablet ? '16px 40px 50px 40px' : '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'*/}
{/* }}*/}
{/* >*/}
{/* <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%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-around',
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "16px",
marginTop: "52px",
maxWidth: isMobile ? "273px" : undefined
}}
>
<Typography variant='h6' fontSize={'36px'} maxWidth={'420px'} lineHeight={'42.66px'}>
Что еще можно делать
с Опросником
</Typography>
<Typography fontSize={'18px'}>
Изящное решение исследовательских и бизнес-задач
</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={{
width: '100%',
minHeight: '462px',
backgroundColor: '#ffffff',
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
padding: isMobile ? "0 27px 22px 20px" : isTablet ? "20px" : "22px 22px 22px 50px",
borderRadius: '12px',
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
sx={{
height: '70%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-around',
paddingTop: '26px',
paddingLeft: isMobile ? undefined : isTablet ? '30px' : undefined
}}
>
<Typography variant='h6' fontSize={'36px'} lineHeight={'42.66px'} maxWidth={'455px'}>
Исследуйте аудиторию и проверяйте гипотезы
</Typography>
<Box
sx={{
maxWidth: isTablet ? '100%' : '416px',
marginTop: '19px',
}}
>
<Typography fontSize={'18px'} lineHeight={'21px'} color={'#4D4D4D'}>
Опросник помогает проверять гипотезы
и принимать грамотные решения основанные
на данных. Создавайте опросы, собирайте обратную связь и анализируйте ответы
в удобной аналитике в личном кабинете.
</Typography>
</Box>
</Box>
<Box
sx={{
width: '100%',
maxWidth: isTablet ? '100%' : '550px',
marginTop: isMobile ? undefined : isTablet ? '42px' : undefined
}}
>
<Box
component={"img"}
src={BigBlock}
sx={{
width: '100%',
height: isMobile ? '228px' : isTablet ? '671px' : '418px',
backgroundColor: '#c8dade',
borderRadius: '12px',
}}
/>
</Box>
</Box>
</Box>
</SectionStyled>
)
}

@ -0,0 +1,40 @@
import React from 'react';
import {CssBaseline, useMediaQuery, useTheme} from "@mui/material";
import Header from './HeaderLanding';
import Footer from './FooterLanding';
import Hero from './Hero';
import Questions from './Questions';
import Counter from './Counter';
import Blog from './Blog';
import HowItWorks from './HowItWorks';
import BusinessPluses from './BusinessPluses';
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 (
<>
<CssBaseline />
{isTablet ? <FullScreenDialog/> : <Header/> }
<Hero/>
<Counter/>
<HowItWorks/>
<BusinessPluses/>
<HowToUse/>
{/*<WhatTheySay/>*/}
{/*<StartWithTemplates/>*/}
<WhatTheFeatures/>
{/*<Blog/>*/}
<Questions/>
<Footer />
</>
)
}

@ -0,0 +1,130 @@
import React from 'react';
import Box from "@mui/material/Box";
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 BoxSpan = styled('div')(({ theme }) => ({
// [theme.breakpoints.down('lg')]: {
// alignItems: 'center',
// justifyContent: 'center',
// textAlign: 'center',
// paddingTop: '20px',
// width: '100%',
// },
// }));
const BoxButtons = styled('div')(({ theme }) => ({
[theme.breakpoints.down('xs')]: {
justifyContent: 'center',
}
}));
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={'#7E2AEA'} mwidth={'1160px'}
sxsect={{
minHeight: '350px',
}}
sxcont={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
alignItems: 'center',
padding: isMobile ? '85px 16px 50px 16px' : isTablet ? "0 40px" : 0,
}}>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
}}
>
<Typography variant='h1' color={'#FFFFFF'}
sx={{
fontSize: isMobile ? '24px' : '36px',
fontWeight: '500',
lineHeight: '43px',
}}
>
Остались вопросы?
</Typography>
{isMobile &&
<Typography color={'#FFFFFF'} fontSize={'18px'} marginTop={'20px'}>
Сервисы помогают предпринимателям, маркетологам и агентствам сделать
интернет-маркетинг прозрачным и эффективным. С нами не придется тратить
рекламный бюджет впустую и терять клиентов на сайте.
</Typography>
}
<BoxButtons
sx={{
display: 'flex',
flexWrap: 'wrap',
paddingTop: '25px',
}}
>
<Button variant="outlined"
sx={{
width: '180px',
marginTop: isMobile ? '25px' : '40px',
border: '1px solid #ffffff',
color: '#ffffff',
backgroundColor: "transparent",
textTransform: 'none',
fontWeight: '400',
fontSize: '18px',
lineHeight: '24px',
padding: '10px 40px',
borderRadius: '8px',
}}
>
Подробнее
</Button>
<Button variant="contained"
sx={{
width: '180px',
marginTop: isMobile ? '20px' : '40px',
marginLeft: isMobile ? 0 : '22px',
backgroundColor: '#FFFFFF',
color: '#252734',
textTransform: 'none',
fontWeight: '400',
fontSize: '18px',
lineHeight: '24px',
padding: '10px 40px',
borderRadius: '8px',
}}
>
Подробнее
</Button>
</BoxButtons>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'end',
}}
>
<Box
sx={{
display: isMobile ? "none" : "flex",
minHeight: '139px',
maxWidth: '460px',
}}
>
<Typography color={'#FFFFFF'} fontSize={'18px'}>
Сервисы помогают предпринимателям, маркетологам и агентствам сделать
интернет-маркетинг прозрачным и эффективным. С нами не придется тратить
рекламный бюджет впустую и терять клиентов на сайте.
</Typography>
</Box>
</Box>
</SectionStyled>
)
}

@ -0,0 +1,41 @@
import React from 'react';
import Box from '@mui/material/Box';
import { SxProps, Theme, useMediaQuery } from "@mui/material";
import { useTheme } from "@mui/material/styles";
interface Props {
sxsect?: SxProps<Theme>;
mwidth: string;
padding?: string;
tag: React.ElementType;
bg: string;
children: React.ReactNode;
sxcont?: SxProps<Theme>;
}
export default function Section (props: Props) {
return (
<Box
component={props.tag}
backgroundColor={props.bg}
sx={{
width: '100%',
fontFamily: 'Rubik',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
...props.sxsect
}}
>
<Box
maxWidth={props.mwidth}
sx={{
width: '100%',
...props.sxcont
}}
>
{props.children}
</Box>
</Box>
);
}

@ -0,0 +1,105 @@
import React from 'react';
import Box from '@mui/material/Box';
import {Typography} from "@mui/material";
import Button from "@mui/material/Button";
import SectionStyled from './SectionStyled';
import {styled} from "@mui/material/styles";
const BoxServies = styled('div')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
textAlign: 'center',
width: '100%',
},
}));
const buttonTemplates = ['Услуги', 'Развлечения', 'Строительство и ремонт', 'E-commerce']
function Servises () {
return (
<BoxServies
sx={{
width: '360px',
height: '262px',
backgroundColor: '#ffffff',
borderRadius: '12px',
marginBottom: '10px',
}}
>
<Box
sx={{
width: '360',
height: '180px',
backgroundColor: '#c8dade',
borderRadius: '12px 12px 0 0',
}}
> </Box>
<Box padding={'20px 54px 20px 20px'}>
<Typography fontSize={'18px'} lineHeight={'21.33px'} fontWeight={'500'}>Вдохновляющие фото и видео для свадьбы</Typography>
</Box>
</BoxServies>
)
}
export default function Component () {
const [select, setSelect] = React.useState(0)
return (
<SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
sxsect={{height: '630px'}}
sxcont={{
display: 'flex',
flexDirection: 'column',
padding: '50px 10px 60px 10px',
gap: "30px"
}}
>
<Box
sx={{
minHeight: '109px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
}}
>
<Typography variant='h6' fontSize={'36px'} lineHeight={'42.66px'} fontWeight={'500'}>Начните с готового шаблона</Typography>
<Typography maxWidth={'354px'} fontSize={'18px'} lineHeight={'21.33px'} fontWeight={'500'}>73 готовых шаблонов разных ниш, постоянно пополняем</Typography>
</Box>
<Box
sx={{
width: '53%',
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
}}
>
{buttonTemplates.map( (element, index) => (
<Button key={index}
// to={element[0]}
onClick={() => {
setSelect(index)
}}
variant="text"
sx={{
fontSize: "16px",
fontWeight: 500,
textDecoration: select === index ? "underline" : "none",
textUnderlineOffset: select === index ? "7px" : "",
color: select === index ? '#7E2AEA' : 'black',
textTransform: 'none',
}}>{element} </Button>
))}
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
}}
>
<Servises/>
<Servises/>
<Servises/>
</Box>
</SectionStyled>
)
}

@ -0,0 +1,425 @@
import React, {useState} from 'react';
import Box from '@mui/material/Box';
import {Typography, useMediaQuery, useTheme} from "@mui/material";
import SectionStyled from './SectionStyled';
import Button from "@mui/material/Button";
// 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 }) => ({
// [theme.breakpoints.down('xl')]: {
// alignItems: 'center',
// width: '100%',
// },
// }));
interface Props {
children: React.ReactNode;
image: string;
}
function BoxFich(props: Props) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTabletOnly = useMediaQuery(theme.breakpoints.between(600, 1000))
return(
<Box
sx={{
maxWidth: isTabletOnly ? '801px' : '500px',
minHeight: '350px',
backgroundColor: '#252734',
borderRadius: '12px',
overflow: 'hidden',
display: "flex",
flexDirection: "column",
justifyContent: isMobile ? "space-between" : undefined,
height: isMobile ? "450px" : undefined
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
width: '100%',
minHeight: '50%',
padding: '20px',
flexWrap: 'wrap',
boxSizing: "border-box",
flexDirection: isTabletOnly ? "column" : "row",
gap: isMobile ? "16px" : undefined
}}
>
{props.children}
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'end',
alignItems: 'end',
}}
>
<img src={props.image} width={'96%'}/>
</Box>
</Box>
)
}
export default function Component () {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
const isTabletOnly = useMediaQuery(theme.breakpoints.between(600, 1000))
const [open, setOpen] = useState(false);
return (
<SectionStyled tag={'section'} bg={'#333647'} mwidth={'1160px'}
sxsect={{minHeight: '2074px',}}
sxcont={{
display: 'flex',
justifyContent: 'space-between',
minHeight: '2074px',
padding: isMobile ? "20px 16px 40px 16px" : isTablet ? "30px 40px" : "30px 0",
color: '#ffffff',
flexWrap: "wrap"
}}
>
{/*левая колонка*/}
<Box
sx={{
display: 'flex',
flexDirection: 'column',
gap: isMobile ? "25px" : "120px",
paddingTop: "46px"
}}
>
<Box
sx={{
maxWidth: '400px',
minHeight: '84px',
marginBottom: isMobile ? 0 : "-55px"
}}>
<Typography variant='h1'
sx={{
fontSize:'36px',
fontWeight:'500',
lineHeight:'43px',
}}
>
Что по фичам?
</Typography>
<Typography
sx={{
fontSize:'18px',
fontWeight: '400',
lineHeight: '21px',
margin: '20px 0 10px 0',
}}
>
Самый функциональный конструктор квизов
</Typography>
</Box>
<BoxFich image={Desktop1}>
<Box sx={{maxWidth: isTabletOnly ? '244px' : '174px'}}>
<Typography
sx={{
color: '#7e2aea',
fontSize: '24px',
fontWeight: '500',
lineHeight: '28.44px'
}}
>
01
</Typography>
<Typography variant={'h6'}
sx={{
fontSize: '24px',
fontWeight: '500',
lineHeight: '28.44px'
}}
>Привязка к вашему домену</Typography>
</Box>
<Box sx={{maxWidth: isTabletOnly ? '300px' : '230px'}}>
<Typography
sx={{
fontSize: '18px',
fontWeight: '400',
lineHeight: '21px',
}}
>
Привяжите квиз к своему брендовому домену и получайте
максимальную отдачу от каждой заявки
</Typography>
</Box>
</BoxFich>
<BoxFich image={Desktop2}>
<Box maxWidth={'227px'}>
<Typography
sx={{
color: '#7e2aea',
fontSize: '24px',
fontWeight: '500',
lineHeight: '28.44px'
}}
>03</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={Desktop3}>
<Box maxWidth={'227px'}>
<Typography
sx={{
color: '#7e2aea',
fontSize: '24px',
fontWeight: '500',
lineHeight: '28.44px'
}}
>05</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={Desktop4}>
<Box maxWidth={'226px'}>
<Typography
sx={{
color: '#7e2aea',
fontSize: '24px',
fontWeight: '500',
lineHeight: '28.44px'
}}
>07</Typography>
<Typography variant={'h6'}
sx={{
fontSize: '24px',
fontWeight: '500',
lineHeight: '28.44px'
}}
>Интерактивные тесты</Typography>
</Box>
<Box maxWidth={'234px'}>
<Typography
sx={{
fontSize: '18px',
fontWeight: '400',
lineHeight: '21px',
}}
>
Тест увеличит вовлеченность аудитории, покажет правильные
или неправильные ответы и все это в игровой форме
</Typography>
</Box>
</BoxFich>
</Box>
{/*правая колонка*/}
<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'
}}
>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'
}}
>06</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>
</Box>
<Box
sx={{
maxWidth: '500px',
minHeight: '390px',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
padding: isMobile ? "40px 0 0 0" : '217px 22px 0 20px',
}}
>
<Box
sx={{
display: "flex",
flexDirection: isMobile ? "column-reverse" : "column",
gap: "47px",
alignItems: "flex-start",
}}
>
<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',
fontSize: '18px',
borderRadius: '8px',
padding: '10px 32px',
marginTop: '27px',
}}>
Создать квиз</Button>
</Box>
</Box>
</SectionStyled>
)
}

@ -0,0 +1,149 @@
import React from 'react';
import Box from '@mui/material/Box';
import {Typography} from "@mui/material";
import Button from "@mui/material/Button";
import SectionStyled from './SectionStyled';
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
// import Quotes from './image/quotes.svg';
import {styled} from "@mui/material/styles";
import TitleIcon from "../../assets/LandingPict/titleIcon";
const BoxCard = styled('div')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
justifyContent: 'center',
width: '100%',
},
}));
const BoxText = styled('div')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
},
}));
const BoxButtons = styled('div')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
justifyContent: 'space-evenly',
width: '100%',
marginTop: '20px',
},
}));
export default function Component () {
return(
<SectionStyled tag={'section'} bg={'#ffffff'} mwidth={'1160px'}
sxsect={{minHeight: '708px'}}
sxcont={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-around',
height: '100%',
padding: '77px 10px 50px 10px',
}}
>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
width: '100%',
}}
>
<BoxText
sx={{
width: '50%',
display: 'flex',
flexDirection: 'column',
gap: "10px"
}}
>
<Typography variant='h6' fontSize={'36px'}>Что говорят</Typography>
<Typography maxWidth={'310px'} fontSize={'18px'}>Более 80 000 предпринимателей, маркетологов и команд с нами</Typography>
</BoxText>
<BoxButtons
sx={{
width: '50%',
display: 'flex',
justifyContent: 'end',
}}
>
<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>
</BoxButtons>
</Box>
<BoxCard
sx={{
minHeight: '400px',
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
padding: '0 37px 0 18px',
marginTop: '80px',
}}
>
<Box width={'305px'} height={"383px"}>
<TitleIcon/>
<Typography marginTop={'20px'} fontSize={'14px'} lineHeight={'16.59px'} fontWeight={'600'}>Пожалуй самый комфортный и удобный.</Typography>
<Typography fontSize={'14px'} lineHeight={'16.59px'}
>
Пользуюсь марквизом более 2 лет в разных направлениях.
Тестировал моклиентс и енвибокс.
Но на этапе тестирования примуществом овладел марквиз.
Удобное расположение кнопок, класный редактор, интуитивно понятный интерфейс.
Море удобных функций, до которых схожим сервисам еще расти и расти! А главное, это супер тех.
поддержка!!! Отвечают в течении минуты, решают любой вопрос очень быстро и как никто лояльны.
Всем рекомендую!!!
</Typography>
<Typography marginTop={'30px'} fontSize={'14px'} lineHeight={'16.59px'} fontWeight={'600'}>Полина К.</Typography>
<Typography marginTop={'8px'} color={'#4d4d4d'} fontSize={'14px'}>03.06.2022</Typography>
</Box>
<Box width={'321px'} height={"383px"}>
<TitleIcon/>
<Typography marginTop={'20px'} fontSize={'14px'} lineHeight={'16.59px'} fontWeight={'600'}>Marquiz отличный инструмент для привлечения реальных клиентов</Typography>
<Typography fontSize={'14px'} lineHeight={'16.59px'}>
До Marquiz использовал другой онлайн-конструктор,
в сравнении с которым Marquiz набирает 100 баллов из 100!
Нравится тут расположение кнопок, простой интерфейс, широкие возможности кастомизации,
отзывчивость техподдержки. И самое главное, что работает все четко и без сбоев!
С задачей своей сервис справляется на ура - позволяет найти потенциального клиента и превратить
его в покупателя!</Typography>
<Typography marginTop={'48px'} fontSize={'14px'} lineHeight={'16.59px'} fontWeight={'600'}>Полина К.</Typography>
<Typography marginTop={'8px'} color={'#4d4d4d'} fontSize={'14px'}>03.06.2022</Typography>
</Box>
<Box width={'305px'} height={"383px"}>
<TitleIcon/>
<Typography marginTop={'20px'} fontSize={'14px'} lineHeight={'16.59px'} fontWeight={'600'}>Пожалуй самый комфортный и удобный.</Typography>
<Typography fontSize={'14px'} lineHeight={'16.59px'}>
Пользуюсь марквизом более 2 лет в разных направлениях.
Тестировал моклиентс и енвибокс.
Но на этапе тестирования примуществом овладел марквиз.
Удобное расположение кнопок, класный редактор, интуитивно понятный интерфейс.
Море удобных функций, до которых схожим сервисам еще расти и расти! А главное, это супер тех.
поддержка!!! Отвечают в течении минуты, решают любой вопрос очень быстро и как никто лояльны.
Всем рекомендую!!!
</Typography>
<Typography marginTop={'30px'} fontSize={'14px'} lineHeight={'16.59px'} fontWeight={'600'}>Полина К.</Typography>
<Typography marginTop={'8px'} color={'#4d4d4d'} fontSize={'14px'}>03.06.2022</Typography>
</Box>
</BoxCard>
</SectionStyled>
)
}

@ -0,0 +1,249 @@
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" },
padding: isMobile ? 0 : "0 22px 0 40px"
}}
>
<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}}} />
</>
);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 295 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 167 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 325 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 615 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 452 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 475 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 595 KiB

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

File diff suppressed because one or more lines are too long

@ -0,0 +1,32 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M25.8191 22.2188H10.2095C9.81766 22.2188 9.5 22.3035 9.5 22.408V25.8137C9.5 25.9182 9.81766 26.0029 10.2095 26.0029H25.8191C26.2109 26.0029 26.5286 25.9182 26.5286 25.8137V22.408C26.5286 22.3035 26.2109 22.2188 25.8191 22.2188Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="11.4443" cy="24.167" r="0.807589" fill="white"/>
<path d="M25.8191 16.1016H10.2095C9.81766 16.1016 9.5 16.1863 9.5 16.2908V19.6965C9.5 19.801 9.81766 19.8857 10.2095 19.8857H25.8191C26.2109 19.8857 26.5286 19.801 26.5286 19.6965V16.2908C26.5286 16.1863 26.2109 16.1016 25.8191 16.1016Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="11.4443" cy="18.0498" r="0.807589" fill="white"/>
<path d="M25.8191 10H10.2095C9.81766 10 9.5 10.0847 9.5 10.1892V13.5949C9.5 13.6994 9.81766 13.7841 10.2095 13.7841H25.8191C26.2109 13.7841 26.5286 13.6994 26.5286 13.5949V10.1892C26.5286 10.0847 26.2109 10 25.8191 10Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="11.4443" cy="11.9482" r="0.807589" fill="white"/>
</svg>
</Box>
)
};

@ -0,0 +1,30 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M16.5624 10.3047H9.80706C9.63748 10.3047 9.5 10.6421 9.5 11.0584V24.6249C9.5 25.0411 9.63748 25.3786 9.80706 25.3786H16.5624C16.732 25.3786 16.8695 25.0411 16.8695 24.6249V11.0584C16.8695 10.6421 16.732 10.3047 16.5624 10.3047Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="11.3918" cy="12.2004" r="0.786375" fill="white"/>
<path d="M26.1913 10.3047H19.436C19.2664 10.3047 19.1289 10.6421 19.1289 11.0584V24.6249C19.1289 25.0411 19.2664 25.3786 19.436 25.3786H26.1913C26.3609 25.3786 26.4984 25.0411 26.4984 24.6249V11.0584C26.4984 10.6421 26.3609 10.3047 26.1913 10.3047Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="21.0208" cy="12.2004" r="0.786375" fill="white"/>
</svg>
</Box>
)
};

@ -0,0 +1,34 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M16.9408 21.9531H10.1112C9.93977 21.9531 9.80078 22.0325 9.80078 22.1305V25.3235C9.80078 25.4215 9.93977 25.5009 10.1112 25.5009H16.9408C17.1122 25.5009 17.2512 25.4215 17.2512 25.3235V22.1305C17.2512 22.0325 17.1122 21.9531 16.9408 21.9531Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="11.6243" cy="23.7728" r="0.757156" fill="white"/>
<path d="M16.9408 16.2266H10.1112C9.93977 16.2266 9.80078 16.306 9.80078 16.404V19.597C9.80078 19.695 9.93977 19.7744 10.1112 19.7744H16.9408C17.1122 19.7744 17.2512 19.695 17.2512 19.597V16.404C17.2512 16.306 17.1122 16.2266 16.9408 16.2266Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="11.6243" cy="18.0462" r="0.757156" fill="white"/>
<path d="M16.9408 10.5H10.1112C9.93977 10.5 9.80078 10.5794 9.80078 10.6774V13.8704C9.80078 13.9684 9.93977 14.0478 10.1112 14.0478H16.9408C17.1122 14.0478 17.2512 13.9684 17.2512 13.8704V10.6774C17.2512 10.5794 17.1122 10.5 16.9408 10.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="11.6243" cy="12.3197" r="0.757156" fill="white"/>
<path d="M26.2297 10.5H19.7253C19.5621 10.5 19.4297 10.8358 19.4297 11.25V24.75C19.4297 25.1642 19.5621 25.5 19.7253 25.5H26.2297C26.3929 25.5 26.5253 25.1642 26.5253 24.75V11.25C26.5253 10.8358 26.3929 10.5 26.2297 10.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="21.097" cy="12.3197" r="0.757156" fill="white"/>
</svg>
</Box>
)
};

@ -0,0 +1,30 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M18 26C18.7963 25.9995 19.5881 25.8815 20.35 25.65L26 18C26 16.4178 25.5308 14.871 24.6518 13.5554C23.7727 12.2398 22.5233 11.2145 21.0615 10.609C19.5997 10.0035 17.9911 9.84504 16.4393 10.1537C14.8874 10.4624 13.462 11.2243 12.3431 12.3431C11.2243 13.462 10.4624 14.8874 10.1537 16.4393C9.84504 17.9911 10.0035 19.5997 10.609 21.0615C11.2145 22.5233 12.2398 23.7727 13.5554 24.6518C14.871 25.5308 16.4178 26 18 26Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 17.3359C15.5523 17.3359 16 16.8882 16 16.3359C16 15.7837 15.5523 15.3359 15 15.3359C14.4477 15.3359 14 15.7837 14 16.3359C14 16.8882 14.4477 17.3359 15 17.3359Z" fill="white"/>
<path d="M21 17.3359C21.5523 17.3359 22 16.8882 22 16.3359C22 15.7837 21.5523 15.3359 21 15.3359C20.4477 15.3359 20 15.7837 20 16.3359C20 16.8882 20.4477 17.3359 21 17.3359Z" fill="white"/>
<path d="M21.4685 20C21.1161 20.6072 20.6104 21.1111 20.002 21.4614C19.3936 21.8117 18.7039 21.9961 18.0018 21.9961C17.2998 21.9961 16.6101 21.8117 16.0017 21.4614C15.3933 21.1111 14.8876 20.6072 14.5352 20" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
)
};

@ -0,0 +1,29 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M25.3333 10.3047H10.6667C10.2985 10.3047 10 10.6412 10 11.0563V24.5858C10 25.0009 10.2985 25.3374 10.6667 25.3374H25.3333C25.7015 25.3374 26 25.0009 26 24.5858V11.0563C26 10.6412 25.7015 10.3047 25.3333 10.3047Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.9102 13.2109H23.8192" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.9102 16.125H20.1829" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
)
};

@ -0,0 +1,33 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M25.3332 10.3984H10.6667C10.2985 10.3984 10 10.735 10 11.1501V24.6794C10 25.0945 10.2985 25.431 10.6667 25.431H25.3332C25.7014 25.431 25.9999 25.0945 25.9999 24.6794V11.1501C25.9999 10.735 25.7014 10.3984 25.3332 10.3984Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.7266 15.7344H25.9992" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.1797 20.8281H20.1796" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.1797 18.6406H20.1796" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.1797 23.0078H20.1796" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1797 15.0078L20.1797 10.6442" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.3633 12.8201L23.0744 13.5313L23.7855 12.8201" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
)
};

@ -0,0 +1,39 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M25.4788 10.9343H10.673C10.3013 10.9343 10 11.2492 10 11.6376V24.296C10 24.6844 10.3013 24.9993 10.673 24.9993H25.4788C25.8505 24.9993 26.1518 24.6844 26.1518 24.296V11.6376C26.1518 11.2492 25.8505 10.9343 25.4788 10.9343Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 15.0022H26.1518" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.1523 19.8173H13.8752" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.1523 17.5964H13.8752" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.1523 22.0306H13.8752" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.1758 19.8173H18.8986" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.1758 17.5964H18.8986" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.1758 22.0306H18.8986" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.2031 19.8173H23.926" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.2031 17.5964H23.926" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.2031 22.0306H23.926" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.2305 12.7814L13.2305 9.82033" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M23.2812 12.7814L23.2813 9.82033" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
)
};

@ -0,0 +1,30 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M21.6923 19.1797H25.3846C25.5478 19.1797 25.7044 19.2321 25.8198 19.3255C25.9352 19.4188 26 19.5454 26 19.6775V23.6597C26 23.7917 25.9352 23.9183 25.8198 24.0117C25.7044 24.105 25.5478 24.1575 25.3846 24.1575H10.6154C10.4522 24.1575 10.2956 24.105 10.1802 24.0117C10.0648 23.9183 10 23.7917 10 23.6597V19.6775C10 19.5454 10.0648 19.4188 10.1802 19.3255C10.2956 19.2321 10.4522 19.1797 10.6154 19.1797H14.3077" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18 19.2444V10" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.3086 13.6923L18.0009 10L21.6932 13.6923" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M23.5599 22.4713C23.9791 22.4713 24.319 22.1315 24.319 21.7122C24.319 21.293 23.9791 20.9531 23.5599 20.9531C23.1406 20.9531 22.8008 21.293 22.8008 21.7122C22.8008 22.1315 23.1406 22.4713 23.5599 22.4713Z" fill="white"/>
</svg>
</Box>
)
};

@ -0,0 +1,28 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M18 20.237H11.0333C9.63421 20.237 8.5 19.1027 8.5 17.7036V17.7036C8.5 16.3045 9.63421 15.1703 11.0333 15.1703L18.4318 15.1703M24.0455 20.237H24.9667C26.3658 20.237 27.5 19.1027 27.5 17.7036V17.7036C27.5 16.3045 26.3658 15.1703 24.9667 15.1703H23.6136" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="20.9561" cy="17.892" r="3.58889" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
)
};

@ -0,0 +1,32 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M25.6426 10H10.6801C10.3045 10 10 10.3433 10 10.7668V24.5691C10 24.9926 10.3045 25.3359 10.6801 25.3359H25.6426C26.0182 25.3359 26.3227 24.9926 26.3227 24.5691V10.7668C26.3227 10.3433 26.0182 10 25.6426 10Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 14.6641H26.3227" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.2266 12.4375H24.0976" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 21.4587L14.7155 17.4688L20.1564 22.5469" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="18.3913" cy="17.7038" r="0.774113" fill="white"/>
<path d="M18.707 20.9141L21.2461 18.375" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21.2461 18.375L26.3243 22.365" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
)
};

@ -0,0 +1,30 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M12.2045 26.495C13.6982 26.495 14.9091 25.2842 14.9091 23.7905C14.9091 22.2968 13.6982 21.0859 12.2045 21.0859C10.7109 21.0859 9.5 22.2968 9.5 23.7905C9.5 25.2842 10.7109 26.495 12.2045 26.495Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M23.7944 14.9091C25.2881 14.9091 26.4989 13.6982 26.4989 12.2045C26.4989 10.7109 25.2881 9.5 23.7944 9.5C22.3007 9.5 21.0898 10.7109 21.0898 12.2045C21.0898 13.6982 22.3007 14.9091 23.7944 14.9091Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.2045 14.9091C13.6982 14.9091 14.9091 13.6982 14.9091 12.2045C14.9091 10.7109 13.6982 9.5 12.2045 9.5C10.7109 9.5 9.5 10.7109 9.5 12.2045C9.5 13.6982 10.7109 14.9091 12.2045 14.9091Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.2031 21.0959V20.3232C12.2019 20.0184 12.261 19.7163 12.377 19.4345C12.4931 19.1527 12.6638 18.8966 12.8793 18.6811C13.0948 18.4656 13.3509 18.2949 13.6327 18.1788C13.9145 18.0628 14.2165 18.0037 14.5213 18.005H21.4759C21.7807 18.0062 22.0827 17.9472 22.3645 17.8311C22.6463 17.7151 22.9024 17.5444 23.1179 17.3288C23.3334 17.1133 23.5042 16.8573 23.6202 16.5754C23.7362 16.2936 23.7953 15.9916 23.7941 15.6868V14.9141" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.2031 14.9141V21.0959" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
)
};

@ -0,0 +1,31 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M25 10H11C10.4477 10 10 10.4477 10 11V25C10 25.5523 10.4477 26 11 26H25C25.5523 26 26 25.5523 26 25V11C26 10.4477 25.5523 10 25 10Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 14.5H16.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.6992 20H23.1992" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.6992 22.5H23.1992" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20 13L23 16M23 13L20 16" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.6016 21.2969H16.8442M14.7229 19.1756V23.4182" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
)
};

@ -0,0 +1,28 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M18.6561 25.9765L11.6259 19.5321C11.195 19.137 10.5 19.4428 10.5 20.0274C10.5 20.4321 10.675 20.8216 10.9915 21.1042L17.4814 27.0532C18.1312 27.6489 19.1893 27.6489 19.8391 27.0532L25.0126 22.3108C25.4214 21.9361 25.573 21.4133 25.4676 20.9288C25.3572 20.422 24.7192 20.4185 24.3369 20.769L18.6561 25.9765Z" fill="white"/>
<path d="M17.4853 23.0083C17.8104 23.3333 18.2355 23.5 18.6606 23.5C19.0857 23.5 19.5108 23.3333 19.8359 23.0083L25.0124 17.8333C25.6625 17.1833 25.6625 16.125 25.0124 15.475L18.5189 8.98333C18.2105 8.675 17.7854 8.5 17.3436 8.5H12.1671C11.2502 8.5 10.5 9.25 10.5 10.1667V15.3417C10.5 15.7833 10.675 16.2083 10.9918 16.5167L17.4853 23.0083ZM12.1671 10.1667H17.3436L23.837 16.6583L18.6606 21.8333L12.1671 15.3417V10.1667Z" fill="white"/>
<path d="M14.5 13.5C15.0523 13.5 15.5 13.0523 15.5 12.5C15.5 11.9477 15.0523 11.5 14.5 11.5C13.9477 11.5 13.5 11.9477 13.5 12.5C13.5 13.0523 13.9477 13.5 14.5 13.5Z" fill="white"/>
</svg>
</Box>
)
};

@ -0,0 +1,27 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<circle cx="4" cy="4" r="4" transform="matrix(-1 0 0 1 22 9)" stroke="white" stroke-width="1.5"/>
<path d="M11 22.9347C11 22.0743 11.5409 21.3068 12.3511 21.0175V21.0175C16.004 19.7128 19.996 19.7128 23.6489 21.0175V21.0175C24.4591 21.3068 25 22.0743 25 22.9347V24.2502C25 25.4376 23.9483 26.3498 22.7728 26.1818L21.8184 26.0455C19.2856 25.6837 16.7144 25.6837 14.1816 26.0455L13.2272 26.1818C12.0517 26.3498 11 25.4376 11 24.2502V22.9347Z" stroke="white" stroke-width="1.5"/>
</svg>
</Box>
)
};

@ -0,0 +1,28 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M18 13V9H14" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 13H12C10.8954 13 10 13.8954 10 15V23C10 24.1046 10.8954 25 12 25H24C25.1046 25 26 24.1046 26 23V15C26 13.8954 25.1046 13 24 13Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 19H10M26 19H28M21 18V20M15 18V20" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
)
};

File diff suppressed because one or more lines are too long

@ -0,0 +1,28 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<rect x="8" y="10" width="20" height="16" rx="5" stroke="white" stroke-width="1.5"/>
<path d="M8 15.5H28" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 21.5H17" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
)
};

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

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

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

@ -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,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>
);
}

@ -0,0 +1,28 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<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="white" stroke-width="1.5" stroke-miterlimit="10"/>
<path d="M9.51562 15H26.4844" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.51562 21H26.4844" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18 26.7563C20.0711 26.7563 21.75 22.836 21.75 18C21.75 13.1641 20.0711 9.24377 18 9.24377C15.9289 9.24377 14.25 13.1641 14.25 18C14.25 22.836 15.9289 26.7563 18 26.7563Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
</svg></Box>
)
};

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

@ -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,0 +1,27 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M14.1429 16.7143L10.0651 20.792C9.38314 21.474 9 22.399 9 23.3635C9 25.3719 10.6281 27 12.6365 27C13.601 27 14.526 26.6169 15.208 25.9349L19.2857 21.8571M21.8571 19.2857L25.9349 15.208C26.6169 14.526 27 13.601 27 12.6365C27 10.6281 25.3719 9 23.3635 9C22.399 9 21.474 9.38313 20.792 10.0651L16.7143 14.1429M14.1429 21.8571L21.8571 14.1429" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
)
};

@ -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>

After

Width:  |  Height:  |  Size: 6.4 KiB

@ -0,0 +1,27 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M20.0217 8.5V22.1552C20.0217 24.5548 18.1141 26.5 15.7609 26.5C13.4077 26.5 11.5 24.5548 11.5 22.1552C11.5 19.7556 13.4077 17.8103 15.7609 17.8103M25.5 15.3276C22.4744 15.3276 20.0217 12.8266 20.0217 9.74138" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
)
};

@ -0,0 +1,26 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function ({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="#7E2AEA"/>
<path d="M21.073 8H14.937C9.333 8 8 9.333 8 14.927V21.063C8 26.666 9.323 28 14.927 28H21.063C26.666 28 28 26.677 28 21.073V14.937C28 9.333 26.677 8 21.073 8ZM24.146 22.27H22.687C22.135 22.27 21.969 21.823 20.979 20.833C20.115 20 19.75 19.896 19.531 19.896C19.229 19.896 19.146 19.979 19.146 20.396V21.708C19.146 22.063 19.031 22.271 18.104 22.271C17.2043 22.2105 16.3319 21.9372 15.5586 21.4735C14.7853 21.0098 14.1332 20.3691 13.656 19.604C12.5232 18.194 11.7349 16.5391 11.354 14.771C11.354 14.552 11.437 14.354 11.854 14.354H13.312C13.687 14.354 13.822 14.521 13.969 14.906C14.677 16.99 15.885 18.802 16.375 18.802C16.563 18.802 16.645 18.719 16.645 18.25V16.104C16.583 15.125 16.063 15.042 16.063 14.688C16.0697 14.5946 16.1125 14.5075 16.1823 14.4452C16.2521 14.3828 16.3435 14.3501 16.437 14.354H18.729C19.042 14.354 19.146 14.51 19.146 14.885V17.781C19.146 18.094 19.281 18.198 19.375 18.198C19.563 18.198 19.708 18.094 20.052 17.75C20.7909 16.8489 21.3945 15.8451 21.844 14.77C21.8899 14.6409 21.9769 14.5303 22.0915 14.4552C22.2062 14.3801 22.3423 14.3445 22.479 14.354H23.938C24.375 14.354 24.468 14.573 24.375 14.885C23.8445 16.0734 23.1881 17.2015 22.417 18.25C22.26 18.49 22.197 18.615 22.417 18.896C22.562 19.115 23.073 19.542 23.417 19.948C23.9169 20.4466 24.332 21.0236 24.646 21.656C24.771 22.062 24.562 22.27 24.146 22.27Z" fill="white"/>
</svg>
</Box>
)
};

62
src/stores/contactForm.ts Normal file

@ -0,0 +1,62 @@
import { create } from "zustand";
import { sendContactFormRequest } from "../api/contactForm";
import { getMessageFromFetchError } from "../utils/backendMessageHandler";
interface ContactFormStore {
isModalOpen: boolean;
isSubmitDisabled: boolean;
mail: string;
phoneNumberField: string;
telegramField: string;
whatsappField: string;
}
const initialState: ContactFormStore = {
isModalOpen: false,
isSubmitDisabled: false,
mail: "",
phoneNumberField: "",
telegramField: "",
whatsappField: "",
};
export const useContactFormStore = create<ContactFormStore>()(
(set, get) => initialState
);
export const setIsContactFormOpen = (isModalOpen: ContactFormStore["isModalOpen"]) => useContactFormStore.setState({ isModalOpen });
export const setContactFormMailField = (mail: ContactFormStore["mail"]) => useContactFormStore.setState({ mail });
export const setContactFormTelegramField = (telegramField: ContactFormStore["telegramField"]) => useContactFormStore.setState({ telegramField });
export const setIsSubmitDisabled = (isSubmitDisabled: ContactFormStore["isSubmitDisabled"]) => useContactFormStore.setState({ isSubmitDisabled });
export const setContactFormPhoneNumberField = (phoneNumberField: ContactFormStore["phoneNumberField"]) => {
if (/^\+?\d*$/.test(phoneNumberField)) useContactFormStore.setState({ phoneNumberField });
};
export const setContactFormWhatsappField = (whatsappField: ContactFormStore["whatsappField"]) => {
if (/^\+?\d*$/.test(whatsappField)) useContactFormStore.setState({ whatsappField });
};
export const sendContactForm = async (): Promise<string | null> => {
const { mail, phoneNumberField, telegramField, whatsappField } = useContactFormStore.getState();
if (!mail) return "Почта не указана";
if (!mail.includes("@")) return "Почта некорректна";
let contact = "Опросник, предрегистрация";
try {
useContactFormStore.setState({ isSubmitDisabled: true });
const response = await sendContactFormRequest({
contact,
whoami: mail,
});
if (response.status !== 200) throw new Error(response.statusText);
useContactFormStore.setState({ ...initialState });
return "Данные отправлены";
} catch (error: any) {
useContactFormStore.setState({ isSubmitDisabled: false });
return getMessageFromFetchError(error);
}
};

@ -155,7 +155,7 @@ export const createQuestion = (
questionType: QuizQuestionType = "nonselected",
placeIndex = -1
) => {
const id = getRandom(1000000, 10000000);
const id = getRandom();
const newData = { ...questionStore.getState()["listQuestions"] };
if (!newData[quizId]) {
@ -191,10 +191,12 @@ export const createQuestion = (
export const copyQuestion = (quizId: number, copiedQuestionIndex: number) => {
const listQuestions = { ...questionStore.getState()["listQuestions"] };
const copiedQuiz = listQuestions[quizId][copiedQuestionIndex]
copiedQuiz.id = getRandom()
listQuestions[quizId].splice(
copiedQuestionIndex,
0,
listQuestions[quizId][copiedQuestionIndex]
copiedQuiz
);
questionStore.setState({ listQuestions });
@ -232,8 +234,8 @@ export const findQuestionById = (quizId: number) => {
return found;
};
function getRandom(min: number, max: number) {
min = Math.ceil(min);
max = Math.floor(max);
function getRandom() {
const min = Math.ceil(1000000);
const max = Math.floor(10000000);
return Math.floor(Math.random() * (max - min)) + min;
}

142
src/ui_kit/ContactForm.tsx Normal file

@ -0,0 +1,142 @@
import { Box, Button, IconButton, TextField, Typography, useMediaQuery, useTheme, Modal } from "@mui/material";
import {
sendContactForm,
setContactFormMailField,
setIsContactFormOpen,
useContactFormStore,
} from "../stores/contactForm";
import { enqueueSnackbar } from "notistack";
import X from "../assets/icons/x";
import PenaLogo from "../ui_kit/PenaLogo";
export default () => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
const isModalOpen = useContactFormStore((state) => state.isModalOpen);
const isSubmitDisabled = useContactFormStore((state) => state.isSubmitDisabled);
const mail = useContactFormStore((state) => state.mail);
const upMd = useMediaQuery(theme.breakpoints.up("md"));
async function handleSendForm() {
const message = await sendContactForm();
if (message) enqueueSnackbar(message);
}
return (
<Modal
disableScrollLock
open={isModalOpen}
onClose={() => setIsContactFormOpen(false)}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box
component="form"
noValidate
sx={{
width: "600px",
height: "474px",
margin: "200px auto 0",
position: "relative",
backgroundColor: "white",
display: "flex",
alignItems: "center",
flexDirection: "column",
p: upMd ? "50px" : "18px",
pb: upMd ? "40px" : "30px",
gap: "15px",
borderRadius: "12px",
boxSizing: "border-box",
"& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled":
{
position: "absolute",
top: "46px",
margin: "0",
},
}}
>
<IconButton
onClick={() => setIsContactFormOpen(false)}
sx={{
position: "absolute",
right: "7px",
top: "7px",
}}
>
<X/>
</IconButton>
<Box>
<PenaLogo width={upMd ? 233 : 196} />
</Box>
<Typography
sx={{
mt: "0px",
mb: upMd ? "13px" : "33px",
}}
>
Предрегистрация
</Typography>
<Typography
sx={{textAlign: "left",
width: "100%",
fontWeight: 500
}}
>E-mail</Typography>
<TextField
value={mail}
onChange={(e) => setContactFormMailField(e.target.value)}
placeholder="username@penahaub.com"
name="name"
fullWidth
sx={{
width: isMobile ? "266px" : "100%",
// mt: "25px",
mb: "10px",
"& .MuiInputBase-root": {
backgroundColor: "#F2F3F7",
height: "45px",
borderRadius: "10px",
},
}}
inputProps={{
sx: {
borderRadius: "10px",
fontSize: "18px",
lineHeight: "21px",
py: 0,
},
}}
/>
<Button
variant='contained'
fullWidth
onClick={handleSendForm}
sx={{
py: "12px",
"&:hover": {
},
"&:active": {
color: "white",
backgroundColor: "black",
},
}}
>
Отправить
</Button>
<Typography
sx={{
mt: "16px",
mb: upMd ? "10px" : "33px",
textAlign: "center",
maxWidth: "440px"
}}
>
После запуска продукта вам придет сообщение
на указанную электронную почту
</Typography>
</Box>
</Modal>
);
};

@ -4,15 +4,18 @@ import { Link, Typography, useTheme } from "@mui/material";
interface Props {
text: string;
isActive?: boolean;
onClick?: () => void;
href?: string
}
export default function NavMenuItem({ text, isActive = false }: Props) {
export default function NavMenuItem({ href, onClick, text, isActive = false }: Props) {
const theme = useTheme();
return (
<Link
href="#"
href={href}
underline="none"
onClick={onClick}
>
<Typography
color={isActive ? theme.palette.brightPurple.main : undefined}

@ -0,0 +1,35 @@
import { isAxiosError } from "axios";
const backendErrorMessage: Record<string, string> = {
"user not found": "Пользователь не найден",
"invalid password": "Неправильный пароль",
"field <password> is empty": 'Поле "Пароль" не заполнено',
"field <login> is empty": 'Поле "Логин" не заполнено',
"field <email> is empty": 'Поле "E-mail" не заполнено',
"field <phoneNumber> is empty": 'Поле "Номер телефона" не заполнено',
"user with this email or login is exist": "Пользователь уже существует",
};
const unknownErrorMessage = "Что-то пошло не так. Повторите попытку позже";
export function getMessageFromFetchError(error: any): string | null {
if (process.env.NODE_ENV !== "production") console.log(error);
const message = backendErrorMessage[error.response?.data?.message];
if (message) return message;
if (error.message === "Failed to fetch") return "Ошибка сети";
if (isAxiosError(error)) {
switch (error.code) {
case "ERR_NETWORK":
return "Ошибка сети";
case "ERR_CANCELED":
return null;
case "ERR_BAD_REQUEST":
return "Слишком много запросов";
}
}
return unknownErrorMessage;
}

275
yarn.lock

@ -1034,24 +1034,10 @@
core-js-pure "^3.25.1"
regenerator-runtime "^0.13.11"
"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.20.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
version "7.20.6"
resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.6.tgz"
integrity sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==
dependencies:
regenerator-runtime "^0.13.11"
"@babel/runtime@^7.15.4":
version "7.22.6"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
dependencies:
regenerator-runtime "^0.13.11"
"@babel/runtime@^7.23.1":
version "7.23.1"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d"
integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==
"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.20.1", "@babel/runtime@^7.23.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
version "7.23.2"
resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz"
integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
dependencies:
regenerator-runtime "^0.14.0"
@ -1227,12 +1213,12 @@
"@emoji-mart/data@^1.1.2":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@emoji-mart/data/-/data-1.1.2.tgz#777c976f8f143df47cbb23a7077c9ca9fe5fc513"
resolved "https://registry.npmjs.org/@emoji-mart/data/-/data-1.1.2.tgz"
integrity sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg==
"@emoji-mart/react@^1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@emoji-mart/react/-/react-1.1.1.tgz#ddad52f93a25baf31c5383c3e7e4c6e05554312a"
resolved "https://registry.npmjs.org/@emoji-mart/react/-/react-1.1.1.tgz"
integrity sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==
"@emotion/babel-plugin@^11.10.5":
@ -1360,14 +1346,14 @@
"@floating-ui/core@^1.4.2":
version "1.5.0"
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
resolved "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz"
integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
dependencies:
"@floating-ui/utils" "^0.1.3"
"@floating-ui/dom@^1.5.1":
version "1.5.3"
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz"
integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
dependencies:
"@floating-ui/core" "^1.4.2"
@ -1375,14 +1361,14 @@
"@floating-ui/react-dom@^2.0.2":
version "2.0.2"
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20"
resolved "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz"
integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==
dependencies:
"@floating-ui/dom" "^1.5.1"
"@floating-ui/utils@^0.1.3":
version "0.1.6"
resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz"
integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
"@humanwhocodes/config-array@^0.11.6":
@ -1706,14 +1692,14 @@
react-is "^18.2.0"
"@mui/base@^5.0.0-beta.17":
version "5.0.0-beta.18"
resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.18.tgz#f95d393cf80974e77c0823170cc15c854d5af84b"
integrity sha512-e9ZCy/ndhyt5MTshAS3qAUy/40UiO0jX+kAo6a+XirrPJE+rrQW+mKPSI0uyp+5z4Vh+z0pvNoJ2S2gSrNz3BQ==
version "5.0.0-beta.19"
resolved "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.19.tgz"
integrity sha512-maNBgAscddyPNzFZQUJDF/puxM27Li+NqSBsr/lAP8TLns2VvWS2SoL3OKFOIoRnAMKGY/Ic6Aot6gCYeQnssA==
dependencies:
"@babel/runtime" "^7.23.1"
"@floating-ui/react-dom" "^2.0.2"
"@mui/types" "^7.2.5"
"@mui/utils" "^5.14.12"
"@mui/types" "^7.2.6"
"@mui/utils" "^5.14.13"
"@popperjs/core" "^2.11.8"
clsx "^2.0.0"
prop-types "^15.8.1"
@ -1781,31 +1767,15 @@
csstype "^3.1.1"
prop-types "^15.8.1"
"@mui/types@^7.2.2":
version "7.2.2"
resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.2.tgz"
integrity sha512-siex8cZDtWeC916cXOoUOnEQQejuMYmHtc4hM6VkKVYaBICz3VIiqyiAomRboTQHt2jchxQ5Q5ATlbcDekTxDA==
"@mui/types@^7.2.2", "@mui/types@^7.2.6":
version "7.2.6"
resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.6.tgz"
integrity sha512-7sjLQrUmBwufm/M7jw/quNiPK/oor2+pGUQP2CULRcFCArYTq78oJ3D5esTaL0UMkXKJvDqXn6Ike69yAOBQng==
"@mui/types@^7.2.5":
version "7.2.5"
resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.5.tgz#cd62a1fc5eb1044137ccab2053b431dd7cfc3cb8"
integrity sha512-S2BwfNczr7VwS6ki8GoAXJyARoeSJDLuxOEPs3vEMyTALlf9PrdHv+sluX7kk3iKrCg/ML2mIWwapZvWbkMCQA==
"@mui/utils@^5.10.16":
version "5.10.16"
resolved "https://registry.npmjs.org/@mui/utils/-/utils-5.10.16.tgz"
integrity sha512-3MB/SGsgiiu9Z55CFmAfiONUoR7AAue/H4F6w3mc2LnhFQCsoVvXhioDPcsiRpUMIQr34jDPzGXdCuqWooPCXQ==
dependencies:
"@babel/runtime" "^7.20.1"
"@types/prop-types" "^15.7.5"
"@types/react-is" "^16.7.1 || ^17.0.0"
prop-types "^15.8.1"
react-is "^18.2.0"
"@mui/utils@^5.14.11", "@mui/utils@^5.14.12":
version "5.14.12"
resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.12.tgz#58b570839e22e0fba71e17d37d9c083fe233704d"
integrity sha512-RFNXnhKQlzIkIUig6mmv0r5VbtjPdWoaBPYicq25LETdZux59HAqoRdWw15T7lp3c7gXOoE8y67+hTB8C64m2g==
"@mui/utils@^5.10.16", "@mui/utils@^5.14.11", "@mui/utils@^5.14.13":
version "5.14.13"
resolved "https://registry.npmjs.org/@mui/utils/-/utils-5.14.13.tgz"
integrity sha512-2AFpyXWw7uDCIqRu7eU2i/EplZtks5LAMzQvIhC79sPV9IhOZU2qwOWVnPtdctRXiQJOAaXulg+A37pfhEueQw==
dependencies:
"@babel/runtime" "^7.23.1"
"@types/prop-types" "^15.7.7"
@ -1813,9 +1783,9 @@
react-is "^18.2.0"
"@mui/x-date-pickers@^6.16.1":
version "6.16.1"
resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-6.16.1.tgz#76341384ef51db5f405f779fe5f2e9456b2cdc53"
integrity sha512-4B2+DU7aywYdvmr10o2qai6kbbR26zta/v1y8x3bmTilI/KcbhZ2OlsyArPKmTRNC8VYirejSnhLkPR/+JIkPg==
version "6.16.2"
resolved "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.16.2.tgz"
integrity sha512-JFrDUeBkiKtfJ0WqwyPBICEP1U+Ujfsily3ZQ/Hv4zAOleG/5769EgS7TOO4cVgnuhtvQ/pqx2gmuCn8/gcC5w==
dependencies:
"@babel/runtime" "^7.23.1"
"@mui/base" "^5.0.0-beta.17"
@ -1868,29 +1838,24 @@
schema-utils "^3.0.0"
source-map "^0.7.3"
"@popperjs/core@^2.11.6":
version "2.11.6"
resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz"
integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
"@popperjs/core@^2.11.8":
"@popperjs/core@^2.11.6", "@popperjs/core@^2.11.8":
version "2.11.8"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
"@react-dnd/asap@^5.0.1":
version "5.0.2"
resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-5.0.2.tgz#1f81f124c1cd6f39511c11a881cfb0f715343488"
resolved "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz"
integrity sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A==
"@react-dnd/invariant@^4.0.1":
version "4.0.2"
resolved "https://registry.yarnpkg.com/@react-dnd/invariant/-/invariant-4.0.2.tgz#b92edffca10a26466643349fac7cdfb8799769df"
resolved "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz"
integrity sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw==
"@react-dnd/shallowequal@^4.0.1":
version "4.0.2"
resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz#d1b4befa423f692fa4abf1c79209702e7d8ae4b4"
resolved "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz"
integrity sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==
"@remix-run/router@1.3.1":
@ -2278,9 +2243,9 @@
"@types/node" "*"
"@types/hoist-non-react-statics@^3.3.0":
version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
version "3.3.2"
resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
integrity sha512-YIQtIg4PKr7ZyqNPZObpxfHsHEmuB8dXCxd6qVcGuQVDK2bpsF7bYNnBJ4Nn7giuACZg+WewExgrtAJ3XnA4Xw==
dependencies:
"@types/react" "*"
hoist-non-react-statics "^3.3.0"
@ -2354,14 +2319,9 @@
resolved "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.1.tgz"
integrity sha512-ri0UmynRRvZiiUJdiz38MmIblKK+oH30MztdBVR95dv/Ubw6neWSb8u1XpRb72L4qsZOhz+L+z9JD40SJmfWow==
"@types/prop-types@*", "@types/prop-types@^15.7.5":
version "15.7.5"
resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
"@types/prop-types@^15.7.7":
"@types/prop-types@*", "@types/prop-types@^15.7.7":
version "15.7.8"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.8.tgz#805eae6e8f41bd19e88917d2ea200dc992f405d3"
resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.8.tgz"
integrity sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==
"@types/q@^1.5.1":
@ -2380,15 +2340,15 @@
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
"@types/react-beautiful-dnd@^13.1.4":
version "13.1.4"
resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.4.tgz#bcec72da719c18c0d8b4a7cb00e7fb443211d6d7"
integrity sha512-4bIBdzOr0aavN+88q3C7Pgz+xkb7tz3whORYrmSj77wfVEMfiWiooIwVWFR7KM2e+uGTe5BVrXqSfb0aHeflJA==
version "13.1.5"
resolved "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.5.tgz"
integrity sha512-mzohmMtV48b0bXF2dP8188LzUv9HAGHKucOORYsd5Sqq830pJ4gseFyDDAH0TR4TeD1ceG9DxTQ0FOFbtCSy4Q==
dependencies:
"@types/react" "*"
"@types/react-dnd@^3.0.2":
version "3.0.2"
resolved "https://registry.yarnpkg.com/@types/react-dnd/-/react-dnd-3.0.2.tgz#939e5a8ca5b83f847c3f64dabbe2f49a9fefb192"
resolved "https://registry.npmjs.org/@types/react-dnd/-/react-dnd-3.0.2.tgz"
integrity sha512-Z1BqHYGFtfSPfWs+kgX4b6wQmwwtqq4/pLo4zdO9xcDUB1ZQP8iWTAYNf3EJ2f0WiVQpSLN8UytP+ILzZHDLYw==
dependencies:
react-dnd "*"
@ -2400,33 +2360,19 @@
dependencies:
"@types/react" "*"
"@types/react-is@^16.7.1 || ^17.0.0":
version "17.0.3"
resolved "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz"
integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==
dependencies:
"@types/react" "*"
"@types/react-redux@^7.1.20":
version "7.1.25"
resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.25.tgz#de841631205b24f9dfb4967dd4a7901e048f9a88"
integrity sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==
version "7.1.27"
resolved "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.27.tgz"
integrity sha512-xj7d9z32p1K/eBmO+OEy+qfaWXtcPlN8f1Xk3Ne0p/ZRQ867RI5bQ/bpBtxbqU1AHNhKJSgGvld/P2myU2uYkg==
dependencies:
"@types/hoist-non-react-statics" "^3.3.0"
"@types/react" "*"
hoist-non-react-statics "^3.3.0"
redux "^4.0.0"
"@types/react-transition-group@^4.4.5":
version "4.4.5"
resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz"
integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
dependencies:
"@types/react" "*"
"@types/react-transition-group@^4.4.7":
"@types/react-transition-group@^4.4.5", "@types/react-transition-group@^4.4.7":
version "4.4.7"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.7.tgz#bf69f269d74aa78b99097673ca6dd6824a68ef1c"
resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.7.tgz"
integrity sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==
dependencies:
"@types/react" "*"
@ -3068,6 +3014,15 @@ axe-core@^4.4.3:
resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.5.2.tgz"
integrity sha512-u2MVsXfew5HBvjsczCv+xlwdNnB1oQR9HlAcsejZttNjKKSkeDNVwB1vMThIUIFI9GoT57Vtk8iQLwqOfAkboA==
axios@^1.5.1:
version "1.5.1"
resolved "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz"
integrity sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==
dependencies:
follow-redirects "^1.15.0"
form-data "^4.0.0"
proxy-from-env "^1.1.0"
axobject-query@^2.2.0:
version "2.2.0"
resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
@ -3499,7 +3454,7 @@ clsx@^1.1.0, clsx@^1.1.1, clsx@^1.2.1:
clsx@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
resolved "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz"
integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
co@^4.6.0:
@ -3739,7 +3694,7 @@ css-blank-pseudo@^3.0.3:
css-box-model@^1.2.0:
version "1.2.1"
resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
resolved "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz"
integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
dependencies:
tiny-invariant "^1.0.6"
@ -3948,7 +3903,7 @@ data-urls@^2.0.0:
dayjs@^1.11.10:
version "1.11.10"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz"
integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
debug@2.6.9, debug@^2.6.0, debug@^2.6.9:
@ -4114,7 +4069,7 @@ dlv@^1.1.3:
dnd-core@^16.0.1:
version "16.0.1"
resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-16.0.1.tgz#a1c213ed08961f6bd1959a28bb76f1a868360d19"
resolved "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz"
integrity sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==
dependencies:
"@react-dnd/asap" "^5.0.1"
@ -4277,7 +4232,7 @@ emittery@^0.8.1:
emoji-mart@^5.5.2:
version "5.5.2"
resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-5.5.2.tgz#3ddbaf053139cf4aa217650078bc1c50ca8381af"
resolved "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.5.2.tgz"
integrity sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A==
emoji-regex@^8.0.0:
@ -4802,7 +4757,7 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
fast-memoize@^2.5.1:
version "2.5.2"
resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.2.tgz#79e3bb6a4ec867ea40ba0e7146816f6cdce9b57e"
resolved "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz"
integrity sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==
fastq@^1.6.0:
@ -4928,7 +4883,7 @@ flatted@^3.1.0:
resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz"
integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
follow-redirects@^1.0.0:
follow-redirects@^1.0.0, follow-redirects@^1.15.0:
version "1.15.2"
resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
@ -4968,6 +4923,15 @@ form-data@^3.0.0:
combined-stream "^1.0.8"
mime-types "^2.1.12"
form-data@^4.0.0:
version "4.0.0"
resolved "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz"
integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
dependencies:
asynckit "^0.4.0"
combined-stream "^1.0.8"
mime-types "^2.1.12"
forwarded@0.2.0:
version "0.2.0"
resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz"
@ -5013,9 +4977,9 @@ fs.realpath@^1.0.0:
integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
fsevents@^2.3.2, fsevents@~2.3.2:
version "2.3.2"
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
version "2.3.3"
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
function-bind@^1.1.1:
version "1.1.1"
@ -5289,7 +5253,7 @@ html-minifier-terser@^6.0.2:
html-to-image@^1.11.11:
version "1.11.11"
resolved "https://registry.yarnpkg.com/html-to-image/-/html-to-image-1.11.11.tgz#c0f8a34dc9e4b97b93ff7ea286eb8562642ebbea"
resolved "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz"
integrity sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==
html-webpack-plugin@^5.5.0:
@ -5429,13 +5393,13 @@ immediate@~3.0.5:
immer@^10.0.3:
version "10.0.3"
resolved "https://registry.yarnpkg.com/immer/-/immer-10.0.3.tgz#a8de42065e964aa3edf6afc282dfc7f7f34ae3c9"
resolved "https://registry.npmjs.org/immer/-/immer-10.0.3.tgz"
integrity sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==
immer@^9.0.7:
version "9.0.16"
resolved "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz"
integrity sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ==
version "9.0.21"
resolved "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz"
integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
version "3.3.0"
@ -6642,7 +6606,7 @@ memfs@^3.1.2, memfs@^3.4.3:
memoize-one@^5.1.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz"
integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
merge-descriptors@1.0.1:
@ -6826,7 +6790,7 @@ normalize-url@^6.0.1:
normalize-wheel@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
resolved "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz"
integrity sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==
notistack@^3.0.1:
@ -7808,6 +7772,11 @@ prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
object-assign "^4.1.1"
react-is "^16.13.1"
property-expr@^2.0.5:
version "2.0.5"
resolved "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz"
integrity sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==
proxy-addr@~2.0.7:
version "2.0.7"
resolved "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz"
@ -7816,6 +7785,11 @@ proxy-addr@~2.0.7:
forwarded "0.2.0"
ipaddr.js "1.9.1"
proxy-from-env@^1.1.0:
version "1.1.0"
resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
psl@^1.1.33:
version "1.9.0"
resolved "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz"
@ -7855,7 +7829,7 @@ quick-lru@^5.1.1:
raf-schd@^4.0.2:
version "4.0.3"
resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
resolved "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz"
integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
raf@^3.4.1:
@ -7889,7 +7863,7 @@ raw-body@2.5.1:
re-resizable@6.9.6:
version "6.9.6"
resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.6.tgz#b95d37e3821481b56ddfb1e12862940a791e827d"
resolved "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.6.tgz"
integrity sha512-0xYKS5+Z0zk+vICQlcZW+g54CcJTTmHluA7JUUgvERDxnKAnytylcyPsA+BSFi759s5hPlHmBRegFrwXs2FuBQ==
dependencies:
fast-memoize "^2.5.1"
@ -7908,7 +7882,7 @@ react-app-polyfill@^3.0.0:
react-beautiful-dnd@^13.1.1:
version "13.1.1"
resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz#b0f3087a5840920abf8bb2325f1ffa46d8c4d0a2"
resolved "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz"
integrity sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==
dependencies:
"@babel/runtime" "^7.9.2"
@ -7951,14 +7925,14 @@ react-dev-utils@^12.0.1:
react-dnd-html5-backend@^16.0.1:
version "16.0.1"
resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz#87faef15845d512a23b3c08d29ecfd34871688b6"
resolved "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz"
integrity sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==
dependencies:
dnd-core "^16.0.1"
react-dnd@*, react-dnd@^16.0.1:
version "16.0.1"
resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-16.0.1.tgz#2442a3ec67892c60d40a1559eef45498ba26fa37"
resolved "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz"
integrity sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==
dependencies:
"@react-dnd/invariant" "^4.0.1"
@ -7977,16 +7951,16 @@ react-dom@^18.2.0:
react-draggable@4.4.5:
version "4.4.5"
resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.5.tgz#9e37fe7ce1a4cf843030f521a0a4cc41886d7e7c"
resolved "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz"
integrity sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==
dependencies:
clsx "^1.1.1"
prop-types "^15.8.1"
react-easy-crop@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/react-easy-crop/-/react-easy-crop-5.0.0.tgz#8945dccf4d9f578e7d8d06ed71229e93f46d4a43"
integrity sha512-ppYg3E0jxpDW+HdgLa65lCykZSsGMuusBuKD3HeTMs/Aod4xiWyAH5jZn5iHlllLUV2c0PPT6FznvdNeLhO2wA==
version "5.0.2"
resolved "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.0.2.tgz"
integrity sha512-j4A/0s0v/Gx5YGXvw3SOFIMmRk5YCdob2ABL5cD00Q9HQPKIz6tkCYLdj0RMO0REPtCAOsZ2ZZLI6fUofiDP6w==
dependencies:
normalize-wheel "^1.0.1"
tslib "2.0.1"
@ -7997,11 +7971,9 @@ react-error-overlay@^6.0.11:
integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
react-image-crop@^10.1.5:
version "10.1.5"
resolved "https://registry.yarnpkg.com/react-image-crop/-/react-image-crop-10.1.5.tgz#60f9d81405b01b6925629cae235e8406616fc0e5"
integrity sha512-BL8Rd/UHCE4O5GcYQiWDKVh5JOJb0Ic/Gde2W171v5nY7RyQzFLM1cxIzlYfESLO/lNgBVhDHuEV9RHnqALMkA==
dependencies:
clsx "^1.2.1"
version "10.1.8"
resolved "https://registry.npmjs.org/react-image-crop/-/react-image-crop-10.1.8.tgz"
integrity sha512-4rb8XtXNx7ZaOZarKKnckgz4xLMvds/YrU6mpJfGhGAsy2Mg4mIw1x+DCCGngVGq2soTBVVOxx2s/C6mTX9+pA==
react-image-file-resizer@^0.4.8:
version "0.4.8"
@ -8025,7 +7997,7 @@ react-is@^18.0.0, react-is@^18.2.0:
react-redux@^7.2.0:
version "7.2.9"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz"
integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==
dependencies:
"@babel/runtime" "^7.15.4"
@ -8042,7 +8014,7 @@ react-refresh@^0.11.0:
react-rnd@^10.4.1:
version "10.4.1"
resolved "https://registry.yarnpkg.com/react-rnd/-/react-rnd-10.4.1.tgz#9e1c3f244895d7862ef03be98b2a620848c3fba1"
resolved "https://registry.npmjs.org/react-rnd/-/react-rnd-10.4.1.tgz"
integrity sha512-0m887AjQZr6p2ADLNnipquqsDq4XJu/uqVqI3zuoGD19tRm6uB83HmZWydtkilNp5EWsOHbLGF4IjWMdd5du8Q==
dependencies:
re-resizable "6.9.6"
@ -8202,7 +8174,7 @@ redent@^3.0.0:
redux@^4.0.0, redux@^4.0.4, redux@^4.2.0:
version "4.2.1"
resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
resolved "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz"
integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
dependencies:
"@babel/runtime" "^7.9.2"
@ -8226,7 +8198,7 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.9:
regenerator-runtime@^0.14.0:
version "0.14.0"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz"
integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
regenerator-transform@^0.15.1:
@ -9093,9 +9065,14 @@ thunky@^1.0.2:
resolved "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz"
integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
tiny-case@^1.0.3:
version "1.0.3"
resolved "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz"
integrity sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==
tiny-invariant@^1.0.6:
version "1.3.1"
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz"
integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
tmpl@1.0.5:
@ -9120,6 +9097,11 @@ toidentifier@1.0.1:
resolved "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz"
integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
toposort@^2.0.2:
version "2.0.2"
resolved "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz"
integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==
tough-cookie@^4.0.0:
version "4.1.2"
resolved "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz"
@ -9180,12 +9162,12 @@ tsconfig-paths@^3.14.1:
tslib@2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.1.tgz#410eb0d113e5b6356490eec749603725b021b43e"
resolved "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz"
integrity sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==
tslib@2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz"
integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
tslib@^1.8.1:
@ -9239,6 +9221,11 @@ type-fest@^0.21.3:
resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz"
integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
type-fest@^2.19.0:
version "2.19.0"
resolved "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz"
integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
type-is@~1.6.18:
version "1.6.18"
resolved "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz"
@ -9349,12 +9336,12 @@ url-parse@^1.5.3:
use-debounce@^9.0.4:
version "9.0.4"
resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-9.0.4.tgz#51d25d856fbdfeb537553972ce3943b897f1ac85"
resolved "https://registry.npmjs.org/use-debounce/-/use-debounce-9.0.4.tgz"
integrity sha512-6X8H/mikbrt0XE8e+JXRtZ8yYVvKkdYRfmIhWZYsP8rcNs9hk3APV8Ua2mFkKRLcJKVdnX2/Vwrmg2GWKUQEaQ==
use-memo-one@^1.1.1:
version "1.1.3"
resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
resolved "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz"
integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
use-sync-external-store@1.2.0:
@ -9952,6 +9939,16 @@ yocto-queue@^0.1.0:
resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
yup@^1.3.2:
version "1.3.2"
resolved "https://registry.npmjs.org/yup/-/yup-1.3.2.tgz"
integrity sha512-6KCM971iQtJ+/KUaHdrhVr2LDkfhBtFPRnsG1P8F4q3uUVQ2RfEM9xekpha9aA4GXWJevjM10eDcPQ1FfWlmaQ==
dependencies:
property-expr "^2.0.5"
tiny-case "^1.0.3"
toposort "^2.0.2"
type-fest "^2.19.0"
zustand@^4.3.8:
version "4.3.8"
resolved "https://registry.npmjs.org/zustand/-/zustand-4.3.8.tgz"