diff --git a/reactapp/public/logo192.png b/reactapp/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/reactapp/public/logo192.png and /dev/null differ diff --git a/reactapp/public/logo512.png b/reactapp/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/reactapp/public/logo512.png and /dev/null differ diff --git a/reactapp/src/App.tsx b/reactapp/src/App.tsx index 334250b..e148f6e 100644 --- a/reactapp/src/App.tsx +++ b/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() { <>
- +
); diff --git a/reactapp/src/HomeStyle.scss b/reactapp/src/HomeStyle.scss index ecc1d7e..5950fed 100644 --- a/reactapp/src/HomeStyle.scss +++ b/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; + } } \ No newline at end of file diff --git a/reactapp/src/assets/img/add.webp b/reactapp/src/assets/img/add.webp new file mode 100644 index 0000000..9c538df Binary files /dev/null and b/reactapp/src/assets/img/add.webp differ diff --git a/reactapp/src/assets/img/image-placeholder.png b/reactapp/src/assets/img/image-placeholder.png deleted file mode 100644 index 47cd3ad..0000000 Binary files a/reactapp/src/assets/img/image-placeholder.png and /dev/null differ diff --git a/reactapp/src/assets/img/product-image-1.webp b/reactapp/src/assets/img/product-image-1.webp new file mode 100644 index 0000000..09ef5e3 Binary files /dev/null and b/reactapp/src/assets/img/product-image-1.webp differ diff --git a/reactapp/src/assets/img/product-image-10.webp b/reactapp/src/assets/img/product-image-10.webp new file mode 100644 index 0000000..c3ada37 Binary files /dev/null and b/reactapp/src/assets/img/product-image-10.webp differ diff --git a/reactapp/src/assets/img/product-image-2.webp b/reactapp/src/assets/img/product-image-2.webp new file mode 100644 index 0000000..4180214 Binary files /dev/null and b/reactapp/src/assets/img/product-image-2.webp differ diff --git a/reactapp/src/assets/img/product-image-3.webp b/reactapp/src/assets/img/product-image-3.webp new file mode 100644 index 0000000..675b851 Binary files /dev/null and b/reactapp/src/assets/img/product-image-3.webp differ diff --git a/reactapp/src/assets/img/product-image-4.webp b/reactapp/src/assets/img/product-image-4.webp new file mode 100644 index 0000000..c338b00 Binary files /dev/null and b/reactapp/src/assets/img/product-image-4.webp differ diff --git a/reactapp/src/assets/img/product-image-5.webp b/reactapp/src/assets/img/product-image-5.webp new file mode 100644 index 0000000..e70b3fd Binary files /dev/null and b/reactapp/src/assets/img/product-image-5.webp differ diff --git a/reactapp/src/assets/img/product-image-6.webp b/reactapp/src/assets/img/product-image-6.webp new file mode 100644 index 0000000..5104249 Binary files /dev/null and b/reactapp/src/assets/img/product-image-6.webp differ diff --git a/reactapp/src/assets/img/product-image-7.webp b/reactapp/src/assets/img/product-image-7.webp new file mode 100644 index 0000000..8923c41 Binary files /dev/null and b/reactapp/src/assets/img/product-image-7.webp differ diff --git a/reactapp/src/assets/img/product-image-8.webp b/reactapp/src/assets/img/product-image-8.webp new file mode 100644 index 0000000..a74f5ba Binary files /dev/null and b/reactapp/src/assets/img/product-image-8.webp differ diff --git a/reactapp/src/assets/img/product-image-9.webp b/reactapp/src/assets/img/product-image-9.webp new file mode 100644 index 0000000..d874ff7 Binary files /dev/null and b/reactapp/src/assets/img/product-image-9.webp differ diff --git a/reactapp/src/components/blocks/AddBanner.tsx b/reactapp/src/components/blocks/AddBanner.tsx new file mode 100644 index 0000000..dd33605 --- /dev/null +++ b/reactapp/src/components/blocks/AddBanner.tsx @@ -0,0 +1,8 @@ +import React from "react"; + +export default function Banner() { + return( +
+
+ ) +} \ No newline at end of file diff --git a/reactapp/src/components/blocks/ProductCard.tsx b/reactapp/src/components/blocks/ProductCard.tsx index 99ee997..9c3320d 100644 --- a/reactapp/src/components/blocks/ProductCard.tsx +++ b/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(
- +
{Price} ₽
{ProductName}
diff --git a/reactapp/src/components/blocks/image-placeholder.png b/reactapp/src/components/blocks/image-placeholder.png deleted file mode 100644 index 47cd3ad..0000000 Binary files a/reactapp/src/components/blocks/image-placeholder.png and /dev/null differ diff --git a/reactapp/src/components/pages/HomePage.tsx b/reactapp/src/components/pages/HomePage.tsx index b2b531e..b5caa3d 100644 --- a/reactapp/src/components/pages/HomePage.tsx +++ b/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(
- + +
+ + + + + + + + + + +
) } \ No newline at end of file diff --git a/reactapp/src/custom.d.ts b/reactapp/src/custom.d.ts index 339a553..182a1c6 100644 --- a/reactapp/src/custom.d.ts +++ b/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; } \ No newline at end of file diff --git a/reactapp/src/index.scss b/reactapp/src/index.scss index 7327c06..eee79ed 100644 --- a/reactapp/src/index.scss +++ b/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); }