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

apps/vdn-static/src/components/molecules/HomeSectionWrapper.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps<{
+	title: string;
+	text: string;
+	image?: string;
+	alt?: string;
+	reverse: boolean;
+}>();
+</script>
+
+<template>
+	<div class="box my-5 px-4 py-3 columns is-vcentered">
+		<template v-if="reverse">
+			<div class="column">
+				<h2 class="title is-4">{{ title }}</h2>
+				<p class="has-text-white">{{ text }}</p>
+			</div>
+			<div class="column is-one-quarter" v-if="image">
+				<figure class="image">
+					<img :src="image" :alt="alt" :title="alt" />
+				</figure>
+			</div>
+		</template>
+
+		<template v-else>
+			<div class="column is-one-quarter" v-if="image">
+				<figure class="image">
+					<img :src="image" :alt="alt" :title="alt" />
+				</figure>
+			</div>
+			<div class="column">
+				<h2 class="title is-4">{{ title }}</h2>
+				<p class="has-text-white">{{ text }}</p>
+			</div>
+		</template>
+	</div>
+</template>

apps/vdn-static/src/components/molecules/LearningResourceWrapper.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="box columns is-vcentered is-gap-4">
+    <div class="column is-one-quarter" v-if="image">
+      <figure class="image">
+        <img :src="image" :alt="alt" :title="alt" />
+      </figure>
+    </div>
+    <div class="column">
+      <h4 class="title">{{ title }}</h4>
+      <p class="subtitle">{{ subtitle }}</p>
+      <p class="content">{{ desc }}</p>
+
+      <div class="level">
+        <a :href="link" 
+          target="_blank" 
+          rel="noopener noreferrer nofollow" 
+          class="button is-primary is-medium"
+          :text="joinText">
+        </a>
+
+        <a :href="``" 
+          target="_blank" 
+          rel="noopener noreferrer nofollow"
+          class="button is-info is-outlined is-medium" 
+          :text="rulesText">
+        </a>
+
+        <a :href="rulesLink" 
+          target="_blank" 
+          rel="noopener noreferrer nofollow"
+          class="button is-warning is-outlined is-medium" 
+          :text="rulesText">
+        </a>
+      </div>
+
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: String,
+  subtitle: String,
+  desc: String,
+  link: String,
+  rulesLink: String,
+  joinText: String,
+  rulesText: String,
+  image: { type: String, required: false },
+  alt: { type: String, required: false },
+})
+</script>

apps/vdn-static/src/components/molecules/PaddingWrapper.vue

@@ -0,0 +1,9 @@
+<template>
+	<div class="box my-6">
+		<slot />
+	</div>
+</template>
+
+<script lang="ts">
+export default { name: "PaddingWrapper" };
+</script>

apps/vdn-static/src/components/molecules/molecules.md

@@ -0,0 +1,9 @@
+# What are molecules?
+
+https://bradfrost.com/blog/post/atomic-web-design/
+
+Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.
+
+For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.
+
+Building up to molecules from atoms encourages a “do one thing and do it well” mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.