first commit

public/scss/component/_icon-box.scss

@@ -0,0 +1,189 @@
+@use "../abstracts/index" as *;
+
+.tf-box-icon {
+  @include transition3();
+  &.style-1 {
+    .icon {
+      max-width: 360px;
+      padding: 60px 100px;
+      border-radius: 280px;
+      @include flex(center, center);
+      margin-bottom: 34px;
+      background-color: var(--White);
+      img {
+        animation: iconShape 5s linear infinite;
+      }
+    }
+  }
+  &.style-2 {
+    height: 581px;
+    padding: 32px 24px 23px;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    border: 1px solid var(--Mono-gray-2);
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background-image: url(/images/item/shape-1.png);
+    }
+    .number {
+      color: var(--Mono-gray-2);
+      font-family: $font-main2;
+      font-weight: 600;
+      font-size: 135.36px;
+      line-height: 169.2px;
+      letter-spacing: -1%;
+      position: absolute;
+      @include transition3();
+      top: -66px;
+      left: -38px;
+    }
+    .content {
+      position: relative;
+      z-index: 2;
+    }
+    .btn_link {
+      margin-top: 59px;
+      position: relative;
+      &::after {
+        position: absolute;
+        content: "";
+        width: 100%;
+        height: 1px;
+        background-color: var(--Primary);
+        @include transition3();
+        bottom: 0;
+        left: 0;
+      }
+      &:hover {
+        &::after {
+          background-color: var(--Black);
+        }
+      }
+    }
+    &:hover {
+      background-color: var(--Sub-color-2);
+      .number {
+        color: var(--White);
+      }
+    }
+  }
+  &.style-3 {
+    padding: 30px 38px 26px 40px;
+    border: 1px solid var(--Mono-gray-2);
+    max-width: 430px;
+    position: relative;
+    background-image: url(/images/item/shape-2.png);
+    background-repeat: no-repeat;
+    background-color: var(--White);
+    .number {
+      border: 1px solid var(--Mono-gray-2);
+      display: block;
+      position: absolute;
+      height: 40px;
+      width: 40px;
+      @include flex(center, center);
+      border-radius: 999px;
+      background-color: var(--Mono-gray-2);
+      top: 50%;
+      transform: translateY(-50%);
+      @include transition3();
+      color: var(--Mono-dark-9);
+      z-index: 1;
+      &::after {
+        content: "";
+        width: 0;
+        position: absolute;
+        height: 1px;
+        left: 100%;
+        background-color: var(--Primary-fc-green-100);
+        @include transition5();
+        z-index: -1;
+      }
+    }
+    .icon {
+      max-width: max-content;
+      margin-left: auto;
+      margin-bottom: 131px;
+    }
+    .title {
+      margin-bottom: 2px;
+    }
+    .title,
+    a {
+      @include transition3();
+    }
+  }
+  &.style-4 {
+    padding: 40px 40px 33px;
+    border-radius: 24px;
+    height: 429px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background-color: var(--White);
+    .icon {
+      flex-shrink: 0;
+      padding-top: 14px;
+    }
+    &:hover {
+      box-shadow: 0px 4px 20px 0px #00000026;
+    }
+  }
+  &.style-5 {
+    padding: 34px 31px 26px;
+    border-radius: 12px;
+    border: 1px solid var(--Mono-gray-2);
+  }
+  &.style-6 {
+    padding: 40px 40px 45px;
+    border-radius: 16px;
+    position: relative;
+    overflow: hidden;
+    .item {
+      position: absolute;
+      top: -36%;
+      right: -30%;
+    }
+    .icon {
+      height: 64px;
+      width: 64px;
+      border-radius: 12px;
+      background-color: var(--Primary);
+      @include flex(center, center);
+      margin-bottom: 150px;
+    }
+  }
+  &.style-7 {
+    padding: 40px 40px 33px;
+    background-color: var(--White);
+    border-radius: 24px;
+    i {
+      font-size: 80px;
+      color: var(--Primary);
+    }
+    svg path {
+      @include transition3();
+    }
+    &.v2 {
+      border-radius: 24px;
+      background-color: var(--Sub-color-1);
+      padding: 41px 41px 31px;
+      .icon {
+        i {
+          font-size: 80px;
+        }
+      }
+    }
+    &.v3 {
+    }
+    &:hover {
+      svg path {
+        stroke: var(--Primary);
+      }
+    }
+  }
+}