From c7d13cc7f87fd44b9b0261124b4b0b86b98edb68 Mon Sep 17 00:00:00 2001
From: DenisArger <den.arger@gmail.com>
Date: Fri, 20 Dec 2024 14:54:57 +0300
Subject: [PATCH 1/9] feat: add StartPageMobile

---
 components/StartPage/StartPage.js       | 208 ------------
 components/StartPage/StartPageMobile.js | 415 ++++++++++++++++++++++++
 pages/[slug].js                         |   6 +-
 pages/index.js                          |   6 +-
 4 files changed, 425 insertions(+), 210 deletions(-)
 create mode 100644 components/StartPage/StartPageMobile.js

diff --git a/components/StartPage/StartPage.js b/components/StartPage/StartPage.js
index 425bbb34..56cd49fd 100644
--- a/components/StartPage/StartPage.js
+++ b/components/StartPage/StartPage.js
@@ -19,8 +19,6 @@ import Logo from './Logo'
 import Partners from './Partners'
 import PasswordRecovery from './PasswordRecovery'
 import Reviews from './Reviews'
-import SectionBlock from './SectionBlock'
-import SectionContainer from './SectionContainer'
 
 import Close from 'public/icons/close.svg'
 import LevelLogo from 'public/icons/level-logo-color.svg'
@@ -43,66 +41,12 @@ function StartPage({ defaultContentKey = null }) {
   const router = useRouter()
   const [contentKey, setContentKey] = useState(defaultContentKey)
 
-  const [showSections, setShowSections] = useState({
-    logo: false,
-    updates: false,
-    partners: false,
-    connect: false,
-    signIn: false,
-    download: false,
-    passwordRecovery: false,
-  })
-
-  const [blocks, setBlocks] = useState({
-    intro: { clicked: false, opacity: 'opacity-0' },
-    howItWork: { clicked: false, opacity: 'opacity-0' },
-    reviews: { clicked: false, opacity: 'opacity-0' },
-    faq: { clicked: false, opacity: 'opacity-0' },
-  })
-
-  useEffect(() => {
-    if (defaultContentKey) {
-      setShowSections((prev) => ({
-        ...prev,
-        [defaultContentKey]: true,
-      }))
-    }
-  }, [defaultContentKey])
-
-  const toggleSection = (section) => {
-    setShowSections((prev) => {
-      const isCurrentlyVisible = prev[section]
-      return {
-        logo: false,
-        updates: false,
-        partners: false,
-        connect: false,
-        signIn: false,
-        download: false,
-        passwordRecovery: false,
-        [section]: !isCurrentlyVisible,
-      }
-    })
-  }
-
   useEffect(() => {
     if (defaultContentKey) {
       setContentKey(defaultContentKey)
     }
   }, [defaultContentKey])
 
-  useEffect(() => {
-    if (defaultContentKey) {
-      setBlocks((prev) => ({
-        ...prev,
-        [defaultContentKey]: {
-          clicked: true,
-          opacity: 'opacity-100',
-        },
-      }))
-    }
-  }, [defaultContentKey])
-
   const handleContentClick = async (newContentKey) => {
     if (defaultContentKey) {
       await router.replace('/', undefined, { shallow: true, scroll: false })
@@ -256,158 +200,6 @@ function StartPage({ defaultContentKey = null }) {
           <CookiesAproove />
         </div>
       </main>
-      <main className="relative flex flex-col gap-5 p-5 text-lg font-medium md:hidden">
-        <div onClick={() => router.replace(mainLink)}>
-          <SectionBlock
-            sectionKey="logo"
-            content={<Logo t={t} />}
-            showSection={showSections.logo}
-            toggleSection={toggleSection}
-            isLogo={true}
-            label={<LevelLogo className="h-7" />}
-          />
-        </div>
-        <div className="grid grid-cols-2 gap-5 text-center">
-          {!showSections.signIn && (
-            <div className="z-20 flex items-center justify-center rounded-xl bg-th-secondary-10 p-4">
-              <SwitchLocalization />
-            </div>
-          )}
-          <div
-            scroll={false}
-            onClick={async (e) => {
-              e.preventDefault()
-              router.push(`/${contentRoutes['signIn']}`)
-            }}
-            className={`cursor-pointer rounded-xl p-5 ${
-              showSections.signIn
-                ? 'col-span-2 bg-th-secondary-10'
-                : 'bg-slate-550 text-th-text-secondary-100'
-            }`}
-          >
-            <p className={`${showSections.signIn ? 'mb-5 font-semibold' : ''}`}>
-              {showSections.signIn ? t('users:LoginToAccount') : t('users:SignIn')}
-            </p>
-            {showSections.signIn && (
-              <Login
-                handleClick={(e) => {
-                  toggleSection(
-                    showSections.signIn && showSections.connect ? 'signIn' : 'connect'
-                  )
-                }}
-              />
-            )}
-          </div>
-        </div>
-
-        <div
-          className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
-            blocks.intro.clicked ? '' : 'h-36'
-          }`}
-          onClick={() => handleContentClick('intro')}
-        >
-          <div
-            className={`absolute inset-0 bg-[url("../public/main/about-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
-              blocks.intro.clicked ? 'opacity-0' : 'opacity-100'
-            }`}
-          ></div>
-          <div className="relative z-10">
-            {blocks.intro.clicked ? (
-              <LevelIntro t={t} opacity={blocks.intro.opacity} />
-            ) : (
-              <p
-                className="text-white"
-                dangerouslySetInnerHTML={{ __html: t('MainBlocks.WhatIsLevel') }}
-              ></p>
-            )}
-          </div>
-        </div>
-        <div
-          className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
-            blocks.howItWork.clicked ? '' : 'h-36'
-          }`}
-          onClick={() => handleContentClick('howItWork')}
-        >
-          <div
-            className={`absolute inset-0 bg-[url("../public/main/inside-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
-              blocks.howItWork.clicked ? 'opacity-0' : 'opacity-100'
-            }`}
-          ></div>
-          <div className="relative z-10">
-            {blocks.howItWork.clicked ? (
-              <HowItWorks t={t} opacity={blocks.howItWork.opacity} />
-            ) : (
-              <p className="text-white">{t('MainBlocks.HowItWorks')}</p>
-            )}
-          </div>
-        </div>
-        <div
-          className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
-            blocks.reviews.clicked ? '' : 'h-36'
-          }`}
-          onClick={() => handleContentClick('reviews')}
-        >
-          <div
-            className={`absolute inset-0 bg-[url("../public/main/reviews-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
-              blocks.reviews.clicked ? 'opacity-0' : 'opacity-100'
-            }`}
-          ></div>
-          <div className="relative z-10">
-            {blocks.reviews.clicked ? (
-              <Reviews t={t} opacity={blocks.reviews.opacity} />
-            ) : (
-              <p className="text-white">{t('MainBlocks.Reviews')}</p>
-            )}
-          </div>
-        </div>
-        <div
-          className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
-            blocks.faq.clicked ? '' : 'h-36'
-          }`}
-          onClick={() => handleContentClick('faq')}
-        >
-          <div
-            className={`absolute inset-0 bg-[url("../public/main/faq-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
-              blocks.faq.clicked ? 'opacity-0' : 'opacity-100'
-            }`}
-          ></div>
-          <div className="relative z-10">
-            {blocks.faq.clicked ? (
-              <FrequentlyAskedQuestions t={t} opacity={blocks.faq.opacity} />
-            ) : (
-              <p className="text-white">{t('FAQ')}</p>
-            )}
-          </div>
-        </div>
-        <Link scroll={false} href={`/${contentRoutes['partners']}`}>
-          <SectionBlock
-            sectionKey="partners"
-            label={t('Partners')}
-            content={<Partners t={t} />}
-            showSection={showSections.partners}
-            toggleSection={toggleSection}
-          />
-        </Link>
-        <Link scroll={false} href={`/${contentRoutes['connect']}`}>
-          <SectionBlock
-            sectionKey="connect"
-            label={t('WriteToUs')}
-            content={<Feedback t={t} onClose={() => toggleSection('feedback')} />}
-            showSection={showSections.connect}
-            toggleSection={toggleSection}
-          />
-        </Link>
-        <SectionContainer
-          showSections={showSections}
-          toggleSection={toggleSection}
-          setContentKey={setContentKey}
-          t={t}
-        />
-
-        <div className="absolute bottom-0 left-1/2 z-10 block -translate-x-1/2 md:hidden">
-          <CookiesAproove />
-        </div>
-      </main>
     </>
   )
 }
diff --git a/components/StartPage/StartPageMobile.js b/components/StartPage/StartPageMobile.js
new file mode 100644
index 00000000..11b0754a
--- /dev/null
+++ b/components/StartPage/StartPageMobile.js
@@ -0,0 +1,415 @@
+import { useEffect, useState } from 'react'
+
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+import { useTranslation } from 'next-i18next'
+
+import AboutVersion from 'components/AboutVersion'
+import SwitchLocalization from 'components/SwitchLocalization'
+
+import CookiesAproove from './CookiesAproove'
+import Download from './Download'
+import Feedback from './Feedback'
+import FrequentlyAskedQuestions from './FrequentlyAskedQuestions'
+import HowItWorks from './HowItWorks'
+import LevelIntro from './LevelIntro'
+import Login from './Login'
+import Logo from './Logo'
+import Partners from './Partners'
+import PasswordRecovery from './PasswordRecovery'
+import Reviews from './Reviews'
+import SectionBlock from './SectionBlock'
+import SectionContainer from './SectionContainer'
+
+import Close from 'public/icons/close.svg'
+import LevelLogo from 'public/icons/level-logo-color.svg'
+
+const contentRoutes = {
+  signIn: 'sign-in',
+  connect: 'connect-with-us',
+  updates: 'updates',
+  partners: 'partners',
+  intro: 'what-is-level',
+  reviews: 'reviews',
+  howItWork: 'how-it-works',
+  faq: 'faq',
+  download: 'download',
+  logo: 'about',
+}
+
+function StartPageMobile({ defaultContentKey = null }) {
+  const { t } = useTranslation(['start-page', 'projects', 'users', 'common'])
+  const router = useRouter()
+  const [contentKey, setContentKey] = useState(defaultContentKey)
+
+  const [showSections, setShowSections] = useState({
+    logo: false,
+    updates: false,
+    partners: false,
+    connect: false,
+    signIn: false,
+    download: false,
+    passwordRecovery: false,
+  })
+
+  const [blocks, setBlocks] = useState({
+    intro: { clicked: false, opacity: 'opacity-0' },
+    howItWork: { clicked: false, opacity: 'opacity-0' },
+    reviews: { clicked: false, opacity: 'opacity-0' },
+    faq: { clicked: false, opacity: 'opacity-0' },
+  })
+
+  useEffect(() => {
+    if (defaultContentKey) {
+      setShowSections((prev) => ({
+        ...prev,
+        [defaultContentKey]: true,
+      }))
+    }
+  }, [defaultContentKey])
+
+  const toggleSection = (section) => {
+    setShowSections((prev) => {
+      const isCurrentlyVisible = prev[section]
+      return {
+        logo: false,
+        updates: false,
+        partners: false,
+        connect: false,
+        signIn: false,
+        download: false,
+        passwordRecovery: false,
+        [section]: !isCurrentlyVisible,
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (defaultContentKey) {
+      setContentKey(defaultContentKey)
+    }
+  }, [defaultContentKey])
+
+  useEffect(() => {
+    if (defaultContentKey) {
+      setBlocks((prev) => ({
+        ...prev,
+        [defaultContentKey]: {
+          clicked: true,
+          opacity: 'opacity-100',
+        },
+      }))
+    }
+  }, [defaultContentKey])
+
+  const handleContentClick = async (newContentKey) => {
+    if (defaultContentKey) {
+      await router.replace('/', undefined, { shallow: true, scroll: false })
+    }
+    if (contentKey === newContentKey) {
+      setContentKey(null)
+    } else {
+      setContentKey(newContentKey)
+      handleClick(newContentKey)
+    }
+  }
+
+  const contentObjects = {
+    signIn: <Login handleClick={() => handleContentClick('connect')} />,
+    connect: <Feedback t={t} onClose={() => setContentKey(null)} />,
+    updates: <AboutVersion isStartPage={true} />,
+    partners: <Partners t={t} />,
+    intro: <LevelIntro t={t} />,
+    reviews: <Reviews t={t} />,
+    howItWork: <HowItWorks t={t} />,
+    faq: <FrequentlyAskedQuestions t={t} />,
+    download: <Download t={t} />,
+    logo: <Logo t={t} />,
+    passwordRecovery: <PasswordRecovery contentKey={contentKey} />,
+  }
+  const handleClick = (contentKey) => {
+    if (contentKey && contentRoutes[contentKey]) {
+      router.replace(`/${contentRoutes[contentKey]}`, undefined, {
+        shallow: true,
+        scroll: false,
+      })
+    }
+  }
+  const mainLink = router.pathname === '/' ? `/${contentRoutes['logo']}` : '/'
+  return (
+    <>
+      <main className="relative mx-auto hidden h-[84vh] max-h-[40rem] w-full max-w-6xl px-5 text-xl font-bold md:flex lg:max-h-[40rem] lg:px-16 xl:max-h-[50rem] xl:px-20 2xl:max-h-[56.4rem] 2xl:px-0">
+        <aside className="flex w-1/4 flex-col gap-4 pr-3 xl:gap-7 xl:pr-6">
+          <Link
+            href={mainLink}
+            className="flex flex-grow cursor-pointer items-center justify-center rounded-2xl bg-white p-5 lg:p-7"
+          >
+            <LevelLogo className="" />
+          </Link>
+          <div className="z-20 flex h-[4.4rem] items-center justify-between rounded-2xl bg-th-secondary-10 p-5 text-base lg:p-7 lg:text-lg">
+            <p>{t('projects:Language')}</p>
+            <SwitchLocalization />
+          </div>
+          <Link
+            href={`/${contentRoutes['updates']}`}
+            className="h-[19.4rem] cursor-pointer rounded-2xl bg-slate-550"
+          >
+            <p className="green-two-layers z-10 h-full w-full rounded-2xl p-5 text-white after:rounded-2xl lg:p-7">
+              {t('common:Updates')}
+            </p>
+          </Link>
+          <Link
+            href={`/${contentRoutes['partners']}`}
+            className="h-[19.4rem] cursor-pointer rounded-2xl bg-white"
+          >
+            <p className="gray-two-layers z-10 h-full w-full rounded-2xl p-5 after:rounded-2xl lg:p-7">
+              {t('Partners')}
+            </p>
+          </Link>
+        </aside>
+
+        <section className="w-1/2 px-1 text-white">
+          <div className={`${contentKey ? 'hidden' : 'flex'} h-full gap-4 xl:gap-7`}>
+            <div className="flex w-1/2 flex-col justify-between gap-4 xl:gap-7">
+              <Link
+                href={`/${contentRoutes['intro']}`}
+                className="h-1/2 transform cursor-pointer rounded-2xl bg-th-secondary-200 bg-[url('../public/main/about.webp')] bg-cover bg-no-repeat p-5 grayscale transition duration-300 hover:scale-105 hover:grayscale-0 lg:p-7"
+              >
+                {t('MainBlocks.WhatIsLevel')}
+              </Link>
+              <Link
+                href={`/${contentRoutes['reviews']}`}
+                className="h-1/2 transform cursor-pointer rounded-2xl bg-th-secondary-200 bg-[url('../public/main/reviews.webp')] bg-cover bg-no-repeat p-5 grayscale transition duration-300 hover:scale-105 hover:grayscale-0 lg:p-7"
+              >
+                {t('MainBlocks.Reviews')}
+              </Link>
+            </div>
+            <div className="flex w-1/2 flex-col justify-between gap-4 xl:gap-7">
+              <Link
+                href={`/${contentRoutes['howItWork']}`}
+                className="h-1/2 transform cursor-pointer rounded-2xl bg-th-secondary-200 bg-[url('../public/main/inside.webp')] bg-cover bg-no-repeat p-5 grayscale transition duration-300 hover:scale-105 hover:grayscale-0 lg:p-7"
+              >
+                {t('MainBlocks.HowItWorks')}
+              </Link>
+
+              <Link
+                href={`/${contentRoutes['faq']}`}
+                className="h-1/2 transform cursor-pointer rounded-2xl bg-th-secondary-200 bg-[url('../public/main/faq.webp')] bg-cover bg-no-repeat p-5 grayscale transition duration-300 hover:scale-105 hover:grayscale-0 lg:p-7"
+              >
+                {t('MainBlocks.FAQ')}
+              </Link>
+            </div>
+          </div>
+          <div
+            className={`relative p-10 text-3xl ${
+              contentKey ? 'flex' : 'hidden'
+            } h-full w-full overflow-hidden rounded-2xl bg-white text-black`}
+          >
+            {contentObjects[contentKey]}
+            <Close
+              className="absolute right-9 top-10 h-6 w-6 cursor-pointer stroke-black"
+              onClick={() => {
+                setContentKey(null)
+                if (defaultContentKey) {
+                  router.replace('/', undefined, { shallow: true })
+                }
+              }}
+            />
+          </div>
+        </section>
+
+        <aside className="flex w-1/4 flex-col gap-4 pl-3 xl:gap-7 xl:pl-6">
+          <Link
+            href={`/${contentRoutes['signIn']}`}
+            className="h-32 cursor-pointer rounded-2xl bg-slate-550"
+          >
+            <p className="green-two-layers z-10 h-full w-full rounded-2xl p-5 text-th-secondary-10 after:rounded-2xl lg:p-7">
+              {t('users:SignIn')}
+            </p>
+          </Link>
+          <Link
+            href={`/${contentRoutes['connect']}`}
+            className="h-auto cursor-pointer rounded-2xl bg-th-secondary-10 p-5 lg:p-7 xl:h-32"
+          >
+            {t('WriteToUs')}
+          </Link>
+          <div className="flex-grow space-y-2 overflow-hidden rounded-2xl bg-th-secondary-10 p-3 lg:p-5 2xl:space-y-4 2xl:p-7">
+            <p className="overflow-auto text-xs font-normal 2xl:text-base">
+              {t('Verse.text')}
+            </p>
+            <p className="space-x-1 text-right text-xs font-normal uppercase 2xl:text-sm">
+              {t('Verse.Matthew')}
+            </p>
+          </div>
+
+          <Link
+            href={`/${contentRoutes['download']}`}
+            className="h-32 cursor-pointer rounded-2xl bg-slate-550"
+          >
+            <p className="green-two-layers z-10 h-full w-full rounded-2xl p-5 text-white after:rounded-2xl lg:p-7">
+              {t('common:Download')}
+            </p>
+          </Link>
+        </aside>
+        <div className="absolute bottom-0 left-1/2 z-10 hidden -translate-x-1/2 md:block">
+          <CookiesAproove />
+        </div>
+      </main>
+      <main className="relative flex flex-col gap-5 p-5 text-lg font-medium md:hidden">
+        <div onClick={() => router.replace(mainLink)}>
+          <SectionBlock
+            sectionKey="logo"
+            content={<Logo t={t} />}
+            showSection={showSections.logo}
+            toggleSection={toggleSection}
+            isLogo={true}
+            label={<LevelLogo className="h-7" />}
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-5 text-center">
+          {!showSections.signIn && (
+            <div className="z-20 flex items-center justify-center rounded-xl bg-th-secondary-10 p-4">
+              <SwitchLocalization />
+            </div>
+          )}
+          <div
+            scroll={false}
+            onClick={async (e) => {
+              e.preventDefault()
+              router.push(`/${contentRoutes['signIn']}`)
+            }}
+            className={`cursor-pointer rounded-xl p-5 ${
+              showSections.signIn
+                ? 'col-span-2 bg-th-secondary-10'
+                : 'bg-slate-550 text-th-text-secondary-100'
+            }`}
+          >
+            <p className={`${showSections.signIn ? 'mb-5 font-semibold' : ''}`}>
+              {showSections.signIn ? t('users:LoginToAccount') : t('users:SignIn')}
+            </p>
+            {showSections.signIn && (
+              <Login
+                handleClick={(e) => {
+                  toggleSection(
+                    showSections.signIn && showSections.connect ? 'signIn' : 'connect'
+                  )
+                }}
+              />
+            )}
+          </div>
+        </div>
+
+        <div
+          className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
+            blocks.intro.clicked ? '' : 'h-36'
+          }`}
+          onClick={() => handleContentClick('intro')}
+        >
+          <div
+            className={`absolute inset-0 bg-[url("../public/main/about-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
+              blocks.intro.clicked ? 'opacity-0' : 'opacity-100'
+            }`}
+          ></div>
+          <div className="relative z-10">
+            {blocks.intro.clicked ? (
+              <LevelIntro t={t} opacity={blocks.intro.opacity} />
+            ) : (
+              <p
+                className="text-white"
+                dangerouslySetInnerHTML={{ __html: t('MainBlocks.WhatIsLevel') }}
+              ></p>
+            )}
+          </div>
+        </div>
+        <div
+          className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
+            blocks.howItWork.clicked ? '' : 'h-36'
+          }`}
+          onClick={() => handleContentClick('howItWork')}
+        >
+          <div
+            className={`absolute inset-0 bg-[url("../public/main/inside-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
+              blocks.howItWork.clicked ? 'opacity-0' : 'opacity-100'
+            }`}
+          ></div>
+          <div className="relative z-10">
+            {blocks.howItWork.clicked ? (
+              <HowItWorks t={t} opacity={blocks.howItWork.opacity} />
+            ) : (
+              <p className="text-white">{t('MainBlocks.HowItWorks')}</p>
+            )}
+          </div>
+        </div>
+        <div
+          className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
+            blocks.reviews.clicked ? '' : 'h-36'
+          }`}
+          onClick={() => handleContentClick('reviews')}
+        >
+          <div
+            className={`absolute inset-0 bg-[url("../public/main/reviews-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
+              blocks.reviews.clicked ? 'opacity-0' : 'opacity-100'
+            }`}
+          ></div>
+          <div className="relative z-10">
+            {blocks.reviews.clicked ? (
+              <Reviews t={t} opacity={blocks.reviews.opacity} />
+            ) : (
+              <p className="text-white">{t('MainBlocks.Reviews')}</p>
+            )}
+          </div>
+        </div>
+        <div
+          className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
+            blocks.faq.clicked ? '' : 'h-36'
+          }`}
+          onClick={() => handleContentClick('faq')}
+        >
+          <div
+            className={`absolute inset-0 bg-[url("../public/main/faq-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
+              blocks.faq.clicked ? 'opacity-0' : 'opacity-100'
+            }`}
+          ></div>
+          <div className="relative z-10">
+            {blocks.faq.clicked ? (
+              <FrequentlyAskedQuestions t={t} opacity={blocks.faq.opacity} />
+            ) : (
+              <p className="text-white">{t('FAQ')}</p>
+            )}
+          </div>
+        </div>
+        <Link scroll={false} href={`/${contentRoutes['partners']}`}>
+          <SectionBlock
+            sectionKey="partners"
+            label={t('Partners')}
+            content={<Partners t={t} />}
+            showSection={showSections.partners}
+            toggleSection={toggleSection}
+          />
+        </Link>
+        <Link scroll={false} href={`/${contentRoutes['connect']}`}>
+          <SectionBlock
+            sectionKey="connect"
+            label={t('WriteToUs')}
+            content={<Feedback t={t} onClose={() => toggleSection('feedback')} />}
+            showSection={showSections.connect}
+            toggleSection={toggleSection}
+          />
+        </Link>
+        <SectionContainer
+          showSections={showSections}
+          toggleSection={toggleSection}
+          setContentKey={setContentKey}
+          t={t}
+        />
+
+        <div className="absolute bottom-0 left-1/2 z-10 block -translate-x-1/2 md:hidden">
+          <CookiesAproove />
+        </div>
+      </main>
+    </>
+  )
+}
+
+export default StartPageMobile
diff --git a/pages/[slug].js b/pages/[slug].js
index b2cbfa70..c45411b4 100644
--- a/pages/[slug].js
+++ b/pages/[slug].js
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
 
 import HiscoderLink from 'components/StartPage/HiscoderLink'
 import StartPage from 'components/StartPage/StartPage'
+import StartPageMobile from 'components/StartPage/StartPageMobile'
 
 import { urlGlobal } from 'utils/openGraph'
 
@@ -115,9 +116,12 @@ const SlugPage = () => {
 
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div className="flex flex-1 flex-col justify-center">
+      <div className="flex flex-1 flex-col justify-center md:block">
         <StartPage defaultContentKey={pageContent.contentKey || null} />
       </div>
+      <div className="flex flex-1 flex-col justify-center md:hidden">
+        <StartPageMobile defaultContentKey={pageContent.contentKey || null} />
+      </div>
       <HiscoderLink />
     </main>
   )
diff --git a/pages/index.js b/pages/index.js
index e2d1fb38..9fc085d6 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,6 +5,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 import HiscoderLink from 'components/StartPage/HiscoderLink'
 import StartPage from 'components/StartPage/StartPage'
+import StartPageMobile from 'components/StartPage/StartPageMobile'
 
 import { openGraph, urlGlobal } from '../utils/openGraph'
 
@@ -46,9 +47,12 @@ export default function Home() {
 
         <link rel="icon" href={metadata.icons.icon} sizes="any" />
       </Head>
-      <div className="flex flex-1 flex-col justify-center">
+      <div className="flex flex-1 flex-col justify-center md:block">
         <StartPage defaultContentKey={query?.contentKey || null} />
       </div>
+      <div className="flex flex-1 flex-col justify-center md:hidden">
+        <StartPageMobile defaultContentKey={query?.contentKey || null} />
+      </div>
       <HiscoderLink />
     </main>
   )

From 6a1ffed0620637e387240b46e7c6a845679b95f9 Mon Sep 17 00:00:00 2001
From: DenisArger <den.arger@gmail.com>
Date: Fri, 20 Dec 2024 14:57:56 +0300
Subject: [PATCH 2/9] fix: delete code for desktop version

---
 components/StartPage/StartPageMobile.js | 134 ------------------------
 1 file changed, 134 deletions(-)

diff --git a/components/StartPage/StartPageMobile.js b/components/StartPage/StartPageMobile.js
index 11b0754a..9bb6a744 100644
--- a/components/StartPage/StartPageMobile.js
+++ b/components/StartPage/StartPageMobile.js
@@ -5,11 +5,9 @@ import { useRouter } from 'next/router'
 
 import { useTranslation } from 'next-i18next'
 
-import AboutVersion from 'components/AboutVersion'
 import SwitchLocalization from 'components/SwitchLocalization'
 
 import CookiesAproove from './CookiesAproove'
-import Download from './Download'
 import Feedback from './Feedback'
 import FrequentlyAskedQuestions from './FrequentlyAskedQuestions'
 import HowItWorks from './HowItWorks'
@@ -17,12 +15,10 @@ import LevelIntro from './LevelIntro'
 import Login from './Login'
 import Logo from './Logo'
 import Partners from './Partners'
-import PasswordRecovery from './PasswordRecovery'
 import Reviews from './Reviews'
 import SectionBlock from './SectionBlock'
 import SectionContainer from './SectionContainer'
 
-import Close from 'public/icons/close.svg'
 import LevelLogo from 'public/icons/level-logo-color.svg'
 
 const contentRoutes = {
@@ -115,19 +111,6 @@ function StartPageMobile({ defaultContentKey = null }) {
     }
   }
 
-  const contentObjects = {
-    signIn: <Login handleClick={() => handleContentClick('connect')} />,
-    connect: <Feedback t={t} onClose={() => setContentKey(null)} />,
-    updates: <AboutVersion isStartPage={true} />,
-    partners: <Partners t={t} />,
-    intro: <LevelIntro t={t} />,
-    reviews: <Reviews t={t} />,
-    howItWork: <HowItWorks t={t} />,
-    faq: <FrequentlyAskedQuestions t={t} />,
-    download: <Download t={t} />,
-    logo: <Logo t={t} />,
-    passwordRecovery: <PasswordRecovery contentKey={contentKey} />,
-  }
   const handleClick = (contentKey) => {
     if (contentKey && contentRoutes[contentKey]) {
       router.replace(`/${contentRoutes[contentKey]}`, undefined, {
@@ -139,123 +122,6 @@ function StartPageMobile({ defaultContentKey = null }) {
   const mainLink = router.pathname === '/' ? `/${contentRoutes['logo']}` : '/'
   return (
     <>
-      <main className="relative mx-auto hidden h-[84vh] max-h-[40rem] w-full max-w-6xl px-5 text-xl font-bold md:flex lg:max-h-[40rem] lg:px-16 xl:max-h-[50rem] xl:px-20 2xl:max-h-[56.4rem] 2xl:px-0">
-        <aside className="flex w-1/4 flex-col gap-4 pr-3 xl:gap-7 xl:pr-6">
-          <Link
-            href={mainLink}
-            className="flex flex-grow cursor-pointer items-center justify-center rounded-2xl bg-white p-5 lg:p-7"
-          >
-            <LevelLogo className="" />
-          </Link>
-          <div className="z-20 flex h-[4.4rem] items-center justify-between rounded-2xl bg-th-secondary-10 p-5 text-base lg:p-7 lg:text-lg">
-            <p>{t('projects:Language')}</p>
-            <SwitchLocalization />
-          </div>
-          <Link
-            href={`/${contentRoutes['updates']}`}
-            className="h-[19.4rem] cursor-pointer rounded-2xl bg-slate-550"
-          >
-            <p className="green-two-layers z-10 h-full w-full rounded-2xl p-5 text-white after:rounded-2xl lg:p-7">
-              {t('common:Updates')}
-            </p>
-          </Link>
-          <Link
-            href={`/${contentRoutes['partners']}`}
-            className="h-[19.4rem] cursor-pointer rounded-2xl bg-white"
-          >
-            <p className="gray-two-layers z-10 h-full w-full rounded-2xl p-5 after:rounded-2xl lg:p-7">
-              {t('Partners')}
-            </p>
-          </Link>
-        </aside>
-
-        <section className="w-1/2 px-1 text-white">
-          <div className={`${contentKey ? 'hidden' : 'flex'} h-full gap-4 xl:gap-7`}>
-            <div className="flex w-1/2 flex-col justify-between gap-4 xl:gap-7">
-              <Link
-                href={`/${contentRoutes['intro']}`}
-                className="h-1/2 transform cursor-pointer rounded-2xl bg-th-secondary-200 bg-[url('../public/main/about.webp')] bg-cover bg-no-repeat p-5 grayscale transition duration-300 hover:scale-105 hover:grayscale-0 lg:p-7"
-              >
-                {t('MainBlocks.WhatIsLevel')}
-              </Link>
-              <Link
-                href={`/${contentRoutes['reviews']}`}
-                className="h-1/2 transform cursor-pointer rounded-2xl bg-th-secondary-200 bg-[url('../public/main/reviews.webp')] bg-cover bg-no-repeat p-5 grayscale transition duration-300 hover:scale-105 hover:grayscale-0 lg:p-7"
-              >
-                {t('MainBlocks.Reviews')}
-              </Link>
-            </div>
-            <div className="flex w-1/2 flex-col justify-between gap-4 xl:gap-7">
-              <Link
-                href={`/${contentRoutes['howItWork']}`}
-                className="h-1/2 transform cursor-pointer rounded-2xl bg-th-secondary-200 bg-[url('../public/main/inside.webp')] bg-cover bg-no-repeat p-5 grayscale transition duration-300 hover:scale-105 hover:grayscale-0 lg:p-7"
-              >
-                {t('MainBlocks.HowItWorks')}
-              </Link>
-
-              <Link
-                href={`/${contentRoutes['faq']}`}
-                className="h-1/2 transform cursor-pointer rounded-2xl bg-th-secondary-200 bg-[url('../public/main/faq.webp')] bg-cover bg-no-repeat p-5 grayscale transition duration-300 hover:scale-105 hover:grayscale-0 lg:p-7"
-              >
-                {t('MainBlocks.FAQ')}
-              </Link>
-            </div>
-          </div>
-          <div
-            className={`relative p-10 text-3xl ${
-              contentKey ? 'flex' : 'hidden'
-            } h-full w-full overflow-hidden rounded-2xl bg-white text-black`}
-          >
-            {contentObjects[contentKey]}
-            <Close
-              className="absolute right-9 top-10 h-6 w-6 cursor-pointer stroke-black"
-              onClick={() => {
-                setContentKey(null)
-                if (defaultContentKey) {
-                  router.replace('/', undefined, { shallow: true })
-                }
-              }}
-            />
-          </div>
-        </section>
-
-        <aside className="flex w-1/4 flex-col gap-4 pl-3 xl:gap-7 xl:pl-6">
-          <Link
-            href={`/${contentRoutes['signIn']}`}
-            className="h-32 cursor-pointer rounded-2xl bg-slate-550"
-          >
-            <p className="green-two-layers z-10 h-full w-full rounded-2xl p-5 text-th-secondary-10 after:rounded-2xl lg:p-7">
-              {t('users:SignIn')}
-            </p>
-          </Link>
-          <Link
-            href={`/${contentRoutes['connect']}`}
-            className="h-auto cursor-pointer rounded-2xl bg-th-secondary-10 p-5 lg:p-7 xl:h-32"
-          >
-            {t('WriteToUs')}
-          </Link>
-          <div className="flex-grow space-y-2 overflow-hidden rounded-2xl bg-th-secondary-10 p-3 lg:p-5 2xl:space-y-4 2xl:p-7">
-            <p className="overflow-auto text-xs font-normal 2xl:text-base">
-              {t('Verse.text')}
-            </p>
-            <p className="space-x-1 text-right text-xs font-normal uppercase 2xl:text-sm">
-              {t('Verse.Matthew')}
-            </p>
-          </div>
-
-          <Link
-            href={`/${contentRoutes['download']}`}
-            className="h-32 cursor-pointer rounded-2xl bg-slate-550"
-          >
-            <p className="green-two-layers z-10 h-full w-full rounded-2xl p-5 text-white after:rounded-2xl lg:p-7">
-              {t('common:Download')}
-            </p>
-          </Link>
-        </aside>
-        <div className="absolute bottom-0 left-1/2 z-10 hidden -translate-x-1/2 md:block">
-          <CookiesAproove />
-        </div>
-      </main>
       <main className="relative flex flex-col gap-5 p-5 text-lg font-medium md:hidden">
         <div onClick={() => router.replace(mainLink)}>
           <SectionBlock

From 21cd289c6dc653e31d87a3ac2157e58f18c6d670 Mon Sep 17 00:00:00 2001
From: DenisArger <den.arger@gmail.com>
Date: Fri, 20 Dec 2024 16:12:26 +0300
Subject: [PATCH 3/9] fix: edit show blocks

---
 components/StartPage/Download.js         |  2 +-
 components/StartPage/SectionBlock.js     |  2 +-
 components/StartPage/SectionContainer.js | 35 +++++++++++++++---------
 components/StartPage/StartPageMobile.js  | 24 +++++++++++++---
 4 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/components/StartPage/Download.js b/components/StartPage/Download.js
index 9654def3..d693eb8e 100644
--- a/components/StartPage/Download.js
+++ b/components/StartPage/Download.js
@@ -86,7 +86,7 @@ function Download({ t, onClose }) {
     <div className="relative flex w-full flex-col text-left">
       <p className="mb-9 hidden md:block">{t('common:Download')}</p>
       <Close
-        className="absolute -top-7 right-0 h-6 w-6 cursor-pointer stroke-black md:hidden"
+        className="absolute -top-16 right-0 h-6 w-6 cursor-pointer stroke-black md:hidden"
         onClick={onClose}
       />
       <div className="flex flex-col gap-6 overflow-y-auto text-base font-medium">
diff --git a/components/StartPage/SectionBlock.js b/components/StartPage/SectionBlock.js
index 602e7711..c4fc6746 100644
--- a/components/StartPage/SectionBlock.js
+++ b/components/StartPage/SectionBlock.js
@@ -31,7 +31,7 @@ function SectionBlock({
       className={`relative rounded-xl bg-th-secondary-10 p-5 ${
         isLogo ? 'flex justify-center' : 'text-center'
       }`}
-      // onClick={handleSectionToggle}
+      onClick={handleSectionToggle}
     >
       {showSection ? content : isLogo ? label : <p>{label}</p>}
       <Close
diff --git a/components/StartPage/SectionContainer.js b/components/StartPage/SectionContainer.js
index 3b335a92..09df1fd9 100644
--- a/components/StartPage/SectionContainer.js
+++ b/components/StartPage/SectionContainer.js
@@ -1,4 +1,3 @@
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 import AboutVersion from 'components/AboutVersion'
@@ -12,14 +11,26 @@ function SectionContainer({ showSections, toggleSection, t }) {
     router.replace('/', undefined, { shallow: true, scroll: false })
     toggleSection({ download: false, updates: false })
   }
+
+  const handleSectionClick = async (section) => {
+    // Закрываем текущий блок перед открытием нового
+    if (!showSections[section]) {
+      await router.replace('/', undefined, { shallow: true, scroll: false })
+    }
+
+    // Переключаем состояние секции
+    toggleSection({ [section]: !showSections[section] })
+
+    // Переходим к нужному маршруту
+    await router.replace(`/${section}`, undefined, { shallow: true, scroll: false })
+  }
+
   return (
     <div className="grid grid-cols-2 gap-5 text-center">
       {!showSections.updates && (
-        <Link
-          href="/download"
-          shallow
-          scroll={false}
-          className={`rounded-xl bg-th-secondary-10 p-5 ${
+        <div
+          onClick={() => handleSectionClick('download')}
+          className={`cursor-pointer rounded-xl bg-th-secondary-10 p-5 ${
             showSections.download ? 'col-span-2' : ''
           }`}
         >
@@ -27,15 +38,13 @@ function SectionContainer({ showSections, toggleSection, t }) {
             {t('common:Download')}
           </p>
           {showSections.download && <Download t={t} onClose={onClose} />}
-        </Link>
+        </div>
       )}
 
       {!showSections.download && (
-        <Link
-          href="/updates"
-          shallow
-          scroll={false}
-          className={`rounded-xl bg-th-secondary-10 p-5 ${
+        <div
+          onClick={() => handleSectionClick('updates')}
+          className={`cursor-pointer rounded-xl bg-th-secondary-10 p-5 ${
             showSections.updates ? 'col-span-2' : ''
           }`}
         >
@@ -44,7 +53,7 @@ function SectionContainer({ showSections, toggleSection, t }) {
           ) : (
             <AboutVersion isStartPage={true} onClose={onClose} />
           )}
-        </Link>
+        </div>
       )}
     </div>
   )
diff --git a/components/StartPage/StartPageMobile.js b/components/StartPage/StartPageMobile.js
index 9bb6a744..7c00d2dc 100644
--- a/components/StartPage/StartPageMobile.js
+++ b/components/StartPage/StartPageMobile.js
@@ -245,7 +245,15 @@ function StartPageMobile({ defaultContentKey = null }) {
             )}
           </div>
         </div>
-        <Link scroll={false} href={`/${contentRoutes['partners']}`}>
+        <div
+          scroll={false}
+          onClick={() =>
+            router.push(contentRoutes['partners'], undefined, {
+              shallow: true,
+              scroll: false,
+            })
+          }
+        >
           <SectionBlock
             sectionKey="partners"
             label={t('Partners')}
@@ -253,8 +261,16 @@ function StartPageMobile({ defaultContentKey = null }) {
             showSection={showSections.partners}
             toggleSection={toggleSection}
           />
-        </Link>
-        <Link scroll={false} href={`/${contentRoutes['connect']}`}>
+        </div>
+        <div
+          scroll={false}
+          onClick={() =>
+            router.push(contentRoutes['connect'], undefined, {
+              shallow: true,
+              scroll: false,
+            })
+          }
+        >
           <SectionBlock
             sectionKey="connect"
             label={t('WriteToUs')}
@@ -262,7 +278,7 @@ function StartPageMobile({ defaultContentKey = null }) {
             showSection={showSections.connect}
             toggleSection={toggleSection}
           />
-        </Link>
+        </div>
         <SectionContainer
           showSections={showSections}
           toggleSection={toggleSection}

From ede3033685546aecfb4e2483271a946cf2396ae4 Mon Sep 17 00:00:00 2001
From: DenisArger <den.arger@gmail.com>
Date: Fri, 20 Dec 2024 16:45:45 +0300
Subject: [PATCH 4/9] fix: writeToUs separate in  StartPage

---
 components/StartPage/Feedback.js        | 124 +++++++++++-------------
 components/StartPage/StartPage.js       |   7 +-
 components/StartPage/StartPageMobile.js |   9 +-
 3 files changed, 73 insertions(+), 67 deletions(-)

diff --git a/components/StartPage/Feedback.js b/components/StartPage/Feedback.js
index 25aba873..23a00103 100644
--- a/components/StartPage/Feedback.js
+++ b/components/StartPage/Feedback.js
@@ -49,74 +49,68 @@ function Feedback({ onClose }) {
   }
 
   return (
-    <div className="flex w-full flex-col gap-6 md:gap-0">
-      {isConnectWithUsPage && (
-        <p className="font-semibold md:font-bold">{t('start-page:WriteToUs')}</p>
-      )}
-
-      <div className="flex flex-grow items-center" onClick={(e) => e.stopPropagation()}>
-        <Toaster />
-        {!isSent ? (
-          <form className="flex w-full flex-col space-y-4" onSubmit={handleSubmit}>
-            <InputField
-              name="name"
-              type="text"
-              id="floating_name"
-              label={t('users:YourName')}
-              value={feedback.name}
-              isError={isError && !feedback.name}
-              onChange={handleChange}
-            />
+    <div className="flex flex-grow items-center" onClick={(e) => e.stopPropagation()}>
+      <Toaster />
+      {!isSent ? (
+        <form className="flex w-full flex-col space-y-4" onSubmit={handleSubmit}>
+          <InputField
+            name="name"
+            type="text"
+            id="floating_name"
+            label={t('users:YourName')}
+            value={feedback.name}
+            isError={isError && !feedback.name}
+            onChange={handleChange}
+          />
 
-            <InputField
-              name="email"
-              type="email"
-              id="floating_email"
-              label={t('users:Email')}
-              value={feedback.email}
-              isError={isError && !feedback.email}
-              onChange={handleChange}
-            />
+          <InputField
+            name="email"
+            type="email"
+            id="floating_email"
+            label={t('users:Email')}
+            value={feedback.email}
+            isError={isError && !feedback.email}
+            onChange={handleChange}
+          />
 
-            <InputField
-              rows="3"
-              name="message"
-              type="textarea"
-              id="floating_message"
-              label={t('users:Message')}
-              value={feedback.message}
-              isError={isError && !feedback.message}
-              onChange={handleChange}
-              className="mb-3 max-h-40 overflow-auto"
-            />
+          <InputField
+            rows="3"
+            name="message"
+            type="textarea"
+            id="floating_message"
+            label={t('users:Message')}
+            value={feedback.message}
+            isError={isError && !feedback.message}
+            onChange={handleChange}
+            className="mb-3 max-h-40 overflow-auto"
+          />
 
-            <ButtonLoading
-              type="submit"
-              isLoading={isSaving}
-              className={`relative rounded-lg px-5 py-4 text-center text-sm font-medium text-th-text-secondary-100 md:text-base ${
-                isConnectWithUsPage ? 'bg-slate-550' : 'bg-th-primary-100'
-              }`}
-            >
-              {t('users:Send')}
-            </ButtonLoading>
-            <p className="text-center text-sm font-light">
-              {t('users:ConditionOfConsent')}
-            </p>
-          </form>
-        ) : (
-          <div className="w-full text-center">
-            <p>{t('users:YourMessageSentThankYou')}</p>
-            <button
-              className={`mt-14 rounded-lg px-10 py-4 text-center text-sm font-medium text-th-text-secondary-100 md:text-base ${
-                isStartPage ? 'bg-slate-550' : 'bg-th-primary-100'
-              }`}
-              onClick={() => onClose()}
-            >
-              {t('common:Close')}
-            </button>
-          </div>
-        )}
-      </div>
+          <ButtonLoading
+            type="submit"
+            isLoading={isSaving}
+            className={`relative rounded-lg px-5 py-4 text-center text-sm font-medium text-th-text-secondary-100 md:text-base ${
+              isConnectWithUsPage ? 'bg-slate-550' : 'bg-th-primary-100'
+            }`}
+          >
+            {t('users:Send')}
+          </ButtonLoading>
+          <p className="text-center text-sm font-light">
+            {t('users:ConditionOfConsent')}
+          </p>
+        </form>
+      ) : (
+        <div className="w-full text-center">
+          <p>{t('users:YourMessageSentThankYou')}</p>
+          <button
+            className={`mt-14 rounded-lg px-10 py-4 text-center text-sm font-medium text-th-text-secondary-100 md:text-base ${
+              isStartPage ? 'bg-slate-550' : 'bg-th-primary-100'
+            }`}
+            onClick={() => onClose()}
+          >
+            {t('common:Close')}
+          </button>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/components/StartPage/StartPage.js b/components/StartPage/StartPage.js
index 56cd49fd..ea08ee0f 100644
--- a/components/StartPage/StartPage.js
+++ b/components/StartPage/StartPage.js
@@ -61,7 +61,12 @@ function StartPage({ defaultContentKey = null }) {
 
   const contentObjects = {
     signIn: <Login handleClick={() => handleContentClick('connect')} />,
-    connect: <Feedback t={t} onClose={() => setContentKey(null)} />,
+    connect: (
+      <div className="flex w-full flex-col gap-6 md:gap-0">
+        <p className="mb-4 font-semibold md:font-bold">{t('start-page:WriteToUs')}</p>
+        <Feedback t={t} onClose={() => setContentKey(null)} />
+      </div>
+    ),
     updates: <AboutVersion isStartPage={true} />,
     partners: <Partners t={t} />,
     intro: <LevelIntro t={t} />,
diff --git a/components/StartPage/StartPageMobile.js b/components/StartPage/StartPageMobile.js
index 7c00d2dc..89998e22 100644
--- a/components/StartPage/StartPageMobile.js
+++ b/components/StartPage/StartPageMobile.js
@@ -274,7 +274,14 @@ function StartPageMobile({ defaultContentKey = null }) {
           <SectionBlock
             sectionKey="connect"
             label={t('WriteToUs')}
-            content={<Feedback t={t} onClose={() => toggleSection('feedback')} />}
+            content={
+              <div className="flex w-full flex-col gap-6 md:gap-0">
+                <p className="mb-4 font-semibold md:font-bold">
+                  {t('start-page:WriteToUs')}
+                </p>
+                <Feedback t={t} onClose={() => toggleSection('feedback')} />
+              </div>
+            }
             showSection={showSections.connect}
             toggleSection={toggleSection}
           />

From 920b4b7ac7dd7036368c1a1a77c80e8ca009685b Mon Sep 17 00:00:00 2001
From: DenisArger <den.arger@gmail.com>
Date: Fri, 20 Dec 2024 16:55:34 +0300
Subject: [PATCH 5/9] style: edit style for StartPage

---
 pages/[slug].js | 13 ++++++++-----
 pages/index.js  | 13 ++++++++-----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/pages/[slug].js b/pages/[slug].js
index c45411b4..c0345b35 100644
--- a/pages/[slug].js
+++ b/pages/[slug].js
@@ -116,11 +116,14 @@ const SlugPage = () => {
 
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div className="flex flex-1 flex-col justify-center md:block">
-        <StartPage defaultContentKey={pageContent.contentKey || null} />
-      </div>
-      <div className="flex flex-1 flex-col justify-center md:hidden">
-        <StartPageMobile defaultContentKey={pageContent.contentKey || null} />
+      <div className="flex flex-1 flex-col items-center justify-center">
+        <div className="hidden md:block">
+          <StartPage defaultContentKey={pageContent.contentKey || null} />
+        </div>
+
+        <div className="block w-full md:hidden">
+          <StartPageMobile defaultContentKey={pageContent.contentKey || null} />
+        </div>
       </div>
       <HiscoderLink />
     </main>
diff --git a/pages/index.js b/pages/index.js
index 9fc085d6..a7a3b4da 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -47,11 +47,14 @@ export default function Home() {
 
         <link rel="icon" href={metadata.icons.icon} sizes="any" />
       </Head>
-      <div className="flex flex-1 flex-col justify-center md:block">
-        <StartPage defaultContentKey={query?.contentKey || null} />
-      </div>
-      <div className="flex flex-1 flex-col justify-center md:hidden">
-        <StartPageMobile defaultContentKey={query?.contentKey || null} />
+      <div className="flex flex-1 flex-col items-center justify-center">
+        <div className="hidden md:block">
+          <StartPage defaultContentKey={query?.contentKey || null} />
+        </div>
+
+        <div className="block w-full md:hidden">
+          <StartPageMobile defaultContentKey={query?.contentKey || null} />
+        </div>
       </div>
       <HiscoderLink />
     </main>

From 7e6ad8891cf632734953f9b857e3cae8ff6c5951 Mon Sep 17 00:00:00 2001
From: DenisArger <den.arger@gmail.com>
Date: Fri, 20 Dec 2024 17:24:56 +0300
Subject: [PATCH 6/9] fix: delete comments

---
 components/StartPage/SectionContainer.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/components/StartPage/SectionContainer.js b/components/StartPage/SectionContainer.js
index 09df1fd9..c600b16b 100644
--- a/components/StartPage/SectionContainer.js
+++ b/components/StartPage/SectionContainer.js
@@ -13,15 +13,12 @@ function SectionContainer({ showSections, toggleSection, t }) {
   }
 
   const handleSectionClick = async (section) => {
-    // Закрываем текущий блок перед открытием нового
     if (!showSections[section]) {
       await router.replace('/', undefined, { shallow: true, scroll: false })
     }
 
-    // Переключаем состояние секции
     toggleSection({ [section]: !showSections[section] })
 
-    // Переходим к нужному маршруту
     await router.replace(`/${section}`, undefined, { shallow: true, scroll: false })
   }
 

From 35cf211c71de9fb9dff869e00e99888b370d0ed2 Mon Sep 17 00:00:00 2001
From: DenisArger <den.arger@gmail.com>
Date: Fri, 20 Dec 2024 18:22:25 +0300
Subject: [PATCH 7/9] fix: edit sectionKey

---
 components/StartPage/StartPageMobile.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/StartPage/StartPageMobile.js b/components/StartPage/StartPageMobile.js
index 89998e22..f256bf81 100644
--- a/components/StartPage/StartPageMobile.js
+++ b/components/StartPage/StartPageMobile.js
@@ -255,7 +255,7 @@ function StartPageMobile({ defaultContentKey = null }) {
           }
         >
           <SectionBlock
-            sectionKey="partners"
+            sectionKey={contentKey}
             label={t('Partners')}
             content={<Partners t={t} />}
             showSection={showSections.partners}
@@ -272,7 +272,7 @@ function StartPageMobile({ defaultContentKey = null }) {
           }
         >
           <SectionBlock
-            sectionKey="connect"
+            sectionKey={contentKey}
             label={t('WriteToUs')}
             content={
               <div className="flex w-full flex-col gap-6 md:gap-0">

From 35f8d08312994da025fe29b97e9d52606a084049 Mon Sep 17 00:00:00 2001
From: DenisArger <den.arger@gmail.com>
Date: Mon, 23 Dec 2024 11:35:17 +0300
Subject: [PATCH 8/9] feat: add & used OneSection component

---
 components/StartPage/Feedback.js        | 25 ++++++-
 components/StartPage/Logo.js            | 24 ++++++-
 components/StartPage/OneSection.js      | 86 +++++++++++++++++++++++++
 components/StartPage/Partners.js        | 11 +++-
 components/StartPage/SectionBlock.js    | 47 --------------
 components/StartPage/StartPageMobile.js | 78 ++++++----------------
 6 files changed, 160 insertions(+), 111 deletions(-)
 create mode 100644 components/StartPage/OneSection.js
 delete mode 100644 components/StartPage/SectionBlock.js

diff --git a/components/StartPage/Feedback.js b/components/StartPage/Feedback.js
index 23a00103..d4a47273 100644
--- a/components/StartPage/Feedback.js
+++ b/components/StartPage/Feedback.js
@@ -9,7 +9,9 @@ import { toast, Toaster } from 'react-hot-toast'
 import ButtonLoading from 'components/ButtonLoading'
 import InputField from 'components/Panel/UI/InputField'
 
-function Feedback({ onClose }) {
+import Close from 'public/icons/close.svg'
+
+function Feedback({ isStartPage, onClose }) {
   const { t } = useTranslation(['start-page', 'projects', 'users', 'common'])
   const [feedback, setFeedback] = useState({ name: '', email: '', message: '' })
   const [isError, setIsError] = useState(false)
@@ -38,6 +40,10 @@ function Feedback({ onClose }) {
         toast.success(t('YourMessageHasBeenSent'))
         setIsError(false)
         setIsSent(true)
+
+        if (isStartPage) {
+          onClose()
+        }
       })
       .catch((err) => {
         console.log({ err })
@@ -51,6 +57,17 @@ function Feedback({ onClose }) {
   return (
     <div className="flex flex-grow items-center" onClick={(e) => e.stopPropagation()}>
       <Toaster />
+      {isStartPage && (
+        <div
+          className="absolute right-5 top-5 cursor-pointer"
+          onClick={() => {
+            onClose()
+          }}
+        >
+          <Close className="h-6 w-6 text-black" />
+        </div>
+      )}
+
       {!isSent ? (
         <form className="flex w-full flex-col space-y-4" onSubmit={handleSubmit}>
           <InputField
@@ -105,7 +122,11 @@ function Feedback({ onClose }) {
             className={`mt-14 rounded-lg px-10 py-4 text-center text-sm font-medium text-th-text-secondary-100 md:text-base ${
               isStartPage ? 'bg-slate-550' : 'bg-th-primary-100'
             }`}
-            onClick={() => onClose()}
+            onClick={() => {
+              if (!isStartPage) {
+                onClose()
+              }
+            }}
           >
             {t('common:Close')}
           </button>
diff --git a/components/StartPage/Logo.js b/components/StartPage/Logo.js
index 7288d6aa..7140179d 100644
--- a/components/StartPage/Logo.js
+++ b/components/StartPage/Logo.js
@@ -1,14 +1,34 @@
+import { useState } from 'react'
+
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
+import Close from 'public/icons/close.svg'
 import GlokasLogo from 'public/icons/glokas-logo.svg'
 
-function Logo({ t }) {
+function Logo({ isMobilePage, t }) {
   const { locale } = useRouter()
   const isRuLocale = locale === 'ru'
+
+  const [isOpen, setIsOpen] = useState(true)
+
+  const handleClose = () => {
+    setIsOpen(false)
+  }
+
+  if (!isOpen) return null
+
   return (
     <div className="flex w-full flex-col gap-6">
-      <p className="mr-10 font-semibold md:font-bold">{t('LogoHeader')}</p>
+      <div className="relative">
+        <p className="mr-10 font-semibold md:font-bold">{t('LogoHeader')}</p>
+        {isMobilePage && (
+          <Close
+            onClick={handleClose}
+            className="absolute right-0 top-0 h-6 w-6 cursor-pointer"
+          />
+        )}
+      </div>
       <div
         className={`flex w-full flex-col gap-6 overflow-auto pr-5 text-sm md:${
           isRuLocale ? 'text-sm' : 'text-base'
diff --git a/components/StartPage/OneSection.js b/components/StartPage/OneSection.js
new file mode 100644
index 00000000..f1680aa9
--- /dev/null
+++ b/components/StartPage/OneSection.js
@@ -0,0 +1,86 @@
+import { useRouter } from 'next/router'
+
+import Feedback from './Feedback'
+import Logo from './Logo'
+import Partners from './Partners'
+
+import Close from 'public/icons/close.svg'
+
+function OneSection({ showSections, toggleSection, label, logo, t }) {
+  const router = useRouter()
+  const onClose = () => {
+    router.replace('/', undefined, { shallow: true, scroll: false })
+    toggleSection({ partners: false, connect: false })
+  }
+
+  const handleSectionClick = async (section) => {
+    const sectionKey =
+      section === 'connect-with-us' ? 'connect' : section === 'about' ? 'logo' : section
+
+    if (showSections[sectionKey]) {
+      toggleSection({ [sectionKey]: false })
+      await router.replace('/', undefined, { shallow: true, scroll: false })
+    } else {
+      await router.replace('/', undefined, { shallow: true, scroll: false })
+      toggleSection({ [sectionKey]: true })
+      await router.replace(`/${section}`, undefined, { shallow: true, scroll: false })
+    }
+  }
+
+  const renderSectionContent = () => {
+    if (label === t('Partners')) {
+      return (
+        <div
+          onClick={() => handleSectionClick('partners')}
+          className={`cursor-pointer rounded-xl bg-th-secondary-10 p-5 text-center ${
+            showSections.partners ? 'col-span-2' : ''
+          }`}
+        >
+          {!showSections.partners && (
+            <p className={`${showSections.partners ? 'font-semibold' : ''}`}>{label}</p>
+          )}
+          {showSections.partners && <Partners t={t} onClose={onClose} />}
+        </div>
+      )
+    }
+
+    if (label === t('WriteToUs')) {
+      return (
+        <div
+          onClick={() => handleSectionClick('connect-with-us')}
+          className={`cursor-pointer rounded-xl bg-th-secondary-10 p-5 text-center ${
+            showSections.connect ? 'col-span-2' : ''
+          }`}
+        >
+          <p className={`${showSections.connect ? 'pb-10 font-semibold' : ''}`}>
+            {label}
+          </p>
+
+          {showSections.connect && <Feedback isStartPage={true} onClose={onClose} />}
+        </div>
+      )
+    }
+
+    if (label === 'logo') {
+      return (
+        <div
+          onClick={() => handleSectionClick('about')}
+          className={`flex cursor-pointer justify-center rounded-xl bg-th-secondary-10 p-5`}
+        >
+          {!showSections.logo && <p>{logo}</p>}
+          {showSections.logo && <Logo t={t} isMobilePage={true} onClose={onClose} />}
+        </div>
+      )
+    }
+
+    return null
+  }
+
+  return (
+    <div className="relative rounded-xl bg-th-secondary-10 p-0">
+      {renderSectionContent()}
+    </div>
+  )
+}
+
+export default OneSection
diff --git a/components/StartPage/Partners.js b/components/StartPage/Partners.js
index f1d11851..cf2e660b 100644
--- a/components/StartPage/Partners.js
+++ b/components/StartPage/Partners.js
@@ -1,6 +1,8 @@
 import Image from 'next/image'
 import Link from 'next/link'
 
+import Close from 'public/icons/close.svg'
+
 const partners = [
   {
     name: 'Unfolding Word',
@@ -32,9 +34,14 @@ const partners = [
   },
 ]
 
-function Partners({ t }) {
+function Partners({ t, onClose }) {
   return (
-    <div className="flex w-full flex-col gap-6 md:gap-14">
+    <div className="relative flex w-full flex-col gap-6 md:gap-14">
+      <Close
+        className="absolute right-0 top-0 h-6 w-6 cursor-pointer stroke-black md:hidden"
+        onClick={onClose}
+      />
+
       <p className="font-semibold md:font-bold">{t('Partners')}</p>
       <div className="grid grid-cols-2 gap-3">
         {partners.map((partner) => (
diff --git a/components/StartPage/SectionBlock.js b/components/StartPage/SectionBlock.js
deleted file mode 100644
index c4fc6746..00000000
--- a/components/StartPage/SectionBlock.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useRouter } from 'next/router'
-
-import Close from 'public/icons/close.svg'
-
-function SectionBlock({
-  sectionKey,
-  label,
-  content,
-  showSection,
-  toggleSection,
-  isLogo = false,
-}) {
-  const router = useRouter()
-
-  const updateRoute = async () => {
-    await router.replace('/', undefined, { shallow: true, scroll: false })
-  }
-
-  const handleSectionToggle = async () => {
-    await updateRoute()
-    toggleSection(sectionKey)
-  }
-
-  const handleCloseClick = async (e) => {
-    e.stopPropagation()
-    await updateRoute()
-  }
-
-  return (
-    <div
-      className={`relative rounded-xl bg-th-secondary-10 p-5 ${
-        isLogo ? 'flex justify-center' : 'text-center'
-      }`}
-      onClick={handleSectionToggle}
-    >
-      {showSection ? content : isLogo ? label : <p>{label}</p>}
-      <Close
-        onClick={handleCloseClick}
-        className={`absolute right-5 top-5 h-6 w-6 cursor-pointer stroke-black ${
-          showSection ? '' : 'hidden'
-        }`}
-      />
-    </div>
-  )
-}
-
-export default SectionBlock
diff --git a/components/StartPage/StartPageMobile.js b/components/StartPage/StartPageMobile.js
index f256bf81..11dff076 100644
--- a/components/StartPage/StartPageMobile.js
+++ b/components/StartPage/StartPageMobile.js
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react'
 
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 import { useTranslation } from 'next-i18next'
@@ -8,15 +7,12 @@ import { useTranslation } from 'next-i18next'
 import SwitchLocalization from 'components/SwitchLocalization'
 
 import CookiesAproove from './CookiesAproove'
-import Feedback from './Feedback'
 import FrequentlyAskedQuestions from './FrequentlyAskedQuestions'
 import HowItWorks from './HowItWorks'
 import LevelIntro from './LevelIntro'
 import Login from './Login'
-import Logo from './Logo'
-import Partners from './Partners'
+import OneSection from './OneSection'
 import Reviews from './Reviews'
-import SectionBlock from './SectionBlock'
 import SectionContainer from './SectionContainer'
 
 import LevelLogo from 'public/icons/level-logo-color.svg'
@@ -119,20 +115,16 @@ function StartPageMobile({ defaultContentKey = null }) {
       })
     }
   }
-  const mainLink = router.pathname === '/' ? `/${contentRoutes['logo']}` : '/'
   return (
     <>
       <main className="relative flex flex-col gap-5 p-5 text-lg font-medium md:hidden">
-        <div onClick={() => router.replace(mainLink)}>
-          <SectionBlock
-            sectionKey="logo"
-            content={<Logo t={t} />}
-            showSection={showSections.logo}
-            toggleSection={toggleSection}
-            isLogo={true}
-            label={<LevelLogo className="h-7" />}
-          />
-        </div>
+        <OneSection
+          showSections={showSections}
+          label={t('logo')}
+          logo={<LevelLogo className="h-7" />}
+          toggleSection={toggleSection}
+          t={t}
+        />
         <div className="grid grid-cols-2 gap-5 text-center">
           {!showSections.signIn && (
             <div className="z-20 flex items-center justify-center rounded-xl bg-th-secondary-10 p-4">
@@ -245,54 +237,24 @@ function StartPageMobile({ defaultContentKey = null }) {
             )}
           </div>
         </div>
-        <div
-          scroll={false}
-          onClick={() =>
-            router.push(contentRoutes['partners'], undefined, {
-              shallow: true,
-              scroll: false,
-            })
-          }
-        >
-          <SectionBlock
-            sectionKey={contentKey}
-            label={t('Partners')}
-            content={<Partners t={t} />}
-            showSection={showSections.partners}
-            toggleSection={toggleSection}
-          />
-        </div>
-        <div
-          scroll={false}
-          onClick={() =>
-            router.push(contentRoutes['connect'], undefined, {
-              shallow: true,
-              scroll: false,
-            })
-          }
-        >
-          <SectionBlock
-            sectionKey={contentKey}
-            label={t('WriteToUs')}
-            content={
-              <div className="flex w-full flex-col gap-6 md:gap-0">
-                <p className="mb-4 font-semibold md:font-bold">
-                  {t('start-page:WriteToUs')}
-                </p>
-                <Feedback t={t} onClose={() => toggleSection('feedback')} />
-              </div>
-            }
-            showSection={showSections.connect}
-            toggleSection={toggleSection}
-          />
-        </div>
+        <OneSection
+          showSections={showSections}
+          label={t('Partners')}
+          toggleSection={toggleSection}
+          t={t}
+        />
+        <OneSection
+          showSections={showSections}
+          label={t('WriteToUs')}
+          toggleSection={toggleSection}
+          t={t}
+        />
         <SectionContainer
           showSections={showSections}
           toggleSection={toggleSection}
           setContentKey={setContentKey}
           t={t}
         />
-
         <div className="absolute bottom-0 left-1/2 z-10 block -translate-x-1/2 md:hidden">
           <CookiesAproove />
         </div>

From ff0f9c3f414379a02462c4a365274bac97082369 Mon Sep 17 00:00:00 2001
From: DenisArger <den.arger@gmail.com>
Date: Mon, 23 Dec 2024 16:36:12 +0300
Subject: [PATCH 9/9] fix: delete fragment

---
 components/StartPage/StartPageMobile.js | 256 ++++++++++++------------
 1 file changed, 127 insertions(+), 129 deletions(-)

diff --git a/components/StartPage/StartPageMobile.js b/components/StartPage/StartPageMobile.js
index 11dff076..f4499581 100644
--- a/components/StartPage/StartPageMobile.js
+++ b/components/StartPage/StartPageMobile.js
@@ -116,150 +116,148 @@ function StartPageMobile({ defaultContentKey = null }) {
     }
   }
   return (
-    <>
-      <main className="relative flex flex-col gap-5 p-5 text-lg font-medium md:hidden">
-        <OneSection
-          showSections={showSections}
-          label={t('logo')}
-          logo={<LevelLogo className="h-7" />}
-          toggleSection={toggleSection}
-          t={t}
-        />
-        <div className="grid grid-cols-2 gap-5 text-center">
-          {!showSections.signIn && (
-            <div className="z-20 flex items-center justify-center rounded-xl bg-th-secondary-10 p-4">
-              <SwitchLocalization />
-            </div>
-          )}
-          <div
-            scroll={false}
-            onClick={async (e) => {
-              e.preventDefault()
-              router.push(`/${contentRoutes['signIn']}`)
-            }}
-            className={`cursor-pointer rounded-xl p-5 ${
-              showSections.signIn
-                ? 'col-span-2 bg-th-secondary-10'
-                : 'bg-slate-550 text-th-text-secondary-100'
-            }`}
-          >
-            <p className={`${showSections.signIn ? 'mb-5 font-semibold' : ''}`}>
-              {showSections.signIn ? t('users:LoginToAccount') : t('users:SignIn')}
-            </p>
-            {showSections.signIn && (
-              <Login
-                handleClick={(e) => {
-                  toggleSection(
-                    showSections.signIn && showSections.connect ? 'signIn' : 'connect'
-                  )
-                }}
-              />
-            )}
+    <main className="relative flex flex-col gap-5 p-5 text-lg font-medium md:hidden">
+      <OneSection
+        showSections={showSections}
+        label={t('logo')}
+        logo={<LevelLogo className="h-7" />}
+        toggleSection={toggleSection}
+        t={t}
+      />
+      <div className="grid grid-cols-2 gap-5 text-center">
+        {!showSections.signIn && (
+          <div className="z-20 flex items-center justify-center rounded-xl bg-th-secondary-10 p-4">
+            <SwitchLocalization />
           </div>
-        </div>
-
+        )}
         <div
-          className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
-            blocks.intro.clicked ? '' : 'h-36'
+          scroll={false}
+          onClick={async (e) => {
+            e.preventDefault()
+            router.push(`/${contentRoutes['signIn']}`)
+          }}
+          className={`cursor-pointer rounded-xl p-5 ${
+            showSections.signIn
+              ? 'col-span-2 bg-th-secondary-10'
+              : 'bg-slate-550 text-th-text-secondary-100'
           }`}
-          onClick={() => handleContentClick('intro')}
         >
-          <div
-            className={`absolute inset-0 bg-[url("../public/main/about-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
-              blocks.intro.clicked ? 'opacity-0' : 'opacity-100'
-            }`}
-          ></div>
-          <div className="relative z-10">
-            {blocks.intro.clicked ? (
-              <LevelIntro t={t} opacity={blocks.intro.opacity} />
-            ) : (
-              <p
-                className="text-white"
-                dangerouslySetInnerHTML={{ __html: t('MainBlocks.WhatIsLevel') }}
-              ></p>
-            )}
-          </div>
+          <p className={`${showSections.signIn ? 'mb-5 font-semibold' : ''}`}>
+            {showSections.signIn ? t('users:LoginToAccount') : t('users:SignIn')}
+          </p>
+          {showSections.signIn && (
+            <Login
+              handleClick={(e) => {
+                toggleSection(
+                  showSections.signIn && showSections.connect ? 'signIn' : 'connect'
+                )
+              }}
+            />
+          )}
         </div>
+      </div>
+
+      <div
+        className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
+          blocks.intro.clicked ? '' : 'h-36'
+        }`}
+        onClick={() => handleContentClick('intro')}
+      >
         <div
-          className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
-            blocks.howItWork.clicked ? '' : 'h-36'
+          className={`absolute inset-0 bg-[url("../public/main/about-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
+            blocks.intro.clicked ? 'opacity-0' : 'opacity-100'
           }`}
-          onClick={() => handleContentClick('howItWork')}
-        >
-          <div
-            className={`absolute inset-0 bg-[url("../public/main/inside-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
-              blocks.howItWork.clicked ? 'opacity-0' : 'opacity-100'
-            }`}
-          ></div>
-          <div className="relative z-10">
-            {blocks.howItWork.clicked ? (
-              <HowItWorks t={t} opacity={blocks.howItWork.opacity} />
-            ) : (
-              <p className="text-white">{t('MainBlocks.HowItWorks')}</p>
-            )}
-          </div>
+        ></div>
+        <div className="relative z-10">
+          {blocks.intro.clicked ? (
+            <LevelIntro t={t} opacity={blocks.intro.opacity} />
+          ) : (
+            <p
+              className="text-white"
+              dangerouslySetInnerHTML={{ __html: t('MainBlocks.WhatIsLevel') }}
+            ></p>
+          )}
         </div>
+      </div>
+      <div
+        className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
+          blocks.howItWork.clicked ? '' : 'h-36'
+        }`}
+        onClick={() => handleContentClick('howItWork')}
+      >
         <div
-          className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
-            blocks.reviews.clicked ? '' : 'h-36'
+          className={`absolute inset-0 bg-[url("../public/main/inside-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
+            blocks.howItWork.clicked ? 'opacity-0' : 'opacity-100'
           }`}
-          onClick={() => handleContentClick('reviews')}
-        >
-          <div
-            className={`absolute inset-0 bg-[url("../public/main/reviews-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
-              blocks.reviews.clicked ? 'opacity-0' : 'opacity-100'
-            }`}
-          ></div>
-          <div className="relative z-10">
-            {blocks.reviews.clicked ? (
-              <Reviews t={t} opacity={blocks.reviews.opacity} />
-            ) : (
-              <p className="text-white">{t('MainBlocks.Reviews')}</p>
-            )}
-          </div>
+        ></div>
+        <div className="relative z-10">
+          {blocks.howItWork.clicked ? (
+            <HowItWorks t={t} opacity={blocks.howItWork.opacity} />
+          ) : (
+            <p className="text-white">{t('MainBlocks.HowItWorks')}</p>
+          )}
         </div>
+      </div>
+      <div
+        className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
+          blocks.reviews.clicked ? '' : 'h-36'
+        }`}
+        onClick={() => handleContentClick('reviews')}
+      >
         <div
-          className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
-            blocks.faq.clicked ? '' : 'h-36'
+          className={`absolute inset-0 bg-[url("../public/main/reviews-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
+            blocks.reviews.clicked ? 'opacity-0' : 'opacity-100'
           }`}
-          onClick={() => handleContentClick('faq')}
-        >
-          <div
-            className={`absolute inset-0 bg-[url("../public/main/faq-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
-              blocks.faq.clicked ? 'opacity-0' : 'opacity-100'
-            }`}
-          ></div>
-          <div className="relative z-10">
-            {blocks.faq.clicked ? (
-              <FrequentlyAskedQuestions t={t} opacity={blocks.faq.opacity} />
-            ) : (
-              <p className="text-white">{t('FAQ')}</p>
-            )}
-          </div>
+        ></div>
+        <div className="relative z-10">
+          {blocks.reviews.clicked ? (
+            <Reviews t={t} opacity={blocks.reviews.opacity} />
+          ) : (
+            <p className="text-white">{t('MainBlocks.Reviews')}</p>
+          )}
         </div>
-        <OneSection
-          showSections={showSections}
-          label={t('Partners')}
-          toggleSection={toggleSection}
-          t={t}
-        />
-        <OneSection
-          showSections={showSections}
-          label={t('WriteToUs')}
-          toggleSection={toggleSection}
-          t={t}
-        />
-        <SectionContainer
-          showSections={showSections}
-          toggleSection={toggleSection}
-          setContentKey={setContentKey}
-          t={t}
-        />
-        <div className="absolute bottom-0 left-1/2 z-10 block -translate-x-1/2 md:hidden">
-          <CookiesAproove />
+      </div>
+      <div
+        className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
+          blocks.faq.clicked ? '' : 'h-36'
+        }`}
+        onClick={() => handleContentClick('faq')}
+      >
+        <div
+          className={`absolute inset-0 bg-[url("../public/main/faq-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
+            blocks.faq.clicked ? 'opacity-0' : 'opacity-100'
+          }`}
+        ></div>
+        <div className="relative z-10">
+          {blocks.faq.clicked ? (
+            <FrequentlyAskedQuestions t={t} opacity={blocks.faq.opacity} />
+          ) : (
+            <p className="text-white">{t('FAQ')}</p>
+          )}
         </div>
-      </main>
-    </>
+      </div>
+      <OneSection
+        showSections={showSections}
+        label={t('Partners')}
+        toggleSection={toggleSection}
+        t={t}
+      />
+      <OneSection
+        showSections={showSections}
+        label={t('WriteToUs')}
+        toggleSection={toggleSection}
+        t={t}
+      />
+      <SectionContainer
+        showSections={showSections}
+        toggleSection={toggleSection}
+        setContentKey={setContentKey}
+        t={t}
+      />
+      <div className="absolute bottom-0 left-1/2 z-10 block -translate-x-1/2 md:hidden">
+        <CookiesAproove />
+      </div>
+    </main>
   )
 }