feat: Longevity russian version

src/api/longevity/what-is-this.ts → src/api/longevity/about-project.ts

@@ -1,4 +1,4 @@
-export async function getWhatIsThis(locale: string) {
+export async function getAboutProject(locale: string) {
   const base = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-what-is-this`;
 
   const currentLocale = locale === 'ru' ? 'ru' : 'en';
@@ -12,10 +12,10 @@ export async function getWhatIsThis(locale: string) {
     `&populate[Seo]=*`;
 
   const res = await fetch(url, {
-    next: { revalidate: 3600, tags: ['contributor'] },
+    next: { revalidate: 3600 },
   });
 
-  if (!res.ok) throw new Error('Failed to fetch contributor');
+  if (!res.ok) throw new Error('Failed to fetch About Project');
 
   const json = await res.json();
   const attrs = json?.data?.attributes ?? {};

src/api/longevity/diet.ts

@@ -1,5 +1,5 @@
 export async function getDiet(locale: string) {
-  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-diet?populate=*`;
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-diet?populate=*&locale=${locale}`;
 
   const res = await fetch(url, {
     next: { revalidate: 3600 },

src/api/longevity/environment.ts

@@ -1,6 +1,5 @@
 export async function getEnvironment(locale: string) {
-  const currentLocale = 'en';
-  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-environment?populate[home][populate]=icon&populate[principles][populate]=icon&populate[data_tracking][populate]=icon&[populate]=image&populate[OGTags][populate]=ogImage&populate=Seo&locale=${currentLocale}`;
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-environment?populate[home][populate]=icon&populate[principles][populate]=icon&populate[data_tracking][populate]=icon&[populate]=image&populate[OGTags][populate]=ogImage&populate=Seo&locale=${locale}`;
 
   const res = await fetch(url, {
     next: { revalidate: 3600 },

src/api/longevity/habits-protocol.ts → src/api/longevity/lifestyle.ts

@@ -1,13 +1,11 @@
-export async function getHabitsProtocol(locale: string) {
-  const base = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-habit-protocol`;
-
-  const url = `${base}` + `?populate=*`;
+export async function getLifestyleProtocol(locale: string) {
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-habit-protocol?populate=*&locale=${locale}`;
 
   const res = await fetch(url, {
     next: { revalidate: 3600 },
   });
 
-  if (!res.ok) throw new Error('Failed to fetch contributor');
+  if (!res.ok) throw new Error('Failed to fetch longevity lifestyle protocol');
 
   const json = await res.json();
   const attrs = json?.data?.attributes ?? {};

src/api/longevity/results.ts

@@ -1,5 +1,5 @@
 export async function getLongevityResults(locale: string) {
-  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-result?populate=*`;
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-result?populate=*&locale=${locale}`;
 
   const res = await fetch(url, {
     next: { revalidate: 3600 },

src/api/longevity/sleep-supplements.ts

@@ -1,6 +1,6 @@
 export async function getSleepSupplements(locale: string) {
   const chosenLocale = locale === 'ru' ? 'ru' : 'en';
-  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-sleep?locale=${chosenLocale}&populate[supplements][populate]=supplements`;
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-sleep?locale=${chosenLocale}&populate[supplements][populate][supplements][populate]=localizations`;
 
   const res = await fetch(url, { next: { revalidate: 3600 } });
 

src/api/longevity/sleep.ts

@@ -1,12 +1,12 @@
 export async function getSleep(locale: string) {
-  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-sleep?populate=*
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-sleep?populate=*&locale=${locale}
 `;
 
   const res = await fetch(url, {
     next: { revalidate: 3600 },
   });
 
-  if (!res.ok) throw new Error('Failed to fetch contributor');
+  if (!res.ok) throw new Error('Failed to fetch Sleep data');
 
   const json = await res.json();
   const attrs = json?.data?.attributes ?? {};

src/api/longevity/study.ts

@@ -1,13 +1,11 @@
 export async function getStudy(locale: string) {
-  const base = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-study`;
-
-  const url = `${base}` + `?populate=*`;
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-study?populate=*&locale=${locale}`;
 
   const res = await fetch(url, {
     next: { revalidate: 3600 },
   });
 
-  if (!res.ok) throw new Error('Failed to fetch contributor');
+  if (!res.ok) throw new Error('Failed to fetch longevity study');
 
   const json = await res.json();
   const attrs = json?.data?.attributes ?? {};

src/api/longevity/supplements.ts

@@ -1,5 +1,5 @@
 export async function getSupplements(locale: string) {
-  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-supplement?populate=*`;
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-supplement?populate=*&locale=${locale}`;
 
   const res = await fetch(url, {
     next: { revalidate: 3600 },

src/api/longevity/workout.ts

@@ -1,5 +1,5 @@
 export async function getWorkout(locale: string) {
-  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-workout?populate=*`;
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-workout?populate=*&locale=${locale}`;
 
   const res = await fetch(url, {
     next: { revalidate: 3600 },

src/components/BrainAgeActivity/BrainAgeActivity.module.scss

@@ -79,12 +79,22 @@
         font-size: 28px;
         text-transform: uppercase;
       }
+
+      .subContent {
+        display: flex;
+        flex-direction: column;
+      }
     }
 
     .maximal {
       border: 1px solid #64b766;
       background-color: #64b7661a;
 
+      .subContent {
+        display: flex;
+        flex-direction: column;
+      }
+
       .active {
         color: #64b766;
         border-bottom: 1px solid #64b766;
@@ -93,6 +103,13 @@
     }
   }
 }
+.sectionRu {
+  .heading {
+    h3 {
+      font-family: 'Source-Serif-Regular', sans-serif !important;
+    }
+  }
+}
 
 @media (max-width: 965px) {
   .section {

src/components/BrainAgeActivity/BrainAgeActivity.tsx

@@ -1,19 +1,26 @@
-import { FC, useMemo, useState } from 'react';
+import { FC, useCallback, useMemo, useState } from 'react';
 import cn from 'classnames';
 
 import Heading from '@components/Heading';
 
+import longevityData from '@data/longevity';
 import { BRAIN_AGE_TABLE } from '@constants/longevity';
 
+import { BrainAgeActivityProps } from './BrainAgeActivity.types';
+
 import styles from './BrainAgeActivity.module.scss';
 
-function formatDelta(delta: number) {
-  const sign = delta > 0 ? '+' : '';
-  return `(${sign}${delta} years)`;
-}
+const BrainAgeActivity: FC<BrainAgeActivityProps> = ({ locale }) => {
+  const { totalWeeklyActivity } = longevityData[locale];
 
-const BrainAgeActivity: FC = () => {
   const [selectedBaseline, setSelectedBaseline] = useState<number>(32);
+  const formatDelta = useCallback(
+    (delta: number) => {
+      const sign = delta > 0 ? '+' : '';
+      return `(${sign}${delta} ${totalWeeklyActivity.years})`;
+    },
+    [totalWeeklyActivity.years],
+  );
 
   const result = useMemo(() => {
     const row = BRAIN_AGE_TABLE.find(r => r.baseline === selectedBaseline);
@@ -29,20 +36,24 @@ const BrainAgeActivity: FC = () => {
       activeDeltaText: formatDelta(activeDelta),
       sedentaryDeltaText: formatDelta(sedentaryDelta),
     };
-  }, [selectedBaseline]);
+  }, [selectedBaseline, formatDelta]);
 
   return (
-    <section className={styles.section}>
+    <section
+      className={cn(styles.section, {
+        [styles.sectionRu]: locale === 'ru',
+      })}
+    >
       <Heading
-        text={'Brain age with different activity levels'}
+        text={totalWeeklyActivity.brainAgeTitle}
         Tag={'h3'}
         showRightIcon={false}
         showLeftIcon={false}
         className={styles.heading}
       />{' '}
       <hr className={styles.hr} />
       <Heading
-        text={'Select baseline age to see the difference'}
+        text={totalWeeklyActivity.brainAgeSubTitle}
         Tag={'h4'}
         showRightIcon={false}
         showLeftIcon={false}
@@ -64,16 +75,30 @@ const BrainAgeActivity: FC = () => {
       <div>
         {result && (
           <div className={styles.result}>
-            <p className={styles.minimal}>
-              Brain age if sedentary
+            <div className={styles.minimal}>
+              <p className={styles.subContent}>
+                <span>{totalWeeklyActivity.brainIfSedentary}</span>
+                {totalWeeklyActivity.brainIfSedentarySubText && (
+                  <span className={styles.subText}>
+                    {totalWeeklyActivity.brainIfSedentarySubText}
+                  </span>
+                )}
+              </p>
               <span className={styles.passive}>
                 {result.sedentary} {result.sedentaryDeltaText}
               </span>
-            </p>
-            <p className={styles.maximal}>
-              Brain age if active{' '}
+            </div>
+            <div className={styles.maximal}>
+              <p className={styles.subContent}>
+                <span>{totalWeeklyActivity.brainIfActive}</span>
+                {totalWeeklyActivity.brainIfActiveSubText && (
+                  <span className={styles.subText}>
+                    {totalWeeklyActivity.brainIfActiveSubText}
+                  </span>
+                )}
+              </p>
               <span className={styles.active}>{result.active}</span>
-            </p>
+            </div>
           </div>
         )}
       </div>

src/components/BrainAgeActivity/BrainAgeActivity.types.ts

@@ -0,0 +1,3 @@
+export type BrainAgeActivityProps = {
+  locale: string;
+};

src/components/ContentHandler/ContentHandler.module.scss

@@ -62,14 +62,6 @@
     font-weight: 400 !important;
   }
 
-  &.darkTheme .h1 {
-    color: #ffffffd9 !important;
-  }
-
-  &.darkTheme.span {
-    color: #000000d9;
-  }
-
   .a,
   .strong {
     color: #252626;
@@ -218,7 +210,19 @@
   .h3,
   .h2,
   .quote a {
-    color: #dadada;
+    color: #dadada !important;
+  }
+  .p,
+  .li,
+  .h1,
+  .h2,
+  h2,
+  h3,
+  .h3 {
+    p,
+    span {
+      color: #dadada !important;
+    }
   }
 
   .a {

src/components/Header/Header.module.scss

@@ -92,7 +92,7 @@
     position: fixed;
     padding: 0 1.4rem;
     background-color: #fff;
-    z-index: 6;
+    z-index: 76;
     align-items: center;
     justify-content: center;
 
@@ -215,7 +215,7 @@
     padding: 0 1.4rem;
     height: 82px;
     background-color: #fff;
-    z-index: 6;
+    z-index: 40;
     align-items: center;
     justify-content: center;