From 39143310fec9fd24c51f6f2fb656b1f795e4f35d Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Fri, 22 Nov 2024 18:30:21 +0100
Subject: [PATCH] improve home page

---
 app/components/home/StatItem.vue | 51 +++++++++++++++++++++++++++-----
 app/pages/index.vue              | 17 +++++++++--
 2 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/app/components/home/StatItem.vue b/app/components/home/StatItem.vue
index 1f4268a..86272aa 100644
--- a/app/components/home/StatItem.vue
+++ b/app/components/home/StatItem.vue
@@ -1,17 +1,54 @@
 <script setup lang="ts">
-defineProps<{
-	icon: string;
-	name: string;
-	data: number | undefined;
+const props = defineProps<{
+  icon: string;
+  name: string;
+  data: number | undefined;
 }>();
+
+const displayValue = ref(0);
+
+const startCountUp = () => {
+  const duration = 1000 + Math.random() * 1000;
+  const startTime = performance.now();
+
+  function easeOutCubic(x: number): number {
+    return 1 - Math.pow(1 - x, 7);
+
+  }
+
+  function animate(currentTime: number) {
+    const elapsedTime = currentTime - startTime;
+    const progress = Math.min(elapsedTime / duration, 1);
+    displayValue.value = Math.floor(easeOutCubic(progress) * (props.data ?? 0));
+
+    if (progress < 1) {
+      requestAnimationFrame(animate);
+    }
+  }
+
+  requestAnimationFrame(animate);
+};
+
+onMounted(() => {
+  startCountUp()
+})
+
 </script>
 
 <template>
-  <div class="flex justify-center gap-2.5" >
-    <Icon :name="icon" size="150" class="from-cyan-200 to-cyan-600 bg-gradient-to-br"/>
+  <div class="flex justify-center gap-2.5">
+    <div class="relative">
+      <div class="blur-2xl absolute left-2/4 top-2/4 -translate-x-2/4 -translate-y-2/4">
+        <Icon :name="icon" size="120" class="from-cyan-600 to-cyan-900 bg-gradient-to-tl"/>
+      </div>
+      <Icon :name="icon" size="150" class="from-cyan-200 to-cyan-600 bg-gradient-to-br"/>
+    </div>
     <div class="flex flex-col justify-center">
       <div class="text-5xl">
-        {{ data?.toLocaleString() }}
+        {{ displayValue?.toLocaleString() }}
+        <div class="h-0 overflow-hidden px-2">
+          {{ data?.toLocaleString() }}
+        </div>
       </div>
       <div>
         {{ name }}
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 46fa640..80cd66f 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,16 +1,27 @@
 <script setup lang="ts">
 useHead({
-	title: "Modrinth Statistics",
+  title: "Modrinth Statistics",
 });
 
-const { data } = useFetch("/api/stats/global");
+const {data} = useFetch("/api/stats/global");
 </script>
 
 <template>
   <div id="page" class="from-neutral-900 to-neutral-950 bg-gradient-to-b">
     <div id="header">
       The place for stats all about
-      <NuxtLink to="https://modrinth.com" id="modrinth" target="_blank" class="text-8xl text-transparent bg-clip-text from-cyan-200 to-cyan-600 bg-gradient-to-br transition hover:scale-110">Modrinth</NuxtLink>
+      <div class="transition hover:scale-110">
+        <div class="blur-2xl absolute">
+          <NuxtLink to="https://modrinth.com" id="modrinth" target="_blank"
+                    class="text-8xl opacity-70 text-transparent bg-clip-text from-cyan-400 to-cyan-700 bg-gradient-to-br">
+            Modrinth
+          </NuxtLink>
+        </div>
+        <NuxtLink to="https://modrinth.com" id="modrinth" target="_blank"
+                  class="text-8xl text-transparent bg-clip-text from-cyan-200 to-cyan-600 bg-gradient-to-br">
+          Modrinth
+        </NuxtLink>
+      </div>
       <div class="text-xl text-neutral-500">(unofficial)</div>
     </div>
     <div id="values">
-- 
2.51.2