diff --git a/.gitignore b/.gitignore index 005291a8..868617fa 100644 --- a/.gitignore +++ b/.gitignore @@ -160,3 +160,5 @@ docker-compose.override.yml # gitignore only blocks new untracked files. Move docs you want # shared into README/AGENTS/CLAUDE.md or a dedicated published path.) /docs/ + +.codegraph/ \ No newline at end of file diff --git a/public/assets/cookies/close.svg b/public/assets/cookies/close.svg new file mode 100644 index 00000000..72d11442 --- /dev/null +++ b/public/assets/cookies/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/landingPage/dark-bg.png b/public/assets/landingPage/dark-bg.png new file mode 100644 index 00000000..28650721 Binary files /dev/null and b/public/assets/landingPage/dark-bg.png differ diff --git a/public/assets/landingPage/dark-theme-bg.png b/public/assets/landingPage/dark-theme-bg.png new file mode 100644 index 00000000..d6a923b5 Binary files /dev/null and b/public/assets/landingPage/dark-theme-bg.png differ diff --git a/public/assets/landingPage/dark.png b/public/assets/landingPage/dark.png new file mode 100644 index 00000000..776445b4 Binary files /dev/null and b/public/assets/landingPage/dark.png differ diff --git a/public/assets/landingPage/image.png b/public/assets/landingPage/image.png new file mode 100644 index 00000000..87f598f6 Binary files /dev/null and b/public/assets/landingPage/image.png differ diff --git a/public/assets/landingPage/used-by-dark.png b/public/assets/landingPage/used-by-dark.png new file mode 100644 index 00000000..dfce1af4 Binary files /dev/null and b/public/assets/landingPage/used-by-dark.png differ diff --git a/src/components/Box/Box.module.scss b/src/components/Box/Box.module.scss index 23d277b9..60aaf94b 100644 --- a/src/components/Box/Box.module.scss +++ b/src/components/Box/Box.module.scss @@ -5,56 +5,150 @@ unchanged. Pairs with `viewport-fit=cover` in SeoGenerator. */ bottom: max(15px, env(safe-area-inset-bottom)); right: 15px; - position: -webkit-fixed; - height: auto; width: 100%; - max-width: 450px; - background-color: #fff; + max-width: 480px; + padding: 20px; + display: flex; + flex-direction: column; + gap: 24px; + background-color: #ffffff; + background-image: url('/keepsimple_/assets/landingPage/landing-bg.webp'); + background-repeat: repeat; z-index: 2147483647; - border-radius: 8px; box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, 0.05), 0px 30px 30px 0px rgba(0, 0, 0, 0.04), 0px 68px 41px 0px rgba(0, 0, 0, 0.03), 0px 122px 49px 0px rgba(0, 0, 0, 0.01), 0px 190px 53px 0px rgba(0, 0, 0, 0); +} + +.header { + display: flex; + flex-direction: column; + gap: 20px; +} + +.headerRow { + display: flex; + justify-content: space-between; + align-items: center; + gap: 16px; +} + +.title { + font-family: 'Aboreto-Regular', serif; + font-weight: 400; + font-size: 20px; + line-height: 1.16; + letter-spacing: 0; + text-transform: uppercase; + color: rgba(0, 0, 0, 0.85); +} + +.closeBtn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 26px; + height: 26px; + padding: 0; + background: none; + border: none; + cursor: pointer; + transition: opacity 0.2s ease; + + &:hover { + opacity: 0.7; + } +} + +.closeIcon { + width: 26px; + height: 26px; +} + +.divider { + display: block; + width: 100%; + height: 0; + border-top: 2px solid #9d9d9d; +} + +.txt { + margin: 0; + font-family: 'Source-Serif-Regular', serif; + font-weight: 400; + font-size: 14px; + line-height: 1.5; + color: #000000; +} + +.btnWrapper { + display: flex; + justify-content: flex-end; +} + +.acceptBtn { + padding: 9px 24px; + font-family: 'Source-Serif-Regular', serif; + font-weight: 400; + font-size: 16px; + line-height: 1.4; + text-align: center; + background-color: #242424; + color: #ffffff; + border: none; + border-radius: 0; + cursor: pointer; + transition: + background-color 0.2s ease, + color 0.2s ease, + opacity 0.2s ease; + + &:hover { + opacity: 0.88; + } +} + +.ruLang .title { + font-family: 'Source-Serif-Regular', serif; +} + +.hyLang { + .title, + .txt, + .acceptBtn { + font-family: 'NotoSansArmenian-Regular', sans-serif; + } +} + +// Dark theme — body.darkTheme class is toggled by useGlobals. +:global(.darkTheme) { + .content { + background-color: #1b1e26; + background-image: url('/keepsimple_/assets/landingPage/landing-dark-bg.webp'); + } + + .title { + color: rgba(255, 255, 255, 0.85); + } - .header { - border-bottom: 1px solid #d9d9d9; - width: 100%; - justify-content: space-between; - padding-top: 13px; - padding-bottom: 8px; - display: flex; - align-items: center; - - .title { - padding: 10px; - font-size: 16px; - color: #28587b; - font-family: 'Lato', sans-serif; - } + .closeIcon { + filter: brightness(0) invert(1); } - .closeBtn { - padding-right: 15px; - cursor: pointer; + .divider { + border-top-color: #5b5b5b; } .txt { - padding: 5px 15px; - font-size: 16px; - line-height: 150%; - font-family: 'Lato', sans-serif; - color: #252626; + color: #ffffff; } - .btnWrapper { - display: flex; - justify-content: flex-end; - gap: 15px; - padding-right: 15px; - padding-bottom: 15px; + .acceptBtn { + background-color: #ffffff; + color: rgba(0, 0, 0, 0.85); } } diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx index 7c850c7d..2d1ced28 100644 --- a/src/components/Box/Box.tsx +++ b/src/components/Box/Box.tsx @@ -1,4 +1,5 @@ import cn from 'classnames'; +import Image from 'next/image'; import { useRouter } from 'next/router'; import { FC } from 'react'; @@ -6,8 +7,6 @@ import { TRouter } from '@local-types/global'; import cookieData from '@data/cookies'; -import Button from '@components/Button'; - import styles from './Box.module.scss'; interface CookiesBoxProps { @@ -20,25 +19,44 @@ const Box: FC = ({ setIsSeen }) => { const { title, description, ok } = cookieData[locale]; return ( -
-
-
+
+
+
{title} -
-

{description}

-
-
+ +
+

{description}

+
+
); diff --git a/src/components/Headline/Headline.module.scss b/src/components/Headline/Headline.module.scss index fa728126..a2bc14bc 100644 --- a/src/components/Headline/Headline.module.scss +++ b/src/components/Headline/Headline.module.scss @@ -39,6 +39,12 @@ max-height: 100%; .videoContainer { + position: absolute; + inset: 0; + pointer-events: none; + overflow: hidden; + z-index: -1; + .poster { width: 100%; height: 100%; @@ -46,7 +52,6 @@ position: absolute; top: 0; left: 0; - z-index: -1; } .video { @@ -56,7 +61,6 @@ position: absolute; top: 0; left: 0; - z-index: -1; background-color: unset; opacity: 0; transition: opacity 300ms ease; @@ -181,6 +185,22 @@ padding-top: 5px; align-items: center; + a { + display: inline-flex; + transition: + opacity 0.2s ease, + transform 0.2s ease; + + img { + transition: filter 0.2s ease; + } + + &:hover { + opacity: 0.75; + transform: translateY(-2px); + } + } + .btn { border-radius: 2px; width: 100px; @@ -208,6 +228,7 @@ .serenityBtn { color: #fafafa; } + background-image: url('/keepsimple_/assets/landingPage/dark-theme-bg.png'); .leaf { filter: brightness(0) invert(1); @@ -328,6 +349,7 @@ max-width: 100%; height: 55vh; position: relative; + overflow: hidden; &::after { content: ''; diff --git a/src/components/UsedBy/UsedBy.module.scss b/src/components/UsedBy/UsedBy.module.scss index 8e3eb019..3da30558 100644 --- a/src/components/UsedBy/UsedBy.module.scss +++ b/src/components/UsedBy/UsedBy.module.scss @@ -28,8 +28,12 @@ } &::before { - background-image: url('/keepsimple_/assets/landingPage/usedByDark.png'); - background-size: cover; + background-image: url('/keepsimple_/assets/landingPage/dark.png'); + // url('/keepsimple_/assets/landingPage/used-by-dark.png'); + background-repeat: repeat, no-repeat; + background-size: + 560px 420px, + cover; opacity: 1; } } diff --git a/src/styles/globals.scss b/src/styles/globals.scss index e7346fa8..d884ba19 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -110,7 +110,7 @@ body { background: unset; } .keepsimplePagesDark { - background-image: url('/keepsimple_/assets/landingPage/landing-dark-bg.webp') !important; + background-image: url('/keepsimple_/assets/landingPage/dark-theme-bg.png') !important; background-repeat: repeat; background-size: 560px 420px; } diff --git a/src/uxcore/components/OurProjectsModal/OurProjectsModal.module.scss b/src/uxcore/components/OurProjectsModal/OurProjectsModal.module.scss index b372c3b5..f90f5e3e 100644 --- a/src/uxcore/components/OurProjectsModal/OurProjectsModal.module.scss +++ b/src/uxcore/components/OurProjectsModal/OurProjectsModal.module.scss @@ -99,6 +99,11 @@ .name { color: #dadada !important; } + + .projectIcon, + .openLinkIcon { + filter: invert(1); + } } .description, @@ -111,9 +116,25 @@ color: #dadada; background-color: transparent; + .darkIcon { + display: none; + } + + .lightIcon { + display: inline-block; + } + &:hover { background-color: #dadada; color: #1b1e26; + + .darkIcon { + display: inline-block; + } + + .lightIcon { + display: none; + } } } } diff --git a/src/uxcore/components/UXCorePopup/UXCorePopup.module.scss b/src/uxcore/components/UXCorePopup/UXCorePopup.module.scss index 359a0950..89b212d3 100644 --- a/src/uxcore/components/UXCorePopup/UXCorePopup.module.scss +++ b/src/uxcore/components/UXCorePopup/UXCorePopup.module.scss @@ -20,10 +20,12 @@ font-size: 20px; font-weight: 500; margin: 5px 15px 15px 15px; + color: #252626; } .link { font-size: 14px; + color: #1166cc; } .iconWrapper { @@ -33,6 +35,23 @@ display: flex; padding-right: 10px; } + + &.dark { + background: #1e2128; + border-color: #303338; + + .title { + color: #dadada; + } + + .link { + color: #8ab4f8; + } + + .closeIcon { + filter: invert(1); + } + } } @keyframes fadeIn { diff --git a/src/uxcore/components/UXCorePopup/UXCorePopup.tsx b/src/uxcore/components/UXCorePopup/UXCorePopup.tsx index 2ed1e7d9..8f35c51b 100644 --- a/src/uxcore/components/UXCorePopup/UXCorePopup.tsx +++ b/src/uxcore/components/UXCorePopup/UXCorePopup.tsx @@ -1,11 +1,11 @@ +import podcast from '@uxcore/data/podcast'; +import useGlobals from '@uxcore/hooks/useGlobals'; +import type { TRouter } from '@uxcore/local-types/global'; +import cn from 'classnames'; import { useRouter } from 'next/router'; import React, { FC } from 'react'; import { Player } from 'react-simple-player/lib/components/Player'; -import type { TRouter } from '@uxcore/local-types/global'; - -import podcast from '@uxcore/data/podcast'; - import styles from './UXCorePopup.module.scss'; type UXCorePopupTypes = { @@ -19,6 +19,7 @@ type UXCorePopupTypes = { const UXCorePopup: FC = ({ setOpenPodcast, openPodcast }) => { const router = useRouter(); const { locale } = router as TRouter; + const { isDarkTheme } = useGlobals()[1]; const { title, source, link, podcastLink } = podcast[locale]; const closePopUp = () => { setOpenPodcast(false); @@ -27,7 +28,10 @@ const UXCorePopup: FC = ({ setOpenPodcast, openPodcast }) => { return ( locale !== 'hy' && openPodcast && ( -
+
= ({ setOpenPodcast, openPodcast }) => { {source}

- +