feat: switching from auto-route to manual route definitions

src/components/pages/HomePage.vue

@@ -0,0 +1,44 @@
+<template>
+	<div class="min-h-screen flex flex-col" style="gap: 4rem">
+		<!-- Main application wrapper -->
+    <section class="section">
+      <h1 class="title has-text-black p-6">BRÅTULA VIOSSA.NET MÅDE</h1>
+    </section>
+
+    <section class="section">
+      <HomeSectionWrapper 
+        v-for="(section, index) in sectionsWithImages" 
+        :key="index"
+        :title="section.title"
+        :text="section.text"
+        :image="section.image"
+        :alt="section.alt"
+        :reverse="index % 2 !== 0"
+      />
+    </section>
+	</div>
+</template>
+
+<script setup lang="ts">
+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'
+
+const { tm } = useI18n()
+const sectionList = computed<MessageSchema['sections']>(() => tm('sections'))
+const sectionsWithImages = computed(() =>
+  sectionList.value.map(section => {
+    if (!section.image) return section
+
+    return {
+      ...section,
+      image: new URL(`../../assets/${section.image}`, import.meta.url).href
+    }
+  })
+)
+
+console.log(sectionList.value)
+</script>

src/components/pages/ResourcesPage.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="min-h-screen flex flex-col" style="gap: 4rem">
+		<!-- Main application wrapper -->
+    <section class="section">
+      <h1 class="title has-text-black p-6">Learning Resources</h1>
+    </section>
+
+    <section class="section">
+      <LearningResourceWrapper class="is-one-quarter" 
+        v-for="(resource, index) in resourcesWithImages" 
+        :key="index"
+        :title="resource.title"
+        :desc="resource.desc"
+				:link="resource.link"
+        :image="resource.image"
+        :alt="resource.alt"
+      />
+    </section>
+	</div>
+</template>
+
+<script setup lang="ts">
+import LearningResourceWrapper from '@/components/molecules/LearningResourceWrapper.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'
+
+const { tm } = useI18n()
+const resourceList = computed<MessageSchema['resources']>(() => tm('resources'))
+const resourcesWithImages = computed(() =>
+  resourceList.value.map(resource => {
+    if (!resource.image) return resource
+
+    return {
+      ...resource,
+      image: new URL(`../../assets/${resource.image}`, import.meta.url).href
+    }
+  })
+)
+</script>