Refactor start page

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">

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 })
@@ -49,74 +55,83 @@ 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 />
+      {isStartPage && (
+        <div
+          className="absolute right-5 top-5 cursor-pointer"
+          onClick={() => {
+            onClose()
+          }}
+        >
+          <Close className="h-6 w-6 text-black" />
+        </div>
       )}
 
-      <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
-              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>
+      {!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
+            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={() => {
+              if (!isStartPage) {
+                onClose()
+              }
+            }}
+          >
+            {t('common:Close')}
+          </button>
+        </div>
+      )}
     </div>
   )
 }

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'

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

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) => (