Working

src/components/Banner.vue

@@ -9,9 +9,9 @@
         {{ $t('home.banner.student.main') }} <strong>{{ $t('home.banner.student.strong') }}</strong>.
       </h2>
       <div class="select-none mt-4 text-5xl text-gray-800 mb-10 dark:text-gray-300">
-        <span id="develop" class="color blue">Develop.</span>
-        <span id="publish" class="color">Publish.</span>
-        <span id="improve" class="color">Improve.</span>
+        <span id="develop" class="color blue">{{ $t('home.banner.color.develop') }}</span>
+        <span id="publish" class="color">{{ $t('home.banner.color.publish') }}</span>
+        <span id="improve" class="color">{{ $t('home.banner.color.improve') }}</span>
       </div>
     </div>
   </section>

src/components/Footer.vue

@@ -156,13 +156,17 @@ export default defineComponent({
       @apply border-indigo-600
     }
   }
-  .link {
-    a {
-      @apply border-b-2 border-transparent duration-300;
+  .link-active a {
+    @apply text-indigo-600;
+  }
 
-      &:hover {
-        @apply border-indigo-600;
-      }
+  .social-links a {
+    svg {
+      @apply h-6 w-6 duration-300
+    }
+
+    &:hover svg {
+      @apply transform hover:scale-120
     }
   }
 }

src/components/SideMenu.vue

@@ -161,7 +161,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .cross:hover svg {
   @apply transform scale-140;
 }