Coding product card, home page & other fixes

Uploaded images in webp format for product, coding html and css for product cards, add banner and home page

reactapp/src/App.tsx

@@ -1,7 +1,6 @@
 import HomePage from "./components/pages/HomePage";
 import Header from "./components/blocks/Header";
 import SearchIcon from "../src/assets/icons/search-form__icon.svg";
-import Placeholder from "../src/assets/img/image-placeholder.png";
 import React from "react";
 
 export default function App() {
@@ -9,7 +8,7 @@ export default function App() {
     <>
       <Header SearchIcon={SearchIcon}/>
       <main className="main">
-        <HomePage PlaceHolder={Placeholder}/>
+        <HomePage/>
       </main>
     </>
   );

reactapp/src/HomeStyle.scss

@@ -3,6 +3,18 @@ $main-color: #CCC5B9;
 $accent-color: #EB5E28;
 
 .home-section {
-    width: 100%;
+    width: 96%;
     min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .products-div {
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 260px);
+        justify-content: space-between;
+        flex-flow: wrap;
+        padding-top: 36px;
+    }
 }

reactapp/src/components/blocks/AddBanner.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+export default function Banner() {
+    return(
+        <div className="banner-div">
+        </div>
+    )
+}

reactapp/src/components/blocks/ProductCard.tsx

@@ -1,8 +1,7 @@
 import React from "react";
-import Pefsfsdf from "./image-placeholder.png"
 
 type ProductTypes = {
-    ProductImg: any,
+    ProductImg: string,
     ProductName: string,
     Price: number
 }
@@ -10,7 +9,7 @@ type ProductTypes = {
 export default function ProductCard({ProductName, ProductImg, Price}:ProductTypes) {
     return(
         <article className="product-article">
-            <img src={Pefsfsdf} alt="" className="product-article__img"/>
+            <img src={ProductImg} alt="" className="product-article__img"/>
             <h5 className="product-article__price-h5">{Price} ₽</h5>
             <h6 className="product-article__name-h6">{ProductName}</h6>
         </article>

reactapp/src/components/pages/HomePage.tsx

@@ -1,10 +1,33 @@
 import React from "react";
 import ProductCard from "../blocks/ProductCard";
+import Banner from "../blocks/AddBanner";
+import Image1 from "../../assets/img/product-image-1.webp";
+import Image2 from "../../assets/img/product-image-2.webp";
+import Image3 from "../../assets/img/product-image-3.webp";
+import Image4 from "../../assets/img/product-image-4.webp";
+import Image5 from "../../assets/img/product-image-5.webp";
+import Image6 from "../../assets/img/product-image-6.webp";
+import Image7 from "../../assets/img/product-image-7.webp";
+import Image8 from "../../assets/img/product-image-8.webp";
+import Image9 from "../../assets/img/product-image-9.webp";
+import Image10 from "../../assets/img/product-image-10.webp";
 
-export default function HomePage(Placeholder:any) {
+export default function HomePage() {
     return(
         <section className="home-section">
-            <ProductCard ProductName="Абеме" ProductImg={Placeholder} Price={150} />
+            <Banner />
+            <div className="products-div">
+                <ProductCard ProductName="Шоколадка Mr. Beast" ProductImg={Image1} Price={2000} />
+                <ProductCard ProductName="Салат" ProductImg={Image2} Price={200} />
+                <ProductCard ProductName="Футболка 'Инфантил'" ProductImg={Image3} Price={1500} />
+                <ProductCard ProductName="Мороженое" ProductImg={Image4} Price={150} />
+                <ProductCard ProductName="Фигурка" ProductImg={Image5} Price={1799} />
+                <ProductCard ProductName="Трансформер" ProductImg={Image6} Price={19999} />
+                <ProductCard ProductName="Старая игрушка Баз-Лайтер" ProductImg={Image7} Price={99999999999} />
+                <ProductCard ProductName="Одёжка" ProductImg={Image8} Price={756} />
+                <ProductCard ProductName="Книга про ботанику" ProductImg={Image9} Price={2345} />
+                <ProductCard ProductName="Книга белая" ProductImg={Image10} Price={150} />
+            </div>
         </section>
     )
 }

reactapp/src/custom.d.ts

@@ -6,4 +6,9 @@ declare module "*.svg" {
 declare module "*.png" {
     const value: any;
     export default value;
+}
+
+declare module "*.webp" {
+    const value: any;
+    export default value;
 }

reactapp/src/index.scss

@@ -22,6 +22,7 @@ body {
     .product-article__img {
         align-self: stretch;
         border-radius: 20px;
+        height: 269px;
     }
 
     .product-article__price-h5 {
@@ -35,16 +36,33 @@ body {
 
     .product-article__name-h6 {
         color: rgb(255, 255, 255);
+        max-width: 100%;
         font-size: 16px;
         font-weight: 400;
         line-height: 20px;
         letter-spacing: 0%;
         text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 }
 
+.banner-div {
+    width: 100%;
+    min-height: 120px;
+    background-image: url("../src/assets/img/add.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: 15px;
+}
+
 .main {
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     height: calc(100vh - 80px);
 }