Chore/longevity minor improvements

src/components/Navbar/Navbar.tsx

@@ -59,6 +59,7 @@ const Navbar: FC<NavbarProps> = ({ handleToggleSidebar, handleClick }) => {
       logo: isDarkTheme ? <ToolsIcon /> : <ToolsDarkIcon />,
       target: '',
       id: 'tools',
+      activeMatch: '/tools/longevity-protocol',
     },
     {
       name: articles,
@@ -81,31 +82,38 @@ const Navbar: FC<NavbarProps> = ({ handleToggleSidebar, handleClick }) => {
           [styles.authorized]: !!accountData,
         })}
       >
-        {routes.map(({ name, path, target, logo, id }, index) => (
-          <a
-            key={index}
-            href={path}
-            target={target}
-            onClick={e => {
-              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}
-          </a>
-        ))}
+        {routes.map(({ name, path, target, logo, id, activeMatch }, index) => {
+          const match = activeMatch ?? path;
+
+          const isActive =
+            match === '/'
+              ? router.asPath === '/'
+              : router.asPath.startsWith(match);
+
+          return (
+            <a
+              key={index}
+              href={path}
+              target={target}
+              onClick={e => {
+                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}
+            </a>
+          );
+        })}
+
         <a
           href={'/contributors'}
           onClick={e => {

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<SeoGeneratorProps> = ({
   createdDate,
   modifiedDate,
   localizedSlug,
+  isLongevityPage,
 }) => {
   const router = useRouter();
 
@@ -224,7 +226,9 @@ const SeoGenerator: FC<SeoGeneratorProps> = ({
         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<SeoGeneratorProps> = ({
         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
         }
       />

src/components/longevity/LongevitySubSection/LongevitySubSection.tsx

@@ -71,6 +71,7 @@ const LongevitySubSection: FC<LongevitySubSectionProps> = ({
               id={title}
               place={'bottom'}
               className={cn(styles.tooltip, {})}
+              clickable
             >
               <WhyDoThisTooltip
                 whatDamagesText={whatDamages}

src/components/longevity/Navigation/Navigation.module.scss

@@ -11,7 +11,7 @@
   .subItem {
     background-image: url('/keepsimple_/assets/longevity/nav-bg.svg');
     background-repeat: no-repeat;
-    background-size: contain;
+    background-size: cover;
     width: 222px;
     height: 49px;
     text-align: center;
@@ -50,7 +50,7 @@
     text-decoration: none;
     cursor: pointer;
     background-image: url('/keepsimple_/assets/longevity/nav-hover-bg.png');
-
+    background-size: cover;
     .subLink,
     .link {
       color: #fff;
@@ -64,6 +64,7 @@
 
     &:hover {
       cursor: pointer;
+
       background-image: url('/keepsimple_/assets/longevity/nav-hover-bg.png');
     }
   }

src/components/longevity/Navigation/Navigation.tsx

@@ -104,7 +104,7 @@ const Navigation: FC = () => {
           width={1140}
           height={83}
           className={cn(styles.curtains, {
-            [styles.curtainsOpen]: router.pathname.includes('habits'),
+            [styles.curtainsOpen]: !router.asPath.includes('about-project'),
           })}
         />
         <ul className={styles.subUl}>

src/components/longevity/StrengthAndTimeCompression/StrengthAndTimeCompression.tsx

@@ -29,7 +29,7 @@ const StrengthAndTimeCompression: FC = () => {
       />
       <hr className={styles.divider} />
       <Heading
-        text={'Strength and Time Compression'}
+        text={'Your strength level'}
         Tag="h4"
         isBold
         showLeftIcon={false}

src/components/longevity/StudySection/StudySection.tsx

@@ -42,6 +42,9 @@ const StudySection: FC<StudySectionProps> = ({
     ? '/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 (
     <>
       <section className={styles.studySection}>
@@ -119,28 +122,39 @@ const StudySection: FC<StudySectionProps> = ({
         </div>
         {flippedCardChart && (
           <div className={styles.pageSwitcherWrapper}>
-            <Image
-              src={'/keepsimple_/assets/longevity/study/page-switcher.svg'}
-              alt={'Page switcher'}
-              width={60}
-              height={60}
-              className={styles.pageSwitcher}
-              onClick={() => {
-                setSwitchPage(!switchPage);
-              }}
-            />
+            {!switchPage ? (
+              <Image
+                src={'/keepsimple_/assets/longevity/study/page-switcher.svg'}
+                alt={'Page switcher'}
+                width={60}
+                height={60}
+                className={styles.pageSwitcher}
+                onClick={() => {
+                  setSwitchPage(!switchPage);
+                }}
+              />
+            ) : (
+              <Image
+                src={
+                  '/keepsimple_/assets/longevity/study/page-switcher-back.svg'
+                }
+                alt={'Page switcher'}
+                width={60}
+                height={60}
+                className={styles.pageSwitcher}
+                onClick={() => {
+                  setSwitchPage(!switchPage);
+                }}
+              />
+            )}
           </div>
         )}
       </section>
       {isMobile && openModal && (
         <Modal
           size={'full'}
           onClick={() => setOpenModal(false)}
-          backgroundImageUrl={
-            backsBackgroundImageUrl
-              ? backsBackgroundImageUrl
-              : '/keepsimple_/assets/longevity/study/flipped-card-bg.png'
-          }
+          backgroundImageUrl={mobalBackgroundImage}
           bodyClassName={isHacks ? styles.hacksModalBody : styles.modalBody}
           className={styles.modal}
         >

src/components/longevity/WhatToEatOrAvoid/WhatToEatOrAvoid.tsx

@@ -129,22 +129,25 @@ const WhatToEatOrAvoid: FC<WhatToEatOrAvoidProps> = ({
 
       {tooltipContent && (
         <div className={styles.heartWrapper}>
-          {!isMobile && <ShinyStars />}
-          <Image
-            src={imageUrl}
-            alt={title}
-            data-tooltip-id={title}
-            width={59}
-            height={59}
-            className={styles.heart}
-            onClick={() => isMobile && setOpenMobileModal(true)}
-          />
+          <div data-tooltip-id={title}>
+            {!isMobile && <ShinyStars />}
+            <Image
+              src={imageUrl}
+              alt={title}
+              width={59}
+              height={59}
+              className={styles.heart}
+              onClick={() => isMobile && setOpenMobileModal(true)}
+            />
+          </div>
+
           {!isMobile && (
             <ReactTooltip
               id={title}
               place={'top'}
               className={styles.tooltip}
               opacity={1}
+              clickable
             >
               <AboutTheProduct content={tooltipContent} title={title} />
             </ReactTooltip>

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',
   },
 ];

src/layouts/StudyLayout/StudyLayout.tsx

@@ -68,7 +68,7 @@ const StudyLayout: FC<StudyLayoutProps> = ({ 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'
         }
       />
       <StudySection
@@ -81,7 +81,7 @@ const StudyLayout: FC<StudyLayoutProps> = ({ 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'
         }
       />
       <StudySection

src/pages/tools/longevity-protocol/about-project.tsx

@@ -4,6 +4,7 @@ import { getWhatIsThis } from '@api/longevity/what-is-this';
 import SeoGenerator from '@components/SeoGenerator';
 
 import WhatIsThisLayout from '@layouts/LongevityLayouts';
+import { ogImage } from '@constants/longevity';
 
 const AboutProject = ({ aboutTheProject }) => {
   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 || ''}

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 || ''}

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 || ''}

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 || ''}