From 4d2645f06c846eea791f182224be0bc6e3db76dc Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Sun, 5 Nov 2023 15:02:53 +0330
Subject: [PATCH] refactor: use scrollIntoView instead of link

---
 src/components/sections/ready/ready.tsx | 10 ++++++++--
 src/pages/index.astro                   |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/sections/ready/ready.tsx b/src/components/sections/ready/ready.tsx
index 991f375..6591f86 100644
--- a/src/components/sections/ready/ready.tsx
+++ b/src/components/sections/ready/ready.tsx
@@ -5,6 +5,12 @@ import { Container } from '@/components/container';
 import styles from './ready.module.css';
 
 export function Ready() {
+  const handleClick = () => {
+    const app = document.getElementById('app');
+
+    app?.scrollIntoView(true);
+  };
+
   return (
     <div className={styles.ready}>
       <Container>
@@ -18,9 +24,9 @@ export function Ready() {
 
           <h2 className={styles.title}>Are you ready?</h2>
           <p className={styles.desc}>Create your calm oasis in seconds!</p>
-          <a className={styles.button} href="#app">
+          <button className={styles.button} onClick={handleClick}>
             Use Moodist
-          </a>
+          </button>
         </div>
       </Container>
     </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f38bc12..50fec53 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -12,6 +12,6 @@ import { AboutSection, WhySection, ReadySection } from '@/components/sections';
   <App client:load />
   <AboutSection />
   <WhySection />
-  <ReadySection />
+  <ReadySection client:load />
   <Footer />
 </Layout>