diff --git a/public/keepsimple_/assets/longevity/diet/diet-results-bg/borderline-ok-foods-mobile-bg.webp b/public/keepsimple_/assets/longevity/diet/diet-results-bg/borderline-ok-foods-mobile-bg.webp new file mode 100644 index 0000000..a188684 Binary files /dev/null and b/public/keepsimple_/assets/longevity/diet/diet-results-bg/borderline-ok-foods-mobile-bg.webp differ diff --git a/public/keepsimple_/assets/longevity/diet/diet-results-bg/borderline-ok-mobile-bg.webp b/public/keepsimple_/assets/longevity/diet/diet-results-bg/borderline-ok-mobile-bg.webp deleted file mode 100644 index 948d14f..0000000 Binary files a/public/keepsimple_/assets/longevity/diet/diet-results-bg/borderline-ok-mobile-bg.webp and /dev/null differ diff --git a/public/keepsimple_/assets/longevity/diet/diet-results-bg/clean-nutrient-mobile-bg.webp b/public/keepsimple_/assets/longevity/diet/diet-results-bg/clean-nutrient-mobile-bg.webp new file mode 100644 index 0000000..98c1f60 Binary files /dev/null and b/public/keepsimple_/assets/longevity/diet/diet-results-bg/clean-nutrient-mobile-bg.webp differ diff --git a/public/keepsimple_/assets/longevity/diet/diet-results-bg/clean-nutrients-mobile-bg.webp b/public/keepsimple_/assets/longevity/diet/diet-results-bg/clean-nutrients-mobile-bg.webp deleted file mode 100644 index 5672d58..0000000 Binary files a/public/keepsimple_/assets/longevity/diet/diet-results-bg/clean-nutrients-mobile-bg.webp and /dev/null differ diff --git a/public/keepsimple_/assets/longevity/diet/diet-results-bg/metabolic-gold-mobile-bg.webp b/public/keepsimple_/assets/longevity/diet/diet-results-bg/metabolic-gold-mobile-bg.webp deleted file mode 100644 index 73d122a..0000000 Binary files a/public/keepsimple_/assets/longevity/diet/diet-results-bg/metabolic-gold-mobile-bg.webp and /dev/null differ diff --git a/public/keepsimple_/assets/longevity/diet/diet-results-bg/metabolic-gold-mobile.bg.webp b/public/keepsimple_/assets/longevity/diet/diet-results-bg/metabolic-gold-mobile.bg.webp new file mode 100644 index 0000000..42aed61 Binary files /dev/null and b/public/keepsimple_/assets/longevity/diet/diet-results-bg/metabolic-gold-mobile.bg.webp differ diff --git a/public/keepsimple_/assets/longevity/diet/diet-results-bg/protective-foods-mobile-bg.webp b/public/keepsimple_/assets/longevity/diet/diet-results-bg/protective-foods-mobile-bg.webp index c8eca6f..5a7a403 100644 Binary files a/public/keepsimple_/assets/longevity/diet/diet-results-bg/protective-foods-mobile-bg.webp and b/public/keepsimple_/assets/longevity/diet/diet-results-bg/protective-foods-mobile-bg.webp differ diff --git a/public/keepsimple_/assets/longevity/diet/diet-results-bg/supportive-foods-mobile-bg.webp b/public/keepsimple_/assets/longevity/diet/diet-results-bg/supportive-foods-mobile-bg.webp index 7bce52e..8d96d59 100644 Binary files a/public/keepsimple_/assets/longevity/diet/diet-results-bg/supportive-foods-mobile-bg.webp and b/public/keepsimple_/assets/longevity/diet/diet-results-bg/supportive-foods-mobile-bg.webp differ diff --git a/public/keepsimple_/assets/longevity/diet/scale/scale-bg-mobile-scaled.png b/public/keepsimple_/assets/longevity/diet/scale/scale-bg-mobile-scaled.png new file mode 100644 index 0000000..170ea8a Binary files /dev/null and b/public/keepsimple_/assets/longevity/diet/scale/scale-bg-mobile-scaled.png differ diff --git a/public/keepsimple_/assets/longevity/diet/scale/scale-bg-mobile.webp b/public/keepsimple_/assets/longevity/diet/scale/scale-bg-mobile.webp new file mode 100644 index 0000000..9e5f04b Binary files /dev/null and b/public/keepsimple_/assets/longevity/diet/scale/scale-bg-mobile.webp differ diff --git a/public/keepsimple_/assets/longevity/habits/what-is-this-bg.webp b/public/keepsimple_/assets/longevity/habits/what-is-this-bg.webp new file mode 100644 index 0000000..632efc2 Binary files /dev/null and b/public/keepsimple_/assets/longevity/habits/what-is-this-bg.webp differ diff --git a/src/api/longevity/environment.ts b/src/api/longevity/environment.ts index 3e66a2e..25302b6 100644 --- a/src/api/longevity/environment.ts +++ b/src/api/longevity/environment.ts @@ -1,5 +1,5 @@ export async function getEnvironment(locale: string) { - const currentLocale = locale === 'ru' ? 'ru' : 'en'; + 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 res = await fetch(url, { diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index 2fa7a21..2f94b4e 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -52,13 +52,7 @@ const Navbar: FC = ({ handleToggleSidebar, handleClick }) => { target: '', id: 'companyManagement', }, - { - name: articles, - path: '/articles', - logo: isDarkTheme ? : , - target: '', - id: 'articles', - }, + { name: tools, path: '/tools/longevity-protocol/about-project', @@ -66,6 +60,13 @@ const Navbar: FC = ({ handleToggleSidebar, handleClick }) => { target: '', id: 'tools', }, + { + name: articles, + path: '/articles', + logo: isDarkTheme ? : , + target: '', + id: 'articles', + }, ]; return ( diff --git a/src/components/longevity/BorderedPill/BorderedPill.module.scss b/src/components/longevity/BorderedPill/BorderedPill.module.scss index 2f7b539..a5588e5 100644 --- a/src/components/longevity/BorderedPill/BorderedPill.module.scss +++ b/src/components/longevity/BorderedPill/BorderedPill.module.scss @@ -4,7 +4,7 @@ align-items: center; justify-content: center; background-color: #ffffff66; - + color: #000000d9; width: 100%; max-width: 320px; min-height: 42px; diff --git a/src/components/longevity/DietResults/DietResults.module.scss b/src/components/longevity/DietResults/DietResults.module.scss index 5ee91d8..d4c470b 100644 --- a/src/components/longevity/DietResults/DietResults.module.scss +++ b/src/components/longevity/DietResults/DietResults.module.scss @@ -90,18 +90,41 @@ @media (max-width: 965px) { .results { + padding: 0 8px; + margin: 16px 12px 16px 12px; max-width: unset; + background-image: url('/keepsimple_/assets/longevity/diet/scale/scale-bg-mobile.webp'); background-size: cover; - height: 82px; + height: unset; gap: 8px; + .tooltip { + font-size: 12px; + } + + .selected { + left: 0; + font-size: 8px; + } + .item { - max-width: 50px; - max-height: 50px; + width: unset; + height: unset; + max-width: unset; + max-height: unset; + padding: 12px 0; + + &.active { + &::after { + top: 10px; + background-size: contain; + } + } img { - max-width: 50px; - max-height: 50px; + max-width: unset; + width: 100%; + height: auto; } } } diff --git a/src/components/longevity/WeeklyWorkout/WeeklyWorkout.module.scss b/src/components/longevity/WeeklyWorkout/WeeklyWorkout.module.scss index db628c6..3cb5994 100644 --- a/src/components/longevity/WeeklyWorkout/WeeklyWorkout.module.scss +++ b/src/components/longevity/WeeklyWorkout/WeeklyWorkout.module.scss @@ -30,7 +30,7 @@ font-weight: 600; } .orangeMinutes { - color: #ffae01; + color: #df8804; } .greenMinutes { color: #4d8539; @@ -85,7 +85,7 @@ font-weight: 700; } .orangeRisk { - color: #ffae01; + color: #df8804; } .greenRisk { diff --git a/src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.module.scss b/src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.module.scss index c643048..f202848 100644 --- a/src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.module.scss +++ b/src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.module.scss @@ -1,5 +1,5 @@ .whyDoThisTooltip { - background-image: url('/keepsimple_/assets/longevity/habits/tooltip-bg.png'); + background-image: url('/keepsimple_/assets/longevity/habits/what-is-this-bg.webp'); background-size: contain; width: 700px; height: 100%; diff --git a/src/components/longevity/YourDiet/YourDiet.module.scss b/src/components/longevity/YourDiet/YourDiet.module.scss index 4806850..699d5fb 100644 --- a/src/components/longevity/YourDiet/YourDiet.module.scss +++ b/src/components/longevity/YourDiet/YourDiet.module.scss @@ -56,10 +56,30 @@ @media (max-width: 965px) { .selectedDiet { + background-size: contain; max-width: unset; + background-position: center; + margin: 0 12px; + + .yourDietHeading { + h3 { + font-size: 18px !important; + text-align: center; + } + } .wrapper { flex-direction: column; + align-items: center; + margin-top: unset; + gap: 20px; + padding: 38px 0px; + + .hasGapP { + display: flex; + justify-content: space-between; + padding-right: 20px; + } .icon { width: 100%; diff --git a/src/components/longevity/YourDiet/YourDiet.tsx b/src/components/longevity/YourDiet/YourDiet.tsx index ef7a223..4b1395e 100644 --- a/src/components/longevity/YourDiet/YourDiet.tsx +++ b/src/components/longevity/YourDiet/YourDiet.tsx @@ -42,6 +42,7 @@ const YourDiet: FC = ({ showLeftIcon={false} showRightIcon={false} isBold + className={styles.yourDietHeading} />
= ({ +20% Years of life gained!

-

+

Biological Age:{' '} -{selectedDiet.biologicalAge} year @@ -70,7 +71,7 @@ const YourDiet: FC = ({

-

+

Skin Age:{' '} -{selectedDiet.skinAge} year @@ -79,7 +80,7 @@ const YourDiet: FC = ({

-

+

Joint Age:{' '} -{selectedDiet.jointAge} year @@ -88,7 +89,7 @@ const YourDiet: FC = ({

-

+

Metabolic Age:{' '} -{selectedDiet.metabolicAge} year diff --git a/src/constants/longevity.ts b/src/constants/longevity.ts index 5c00179..c901201 100644 --- a/src/constants/longevity.ts +++ b/src/constants/longevity.ts @@ -16,7 +16,8 @@ export const scaleLevels = [ { id: 1, imagePath: scaleImgPath + 'borderline-ok-foods.png', - backgroundUrlMobile: backgroundImgPath + 'borderline-ok-mobile-bg.webp', + backgroundUrlMobile: + backgroundImgPath + 'borderline-ok-foods-mobile-bg.webp', backgroundUrl: backgroundImgPath + 'borderline-ok-foods-bg.png', biologicalAge: '0', skinAge: '0', @@ -47,7 +48,7 @@ export const scaleLevels = [ id: 4, imagePath: scaleImgPath + 'clean-nutrients.png', backgroundUrl: backgroundImgPath + 'clean-nutrients-bg.png', - backgroundUrlMobile: backgroundImgPath + 'clean-nutrients-mobile-bg.webp', + backgroundUrlMobile: backgroundImgPath + 'clean-nutrient-mobile-bg.webp', biologicalAge: '3.5', skinAge: '5.5', jointAge: '4.5', @@ -57,7 +58,7 @@ export const scaleLevels = [ id: 5, imagePath: scaleImgPath + 'metabolic-gold.png', backgroundUrl: backgroundImgPath + 'metabolic-gold-bg.png', - backgroundUrlMobile: backgroundImgPath + 'metabolic-gold-mobile-bg.webp', + backgroundUrlMobile: backgroundImgPath + 'metabolic-gold-mobile.bg.webp', biologicalAge: '5', skinAge: '7', jointAge: '6', diff --git a/src/layouts/EnvironmentLayout/EnvironmentLayout.tsx b/src/layouts/EnvironmentLayout/EnvironmentLayout.tsx index 474daad..dd9b6ea 100644 --- a/src/layouts/EnvironmentLayout/EnvironmentLayout.tsx +++ b/src/layouts/EnvironmentLayout/EnvironmentLayout.tsx @@ -31,7 +31,7 @@ const EnvironmentLayout: FC = ({ locale, data }) => { key={index} description={item?.explanation} name={item?.title} - iconUrl={`${strapiURl}${item?.icon?.data?.attributes.url}`} + iconUrl={`${strapiURl}${item?.icon?.data?.attributes?.url}`} /> ))} diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx index 1bb588f..4a63768 100644 --- a/src/layouts/Layout.tsx +++ b/src/layouts/Layout.tsx @@ -1,5 +1,12 @@ import { useRouter } from 'next/router'; -import { useEffect, useLayoutEffect, useRef, useState } from 'react'; +import { + useContext, + useEffect, + useLayoutEffect, + useRef, + useState, +} from 'react'; +import { GlobalContext } from '@components/Context/GlobalContext'; import Header from '@components/Header'; import Hero from '@components/longevity/Hero'; @@ -34,6 +41,7 @@ function pickLayer(pathname: string): LayerKey { export default function Layout({ children }: { children: React.ReactNode }) { const router = useRouter(); + const { setVideosReady, videosReady } = useContext(GlobalContext); const sectionRef = useRef(null); const canvasRef = useRef(null); @@ -223,6 +231,80 @@ export default function Layout({ children }: { children: React.ReactNode }) { }); }, [isLongevityProtocolPage]); + useEffect(() => { + if (!isLongevityProtocolPage) return; + + let cancelled = false; + setVideosReady(false); + + const keys = Object.keys(SOURCES) as LayerKey[]; + + const readyByKey: Record = {}; + keys.forEach(k => (readyByKey[k] = false)); + + const checkAll = () => { + if (cancelled) return; + const allReady = keys.every(k => readyByKey[k]); + if (allReady) setVideosReady(true); + }; + + const cleanupFns: Array<() => void> = []; + + keys.forEach(k => { + const v = videosRef.current[k]; + if (!v) return; + + const markReady = () => { + readyByKey[k] = true; + checkAll(); + }; + + if (v.readyState >= 2) { + markReady(); + return; + } + + const onCanPlay = () => markReady(); + const onError = () => markReady(); // don't deadlock if one fails + + v.addEventListener('canplay', onCanPlay, { once: true }); + v.addEventListener('error', onError, { once: true }); + + v.load?.(); + v.play?.().catch(() => {}); + + cleanupFns.push(() => { + v.removeEventListener('canplay', onCanPlay); + v.removeEventListener('error', onError); + }); + }); + + const t = window.setTimeout(() => { + if (!cancelled) setVideosReady(true); + }, 2500); + + return () => { + cancelled = true; + window.clearTimeout(t); + cleanupFns.forEach(fn => fn()); + }; + }, [isLongevityProtocolPage, setVideosReady]); + + useEffect(() => { + if (!videosReady) return; + const base = videosRef.current['default']; + if (!base) return; + + const t = base.currentTime || 0; + (Object.keys(SOURCES) as LayerKey[]).forEach(k => { + const v = videosRef.current[k]; + if (!v) return; + try { + if (v.duration) v.currentTime = t % v.duration; + } catch {} + }); + }, [videosReady]); + return ( <>

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 69a479c..0cf92a7 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; import { useRouter } from 'next/router'; import ReactGA from 'react-ga4'; import { SessionProvider } from 'next-auth/react'; @@ -37,6 +37,7 @@ function App({ Component, pageProps: { session, ...pageProps } }: TApp) { const [heroReady, setHeroReady] = useState(true); const [routeLoading, setRouteLoading] = useState(false); const [longevityTransition, setLongevityTransition] = useState(false); + const [videosReady, setVideosReady] = useState(false); const isIndexingOn = process.env.NEXT_PUBLIC_INDEXING === 'on'; const isProduction = process.env.NEXT_PUBLIC_ENV === 'prod'; @@ -257,9 +258,23 @@ function App({ Component, pageProps: { session, ...pageProps } }: TApp) { router.events.off('routeChangeComplete', onDone); router.events.off('routeChangeError', onDone); }; - }, [router]); + }, [router.events, router.asPath]); - const overlayOn = longevityTransition && (routeLoading || !heroReady); + useLayoutEffect(() => { + const initialIsLongevity = isLongevityUrl(router.asPath); + if (!initialIsLongevity) return; + + setHeroReady(false); + setRouteLoading(true); + + const id = requestAnimationFrame(() => setRouteLoading(false)); + return () => cancelAnimationFrame(id); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const isLongevityNow = isLongevityUrl(router.asPath); + const overlayOn = + isLongevityNow && (routeLoading || !heroReady || !videosReady); return ( @@ -275,6 +290,8 @@ function App({ Component, pageProps: { session, ...pageProps } }: TApp) { routeLoading, longevityTransition, setHeroReady, + setVideosReady, + videosReady, }} > {showLoader && !isSmallScreen && ( diff --git a/src/pages/tools/longevity-protocol/environment.tsx b/src/pages/tools/longevity-protocol/environment.tsx index 077af30..0cbe3f9 100644 --- a/src/pages/tools/longevity-protocol/environment.tsx +++ b/src/pages/tools/longevity-protocol/environment.tsx @@ -9,7 +9,6 @@ import SeoGenerator from '@components/SeoGenerator'; const Environment = ({ environment }) => { const router = useRouter(); const { locale } = router; - const currentLocale = locale === 'ru' ? 'ru' : 'en'; const OGTags = { ogDescription: environment['en']?.ogDescription || '', @@ -35,11 +34,11 @@ const Environment = ({ environment }) => { seoTitle: environment['en']?.Seo?.seoTitle || '', }} ogTags={OGTags} - createdDate={environment[currentLocale]?.createdAt || ''} - modifiedDate={environment[currentLocale]?.updatedAt || ''} + createdDate={environment['en']?.createdAt || ''} + modifiedDate={environment['en']?.updatedAt || ''} />