Adding the button links

src/components/ToolHeader.tsx

@@ -1,4 +1,4 @@
-import { Box, Stack } from '@mui/material';
+import { Button, Box, Stack } from '@mui/material';
 import Typography from '@mui/material/Typography';
 
 interface ToolHeaderProps {
@@ -7,6 +7,22 @@ interface ToolHeaderProps {
   image?: string;
 }
 
+function ToolLinks() {
+  return (
+    <Box display="flex" gap={2} my={2}>
+      <Button variant="outlined" href="#tool">
+        Use This Tool
+      </Button>
+      <Button variant="outlined" href="#examples">
+        See Examples
+      </Button>
+      <Button variant="outlined" href="#tour">
+        Learn How to Use
+      </Button>
+    </Box>
+  );
+}
+
 export default function ToolHeader({
   image,
   title,
@@ -19,6 +35,7 @@ export default function ToolHeader({
           {title}
         </Typography>
         <Typography fontSize={20}>{description}</Typography>
+        <ToolLinks />
       </Box>
       {image && <img width={'250'} src={image} />}
     </Stack>

src/components/input/ToolTextInput.tsx

@@ -44,7 +44,7 @@ export default function ToolTextInput({
     fileInputRef.current?.click();
   };
   return (
-    <Box>
+    <Box id="tool">
       <Typography fontSize={30} color={'primary'}>
         {title}
       </Typography>

src/pages/string/join/service.ts

@@ -11,8 +11,6 @@ export function mergeText(
       deleteTrailingSpaces ? line.replace(/  |\r\n|\n|\r/gm, '') : line
     )
     .filter((line) => !deleteBlankLines || line.trim() !== '');
-
-  // Join lines and remove spaces right after each line
   return processedLines.join(joinCharacter);
 }