feat(LandingHero): Make "See More" scroll past hero

1 files changed, 21 insertions, 3 deletions

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 {