+
@@ -263,21 +324,26 @@ const Headline: FC = ({ headline, darkTheme, russianView }) => {
+
{contributorsTxt}
diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss
index 2a449e9..4178634 100644
--- a/src/components/Modal/Modal.module.scss
+++ b/src/components/Modal/Modal.module.scss
@@ -30,7 +30,7 @@
position: relative;
z-index: 80;
border-radius: 4px;
- background-image: url('/keepsimple_/assets/landingPage/landing-bg.png');
+ background-image: url('/keepsimple_/assets/landingPage/landing-bg.webp');
.header {
.hadBorder {
diff --git a/src/components/SettingsModal/SettingsModal.module.scss b/src/components/SettingsModal/SettingsModal.module.scss
index f309469..7992973 100644
--- a/src/components/SettingsModal/SettingsModal.module.scss
+++ b/src/components/SettingsModal/SettingsModal.module.scss
@@ -87,7 +87,7 @@
max-width: 480px !important;
width: 480px !important;
border-radius: 0;
- background-image: url('/keepsimple_/assets/landingPage/landing-bg.png') !important;
+ background-image: url('/keepsimple_/assets/landingPage/landing-bg.webp') !important;
> div:first-child > span:first-child {
text-transform: uppercase;
@@ -104,7 +104,7 @@
// Dark mode
:global(.darkTheme) {
.ModalWrapper {
- background-image: url('/keepsimple_/assets/landingPage/landing-dark-bg.png') !important;
+ background-image: url('/keepsimple_/assets/landingPage/landing-dark-bg.webp') !important;
> div:first-child > span:first-child {
color: #fff;
diff --git a/src/components/SupporterContainer/SupporterContainer.module.scss b/src/components/SupporterContainer/SupporterContainer.module.scss
index b676bc3..51dcc19 100644
--- a/src/components/SupporterContainer/SupporterContainer.module.scss
+++ b/src/components/SupporterContainer/SupporterContainer.module.scss
@@ -8,7 +8,7 @@
opacity: 0;
.wrapper {
- background-image: url('/keepsimple_/assets/landingPage/landing-bg.png');
+ background-image: url('/keepsimple_/assets/landingPage/landing-bg.webp');
width: 100%;
border: 1px solid #dad6d4;
max-width: 367px;
diff --git a/src/components/SupporterContainer/SupporterContainer.tsx b/src/components/SupporterContainer/SupporterContainer.tsx
index 370e070..0504188 100644
--- a/src/components/SupporterContainer/SupporterContainer.tsx
+++ b/src/components/SupporterContainer/SupporterContainer.tsx
@@ -1,4 +1,5 @@
import cn from 'classnames';
+import Image from 'next/image';
import { FC } from 'react';
import styles from './SupporterContainer.module.scss';
@@ -41,7 +42,7 @@ const SupporterContainer: FC
- 
= ({ usedBy, darkTheme, title }) => {
@@ -30,6 +32,17 @@ const UsedBy: FC = ({ usedBy, darkTheme, title }) => {
triggerOnce: true,
threshold: 0.2,
});
+ const strapiUrl = process.env.NEXT_PUBLIC_STRAPI;
+ const darkImageUrl = usedBy?.dark_image?.data?.attributes?.url;
+ const imageUrl = usedBy?.image?.data?.attributes?.url;
+ const src =
+ darkTheme && darkImageUrl
+ ? `${strapiUrl}${darkImageUrl}`
+ : imageUrl
+ ? `${strapiUrl}${imageUrl}`
+ : '';
+
+ if (!src) return null;
return (
= ({ usedBy, darkTheme, title }) => {
width={1920}
height={250}
className={styles.img}
- src={
- darkTheme
- ? '/keepsimple_/assets/logos-line-large-dark.png'
- : '/keepsimple_/assets/logos-line-large.png'
- }
+ src={src}
alt={'Logos'}
/>
@@ -67,11 +76,7 @@ const UsedBy: FC
{isHabitsItem(item) && (
- = ({
)}
)}
-
+
diff --git a/src/components/vibesuite/MapClient/index.ts b/src/components/vibesuite/MapClient/index.ts
index 8b25bae..4a36512 100644
--- a/src/components/vibesuite/MapClient/index.ts
+++ b/src/components/vibesuite/MapClient/index.ts
@@ -1,2 +1,3 @@
import MapClient from './MapClient';
+
export default MapClient;
diff --git a/src/components/vibesuite/ProgressHeader/ProgressHeader.tsx b/src/components/vibesuite/ProgressHeader/ProgressHeader.tsx
index d4dde1d..5cc7d79 100644
--- a/src/components/vibesuite/ProgressHeader/ProgressHeader.tsx
+++ b/src/components/vibesuite/ProgressHeader/ProgressHeader.tsx
@@ -238,7 +238,7 @@ export default function ProgressHeader({
ctx.fillText(m.label.toUpperCase(), isLast ? mx : mx, barY + 18);
const kanjiSize = 10 + hoverAmt * 2;
- ctx.font = `${kanjiSize}px "Noto Serif JP", serif`;
+ ctx.font = `${kanjiSize}px "YujiSyuku-Regular", serif`;
ctx.textAlign = isLast ? 'right' : 'center';
ctx.fillStyle = `rgba(184, 50, 50, ${
reached
diff --git a/src/constants/longevity.ts b/src/constants/longevity.ts
index 67ce953..8f2aef7 100644
--- a/src/constants/longevity.ts
+++ b/src/constants/longevity.ts
@@ -1,22 +1,23 @@
export const longevityDietPath = '/keepsimple_/assets/longevity/diet';
const heartsPath = '/keepsimple_/assets/longevity/diet/hearts/';
-const scaleImgPath = '/keepsimple_/assets/longevity/diet/diet-results-icons/';
+const dietResultsIconsPath =
+ '/keepsimple_/assets/longevity/diet/diet-results-icons/';
const backgroundImgPath = '/keepsimple_/assets/longevity/diet/diet-results-bg/';
const domain = process.env.NEXT_PUBLIC_DOMAIN;
export const ogImage = `${domain}/keepsimple_/assets/longevity/og.png`;
export const images = [
- `${heartsPath}sugar.svg`,
- `${heartsPath}seed-oil.svg`,
- `${heartsPath}sugary-drinks.svg`,
- `${heartsPath}ultra-porcessed-food.svg`,
- `${heartsPath}white-flour.svg`,
- `${heartsPath}deceptive-food.svg`,
+ `${heartsPath}sugar.png`,
+ `${heartsPath}seed-oil.png`,
+ `${heartsPath}sugary-drinks.png`,
+ `${heartsPath}ultra-porcessed-food.png`,
+ `${heartsPath}white-flour.png`,
+ `${heartsPath}deceptive-food.png`,
];
export const scaleLevels = [
{
id: 1,
- imagePath: scaleImgPath + 'borderline-ok-foods.png',
+ imagePath: dietResultsIconsPath + 'borderline-ok-foods.png',
backgroundUrlMobile:
backgroundImgPath + 'borderline-ok-foods-mobile-bg.webp',
backgroundUrl: backgroundImgPath + 'borderline-ok-foods-bg.png',
@@ -27,7 +28,7 @@ export const scaleLevels = [
},
{
id: 2,
- imagePath: scaleImgPath + 'supportive-foods.png',
+ imagePath: dietResultsIconsPath + 'supportive-foods.png',
backgroundUrl: backgroundImgPath + 'supportive-foods-bg.png',
backgroundUrlMobile: backgroundImgPath + 'supportive-foods-mobile-bg.webp',
biologicalAge: '1',
@@ -37,7 +38,7 @@ export const scaleLevels = [
},
{
id: 3,
- imagePath: scaleImgPath + 'protective-foods.png',
+ imagePath: dietResultsIconsPath + 'protective-foods.png',
backgroundUrl: backgroundImgPath + 'protective-foods-bg.png',
backgroundUrlMobile: backgroundImgPath + 'protective-foods-mobile-bg.webp',
biologicalAge: '2',
@@ -47,7 +48,7 @@ export const scaleLevels = [
},
{
id: 4,
- imagePath: scaleImgPath + 'clean-nutrients.png',
+ imagePath: dietResultsIconsPath + 'clean-nutrients.png',
backgroundUrl: backgroundImgPath + 'clean-nutrients-bg.png',
backgroundUrlMobile: backgroundImgPath + 'clean-nutrient-mobile-bg.webp',
biologicalAge: '3.5',
@@ -57,7 +58,7 @@ export const scaleLevels = [
},
{
id: 5,
- imagePath: scaleImgPath + 'metabolic-gold.png',
+ imagePath: dietResultsIconsPath + 'metabolic-gold.png',
backgroundUrl: backgroundImgPath + 'metabolic-gold-bg.png',
backgroundUrlMobile: backgroundImgPath + 'metabolic-gold-mobile.bg.webp',
biologicalAge: '5',
diff --git a/src/layouts/LandingLayout/LandingLayout.tsx b/src/layouts/LandingLayout/LandingLayout.tsx
index 23951b6..0b89dc2 100644
--- a/src/layouts/LandingLayout/LandingLayout.tsx
+++ b/src/layouts/LandingLayout/LandingLayout.tsx
@@ -1,4 +1,5 @@
import cn from 'classnames';
+import Head from 'next/head';
import { useRouter } from 'next/router';
import React, { FC, useEffect, useRef } from 'react';
@@ -55,6 +56,15 @@ const LandingLayout: FC = ({ homeData, darkTheme }) => {
return (
<>
+
+
+
= ({ homeData, darkTheme }) => {
russianView={locale === 'ru'}
/>
= ({
easterThemeIndexRef.current = easterThemeIndex;
}, [easterThemeIndex]);
- useEffect(() => {
- const easterImages = [
- '/keepsimple_/assets/tools/hero/green.png',
- '/keepsimple_/assets/tools/logo/green.svg',
- '/keepsimple_/assets/tools/hero/white.png',
- '/keepsimple_/assets/tools/logo/white.svg',
- '/keepsimple_/assets/tools/hero/black.png',
- '/keepsimple_/assets/tools/logo/black.svg',
- ];
-
- easterImages.forEach(src => {
- const img = new Image();
- img.src = src;
- });
- }, []);
-
useEffect(() => {
const handleSequence = (event: KeyboardEvent) => {
const target = event.target as HTMLElement | null;
@@ -87,6 +71,17 @@ const ToolsLayout: FC = ({
) {
typedBufferRef.current = '';
easterActivatedRef.current = true;
+ [
+ '/keepsimple_/assets/tools/hero/green.png',
+ '/keepsimple_/assets/tools/logo/green.svg',
+ '/keepsimple_/assets/tools/hero/white.png',
+ '/keepsimple_/assets/tools/logo/white.svg',
+ '/keepsimple_/assets/tools/hero/black.png',
+ '/keepsimple_/assets/tools/logo/black.svg',
+ ].forEach(src => {
+ const img = new Image();
+ img.src = src;
+ });
easterThemeIndexRef.current = 1;
setEasterThemeIndex(1);
setTransitionKey(prev => prev + 1);
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index d0408e6..3690f50 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -178,12 +178,12 @@ function AppContent({ Component, pageProps: { session, ...pageProps } }: TApp) {
if (!isLongevityProtocolPage) return;
const imagesToPreload = [
- '/keepsimple_/assets/longevity/diet/hearts/sugar.svg',
- '/keepsimple_/assets/longevity/diet/hearts/seed-oil.svg',
- '/keepsimple_/assets/longevity/diet/hearts/sugary-drinks.svg',
- '/keepsimple_/assets/longevity/diet/hearts/ultra-porcessed-food.svg',
- '/keepsimple_/assets/longevity/diet/hearts/white-flour.svg',
- '/keepsimple_/assets/longevity/diet/hearts/deceptive-food.svg',
+ '/keepsimple_/assets/longevity/diet/hearts/sugar.png',
+ '/keepsimple_/assets/longevity/diet/hearts/seed-oil.png',
+ '/keepsimple_/assets/longevity/diet/hearts/sugary-drinks.png',
+ '/keepsimple_/assets/longevity/diet/hearts/ultra-porcessed-food.png',
+ '/keepsimple_/assets/longevity/diet/hearts/white-flour.png',
+ '/keepsimple_/assets/longevity/diet/hearts/deceptive-food.png',
'/keepsimple_/assets/longevity/diet/tooltip-line.png',
'/keepsimple_/assets/longevity/diet/damage-icon.svg',
'/keepsimple_/assets/longevity/diet/info-icon.svg',
@@ -195,7 +195,7 @@ function AppContent({ Component, pageProps: { session, ...pageProps } }: TApp) {
'/keepsimple_/assets/longevity/diet/diet-results-icons/metabolic-gold.png',
'/keepsimple_/assets/longevity/habits/tooltip-bg.png',
'/keepsimple_/assets/longevity/habits/tooltip-headline-bg.png',
- '/keepsimple_/assets/longevity/habits/what-is-this-bg.webp',
+ '/keepsimple_/assets/longevity/habits/what-is-this-bg.png',
];
imagesToPreload.forEach(src => {
@@ -277,7 +277,11 @@ function AppContent({ Component, pageProps: { session, ...pageProps } }: TApp) {