feat(transition): add transition to all elements

src/assets/styles/main.css

@@ -1,3 +1,4 @@
 .icon {
-  vertical-align: middle
+  vertical-align: middle;
+  transition: all 1s ease-in-out;
 }

src/components/commons/Footer/Footer.css

@@ -1,3 +1,4 @@
 .footer {
   padding: 2rem !important;
+  transition: all 1s ease-in-out;
 }

src/components/commons/Header/Header.css

@@ -0,0 +1,3 @@
+nav, section {
+  transition: all 1s ease-in-out;
+}

src/components/commons/Header/Header.vue

@@ -21,3 +21,4 @@
 </template>
 
 <script lang="ts" src="./Header.ts"></script>
+<style src="./Header.css" scoped></style>

src/components/commons/Layout/Layout.css

@@ -1,3 +1,7 @@
 .hero-body {
     align-items: flex-start !important;
 }
+
+.hero, section {
+  transition: all 1s ease-in-out;
+}

src/components/commons/Layout/Layout.vue

@@ -13,4 +13,4 @@
 </template>
 
 <script lang="ts" src="./Layout.ts"></script>
-<style src="./Layout.css" scoped></style>
+<style src="./Layout.css"></style>