From 75697573e355a3ead7714a37170648e6d17f092e Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 29 Jan 2026 06:22:22 -0800
Subject: feat(LandingHero): Make "See More" scroll past hero

---
 src/lib/LandingHero.svelte | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/LandingHero.svelte b/src/lib/LandingHero.svelte
index 401c976f..38f18c68 100644
--- a/src/lib/LandingHero.svelte
+++ b/src/lib/LandingHero.svelte
@@ -1,9 +1,19 @@
 <script lang="ts">
   import { env } from '$env/dynamic/public';
   import localforage from 'localforage';
+
+  let heroSection = $state<HTMLElement>();
+
+  const scrollPastHero = () => {
+    if (!heroSection) return;
+
+    const heroBottom = heroSection.getBoundingClientRect().bottom + window.scrollY;
+
+    window.scrollTo({ top: heroBottom, behavior: 'smooth' });
+  };
 </script>
 
-<section class="hero">
+<section class="hero" bind:this={heroSection}>
   <div class="hero-content">
     <p class="tagline">The AniList Companion</p>
 
@@ -32,10 +42,10 @@
     </a>
   </div>
 
-  <div class="scroll-indicator">
+  <button class="scroll-indicator" onclick={scrollPastHero}>
     <span class="scroll-text">See More</span>
     <span class="scroll-arrow">↓</span>
-  </div>
+  </button>
 </section>
 
 <style>
@@ -130,6 +140,14 @@
     gap: 0.5rem;
     color: var(--base03);
     animation: float 2s ease-in-out infinite;
+    background: none;
+    border: none;
+    cursor: pointer;
+    transition: color ease;
+  }
+
+  .scroll-indicator:hover {
+    color: var(--base04);
   }
 
   .scroll-text {
-- 
cgit v1.2.3