diff --git a/package.json b/package.json index decf6cd8..b35fa6f2 100755 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@types/react": "^18.0.0", "@types/react-dnd": "^3.0.2", "@types/react-dom": "^18.0.0", + "@types/react-slick": "^0.23.13", "axios": "^1.5.1", "cypress-file-upload": "^5.0.8", "cytoscape": "^3.26.0", @@ -47,6 +48,8 @@ "react-rnd": "^10.4.1", "react-router-dom": "^6.6.2", "react-scripts": "5.0.1", + "react-slick": "^0.29.0", + "slick-carousel": "^1.8.1", "swr": "^2.2.4", "typescript": "^5.2.2", "use-debounce": "^9.0.4", diff --git a/src/App.tsx b/src/App.tsx index 553b0715..9e4e57ef 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -124,7 +124,7 @@ export default function App() { const navigate = useNavigate(); useUserFetcher({ - url: `https://hub.pena.digital/user/${userId}`, + url: `https://squiz.pena.digital/user/${userId}`, userId, onNewUser: setUser, onError: (error) => { diff --git a/src/assets/icons/arrow_left.svg b/src/assets/icons/arrow_left.svg new file mode 100644 index 00000000..ab458806 --- /dev/null +++ b/src/assets/icons/arrow_left.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/src/assets/icons/arrow_right.svg b/src/assets/icons/arrow_right.svg new file mode 100644 index 00000000..ba5ffa5d --- /dev/null +++ b/src/assets/icons/arrow_right.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/src/pages/Landing/FooterLanding.tsx b/src/pages/Landing/FooterLanding.tsx index a66a783f..52ad84f7 100644 --- a/src/pages/Landing/FooterLanding.tsx +++ b/src/pages/Landing/FooterLanding.tsx @@ -122,7 +122,8 @@ export default function Component() { diff --git a/src/pages/Tariffs/tariffsUtils/FreeTariffCard.tsx b/src/pages/Tariffs/tariffsUtils/FreeTariffCard.tsx index a5aaab30..89e3c0a6 100644 --- a/src/pages/Tariffs/tariffsUtils/FreeTariffCard.tsx +++ b/src/pages/Tariffs/tariffsUtils/FreeTariffCard.tsx @@ -1,33 +1,97 @@ import Typography from "@mui/material/Typography"; import TariffCard from "./TariffCard"; import NumberIcon from "@icons/NumberIcon"; -import { useTheme } from "@mui/material"; +import { Box, useTheme } from "@mui/material"; export default function FreeTariffCard() { const theme = useTheme(); return ( - } - discount={""} - headerText="бесплатно" - text="Первые 14 дней после регистрации, вы можете пользоваться полным функционалом сервиса совершенно бесплатно" - price={ - - 0 руб. - - } + // } + // discount={""} + // headerText="бесплатно" + // text="Каждому пользователю все наши продукты в первые 14 дней доступны совершенно бесплатно (кроме доп.услуг)" + // price={ + // + // 0 руб. + // + // } + // sx={{ + // backgroundColor: "#7e2aea", + // color: "white", + // }} + // /> + + > + + + + + {" "} + 0 руб{" "} + + + + + Бесплатно 14 дней + + + + Каждому пользователю все наши продукты в первые 14 дней доступны + совершенно бесплатно (кроме доп.услуг) + + + ); } diff --git a/src/pages/Tariffs/tariffsUtils/TariffCard.tsx b/src/pages/Tariffs/tariffsUtils/TariffCard.tsx index ae5a21cc..d00be039 100644 --- a/src/pages/Tariffs/tariffsUtils/TariffCard.tsx +++ b/src/pages/Tariffs/tariffsUtils/TariffCard.tsx @@ -131,9 +131,22 @@ export default function TariffCard({ {buttonProps && ( + + {isSlider && ( + <> + + + + )} ); } diff --git a/src/pages/startPage/steptwo.tsx b/src/pages/startPage/steptwo.tsx index 9fce2ebe..fc94f670 100755 --- a/src/pages/startPage/steptwo.tsx +++ b/src/pages/startPage/steptwo.tsx @@ -11,13 +11,40 @@ import cardImage1 from "../../assets/card-1.png"; import cardImage2 from "../../assets/card-2.png"; import cardImage3 from "../../assets/card-3.png"; import CardWithImage from "./CardWithImage"; +import { useRef, useState, useEffect } from "react"; + +import arrowLeftIcon from "../../assets/icons/arrow_left.svg"; +import arrowRightIcon from "../../assets/icons/arrow_right.svg"; export default function Steptwo() { + const quiz = useCurrentQuiz(); + const config = quiz?.config; const theme = useTheme(); const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1300)); - const quiz = useCurrentQuiz(); + const isSlider = useMediaQuery(theme.breakpoints.down(1250)); - const config = quiz?.config; + const containerRef = useRef(null); + const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]); + const [currentIndex, setCurrentIndex] = useState(0); + + useEffect(() => { + if (containerRef.current && buttonRefs.current.length > 0) { + const buttonWidth = buttonRefs.current[0]!.offsetWidth; + + containerRef.current.scrollTo({ + left: currentIndex * buttonWidth, + behavior: "smooth", + }); + } + }, [currentIndex]); + + const handlePrevClick = () => { + setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0)); + }; + + const handleNextClick = () => { + setCurrentIndex((prevIndex) => Math.min(prevIndex + 1, 2)); + }; if (!config) return null; @@ -26,21 +53,29 @@ export default function Steptwo() { Стартовая страница + {isSlider && ( + <> + + + + )} ); diff --git a/src/ui_kit/Header/Header.tsx b/src/ui_kit/Header/Header.tsx index 6a1dfbd1..c46b6345 100644 --- a/src/ui_kit/Header/Header.tsx +++ b/src/ui_kit/Header/Header.tsx @@ -128,7 +128,7 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => { > {isMobile ? ( <> - + setMobileSidebar((visible: boolean) => !visible)} style={{ fontSize: "30px", color: "white", cursor: "pointer" }} @@ -136,7 +136,7 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => { ) : ( <> - + )} diff --git a/src/ui_kit/Header/HeaderFull.tsx b/src/ui_kit/Header/HeaderFull.tsx index 23284a29..8da43757 100644 --- a/src/ui_kit/Header/HeaderFull.tsx +++ b/src/ui_kit/Header/HeaderFull.tsx @@ -58,7 +58,7 @@ export default function HeaderFull() { - + { lineHeight: "18px", height: "34px", whiteSpace: "nowrap", - minWidth: "116px", + minWidth: "146px", }} onClick={() => Object.keys(whyCantCreatePublic).length === 0 diff --git a/src/ui_kit/Toolbars/ToTariffsButton.tsx b/src/ui_kit/Toolbars/ToTariffsButton.tsx index ea5c02ea..fc62b2e6 100644 --- a/src/ui_kit/Toolbars/ToTariffsButton.tsx +++ b/src/ui_kit/Toolbars/ToTariffsButton.tsx @@ -1,10 +1,17 @@ -import { Button } from "@mui/material"; +import { Button, SxProps, Theme } from "@mui/material"; import { Link } from "react-router-dom"; +interface Props { + variant: string; + color?: string; + sx?: SxProps; +} -export const ToTariffsButton = (color?: string) => { +export const ToTariffsButton = () => { return ( - + ); }; diff --git a/src/utils/replaceSpacesToEmptyLines.ts b/src/utils/replaceSpacesToEmptyLines.ts index 0a31a711..eb8ebca0 100644 --- a/src/utils/replaceSpacesToEmptyLines.ts +++ b/src/utils/replaceSpacesToEmptyLines.ts @@ -11,7 +11,13 @@ export const replaceSpacesToEmptyLines = (object: T): T => { for (const [key, value] of Object.entries(object)) { if (typeof value === "string") { - result[key] = value.replace(" ", "").replace(/\" \"/g, '""'); + if (value === " ") { + result[key] = value.replace(" ", ""); + + continue; + } + + result[key] = value.replace(/\" \"/g, '""'); continue; } diff --git a/yarn.lock b/yarn.lock index f5472212..6f23d7b9 100755 --- a/yarn.lock +++ b/yarn.lock @@ -2436,6 +2436,13 @@ hoist-non-react-statics "^3.3.0" redux "^4.0.0" +"@types/react-slick@^0.23.13": + version "0.23.13" + resolved "https://registry.yarnpkg.com/@types/react-slick/-/react-slick-0.23.13.tgz#037434e73a58063047b121e08565f7185d811f36" + integrity sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A== + dependencies: + "@types/react" "*" + "@types/react-transition-group@^4.4.7", "@types/react-transition-group@^4.4.8": version "4.4.9" resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.9.tgz" @@ -3617,6 +3624,11 @@ cjs-module-lexer@^1.0.0: resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz" integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA== +classnames@^2.2.5: + version "2.5.1" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b" + integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow== + clean-css@^5.2.2: version "5.3.1" resolved "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz" @@ -4633,6 +4645,11 @@ enhanced-resolve@^5.10.0: graceful-fs "^4.2.4" tapable "^2.2.0" +enquire.js@^2.1.6: + version "2.1.6" + resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814" + integrity sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw== + enquirer@^2.3.6: version "2.4.1" resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz" @@ -6965,6 +6982,13 @@ json-stringify-safe@~5.0.1: resolved "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz" integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA== +json2mq@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a" + integrity sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA== + dependencies: + string-convert "^0.2.0" + json5@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz" @@ -8919,6 +8943,17 @@ react-scripts@5.0.1: optionalDependencies: fsevents "^2.3.2" +react-slick@^0.29.0: + version "0.29.0" + resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.29.0.tgz#0bed5ea42bf75a23d40c0259b828ed27627b51bb" + integrity sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA== + dependencies: + classnames "^2.2.5" + enquire.js "^2.1.6" + json2mq "^0.2.0" + lodash.debounce "^4.0.8" + resize-observer-polyfill "^1.5.0" + react-transition-group@^4.4.5: version "4.4.5" resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz" @@ -9122,6 +9157,11 @@ requires-port@^1.0.0: resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz" integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ== +resize-observer-polyfill@^1.5.0: + version "1.5.1" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" + integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== + resolve-cwd@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz" @@ -9529,6 +9569,11 @@ slice-ansi@^7.0.0: ansi-styles "^6.2.1" is-fullwidth-code-point "^5.0.0" +slick-carousel@^1.8.1: + version "1.8.1" + resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d" + integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA== + sockjs@^0.3.24: version "0.3.24" resolved "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz" @@ -9667,6 +9712,11 @@ string-argv@0.3.2: resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6" integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q== +string-convert@^0.2.0: + version "0.2.1" + resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97" + integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A== + string-length@^4.0.1: version "4.0.2" resolved "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz"