From 7c64997fc748e6b528688b341ae2692f1b620ffa Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Sat, 8 Mar 2025 06:19:54 +0000
Subject: [PATCH] chore: smooth scroll for use this tool and examles

---
 src/components/ToolHeader.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/ToolHeader.tsx b/src/components/ToolHeader.tsx
index 84b0236..cc37a6f 100644
--- a/src/components/ToolHeader.tsx
+++ b/src/components/ToolHeader.tsx
@@ -24,6 +24,9 @@ interface ToolHeaderProps {
 function ToolLinks() {
   const theme = useTheme();
 
+  const scrollToElement = (id: string) => {
+    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
+  };
   return (
     <Grid container spacing={2} mt={1}>
       <Grid item md={12} lg={6}>
@@ -31,13 +34,17 @@ function ToolLinks() {
           sx={{ backgroundColor: 'white' }}
           fullWidth
           variant="outlined"
-          href="#tool"
+          onClick={() => scrollToElement('tool')}
         >
           Use This Tool
         </StyledButton>
       </Grid>
       <Grid item md={12} lg={6}>
-        <StyledButton fullWidth variant="outlined" href="#examples">
+        <StyledButton
+          fullWidth
+          variant="outlined"
+          onClick={() => scrollToElement('examples')}
+        >
           See Examples
         </StyledButton>
       </Grid>