Fix/small fixes2

src/App.tsx

@@ -63,6 +63,7 @@ function App() {
 							path={'payment-cancelled'}
 							element={<PaymentResults isPaid={false} />}
 						/>
+						<Route path="/404" element={<NotFound />} />
 						<Route path="*" element={<NotFound />} />
 					</Routes>
 				</Layout>

src/components/Button/button.module.scss

@@ -135,6 +135,7 @@
 	width: 100%;
 	height: 50px;
 	cursor: pointer;
+	white-space: nowrap;
 
 	&:not(.green-border-button__active):hover {
 		color: white;
@@ -167,6 +168,7 @@
 	width: 100%;
 	height: 50px;
 	transition: 0.5s;
+	white-space: nowrap;
 
 	@media screen and (width <= 768px) {
 		font-size: 13px;

src/components/recipes-components/recipe-info/index.tsx

@@ -4,6 +4,7 @@ import { useParams } from 'react-router';
 
 type RecipeInfoProps = {
 	img: string;
+	description: string;
 	recipeNutrients: {
 		proteins: number;
 		fats: number;
@@ -12,12 +13,13 @@ type RecipeInfoProps = {
 	};
 };
 
-const RecipeInfo: React.FC<RecipeInfoProps> = ({ img, recipeNutrients }) => {
+const RecipeInfo: React.FC<RecipeInfoProps> = ({ img, description, recipeNutrients }) => {
 	const { id } = useParams();
 	return (
 		<div className={styles['recipe-info']}>
 			<div className={styles['recipe-info__image']}>
 				<img src={img} alt={id} />
+				<p className={styles['recipe-info__description']}>{description}</p>
 			</div>
 			<p className={styles['recipe-info__info']}>Энергетическая ценность на порцию</p>
 			<EnergyValue {...recipeNutrients} />

src/components/recipes-components/recipe-info/recipe-info.module.scss

@@ -18,18 +18,19 @@
 		}
 	}
 
-	&__description {
-		margin: 0;
-		font-size: 20px;
-		line-height: 140%;
-		margin-bottom: 20px;
-	}
-
 	&__info {
 		margin: 0;
 		font-size: 22px;
 		font-weight: 500;
 		line-height: 140%;
 		margin-bottom: 8px;
 	}
+
+	&__description {
+		margin: 0;
+		padding-top: 16px;
+		font-size: 20px;
+		font-weight: 400;
+		line-height: 140%;
+	}
 }

src/pages/category/index.tsx

@@ -44,7 +44,7 @@ const Category: React.FC = () => {
 				setCategoryObj(data.results[0]?.category);
 			})
 			.catch(() => {
-				navigate('/упс');
+				navigate('/404');
 			})
 			.finally(() => {
 				setIsLoading(false);

src/pages/product/index.tsx

@@ -47,7 +47,7 @@ const Product: React.FC = () => {
 				.then((data) => setProductItem(data))
 				.catch((error) => {
 					console.log(error);
-					navigate('/упс');
+					navigate('/404');
 				});
 			api
 				.reviewsList(Number(id))
@@ -58,7 +58,7 @@ const Product: React.FC = () => {
 				.catch((err) => console.log(err));
 		} else {
 			console.log('ID is undefined');
-			navigate('/упс');
+			navigate('/404');
 		}
 	}, [id, navigate]);
 

src/pages/recipe/index.tsx

@@ -182,13 +182,17 @@ const Recipe: React.FC = () => {
 							</p>
 						</div>
 						<div className={styles.recipes__info}>
-							<RecipeInfo img={recipeInfo.image} recipeNutrients={recipeNutrients} />
+							<RecipeInfo
+								img={recipeInfo.image}
+								recipeNutrients={recipeNutrients}
+								description={recipeByLines[1]}
+							/>
 						</div>
 					</div>
 					<div className={clsx(styles.recipes__instructions, styles.instructions)}>
 						<p className={styles.instructions__title}>Инструкция приготовления</p>
 						<div className={styles.instructions__list}>
-							{recipeByLines.map((line, index) => (
+							{recipeByLines.slice(2).map((line, index) => (
 								<p key={index} className={styles.instructions__item}>
 									{line}
 								</p>

src/pages/recipe/recipe.module.scss

@@ -90,10 +90,6 @@
 		margin-bottom: 25px;
 	}
 
-	&__item:first-child {
-		font-weight: 500;
-	}
-
 	&__item:last-child {
 		margin: 0;
 	}