diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 7164a76..e0309f1 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,4 +1,4 @@ -import React, { FC, Fragment, useCallback, useContext, useState } from 'react'; +import React, { FC, Fragment, useCallback, useContext } from 'react'; import cn from 'classnames'; import { useRouter } from 'next/router'; import Image from 'next/image'; @@ -7,8 +7,8 @@ import { flushSync } from 'react-dom'; import Navbar from '@components/Navbar'; import Link from '@components/NextLink'; import { GlobalContext } from '@components/Context/GlobalContext'; -import UserProfile from '@components/UserProfile'; -import LogIn from '@components/LogIn'; +// import UserProfile from '@components/UserProfile'; +// import LogIn from '@components/LogIn'; import type { TRouter } from '@local-types/global'; @@ -22,8 +22,8 @@ const Header: FC = () => { const { locale, locales } = router as TRouter; const { setShowLoader, videoRef } = useContext(GlobalContext); const isSmallScreen = useIsWidthLessThan(1141); - const [openLogin, setOpenLogin] = useState(false); - const { accountData, setAccountData } = useContext(GlobalContext); + // const [openLogin, setOpenLogin] = useState(false); + // const { accountData, setAccountData } = useContext(GlobalContext); const [ { toggleIsDarkTheme, toggleSidebar }, { isDarkTheme, isOpenedSidebar }, @@ -157,18 +157,18 @@ const Header: FC = () => { )} - + {/**/}
- {openLogin && } + {/*{openLogin && }*/} ); }; diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss index 18b4c11..23c2deb 100644 --- a/src/components/Modal/Modal.module.scss +++ b/src/components/Modal/Modal.module.scss @@ -20,7 +20,7 @@ position: relative; z-index: 80; border-radius: 4px; - background-image: url('/assets/landingPage/landing-bg.png'); + background-image: url('/keepsimple_/assets/landingPage/landing-bg.png'); .header { .hadBorder { @@ -165,10 +165,20 @@ @media (max-width: 965px) { .overlay { .full { - max-width: -webkit-fill-available !important; margin: 16px; + height: -webkit-fill-available !important; + + .body { + height: 100%; + text-align: center; + } } } + + .withBackgroundImage { + background-color: unset; + background-size: cover; + } } @media (max-width: 800px) { diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index 9ba2ed8..d663a89 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -25,6 +25,7 @@ type ModalProps = { isLongevityProtocolModal?: boolean; grayTitle?: boolean; dataCy?: string; + backgroundImageUrl?: string; }; const Modal: FC = ({ @@ -47,6 +48,7 @@ const Modal: FC = ({ grayTitle, dataCy, isLongevityProtocolModal, + backgroundImageUrl, }) => { const handleClose = () => { onClick(); @@ -92,7 +94,7 @@ const Modal: FC = ({ data-cy={dataCy} >
{}} data-cy={'modal-background-click'} /> @@ -104,7 +106,13 @@ const Modal: FC = ({ [wrapperClassName]: wrapperClassName, [styles.fullSizeMobile]: fullSizeMobile, [styles.isLongevityProtocolModal]: isLongevityProtocolModal, + [styles.withBackgroundImage]: backgroundImageUrl, })} + style={{ + backgroundImage: backgroundImageUrl + ? `url(${backgroundImageUrl})` + : 'none', + }} > {!removeHeader && (
= ({
close right line = ({ )} {withoutHeader && ( modal close button = ({ width={512} height={455} className={styles.chart} + unoptimized /> ) : null}
diff --git a/src/components/longevity/MobileNavigation/MobileNavigation.tsx b/src/components/longevity/MobileNavigation/MobileNavigation.tsx index e566f88..da08084 100644 --- a/src/components/longevity/MobileNavigation/MobileNavigation.tsx +++ b/src/components/longevity/MobileNavigation/MobileNavigation.tsx @@ -82,13 +82,16 @@ const MobileNavigation: FC = () => { icon: , }, ]; - const getActiveNavItemName = (nav1, nav2) => { + const getActiveNavItemName = (nav1, nav2 = []) => { + const pathname = router.pathname; + const active = - nav1.find(i => i.path === router.pathname) ?? - nav2.find(i => i.path === router.pathname); + nav1.find(i => !i.hasNoUrl && i.path === pathname) ?? + nav2.find(i => i.path === pathname); return active?.name ?? ''; }; + // TODO - Get back to this // const getNextNavItemName = (nav1, nav2) => { // const allNavItems = [...nav1, ...nav2]; diff --git a/src/components/longevity/StudySection/StudySection.module.scss b/src/components/longevity/StudySection/StudySection.module.scss index ec10b3b..81dd983 100644 --- a/src/components/longevity/StudySection/StudySection.module.scss +++ b/src/components/longevity/StudySection/StudySection.module.scss @@ -101,6 +101,7 @@ .studySection { margin-right: 16px; margin-bottom: 20px; + .headline { max-width: unset; padding: 16px 12px; @@ -128,7 +129,6 @@ align-items: center; gap: 12px; background-color: transparent; - //background-image: url("/keepsimple_/assets/longevity/btn-border.svg"); } } } @@ -137,4 +137,7 @@ display: none; } } + .hacksModalBody { + display: flex !important; + } } diff --git a/src/components/longevity/StudySection/StudySection.tsx b/src/components/longevity/StudySection/StudySection.tsx index b382785..a5e6a08 100644 --- a/src/components/longevity/StudySection/StudySection.tsx +++ b/src/components/longevity/StudySection/StudySection.tsx @@ -22,6 +22,7 @@ const StudySection: FC = ({ flippedCardChart, flippedCardPainText, hacksQuote, + backsBackgroundImageUrl, quoteAuthor, }) => { const [switchPage, setSwitchPage] = useState(false); @@ -40,6 +41,7 @@ const StudySection: FC = ({ alt={title} width={948} height={67} + unoptimized className={styles.backgroundImg} /> = ({ alt={'Learn more icon'} width={16} height={16} + unoptimized /> Learn More @@ -97,7 +100,16 @@ const StudySection: FC = ({ )} {isMobile && openModal && ( - setOpenModal(false)}> + setOpenModal(false)} + backgroundImageUrl={ + backsBackgroundImageUrl + ? backsBackgroundImageUrl + : '/keepsimple_/assets/longevity/study/flipped-card-bg.png' + } + bodyClassName={isHacks ? styles.hacksModalBody : styles.modalBody} + > = ({ data, locale }) => { title={data?.routine?.title || ''} description={data?.routine?.description || ''} headlineBackgroundImageUrl={`${imgPath}routine.png`} - whatDamages={data?.routine?.['what damages']} + whatDamages={data?.routine?.['damage type']} /> {' '} diff --git a/src/layouts/Layout.module.scss b/src/layouts/Layout.module.scss index 885eb4a..b5cea68 100644 --- a/src/layouts/Layout.module.scss +++ b/src/layouts/Layout.module.scss @@ -49,7 +49,7 @@ gap: 0; } - .videoWrapper { + .videoLayer { display: none; } } diff --git a/src/layouts/StudyLayout/StudyLayout.tsx b/src/layouts/StudyLayout/StudyLayout.tsx index 90017dd..1fef197 100644 --- a/src/layouts/StudyLayout/StudyLayout.tsx +++ b/src/layouts/StudyLayout/StudyLayout.tsx @@ -46,6 +46,7 @@ const StudyLayout: FC = ({ data, locale }) => { description={data?.['explain to learn description']} /> = ({ data, locale }) => { flippedCardPainText={ data['research tasks']?.['flipped card pain caption'] } + flippedCardChart={`${process.env.NEXT_PUBLIC_STRAPI}${data?.['research tasks flipped card image']?.data?.attributes?.url}`} /> = ({ data, locale }) => { isHacks hacksQuote={data.hacks?.['hacks card quote']} quoteAuthor={data.hacks?.['hacks card quote author']} + flippedCardChart={`${process.env.NEXT_PUBLIC_STRAPI}${data?.['hacks flipped card image']?.data?.attributes?.url}`} + backsBackgroundImageUrl={`${process.env.NEXT_PUBLIC_STRAPI}${data?.['hacks flipped card image']?.data?.attributes?.url}`} />
); diff --git a/src/pages/tools/longevity-protocol/about-project.tsx b/src/pages/tools/longevity-protocol/about-project.tsx index ec86e44..f3dc0e5 100644 --- a/src/pages/tools/longevity-protocol/about-project.tsx +++ b/src/pages/tools/longevity-protocol/about-project.tsx @@ -11,6 +11,22 @@ const AboutProject = ({ aboutTheProject }) => { const { locale } = router; const currentLocale = locale === 'ru' ? 'ru' : 'en'; + const OGTags = { + ogDescription: aboutTheProject[currentLocale]?.ogDescription || '', + ogTitle: aboutTheProject[currentLocale]?.ogTitle || '', + ogType: aboutTheProject[currentLocale]?.ogType || '', + ogImageAlt: aboutTheProject[currentLocale]?.ogImageAlt || '', + ogImage: { + data: { + attributes: { + url: + aboutTheProject[currentLocale]?.ogImage?.data?.attributes?.url || + '', + }, + }, + }, + }; + return ( <> { title: aboutTheProject[currentLocale]?.Seo?.pageTitle || '', seoTitle: aboutTheProject[currentLocale]?.Seo?.seoTitle || '', }} - ogTags={aboutTheProject[currentLocale]?.OGTags || []} + ogTags={OGTags} createdDate={aboutTheProject[currentLocale]?.createdAt || ''} modifiedDate={aboutTheProject[currentLocale]?.updatedAt || ''} /> diff --git a/src/pages/tools/longevity-protocol/environment.tsx b/src/pages/tools/longevity-protocol/environment.tsx index f7101bf..81889fc 100644 --- a/src/pages/tools/longevity-protocol/environment.tsx +++ b/src/pages/tools/longevity-protocol/environment.tsx @@ -11,6 +11,20 @@ const Environment = ({ environment }) => { const { locale } = router; const currentLocale = locale === 'ru' ? 'ru' : 'en'; + const OGTags = { + ogDescription: environment[currentLocale]?.ogDescription || '', + ogTitle: environment[currentLocale]?.ogTitle || '', + ogType: environment[currentLocale]?.ogType || '', + ogImageAlt: environment[currentLocale]?.ogImageAlt || '', + ogImage: { + data: { + attributes: { + url: environment[currentLocale]?.ogImage?.data?.attributes?.url || '', + }, + }, + }, + }; + return ( <> { title: environment[currentLocale]?.Seo?.pageTitle || '', seoTitle: environment[currentLocale]?.Seo?.seoTitle || '', }} - ogTags={environment[currentLocale]?.OGTags || []} + ogTags={OGTags} createdDate={environment[currentLocale]?.createdAt || ''} modifiedDate={environment[currentLocale]?.updatedAt || ''} /> diff --git a/src/pages/tools/longevity-protocol/habits/diet.tsx b/src/pages/tools/longevity-protocol/habits/diet.tsx index c97ffba..e2a84fc 100644 --- a/src/pages/tools/longevity-protocol/habits/diet.tsx +++ b/src/pages/tools/longevity-protocol/habits/diet.tsx @@ -11,6 +11,20 @@ const Diet = ({ dietData }) => { const { locale } = router; const currentLocale = locale === 'ru' ? 'ru' : 'en'; + const OGTags = { + ogDescription: dietData[currentLocale]?.ogDescription || '', + ogTitle: dietData[currentLocale]?.ogTitle || '', + ogType: dietData[currentLocale]?.ogType || '', + ogImageAlt: dietData[currentLocale]?.ogImageAlt || '', + ogImage: { + data: { + attributes: { + url: dietData[currentLocale]?.ogImage?.data?.attributes?.url || '', + }, + }, + }, + }; + return ( <> { title: dietData[currentLocale]?.Seo?.seoTitle || '', seoTitle: dietData[currentLocale]?.Seo?.seoTitle || '', }} - ogTags={dietData[currentLocale]?.OGTags || []} + ogTags={OGTags} createdDate={dietData[currentLocale]?.createdAt || ''} modifiedDate={dietData[currentLocale]?.updatedAt || ''} /> diff --git a/src/pages/tools/longevity-protocol/habits/lifestyle.tsx b/src/pages/tools/longevity-protocol/habits/lifestyle.tsx index c0bfa23..40e502e 100644 --- a/src/pages/tools/longevity-protocol/habits/lifestyle.tsx +++ b/src/pages/tools/longevity-protocol/habits/lifestyle.tsx @@ -11,6 +11,20 @@ const Lifestyle = ({ habitsData }) => { const { locale } = router; const currentLocale = locale === 'ru' ? 'ru' : 'en'; + const OGTags = { + ogDescription: habitsData[currentLocale]?.ogDescription || '', + ogTitle: habitsData[currentLocale]?.ogTitle || '', + ogType: habitsData[currentLocale]?.ogType || '', + ogImageAlt: habitsData[currentLocale]?.ogImageAlt || '', + ogImage: { + data: { + attributes: { + url: habitsData[currentLocale]?.ogImage?.data?.attributes?.url || '', + }, + }, + }, + }; + return ( <> { title: habitsData[currentLocale]?.Seo?.pageTitle || '', seoTitle: habitsData[currentLocale]?.Seo?.seoTitle || '', }} - ogTags={habitsData[currentLocale]?.OGTags || []} + ogTags={OGTags} createdDate={habitsData[currentLocale]?.createdAt || ''} modifiedDate={habitsData[currentLocale]?.updatedAt || ''} /> diff --git a/src/pages/tools/longevity-protocol/habits/sleep.tsx b/src/pages/tools/longevity-protocol/habits/sleep.tsx index ff5c722..5b07d3d 100644 --- a/src/pages/tools/longevity-protocol/habits/sleep.tsx +++ b/src/pages/tools/longevity-protocol/habits/sleep.tsx @@ -12,6 +12,20 @@ const Sleep = ({ sleepData, sleepSupplements }) => { const { locale } = router; const currentLocale = locale === 'ru' ? 'ru' : 'en'; + const OGTags = { + ogDescription: sleepData[currentLocale]?.ogDescription || '', + ogTitle: sleepData[currentLocale]?.ogTitle || '', + ogType: sleepData[currentLocale]?.ogType || '', + ogImageAlt: sleepData[currentLocale]?.ogImageAlt || '', + ogImage: { + data: { + attributes: { + url: sleepData[currentLocale]?.ogImage?.data?.attributes?.url || '', + }, + }, + }, + }; + return ( <> { title: sleepData[currentLocale]?.Seo?.pageTitle || '', seoTitle: sleepData[currentLocale]?.Seo?.seoTitle || '', }} - ogTags={sleepData[currentLocale]?.OGTags || []} + ogTags={OGTags} createdDate={sleepData[currentLocale]?.createdAt || ''} modifiedDate={sleepData[currentLocale]?.updatedAt || ''} /> diff --git a/src/pages/tools/longevity-protocol/habits/study.tsx b/src/pages/tools/longevity-protocol/habits/study.tsx index ea12bfd..979928b 100644 --- a/src/pages/tools/longevity-protocol/habits/study.tsx +++ b/src/pages/tools/longevity-protocol/habits/study.tsx @@ -11,6 +11,20 @@ const Study = ({ studyData }) => { const { locale } = router; const currentLocale = locale === 'ru' ? 'ru' : 'en'; + const OGTags = { + ogDescription: studyData[currentLocale]?.ogDescription || '', + ogTitle: studyData[currentLocale]?.ogTitle || '', + ogType: studyData[currentLocale]?.ogType || '', + ogImageAlt: studyData[currentLocale]?.ogImageAlt || '', + ogImage: { + data: { + attributes: { + url: studyData[currentLocale]?.ogImage?.data?.attributes?.url || '', + }, + }, + }, + }; + return ( <> { title: studyData[currentLocale]?.Seo?.pageTitle || '', seoTitle: studyData[currentLocale]?.Seo?.seoTitle || '', }} - ogTags={studyData[currentLocale]?.OGTags || []} + ogTags={OGTags} createdDate={studyData[currentLocale]?.createdAt || ''} modifiedDate={studyData[currentLocale]?.updatedAt || ''} /> diff --git a/src/pages/tools/longevity-protocol/habits/supplements.tsx b/src/pages/tools/longevity-protocol/habits/supplements.tsx index 86a449d..496267e 100644 --- a/src/pages/tools/longevity-protocol/habits/supplements.tsx +++ b/src/pages/tools/longevity-protocol/habits/supplements.tsx @@ -11,6 +11,20 @@ const Supplements = ({ supplements }) => { const { locale } = router; const currentLocale = locale === 'ru' ? 'ru' : 'en'; + const OGTags = { + ogDescription: supplements[currentLocale]?.ogDescription || '', + ogTitle: supplements[currentLocale]?.ogTitle || '', + ogType: supplements[currentLocale]?.ogType || '', + ogImageAlt: supplements[currentLocale]?.ogImageAlt || '', + ogImage: { + data: { + attributes: { + url: supplements[currentLocale]?.ogImage?.data?.attributes?.url || '', + }, + }, + }, + }; + return ( <> { title: supplements[currentLocale]?.Seo?.pageTitle || '', seoTitle: supplements[currentLocale]?.Seo?.seoTitle || '', }} - ogTags={supplements[currentLocale]?.OGTags || []} + ogTags={OGTags} createdDate={supplements[currentLocale]?.createdAt || ''} modifiedDate={supplements[currentLocale]?.updatedAt || ''} /> diff --git a/src/pages/tools/longevity-protocol/habits/workout.tsx b/src/pages/tools/longevity-protocol/habits/workout.tsx index 811736f..f6c399f 100644 --- a/src/pages/tools/longevity-protocol/habits/workout.tsx +++ b/src/pages/tools/longevity-protocol/habits/workout.tsx @@ -11,6 +11,20 @@ const Workout = ({ workoutData }) => { const { locale } = router; const currentLocale = locale === 'ru' ? 'ru' : 'en'; + const OGTags = { + ogDescription: workoutData[currentLocale]?.ogDescription || '', + ogTitle: workoutData[currentLocale]?.ogTitle || '', + ogType: workoutData[currentLocale]?.ogType || '', + ogImageAlt: workoutData[currentLocale]?.ogImageAlt || '', + ogImage: { + data: { + attributes: { + url: workoutData[currentLocale]?.ogImage?.data?.attributes?.url || '', + }, + }, + }, + }; + return ( <> { title: workoutData[currentLocale]?.Seo?.pageTitle || '', seoTitle: workoutData[currentLocale]?.Seo?.seoTitle || '', }} - ogTags={workoutData[currentLocale]?.OGTags || []} + ogTags={OGTags} createdDate={workoutData[currentLocale]?.createdAt || ''} modifiedDate={workoutData[currentLocale]?.updatedAt || ''} /> diff --git a/src/pages/tools/longevity-protocol/results.tsx b/src/pages/tools/longevity-protocol/results.tsx index 9ac4daa..4c44969 100644 --- a/src/pages/tools/longevity-protocol/results.tsx +++ b/src/pages/tools/longevity-protocol/results.tsx @@ -11,6 +11,21 @@ const Results = ({ yearlyResults }) => { const { locale } = router; const currentLocale = locale === 'ru' ? 'ru' : 'en'; + const OGTags = { + ogDescription: yearlyResults[currentLocale]?.ogDescription || '', + ogTitle: yearlyResults[currentLocale]?.ogTitle || '', + ogType: yearlyResults[currentLocale]?.ogType || '', + ogImageAlt: yearlyResults[currentLocale]?.ogImageAlt || '', + ogImage: { + data: { + attributes: { + url: + yearlyResults[currentLocale]?.ogImage?.data?.attributes?.url || '', + }, + }, + }, + }; + return ( <> { title: yearlyResults[currentLocale]?.Seo?.pageTitle, seoTitle: yearlyResults[currentLocale]?.Seo?.seoTitle, }} - ogTags={yearlyResults[currentLocale]?.OGTags} + ogTags={OGTags} createdDate={yearlyResults[currentLocale]?.createdAt} modifiedDate={yearlyResults[currentLocale]?.updatedAt} />