diff --git a/reactapp/package-lock.json b/reactapp/package-lock.json index 1c5dd0b..18c1025 100644 --- a/reactapp/package-lock.json +++ b/reactapp/package-lock.json @@ -15,6 +15,7 @@ "@types/node": "^20.11.16", "@types/react": "^18.2.51", "@types/react-dom": "^18.2.18", + "framer-motion": "^11.0.3", "node-sass": "^9.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -2290,6 +2291,21 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -9007,6 +9023,29 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.3.tgz", + "integrity": "sha512-6x2poQpIWBdbZwLd73w6cKZ1I9IEPIU94C6/Swp1Zt3LJ+sB5bPe1E2wC6EH5hSISXNkMJ4afH7AdwS7MrtkWw==", + "dependencies": { + "tslib": "^2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", diff --git a/reactapp/package.json b/reactapp/package.json index 4a8849a..dad1678 100644 --- a/reactapp/package.json +++ b/reactapp/package.json @@ -10,6 +10,7 @@ "@types/node": "^20.11.16", "@types/react": "^18.2.51", "@types/react-dom": "^18.2.18", + "framer-motion": "^11.0.3", "node-sass": "^9.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/reactapp/public/index.html b/reactapp/public/index.html index 6b3cfe5..aef381c 100644 --- a/reactapp/public/index.html +++ b/reactapp/public/index.html @@ -4,9 +4,9 @@ SusMarket + -
diff --git a/reactapp/src/App.tsx b/reactapp/src/App.tsx index 4d5cf54..334250b 100644 --- a/reactapp/src/App.tsx +++ b/reactapp/src/App.tsx @@ -1,18 +1,15 @@ import HomePage from "./components/pages/HomePage"; -import PaymentPage from "./components/pages/PaymentPage"; -import ProductPage from "./components/pages/ProductPage"; -import ProfilePage from "./components/pages/ProfilePage"; -import ScamPage from "./components/pages/ScamPage"; 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() { return ( <>
-
- +
+
); diff --git a/reactapp/src/HomeStyle.scss b/reactapp/src/HomeStyle.scss index e69de29..ecc1d7e 100644 --- a/reactapp/src/HomeStyle.scss +++ b/reactapp/src/HomeStyle.scss @@ -0,0 +1,8 @@ +$background-color: #252422; +$main-color: #CCC5B9; +$accent-color: #EB5E28; + +.home-section { + width: 100%; + min-height: 100%; +} \ No newline at end of file diff --git a/reactapp/src/assets/img/image-placeholder.png b/reactapp/src/assets/img/image-placeholder.png new file mode 100644 index 0000000..47cd3ad Binary files /dev/null and b/reactapp/src/assets/img/image-placeholder.png differ diff --git a/reactapp/src/components/blocks/Header.tsx b/reactapp/src/components/blocks/Header.tsx index 21d3b14..ffb05bc 100644 --- a/reactapp/src/components/blocks/Header.tsx +++ b/reactapp/src/components/blocks/Header.tsx @@ -1,10 +1,18 @@ import React from "react"; +import { motion } from "framer-motion"; export default function Header(SearchIcon:any) { return(

SuSMarket

- + + Каталог +
@@ -12,18 +20,23 @@ export default function Header(SearchIcon:any) { - + - - - + + + {/* Код для svg */}
- + {/* Код для svg */} @@ -31,37 +44,44 @@ export default function Header(SearchIcon:any) { - + - - - + + + {/* Код для svg */} - -
- -
- + + + {/* Код для svg */} + + + Created with Pixso. + + + + + + + + + + + + {/* Код для svg */} + + {/* Код для svg */} @@ -69,16 +89,16 @@ export default function Header(SearchIcon:any) { - + - - - + + + {/* Код для svg */} - +
) } \ No newline at end of file diff --git a/reactapp/src/components/blocks/ProductCard.tsx b/reactapp/src/components/blocks/ProductCard.tsx index 7411694..99ee997 100644 --- a/reactapp/src/components/blocks/ProductCard.tsx +++ b/reactapp/src/components/blocks/ProductCard.tsx @@ -1,8 +1,18 @@ import React from "react"; +import Pefsfsdf from "./image-placeholder.png" -export default function ProductCard() { +type ProductTypes = { + ProductImg: any, + ProductName: string, + Price: number +} + +export default function ProductCard({ProductName, ProductImg, Price}:ProductTypes) { return( - <> - +
+ +
{Price} ₽
+
{ProductName}
+
) } \ No newline at end of file diff --git a/reactapp/src/components/blocks/image-placeholder.png b/reactapp/src/components/blocks/image-placeholder.png new file mode 100644 index 0000000..47cd3ad Binary files /dev/null and b/reactapp/src/components/blocks/image-placeholder.png differ diff --git a/reactapp/src/components/pages/HomePage.tsx b/reactapp/src/components/pages/HomePage.tsx index b9d9b5e..b2b531e 100644 --- a/reactapp/src/components/pages/HomePage.tsx +++ b/reactapp/src/components/pages/HomePage.tsx @@ -1,8 +1,10 @@ import React from "react"; +import ProductCard from "../blocks/ProductCard"; -export default function HomePage() { +export default function HomePage(Placeholder:any) { return( -
+
+
) } \ No newline at end of file diff --git a/reactapp/src/custom.d.ts b/reactapp/src/custom.d.ts index 6db6710..339a553 100644 --- a/reactapp/src/custom.d.ts +++ b/reactapp/src/custom.d.ts @@ -1,4 +1,9 @@ declare module "*.svg" { const content: React.FunctionComponent>; export default content; +} + +declare module "*.png" { + 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 4cda2c4..7327c06 100644 --- a/reactapp/src/index.scss +++ b/reactapp/src/index.scss @@ -8,10 +8,49 @@ body { font-family: 'Montserrat', sans-serif; } +.product-article { + display: flex; + width: 260px; + height: 400px; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + padding: 20px; + border-radius: 40px; + background: transparent; + + .product-article__img { + align-self: stretch; + border-radius: 20px; + } + + .product-article__price-h5 { + color: $accent-color; + font-size: 32px; + font-weight: 600; + line-height: 39px; + letter-spacing: 0%; + text-align: left; + } + + .product-article__name-h6 { + color: rgb(255, 255, 255); + font-size: 16px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0%; + text-align: left; + } +} + +.main { + width: 100%; + height: calc(100vh - 80px); +} + .header { width: 100%; height: 80px; - position: fixed; display: flex !important; flex-direction: row; justify-content: space-between; diff --git a/reactapp/src/index.tsx b/reactapp/src/index.tsx index 35f43de..948b29a 100644 --- a/reactapp/src/index.tsx +++ b/reactapp/src/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.scss'; +import './HomeStyle.scss'; import './reset.css'; import App from './App';