From 8b5ace1bebae68b29f4bc6c76452b5832f1ec900 Mon Sep 17 00:00:00 2001
From: Ddevil From Hell <90747745+SharavanMudaliar@users.noreply.github.com>
Date: Sat, 9 Sep 2023 00:45:28 +0530
Subject: [PATCH] fix: Update Home.tsx (#580)

Update Home.tsx

clicking on get started button scrolls down to featured pet in home page
---
 src/components/home/Home.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index 3a213bcd..2b1328f7 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -14,6 +14,12 @@ import "./home.css";
 import load from "./loding.png";
 
 export default function Home() {
+  const scrollToFeaturedPets = () => {
+    const featuredPetsSection = document.getElementById("featured-pets");
+    if (featuredPetsSection) {
+      featuredPetsSection.scrollIntoView({ behavior: "smooth" });
+    }
+  };
   return (
     <div>
       <Hero className="home__background min-h-screen">
@@ -23,12 +29,17 @@ export default function Home() {
             <h1 className="text-5xl font-bold font-amatic">Get a BFF</h1>
             <h2 className="text-5xl font-bold font-amatic">Now and Forever </h2>
 
-            <Button color="primary" className="my-2">
+            <Button
+              color="primary"
+              className="my-2"
+              onClick={scrollToFeaturedPets}
+            >
               Get Started
             </Button>
           </div>
         </Hero.Content>
       </Hero>
+      <div id="featured-pets"></div>
       <LoadingPetCards />
     </div>
   );