Merge branch 'tariff-cards-slider' into dev

This commit is contained in:
Nastya 2024-06-08 04:41:05 +03:00
commit 0d6602d1a3
9 changed files with 22035 additions and 10 deletions

21621
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

@ -55,6 +55,7 @@
"react-scripts": "5.0.1",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1",
"swiper": "^11.1.4",
"swr": "^2.2.4",
"typescript": "^5.2.2",
"use-debounce": "^9.0.4",

@ -1,23 +1,18 @@
import React, { useEffect } from "react";
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 StartWithTemplates from "./StartWithTemplates";
import WhatTheFeatures from "./WhatTheFeatures";
import FullScreenDialog from "./headerMobileLanding";
import Collaboration from "./Collaboration";
import { clearAuthToken, setAuthToken } from "@frontend/kitui";
import { useParams } from "react-router-dom";
import { clearUserData, setUserId, useUserStore } from "@root/user";
import { cleanAuthTicketData } from "@root/ticket";
import { Tariffs } from "@/pages/Landing/Tariffs/Tariffs";
export default function Landing() {
const theme = useTheme();
@ -47,6 +42,7 @@ export default function Landing() {
<Header />
<Hero />
<Counter />
<Tariffs />
{/* <Collaboration/> */}
<HowItWorks />
<BusinessPluses />

@ -0,0 +1,111 @@
import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material";
import { FC } from "react";
import { DurationTariffIcon } from "@/pages/Landing/Tariffs/TariffCard/icons/DurationTariffIcon";
import { TrialTariffIcon } from "@/pages/Landing/Tariffs/TariffCard/icons/TrialTariffIcon";
import { RequestsTariffIcon } from "@/pages/Landing/Tariffs/TariffCard/icons/RequestsTariffIcon";
import { Link, useLocation } from "react-router-dom";
type TariffCardProps = {
type: "requests" | "duration" | "trial";
name: string;
description: string;
actualPrice: string;
oldPrice?: string;
discount?: string;
};
const icons = {
requests: <RequestsTariffIcon />,
duration: <DurationTariffIcon />,
trial: <TrialTariffIcon />,
};
export const TariffCard: FC<TariffCardProps> = ({ type, name, actualPrice, oldPrice, discount, description }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1140));
const location = useLocation();
return (
<Box
sx={{
width: isMobile ? "321px" : "360px",
height: "313px",
background: type === "trial" ? "#7E2AEA" : "#333646",
borderRadius: "12px",
display: "flex",
flexDirection: "column",
}}
>
<Box sx={{ display: "flex", padding: "20px", justifyContent: "space-between", alignItems: "center" }}>
<Box sx={{ display: "flex", gap: "15px" }}>
{icons[type]}
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
background: "#7E2AEA",
padding: "8px 10px",
borderRadius: "8px",
height: "fit-content",
}}
>
{discount && <Typography sx={{ color: "#FFF", lineHeight: "1" }}>-{discount}%</Typography>}
</Box>
</Box>
<Box sx={{ display: "flex", gap: "15px" }}>
{oldPrice && (
<Typography
sx={{
color: "#9A9AAF",
fontSize: "16px",
textDecoration: "line-through",
textDecorationColor: "#FB5607",
textDecorationThickness: "1px",
}}
>
{oldPrice}
</Typography>
)}
{actualPrice && (
<Typography
sx={{
color: "#FFF",
fontSize: "20px",
}}
>
{actualPrice}
</Typography>
)}
</Box>
</Box>
<Box sx={{ marginTop: "5px", padding: "0 20px", display: "flex", flexDirection: "column", gap: "10px" }}>
{name && <Typography sx={{ color: "#FFF", fontSize: "24px" }}>{name}</Typography>}
{description && <Typography sx={{ color: type === "trial" ? "#EEEFF4" : "#9A9AAF" }}>{description}</Typography>}
</Box>
<Box
sx={{
marginTop: "auto",
height: "64px",
background: type === "trial" ? "#5A1EA8" : "rgba(154, 154, 175, 0.5)",
borderRadius: "0 0 12px 12px",
}}
>
<Button
component={Link}
to={"/signin"}
state={{ backgroundLocation: location }}
sx={{
color: "#FFF",
width: "100%",
height: "100%",
}}
>
Выбрать
</Button>
</Box>
</Box>
);
};

@ -0,0 +1,18 @@
import { Box } from "@mui/material";
export const DurationTariffIcon = () => {
return (
<Box>
<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="#2B2C39" />
<circle cx="18" cy="18" r="10" stroke="#944FEE" strokeWidth="1.5" />
<path
d="M18 14V17.7324C18 17.8996 18.0836 18.0557 18.2226 18.1484L21 20"
stroke="#944FEE"
strokeWidth="1.5"
strokeLinecap="round"
/>
</svg>
</Box>
);
};

@ -0,0 +1,48 @@
import { Box } from "@mui/material";
export const RequestsTariffIcon = () => {
return (
<Box>
<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="#2B2C39" />
<circle
cx="3.40426"
cy="3.40426"
r="3.40426"
transform="matrix(-1 0 0 1 21.625 10.5)"
stroke="#944FEE"
strokeWidth="1.5"
/>
<path
d="M12.2578 22.3565C12.2578 21.6242 12.7181 20.9711 13.4077 20.7248V20.7248C16.5166 19.6145 19.9139 19.6145 23.0228 20.7248V20.7248C23.7124 20.9711 24.1727 21.6242 24.1727 22.3565V23.4761C24.1727 24.4866 23.2776 25.2629 22.2772 25.12L21.9437 25.0724C19.4706 24.7191 16.9599 24.7191 14.4869 25.0724L14.1533 25.12C13.1529 25.2629 12.2578 24.4866 12.2578 23.4761V22.3565Z"
stroke="#944FEE"
strokeWidth="1.5"
/>
<path
d="M23.3174 17.4042C24.7947 17.4042 25.9922 16.2067 25.9922 14.7295C25.9922 13.2522 24.7947 12.0547 23.3174 12.0547"
stroke="#944FEE"
strokeWidth="1.5"
strokeLinecap="round"
/>
<path
d="M26.2471 23.5075L26.5092 23.5449C27.2952 23.6572 27.9985 23.0473 27.9985 22.2533V21.3736C27.9985 20.7983 27.6368 20.2851 27.095 20.0916C26.5546 19.8985 26.003 19.7482 25.4453 19.6406"
stroke="#944FEE"
strokeWidth="1.5"
strokeLinecap="round"
/>
<path
d="M12.6826 17.4042C11.2053 17.4042 10.0078 16.2067 10.0078 14.7295C10.0078 13.2522 11.2053 12.0547 12.6826 12.0547"
stroke="#944FEE"
strokeWidth="1.5"
strokeLinecap="round"
/>
<path
d="M9.75289 23.5075L9.49082 23.5449C8.70476 23.6572 8.0015 23.0473 8.0015 22.2533V21.3736C8.0015 20.7983 8.36316 20.2851 8.90496 20.0916C9.44541 19.8985 9.99696 19.7482 10.5547 19.6406"
stroke="#944FEE"
strokeWidth="1.5"
strokeLinecap="round"
/>
</svg>
</Box>
);
};

@ -0,0 +1,27 @@
import { Box } from "@mui/material";
export const TrialTariffIcon = () => {
return (
<Box>
<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="white" />
<path d="M18 12.1694V13.8361" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M18 22.1694V23.8361" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path
d="M18 28C23.5228 28 28 23.5228 28 18C28 12.4772 23.5228 8 18 8C12.4772 8 8 12.4772 8 18C8 23.5228 12.4772 28 18 28Z"
stroke="#7E2AEA"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M15.4974 22.1639H19.2474C19.7999 22.1639 20.3298 21.9444 20.7205 21.5537C21.1112 21.163 21.3307 20.6331 21.3307 20.0806C21.3307 19.528 21.1112 18.9981 20.7205 18.6074C20.3298 18.2167 19.7999 17.9972 19.2474 17.9972H16.7474C16.1949 17.9972 15.665 17.7777 15.2743 17.387C14.8836 16.9963 14.6641 16.4664 14.6641 15.9139C14.6641 15.3614 14.8836 14.8315 15.2743 14.4408C15.665 14.0501 16.1949 13.8306 16.7474 13.8306H20.4974"
stroke="#7E2AEA"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
};

@ -0,0 +1,173 @@
import Box from "@mui/material/Box";
import { CssBaseline, Typography, useMediaQuery, useTheme } from "@mui/material";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules";
import SectionStyled from "@/pages/Landing/SectionStyled";
import React, { useMemo } from "react";
import { TariffCard } from "@/pages/Landing/Tariffs/TariffCard/TariffCard";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
export type Tariff = {
name: string;
type: "requests" | "duration" | "trial";
description: string;
actualPrice: string;
oldPrice?: string;
discount?: string;
};
const swiperStyles = `
.mySwiper .swiper-pagination-bullet {
background: #9A9AAF;
margin-top: 40px;
}
.mySwiper .swiper-pagination {
position: relative;
margin-top: 30px;
}
.mySwiper .swiper-button-next, .mySwiper .swiper-button-prev {
width: 37.5px;
height: 37.5px;
background: white;
border-radius: 50%;
margin-top: -40px;
}
.mySwiper .swiper-button-next:after, .mySwiper .swiper-button-prev:after {
color: black;
font-size: 20px;
}
`;
export const Tariffs = () => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const tariffs: Tariff[] = useMemo(
() => [
{
name: "Бесплатно 14 дней",
type: "trial",
description:
"Каждому пользователю все наши продукты в первые 14 дней доступны совершенно бесплатно (кроме доп.услуг)",
actualPrice: "0",
},
{
name: "Месяц",
type: "duration",
description: "30 дней безлимитного пользования сервисом",
actualPrice: "969",
oldPrice: "1024",
discount: "5",
},
{
name: "3 месяца",
type: "duration",
description: "90 дней безлимитного пользования сервисом",
actualPrice: " 2 325,6",
oldPrice: "3060",
discount: "24",
},
{
name: "Год",
type: "duration",
description: "365 дней безлимитного пользования сервисом",
actualPrice: " 7 501,84",
oldPrice: "12 410",
discount: "40",
},
{
name: "3 года",
type: "duration",
description: "1095 дней безлимитного пользования сервисом",
actualPrice: "16 939,65",
oldPrice: "37 230",
discount: "55",
},
{
name: "100 Заявок",
type: "requests",
description: "Полное прохождение 100 опросов респондентом",
actualPrice: "1 900",
oldPrice: "2 000",
discount: "5",
},
{
name: "1 000 Заявок",
type: "requests",
description: "Полное прохождение 1000 опросов респондентом",
actualPrice: "12 740",
oldPrice: "2 000",
discount: "36",
},
{
name: "10 000 Заявок",
type: "requests",
description: "Полное прохождение 10000 опросов респондентом",
actualPrice: "89 000",
oldPrice: "200 000",
discount: "56",
},
],
[]
);
return (
<SectionStyled
tag={"section"}
bg={"#282937"}
sxsect={{ marginTop: "-40px", padding: isMobile ? "0 16px" : isTablet ? "0 40px" : "0 20px" }}
mwidth={"1160px"}
sxcont={{
boxSizing: "border-box",
}}
>
<CssBaseline>
<style>{swiperStyles}</style>
</CssBaseline>
<Box
color="#ffffff"
sx={{
display: "flex",
justifyContent: "space-between",
flexWrap: "wrap",
marginTop: "140px",
marginBottom: "40px",
}}
>
<Typography variant="h6" fontSize="36px" lineHeight={1}>
Наши тарифы
</Typography>
</Box>
<Box sx={{ marginBottom: "80px" }}>
<Swiper
slidesPerView={"auto"}
spaceBetween={15}
pagination={{
clickable: true,
}}
modules={[Pagination, Navigation]}
navigation={true}
className="mySwiper"
>
{tariffs.map((tariff) => {
return (
<SwiperSlide style={{ width: isMobile ? "321px" : "360px" }}>
<TariffCard
name={tariff.name}
type={tariff.type}
description={tariff.description}
actualPrice={tariff.actualPrice}
discount={tariff.discount}
oldPrice={tariff.oldPrice}
/>
</SwiperSlide>
);
})}
</Swiper>
</Box>
</SectionStyled>
);
};

@ -10557,7 +10557,16 @@ string-natural-compare@^3.0.1:
resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.1"
string-width@^4.1.0, string-width@^4.2.0:
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@ -10653,7 +10662,14 @@ stringify-object@^3.3.0:
is-obj "^1.0.1"
is-regexp "^1.0.0"
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
ansi-regex "^5.0.1"
strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@ -10806,6 +10822,11 @@ svgo@^2.7.0:
picocolors "^1.0.0"
stable "^0.1.8"
swiper@^11.1.4:
version "11.1.4"
resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.1.4.tgz#2f8e303e8bf9e5bc40a3885fc637ae60ff27996c"
integrity sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA==
swr@^2.2.4:
version "2.2.5"
resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.5.tgz#063eea0e9939f947227d5ca760cc53696f46446b"
@ -11835,7 +11856,7 @@ workbox-window@6.6.1:
"@types/trusted-types" "^2.0.2"
workbox-core "6.6.1"
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@ -11853,6 +11874,15 @@ wrap-ansi@^6.2.0:
string-width "^4.1.0"
strip-ansi "^6.0.0"
wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
dependencies:
ansi-styles "^4.0.0"
string-width "^4.1.0"
strip-ansi "^6.0.0"
wrap-ansi@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"