keepsimpleio · MaryWylde · Feb 12, 2026 · Feb 12, 2026
diff --git 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 = () => {
                 </Link>
               )}
             </div>
-            <UserProfile
-              showDropdown
-              setAccountData={setAccountData}
-              isLoggedIn={!!accountData}
-              username={accountData?.username}
-              setOpenLoginModal={setOpenLogin}
-            />
+            {/*<UserProfile*/}
+            {/*  showDropdown*/}
+            {/*  setAccountData={setAccountData}*/}
+            {/*  isLoggedIn={!!accountData}*/}
+            {/*  username={accountData?.username}*/}
+            {/*  setOpenLoginModal={setOpenLogin}*/}
+            {/*/>*/}
           </div>
         </div>
         <div className={styles.closeButton} onClick={handleToggleSidebar} />
       </header>
-      {openLogin && <LogIn setShowLogIn={setOpenLogin} />}
+      {/*{openLogin && <LogIn setShowLogIn={setOpenLogin} />}*/}
     </Fragment>
   );
 };

diff --git 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
@@ -25,6 +25,7 @@ type ModalProps = {
   isLongevityProtocolModal?: boolean;
   grayTitle?: boolean;
   dataCy?: string;
+  backgroundImageUrl?: string;
 };
 
 const Modal: FC<ModalProps> = ({
@@ -47,6 +48,7 @@ const Modal: FC<ModalProps> = ({
   grayTitle,
   dataCy,
   isLongevityProtocolModal,
+  backgroundImageUrl,
 }) => {
   const handleClose = () => {
     onClick();
@@ -92,7 +94,7 @@ const Modal: FC<ModalProps> = ({
       data-cy={dataCy}
     >
       <div
-        className={styles.background}
+        className={cn(styles.background, {})}
         onClick={!disableBackgroundClick ? handleClose : () => {}}
         data-cy={'modal-background-click'}
       />
@@ -104,7 +106,13 @@ const Modal: FC<ModalProps> = ({
           [wrapperClassName]: wrapperClassName,
           [styles.fullSizeMobile]: fullSizeMobile,
           [styles.isLongevityProtocolModal]: isLongevityProtocolModal,
+          [styles.withBackgroundImage]: backgroundImageUrl,
         })}
+        style={{
+          backgroundImage: backgroundImageUrl
+            ? `url(${backgroundImageUrl})`
+            : 'none',
+        }}
       >
         {!removeHeader && (
           <div
@@ -125,7 +133,7 @@ const Modal: FC<ModalProps> = ({
             <div className={styles.closeIconWrapper} onClick={onClick}>
               <div className={`${styles.lineWrapper} ${styles.rightWrapper}`}>
                 <Image
-                  src="/assets/close-right-line.svg"
+                  src="/keepsimple_/assets/close-right-line.svg"
                   alt="close right line"
                   width={24}
                   height={24}
@@ -146,7 +154,7 @@ const Modal: FC<ModalProps> = ({
         )}
         {withoutHeader && (
           <img
-            src="/assets/biases/close-icon-white.svg"
+            src="/keepsimple_/assets/biases/close-icon-white.svg"
             alt="modal close button"
             className={styles.closeBtnWithoutHeader}
             onClick={handleClose}

diff --git a/src/components/longevity/FlipCard/FlipCard.module.scss b/src/components/longevity/FlipCard/FlipCard.module.scss
@@ -1,10 +1,10 @@
 .flipCard {
   background-image: url('/keepsimple_/assets/longevity/study/flipped-card-bg.png');
-  background-size: contain;
+  background-size: cover;
   background-repeat: no-repeat;
   max-width: 948px;
   padding: 28px 103px;
-  height: 780px;
+  height: 550px;
   text-align: center;
   display: flex;
   justify-content: center;
@@ -41,10 +41,15 @@
       font-size: 20px;
       font-weight: 600;
     }
+
+    .chart {
+      max-width: 100%;
+      height: auto;
+    }
   }
 
   .diamond {
-    width: 14px;
+    width: 13px;
     height: 10px;
     background-color: #df382e;
     transform: rotate(45deg);
@@ -112,6 +117,10 @@
     height: auto;
     padding: 0;
 
+    .diamond {
+      width: 19px;
+    }
+
     .headline {
       justify-content: center;
 

diff --git a/src/components/longevity/FlipCard/FlipCard.tsx b/src/components/longevity/FlipCard/FlipCard.tsx
@@ -57,6 +57,7 @@ const FlipCard: FC<FlipCardProps> = ({
                 width={512}
                 height={455}
                 className={styles.chart}
+                unoptimized
               />
             ) : null}
           </div>

diff --git a/src/components/longevity/MobileNavigation/MobileNavigation.tsx b/src/components/longevity/MobileNavigation/MobileNavigation.tsx
@@ -82,13 +82,16 @@ const MobileNavigation: FC = () => {
       icon: <SupplementsIcon />,
     },
   ];
-  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
@@ -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
@@ -22,6 +22,7 @@ const StudySection: FC<StudySectionProps> = ({
   flippedCardChart,
   flippedCardPainText,
   hacksQuote,
+  backsBackgroundImageUrl,
   quoteAuthor,
 }) => {
   const [switchPage, setSwitchPage] = useState<boolean>(false);
@@ -40,6 +41,7 @@ const StudySection: FC<StudySectionProps> = ({
             alt={title}
             width={948}
             height={67}
+            unoptimized
             className={styles.backgroundImg}
           />
           <Heading
@@ -69,6 +71,7 @@ const StudySection: FC<StudySectionProps> = ({
                   alt={'Learn more icon'}
                   width={16}
                   height={16}
+                  unoptimized
                 />
                 Learn More
               </button>
@@ -97,7 +100,16 @@ const StudySection: FC<StudySectionProps> = ({
         )}
       </section>
       {isMobile && openModal && (
-        <Modal size={'full'} onClick={() => setOpenModal(false)}>
+        <Modal
+          size={'full'}
+          onClick={() => setOpenModal(false)}
+          backgroundImageUrl={
+            backsBackgroundImageUrl
+              ? backsBackgroundImageUrl
+              : '/keepsimple_/assets/longevity/study/flipped-card-bg.png'
+          }
+          bodyClassName={isHacks ? styles.hacksModalBody : styles.modalBody}
+        >
           <FlipCard
             headline={flippedCardHeadline}
             subText={flippedCardSubText}

diff --git a/src/components/longevity/StudySection/StudySection.types.ts b/src/components/longevity/StudySection/StudySection.types.ts
@@ -9,4 +9,5 @@ export type StudySectionProps = {
   flippedCardChart?: string;
   hacksQuote?: string;
   quoteAuthor?: string;
+  backsBackgroundImageUrl?: string;
 };
diff --git a/src/components/longevity/WeeklyWorkout/WeeklyWorkout.module.scss b/src/components/longevity/WeeklyWorkout/WeeklyWorkout.module.scss
@@ -44,6 +44,7 @@
   .wrapper {
     display: flex;
     gap: 20px;
+    margin-top: 32px;
   }
 
   .imageWrapper {
@@ -60,6 +61,8 @@
     opacity: 100%;
     transform: translateX(0);
     z-index: 99;
+    position: relative;
+    top: -14px;
 
     img {
       width: 180px;
@@ -92,12 +95,28 @@
     }
 
     .wrapper {
+      margin-top: 20px;
       gap: 0;
+      --overlap: 42px;
+      display: flex;
+      align-items: center;
 
       .imageWrapper {
         width: 100%;
         height: auto;
         position: relative;
+        margin-left: calc(var(--overlap) * -1);
+        border: 0;
+        padding: 0;
+        background: transparent;
+        cursor: pointer;
+        top: 0;
+        transition:
+          transform 180ms ease,
+          box-shadow 180ms ease,
+          z-index 0ms;
+        transform: translateY(0) scale(1);
+        z-index: 1;
 
         img {
           width: 100%;
@@ -106,25 +125,34 @@
         }
       }
 
-      .imageWrapper:first-child {
-        transform: translateX(40px);
+      .imageWrapper:nth-child(4) {
+        z-index: 2;
+      }
+
+      .imageWrapper:nth-child(3) {
+        z-index: 3;
       }
 
       .imageWrapper:nth-child(2) {
-        transform: translateX(-20px);
+        z-index: 4;
       }
 
-      .imageWrapper:nth-child(3) {
-        transform: translateX(-40px);
+      .imageWrapper:nth-child(1) {
+        z-index: 5;
       }
 
-      .imageWrapper:nth-child(3) {
-        transform: translateX(-60px);
+      .imageWrapper:first-child {
+        margin-left: 0;
       }
 
       .activeImageWrapper {
-        transform: translateX(0);
-        z-index: 99;
+        transform: translateY(-10px) scale(1.05);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        z-index: 99 !important;
+
+        img {
+          position: relative;
+        }
       }
     }
 

diff --git a/src/data/longevity/en.ts b/src/data/longevity/en.ts
@@ -1,6 +1,6 @@
 const en = {
   habitTooltipTitle: 'Why do this?',
-  whatDamagesTitle: 'What damages',
+  whatDamagesTitle: 'Damage type',
 };
 
 export default en;
diff --git a/src/data/longevity/hy.ts b/src/data/longevity/hy.ts
@@ -1,6 +1,6 @@
 const hy = {
   habitTooltipTitle: 'Why do this?',
-  whatDamagesTitle: 'What damages',
+  whatDamagesTitle: 'Damage type',
 };
 
 export default hy;