Feat/footer

src/2_widgets/FooterLayout/FooterLayout.module.scss

@@ -1,33 +1,128 @@
 @import '@styles/colors.scss';
 @import '@styles/mixins/font.scss';
 @import '@styles/mixins/media.scss';
+@import '@styles/mixins/btn';
+
+.footer {
+	display: flex;
+	flex-direction: column;
+	gap: 35px;
 
-footer {
-	grid-column: 1/3;
 	@include media($min-width: 960px) {
-		padding: 0 100px;
+		padding: 30px 100px;
 	}
 
 	@include media($max-width: 960px) {
 		padding: 0 2em 0 100px;
 	}
 }
 
-.links {
+.logoBlock {
+	display: flex;
+	gap: 20px;
+	align-items: center;
+}
+
+.logoPicture {
+	display: flex;
+	align-items: center;
+	text-decoration: none;
+	color: #202020;
+}
+
+.logoImg {
+	display: flex;
+	align-items: center;
+}
+
+.logoText {
+	display: flex;
+	gap: 12px;
+	align-items: center;
+	text-decoration: none;
+}
+
+.logoName {
+	@include font-source-sans(20px, $neutral-text-main-color, 500, 24px, 'Fredoka');
+}
+
+.logoSlogan {
+	@include font-source-sans(12px, $neutral-text-dark-color, 400, 16px, 'Fredoka');
+}
+
+.svg {
+	width: 40px;
+	height: 38px;
+}
+
+.nav {
 	display: flex;
 	flex-wrap: wrap;
+	margin: 0;
+	padding: 0;
 	list-style: none;
-	justify-content: center;
-	align-items: center;
-	gap: 14px;
-	padding: 2em;
+	justify-content: space-between;
+	align-items: flex-start;
 
 	@include media($max-width: 835px) {
 		flex-direction: column;
 	}
 }
 
+.links {
+	display: flex;
+	flex-direction: column;
+	row-gap: 16px;
+	flex-wrap: wrap;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.form {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	row-gap: 16px;
+	margin-bottom: 16px;
+}
+
+.inputGroup {
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: 16px;
+}
+
+.input {
+	width: 303px;
+	padding: 10px 20px;
+	font-size: 14px;
+	line-height: 16px;
+	border-radius: 10px;
+}
+
+.form ::placeholder {
+	font-size: 14px;
+	line-height: 16px;
+	color: $neutral-text-light-color;
+}
+
 .link,
+.label,
 .copyright {
 	@include font-source-sans(14px, $neutral-text-dark-color, 400, 16px);
 }
+
+.submitBtn {
+	@include primary-btn;
+
+	padding: 10px 24px;
+	font-size: 12px;
+	border-radius: 10px;
+}
+
+.copyright {
+	margin: 0;
+	padding: 0;
+	font-size: 12px;
+}

src/2_widgets/FooterLayout/FooterLayout.tsx

@@ -1,41 +1,124 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import SocialsList from './SocialsList/SocialsList';
 import { CustomLink } from '../../5_shared/ui';
-import { ABOUT_ROUTE, CONTACTS_ROUTE, POLICY_ROUTE, TERMS_ROUTE } from '@shared/lib/routes';
-import styles from './FooterLayout.module.scss';
+import { Input } from '../../5_shared/ui';
 
-const links = [
-	{
-		title: 'О проекте',
-		href: ABOUT_ROUTE,
-	},
-	{
-		title: 'Контакты',
-		href: CONTACTS_ROUTE,
-	},
-	{
-		title: 'Политика конфиденциальности',
-		href: POLICY_ROUTE,
-	},
-	{
-		title: 'Условия пользования',
-		href: TERMS_ROUTE,
-	},
-];
+import SvgIconLogo from '@assets/icons/logo.svg?react';
+
+import {
+	MAIN_ROUTE,
+	ABOUT_ROUTE,
+	CONTACTS_ROUTE,
+	POLICY_ROUTE,
+	TERMS_ROUTE,
+	FEEDBACK_ROUTE,
+	DPA_ROUTE,
+} from '@shared/lib/routes';
+import styles from './FooterLayout.module.scss';
 
 export default function FooterLayout() {
-	const footerLinks = links.map((link, idx) => (
-		<li key={idx}>
+	const [inputText, setInputText] = useState('');
+	const { t } = useTranslation('header');
+
+	const leftLinks = [
+		{
+			title: 'О платформе',
+			href: ABOUT_ROUTE,
+		},
+		{
+			title: 'Контакты',
+			href: CONTACTS_ROUTE,
+		},
+		{
+			title: 'Отзывы',
+			href: FEEDBACK_ROUTE,
+		},
+	];
+
+	const rightLinks = [
+		{
+			title: 'Правила и условия',
+			href: TERMS_ROUTE,
+		},
+		{
+			title: 'Политика конфиденциальности',
+			href: POLICY_ROUTE,
+		},
+		{
+			title: 'Согласие на обработку персональных данных',
+			href: DPA_ROUTE,
+		},
+	];
+
+	const footerLeftLinks = leftLinks.map((link, index) => (
+		<li key={index}>
+			<CustomLink apperance="underline" target="_blank" href={link.href} className={styles.link}>
+				{link.title}
+			</CustomLink>
+		</li>
+	));
+
+	const footerRightLinks = rightLinks.map((link, index) => (
+		<li key={index}>
 			<CustomLink apperance="underline" target="_blank" href={link.href} className={styles.link}>
 				{link.title}
 			</CustomLink>
 		</li>
 	));
 
 	return (
-		<footer>
-			<ul className={styles.links}>
-				<li className={styles.copyright}>© 2023 Linguista</li>
-				{footerLinks}
+		<footer className={styles.footer}>
+			<div className={styles.logoBlock}>
+				<CustomLink
+					href={MAIN_ROUTE}
+					target="_self"
+					className={styles.logoPicture}
+					onClick={() => console.log('click')}
+				>
+					<div className={styles.logoImg}>
+						<SvgIconLogo className={styles.svg} />
+					</div>
+				</CustomLink>
+				<CustomLink
+					href={MAIN_ROUTE}
+					target="_self"
+					className={styles.logoText}
+					onClick={() => console.log('click')}
+				>
+					<span className={styles.logoName}>{t('projectName')}</span>
+					<span className={styles.logoSlogan}>{t('projectSlogan')}</span>
+				</CustomLink>
+			</div>
+
+			<ul className={styles.nav}>
+				<li>
+					<ul className={styles.links}>{footerLeftLinks}</ul>
+				</li>
+				<li>
+					<ul className={styles.links}>{footerRightLinks}</ul>
+				</li>
+				<li>
+					<form className={styles.form}>
+						<label className={styles.label}>Нашли ошибку? – Напишите нам!</label>
+						<div className={styles.inputGroup}>
+							<Input
+								className={styles.input}
+								type="text"
+								placeholder="Сообщить об ошибке"
+								value={inputText}
+								onChange={(evt) => setInputText(evt.target.value)}
+							></Input>
+							<button className={styles.submitBtn} type="submit">
+								Отправить
+							</button>
+						</div>
+					</form>
+					<SocialsList />
+				</li>
 			</ul>
+			<p className={styles.copyright}>© 2023 Linguista. Все права защищены.</p>
 		</footer>
 	);
 }

src/2_widgets/FooterLayout/SocialsList/SocialsList.module.scss

@@ -0,0 +1,18 @@
+.socials {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+}
+
+.icon {
+	padding-right: 0;
+	padding-left: 0;
+}
+
+.svg {
+	width: 32px;
+	height: 32px;
+}

src/2_widgets/FooterLayout/SocialsList/SocialsList.tsx

@@ -0,0 +1,52 @@
+import { CustomLink } from '../../../5_shared/ui';
+import { ButtonIcon } from '../../../5_shared/ui';
+
+import SvgIconYoutube from '@assets/icons/socials/youtube.svg?react';
+import SvgIconTelegram from '@assets/icons/socials/telegram.svg?react';
+import SvgIconVk from '@assets/icons/socials/vk.svg?react';
+import SvgIconDiscord from '@assets/icons/socials/discord.svg?react';
+import SvgIconGithub from '@assets/icons/socials/github.svg?react';
+
+import styles from './SocialsList.module.scss';
+
+export default function SocialsList() {
+	return (
+		<ul className={styles.socials}>
+			<li>
+				<CustomLink apperance="regular" href="#" target="_blank">
+					<ButtonIcon className={styles.icon}>
+						<SvgIconYoutube className={styles.svg} />
+					</ButtonIcon>
+				</CustomLink>
+			</li>
+			<li>
+				<CustomLink apperance="regular" href="#" target="_blank">
+					<ButtonIcon className={styles.icon}>
+						<SvgIconTelegram className={styles.svg} />
+					</ButtonIcon>
+				</CustomLink>
+			</li>
+			<li>
+				<CustomLink apperance="regular" href="#" target="_blank">
+					<ButtonIcon className={styles.icon}>
+						<SvgIconVk className={styles.svg} />
+					</ButtonIcon>
+				</CustomLink>
+			</li>
+			<li>
+				<CustomLink apperance="regular" href="#" target="_blank">
+					<ButtonIcon className={styles.icon}>
+						<SvgIconDiscord className={styles.svg} />
+					</ButtonIcon>
+				</CustomLink>
+			</li>
+			<li>
+				<CustomLink apperance="regular" href="#" target="_blank">
+					<ButtonIcon className={styles.icon}>
+						<SvgIconGithub className={styles.svg} />
+					</ButtonIcon>
+				</CustomLink>
+			</li>
+		</ul>
+	);
+}

src/2_widgets/MainLayout/MainLayout.tsx

@@ -17,8 +17,8 @@ const MainLayout = () => {
 				<main className={styles.inner} style={{ width: resize }}>
 					<Outlet />
 				</main>
-				<FooterLayout />
 			</div>
+			<FooterLayout />
 		</>
 	);
 };

src/5_shared/lib/routes.ts

@@ -20,3 +20,5 @@ export const WORD_ROUTE = '/vocabulary/:slugWord';
 export const CONTACTS_ROUTE = '/contacts';
 export const POLICY_ROUTE = '/privacy-policy';
 export const TERMS_ROUTE = '/terms-of-use';
+export const FEEDBACK_ROUTE = '/feedback';
+export const DPA_ROUTE = 'data-processing-agreement';