feat: author & lang credits for greetings, flag icons, hero banner styling updates

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

@@ -2,6 +2,7 @@
 import HomeSectionWrapper from "@/components/molecules/HomeSectionWrapper.vue";
 import { useLocale } from "@/i18n";
 import { GREETINGS, type Greeting } from "@/i18n/greeting";
+import { VILANTIC_ID_TO_FLAG } from "@/i18n/vilantic";
 import { localizeLayout } from "@/utils/localizeLayout";
 import { randomElement } from "@/utils/random";
 
@@ -11,10 +12,23 @@ const greeting: Greeting = randomElement(GREETINGS);
 
 <template>
 	<div>
-		<section class="hero is-primary">
+		<section class="hero has-background-primary-soft is-primary">
-			<div class="hero-body">
+			<div
-				<div class="title">{{ greeting.title }}</div>
+				class="hero-body"
-				<div class="subtitle">{{ greeting.subtitle }}</div>
+				style="padding-top: 3.75rem; padding-bottom: 3rem">
+				<div class="title has-text-text-bold">{{ greeting.title }}</div>
+				<div class="subtitle has-text-text-bold mb-4">
+					{{ greeting.subtitle }}
+				</div>
+				<div
+					class="subtitle is-size-6 is-flex is-flex-direction-row is-align-items-center is-gap-1 has-text-text-bold">
+					&mdash; {{ greeting.author }} ({{
+						locale.vilanticLangs[greeting.lang]
+					}})
+					<figure class="image is-32x32">
+						<img :src="VILANTIC_ID_TO_FLAG[greeting.lang]" />
+					</figure>
+				</div>
 			</div>
 		</section>
 

apps/vdn-static/src/i18n/greeting.ts

@@ -1,15 +1,23 @@
+import type { VilanticId } from "./vilantic";
+
 export interface Greeting {
 	title: string;
 	subtitle: string;
+	author: string;
+	lang: VilanticId;
 }
 
 export const GREETINGS = [
 	{
 		title: "BRÅTULA VIOSSA.NET MÅDE",
 		subtitle: "Hadjiplas per lera para Viossa – glossa fu vi",
+		author: "Jez",
+		lang: "viossa",
 	},
 	{
 		title: "akka po viossa.net!",
 		subtitle: "kenomasufobo o gen wi tropos o viosox",
+		author: "Tetro",
+		lang: "wodox",
 	},
 ] as const satisfies Greeting[];

apps/vdn-static/src/i18n/locale.ts

@@ -1,5 +1,8 @@
+import type { VilanticId } from "./vilantic";
+
 export interface Locale {
 	localeName: string;
+	vilanticLangs: VilanticLangs;
 	navbar: Navbar;
 	home: HomePage;
 	resources: ResourcesPage;
@@ -11,6 +14,8 @@ export interface Layout<T> {
 	data: { [K in keyof T]: T[K] };
 }
 
+export type VilanticLangs = Record<VilanticId, string>;
+
 export interface Navbar {
 	whatIsViossa: string;
 	resources: string;

apps/vdn-static/src/i18n/vilantic.ts

@@ -0,0 +1,9 @@
+import viossaFlag from "@/assets/flag_vp.webp";
+import wodoxFlag from "@/assets/flag_wp.webp";
+
+export type VilanticId = "viossa" | "wodox";
+
+export const VILANTIC_ID_TO_FLAG = {
+	viossa: viossaFlag,
+	wodox: wodoxFlag,
+} as const satisfies Record<VilanticId, string>;

apps/vdn-static/src/locales/en_US.ts

@@ -4,6 +4,7 @@ import discordImg from "@/assets/discord.png";
 
 export default {
 	localeName: "English",
+	vilanticLangs: { viossa: "Viossa", wodox: "Wodoch" },
 	navbar: {
 		whatIsViossa: "What is Viossa?",
 		resources: "Resources",

apps/vdn-static/src/locales/wp_VL.ts

@@ -5,6 +5,7 @@ import type { DeepPartial } from "@/utils/deep-partial";
 
 export default {
 	localeName: "wodox",
+	vilanticLangs: { viossa: "viosox", wodox: "wodox" },
 	navbar: {
 		whatIsViossa: "viosox e ano?",
 		resources: "tropos",