Add home page specific components

src/components/home/CardsSlider.module.scss

@@ -0,0 +1,249 @@
+@import "~@/scss/solutions/_variables.scss";
+
+$homeSliderAnimationTime: 0.3s;
+
+.Title {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 1.04;
+  letter-spacing: -0.01em;
+  text-align: center;
+  color: var(--white);
+  text-transform: capitalize;
+  margin: 0;
+  padding: 64px 24px 0;
+
+  strong {
+    background: var(--gradient-2);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  @include breakpoint(md) {
+    font-size: 56px;
+    padding-top: 80px;
+  }
+
+  @include breakpoint(lg) {
+    padding-top: 128px;
+  }
+}
+
+.Carousel {
+  position: relative;
+  width: 100%;
+
+  @include breakpoint(lg) {
+    padding-bottom: 4rem;
+  }
+}
+
+.CarouselContainer {
+  display: flex;
+  width: 100%;
+  padding: {
+    top: 64px;
+    bottom: 64px;
+  }
+
+  overflow-x: scroll;
+  overscroll-behavior-x: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: none; /*FireFox*/
+  -ms-overflow-style: -ms-autohiding-scrollbar; /*IE10+*/
+
+  /*Chrome, Safari, Edge*/
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @include breakpoint(md) {
+    padding: {
+      top: 80px;
+      bottom: 80px;
+    }
+  }
+
+  @include breakpoint(lg) {
+    padding: {
+      top: 96px;
+      bottom: 40px;
+    }
+  }
+}
+
+.Cards {
+  display: flex;
+  justify-content: start;
+  gap: 16px;
+  padding-left: 16px;
+  max-width: 80rem;
+  margin: 0 auto;
+
+  &:hover {
+    .CardWrapper:not(:hover) {
+      opacity: 0.5 !important;
+      transform: scale(0.98) !important;
+    }
+  }
+}
+
+.CardWrapper {
+  border-radius: 1.5rem;
+  transition:
+    opacity 0.275s ease-in-out,
+    transform 0.275s ease-in-out;
+  transition-delay: 0.15s;
+
+  &:last-child {
+    padding-right: 5%;
+
+    @include breakpoint(md) {
+      padding-right: 33%;
+    }
+  }
+}
+
+.Card {
+  height: 27rem;
+  width: 18rem;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: start;
+  position: relative;
+  z-index: 10;
+  border-radius: 20px;
+  color: var(--white);
+  perspective: 100vh;
+
+  transition:
+    transform 0.3s cubic-bezier(0.76, 0, 0.24, 1),
+    box-shadow 0.3s ease-out;
+
+  &:hover {
+    cursor: pointer;
+    transform: scale(1.03) translate(0, -8px) rotateX(4deg);
+
+    img {
+      transform: scale(1);
+    }
+  }
+
+  .CardContent {
+    position: relative;
+    z-index: 40;
+    padding: 24px;
+
+    .CardTitle {
+      text-transform: capitalize;
+      font-size: 20px;
+      font-weight: 700;
+      line-height: 1.21;
+      text-align: left;
+      transition: transform $homeSliderAnimationTime $easeInOutQuart;
+      margin-bottom: 8px;
+
+      @include breakpoint(md) {
+        font-size: 28px;
+        font-weight: 700;
+        line-height: 1.15;
+        letter-spacing: -0.01em;
+        text-align: left;
+      }
+    }
+
+    .CardText {
+      text-transform: uppercase;
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 1.2;
+      letter-spacing: 0.02em;
+      text-align: left;
+      font-family: var(--abc-mono-font);
+      transition: transform $homeSliderAnimationTime $easeInOutQuart;
+
+      @include breakpoint(md) {
+        font-size: 19px;
+        font-weight: 400;
+        line-height: 1.15;
+        letter-spacing: 0.02em;
+        text-align: left;
+      }
+
+      span {
+        display: block;
+      }
+    }
+  }
+
+  .ArrowWrapper {
+    position: absolute;
+    bottom: 24px;
+    right: 24px;
+    background: var(--white);
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    z-index: 40;
+    transition: transform $homeSliderAnimationTime $easeInOutQuart;
+
+    svg {
+      transition: 0.2s ease-in;
+    }
+  }
+
+  .CardImage {
+    object-fit: cover;
+    position: absolute;
+    z-index: 10;
+    inset: 0px;
+    transform: scale(1.05);
+    transition: transform $homeSliderAnimationTime $easeInOutQuart;
+
+    &.Loading {
+      filter: blur(4px);
+    }
+  }
+
+  @include breakpoint(md) {
+    height: 34rem;
+    width: 22rem;
+  }
+}
+
+.Arrows {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  padding-bottom: 64px;
+
+  button {
+    position: relative;
+    z-index: 40;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    background-color: var(--grey-300);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.1s ease;
+    transition:
+      background 0.3s ease-in-out,
+      transform 0.15s $easeInOutQuart;
+
+    &:disabled {
+      background-color: var(--grey-500);
+
+      svg path {
+        stroke: var(--grey-300);
+      }
+    }
+  }
+}