YH-729: added cookie warning to landing page (#438)

* YH-729: added cookie warning to landing page

* YH-729: fixed styles and added Text according to review

Author: DarLaIl

Diff for: public/locales/ru/landing.json

@@ -79,6 +79,11 @@
       "second": "Определите свой текущий уровень и выявите пробелы в знаниях для более целенаправленного обучения или подготовки к поиску работы."
     }
   },
+  "cookies": {
+    "text": "Этот сайт использует файлы cookie для улучшения пользовательского опыта. Продолжая пользоваться сайтом вы даёте согласие на использование файлов cookie.",
+    "link": "Подробнее",
+    "agree.button": "Согласиться"
+  },
   "footer": {
     "slogan": "Выбери, каким будет IT завтра, вместе c нами",
     "about": "YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.",

Diff for: src/app/layouts/LandingLayout/ui/LandingLayout.tsx

@@ -1,6 +1,7 @@
 import { Suspense } from 'react';
 import { Outlet } from 'react-router-dom';
 
+import { CookiesWarning } from '@/widgets/Landing/CookiesWarningBlock';
 import { Footer } from '@/widgets/Landing/Footer';
 import { Header } from '@/widgets/Landing/Header';
 
@@ -16,6 +17,7 @@ export const LandingLayout = () => {
 				</Suspense>
 			</div>
 			<Footer />
+			<CookiesWarning />
 		</div>
 	);
 };

Diff for: src/shared/config/i18n/i18nTranslations.ts

@@ -490,6 +490,9 @@ export enum Landing {
 	PROGRESS_SUBTITLE = 'progress.subtitle',
 	PROGRESS_ADVANTAGES_FIRST = 'progress.advantages.first',
 	PROGRESS_ADVANTAGES_SECOND = 'progress.advantages.second',
+	COOKIES_TEXT = 'cookies.text',
+	COOKIES_LINK = 'cookies.link',
+	COOKIES_AGREE = 'cookies.agree.button',
 	FOOTER_SLOGAN = 'footer.slogan',
 	FOOTER_ABOUT = 'footer.about',
 	FOOTER_DOCS = 'footer.docs',

Diff for: src/widgets/Landing/CookiesWarningBlock/index.ts

@@ -0,0 +1 @@
+export { CookiesWarning } from './ui/CookiesWarning';

Diff for: src/widgets/Landing/CookiesWarningBlock/ui/CookiesWarning.module.css

@@ -0,0 +1,67 @@
+.wrapper {
+  position: fixed;
+  bottom: 0;
+  z-index: 1000;
+  gap: 10px;
+  margin: 20px;
+  padding: 24px;
+  width: 90%; 
+  max-width: 1120px; 
+  min-height: 96px;
+  box-shadow: 0 4px 10px 0 rgba(106 99 118 0.10);
+  border-radius: 24px;
+  background-color: var(--color-white-900);
+}
+
+.cookie-wrapper{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  width: 100%; 
+}
+
+.text {
+  width: 773px;
+}
+
+.link{
+  display: inline;
+}
+
+.btn{
+  flex-shrink: 0;
+  width: 256px;
+  font-size: var(--font-size-p-l);
+}
+
+@media (width < 1024px) {
+  .wrapper {
+    max-width: 708px;
+    min-height: 124px;
+  }
+
+  .btn{
+    width: 170px;
+  }
+}
+
+@media (width <= 768px) {
+  .wrapper {
+    right: 0;
+    left: 0;
+    margin: 20px auto;
+    max-width: 328px;
+    min-height: auto;
+  }
+  
+  .text {
+    width: 280px;
+  }
+
+  .cookie-wrapper{
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+}

Diff for: src/widgets/Landing/CookiesWarningBlock/ui/CookiesWarning.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+
+import { i18Namespace } from '@/shared/config/i18n';
+import { Landing } from '@/shared/config/i18n/i18nTranslations';
+import { Button } from '@/shared/ui/Button';
+import { Text } from '@/shared/ui/Text';
+
+import styles from './CookiesWarning.module.css';
+
+const createPortalRoot = () => {
+	const cookieRoot = document.createElement('div');
+	cookieRoot.setAttribute('id', 'cookie-root');
+
+	return cookieRoot;
+};
+
+export const CookiesWarning = () => {
+	const { t } = useTranslation(i18Namespace.landing);
+
+	const portalRootRef = useRef(document.getElementById('cookie-root') || createPortalRoot());
+	const [isAgreed, setIsAgreed] = useState(false);
+
+	useEffect(() => {
+		if (!isAgreed) {
+			document.querySelector('body')!.appendChild(portalRootRef.current);
+			const portal = portalRootRef.current;
+
+			return () => {
+				portal.remove();
+			};
+		}
+	}, [isAgreed]);
+
+	const handleClick = () => {
+		setIsAgreed(true);
+	};
+
+	return createPortal(
+		<div role="alert" className={styles.wrapper}>
+			<div className={styles['cookie-wrapper']}>
+				<Text className={styles.text} variant="body3" color="black-700">
+					{t(Landing.COOKIES_TEXT)}{' '}
+					<a
+						rel="noopener noreferrer"
+						href="https://docs.google.com/document/d/19JvySToaMm3pkohGkHwqhJjGl3IzldIc3qnQpAoVFVc/edit?tab=t.0#heading=h.gjdgxs"
+						target="_blank"
+					>
+						<Text className={styles.link} variant="body3" color="purple-700">
+							{t(Landing.COOKIES_LINK)}
+						</Text>
+					</a>
+				</Text>
+				<Button className={styles.btn} variant="primary" onClick={handleClick}>
+					{t(Landing.COOKIES_AGREE)}
+				</Button>
+			</div>
+		</div>,
+		portalRootRef.current,
+	);
+};