feat: change old catalog component on main page to new one

healthy-food-and-dietary-products · Dec 24, 2023 · 57919ef · 57919ef
1 parent e8158b2
commit 57919ef
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 39 deletions.
diff --git a/src/data/dataExamples.ts b/src/data/dataExamples.ts
@@ -1,38 +1,5 @@
 import TomatoesForProductPage from '@images/tomatoes_for_product_page.png';
 
-export const mainPageBlockLinks = [
-	{
-		title: 'Овощи',
-		link: 'vegetables-and-herbs',
-		backgroundImage: '/383bea75365411fd84f9c6c47e081cab.jpeg',
-		gridArea: 'a',
-	},
-	{
-		title: 'Фрукты',
-		link: 'fruits',
-		backgroundImage: '/e8ab3ec81c9d3e4cc473a3d6ae86bc5a.jpeg',
-		gridArea: 'b',
-	},
-	{
-		title: 'Орехи',
-		link: 'nuts-dried-fruits',
-		backgroundImage: '/05c2db3efd894fa03b952abf2d5a88ee.jpeg',
-		gridArea: 'c',
-	},
-	{
-		title: 'Молочные продукты',
-		link: 'dairy',
-		backgroundImage: '/5b5f8ca8a8f4f583ac88b6e80a646e10.jpeg',
-		gridArea: 'd',
-	},
-	{
-		title: 'Мясо и птица',
-		link: 'meat-and-poultry',
-		backgroundImage: '/4e039f6d2c33797f4fd913bd642549f0.jpeg',
-		gridArea: 'e',
-	},
-];
-
 export const products = [
 	{
 		cardName: 'Помидоры черри',

diff --git a/src/pages/home/home.module.scss b/src/pages/home/home.module.scss
@@ -15,15 +15,16 @@
 }
 
 .home__catalogSection {
-	margin-top: 120px;
+	max-width: 80%;
+	margin: 120px auto 0;
 
 	@media screen and (width <= 768px) {
 		margin: 50px auto 0;
-		max-width: 550px;
+		max-width: calc(100% - 2 * 20px);
 	}
 
 	@media screen and (width <= 400px) {
-		margin-top: 0;
+		margin: 0 auto;
 	}
 }
 

diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -4,11 +4,10 @@ import styles from './home.module.scss';
 import InfoCard from '@components/info-card';
 import usefulProductsIcon from '@images/useful-products-icon.svg';
 import roundTheClockDelivery from '@images/round-the-clock-delivery.svg';
-import CardCatalogLink from '@components/card-catalog-link';
-import { mainPageBlockLinks } from '@data/dataExamples.ts';
 import TopSellingThisWeek from '@components/top-selling-this-week';
 import AboutCompany from '@components/about-company/index.tsx';
 import OurBlock from '@components/our-block';
+import CatalogPromo from '@components/catalog-promo';
 
 const Home: React.FC = () => {
 	return (
@@ -31,7 +30,7 @@ const Home: React.FC = () => {
 				/>
 			</section>
 			<section className={styles.home__catalogSection}>
-				<CardCatalogLink title="Каталог" type="bento-grid" array={mainPageBlockLinks} />
+				<CatalogPromo />
 			</section>
 			<section className={styles.home__topSellingThisWeek}>
 				<TopSellingThisWeek />