feat: example tools

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,38 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

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>)
 }