feat: initial state of Longevity

src/api/longevity/diet.ts

@@ -0,0 +1,28 @@
+export async function getDiet(locale: string) {
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-diet?populate=*`;
+
+  const res = await fetch(url, {
+    next: { revalidate: 3600 },
+  });
+
+  if (!res.ok) throw new Error('Failed to fetch contributor');
+
+  const json = await res.json();
+  const attrs = json?.data?.attributes ?? {};
+  const locs = attrs?.localizations?.data ?? [];
+
+  const byLocale: Record<string, unknown> = {};
+
+  if (attrs.locale) {
+    byLocale[attrs.locale] = attrs;
+  }
+
+  for (const loc of locs) {
+    const a = loc?.attributes;
+    if (a?.locale) {
+      byLocale[a.locale] = a;
+    }
+  }
+
+  return byLocale;
+}

src/api/longevity/environment.ts

@@ -0,0 +1,28 @@
+export async function getEnvironment(locale: string) {
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-environment?populate=*`;
+
+  const res = await fetch(url, {
+    next: { revalidate: 3600 },
+  });
+
+  if (!res.ok) throw new Error('Failed to fetch contributor');
+
+  const json = await res.json();
+  const attrs = json?.data?.attributes ?? {};
+  const locs = attrs?.localizations?.data ?? [];
+
+  const byLocale: Record<string, unknown> = {};
+
+  if (attrs.locale) {
+    byLocale[attrs.locale] = attrs;
+  }
+
+  for (const loc of locs) {
+    const a = loc?.attributes;
+    if (a?.locale) {
+      byLocale[a.locale] = a;
+    }
+  }
+
+  return byLocale;
+}

src/api/longevity/habits-protocol.ts

@@ -0,0 +1,30 @@
+export async function getHabitsProtocol(locale: string) {
+  const base = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-habit-protocol`;
+
+  const url = `${base}` + `?populate=*`;
+
+  const res = await fetch(url, {
+    next: { revalidate: 3600 },
+  });
+
+  if (!res.ok) throw new Error('Failed to fetch contributor');
+
+  const json = await res.json();
+  const attrs = json?.data?.attributes ?? {};
+  const locs = attrs?.localizations?.data ?? [];
+
+  const byLocale: Record<string, unknown> = {};
+
+  if (attrs.locale) {
+    byLocale[attrs.locale] = attrs;
+  }
+
+  for (const loc of locs) {
+    const a = loc?.attributes;
+    if (a?.locale) {
+      byLocale[a.locale] = a;
+    }
+  }
+
+  return byLocale;
+}

src/api/longevity/results.ts

@@ -0,0 +1,28 @@
+export async function getLongevityResults(locale: string) {
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-result?populate=*`;
+
+  const res = await fetch(url, {
+    next: { revalidate: 3600 },
+  });
+
+  if (!res.ok) throw new Error('Failed to fetch contributor');
+
+  const json = await res.json();
+  const attrs = json?.data?.attributes ?? {};
+  const locs = attrs?.localizations?.data ?? [];
+
+  const byLocale: Record<string, unknown> = {};
+
+  if (attrs.locale) {
+    byLocale[attrs.locale] = attrs;
+  }
+
+  for (const loc of locs) {
+    const a = loc?.attributes;
+    if (a?.locale) {
+      byLocale[a.locale] = a;
+    }
+  }
+
+  return byLocale;
+}

src/api/longevity/sleep.ts

@@ -0,0 +1,28 @@
+export async function getSleep(locale: string) {
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-sleep?populate=*`;
+
+  const res = await fetch(url, {
+    next: { revalidate: 3600 },
+  });
+
+  if (!res.ok) throw new Error('Failed to fetch contributor');
+
+  const json = await res.json();
+  const attrs = json?.data?.attributes ?? {};
+  const locs = attrs?.localizations?.data ?? [];
+
+  const byLocale: Record<string, unknown> = {};
+
+  if (attrs.locale) {
+    byLocale[attrs.locale] = attrs;
+  }
+
+  for (const loc of locs) {
+    const a = loc?.attributes;
+    if (a?.locale) {
+      byLocale[a.locale] = a;
+    }
+  }
+
+  return byLocale;
+}

src/api/longevity/study.ts

@@ -0,0 +1,30 @@
+export async function getStudy(locale: string) {
+  const base = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-study`;
+
+  const url = `${base}` + `?populate=*`;
+
+  const res = await fetch(url, {
+    next: { revalidate: 3600 },
+  });
+
+  if (!res.ok) throw new Error('Failed to fetch contributor');
+
+  const json = await res.json();
+  const attrs = json?.data?.attributes ?? {};
+  const locs = attrs?.localizations?.data ?? [];
+
+  const byLocale: Record<string, unknown> = {};
+
+  if (attrs.locale) {
+    byLocale[attrs.locale] = attrs;
+  }
+
+  for (const loc of locs) {
+    const a = loc?.attributes;
+    if (a?.locale) {
+      byLocale[a.locale] = a;
+    }
+  }
+
+  return byLocale;
+}

src/api/longevity/supplements.ts

@@ -0,0 +1,28 @@
+export async function getSupplements(locale: string) {
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-supplement?populate=*`;
+
+  const res = await fetch(url, {
+    next: { revalidate: 3600 },
+  });
+
+  if (!res.ok) throw new Error('Failed to fetch contributor');
+
+  const json = await res.json();
+  const attrs = json?.data?.attributes ?? {};
+  const locs = attrs?.localizations?.data ?? [];
+
+  const byLocale: Record<string, unknown> = {};
+
+  if (attrs.locale) {
+    byLocale[attrs.locale] = attrs;
+  }
+
+  for (const loc of locs) {
+    const a = loc?.attributes;
+    if (a?.locale) {
+      byLocale[a.locale] = a;
+    }
+  }
+
+  return byLocale;
+}

src/api/longevity/what-is-this.ts

@@ -0,0 +1,38 @@
+export async function getWhatIsThis(locale: string) {
+  const base = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-what-is-this`;
+
+  const currentLocale = locale === 'ru' ? 'ru' : 'en';
+
+  const url =
+    `${base}` +
+    `?locale=${currentLocale}` +
+    `&populate[localizations]=*` +
+    `&populate[basicStats]=*` +
+    `&populate[OGTags][populate]=ogImage` +
+    `&populate[Seo]=*`;
+
+  const res = await fetch(url, {
+    next: { revalidate: 3600, tags: ['contributor'] },
+  });
+
+  if (!res.ok) throw new Error('Failed to fetch contributor');
+
+  const json = await res.json();
+  const attrs = json?.data?.attributes ?? {};
+  const locs = attrs?.localizations?.data ?? [];
+
+  const byLocale: Record<string, unknown> = {};
+
+  if (attrs.locale) {
+    byLocale[attrs.locale] = attrs;
+  }
+
+  for (const loc of locs) {
+    const a = loc?.attributes;
+    if (a?.locale) {
+      byLocale[a.locale] = a;
+    }
+  }
+
+  return byLocale;
+}

src/api/longevity/workout.ts

@@ -0,0 +1,28 @@
+export async function getWorkout(locale: string) {
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-workout?populate=*`;
+
+  const res = await fetch(url, {
+    next: { revalidate: 3600 },
+  });
+
+  if (!res.ok) throw new Error('Failed to fetch contributor');
+
+  const json = await res.json();
+  const attrs = json?.data?.attributes ?? {};
+  const locs = attrs?.localizations?.data ?? [];
+
+  const byLocale: Record<string, unknown> = {};
+
+  if (attrs.locale) {
+    byLocale[attrs.locale] = attrs;
+  }
+
+  for (const loc of locs) {
+    const a = loc?.attributes;
+    if (a?.locale) {
+      byLocale[a.locale] = a;
+    }
+  }
+
+  return byLocale;
+}

src/components/Header/Header.module.scss

@@ -9,7 +9,7 @@
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
   position: sticky;
   top: 0;
-  z-index: 10;
+  z-index: 65;
   height: 48px;
   padding-top: unset;
   flex-direction: row;

src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React, { FC, Fragment, useCallback, useContext } from 'react';
+import React, { FC, Fragment, useCallback, useContext, useState } from 'react';
 import cn from 'classnames';
 import { useRouter } from 'next/router';
 import Image from 'next/image';
@@ -7,6 +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 type { TRouter } from '@local-types/global';
 
@@ -20,7 +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 [
     { toggleIsDarkTheme, toggleSidebar },
     { isDarkTheme, isOpenedSidebar },
@@ -154,10 +157,18 @@ const Header: FC = () => {
                 </Link>
               )}
             </div>
+            <UserProfile
+              showDropdown
+              setAccountData={setAccountData}
+              isLoggedIn={!!accountData}
+              username={accountData?.username}
+              setOpenLoginModal={setOpenLogin}
+            />
           </div>
         </div>
         <div className={styles.closeButton} onClick={handleToggleSidebar} />
       </header>
+      {openLogin && <LogIn setShowLogIn={setOpenLogin} />}
     </Fragment>
   );
 };

src/components/Heading/Heading.module.scss

@@ -16,12 +16,23 @@
       font-size: 64px;
     }
 
+    .bold {
+      font-weight: 700;
+    }
+
     .h4 {
       font-size: 20px;
       font-family: Source-Serif-SemiBold, sans-serif;
       line-height: 1.4;
     }
 
+    .h5 {
+      font-size: 16px;
+      font-family: Aboreto-Regular, sans-serif;
+      line-height: 1;
+      font-weight: 600;
+    }
+
     .diamond {
       width: 10px;
       height: 10px;
@@ -36,7 +47,8 @@
     }
   }
 
-  .underline {
+  .underline,
+  .redUnderline {
     width: 100%;
     padding: 16px 0 24px 0;
   }

src/components/Heading/Heading.tsx

@@ -15,7 +15,9 @@ const Heading: FC<HeadingProps> = ({
   Tag = 'h1',
   hasUnderline,
   isDarkTheme,
+  hasRedUnderline,
   locale,
+  isBold,
   isBig,
 }) => {
   return (
@@ -43,7 +45,9 @@ const Heading: FC<HeadingProps> = ({
           className={cn(styles.heading, {
             [styles.small]: Tag === 'h2' || Tag === 'h3',
             [styles.h4]: Tag === 'h4',
+            [styles.h5]: Tag === 'h5',
             [styles.big]: isBig,
+            [styles.bold]: isBold,
           })}
         >
           {text}
@@ -65,6 +69,16 @@ const Heading: FC<HeadingProps> = ({
           className={styles.underline}
         />
       )}
+      {hasRedUnderline && (
+        <Image
+          src={'/keepsimple_/assets/longevity/red-line.svg'}
+          alt={'line'}
+          width={868}
+          height={4}
+          unoptimized
+          className={styles.redUnderline}
+        />
+      )}
     </div>
   );
 };