1 files changed, 39 insertions, 18 deletions
diff --git a/ui/src/components/HomeView.svelte b/ui/src/components/HomeView.svelte
index e876c14..9cd8014 100644
--- a/ui/src/components/HomeView.svelte
+++ b/ui/src/components/HomeView.svelte
@@ -1,26 +1,47 @@
 <script lang="ts">
-  // No script needed currently, just static markup mostly
+  type Props = {
+    mouseX: number;
+    mouseY: number;
+  };
+  let { mouseX = 0, mouseY = 0 }: Props = $props();
 </script>
 
-<!-- Background Image - Using gradient fallback -->
-<div
-  class="absolute inset-0 z-0 opacity-60 bg-gradient-to-br from-emerald-900 via-zinc-900 to-indigo-950 transition-transform duration-[10s] ease-linear group-hover:scale-105"
-></div>
-<div
-  class="absolute inset-0 z-0 bg-gradient-to-t from-zinc-900 via-transparent to-black/50"
-></div>
+<div class="absolute inset-0 z-0 overflow-hidden">
+  <!-- Parallax Background Layers -->
+  
+  <div class="absolute inset-0 bg-gradient-to-t from-[#09090b] via-[#09090b]/40 to-transparent"></div>
+</div>
 
-<div class="absolute bottom-24 left-8 z-10 p-4">
-  <h1
-    class="text-6xl font-black mb-2 tracking-tight text-white drop-shadow-lg"
+<div class="relative z-10 h-full flex flex-col justify-end p-12 pb-24">
+  <!-- 3D Floating Hero Text -->
+  <div 
+    class="transition-transform duration-200 ease-out origin-bottom-left"
+    style:transform={`perspective(1000px) rotateX(${mouseY * -2}deg) rotateY(${mouseX * 2}deg)`}
   >
-    MINECRAFT
-  </h1>
-  <div class="flex items-center gap-2 text-zinc-300">
-    <span
-      class="bg-zinc-800 text-xs px-2 py-1 rounded border border-zinc-600"
-      >JAVA EDITION</span
+    <h1
+      class="text-8xl font-black tracking-tighter dark:text-white text-gray-900 drop-shadow-2xl mb-4"
+      style:text-shadow="0 10px 30px rgba(0,0,0,0.5)"
     >
-    <span class="text-lg">Release 1.20.4</span>
+      MINECRAFT
+    </h1>
+    
+    <div class="flex items-center gap-4">
+      <div 
+        class="bg-white/10 dark:bg-white/10 bg-black/5 backdrop-blur-md border dark:border-white/10 border-black/10 px-4 py-1.5 rounded-full text-sm font-bold uppercase tracking-widest text-emerald-500 dark:text-emerald-400 shadow-xl"
+      >
+        Java Edition
+      </div>
+      <div class="text-2xl font-light dark:text-zinc-300 text-gray-600">
+        Latest Release 1.21
+      </div>
+    </div>
+  </div>
+
+  <!-- Action Area -->
+  <div class="mt-8 flex gap-4">
+    <!-- Quick Play Button (Visual only here, logic is in BottomBar usually) -->
+    <div class="dark:text-zinc-400 text-gray-500 text-sm italic">
+      Ready to play. Select version below or hit Launch.
+    </div>
   </div>
 </div>