feat: example tools

src/components/Navbar/index.tsx

@@ -4,14 +4,16 @@ import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
-import {Link} from 'react-router-dom';
+import {Link, useNavigate} from 'react-router-dom';
 import githubIcon from '../../assets/github-mark.png'; // Adjust the path to your GitHub icon
 
 const Navbar: React.FC = () => {
+  const navigate = useNavigate();
   return (
     <AppBar position="static" style={{backgroundColor: 'white', color: 'black'}}>
       <Toolbar>
-        <Typography fontSize={20} sx={{flexGrow: 1}}>OmniTools</Typography>
+        <Typography onClick={() => navigate('/')} fontSize={20}
+                    sx={{flexGrow: 1, cursor: 'pointer'}} color={'primary'}>OmniTools</Typography>
 
         <Button color="inherit">
           <Link to="/features" style={{textDecoration: 'none', color: 'inherit'}}>Features</Link>
@@ -21,7 +23,7 @@ const Navbar: React.FC = () => {
         </Button>
 
         <IconButton
-          color="inherit"
+          color="primary"
           href="https://github.com/iib0011/omni-tools"
           target="_blank"
           rel="noopener noreferrer"

src/pages/home/index.tsx

@@ -1,8 +1,21 @@
-import {Box, Icon, Input, Stack, TextField} from "@mui/material";
+import {Box, Grid, Icon, Input, Stack, TextField} from "@mui/material";
 import Typography from "@mui/material/Typography";
 import SearchIcon from '@mui/icons-material/Search';
 
 export default function Home() {
+  const exampleTools: { label: string; url: string }[] = [{
+    label: 'Create a transparent image',
+    url: ''
+  },
+    {label: 'Convert text to morse code', url: ''},
+    {label: 'Change GIF speed', url: ''},
+    {label: 'Pick a random item', url: ''},
+    {label: 'Find and replace text', url: ''},
+    {label: 'Convert emoji to image', url: ''},
+    {label: 'Split a string', url: ''},
+    {label: 'Calculate number sum', url: ''},
+    {label: 'Pixelate an image', url: ''},
+  ]
   return (<Box padding={5} display={'flex'} flexDirection={'column'} alignItems={'center'} justifyContent={'center'}
                width={'100%'}>
     <Box width={"60%"}>
@@ -12,7 +25,7 @@ export default function Home() {
         color={'primary'}>Omni
         Tools</Typography></Stack>
       <Typography fontSize={20} mb={2}>
-        Boost your productivity with Omni Tools—the ultimate toolkit for getting things done quickly! Access thousands
+        Boost your productivity with Omni Tools, the ultimate toolkit for getting things done quickly! Access thousands
         of
         user-friendly utilities for editing images, text, lists, and data, all directly from your browser.
       </Typography>
@@ -22,6 +35,23 @@ export default function Home() {
           <SearchIcon/>
         ),
       }}/>
+      <Grid container spacing={1} mt={2}>
+        {exampleTools.map((tool) => (
+          <Grid
+            item
+            xs={4}
+            key={tool.label}
+            display="flex"
+            flexDirection="row"
+            justifyContent="center"
+            alignItems="center"
+            padding={2}
+            sx={{borderWidth: 1, borderRadius: 3, borderColor: 'grey', borderStyle: 'solid', cursor: 'pointer'}}
+          >
+            <Typography>{tool.label}</Typography>
+          </Grid>
+        ))}
+      </Grid>
     </Box>
   </Box>)
 }