Initial commit

2024-03-01 17:47:03 +03:00
commit 10722da013
227 changed files with 13356 additions and 0 deletions
--- a/frontend/src/styles/components/menu.css
+++ b/frontend/src/styles/components/menu.css
@@ -0,0 +1,119 @@
+.menu__inner {
+  padding: 0.2rem;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  column-gap: 0.5rem;
+  row-gap: 0.2rem;
+}
+
+.menu-link {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0 3.6rem;
+  box-shadow: 2px 2px 5px 0px #00000040;
+  border: 1px solid;
+  border-image-source: linear-gradient(0deg, #c2c2c2 0%, #ffffff 100%);
+  background: #f7f8f3;
+  min-height: 9.4rem;
+}
+
+@media (max-width: 1023px) {
+  .menu-link {
+    padding: 0 2.1rem;
+  }
+}
+
+.menu-link:hover .menu-link__bg {
+  opacity: 1;
+}
+
+.menu-link__bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  opacity: 0;
+  transition: 0.3s;
+}
+
+.menu-link__bg img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.menu-link__icon {
+  display: flex;
+  margin-bottom: 0.8rem;
+  position: relative;
+  z-index: 1;
+}
+
+.menu-link__text {
+  font-weight: 600;
+  font-size: 1.2rem;
+  line-height: 1.4rem;
+  position: relative;
+  z-index: 1;
+}
+
+@media (max-width: 767px) {
+  .menu {
+    padding: 1.5rem 0;
+    overflow: auto;
+    background: #edefe4;
+  }
+
+  .menu::-webkit-scrollbar {
+    display: none;
+  }
+
+  .menu__inner {
+    display: flex;
+    column-gap: 0.9rem;
+  }
+
+  .menu-link {
+    min-width: 25rem;
+    flex-direction: row;
+    gap: 1.5rem;
+    min-height: 5.4rem;
+    padding: 1.6rem 2.3rem;
+    justify-content: flex-start;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .menu__inner::after {
+    content: '';
+    display: flex;
+    width: 2rem;
+    min-width: 2rem;
+    height: 2rem;
+  }
+
+  .menu-link__bg {
+    display: none;
+  }
+
+  .menu-link__icon {
+    width: 2rem;
+    margin: 0;
+  }
+
+  .menu-link__icon img {
+    max-width: 100%;
+  }
+
+  .menu-link__text {
+    font-size: 1.3rem;
+    line-height: 1.5rem;
+    color: var(--secondary);
+  }
+}