Chore: longevity improvements p1

src/api/longevity/environment.ts

@@ -1,11 +1,12 @@
 export async function getEnvironment(locale: string) {
-  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`;
+  const currentLocale = locale === 'ru' ? 'ru' : '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 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 environment');
 
   const json = await res.json();
   const attrs = json?.data?.attributes ?? {};

src/components/Heading/Heading.tsx

@@ -5,6 +5,7 @@ import Image from 'next/image';
 import { HeadingProps } from './Heading.types';
 
 import styles from './Heading.module.scss';
+import RedLine from '@icons/longevity/RedLine';
 
 const Heading: FC<HeadingProps> = ({
   text,
@@ -69,16 +70,7 @@ 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}
-        />
-      )}
+      {hasRedUnderline && <RedLine className={styles.redUnderline} />}
     </div>
   );
 };

src/components/longevity/BasicStats/BasicStats.module.scss

@@ -1,3 +1,5 @@
+@import '@styles/fonts.scss';
+
 .basicStats {
   padding-top: 28px;
   padding-bottom: 40px;
@@ -10,6 +12,16 @@
       gap: 12px;
       align-items: center;
       padding-bottom: 16px;
+
+      .statValue {
+        @include text-body;
+      }
     }
   }
 }
+
+@media (max-width: 965px) {
+  .basicStats {
+    margin-bottom: 0;
+  }
+}

src/components/longevity/BasicStats/BasicStats.tsx

@@ -1,14 +1,17 @@
-import { BasicStatsProps } from './BasicStats.types';
 import { FC } from 'react';
-import Heading from '@components/Heading';
 import Image from 'next/image';
+
+import Heading from '@components/Heading';
+
+import { BasicStatsProps } from './BasicStats.types';
+
 import styles from './BasicStats.module.scss';
 
-const BasicStats: FC<BasicStatsProps> = ({ data, locale }) => {
+const BasicStats: FC<BasicStatsProps> = ({ data, title }) => {
   return (
     <div className={styles.basicStats}>
       <Heading
-        text={data['section title']}
+        text={title}
         Tag="h3"
         showLeftIcon={false}
         showRightIcon={false}

src/components/longevity/BasicStats/BasicStats.types.ts

@@ -4,5 +4,5 @@ export type BasicStatsProps = {
     value: string;
     icon: string;
   }[];
-  locale?: string;
+  title?: string;
 };

src/components/longevity/DietResults/DietResults.module.scss

@@ -17,6 +17,7 @@
     width: 120px;
     height: 120px;
     opacity: 75%;
+    cursor: pointer;
 
     &.active {
       opacity: 1;

src/components/longevity/DietResults/DietResults.tsx

@@ -6,11 +6,16 @@ import { DietResultsProps } from './DietResults.types';
 
 import styles from './DietResults.module.scss';
 
-const DietResults: FC<DietResultsProps> = ({ id, scaleLevels }) => {
+const DietResults: FC<DietResultsProps> = ({
+  id,
+  scaleLevels,
+  setSelectedHealthyOptionId,
+}) => {
   return (
     <div className={styles.results}>
       {scaleLevels.map((level, index) => (
         <div
+          onClick={() => setSelectedHealthyOptionId(level.id)}
           key={level.id}
           className={cn(styles.item, {
             [styles.active]: id === level.id,

src/components/longevity/DietResults/DietResults.types.tsx

@@ -1,5 +1,6 @@
 export type DietResultsProps = {
   id?: number;
+  setSelectedHealthyOptionId?: (id: number) => void;
   scaleLevels?: {
     id: number;
     imagePath: string;

src/components/longevity/EnvironmentSubSection/EnvironmentSubSection.module.scss

@@ -1,5 +1,5 @@
 .environmentSubSection {
-  padding: 20px 60px 20px 40px;
+  padding: 20px 60px 0 40px;
 
   .titleAndIcon {
     display: flex;
@@ -35,8 +35,36 @@
   }
 }
 
+.environmentSubSection:first-child {
+  padding: 28px 60px 0 40px;
+}
+
+.environmentSubSection:last-child {
+  padding: 20px 60px 28px 40px;
+}
+
 @media (max-width: 965px) {
   .environmentSubSection {
     padding: 12px;
+
+    .hr {
+      //width: 100%;
+      background-size: contain;
+    }
+  }
+  .environmentSubSection:first-child {
+    padding: 12px 12px 0 12px;
+  }
+
+  .environmentSubSection:last-child {
+    padding: 12px;
+  }
+}
+
+@media (max-width: 450px) {
+  .environmentSubSection {
+    .hr {
+      width: 100%;
+    }
   }
 }

src/components/longevity/LongevitySubSection/LongevitySubSection.module.scss

@@ -1,3 +1,5 @@
+@import '@styles/fonts.scss';
+
 .subSection {
   max-width: 948px;
   padding-bottom: 40px;
@@ -76,21 +78,29 @@
   .mainContent {
     background-image: url('/keepsimple_/assets/longevity/habits/white-bg.png') !important;
 
+    .dateTxtMobile {
+      display: none;
+    }
+
     .content {
       padding: 28px 40px;
 
       p {
         margin: 0;
         line-height: 1.5;
-        font-size: 16px;
+        @include text-body;
       }
 
+      div > ul,
       ul {
         padding: 0 0 0 11px;
+        margin: 0;
 
         li {
           padding-bottom: 20px;
           padding-left: 12px;
+          line-height: 1.5;
+          @include text-body;
 
           &::marker {
             content: url('/keepsimple_/assets/longevity/habits/marker.svg');
@@ -110,26 +120,53 @@
 @media (max-width: 965px) {
   .subSection {
     margin-right: 16px;
+    padding-bottom: 20px;
 
     .mainContent {
+      .dateTxtMobile {
+        display: block;
+        background-color: #f4ebdc;
+        padding: 2px 12px;
+        margin: 0 12px 16px 12px;
+      }
+
       .content {
         padding: 12px;
+
+        ul {
+          margin: 0;
+
+          li {
+            padding-bottom: 12px;
+          }
+        }
       }
     }
 
+    .withDate {
+      padding-top: 16px;
+    }
+
     .headline {
       height: 48px;
-
       padding: 0 12px;
 
+      .dateTxt {
+        display: none;
+      }
+
+      .habitTooltip {
+        font-size: 16px;
+      }
+
       .backgroundImg {
         height: 48px;
         object-fit: cover;
       }
 
       .heading {
         h3 {
-          font-size: 16px !important;
+          font-size: 18px !important;
         }
       }
     }

src/components/longevity/LongevitySubSection/LongevitySubSection.tsx

@@ -18,7 +18,6 @@ const LongevitySubSection: FC<LongevitySubSectionProps> = ({
   headlineBackgroundImageUrl,
   locale,
   whatDamages,
-  howDamages,
   children,
   date,
   isHacks,
@@ -45,28 +44,30 @@ const LongevitySubSection: FC<LongevitySubSectionProps> = ({
             [styles.hacksHeading]: isHacks,
           })}
         />
-        {whatDamages && howDamages && (
+        {whatDamages && (
           <span className={styles.habitTooltip} data-tooltip-id={title}>
             {habitTooltipTitle}
           </span>
         )}
         {date && <div className={styles.dateTxt}>{date}</div>}
-        {whatDamages && howDamages && (
+        {whatDamages && (
           <ReactTooltip
             opacity={1}
             id={title}
             place={'bottom'}
             className={cn(styles.tooltip, {})}
           >
-            <WhyDoThisTooltip
-              whatDamagesText={whatDamages}
-              howDamagesText={howDamages}
-              locale={locale}
-            />
+            <WhyDoThisTooltip whatDamagesText={whatDamages} locale={locale} />
           </ReactTooltip>
         )}
       </div>
-      <div className={styles.mainContent}>
+      <div
+        className={cn(styles.mainContent, {
+          [styles.withDate]: date,
+        })}
+      >
+        {date && <div className={styles.dateTxtMobile}>{date}</div>}
+
         {description ? (
           <div
             dangerouslySetInnerHTML={{ __html: description || '' }}

src/components/longevity/LongevitySubSection/LongevitySubSection.types.ts

@@ -4,7 +4,6 @@ export type LongevitySubSectionProps = {
   description?: string;
   locale?: string;
   whatDamages?: string;
-  howDamages?: string;
   children?: React.ReactNode;
   date?: string;
   isHacks?: boolean;

src/components/longevity/MainInfoSection/MainInfoSection.module.scss

@@ -1,42 +1,69 @@
 @import '@styles/_variables.scss';
+@import '@styles/fonts.scss';
 
-.mainInfoSection {
+.mainInfoSection,
+.introPage {
   position: relative;
   background-repeat: no-repeat;
   background-size: cover;
-  padding: 40px 40px 0 40px;
+  padding: 30px 40px 0 40px;
   max-width: 868px;
-  margin: 40px 16px 16px 0;
+  margin: 40px 0 16px 0;
   display: flex;
 
   .heading {
     padding-bottom: 24px;
   }
+
   .description {
     line-height: 1.5;
     font-size: 16px;
     position: relative;
-    //z-index: 3;
     @extend .longevityList;
 
     p {
       margin: 0;
+      @include text-body;
     }
   }
+
   .japaneseText {
     writing-mode: vertical-rl;
     text-orientation: upright;
     font-size: 24px;
     font-family: 'YujiSyuku-Regular', sans-serif;
     letter-spacing: -5px;
-    //font-weight: 700;
     color: #ce2128;
     margin-left: 60px;
   }
+}
+
+.introPage {
+  padding: 40px 40px 0 40px;
+  margin: 40px 16px;
+
+  .heading {
+    padding-bottom: 4px;
+  }
+}
+
+@media (max-width: 1190px) {
+  .mainInfoSection {
+    margin: 20px 16px;
+  }
+}
+
+@media (max-width: 965px) {
+  .mainInfoSection {
+    padding: 12px 12px 16px 12px;
+    background-position: 82% center;
 
-  .coverImg {
-    //position: absolute;
-    //z-index: 1;
-    //width: 100%;
+    .japaneseText {
+      margin-left: 8px;
+      font-size: 16px;
+    }
+  }
+  .introPage {
+    background-position: unset;
   }
 }