chore: Adding i18n support

src/App.vue

@@ -2,33 +2,37 @@
   <div class="min-h-screen flex flex-col" style="gap: 4rem;"><!-- Main application wrapper -->
     <!-- <SideBar /> -->
 
-    <h1 class="title has-text-black p-6">BRÅTULA VIOSSA.NET MÅDE</h1>
+    <section class="section">
+      <h1 class="title has-text-black p-6">BRÅTULA VIOSSA.NET MÅDE</h1>
+    </section>
 
-    <PaddingWrapper v-for="(sectionName, index) in sectionList" :key="index">
-      <component :is="sectionName" />
-    </PaddingWrapper>
+    <section class="section">
+      <HomeSectionWrapper 
+        v-for="(section, index) in sectionList" 
+        :key="index"
+        :title="section.title"
+        :text="section.text"
+        :image="section.image"
+        :alt="section.alt"
+        :reverse="index % 2 !== 0"
+      />
+    </section>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 // import SideBar from './components/organisms/SideBar.vue'
-import PaddingWrapper from './components/molecules/PaddingWrapper.vue'
-import IntroSection from './components/organisms/IntroSection.vue'
-import HistorySection from './components/organisms/HistorySection.vue'
+import HomeSectionWrapper from './components/molecules/HomeSectionWrapper.vue'
 import './assets/style.scss'
 import 'bulma/css/bulma.css'
+import { useI18n } from 'vue-i18n'
+import type { MessageSchema } from './i18n/types'
+import { computed } from 'vue'
 
-export default {
-  name: 'app',
-  components: {
-    PaddingWrapper,
-    IntroSection,
-    HistorySection
-  },
-  data() {
-    return {
-      sectionList: ['IntroSection', 'HistorySection']
-    }
-  }
-}
+const { tm } = useI18n()
+const sectionList = computed<MessageSchema['sections']>(() => tm('sections'))
+
+console.log(sectionList.value)
 </script>
+
+