From 76ea26ba79c8dd659ba0f083e263c3622ea8128c Mon Sep 17 00:00:00 2001
From: taskylizard <75871323+taskylizard@users.noreply.github.com>
Date: Sat, 3 Aug 2024 13:20:36 +0000
Subject: [PATCH] feat: add wallpapers page

---
 docs/.vitepress/config.mts                    |  1 +
 .../theme/components/WallpaperCard.vue        | 40 +++++++++++++++++++
 docs/other/wallpapers.md                      | 28 +++++++++++++
 3 files changed, 69 insertions(+)
 create mode 100644 docs/.vitepress/theme/components/WallpaperCard.vue
 create mode 100644 docs/other/wallpapers.md

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index c5d994e06..ba5649529 100644
--- a/docs/.vitepress/config.mts
+++ b/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/' }
diff --git a/docs/.vitepress/theme/components/WallpaperCard.vue b/docs/.vitepress/theme/components/WallpaperCard.vue
new file mode 100644
index 000000000..4c3d84124
--- /dev/null
+++ b/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>
diff --git a/docs/other/wallpapers.md b/docs/other/wallpapers.md
new file mode 100644
index 000000000..28fe553e6
--- /dev/null
+++ b/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"
+/>