4 routs for new pages

src/App.tsx

@@ -25,6 +25,8 @@ import Agreement from '@pages/agreement/index.tsx';
 import DeliveryConditions from '@pages/delivery-conditions/index.tsx';
 import CheckoutSuccess from '@pages/checkout/checkout-success/index.tsx';
 import PaymentResults from '@pages/payment-results/index.tsx';
+import InfoPage from '@pages/info-page/';
+import AboutUs from '@pages/about-us/';
 
 function App() {
 	const { isLoggedIn } = useAuth();
@@ -55,6 +57,10 @@ function App() {
 						</Route>
 						<Route path={URLS.AGREEMENT} element={<Agreement />} />
 						<Route path={URLS.DELIVERY_COND} element={<DeliveryConditions />} />
+						<Route path={URLS.DELIVERY} element={<InfoPage />} />
+						<Route path={URLS.ABOUT_US} element={<AboutUs />} />
+						<Route path={URLS.SUPPORT} element={<InfoPage />} />
+						<Route path={URLS.PAYMENT} element={<InfoPage />} />
 						<Route
 							path={'payment-is-processing'}
 							element={<PaymentResults isPaid={true} />}

src/components/navigation/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { URLS } from '@data/constants.ts';
 import styles from './navigation.module.scss';
 
 const Navigation: React.FC = () => {
@@ -9,8 +10,12 @@ const Navigation: React.FC = () => {
 				<Link className={styles.navigation_catalog} to={'/catalog'}>
 					Каталог
 				</Link>
-				<p className={`${styles.navigation__item_disabled}`}>О нас</p>
-				<p className={` ${styles.navigation__item_disabled}`}>Доставка</p>
+				<Link className={` ${styles.navigation__item}`} to={URLS.ABOUT_US}>
+					О нас
+				</Link>
+				<Link className={` ${styles.navigation__item}`} to={URLS.DELIVERY}>
+					Доставка
+				</Link>
 				<Link className={` ${styles.navigation__item}`} to={'/recipes'}>
 					Рецепты
 				</Link>

src/data/constants.ts

@@ -7,6 +7,10 @@ export const URLS = {
 	CATALOG: '/catalog',
 	AGREEMENT: '/agreement',
 	DELIVERY_COND: '/delivery-conditions',
+	DELIVERY: '/delivery',
+	ABOUT_US: '/about-us',
+	PAYMENT: '/payment',
+	SUPPORT: '/support',
 	CART_SUCCESS: '/cart/success',
 	PROFILE_ORDERS: '/profile/orders/',
 };

src/layouts/footer/index.tsx

@@ -18,15 +18,21 @@ const Footer: React.FC = () => {
 				</div>
 				<div className={styles.footer__centerBlock}>
 					<ul className={styles.footer__text}>
-						<li className={styles.footer__list_disabled}>О нас</li>
+						<Link to={URLS.ABOUT_US} className={styles.footer__link}>
+							<li className={styles.footer__list}>О нас</li>
+						</Link>
 						<Link to={URLS.DELIVERY_COND} className={styles.footer__link}>
 							<li className={styles.footer__list}>Условия доставки</li>
 						</Link>
-						<li className={styles.footer__list_disabled}>Оплата</li>
+						<Link to={URLS.PAYMENT} className={styles.footer__link}>
+							<li className={styles.footer__list}>Оплата</li>
+						</Link>
 						<Link to={'/contacts'} className={styles.footer__link}>
 							<li className={styles.footer__list}>Контакты</li>
 						</Link>
-						<li className={styles.footer__list_disabled}>Служба поддержки</li>
+						<Link to={URLS.SUPPORT} className={styles.footer__link}>
+							<li className={styles.footer__list}>Служба поддержки</li>
+						</Link>
 						<Link to={URLS.AGREEMENT} className={styles.footer__link}>
 							<li>Политика обработки и хранения персональных данных</li>
 						</Link>

src/pages/about-us/agreement.module.scss

@@ -0,0 +1,40 @@
+@use '@scss/base.scss' as *;
+
+.agreement {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+}
+
+.agreement_box {
+	width: 82%;
+	display: flex;
+	flex-wrap: wrap;
+
+	@media screen and (width <= 768px) {
+		width: 85%;
+	}
+}
+
+.agreement_title {
+	margin: 80px 0 0;
+
+	@media screen and (width <= 768px) {
+		margin: 20px 0 0;
+		font-size: 24px;
+	}
+}
+
+.agreement_subtitle {
+	margin-top: 40px;
+	text-align: start;
+
+	@media screen and (width <= 768px) {
+		margin-top: 30px;
+		font-size: 15px;
+	}
+}
+
+.agreement_p {
+	width: 100%;
+}

src/pages/info-page/agreement.module.scss

@@ -0,0 +1,40 @@
+@use '@scss/base.scss' as *;
+
+.agreement {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+}
+
+.agreement_box {
+	width: 82%;
+	display: flex;
+	flex-wrap: wrap;
+
+	@media screen and (width <= 768px) {
+		width: 85%;
+	}
+}
+
+.agreement_title {
+	margin: 80px 0 0;
+
+	@media screen and (width <= 768px) {
+		margin: 20px 0 0;
+		font-size: 24px;
+	}
+}
+
+.agreement_subtitle {
+	margin-top: 40px;
+	text-align: start;
+
+	@media screen and (width <= 768px) {
+		margin-top: 30px;
+		font-size: 15px;
+	}
+}
+
+.agreement_p {
+	width: 100%;
+}