Merge pull request #29 from keepsimpleio/dev

MaryWylde · web-flow · commit b7d13786a1a9 · 2026-02-18T21:28:09.000+04:00
Chore: Longevity Minor Improvements
diff --git a/public/keepsimple_/assets/longevity/study/mobile-charts/data-chart.webp b/public/keepsimple_/assets/longevity/study/mobile-charts/data-chart.webp
diff --git a/public/keepsimple_/assets/longevity/study/mobile-charts/data-mobile.webp b/public/keepsimple_/assets/longevity/study/mobile-charts/data-mobile.webp
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
diff --git a/public/keepsimple_/assets/longevity/study/mobile-charts/research-task.webp b/public/keepsimple_/assets/longevity/study/mobile-charts/research-task.webp
diff --git a/src/components/Navbar/Navbar.tsx b/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 => {
diff --git a/src/components/longevity/LongevitySubSection/LongevitySubSection.module.scss b/src/components/longevity/LongevitySubSection/LongevitySubSection.module.scss
@@ -58,6 +58,10 @@
       }
     }
 
+    .habitTooltip {
+      animation: pulse-shadow-animation 2s infinite;
+    }
+
     .dateTxt {
       cursor: default;
 
@@ -187,3 +191,15 @@
     justify-content: space-between;
   }
 }
+
+@keyframes pulse-shadow-animation {
+  0% {
+    filter: drop-shadow(0px 0px 18px rgba(53, 35, 13, 0.2));
+  }
+  70% {
+    filter: drop-shadow(0px 0px 18px rgba(255, 0, 0, 0.8));
+  }
+  100% {
+    filter: drop-shadow(0px 0px 18px rgba(53, 35, 13, 0.2));
+  }
+}
diff --git a/src/components/longevity/LongevitySubSection/LongevitySubSection.tsx b/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}
diff --git a/src/components/longevity/Navigation/Navigation.module.scss b/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');
     }
   }
diff --git a/src/components/longevity/Navigation/Navigation.tsx b/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}>
diff --git a/src/components/longevity/ShinyStars/ShinyStars.module.scss b/src/components/longevity/ShinyStars/ShinyStars.module.scss
@@ -7,6 +7,7 @@
 
 .starImg {
   display: block;
+  cursor: pointer;
 }
 
 @keyframes fadeInAndOut {
diff --git a/src/components/longevity/StrengthAndTimeCompression/StrengthAndTimeCompression.tsx b/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}
diff --git a/src/components/longevity/StudySection/StudySection.tsx b/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}
         >
diff --git a/src/components/longevity/WhatToEatOrAvoid/WhatToEatOrAvoid.tsx b/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>
diff --git a/src/layouts/LongevityLayouts/WhatIsThisLayout.tsx b/src/layouts/LongevityLayouts/WhatIsThisLayout.tsx
@@ -29,7 +29,7 @@ const WhatIsThisLayout: FC<WhatIsThisLayoutProps> = ({ data, locale }) => {
     },
     {
       label: weightTxt,
-      value: `${data['basic stats weight']} kg`,
+      value: `${data['basic stats weight']}`,
       icon: `${imgPath}weight.svg`,
     },
     {
diff --git a/src/layouts/StudyLayout/StudyLayout.tsx b/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

Original file line number	Diff line number	Diff line change
`@@ -58,6 +58,10 @@`
`58`	`58`	`}`
`59`	`59`	`}`
`60`	`60`
	`61`	`+ .habitTooltip {`
	`62`	`+ animation: pulse-shadow-animation 2s infinite;`
	`63`	`+ }`
	`64`	`+`
`61`	`65`	`.dateTxt {`
`62`	`66`	`cursor: default;`
`63`	`67`
`@@ -187,3 +191,15 @@`
`187`	`191`	`justify-content: space-between;`
`188`	`192`	`}`
`189`	`193`	`}`
	`194`	`+`
	`195`	`+@keyframes pulse-shadow-animation {`
	`196`	`+ 0% {`
	`197`	`+ filter: drop-shadow(0px 0px 18px rgba(53, 35, 13, 0.2));`
	`198`	`+ }`
	`199`	`+ 70% {`
	`200`	`+ filter: drop-shadow(0px 0px 18px rgba(255, 0, 0, 0.8));`
	`201`	`+ }`
	`202`	`+ 100% {`
	`203`	`+ filter: drop-shadow(0px 0px 18px rgba(53, 35, 13, 0.2));`
	`204`	`+ }`
	`205`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -71,6 +71,7 @@ const LongevitySubSection: FC<LongevitySubSectionProps> = ({`
`71`	`71`	`id={title}`
`72`	`72`	`place={'bottom'}`
`73`	`73`	`className={cn(styles.tooltip, {})}`
	`74`	`+ clickable`
`74`	`75`	`>`
`75`	`76`	`<WhyDoThisTooltip`
`76`	`77`	`whatDamagesText={whatDamages}`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`
`8`	`8`	`.starImg {`
`9`	`9`	`display: block;`
	`10`	`+ cursor: pointer;`
`10`	`11`	`}`
`11`	`12`
`12`	`13`	`@keyframes fadeInAndOut {`