feat: about section finished

index.html

@@ -37,6 +37,28 @@ <h1 class="hero__title">Make your dream business goal come true</h1>
       />
     </section>
 
+    <section class="about">
+      <span class="about__caption"> Our services </span>
+      <h2 class="about__title">Our Teammate</h2>
+      <p class="about__description">
+        We move with make a Creative Strategy for help your business goal, we
+        help to improve your income by a services we have. make your content
+        look interesting and make people look for your business2
+        <br /><br />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu neque tempor
+        at ut auctor maecenas,Lorem ipsum d
+      </p>
+      <div class="about__buttons">
+        <button class="about__button">About Us</button>
+        <button class="about__button about__button--outline">
+          <img src="/icons/icon-play-circle.svg" />
+          About Us
+        </button>
+      </div>
+
+      <img src="/images/about-mobile.png" alt="#" class="about__image" />
+    </section>
+
     <section class="services">
       <span class="services__caption">Our services</span>
       <h2 class="services__title">Perfect and Fast Movement</h2>

scss/index.scss

@@ -11,6 +11,7 @@
 // load all section styles
 @import "sections/header.scss";
 @import "sections/hero.scss";
+@import "sections/about.scss";
 @import "sections/services.scss";
 @import "sections/portfolio.scss";
 @import "sections/testimonial.scss";

scss/mixins/button.scss

@@ -19,6 +19,7 @@
     color: $color-accent;
     border: 1px solid $color-accent;
     background-color: transparent;
+    box-shadow: none;
     padding: 10px 35px;
     border-radius: 24px;
     font-size: 1.2rem;

scss/sections/about.scss

@@ -0,0 +1,44 @@
+.about {
+  padding: 0 25px;
+  margin-bottom: 100px;
+
+  &__caption {
+    @include caption;
+    margin: 0 auto 10px;
+  }
+
+  &__title {
+    @include title;
+    text-align: center;
+    margin-bottom: 35px;
+  }
+
+  &__description {
+    @include paragraph;
+    margin-bottom: 35px;
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    margin-bottom: 50px;
+  }
+
+  &__button {
+    @include button;
+
+    &--outline {
+      @include button("outline");
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+    }
+  }
+
+  &__image {
+    width: 100%;
+    margin: auto;
+  }
+}