feat: init project
This commit is contained in:
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
5
.idea/.gitignore
generated
vendored
Normal file
5
.idea/.gitignore
generated
vendored
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
||||||
12
.idea/BodyMindCare-test.iml
generated
Normal file
12
.idea/BodyMindCare-test.iml
generated
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="WEB_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager">
|
||||||
|
<content url="file://$MODULE_DIR$">
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||||
|
</content>
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/BodyMindCare-test.iml" filepath="$PROJECT_DIR$/.idea/BodyMindCare-test.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
40572
package-lock.json
generated
Normal file
40572
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
46
package.json
Normal file
46
package.json
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
{
|
||||||
|
"name": "body-mind-care",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@emotion/react": "^11.10.4",
|
||||||
|
"@emotion/styled": "^11.10.4",
|
||||||
|
"@mui/icons-material": "^5.10.6",
|
||||||
|
"@mui/material": "^5.10.8",
|
||||||
|
"@testing-library/jest-dom": "^5.16.5",
|
||||||
|
"@testing-library/react": "^13.4.0",
|
||||||
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
"node-sass": "^7.0.3",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-icons": "^4.4.0",
|
||||||
|
"react-scripts": "^2.1.3"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"sass": "^1.55.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 678 B |
19
public/index.html
Normal file
19
public/index.html
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Web site created using create-react-app"
|
||||||
|
/>
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
|
<title>Body Mind Care</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
25
public/manifest.json
Normal file
25
public/manifest.json
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo192.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo512.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "512x512"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
3
public/robots.txt
Normal file
3
public/robots.txt
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# https://www.robotstxt.org/robotstxt.html
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
17
src/App.js
Normal file
17
src/App.js
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import Header from "./components/header";
|
||||||
|
import Footer from "./components/footer";
|
||||||
|
import ServicesPage from "./pages/services";
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header />
|
||||||
|
<ServicesPage />
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
BIN
src/assets/cardImages/1.jpg
Normal file
BIN
src/assets/cardImages/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
BIN
src/assets/cardImages/2.jpg
Normal file
BIN
src/assets/cardImages/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
BIN
src/assets/cardImages/3.jpg
Normal file
BIN
src/assets/cardImages/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 950 KiB |
BIN
src/assets/cardImages/4.png
Normal file
BIN
src/assets/cardImages/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 KiB |
BIN
src/assets/cardImages/5.jpg
Normal file
BIN
src/assets/cardImages/5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
src/assets/cardImages/6.jpg
Normal file
BIN
src/assets/cardImages/6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
BIN
src/assets/cardImages/7.jpg
Normal file
BIN
src/assets/cardImages/7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
src/assets/cardImages/8.jpg
Normal file
BIN
src/assets/cardImages/8.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
16
src/assets/links/instagram.svg
Normal file
16
src/assets/links/instagram.svg
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path d="M50.3,29c-11.6,0-21.1,9.5-21.1,21.1s9.5,21.1,21.1,21.1c11.6,0,21-9.5,21-21.1S61.8,29,50.3,29z M50.3,66.2
|
||||||
|
c-8.9,0-16.1-7.2-16.1-16.1c0-8.9,7.2-16.1,16.1-16.1c8.8,0,16,7.2,16,16.1C66.3,59,59.1,66.2,50.3,66.2z"/>
|
||||||
|
<path d="M73.8,17.1c-2.2,0-4.2,0.8-5.7,2.3c-1.5,1.5-2.3,3.5-2.3,5.7c0,2.2,0.8,4.2,2.3,5.7c1.5,1.5,3.5,2.3,5.7,2.3
|
||||||
|
s4.2-0.8,5.7-2.3v0c1.4-1.4,2.3-3.4,2.4-5.6l0-0.1c0-2.1-0.9-4.1-2.3-5.5C78.1,18,76,17.1,73.8,17.1z M75.9,27.2
|
||||||
|
c-1.1,1.1-3.2,1.1-4.3,0c-0.6-0.6-0.9-1.3-0.9-2.1s0.3-1.6,0.9-2.1c0.6-0.6,1.3-0.9,2.1-0.9c0.8,0,1.6,0.3,2.2,0.9
|
||||||
|
c0.5,0.5,0.9,1.3,0.9,2C76.8,25.9,76.5,26.7,75.9,27.2z"/>
|
||||||
|
<path d="M67.8,7H32.7C18.6,7,7.2,18.4,7.2,32.5v35.2c0,14.1,11.4,25.5,25.5,25.5h35.2c14.1,0,25.5-11.4,25.5-25.5V32.5
|
||||||
|
C93.3,18.4,81.9,7,67.8,7z M88.3,67.7c0,11.3-9.2,20.5-20.5,20.5H32.7c-11.3,0-20.5-9.2-20.5-20.5V32.5c0-11.3,9.2-20.5,20.5-20.5
|
||||||
|
h35.2c11.3,0,20.5,9.2,20.5,20.5V67.7z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
1
src/assets/links/linkedin.svg
Normal file
1
src/assets/links/linkedin.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 512 512" id="Layer_1" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M173.5,508.7c0-2.4,0-4.7,0-7c0-107.7,0-215.3,0-323c0-3-0.2-5.4,4.2-5.4c31.8,0.2,63.7,0.1,95.5,0.1 c0.8,0,1.6,0.2,2.9,0.4c0,14,0,27.8,0,41.7c0.4,0.1,0.7,0.3,1.1,0.4c4-5.2,7.8-10.6,12-15.7c12.2-15,27.5-26,45.5-32.6 c9.8-3.6,20.5-5.8,30.8-6.3c14.2-0.6,28.7-0.4,42.7,2c23,3.9,43.3,14.1,60.1,30.8c15.9,15.7,26.4,34.6,32.1,55.9 c3,11.3,4.9,22.9,6.7,34.4c1.2,8,1.8,16.2,1.8,24.2c0.1,65,0.1,130,0.1,195c0,1.6-0.1,3.2-0.2,5.3c-1.9,0-3.5,0-5.1,0 c-30.7,0-61.3-0.1-92,0.1c-5.1,0-6-1.7-6-6.3c0.1-59.8,0.3-119.7-0.1-179.5c-0.1-10.5-1.1-21.4-3.8-31.5 c-4.9-17.7-16.1-30.5-33.9-37c-15-5.5-30.2-6.5-45.6-2.6c-17,4.3-28.7,15.6-37.5,30.5c-6.8,11.5-8.1,24.2-8.2,36.9 c-0.4,60.7-0.2,121.3-0.2,182c0,2.3,0,4.6,0,7.1C241.9,508.7,208,508.7,173.5,508.7z"/><path d="M109.1,342.6c0,53.3-0.1,106.6,0.1,159.9c0,4.8-1,6.6-6.3,6.5c-30.5-0.3-61-0.3-91.5,0c-5,0-6.1-1.7-6.1-6.3 c0.1-107.1,0.1-214.3,0-321.4c0-4.3,1.2-5.8,5.6-5.8c30.8,0.2,61.6,0.2,92.5,0c4.8,0,5.7,1.8,5.7,6.1 C109.1,235.3,109.1,289,109.1,342.6z"/><path d="M56.1,4.8C89,4,108.7,27.9,108.8,57.2c0.1,30-20.9,52.4-53.9,52.3c-30.7,0-52.4-22-52.3-53.1C2.7,27.3,23.8,3.8,56.1,4.8z"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
1
src/assets/links/skype.svg
Normal file
1
src/assets/links/skype.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-skype" width="24" height="24" viewBox="0 0 24 24"><path d="M18,6C20.07,8.04 20.85,10.89 20.36,13.55C20.77,14.27 21,15.11 21,16A5,5 0 0,1 16,21C15.11,21 14.27,20.77 13.55,20.36C10.89,20.85 8.04,20.07 6,18C3.93,15.96 3.15,13.11 3.64,10.45C3.23,9.73 3,8.89 3,8A5,5 0 0,1 8,3C8.89,3 9.73,3.23 10.45,3.64C13.11,3.15 15.96,3.93 18,6M12.04,17.16C14.91,17.16 16.34,15.78 16.34,13.92C16.34,12.73 15.78,11.46 13.61,10.97L11.62,10.53C10.86,10.36 10,10.13 10,9.42C10,8.7 10.6,8.2 11.7,8.2C13.93,8.2 13.72,9.73 14.83,9.73C15.41,9.73 15.91,9.39 15.91,8.8C15.91,7.43 13.72,6.4 11.86,6.4C9.85,6.4 7.7,7.26 7.7,9.54C7.7,10.64 8.09,11.81 10.25,12.35L12.94,13.03C13.75,13.23 13.95,13.68 13.95,14.1C13.95,14.78 13.27,15.45 12.04,15.45C9.63,15.45 9.96,13.6 8.67,13.6C8.09,13.6 7.67,14 7.67,14.57C7.67,15.68 9,17.16 12.04,17.16Z" /></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
1
src/assets/links/telegram.svg
Normal file
1
src/assets/links/telegram.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="512px" height="512px"><path d="M470.4354553,45.4225006L16.8273029,221.2490387c-18.253809,8.1874695-24.4278889,24.5854034-4.4127407,33.4840851l116.3710175,37.1726685l281.3674316-174.789505c15.3625488-10.9733887,31.0910339-8.0470886,17.5573425,4.023468L186.0532227,341.074646l-7.5913849,93.0762329c7.0313721,14.3716125,19.9055786,14.4378967,28.1172485,7.2952881l66.8582916-63.5891418l114.5050659,86.1867065c26.5942688,15.8265076,41.0652466,5.6130371,46.7870789-23.3935242L509.835083,83.1804428C517.6329956,47.474514,504.3345032,31.7425518,470.4354553,45.4225006z"/></svg>
|
||||||
|
After Width: | Height: | Size: 630 B |
1
src/assets/links/vk.svg
Normal file
1
src/assets/links/vk.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="m 6.850117,10.385227 0.7185041,0 c 0,0 0.2165012,-0.0235 0.3270018,-0.142 0.1050006,-0.110501 0.1050006,-0.3150022 0.1050006,-0.3150022 0,0 -0.0155,-0.963506 0.4345025,-1.105007 0.4435025,-0.1405 1.0060057,0.930006 1.605509,1.3415082 0.458003,0.314502 0.802505,0.247001 0.802505,0.247001 l 1.605508,-0.022 c 0,0 0.841005,-0.0525 0.443503,-0.7130042 -0.0305,-0.0525 -0.225501,-0.487502 -1.185507,-1.380008 -1.006005,-0.930505 -0.871004,-0.780504 0.338002,-2.393513 0.734504,-0.982506 1.035006,-1.583009 0.937505,-1.838011 -0.083,-0.240001 -0.630003,-0.180501 -0.630003,-0.180501 l -1.80101,0.0155 c 0,0 -0.135001,-0.0155 -0.232501,0.045 -0.0975,0.0595 -0.157001,0.195501 -0.157001,0.195501 0,0 -0.2860018,0.764504 -0.668004,1.410008 -0.8115046,1.364509 -1.1340064,1.439509 -1.2615072,1.349509 -0.3020017,-0.195502 -0.2245012,-0.790005 -0.2245012,-1.216007 0,-1.320508 0.2020011,-1.875011 -0.3905022,-2.017512 -0.1950012,-0.0455 -0.340502,-0.075 -0.8425048,-0.083 -0.6450037,-0.007 -1.1890068,0.005 -1.4975085,0.155501 -0.2025012,0.1015 -0.3600021,0.326001 -0.2695016,0.337501 0.1200007,0.015 0.3895022,0.073 0.532003,0.268502 0.1875011,0.253001 0.1795011,0.818005 0.1795011,0.818005 0,0 0.1055006,1.558009 -0.2470014,1.75151 -0.2475014,0.131 -0.5775033,-0.140001 -1.2975074,-1.378008 -0.3675021,-0.630004 -0.6455037,-1.335008 -0.6455037,-1.335008 0,0 -0.0525,-0.128001 -0.1495008,-0.203001 -0.1135007,-0.0825 -0.2785016,-0.112501 -0.2785016,-0.112501 l -1.7175097,0.015 c 0,0 -0.2550015,0.008 -0.344502,0.120001 -0.0830004,0.0975 -0.008,0.307502 -0.008,0.307502 0,0 1.3430076,3.143518 2.8660162,4.726527 C 5.292108,10.506228 6.875117,10.412727 6.875117,10.412727 l -0.025,-0.0275 z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
41
src/components/card/index.jsx
Normal file
41
src/components/card/index.jsx
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import React from "react";
|
||||||
|
import ScheduleIcon from "@mui/icons-material/Schedule";
|
||||||
|
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
|
||||||
|
|
||||||
|
import "./style.scss";
|
||||||
|
|
||||||
|
const Card = ({ image, tags, title, description, time, date }) => {
|
||||||
|
return (
|
||||||
|
<div className="card">
|
||||||
|
<div className="card__info">
|
||||||
|
<div className="info__image">
|
||||||
|
<img src={image} alt={image} />
|
||||||
|
</div>
|
||||||
|
<div className="info__tags">
|
||||||
|
{tags.map((tag) => {
|
||||||
|
return (
|
||||||
|
<div key={tag} className="tag">
|
||||||
|
{tag}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<h2 className="info__title">{title}</h2>
|
||||||
|
<p className="info__description">{description}</p>
|
||||||
|
<div className="info__full-date">
|
||||||
|
<div className="full-date__time">
|
||||||
|
<ScheduleIcon fontSize="small" />
|
||||||
|
{time}
|
||||||
|
</div>
|
||||||
|
<div className="full-date__date">
|
||||||
|
<CalendarTodayIcon fontSize="small" />
|
||||||
|
{date}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button className="card__button-enroll">Записаться</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Card;
|
||||||
116
src/components/card/style.scss
Normal file
116
src/components/card/style.scss
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
.card {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: 240px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
margin-right: 30px;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 679px) {
|
||||||
|
max-width: 350px;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
max-width: 240px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
max-height: 450px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
@media (max-width: 679px) {
|
||||||
|
max-width: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info__image {
|
||||||
|
max-width: 250px;
|
||||||
|
max-height: 150px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
@media (max-width: 679px) {
|
||||||
|
max-width: 350px;
|
||||||
|
max-height: 250px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info__tags {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 13px;
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 3px 5px;
|
||||||
|
color: #c7b59f;
|
||||||
|
border: 1px solid #c7b59f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info__title {
|
||||||
|
margin-top: 9px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info__description {
|
||||||
|
margin-top: 9px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info__full-date {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
margin-top: auto;
|
||||||
|
|
||||||
|
.full-date__time {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
max-width: 95px;
|
||||||
|
width: 100%;
|
||||||
|
color: #2b404c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-date__date {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
max-width: 105px;
|
||||||
|
width: 100%;
|
||||||
|
color: #2b404c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__button-enroll {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
padding: 12px 0;
|
||||||
|
|
||||||
|
border: 1px solid #2b404c;
|
||||||
|
background-color: white;
|
||||||
|
color: #2b404c;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__button-enroll:hover {
|
||||||
|
background-color: #2b404c;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
29
src/components/cardsTable/index.jsx
Normal file
29
src/components/cardsTable/index.jsx
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import Card from "../card";
|
||||||
|
import { CARDS } from "../../mockData/cards";
|
||||||
|
|
||||||
|
import "./style.scss";
|
||||||
|
|
||||||
|
const CardsTable = () => {
|
||||||
|
return (
|
||||||
|
<div className="cards-table">
|
||||||
|
{CARDS.map((card) => (
|
||||||
|
<>
|
||||||
|
<Card
|
||||||
|
key={card.id}
|
||||||
|
image={card.image}
|
||||||
|
tags={card.tags}
|
||||||
|
title={card.title}
|
||||||
|
description={card.description}
|
||||||
|
time={card.time}
|
||||||
|
date={card.date}
|
||||||
|
/>
|
||||||
|
<span className="line" />
|
||||||
|
</>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CardsTable;
|
||||||
22
src/components/cardsTable/style.scss
Normal file
22
src/components/cardsTable/style.scss
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
.cards-table {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.line:not(:nth-child(8n + 8)) {
|
||||||
|
border-right: 2px solid #c7b59f;
|
||||||
|
height: 370px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.line {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
40
src/components/filterTools/index.jsx
Normal file
40
src/components/filterTools/index.jsx
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import TodayIcon from "@mui/icons-material/Today";
|
||||||
|
import ToggleOffIcon from "@mui/icons-material/ToggleOff";
|
||||||
|
import ToggleOnIcon from "@mui/icons-material/ToggleOn";
|
||||||
|
|
||||||
|
import "./style.scss";
|
||||||
|
|
||||||
|
const FilterTools = () => {
|
||||||
|
const [isClosedCompleted, setIsCloseCompleted] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="filter-tools">
|
||||||
|
<div className="filter-tools__first-part">
|
||||||
|
<div className="first-part__sort-by">Сортировать по:</div>
|
||||||
|
<div className="first-part__sort-menu">Дате</div>
|
||||||
|
</div>
|
||||||
|
<div className="filter-tools__second-part">
|
||||||
|
<div className="second-part__schedule">
|
||||||
|
<TodayIcon fontSize="small" />
|
||||||
|
Календарь
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="second-part__close-completed"
|
||||||
|
onClick={() => {
|
||||||
|
setIsCloseCompleted(!isClosedCompleted);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isClosedCompleted ? (
|
||||||
|
<ToggleOnIcon color="primary" />
|
||||||
|
) : (
|
||||||
|
<ToggleOffIcon />
|
||||||
|
)}
|
||||||
|
Скрыть завершенные
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FilterTools;
|
||||||
75
src/components/filterTools/style.scss
Normal file
75
src/components/filterTools/style.scss
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
.filter-tools {
|
||||||
|
padding-top: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: #2b404c;
|
||||||
|
|
||||||
|
@media (max-width: 540px) {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-tools__first-part {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 140px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@media (max-width: 670px) {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 540px) {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-part__sort-by {
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-part__sort-menu {
|
||||||
|
border-bottom: 1px solid #2b404c;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-tools__second-part {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
max-width: 385px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@media (max-width: 370px) {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.second-part__schedule {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
max-width: 95px;
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@media (max-width: 670px) {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 370px) {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.second-part__close-completed {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
max-width: 165px;
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
51
src/components/footer/index.jsx
Normal file
51
src/components/footer/index.jsx
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
FaVk,
|
||||||
|
FaInstagram,
|
||||||
|
FaLinkedinIn,
|
||||||
|
FaTelegramPlane,
|
||||||
|
FaSkype,
|
||||||
|
} from "react-icons/fa";
|
||||||
|
|
||||||
|
import "./style.scss";
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<div className="footer">
|
||||||
|
<div className="footer-container">
|
||||||
|
<div className="footer__main-info">
|
||||||
|
<h1 className="main-info__title">BodyMindCare</h1>
|
||||||
|
<p className="main-info__paragraph">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
|
||||||
|
aliquam eleifend quam, vel aliquet purus scelerisque sed.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="footer__social-links">
|
||||||
|
<p className="social-links__title">Я В СОЦИАЛЬНЫХ СЕТЯХ</p>
|
||||||
|
<div className="social-links__links">
|
||||||
|
<FaInstagram color="#2b404c" className="link instagram-link" />
|
||||||
|
<FaLinkedinIn color="#2b404c" className="link linkedin-link" />
|
||||||
|
<FaVk color="#2b404c" className="link vk-link" />
|
||||||
|
<FaTelegramPlane color="#2b404c" className="link telegram-link" />
|
||||||
|
<FaSkype color="#2b404c" className="link skype-link" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="footer__contact-info">
|
||||||
|
<div className="contact-info__titles">
|
||||||
|
<div className="contact-info__title">Почта:</div>
|
||||||
|
<div className="contact-info__title">Телефон:</div>
|
||||||
|
<div className="contact-info__title">Время работы:</div>
|
||||||
|
</div>
|
||||||
|
<div className="contact-info__details">
|
||||||
|
<div className="contact-info__detail">BodyMindCare@gmail.ru</div>
|
||||||
|
<div className="contact-info__detail">+375 33 123-45-67</div>
|
||||||
|
<div className="contact-info__detail">пн-пт 10:00-21:00</div>
|
||||||
|
<div className="contact-info__detail">сб-вс 08:00-21:00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
98
src/components/footer/style.scss
Normal file
98
src/components/footer/style.scss
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
.footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #c7b59f;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
.footer-container {
|
||||||
|
max-width: 1064px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px 75px 30px 5px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
padding-left: 40px;
|
||||||
|
padding-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 580px) {
|
||||||
|
padding-left: 30px;
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__main-info {
|
||||||
|
max-width: 350px;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: -20px;
|
||||||
|
|
||||||
|
.main-info__title {
|
||||||
|
color: #2b404c;
|
||||||
|
font-size: 28px;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 960px) {
|
||||||
|
margin-top: 20px;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__social-links {
|
||||||
|
margin-top: 35px;
|
||||||
|
|
||||||
|
.social-links__links {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
max-width: 140px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
padding-top: 15px;
|
||||||
|
|
||||||
|
.link {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border: 1px solid #2b404c;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover {
|
||||||
|
background-color: #2b404c;
|
||||||
|
fill: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 670px) {
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__contact-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
max-width: 280px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
padding-top: 60px;
|
||||||
|
margin-right: 30px;
|
||||||
|
margin-left: 50px;
|
||||||
|
|
||||||
|
.contact-info__title,
|
||||||
|
.contact-info__detail {
|
||||||
|
padding: 3px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 960px) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
59
src/components/header/index.jsx
Normal file
59
src/components/header/index.jsx
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import MenuIcon from "@mui/icons-material/Menu";
|
||||||
|
import CloseIcon from "@mui/icons-material/Close";
|
||||||
|
|
||||||
|
import "./style.scss";
|
||||||
|
|
||||||
|
const TABS = {
|
||||||
|
main: "Главная",
|
||||||
|
services: "Услуги",
|
||||||
|
news: "Новости",
|
||||||
|
contacts: "Контакты",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
const [activeTab, setActiveTab] = useState("services");
|
||||||
|
const [isMenuClosed, setIsMenuClosed] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="header">
|
||||||
|
<div className="header-container">
|
||||||
|
<h1 className="header__title">BodyMindCare</h1>
|
||||||
|
<div className="header__tabs">
|
||||||
|
{Object.keys(TABS).map((tab) => {
|
||||||
|
return (
|
||||||
|
<nav
|
||||||
|
key={tab}
|
||||||
|
onClick={() => {
|
||||||
|
setActiveTab(tab);
|
||||||
|
}}
|
||||||
|
className={`tabs__${tab} tabs ${
|
||||||
|
activeTab === tab ? "tabs-active" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{TABS[tab]}
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{isMenuClosed ? (
|
||||||
|
<CloseIcon
|
||||||
|
className="tabs__menu"
|
||||||
|
onClick={() => {
|
||||||
|
setIsMenuClosed(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<MenuIcon
|
||||||
|
className="tabs__menu"
|
||||||
|
onClick={() => {
|
||||||
|
setIsMenuClosed(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
72
src/components/header/style.scss
Normal file
72
src/components/header/style.scss
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
border-bottom: 2px solid #c7b59f;
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
max-width: 1064px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px 20px 0 5px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
padding-left: 40px;
|
||||||
|
padding-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 580px) {
|
||||||
|
padding-left: 30px;
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__title {
|
||||||
|
font-size: 20px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
color: #2b404c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__tabs {
|
||||||
|
max-width: 375px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
@media (max-width: 670px) {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 5px 0 10px 0;
|
||||||
|
border-bottom: 4px solid transparent;
|
||||||
|
|
||||||
|
@media (max-width: 670px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-active {
|
||||||
|
border-bottom: 4px solid #c7b59f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs__menu {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@media (max-width: 670px) {
|
||||||
|
display: inherit;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
13
src/index.js
Normal file
13
src/index.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom/client";
|
||||||
|
|
||||||
|
import App from "./App";
|
||||||
|
|
||||||
|
import "./index.scss";
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
9
src/index.scss
Normal file
9
src/index.scss
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
1
src/logo.svg
Normal file
1
src/logo.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
99
src/mockData/cards.js
Normal file
99
src/mockData/cards.js
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
import Image1 from "../assets/cardImages/1.jpg";
|
||||||
|
import Image2 from "../assets/cardImages/2.jpg";
|
||||||
|
import Image3 from "../assets/cardImages/3.jpg";
|
||||||
|
import Image4 from "../assets/cardImages/4.png";
|
||||||
|
import Image5 from "../assets/cardImages/5.jpg";
|
||||||
|
import Image6 from "../assets/cardImages/6.jpg";
|
||||||
|
import Image7 from "../assets/cardImages/7.jpg";
|
||||||
|
import Image8 from "../assets/cardImages/8.jpg";
|
||||||
|
|
||||||
|
export const CARDS = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
image: `${Image1}`,
|
||||||
|
tags: ["LOREM", "THEME1"],
|
||||||
|
title: `Phasellus vitae venenatis lacus`,
|
||||||
|
description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||||
|
Ut ultrices libero sit amet orci finibus tempus eu at orci.
|
||||||
|
In sem nisl, auctor sit amet facilisis ac, rhoncus vitae
|
||||||
|
nisi. In egestas nisl sit amet dapibus vulputate.`,
|
||||||
|
time: "20:00-22:00",
|
||||||
|
date: "05 нояб 2022",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
image: `${Image2}`,
|
||||||
|
tags: ["THEME1"],
|
||||||
|
title: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
|
||||||
|
description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
|
||||||
|
aliquam eleifend quam, vel aliquet purus scelerisque sed.`,
|
||||||
|
time: "20:00-22:00",
|
||||||
|
date: "05 нояб 2022",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
image: `${Image3}`,
|
||||||
|
tags: ["FAMILY", "THEME2"],
|
||||||
|
title: `Phasellus vitae venenatis lacus`,
|
||||||
|
description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||||
|
Ut ultrices libero sit amet orci finibus tempus eu at orci.
|
||||||
|
In sem nisl, auctor sit amet facilisis ac, rhoncus vitae
|
||||||
|
nisi. In egestas nisl sit amet dapibus vulputate.`,
|
||||||
|
time: "20:00-22:00",
|
||||||
|
date: "05 нояб 2022",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
image: `${Image4}`,
|
||||||
|
tags: ["THEME1"],
|
||||||
|
title: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
|
||||||
|
description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
|
||||||
|
aliquam eleifend quam, vel aliquet purus scelerisque sed.`,
|
||||||
|
time: "20:00-22:00",
|
||||||
|
date: "05 нояб 2022",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
image: `${Image5}`,
|
||||||
|
tags: ["LOREM", "THEME1"],
|
||||||
|
title: `Phasellus vitae venenatis lacus`,
|
||||||
|
description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||||
|
Ut ultrices libero sit amet orci finibus tempus eu at orci.
|
||||||
|
In sem nisl, auctor sit amet facilisis ac, rhoncus vitae
|
||||||
|
nisi. In egestas nisl sit amet dapibus vulputate.`,
|
||||||
|
time: "20:00-22:00",
|
||||||
|
date: "05 нояб 2022",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
image: `${Image6}`,
|
||||||
|
tags: ["THEME1"],
|
||||||
|
title: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
|
||||||
|
description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
|
||||||
|
aliquam eleifend quam, vel aliquet purus scelerisque sed.`,
|
||||||
|
time: "20:00-22:00",
|
||||||
|
date: "05 нояб 2022",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
image: `${Image7}`,
|
||||||
|
tags: ["FAMILY", "THEME2"],
|
||||||
|
title: `Phasellus vitae venenatis lacus`,
|
||||||
|
description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||||
|
Ut ultrices libero sit amet orci finibus tempus eu at orci.
|
||||||
|
In sem nisl, auctor sit amet facilisis ac, rhoncus vitae
|
||||||
|
nisi. In egestas nisl sit amet dapibus vulputate.`,
|
||||||
|
time: "20:00-22:00",
|
||||||
|
date: "05 нояб 2022",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
image: `${Image8}`,
|
||||||
|
tags: ["THEME1"],
|
||||||
|
title: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
|
||||||
|
description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
|
||||||
|
aliquam eleifend quam, vel aliquet purus scelerisque sed.`,
|
||||||
|
time: "20:00-22:00",
|
||||||
|
date: "05 нояб 2022",
|
||||||
|
},
|
||||||
|
];
|
||||||
19
src/pages/services/index.jsx
Normal file
19
src/pages/services/index.jsx
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import FilterTools from "../../components/filterTools";
|
||||||
|
import CardsTable from "../../components/cardsTable";
|
||||||
|
|
||||||
|
import "./style.scss";
|
||||||
|
|
||||||
|
const ServicesPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="services-page">
|
||||||
|
<div className="services-container">
|
||||||
|
<FilterTools />
|
||||||
|
<CardsTable />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ServicesPage;
|
||||||
27
src/pages/services/style.scss
Normal file
27
src/pages/services/style.scss
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
.services-page {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.services-container {
|
||||||
|
max-width: 1064px;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 20px 5px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
max-width: 1000px;
|
||||||
|
|
||||||
|
padding-right: 40px;
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 580px) {
|
||||||
|
padding-left: 30px;
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user