feat: setup monorepo for static frontend app (vdn-static)

apps/vdn-static/src/components/pages/HomePage.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import HomeSectionWrapper from "@/components/molecules/HomeSectionWrapper.vue";
+import "@/assets/style.scss";
+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>
+
+<template>
+	<div>
+		<section class="hero is-primary">
+			<div class="hero-body">
+				<div class="title">BRÅTULA VIOSSA.NET MÅDE</div>
+				<div class="subtitle">
+					Hadjiplas per lera para Viossa – glossa fu vi
+				</div>
+			</div>
+		</section>
+
+		<section class="section container">
+			<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>

apps/vdn-static/src/components/pages/ResourcesPage.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import LearningResourceWrapper from "@/components/molecules/LearningResourceWrapper.vue";
+import "@/assets/style.scss";
+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>
+
+<template>
+	<div>
+		<section class="section">
+			<h1 class="title">Learning Resources</h1>
+		</section>
+
+		<section class="section container">
+			<LearningResourceWrapper
+				v-for="(resource, index) in resourcesWithImages"
+				:key="index"
+				:title="resource.title"
+				:subtitle="resource.subtitle"
+				:desc="resource.desc"
+				:link="resource.link"
+				:rulesLink="resource.rulesLink"
+				:image="resource.image"
+				:alt="resource.alt"
+				:joinText="resource.joinText"
+				:rulesText="resource.rulesText" />
+		</section>
+	</div>
+</template>