Merge pull request #94 from py-psychological-help/feature/main-page-m…

…obile feat: feat mobile main page, fix main page styles
py-psychological-help · Apr 22, 2024 · b53d146 · b53d146
2 parents 25a05dd + 7c3466d
commit b53d146
Show file tree

Hide file tree

Showing 35 changed files with 1,251 additions and 744 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
 		"react-hook-form": "^7.49.2",
 		"react-icons-kit": "^2.0.0",
 		"react-redux": "^9.0.4",
+		"react-responsive": "^10.0.0",
 		"react-router-dom": "^6.14.1",
 		"react-scripts": "5.0.1",
 		"sass": "^1.62.1",

diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -1,30 +1,66 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { useSelector } from 'react-redux';
-import { NavLink } from 'react-router-dom';
+import { useMediaQuery } from 'react-responsive';
+import { Link, NavLink } from 'react-router-dom';
 import styles from './Footer.module.scss';
-import Logo from '../Logo/Logo';
 
 const Footer = memo(() => {
 	const isLoggedIn = useSelector((state) => state.user.userData);
+	const isMobile = useMediaQuery({
+		query: '(max-width: 375px)',
+	});
+
+	if (isMobile) {
+		return (
+			<footer className={styles.footer}>
+				<nav className={styles.footerNav}>
+					<div className={styles.navLinks}>
+						<NavLink to="/#aboutSection" className={styles.navLink}>
+							О проекте
+						</NavLink>
+						<NavLink
+							to="/#howItWorksSection"
+							className={styles.navLink}
+						>
+							Как это работает
+						</NavLink>
+						<NavLink
+							to={isLoggedIn ? '/account-chat' : '/welcome'}
+							className={styles.navLink}
+						>
+							Психологам
+						</NavLink>
+						<NavLink to="/#faqSection" className={styles.navLink}>
+							Вопросы
+						</NavLink>
+					</div>
+				</nav>
+				<div className={styles.footerCopyright}>
+					<p className={styles.copyRight}>
+						&copy; 2024 Давай поговорим
+					</p>
+					<Link className={styles.privacyLink} to="/privacy-policy">
+						Политика конфиденциальности
+					</Link>
+				</div>
+			</footer>
+		);
+	}
 
 	return (
-		<section className={styles.footer}>
-			{/* <div className={styles.copyRightBlock}> */}
+		<footer className={styles.footer}>
 			<p className={styles.copyRight}>&copy; 2024 Давай поговорим</p>
-			{/* </div> */}
 			<nav className={styles.footerNav}>
 				<div className={styles.navLinks}>
 					<NavLink to="/#aboutSection" className={styles.navLink}>
 						О проекте
 					</NavLink>
-
 					<NavLink
 						to="/#howItWorksSection"
 						className={styles.navLink}
 					>
 						Как это работает
 					</NavLink>
-
 					<NavLink
 						to={isLoggedIn ? '/account-chat' : '/welcome'}
 						className={styles.navLink}
@@ -37,7 +73,6 @@ const Footer = memo(() => {
 							Вопросы
 						</NavLink>
 					)}
-
 					<NavLink
 						to={isLoggedIn ? '/welcome' : '/signin'}
 						className={styles.navLink}
@@ -55,7 +90,7 @@ const Footer = memo(() => {
 					</form>
 				</div>
 			</nav>
-		</section>
+		</footer>
 	);
 });
 

diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
@@ -6,92 +6,139 @@
 	justify-content: space-between;
 	align-items: center;
 	background-color: rgba(255, 255, 255, 1);
+}
 
-	.footerNav {
-		display: flex;
-		text-decoration: none;
-		align-items: center;
-		text-align: center;
-		padding: 30px 0;
-		margin: 0;
-	}
+.footerNav {
+	display: flex;
+	text-decoration: none;
+	align-items: center;
+	text-align: center;
+	padding: 30px 0;
+	margin: 0;
+}
 
-	.navLinks {
-		position: relative;
-		display: flex;
-		margin: 0, auto;
-		gap: 24px;
-		justify-content: center;
-		align-items: center;
-	}
+.navLinks {
+	position: relative;
+	display: flex;
+	margin: 0 auto;
+	gap: 24px;
+	justify-content: center;
+	align-items: center;
+}
 
-	.logBtn {
-		font-weight: 600;
-		font-size: 16px;
-		line-height: 20px;
-		padding: 12px 32px;
-		border: 2px rgba(52, 52, 52, 1) solid;
-		border-radius: 20px;
-		cursor: pointer;
-		margin: 0;
+.logBtn {
+	font-weight: 600;
+	font-size: 16px;
+	line-height: 20px;
+	padding: 12px 32px;
+	border: 2px rgba(52, 52, 52, 1) solid;
+	border-radius: 20px;
+	cursor: pointer;
+	margin: 0;
+}
+
+.navLink {
+	text-decoration: none;
+	font-weight: 600;
+	font-size: 18px;
+	line-height: 20px;
+	color: #4643cd;
+	padding: 0;
+	margin: 0;
+
+	&:hover {
+		color: #bfbeff;
 	}
+}
 
-	.navLink {
-		text-decoration: none;
-		font-weight: 600;
-		font-size: 18px;
-		line-height: 20px;
-		color: #4643cd;
-		padding: 0;
-		margin: 0;
+.copyRightBlock {
+	display: flex;
+	width: 100%;
+	color: #4643cd;
+}
 
-		&:hover {
-			color: #bfbeff;
-		}
+.copyRight {
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+	margin: 0;
+	padding: 0;
+	color: #4643cd;
+}
+
+.selectForm {
+	width: 56px;
+	display: flex;
+	background: transparent;
+	gap: 8px;
+	position: relative;
+}
+
+.langSelect {
+	cursor: pointer;
+	appearance: none;
+	border: none;
+	font-size: 18px;
+	line-height: 22px;
+	font-weight: 600;
+	color: #4643cd;
+	background: transparent;
+	width: 100%;
+	z-index: 1;
+
+	&:hover {
+		color: var(--color-text-hover);
 	}
+}
 
-	.copyRightBlock {
-		display: flex;
+.selectArrow {
+	background-image: url(../../images/arrow-footer.svg);
+	background-repeat: no-repeat;
+	width: 20px;
+	height: 20px;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+@media screen and (max-width: 375px) {
+	.footer {
+		padding: 16px 16px 24px;
+		display: block;
+	}
+	.footerNav {
+		padding: 0;
+	}
+	.navLinks {
 		width: 100%;
-		color: #4643cd;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 8px;
 	}
-
-	.copyRight {
+	.navLink {
 		font-weight: 400;
+		color: var(--color-primary-text);
 		font-size: 14px;
-		line-height: 20px;
-		margin: 0;
-		padding: 0;
-		color: #4643cd;
+		line-height: 22px;
+		&:nth-child(even) {
+			text-align: right;
+		}
+		&:nth-child(odd) {
+			text-align: left;
+		}
 	}
-
-	.selectForm {
-		width: 56px;
+	.footerCopyright {
+		margin-top: 40px;
 		display: flex;
-		background: transparent;
-		gap: 8px;
-		position: relative;
+		justify-content: space-between;
 	}
-
-	.langSelect {
-		appearance: none;
-		border: none;
-		font-size: 18px;
-		line-height: 22px;
-		font-weight: 600;
-		color: #4643cd;
-		background: transparent;
-		width: 100%;
-		z-index: 1;
+	.privacyLink,
+	.copyRight {
+		font-size: 10px;
+		line-height: 20px;
+		color: var(--color-primary-text);
 	}
-
-	.selectArrow {
-		background-image: url(../../images/arrow-footer.svg);
-		background-repeat: no-repeat;
-		width: 20px;
-		height: 20px;
-		position: absolute;
-		top: 0;
-		right: 0;
+	.privacyLink:hover {
+		color: var(--color-text-hover);
 	}
 }