feat: add wallpapers page

docs/.vitepress/config.mts

@@ -100,6 +100,7 @@ export default defineConfig({
         items: [
           { text: '📰 Posts', link: '/posts' },
           { text: '💬 Feedback', link: '/feedback' },
+          { text: '🏞 Wallpapers', link: '/other/wallpapers' },
           { text: '📋 snowbin', link: 'https://pastes.fmhy.net' },
           { text: '🔍 SearXNG', link: 'https://searx.fmhy.net/' },
           { text: '🔍 Whoogle', link: 'https://whoogle.fmhy.net/' }

docs/.vitepress/theme/components/WallpaperCard.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  description: string
+  mobile: string
+  desktop: string
+}>()
+</script>
+
+<template>
+  <div
+    class="rounded-lg border bg-bg-elv text-text shadow-sm w-full max-w-md"
+    data-v0-t="card"
+  >
+    <div class="flex flex-col space-y-1.5 p-6 pb-4">
+      <h4
+        class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight"
+      >
+        {{ title }}
+      </h4>
+      <p class="text-sm font-medium leading-none tracking-tight">
+        {{ description }}
+      </p>
+    </div>
+    <div class="p-6">
+      <img
+        :src="desktop"
+        :alt="title"
+        class="rounded-md object-cover aspect-[3/2]"
+        width="600"
+        height="400"
+      />
+    </div>
+    <div class="items-center p-6 flex gap-4">
+      <a :href="mobile" target="_blank">Mobile</a>
+      <span class="">•</span>
+      <a :href="desktop" target="_blank">Desktop</a>
+    </div>
+  </div>
+</template>

docs/other/wallpapers.md

@@ -0,0 +1,28 @@
+---
+title: Wallpapers
+description: Elevate yourself to the next level with our beautiful wallpapers.
+---
+
+<script setup>
+import WallpaperCard from '../.vitepress/theme/components/WallpaperCard.vue'
+</script>
+
+## Wallpapers
+
+Elevate yourself to the next level with our beautiful wallpapers.
+
+<WallpaperCard
+  title="Arc"
+  description="A rounded arc design with a gradient background."
+  mobile="https://cdn.jsdelivr.net/gh/fmhy/design-system/branding/arc_mobile.png"
+  desktop="https://cdn.jsdelivr.net/gh/fmhy/design-system/branding/arc_desktop.png"
+/>
+
+---
+
+<WallpaperCard
+  title="Rays"
+  description="A gradient background with a rays design."
+  mobile="https://cdn.jsdelivr.net/gh/fmhy/design-system/branding/rays_mobile.png"
+  desktop="https://cdn.jsdelivr.net/gh/fmhy/design-system/branding/rays_desktop.png"
+/>