keepsimpleio · MaryWylde · Apr 15, 2026 · Apr 14, 2026
diff --git a/.env.example b/.env.example
diff --git a/src/api/vibesuite.ts b/src/api/vibesuite.ts
@@ -1,8 +1,12 @@
 export const getVibesuite = async (locale: string) => {
-  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/vibesuite?populate[pageSeo]=*&populate[OGTags][populate]=ogImage&locale=${locale}`;
+  const base = process.env.NEXT_PUBLIC_STRAPI;
+  if (!base) return null;
+
+  const url = `${base}/api/vibesuite?populate[pageSeo]=*&populate[OGTags][populate]=ogImage&locale=${locale}`;
   return await fetch(url)
     .then(resp => resp.json())
-    .then(json => json?.data?.attributes || null);
+    .then(json => json?.data?.attributes || null)
+    .catch(() => null);
 };
 
 export const updateLearnedSkills = async (learnedSkills: string[]) => {

diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss
@@ -11,8 +11,18 @@
   align-items: center;
   justify-content: center;
   z-index: 200;
+  animation: overlayFadeIn 0.2s ease-out;
+
+  &.overlayClosing {
+    animation: overlayFadeOut 0.18s ease-in forwards;
+  }
+
+  .wrapperClosing {
+    animation: wrapperOut 0.18s ease-in forwards;
+  }
 
   .wrapper {
+    animation: wrapperIn 0.2s ease-out;
     display: flex;
     width: 100%;
     background-color: #fff;
@@ -236,3 +246,43 @@
     }
   }
 }
+
+@keyframes overlayFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes overlayFadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes wrapperIn {
+  from {
+    opacity: 0;
+    transform: scale(0.97) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes wrapperOut {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.97) translateY(8px);
+  }
+}
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -1,6 +1,12 @@
 import cn from 'classnames';
 import Image from 'next/image';
-import React, { FC, KeyboardEvent, ReactNode, useEffect } from 'react';
+import React, {
+  FC,
+  KeyboardEvent,
+  ReactNode,
+  useEffect,
+  useState,
+} from 'react';
 import { createPortal } from 'react-dom';
 
 import styles from './Modal.module.scss';
@@ -52,8 +58,14 @@ const Modal: FC<ModalProps> = ({
   backgroundImageUrl,
   hasHr,
 }) => {
+  const [closing, setClosing] = useState(false);
+
   const handleClose = () => {
-    onClick();
+    setClosing(true);
+    setTimeout(() => {
+      setClosing(false);
+      onClick();
+    }, 180);
   };
 
   useEffect(() => {
@@ -70,18 +82,18 @@ const Modal: FC<ModalProps> = ({
 
       if (!close) {
         document.documentElement.style.overflowY = 'hidden';
-        document.body.classList.add('hide-body-move');
+        document.documentElement.classList.add('hide-body-move');
       } else {
         document.documentElement.style.overflowY = overflowDefaultValue;
-        document.body.classList.remove('hide-body-move');
+        document.documentElement.classList.remove('hide-body-move');
       }
 
       // @ts-ignore
       document.addEventListener('keydown', handleKeyDown);
 
       return () => {
         document.documentElement.style.overflowY = overflowDefaultValue;
-        document.body.classList.remove('hide-body-move');
+        document.documentElement.classList.remove('hide-body-move');
         // @ts-ignore
         document.removeEventListener('keydown', handleKeyDown);
       };
@@ -92,6 +104,7 @@ const Modal: FC<ModalProps> = ({
     <div
       className={cn(styles.overlay, {
         [className]: className,
+        [styles.overlayClosing]: closing,
       })}
       data-cy={dataCy}
     >
@@ -109,6 +122,7 @@ const Modal: FC<ModalProps> = ({
           [styles.fullSizeMobile]: fullSizeMobile,
           [styles.isLongevityProtocolModal]: isLongevityProtocolModal,
           [styles.withBackgroundImage]: backgroundImageUrl,
+          [styles.wrapperClosing]: closing,
         })}
         style={{
           backgroundImage: backgroundImageUrl

diff --git a/src/components/SettingsModal/SettingsModal.module.scss b/src/components/SettingsModal/SettingsModal.module.scss
@@ -39,6 +39,19 @@
   line-height: 1.4;
   height: 40px !important;
   padding: 9px 16px !important;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+
+  &:hover {
+    background-color: #242424 !important;
+    color: #fff !important;
+  }
+
+  &:active {
+    background-color: #111 !important;
+    color: #fff !important;
+  }
 }
 
 .SaveBtn {
@@ -51,11 +64,18 @@
   line-height: 1.4;
   height: 40px !important;
   padding: 6px 23px;
+  transition:
+    background-color 0.15s ease,
+    opacity 0.15s ease;
 
   &:hover {
-    background-color: #242424 !important;
-    border-color: #242424 !important;
-    color: #fff !important;
+    background-color: #111 !important;
+    border-color: #111 !important;
+  }
+
+  &:active {
+    background-color: #000 !important;
+    border-color: #000 !important;
   }
 }
 
@@ -98,6 +118,16 @@
   .CancelBtn {
     border-color: #fff !important;
     color: #fff !important;
+
+    &:hover {
+      background-color: #fff !important;
+      color: rgba(0, 0, 0, 0.85) !important;
+    }
+
+    &:active {
+      background-color: #ddd !important;
+      color: rgba(0, 0, 0, 0.85) !important;
+    }
   }
 
   .SaveBtn {
@@ -106,9 +136,13 @@
     color: rgba(0, 0, 0, 0.85) !important;
 
     &:hover {
-      background-color: #fff !important;
-      border-color: #fff !important;
-      color: rgba(0, 0, 0, 0.85) !important;
+      background-color: #e8e8e8 !important;
+      border-color: #e8e8e8 !important;
+    }
+
+    &:active {
+      background-color: #ddd !important;
+      border-color: #ddd !important;
     }
   }
 }

diff --git a/src/components/vibesuite/CategoryNav/CategoryNav.module.scss b/src/components/vibesuite/CategoryNav/CategoryNav.module.scss
@@ -68,6 +68,45 @@
   color: var(--text-tertiary);
 }
 
+.knowledgeGapsBtn {
+  display: block;
+  width: calc(100% - 3.5rem);
+  margin: 0 1.75rem 1.25rem;
+  padding: 0.6rem 0.85rem;
+  font-family: var(--font-ui);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--accent);
+  background: var(--bg-card);
+  border: 1px solid var(--accent);
+  cursor: pointer;
+  text-align: center;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+  animation: knowledgeGapsPulse 4s ease-in-out infinite;
+
+  &:hover {
+    background: var(--accent);
+    color: #fff;
+    animation: none;
+  }
+}
+
+@keyframes knowledgeGapsPulse {
+  0%,
+  100% {
+    border-color: var(--accent);
+    opacity: 1;
+  }
+  50% {
+    border-color: var(--border);
+    opacity: 0.65;
+  }
+}
+
 .allCategoriesBtn {
   display: block;
   width: 100%;
@@ -84,6 +123,15 @@
   transition: all 0.15s ease;
   margin-bottom: 0.25rem;
 
+  &:hover:not(.active) {
+    color: var(--text-primary);
+    background: var(--bg-card-active);
+  }
+
+  &:active:not(.active) {
+    border-left-color: var(--border-strong);
+  }
+
   &.active {
     font-weight: 500;
     color: var(--accent);
@@ -120,6 +168,15 @@
   transition: all 0.15s ease;
   margin-bottom: 0.125rem;
 
+  &:hover:not(.active) {
+    color: var(--text-primary);
+    background: var(--bg-card-active);
+  }
+
+  &:active:not(.active) {
+    border-left-color: var(--border-strong);
+  }
+
   &.active {
     color: var(--accent);
     background: var(--bg-card-active);

diff --git a/src/components/vibesuite/CategoryNav/CategoryNav.tsx b/src/components/vibesuite/CategoryNav/CategoryNav.tsx
@@ -20,6 +20,7 @@ export default function CategoryNav({
   onSelectCategory,
   onOpenRecommendations,
   onOpenWhyModal,
+  onOpenKnowledgeGaps,
   allCompleted,
 }: CategoryNavProps) {
   const { locale } = useRouter() as TRouter;
@@ -45,6 +46,10 @@ export default function CategoryNav({
         </button>
       )}
 
+      <button className={styles.knowledgeGapsBtn} onClick={onOpenKnowledgeGaps}>
+        {t.knowledgeGaps}
+      </button>
+
       <ul className={styles.navList}>
         <li>
           <button

diff --git a/src/components/vibesuite/CategoryNav/CategoryNav.types.ts b/src/components/vibesuite/CategoryNav/CategoryNav.types.ts
@@ -6,5 +6,6 @@ export type CategoryNavProps = {
   onSelectCategory: (categoryId: string | null) => void;
   onOpenRecommendations: () => void;
   onOpenWhyModal: () => void;
+  onOpenKnowledgeGaps: () => void;
   allCompleted: boolean;
 };