SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fixed dependency and mobile paddings

Browse Source
This commit is contained in:
aleksandr-raw 2024-06-04 11:09:56 +04:00
parent 61a3214fbd
commit ea4c985cf0
3 changed files with 105 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

138
src/pages/Landing/Tariffs/Tariffs.tsx
View File

@ -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 (
<SectionStyled
tag={"section"}
bg={"#282937"}
sxsect={{ marginTop: "-40px", padding: isTablet ? "0 40px" : "0 20px" }}
sxsect={{ marginTop: "-40px", padding: isMobile ? "0 16px" : isTablet ? "0 40px" : "0 20px" }}
mwidth={"1160px"}
sxcont={{
boxSizing: "border-box",

36
yarn.lock
View File

@ -10552,7 +10552,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==
@ -10648,7 +10657,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==
@ -10801,6 +10817,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"
@ -11830,7 +11851,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==
@ -11848,6 +11869,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"