diff --git a/.env.production b/.env.production index f0e99f6625df2d968cf36b92e7246f607629f26f..14276fa51bdd405b40c3c7ecb3929c7ef3540a47 100644 --- a/.env.production +++ b/.env.production @@ -1,7 +1,4 @@ DB_HOST=https://frutella-api.noodev.ru/api/v1 AUTH_TRUST_HOST=true -HOST=https://fruit-moments.food.ru/ +HOST=https://fruit-moments.food.ru AUTH_SECRET=OIU5S5HqQE7jZMA95BLPjqIZyz8EmXPruhvZyp5PuSU= - - - diff --git a/.gitignore b/.gitignore index 42ac27f2205fa947f8ec878dfe144e42e23cc8b6..455221b6a57d9e98c0a37aade0857628fa1e91c9 100644 --- a/.gitignore +++ b/.gitignore @@ -31,7 +31,6 @@ yarn-error.log* .pnpm-debug.log* # env files (can opt-in for committing if needed) -.env*.local .env.development # vercel diff --git a/app/favicon.ico b/app/favicon.ico index 11bb7db88afefec6a6f138c5c14a45cebf878615..ea1553f2ece03f93df947bbc9a3c64936875845a 100644 Binary files a/app/favicon.ico and b/app/favicon.ico differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png index 6ab58ce71334515562edecc0ab60711d76431dc8..bb4939f1b0bbf0122407a793e6556ad2d1217f50 100644 Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png index d109a3a841143c571a2da5dfacd1575ab0e5ad22..cb646118f4c504e9d30cc6843b74a368ef84368f 100644 Binary files a/public/favicon-96x96.png and b/public/favicon-96x96.png differ diff --git a/public/favicon.ico b/public/favicon.ico index 11bb7db88afefec6a6f138c5c14a45cebf878615..ea1553f2ece03f93df947bbc9a3c64936875845a 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/media/cards/quiz/3.jpg b/public/media/cards/quiz/3.jpg index fb53fa0561e8d10d2a09d9d8d86f7fbac6ba92b5..9eb76513281302074f500229f998ce1fbce44bb8 100644 Binary files a/public/media/cards/quiz/3.jpg and b/public/media/cards/quiz/3.jpg differ diff --git a/public/media/utils/food-logo.png b/public/media/utils/food-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..a4bafa5994ec8bfd145750be3c843db26a08f3cf Binary files /dev/null and b/public/media/utils/food-logo.png differ diff --git a/public/media/utils/video-preview.jpg b/public/media/utils/video-preview.jpg index 7b9276a8c1d4e7d24d63c5786991523083951a69..d4d95a056e08745eaa51ab37789782912a676b35 100644 Binary files a/public/media/utils/video-preview.jpg and b/public/media/utils/video-preview.jpg differ diff --git a/public/media/video/video.mp4 b/public/media/video/video.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..060446e62e179508961f573b6b16017c4c47629d Binary files /dev/null and b/public/media/video/video.mp4 differ diff --git a/public/sharing.png b/public/sharing.png new file mode 100644 index 0000000000000000000000000000000000000000..c6856684b7cbf25670b753f94b9a75e505a362fa Binary files /dev/null and b/public/sharing.png differ diff --git a/public/web-app-manifest-192x192.png b/public/web-app-manifest-192x192.png index e6b44004ed15feec6764f696e3f7b5ec791822d1..cb646118f4c504e9d30cc6843b74a368ef84368f 100644 Binary files a/public/web-app-manifest-192x192.png and b/public/web-app-manifest-192x192.png differ diff --git a/public/web-app-manifest-512x512.png b/public/web-app-manifest-512x512.png index c9a8260ebc8665d859e74c01178ce97dd1a03f7f..cb646118f4c504e9d30cc6843b74a368ef84368f 100644 Binary files a/public/web-app-manifest-512x512.png and b/public/web-app-manifest-512x512.png differ diff --git a/src/app/appEntry.tsx b/src/app/appEntry.tsx index 77c68f909013f528f7893004aad84942c98251f9..5d5f0a548e242b6fa5ecdfe8dc4074ecb264e843 100644 --- a/src/app/appEntry.tsx +++ b/src/app/appEntry.tsx @@ -15,35 +15,36 @@ export default function RootLayout(props: Readonly<{ children: ReactNode }>) { - + + - + - + {/**/} - {/**/} + ym(100368170, "init", { + clickmap:true, + trackLinks:true, + accurateTrackBounce:true, + webvisor:true + }); + `, + }} + /> diff --git a/src/app/layouts/base-layout/ui/Menu/Menu.tsx b/src/app/layouts/base-layout/ui/Menu/Menu.tsx index d40507a0e0bcf9f16e47b3ca96d0df5b8e769928..8ceb0331996966b3c08bdc56e60df3af094c418f 100644 --- a/src/app/layouts/base-layout/ui/Menu/Menu.tsx +++ b/src/app/layouts/base-layout/ui/Menu/Menu.tsx @@ -4,6 +4,10 @@ import {NavLink} from "@/shared/ui/Navigation/NavLink"; import {MENU_LINK_ARRAY} from "./../config" import {usePathname} from "next/navigation"; import {Logo} from "@/shared/ui/DataDisplay/Logo"; +import {FoodLogo} from "@/shared/ui/DataDisplay/Logo/ui"; +import {XMarkIcon} from "@/shared/ui/Icons/XIcon"; +import styles from "./../index.module.scss" +import clsx from "clsx"; export const Menu = () => { @@ -27,6 +31,8 @@ export const Menu = () => { + + diff --git a/src/app/layouts/base-layout/ui/index.module.scss b/src/app/layouts/base-layout/ui/index.module.scss index 0ebda178295321d3c8917cc52568038a01be28a9..325d6c28b107f12685c938cafbcf535b1a287222 100644 --- a/src/app/layouts/base-layout/ui/index.module.scss +++ b/src/app/layouts/base-layout/ui/index.module.scss @@ -14,3 +14,10 @@ //background-size: 40%; //background-repeat: no-repeat; } + + +.xMark { + @apply text-white; + + @apply w-3 lg:w-4; +} diff --git a/src/app/styles/_app.scss b/src/app/styles/_app.scss index f00f5198529919b94bbe3df8050cc918baaf4221..e98a40db8a0234665c03e6254248d2d5eec80930 100644 --- a/src/app/styles/_app.scss +++ b/src/app/styles/_app.scss @@ -57,7 +57,7 @@ a { ::selection { @apply text-white; - @apply bg-green1; + background: #FFB8DA; } body { @@ -67,7 +67,7 @@ body { font-weight: 400; background: linear-gradient(158.04deg, #009FE3 17.88%, #0099DB 83.37%); color: #fff; - min-height: 100vh; + min-height: 100dvh; &::before { diff --git a/src/feature/product-link/index.module.scss b/src/feature/product-link/index.module.scss index 202a854b836fbf1397555fbccfffc50babf5538b..87d40ab7482610219dc3387b937288952082fdcd 100644 --- a/src/feature/product-link/index.module.scss +++ b/src/feature/product-link/index.module.scss @@ -15,13 +15,12 @@ .in { @apply inline-flex items-start gap-2; - transform-origin: right top; @apply whitespace-nowrap; - + transform-origin: right top; + animation: upInDown 4s ease-in-out infinite; @media (min-width: 1024px) { - @apply gap-5; + @apply inline-flex gap-5; @apply w-fit; - animation: upInDown 4s ease-in-out infinite; &:nth-child(2) { .link { @apply ml-0 mt-0; @@ -53,7 +52,7 @@ .link { @apply text-white; - @apply relative pb-px; + @apply relative pb-px px-2; font-size: 1.75rem; @apply leading-normal; font-family: "Caveat", sans-serif; diff --git a/src/feature/video-trigger/index.module.scss b/src/feature/video-trigger/index.module.scss index 57781be80ce0d7302ebbb9fc58393949985f767d..8c2661ed93acbf2ea053de3fc8e3d99827301707 100644 --- a/src/feature/video-trigger/index.module.scss +++ b/src/feature/video-trigger/index.module.scss @@ -56,25 +56,32 @@ .play { @apply absolute z-10 cursor-pointer; - @apply transition-all; + transition: .4s all ease; @apply left-1/2 top-1/2; - @apply -translate-x-1/2 -translate-y-1/2; - @apply w-7 h-7; + will-change: transform; + + transform: translate(-50%, -50%) scale(0.5); + + @apply w-7; @media (min-width: 1024px) { width: 4.74rem; - height: 4.74rem; + @media (hover: hover) { + &:hover { + transform: translate(-50%, -50%) scale(1); + } + } } &:active { - @apply scale-95; + transform: translate(-50%, -50%) scale(.95); } img { - @apply w-full h-full object-cover; + @apply w-full block; } } diff --git a/src/feature/video-trigger/ui/VideoTrigger.tsx b/src/feature/video-trigger/ui/VideoTrigger.tsx index a440d567461a7ef064a5296c7437071cd5725cf8..99244b386b3ace5c7fba864b5488be2503b5c91d 100644 --- a/src/feature/video-trigger/ui/VideoTrigger.tsx +++ b/src/feature/video-trigger/ui/VideoTrigger.tsx @@ -9,7 +9,7 @@ export const VideoTrigger = () => { return (
-
+
onOpen?.("video")} className={clsx(styles.play)}>
@@ -17,11 +17,19 @@ export const VideoTrigger = () => {
+
onOpen?.("video")} className={clsx(styles.circle, "lg:hidden")}> +
+ +
+ + + +
- Смотри, как
+ Смотрите, как
мы проводим
моменты вместе!
) -} \ No newline at end of file +}; \ No newline at end of file diff --git a/src/shared/ui/DataDisplay/Logo/ui/FoodLogo.tsx b/src/shared/ui/DataDisplay/Logo/ui/FoodLogo.tsx new file mode 100644 index 0000000000000000000000000000000000000000..73a57bf0c04dadc564ea33404768da2b5c7d091d --- /dev/null +++ b/src/shared/ui/DataDisplay/Logo/ui/FoodLogo.tsx @@ -0,0 +1,16 @@ +import styles from "./index.module.scss" +import clsx from "clsx"; + +export const FoodLogo = () => { + return ( + + + + + + ) +}; \ No newline at end of file diff --git a/src/shared/ui/DataDisplay/Logo/ui/index.module.scss b/src/shared/ui/DataDisplay/Logo/ui/index.module.scss index 1ffce55d9a76c1b302b5162e6eb8065a6394a00c..c0657f1781204d2e10e69270b5780f7e07a9a87d 100644 --- a/src/shared/ui/DataDisplay/Logo/ui/index.module.scss +++ b/src/shared/ui/DataDisplay/Logo/ui/index.module.scss @@ -8,6 +8,19 @@ max-width: 11.875rem; } + img { + @apply w-full block; + } +} + + +.food { + @apply block; + @apply w-7; + @media (min-width: 1024px) { + @apply w-12.5; + } + img { @apply w-full block; } diff --git a/src/shared/ui/DataDisplay/Logo/ui/index.ts b/src/shared/ui/DataDisplay/Logo/ui/index.ts index da170ebf5d67ee06017328c9cc01f8b5431b3efc..aaee414e99b45293aedcac97f08ffd476a057e82 100644 --- a/src/shared/ui/DataDisplay/Logo/ui/index.ts +++ b/src/shared/ui/DataDisplay/Logo/ui/index.ts @@ -1 +1,2 @@ -export * from "./Logo" \ No newline at end of file +export * from "./Logo" +export * from "./FoodLogo" \ No newline at end of file diff --git a/src/shared/ui/DataDisplay/Spinner/index.module.scss b/src/shared/ui/DataDisplay/Spinner/index.module.scss new file mode 100644 index 0000000000000000000000000000000000000000..e40e528b5b92a824db6c81e0dcdd6366068190ff --- /dev/null +++ b/src/shared/ui/DataDisplay/Spinner/index.module.scss @@ -0,0 +1,10 @@ +.base { + width: 3.375rem; + height: 3.375rem; + @apply lg:w-28 h-28; + + svg { + @apply w-full h-full; + @apply inline animate-spin fill-pink-500; + } +} \ No newline at end of file diff --git a/src/shared/ui/DataDisplay/Spinner/index.ts b/src/shared/ui/DataDisplay/Spinner/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..21ec561bd54b972bcab1976bc6d8a87e12df653b --- /dev/null +++ b/src/shared/ui/DataDisplay/Spinner/index.ts @@ -0,0 +1 @@ +export * from "./ui" \ No newline at end of file diff --git a/src/shared/ui/DataDisplay/Spinner/ui/Spinner.tsx b/src/shared/ui/DataDisplay/Spinner/ui/Spinner.tsx new file mode 100644 index 0000000000000000000000000000000000000000..29b778661636530f1bb4da53a1a667c513af5356 --- /dev/null +++ b/src/shared/ui/DataDisplay/Spinner/ui/Spinner.tsx @@ -0,0 +1,21 @@ +import styles from "./../index.module.scss" +import clsx from "clsx"; + +export const Spinner = () => { + return ( +
+ +
+ ) +} \ No newline at end of file diff --git a/src/shared/ui/DataDisplay/Spinner/ui/index.ts b/src/shared/ui/DataDisplay/Spinner/ui/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..d56b6b3df9573536ea97f73757e4f3bfc2e75fd0 --- /dev/null +++ b/src/shared/ui/DataDisplay/Spinner/ui/index.ts @@ -0,0 +1 @@ +export * from "./Spinner" \ No newline at end of file diff --git a/src/shared/ui/Icons/XIcon/XIcon.tsx b/src/shared/ui/Icons/XIcon/XIcon.tsx deleted file mode 100644 index e9c4956cad7b259cb8fc900003e05ede8e7d14c4..0000000000000000000000000000000000000000 --- a/src/shared/ui/Icons/XIcon/XIcon.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export const XIcon = () => ( - - - - -); \ No newline at end of file diff --git a/src/shared/ui/Icons/XIcon/XMarkIcon.tsx b/src/shared/ui/Icons/XIcon/XMarkIcon.tsx new file mode 100644 index 0000000000000000000000000000000000000000..7b75484f85ac97f6a736cf561a657d6318b38cb9 --- /dev/null +++ b/src/shared/ui/Icons/XIcon/XMarkIcon.tsx @@ -0,0 +1,10 @@ +import clsx from "clsx"; + +export const XMarkIcon = (props: { classNames?: string }) => ( + + + +); diff --git a/src/shared/ui/Icons/XIcon/index.ts b/src/shared/ui/Icons/XIcon/index.ts index 18ebda4c71d0ab9f94f37c52d7c6936fab89ffb6..e0e7b81b73121edacc0a3cbb6223fbb300bd7af3 100644 --- a/src/shared/ui/Icons/XIcon/index.ts +++ b/src/shared/ui/Icons/XIcon/index.ts @@ -1 +1 @@ -export * from "./XIcon" \ No newline at end of file +export * from "./XMarkIcon" \ No newline at end of file diff --git a/src/shared/ui/Icons/XMarkIcon/XIcon.tsx b/src/shared/ui/Icons/XMarkIcon/XIcon.tsx new file mode 100644 index 0000000000000000000000000000000000000000..0d551b93c8176e11b54ca11251520607deaec684 --- /dev/null +++ b/src/shared/ui/Icons/XMarkIcon/XIcon.tsx @@ -0,0 +1,10 @@ +import clsx from "clsx"; + +export const XIcon = (props: { classNames?: string }) => ( + + + + +); \ No newline at end of file diff --git a/src/shared/ui/Icons/XMarkIcon/index.ts b/src/shared/ui/Icons/XMarkIcon/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..18ebda4c71d0ab9f94f37c52d7c6936fab89ffb6 --- /dev/null +++ b/src/shared/ui/Icons/XMarkIcon/index.ts @@ -0,0 +1 @@ +export * from "./XIcon" \ No newline at end of file diff --git a/src/shared/ui/Navigation/NavBar/ui/index.module.scss b/src/shared/ui/Navigation/NavBar/ui/index.module.scss index 4334458e1418fb40bbfbab1bef59820fabcde3ab..26d5de27793fc6212a4ba97dd7ac73520981254e 100644 --- a/src/shared/ui/Navigation/NavBar/ui/index.module.scss +++ b/src/shared/ui/Navigation/NavBar/ui/index.module.scss @@ -26,6 +26,7 @@ .brand { position: relative; @apply flex items-center; + @apply lg:gap-3 gap-2; } .toggle { @@ -52,6 +53,7 @@ span { @apply hidden; } + .toggle__in { @apply w-7 h-5; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.01673 2.05274L18 18M17.7902 2L2 17.7546' stroke='%23FF3D6C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); diff --git a/src/shared/ui/Utils/Modal/ui/Modal.tsx b/src/shared/ui/Utils/Modal/ui/Modal.tsx index 350f75a31d903c9c4fb7440e5f4c0f9256795b22..6ecf513e1883654a9273c8e328ede831ebd98a80 100644 --- a/src/shared/ui/Utils/Modal/ui/Modal.tsx +++ b/src/shared/ui/Utils/Modal/ui/Modal.tsx @@ -3,7 +3,7 @@ import {ModalProps} from "@/shared/ui/Utils/Modal" import {Fragment, PropsWithChildren, useEffect} from "react"; import styles from "./index.module.scss" import clsx from "clsx"; -import {XIcon} from "@/shared/ui/Icons/XIcon"; +import {XMarkIcon} from "@/shared/ui/Icons/XIcon"; import {RemoveScroll} from "react-remove-scroll"; @@ -40,7 +40,7 @@ export const Modal = (props: PropsWithChildren) => { className={clsx(styles.close)} type={"button"} > - + {children}
diff --git a/src/views/about/ui/Content/Content.tsx b/src/views/about/ui/Content/Content.tsx index f474a89bf2623eb407969f0fdbd7d7e4b1c8d8d6..845d168745db58edcad3fcf17d8062696b92695d 100644 --- a/src/views/about/ui/Content/Content.tsx +++ b/src/views/about/ui/Content/Content.tsx @@ -45,7 +45,7 @@ export const Content = () => { В нашей новинке — фигурном жевательном
- мармеладе Fruittella со вкусом клубники
+ мармеладе Fruittella со вкусом клубники
и малины —
содержится фруктовое пюре. diff --git a/src/views/home/index.module.scss b/src/views/home/index.module.scss index b5c57af73b1fa88556d43a0304cccd60921e6f6e..7eb9f1d3db9f1d4e33fcd2ae9204ff3625f3e09e 100644 --- a/src/views/home/index.module.scss +++ b/src/views/home/index.module.scss @@ -2,46 +2,30 @@ @apply relative flex flex-col; @apply flex-grow overflow-hidden; - margin-top: calc(var(--h-menu) * -1); padding-top: calc(1rem + var(--h-menu)); - - - padding-bottom: 32rem; - @media (min-width: 1024px) { //padding-top: calc(8.25rem + var(--h-menu)); padding-top: calc(6rem + var(--h-menu)); - min-height: 69rem; + min-height: 67rem; @apply pb-0; } - } .bg { - - //background-image: url("/media/home/h-sm.png"), url("/media/home/b-sm.png"); - //background-position: left 6%, left 77%; - //background-size: 100%, 100%; - //background-repeat: no-repeat, no-repeat; - background-image: url("/media/home/h-sm.png"), url("/media/home/b-sm.png"); background-size: 100%, 100%; background-repeat: no-repeat; background-position: left 16%, left bottom; - @apply absolute pointer-events-none; @apply left-0 right-0 bottom-0 top-0 z-0; @media (min-width: 1024px) { background-image: url("/media/home/h-lg.png"), url("/media/home/f-lg.png"); background-size: 100%; - //background-image: url("/media/home/h-lg.png"), url("/media/home/b-lg.png"), url("/media/home/f-lg.png"); - //background-position: left top, center 32rem, center calc(100% - 14rem); - //background-size: 96%, 100%, 92%; background-position: left top, left bottom; background-repeat: no-repeat; } diff --git a/src/views/home/layout/Footer/Footer.tsx b/src/views/home/layout/Footer/Footer.tsx index c7c5b3afef70ec0602e41ecd842851d25c4993c9..6018dab8817c09be0d62057c447f4ef6d7b0feb1 100644 --- a/src/views/home/layout/Footer/Footer.tsx +++ b/src/views/home/layout/Footer/Footer.tsx @@ -5,9 +5,9 @@ export const Footer = () => {
- Реклама. ООО "Перфетти Ван Мелле", ИНН: 5017051394, Erid: 2VtzqvCy3z7 + Реклама. ООО «Перфетти Ван Мелле», ИНН: 5017051394, Erid: 2Vtzqvtbc6U
) -} \ No newline at end of file +}; \ No newline at end of file diff --git a/src/views/home/layout/Header/index.module.scss b/src/views/home/layout/Header/index.module.scss index 3b8646b1dd22973de483a135b3923d4b20ddb7b5..d429414a57c3b34946b912a800e8074eb90e86c3 100644 --- a/src/views/home/layout/Header/index.module.scss +++ b/src/views/home/layout/Header/index.module.scss @@ -44,8 +44,6 @@ } - - .sketch { @apply absolute; @apply z-0; @@ -56,10 +54,8 @@ width: 22.5rem; - - @media (min-width: 1024px) { - transform: scale(0, 0); + transform: scale(1, 1) rotate(0); width: 40.5rem; @apply -left-25 -top-10; } @@ -89,7 +85,7 @@ .slider { @apply relative z-10; @media (min-width: 1024px) { - @apply col-span-2 -mt-16; + @apply col-span-2 -mt-20; } } @@ -99,7 +95,7 @@ @apply pl-0; @media (min-width: 1024px) { - @apply mt-8; + @apply mt-5; @apply pl-6; } } \ No newline at end of file diff --git a/src/widgets/cards-slider/config/consts.ts b/src/widgets/cards-slider/config/consts.ts index 81de9c005c39947f71a12872c6c130b09c74eb98..7e5e353c113d588014047f301364f3c66b07e499 100644 --- a/src/widgets/cards-slider/config/consts.ts +++ b/src/widgets/cards-slider/config/consts.ts @@ -3,7 +3,7 @@ import {QuizItemData} from "@/shared/types/types"; export const QUIZ_ARRAY: QuizItemData[] = [ { src: '/media/cards/quiz/1.jpg', - label: "Сладка рыбалка\nс Fruittella", + label: "Сладкая рыбалка\nс Fruittella", text: "Купите конфеты или мармелад Fruittella. Поставьте 4–6 мисок\n(по количеству участников),\nпо 2 на каждого участника.\nОдну наполните конфетами\nи мармеладом Fruittella, а вторую оставьте пустой. Задача игроков — как можно быстрее переложить ложкой все конфеты и мармелад\nиз полной миски в пустую." }, @@ -16,13 +16,13 @@ export const QUIZ_ARRAY: QuizItemData[] = [ { src: '/media/cards/quiz/3.jpg', label: "Сладкий домик\nиз Fruittella", - text: "Купите конфеты или мармелад Fruittella и постройте домик\nиз конфет. Украсьте «дворик» мармеладом. Готовую композицию можно использовать\nкак праздничное и вкусное украшение для стола." + text: "Купите конфеты или мармелад Fruittella и постройте домик\nиз конфет. Украсьте «дворик» мармеладом. Готовую композицию\n можно использовать как праздничное\n и вкусное украшение для стола." }, { src: '/media/cards/quiz/4.jpg', label: "Раскопки Fruittella", - text: "Купите конфеты Fruittella\nи насыпьте немного в миску, засыпьте мукой или сахарной пудрой и перемешайте. Задача игроков — как можно быстрее «раскопать» все сладости. Кто соберёт больше конфет,\nтот победит!" + text: "Купите конфеты Fruittella\nи насыпьте немного в миску,\n засыпьте мукой или сахарной\n пудрой и перемешайте. Задача\n игроков — как можно быстрее\n «раскопать» все сладости.\n Кто соберёт больше конфет,\nтот победит!" }, { @@ -34,7 +34,7 @@ export const QUIZ_ARRAY: QuizItemData[] = [ { src: '/media/cards/quiz/6.jpg', label: "Лабиринт\nдля Fruittella", - text: "Купите конфеты Fruittella , нарисуйте на листе А4 простой лабиринт с несколькими стартами и финишами. Дайте каждому игроку карандаш. Задача — пройти лабиринт быстрее всех и забрать конфету, лежащую на финише.\nКто первым дойдёт до финала,\nтот побеждает!" + text: "Купите конфеты Fruittella,\n нарисуйте на листе А4 простой\n лабиринт с несколькими стартами\n и финишами. Дайте каждому игроку\n карандаш. Задача — пройти\n лабиринт быстрее всех и забрать\n конфету, лежащую на финише. \nКто первым дойдёт до финала, \nтот побеждает!" }, { diff --git a/src/widgets/cards-slider/index.module.scss b/src/widgets/cards-slider/index.module.scss index 1f5c7408fc8bc45f774e2c497149a2b949caf3f6..5d38cb58d97124cd124e6a13a589a582bef20d2c 100644 --- a/src/widgets/cards-slider/index.module.scss +++ b/src/widgets/cards-slider/index.module.scss @@ -24,7 +24,7 @@ @apply mt-5 pl-3; @media (min-width: 1024px) { - @apply mt-10 px-2; + @apply mt-8 px-2; } } diff --git a/src/widgets/quiz-detailed/ui/QuizDetailed.tsx b/src/widgets/quiz-detailed/ui/QuizDetailed.tsx index a5005252ca43e855c070dd4ac0fc040b0fed4ece..60d73f44788c5ba69e0c59d79051a8ad54afde3e 100644 --- a/src/widgets/quiz-detailed/ui/QuizDetailed.tsx +++ b/src/widgets/quiz-detailed/ui/QuizDetailed.tsx @@ -44,7 +44,7 @@ export const QuizDetailed = () => { -
+
diff --git a/src/widgets/video-modal/index.module.scss b/src/widgets/video-modal/index.module.scss index b6dc4a4659356183408a5b5bf2fe7375eecf019a..5821f592bf45afd4952a4ac80063268da1509504 100644 --- a/src/widgets/video-modal/index.module.scss +++ b/src/widgets/video-modal/index.module.scss @@ -27,9 +27,7 @@ @media (min-width: 1024px) { @apply top-0 right-0; - width: 56px; - height: 56px; - margin: -52px; + @apply -m-12 w-14 h-14; box-shadow: 5px 8px 8px 0 #00000026; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.01673 2.05274L18 18M17.7902 2L2 17.7546' stroke='%23FF3D6C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-size: 55%; @@ -39,24 +37,43 @@ } +.video { + + border-radius: 20px; + + @apply w-full h-full overflow-hidden; + + + @media (min-width: 1024px) { + border-radius: 1.75rem; + } + + iframe, + video{ + @apply w-full h-full object-cover; + } + + + +} + .in { - max-width: 1200px; + max-width: 75rem; @apply w-full relative; @apply animate-scaleIn m-auto; - background: linear-gradient(156.77deg, #C5E6FF 15.02%, #6DC0FF 84.98%); border-width: 2px; border-color: #fff; border-radius: 20px; height: 12rem; - - + + @media (min-width: 1024px) { - border-radius: 30px; + border-radius: 1.875rem; border-width: 3px; box-shadow: 4px 4px 33px 0px #00000040; - height: 675px; + height: 42rem; } } @@ -85,6 +102,13 @@ } } + +.loader { + @apply absolute; + @apply left-0 top-0 right-0 bottom-0; + @apply flex justify-center items-center; +} + .play { @apply transition-all; @@ -92,8 +116,7 @@ height: 3.375rem; @media (min-width: 1024px) { - width: 112px; - height: 112px; + @apply w-28 h-28; } @@ -102,6 +125,6 @@ } img { - @apply w-full h-full object-cover block; + @apply w-full h-full object-contain block; } } \ No newline at end of file diff --git a/src/widgets/video-modal/ui/VideoModal.tsx b/src/widgets/video-modal/ui/VideoModal.tsx index eb73a5c1bc1c879e6c563920149513b5852a2214..7e0a04987ecf0fb6f30b4750ac1e5a7d5cd07692 100644 --- a/src/widgets/video-modal/ui/VideoModal.tsx +++ b/src/widgets/video-modal/ui/VideoModal.tsx @@ -1,5 +1,5 @@ 'use client' -import {Fragment} from "react"; +import {Fragment, useEffect, useState} from "react"; import {RemoveScroll} from "react-remove-scroll"; import {useModal} from "@/shared/store/modal-store"; import styles from "./../index.module.scss" @@ -9,27 +9,83 @@ export const VideoModal = () => { const {open, onClose} = useModal(); + const [isPlay, setIsPlay] = useState(false); + + const isOpen = open === 'video'; + const onCloseModal = () => { + document.body.classList.remove("overflow-hidden"); + document.documentElement.classList.remove("overflow-hidden"); + onClose(); + }; + + useEffect(() => { + if (isOpen) { + document.body.classList.add("overflow-hidden"); + document.documentElement.classList.add("overflow-hidden"); + return; + } + + setIsPlay(false) + }, [isOpen]); + return ( { isOpen &&
-
onClose()} className={clsx(styles.overlay)}/> +
onCloseModal()} className={clsx(styles.overlay)}/>
-
-
+ {/*
*/} + {/*
*/} + {/* */} + {/* */} + {/* */} + {/*
*/} + {/*
*/} + {/* Скоро!*/} + {/*
*/} + {/*
*/} +
setIsPlay(true)} className={clsx(styles.trigger)}> +
- +
-
- Скоро! -
+ {/*
*/} + {/* Скоро!*/} + {/*
*/}
+ {/*{*/} + {/* (isPlay && isLoading) &&
*/} + {/* */} + {/*
*/} + {/*}*/} + { + isPlay &&
+ + {/* setIsLoading(false)}*/} + {/* src="https://vkvideo.ru/video_ext.php?oid=-105540643&id=456239017&hd=2&hash=8f8f9d11af9fb3da&autoplay=1"*/} + {/* width="853" height="480"*/} + {/* allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;"*/} + {/* frameBorder="0" allowFullScreen/>*/} +
+ }