Add sections About, What we do, What our clients say

ivelum · Dec 2, 2024 · 618a0fb · 618a0fb
1 parent 29da0cd
commit 618a0fb
Show file tree

Hide file tree

Showing 8 changed files with 399 additions and 25 deletions.
diff --git a/assets/sass/_about.scss b/assets/sass/_about.scss
@@ -112,6 +112,210 @@
       flex: 0 0 auto;
     }
   }
+
+  &--title {
+    color: $primary-violet;
+    margin-top: 3rem;
+    @include media-up(lg) {
+      margin-top: 4rem;
+    }
+    @include media-up(xl) {
+      margin-top: 6rem;
+    }
+  }
+
+  &--about-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    margin-top: 1rem;
+    @include media-up(md) {
+      flex-direction: row;
+      gap: 3rem;
+    }
+    @include media-up(lg) {
+      gap: 4rem;
+      margin-top: 2rem;
+    }
+    @include media-up(xl) {
+      gap: 5rem;
+      margin-top: 3rem;
+    }
+  }
+
+  &--about-item {
+    display: flex;
+    flex-direction: column;
+    @include media-up(md) {
+      width: 50%;
+    }
+  }
+
+  &--what-we-do-wrapper {
+    display: flex;
+    flex-direction: column;
+    margin-top: 1.5rem;
+    width: 100%;
+    @include media-up(md) {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+    @include media-up(lg) {
+      margin-top: 2.5rem;
+    }
+    @include media-up(xl) {
+      margin-top: 3.5rem;
+    }
+  }
+
+  &--what-we-do-item {
+    border: 1px solid $border-color-default;
+    margin-top: -1px;
+    padding: 1.5rem;
+    @include media-up(md) {
+      margin-left: -1px;
+      width: 50%;
+    }
+    @include media-up(lg) {
+      padding: 2rem;
+    }
+    @include media-up(xl) {
+      padding: 3rem;
+    }
+
+    &-title {
+      color: $font-color-dark;
+      margin-top: 1.5rem;
+      @include media-up(lg) {
+        margin-top: 2rem;
+      }
+      @include media-up(xl) {
+        margin-top: 3rem;
+      }
+    }
+
+    &-image {
+      display: block;
+      height: auto;
+      margin: auto;
+      max-width: 300px;
+      width: 100%;
+    }
+
+    &-text {
+      margin-top: 0.5rem;
+      @include media-up(lg) {
+        margin-top: 1rem;
+      }
+      @include media-up(xl) {
+        font-size: $font-size-bigger;
+        margin-top: 1.5rem;
+      }
+    }
+  }
+
+  &--action {
+    display: flex;
+    margin-top: 2rem;
+    position: relative;
+    @include media-up(md) {
+      margin-top: 3rem;
+    }
+    @include media-up(lg) {
+      margin-top: 4rem;
+    }
+    @include media-up(xl) {
+      margin-top: 6rem;
+    }
+
+    &-background {
+      height: auto;
+      margin: 0 auto;
+      max-width: 100%;
+      pointer-events: none;
+      user-select: none;
+    }
+
+    &-button {
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &--testimonials-wrapper {
+    display: grid;
+    gap: 1.5rem 2rem;
+    margin-top: 1.5rem;
+    @include media-up(md) {
+      gap: 3rem 2.5rem;
+    }
+    @include media-up(lg) {
+      gap: 3rem 4rem;
+      grid-template-columns: 1fr 1fr;
+      margin-top: 2.5rem;
+    }
+    @include media-up(xl) {
+      gap: 3.5rem 5rem;
+      margin-top: 3.5rem;
+    }
+  }
+
+  &--testimonials-item {
+    border-top: 1px solid $border-color-default;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding-top: 2rem;
+    @include media-up(md) {
+      padding-top: 2.5rem;
+    }
+    @include media-up(xl) {
+      gap: 0.5rem;
+      padding-top: 3.5rem;
+    }
+  }
+
+  &--testimonials-author {
+    align-items: center;
+    display: flex;
+    gap: 1rem;
+    @include media-up(xl) {
+      gap: 1.5rem;
+    }
+
+    &-image {
+      border-radius: 50%;
+      display: flex;
+      height: auto;
+      margin-top: 0.25rem;
+      width: 2.75rem;
+    }
+
+    &-body {
+      line-height: 1.8;
+    }
+
+    &-name {
+      color: $font-color-dark;
+
+      > svg {
+        margin-bottom: 0.25rem;
+        margin-left: 0.375rem;
+      }
+    }
+  }
+
+  &--testimonials-body {
+    @include media-up(sm) {
+      padding-left: 3.75rem;
+    }
+    @include media-up(xl) {
+      font-size: $font-size-bigger;
+      padding-left: 4.25rem;
+    }
+  }
 }
 
 @keyframes move {

diff --git a/assets/sass/_btn.scss b/assets/sass/_btn.scss
@@ -0,0 +1,82 @@
+@import './vars';
+@import './mixins';
+
+.btn {
+  @include transition(background-color, color, border);
+  align-items: center;
+  appearance: none;
+  background-color: $primary-orange;
+  border: 2px solid transparent;
+  border-radius: 2rem;
+  color: $white;
+  cursor: pointer;
+  display: inline-flex;
+  font-weight: $font-weight-default;
+  gap: 1rem;
+  justify-content: center;
+  outline: none;
+  padding: 0.75rem 2.5rem 0.625rem;
+  text-align: center;
+  white-space: nowrap;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: lighten($primary-orange, 10%);
+    color: $white;
+  }
+
+  &-big {
+    padding: 1rem 3rem 0.875rem;
+  }
+
+  &-small {
+    padding: 0.5rem 2.5rem 0.375rem;
+  }
+
+  &-outline-violet {
+    background-color: $white;
+    border: 2px solid $primary-violet;
+    color: $primary-violet;
+
+    &:hover,
+    &:focus {
+      background-color: $white;
+      border-color: $primary-orange;
+      color: $primary-orange;
+    }
+  }
+
+  &-with-arrow {
+    gap: 1rem;
+
+    img, svg {
+      margin-top: -1px; // fix icon position
+      overflow: visible;
+    }
+
+    .arrow-head {
+      @include transition(transform 0.25s);
+      transform: translateX(0);
+    }
+
+    .arrow-body {
+      @include transition(transform 0.25s, opacity 0.2s);
+      opacity: 0;
+      transform: scaleX(1);
+      transform-origin: left center;
+    }
+
+    &:hover .arrow-head {
+      transform: translateX(6px);
+    }
+
+    &:hover .arrow-body {
+      opacity: 1;
+      transform: scaleX(2);
+    }
+  }
+}
diff --git a/assets/sass/_vars.scss b/assets/sass/_vars.scss
@@ -4,6 +4,7 @@ $font-color-default: #3c3a40;
 $primary-orange: #ff5a00;
 $primary-violet: #3d0f9a;
 $white: #fff;
+$border-color-default: #d9d9d9;
 
 // Typography
 $font-size-default: 1rem;

diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -1,4 +1,5 @@
 @import './about';
+@import './btn';
 @import './fonts';
 @import './header';
 @import './typography';
@@ -19,3 +20,14 @@ body {
 html, * {
   box-sizing: border-box;
 }
+
+img, svg {
+  vertical-align: middle;
+}
+
+.container {
+  margin: 0 auto;
+  max-width: $container-default-max-width;
+  padding: 0 1.25rem;
+  width: 100%;
+}