diff --git a/package.json b/package.json index f95c8746..2a9eebba 100755 --- a/package.json +++ b/package.json @@ -54,6 +54,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", diff --git a/src/pages/Landing/Tariffs/Tariffs.tsx b/src/pages/Landing/Tariffs/Tariffs.tsx index bb164c78..8628e66c 100644 --- a/src/pages/Landing/Tariffs/Tariffs.tsx +++ b/src/pages/Landing/Tariffs/Tariffs.tsx @@ -3,7 +3,7 @@ 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 from "react"; +import React, { useMemo } from "react"; import { TariffCard } from "@/pages/Landing/Tariffs/TariffCard/TariffCard"; import "swiper/css"; import "swiper/css/pagination"; @@ -32,6 +32,7 @@ const swiperStyles = ` height: 37.5px; background: white; border-radius: 50%; + margin-top: -40px; } .mySwiper .swiper-button-next:after, .mySwiper .swiper-button-prev:after { color: black; @@ -44,77 +45,80 @@ export const Tariffs = () => { const isMobile = useMediaQuery(theme.breakpoints.down(600)); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); - const tariffs: Tariff[] = [ - { - 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", - }, - ]; + 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 (