feat: init project

src/App.js

@@ -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;

src/assets/links/instagram.svg

@@ -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>

src/assets/links/linkedin.svg

@@ -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>

src/assets/links/skype.svg

@@ -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>

src/assets/links/telegram.svg

@@ -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>

src/assets/links/vk.svg

@@ -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>

src/components/card/index.jsx

@@ -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;

src/components/card/style.scss

@@ -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;
+  }
+}

src/components/cardsTable/index.jsx

@@ -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;

src/components/cardsTable/style.scss

@@ -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;
+    }
+  }
+}

src/components/filterTools/index.jsx

@@ -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;

src/components/filterTools/style.scss

@@ -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;
+    }
+  }
+}

src/components/footer/index.jsx

@@ -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;

src/components/footer/style.scss

@@ -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;
+      }
+
+    }
+  }
+}

src/components/header/index.jsx

@@ -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;

src/components/header/style.scss

@@ -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;
+      }
+    }
+  }
+}

src/index.js

@@ -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>
+);

src/index.scss

@@ -0,0 +1,9 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  font-family: sans-serif;
+  font-size: 13px;
+}

src/logo.svg

@@ -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>

src/mockData/cards.js

@@ -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",
+  },
+];

src/pages/services/index.jsx

@@ -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;

src/pages/services/style.scss

@@ -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;
+    }
+  }
+}