Implement everything

pages/discord.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="flex flex-col items-center justify-center min-h-screen px-4">
+    <!-- Title -->
+    <h1 class="text-2xl font-bold mb-8">Redirecting to Discord...</h1>
+    
+    <!-- Progress bar -->
+    <div class="w-full max-w-md mb-12">
+      <UProgress v-model="progress" color="primary" size="lg" />
+      <p class="text-center mt-2 text-sm text-gray-500">
+        Redirecting in {{ Math.ceil(remainingTime) }} seconds...
+      </p>
+    </div>
+    
+    <UButton
+      size="xl"
+      :to="discordLink"
+      class="mt-4 text-lg px-8 py-4"
+      icon="i-simple-icons-discord"
+    >
+      Don't wait - Join Now
+    </UButton>
+  </div>
+</template>
+
+<script setup>
+useHead({
+  title: 'Discord'
+})
+
+const { config } = useSiteConfig()
+
+const discordLink = ref(config.siteLinks['discord-invite'] || 'https://discord.gg/e37aq2wc66')
+
+// Progress state
+const progress = ref(0)
+const totalTime = 3 // seconds
+const remainingTime = ref(totalTime)
+const interval = 50 // ms
+
+let timer
+
+onMounted(() => {
+  const startTime = Date.now()
+  
+  timer = setInterval(() => {
+    const elapsed = (Date.now() - startTime) / 1000
+    remainingTime.value = Math.max(0, totalTime - elapsed)
+
+    const rawProgress = (elapsed / totalTime) * 100
+    progress.value = Math.min(100, Math.max(0, Math.round(rawProgress)))
+    
+    if (elapsed >= totalTime) {
+      clearInterval(timer)
+      window.location.href = discordLink.value
+    }
+  }, interval)
+})
+
+onBeforeUnmount(() => {
+  if (timer) clearInterval(timer)
+})
+</script>