Renew partners

package.json

@@ -17,6 +17,7 @@
     "global": "^4.4.0",
     "gridsome": "^0.7.14",
     "gridsome-plugin-remark-prismjs-all": "^0.3.5",
+    "gsap": "^3.5.1",
     "prismjs": "^1.20.0",
     "sharp": "^0.26.2",
     "swiper": "^6.0.4",

src/assets/scss/_color.scss

@@ -10,4 +10,6 @@ $mid-gray-1: #60759f;
 $mid-gray-2: #afbacf;
 $mid-gray-3: #cfd6e2;
 $light-gray-1: #eef1f5;
-$light-gray-2: #f9f9fb;
+$light-gray-2: #f9f9fb;
+
+$text-black: #001A4D;

src/components/CallToAction.vue

@@ -201,13 +201,15 @@
         }
       }
     }
+    // 対象、時間、カレンダー
     .cta-task-overview {
       background-color: $primary;
       color: #fff;
       min-height: 320px;
       display: flex;
       justify-content: center;
       align-items: center;
+      border-radius: 0 3px 3px 0;
       @include media-breakpoint-down(sm) {
         min-height: 480px;
       }

src/components/TopClients.vue

@@ -54,14 +54,18 @@
 </template>
 
 <script>
+/*import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+gsap.registerPlugin(ScrollTrigger)*/
+
 export default {
 
 }
 </script>
 
 <style lang="scss" scoped>
   .v-content {
-    padding: 80px 0;
+    padding: 80px 0 160px 0;
     background: $light-gray-2;
     display: block;
     flex: initial;
@@ -71,7 +75,7 @@ export default {
     }
   }
   h2 {
-    color: $primary;
+    color: $secondary;
     font-size: 3.5rem;
     font-family: $font-en-normal;
     font-weight: normal;
@@ -80,6 +84,7 @@ export default {
     display: block;
     width: 100%;
     margin-bottom: 64px;
+    position: relative;
     @include media-breakpoint-up(md) {
       font-size: 4rem;
     }
@@ -93,6 +98,17 @@ export default {
       font-weight: normal;
       font-family: $font-jp-normal;
     }
+    &::after {
+      content: '';
+      display: block;
+      width: 80px;
+      height: 1px;
+      background-color: $secondary;
+      position: absolute;
+      left: 50%;
+      margin-left: -40px;
+      bottom: -24px;
+    }
   }
   .clients-image-container {
     width: 80%;
@@ -115,6 +131,7 @@ export default {
       margin: 12px;
       box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.08);
       border-radius: 3px;
+      backface-visibility: hidden;
       @include media-breakpoint-down(md) {
         flex-basis: calc(25% - 36px);
         margin: 12px;