feat: first draft of learning resource cards

src/components/molecules/LearningResourceWrapper.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="box m-3 p-3 columns">
+    <div class="column is-one-quarter" v-if="image">
+      <figure class="image">
+        <img :src="image" :alt="alt" />
+      </figure>
+    </div>
+    <div class="column">
+      <h2 class="title">{{ title }}</h2>
+      <p class="has-text-white is-size-4 mb-4">{{ desc }}</p>
+      <h3 class="is-size-3"><a href="{{ link }}">{{ link }}</a></h3>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: String,
+  desc: String,
+  link: String,
+  image: { type: String, required: false },
+  alt: { type: String, required: false },
+})
+</script>

src/locales/en_US.ts

@@ -16,5 +16,14 @@ export default {
       "title": "Community",
       "text": "The Viossa community is rich and colourful, drawing from many global traditions due to its worldwide online membership. Since the teaching culture puts an emphasis on linguistic immersion, and discourages prescriptivism, the culture of Viossa is as diverse and varied as the language and the people who speak it. For many, their personal dialect is a key form of identity and expression. The fluid nature of Viossa and lack of defined meanings makes Viossa popular for creative purposes, such as poetry and songwriting.",
     }
+  ],
+  "resources": [
+    {
+      "title": "Discord Server",
+      "desc": "This is where most of the action happens! Hop on in!",
+      "link": "https://discord.gg/g3mG2gYjZD",
+      "image": "discord.png",
+      "alt": "Discord logo"
+    }
   ]
 }

src/routes/resources.vue

@@ -1,3 +1,42 @@
 <template>
-	<h1>Resources</h1>
+	<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>