diff --git a/public/keepsimple_/assets/longevity/og.png b/public/keepsimple_/assets/longevity/og.png new file mode 100644 index 0000000..1df153a Binary files /dev/null and b/public/keepsimple_/assets/longevity/og.png differ diff --git a/public/keepsimple_/assets/longevity/study/mobile-charts/data-chart.webp b/public/keepsimple_/assets/longevity/study/mobile-charts/data-chart.webp deleted file mode 100644 index cecefdc..0000000 Binary files a/public/keepsimple_/assets/longevity/study/mobile-charts/data-chart.webp and /dev/null differ diff --git a/public/keepsimple_/assets/longevity/study/mobile-charts/data-mobile.webp b/public/keepsimple_/assets/longevity/study/mobile-charts/data-mobile.webp new file mode 100644 index 0000000..eb978d7 Binary files /dev/null and b/public/keepsimple_/assets/longevity/study/mobile-charts/data-mobile.webp differ diff --git a/public/keepsimple_/assets/longevity/study/mobile-charts/research-task-mobile.webp b/public/keepsimple_/assets/longevity/study/mobile-charts/research-task-mobile.webp new file mode 100644 index 0000000..473a575 Binary files /dev/null and b/public/keepsimple_/assets/longevity/study/mobile-charts/research-task-mobile.webp differ diff --git a/public/keepsimple_/assets/longevity/study/mobile-charts/research-task.webp b/public/keepsimple_/assets/longevity/study/mobile-charts/research-task.webp deleted file mode 100644 index cecefdc..0000000 Binary files a/public/keepsimple_/assets/longevity/study/mobile-charts/research-task.webp and /dev/null differ diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index 2f94b4e..3b43720 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -59,6 +59,7 @@ const Navbar: FC = ({ handleToggleSidebar, handleClick }) => { logo: isDarkTheme ? : , target: '', id: 'tools', + activeMatch: '/tools/longevity-protocol', }, { name: articles, @@ -81,31 +82,38 @@ const Navbar: FC = ({ handleToggleSidebar, handleClick }) => { [styles.authorized]: !!accountData, })} > - {routes.map(({ name, path, target, logo, id }, index) => ( - { - if (target === '_blank') return; - e.preventDefault(); - if (isSmallScreen) handleToggleSidebar(); - handleClick(e, path); - }} - className={cn(styles.url, { - [styles.active]: - path === '/' - ? router.asPath === '/' - : router.asPath.startsWith(path), - [styles.uxcoreIcon]: id === 'uxcore', - [styles.companyManagementIcon]: id === 'companyManagement', - [styles.articlesIcon]: id === 'articles', - [styles.ruUrl]: locale === 'ru', - })} - > - {logo} {name} - - ))} + {routes.map(({ name, path, target, logo, id, activeMatch }, index) => { + const match = activeMatch ?? path; + + const isActive = + match === '/' + ? router.asPath === '/' + : router.asPath.startsWith(match); + + return ( + { + if (target === '_blank') return; + e.preventDefault(); + if (isSmallScreen) handleToggleSidebar(); + handleClick(e, path); + }} + className={cn(styles.url, { + [styles.active]: isActive, + [styles.uxcoreIcon]: id === 'uxcore', + [styles.companyManagementIcon]: id === 'companyManagement', + [styles.articlesIcon]: id === 'articles', + [styles.ruUrl]: locale === 'ru', + })} + > + {logo} {name} + + ); + })} + { diff --git a/src/components/SeoGenerator/SeoGenerator.tsx b/src/components/SeoGenerator/SeoGenerator.tsx index 23b9670..3380139 100644 --- a/src/components/SeoGenerator/SeoGenerator.tsx +++ b/src/components/SeoGenerator/SeoGenerator.tsx @@ -13,6 +13,7 @@ interface SeoGeneratorProps { localizedSlug?: any; modifiedDate?: string; createdDate?: string; + isLongevityPage?: boolean; ogTags?: { ogDescription: string; ogTitle: string; @@ -38,6 +39,7 @@ const SeoGenerator: FC = ({ createdDate, modifiedDate, localizedSlug, + isLongevityPage, }) => { const router = useRouter(); @@ -224,7 +226,9 @@ const SeoGenerator: FC = ({ property="og:image" content={ ogTags?.ogImage?.data?.attributes?.url - ? `${process.env.NEXT_PUBLIC_STRAPI}${ogTags?.ogImage?.data?.attributes?.url}` + ? isLongevityPage + ? ogTags?.ogImage?.data?.attributes?.url + : `${process.env.NEXT_PUBLIC_STRAPI}${ogTags?.ogImage?.data?.attributes?.url}` : ogTags?.ogImage?.data?.attributes?.staticUrl } /> @@ -254,7 +258,9 @@ const SeoGenerator: FC = ({ name="twitter:image" content={ ogTags?.ogImage?.data?.attributes?.url - ? `${process.env.NEXT_PUBLIC_STRAPI}${ogTags?.ogImage?.data?.attributes?.url}` + ? isLongevityPage + ? ogTags?.ogImage?.data?.attributes?.url + : `${process.env.NEXT_PUBLIC_STRAPI}${ogTags?.ogImage?.data?.attributes?.url}` : ogTags?.ogImage?.data?.attributes?.staticUrl } /> diff --git a/src/components/longevity/LongevitySubSection/LongevitySubSection.tsx b/src/components/longevity/LongevitySubSection/LongevitySubSection.tsx index 914c253..e1a0a45 100644 --- a/src/components/longevity/LongevitySubSection/LongevitySubSection.tsx +++ b/src/components/longevity/LongevitySubSection/LongevitySubSection.tsx @@ -71,6 +71,7 @@ const LongevitySubSection: FC = ({ id={title} place={'bottom'} className={cn(styles.tooltip, {})} + clickable > { width={1140} height={83} className={cn(styles.curtains, { - [styles.curtainsOpen]: router.pathname.includes('habits'), + [styles.curtainsOpen]: !router.asPath.includes('about-project'), })} />
    diff --git a/src/components/longevity/StrengthAndTimeCompression/StrengthAndTimeCompression.tsx b/src/components/longevity/StrengthAndTimeCompression/StrengthAndTimeCompression.tsx index 2ec9b2c..bd894af 100644 --- a/src/components/longevity/StrengthAndTimeCompression/StrengthAndTimeCompression.tsx +++ b/src/components/longevity/StrengthAndTimeCompression/StrengthAndTimeCompression.tsx @@ -29,7 +29,7 @@ const StrengthAndTimeCompression: FC = () => { />
    = ({ ? '/keepsimple_/assets/longevity/study/hacks.png' : '/keepsimple_/assets/longevity/study-headline-bg.png'; + const mobalBackgroundImage = isHacks + ? '/keepsimple_/assets/longevity/study/hacks-bg.png' + : '/keepsimple_/assets/longevity/study/flipped-card-bg.png'; return ( <>
    @@ -119,16 +122,31 @@ const StudySection: FC = ({ {flippedCardChart && (
    - {'Page { - setSwitchPage(!switchPage); - }} - /> + {!switchPage ? ( + {'Page { + setSwitchPage(!switchPage); + }} + /> + ) : ( + {'Page { + setSwitchPage(!switchPage); + }} + /> + )}
    )}
    @@ -136,11 +154,7 @@ const StudySection: FC = ({ setOpenModal(false)} - backgroundImageUrl={ - backsBackgroundImageUrl - ? backsBackgroundImageUrl - : '/keepsimple_/assets/longevity/study/flipped-card-bg.png' - } + backgroundImageUrl={mobalBackgroundImage} bodyClassName={isHacks ? styles.hacksModalBody : styles.modalBody} className={styles.modal} > diff --git a/src/components/longevity/WhatToEatOrAvoid/WhatToEatOrAvoid.tsx b/src/components/longevity/WhatToEatOrAvoid/WhatToEatOrAvoid.tsx index 79f25aa..7a435ad 100644 --- a/src/components/longevity/WhatToEatOrAvoid/WhatToEatOrAvoid.tsx +++ b/src/components/longevity/WhatToEatOrAvoid/WhatToEatOrAvoid.tsx @@ -129,22 +129,25 @@ const WhatToEatOrAvoid: FC = ({ {tooltipContent && (
    - {!isMobile && } - {title} isMobile && setOpenMobileModal(true)} - /> +
    + {!isMobile && } + {title} isMobile && setOpenMobileModal(true)} + /> +
    + {!isMobile && ( diff --git a/src/constants/longevity.ts b/src/constants/longevity.ts index c901201..dbbe0eb 100644 --- a/src/constants/longevity.ts +++ b/src/constants/longevity.ts @@ -2,7 +2,8 @@ export const longevityDietPath = '/keepsimple_/assets/longevity/diet'; const heartsPath = '/keepsimple_/assets/longevity/diet/hearts/'; const scaleImgPath = '/keepsimple_/assets/longevity/diet/diet-results-icons/'; const backgroundImgPath = '/keepsimple_/assets/longevity/diet/diet-results-bg/'; - +const domain = process.env.NEXT_PUBLIC_DOMAIN; +export const ogImage = `${domain}/keepsimple_/assets/longevity/og.png`; export const images = [ `${heartsPath}sugar.svg`, `${heartsPath}seed-oil.svg`, @@ -144,7 +145,7 @@ export const ACTIVITY_LEVEL_SUMMARY = [ minutes: 300, riskOfDyingEarly: '65% of early-death risk', cognitiveDecline: '~25–35% lower', - brainAgingActive: 'Optimized (use brain-age model)', + brainAgingActive: 'Optimized', brainAgingSedentary: 'Worst-case brain-age path', }, ]; diff --git a/src/layouts/StudyLayout/StudyLayout.tsx b/src/layouts/StudyLayout/StudyLayout.tsx index e13e6dc..8df8114 100644 --- a/src/layouts/StudyLayout/StudyLayout.tsx +++ b/src/layouts/StudyLayout/StudyLayout.tsx @@ -68,7 +68,7 @@ const StudyLayout: FC = ({ data, locale }) => { flippedCardChart={`${process.env.NEXT_PUBLIC_STRAPI}${data?.['research tasks flipped card image']?.data?.attributes?.url}`} chartWidth={590} flippedCardChartMobile={ - '/keepsimple_/assets/longevity/study/mobile-charts/research-task.webp' + '/keepsimple_/assets/longevity/study/mobile-charts/research-task-mobile.webp' } /> = ({ data, locale }) => { flippedCardChart={`${process.env.NEXT_PUBLIC_STRAPI}${data?.['data flipped card image']?.data?.attributes?.url}`} chartWidth={390} flippedCardChartMobile={ - '/keepsimple_/assets/longevity/study/mobile-charts/data-chart.webp' + '/keepsimple_/assets/longevity/study/mobile-charts/data-mobile.webp' } /> { const OGTags = { @@ -14,7 +15,7 @@ const AboutProject = ({ aboutTheProject }) => { ogImage: { data: { attributes: { - url: aboutTheProject['en']?.ogImage?.data?.attributes?.url || '', + url: ogImage, }, }, }, @@ -29,6 +30,7 @@ const AboutProject = ({ aboutTheProject }) => { title: aboutTheProject['en']?.Seo?.pageTitle || '', seoTitle: aboutTheProject['en']?.Seo?.seoTitle || '', }} + isLongevityPage ogTags={OGTags} createdDate={aboutTheProject['en']?.createdAt || ''} modifiedDate={aboutTheProject['en']?.updatedAt || ''} diff --git a/src/pages/tools/longevity-protocol/environment.tsx b/src/pages/tools/longevity-protocol/environment.tsx index 0cbe3f9..47accf1 100644 --- a/src/pages/tools/longevity-protocol/environment.tsx +++ b/src/pages/tools/longevity-protocol/environment.tsx @@ -5,6 +5,7 @@ import EnvironmentLayout from '@layouts/EnvironmentLayout/EnvironmentLayout'; import { getEnvironment } from '@api/longevity/environment'; import SeoGenerator from '@components/SeoGenerator'; +import { ogImage } from '@constants/longevity'; const Environment = ({ environment }) => { const router = useRouter(); @@ -18,7 +19,7 @@ const Environment = ({ environment }) => { ogImage: { data: { attributes: { - url: environment['en']?.ogImage?.data?.attributes?.url || '', + url: ogImage, }, }, }, @@ -33,6 +34,7 @@ const Environment = ({ environment }) => { title: environment['en']?.Seo?.pageTitle || '', seoTitle: environment['en']?.Seo?.seoTitle || '', }} + isLongevityPage ogTags={OGTags} createdDate={environment['en']?.createdAt || ''} modifiedDate={environment['en']?.updatedAt || ''} diff --git a/src/pages/tools/longevity-protocol/habits/diet.tsx b/src/pages/tools/longevity-protocol/habits/diet.tsx index 3ba3f9a..0bdd191 100644 --- a/src/pages/tools/longevity-protocol/habits/diet.tsx +++ b/src/pages/tools/longevity-protocol/habits/diet.tsx @@ -4,6 +4,7 @@ import DietLayout from '@layouts/DietLayout'; import { getDiet } from '@api/longevity/diet'; import SeoGenerator from '@components/SeoGenerator'; +import { ogImage } from '@constants/longevity'; const Diet = ({ dietData }) => { const OGTags = { @@ -14,7 +15,7 @@ const Diet = ({ dietData }) => { ogImage: { data: { attributes: { - url: dietData['en']?.ogImage?.data?.attributes?.url || '', + url: ogImage, }, }, }, @@ -29,6 +30,7 @@ const Diet = ({ dietData }) => { title: dietData['en']?.Seo?.seoTitle || '', seoTitle: dietData['en']?.Seo?.seoTitle || '', }} + isLongevityPage ogTags={OGTags} createdDate={dietData['en']?.createdAt || ''} modifiedDate={dietData['en']?.updatedAt || ''} diff --git a/src/pages/tools/longevity-protocol/habits/lifestyle.tsx b/src/pages/tools/longevity-protocol/habits/lifestyle.tsx index 7733385..9c63260 100644 --- a/src/pages/tools/longevity-protocol/habits/lifestyle.tsx +++ b/src/pages/tools/longevity-protocol/habits/lifestyle.tsx @@ -4,6 +4,7 @@ import HabitsLayout from '@layouts/HabitsLayout/HabitsLayout'; import { getHabitsProtocol } from '@api/longevity/habits-protocol'; import SeoGenerator from '@components/SeoGenerator'; +import { ogImage } from '@constants/longevity'; const Lifestyle = ({ habitsData }) => { const OGTags = { @@ -14,7 +15,7 @@ const Lifestyle = ({ habitsData }) => { ogImage: { data: { attributes: { - url: habitsData['en']?.ogImage?.data?.attributes?.url || '', + url: ogImage, }, }, }, @@ -29,6 +30,7 @@ const Lifestyle = ({ habitsData }) => { title: habitsData['en']?.Seo?.pageTitle || '', seoTitle: habitsData['en']?.Seo?.seoTitle || '', }} + isLongevityPage ogTags={OGTags} createdDate={habitsData['en']?.createdAt || ''} modifiedDate={habitsData['en']?.updatedAt || ''} diff --git a/src/pages/tools/longevity-protocol/habits/sleep.tsx b/src/pages/tools/longevity-protocol/habits/sleep.tsx index b281428..678921f 100644 --- a/src/pages/tools/longevity-protocol/habits/sleep.tsx +++ b/src/pages/tools/longevity-protocol/habits/sleep.tsx @@ -5,6 +5,7 @@ import { getSleepSupplements } from '@api/longevity/sleep-supplements'; import SleepLayout from '@layouts/SleepLayout/SleepLayout'; import SeoGenerator from '@components/SeoGenerator'; +import { ogImage } from '@constants/longevity'; const Sleep = ({ sleepData, sleepSupplements }) => { const OGTags = { @@ -15,7 +16,7 @@ const Sleep = ({ sleepData, sleepSupplements }) => { ogImage: { data: { attributes: { - url: sleepData['en']?.ogImage?.data?.attributes?.url || '', + url: ogImage, }, }, }, @@ -30,6 +31,7 @@ const Sleep = ({ sleepData, sleepSupplements }) => { title: sleepData['en']?.Seo?.pageTitle || '', seoTitle: sleepData['en']?.Seo?.seoTitle || '', }} + isLongevityPage ogTags={OGTags} createdDate={sleepData['en']?.createdAt || ''} modifiedDate={sleepData['en']?.updatedAt || ''} diff --git a/src/pages/tools/longevity-protocol/habits/study.tsx b/src/pages/tools/longevity-protocol/habits/study.tsx index 4dab0bb..c47eb8c 100644 --- a/src/pages/tools/longevity-protocol/habits/study.tsx +++ b/src/pages/tools/longevity-protocol/habits/study.tsx @@ -4,6 +4,7 @@ import StudyLayout from '@layouts/StudyLayout'; import { getStudy } from '@api/longevity/study'; import SeoGenerator from '@components/SeoGenerator'; +import { ogImage } from '@constants/longevity'; const Study = ({ studyData }) => { const OGTags = { @@ -14,7 +15,7 @@ const Study = ({ studyData }) => { ogImage: { data: { attributes: { - url: studyData['en']?.ogImage?.data?.attributes?.url || '', + url: ogImage, }, }, }, @@ -29,6 +30,7 @@ const Study = ({ studyData }) => { title: studyData['en']?.Seo?.pageTitle || '', seoTitle: studyData['en']?.Seo?.seoTitle || '', }} + isLongevityPage ogTags={OGTags} createdDate={studyData['en']?.createdAt || ''} modifiedDate={studyData['en']?.updatedAt || ''} diff --git a/src/pages/tools/longevity-protocol/habits/supplements.tsx b/src/pages/tools/longevity-protocol/habits/supplements.tsx index 88aac4b..0b5f806 100644 --- a/src/pages/tools/longevity-protocol/habits/supplements.tsx +++ b/src/pages/tools/longevity-protocol/habits/supplements.tsx @@ -4,6 +4,7 @@ import SupplementsLayout from '@layouts/Supplements'; import { getSupplements } from '@api/longevity/supplements'; import SeoGenerator from '@components/SeoGenerator'; +import { ogImage } from '@constants/longevity'; const Supplements = ({ supplements }) => { const OGTags = { @@ -14,7 +15,7 @@ const Supplements = ({ supplements }) => { ogImage: { data: { attributes: { - url: supplements['en']?.ogImage?.data?.attributes?.url || '', + url: ogImage, }, }, }, @@ -29,6 +30,7 @@ const Supplements = ({ supplements }) => { title: supplements['en']?.Seo?.pageTitle || '', seoTitle: supplements['en']?.Seo?.seoTitle || '', }} + isLongevityPage ogTags={OGTags} createdDate={supplements['en']?.createdAt || ''} modifiedDate={supplements['en']?.updatedAt || ''} diff --git a/src/pages/tools/longevity-protocol/habits/workout.tsx b/src/pages/tools/longevity-protocol/habits/workout.tsx index a80bdd5..6113820 100644 --- a/src/pages/tools/longevity-protocol/habits/workout.tsx +++ b/src/pages/tools/longevity-protocol/habits/workout.tsx @@ -4,6 +4,7 @@ import WorkoutLayout from '@layouts/WorkoutLayout/WorkoutLayout'; import { getWorkout } from '@api/longevity/workout'; import SeoGenerator from '@components/SeoGenerator'; +import { ogImage } from '@constants/longevity'; const Workout = ({ workoutData }) => { const OGTags = { @@ -14,7 +15,7 @@ const Workout = ({ workoutData }) => { ogImage: { data: { attributes: { - url: workoutData['en']?.ogImage?.data?.attributes?.url || '', + url: ogImage, }, }, }, @@ -29,6 +30,7 @@ const Workout = ({ workoutData }) => { title: workoutData['en']?.Seo?.pageTitle || '', seoTitle: workoutData['en']?.Seo?.seoTitle || '', }} + isLongevityPage ogTags={OGTags} createdDate={workoutData['en']?.createdAt || ''} modifiedDate={workoutData['en']?.updatedAt || ''} diff --git a/src/pages/tools/longevity-protocol/results.tsx b/src/pages/tools/longevity-protocol/results.tsx index d63b720..153e7be 100644 --- a/src/pages/tools/longevity-protocol/results.tsx +++ b/src/pages/tools/longevity-protocol/results.tsx @@ -4,6 +4,7 @@ import ResultsLayout from '@layouts/ResultsLayout'; import { getLongevityResults } from '@api/longevity/results'; import SeoGenerator from '@components/SeoGenerator'; +import { ogImage } from '@constants/longevity'; const Results = ({ yearlyResults }) => { const OGTags = { @@ -14,7 +15,7 @@ const Results = ({ yearlyResults }) => { ogImage: { data: { attributes: { - url: yearlyResults['en']?.ogImage?.data?.attributes?.url || '', + url: ogImage, }, }, }, @@ -29,6 +30,7 @@ const Results = ({ yearlyResults }) => { title: yearlyResults['en']?.Seo?.pageTitle, seoTitle: yearlyResults['en']?.Seo?.seoTitle, }} + isLongevityPage ogTags={OGTags} createdDate={yearlyResults['en']?.createdAt} modifiedDate={yearlyResults['en']?.updatedAt}