feat: make responsive

src/components/Hero.tsx

@@ -33,14 +33,24 @@ export default function Hero() {
     setFilteredTools(filterTools(tools, newInputValue));
   };
   return (
-    <Box width={'60%'}>
-      <Stack mb={1} direction={'row'} spacing={1}>
-        <Typography fontSize={30}>Transform Your Workflow with </Typography>
-        <Typography fontSize={30} color={'primary'}>
-          Omni Tools
+    <Box width={{ xs: '90%', md: '80%', lg: '60%' }}>
+      <Stack mb={1} direction={'row'} spacing={1} justifyContent={'center'}>
+        <Typography sx={{ textAlign: 'center' }} fontSize={{ xs: 25, md: 30 }}>
+          Transform Your Workflow with{' '}
+          <Typography
+            fontSize={{ xs: 25, md: 30 }}
+            display={'inline'}
+            color={'primary'}
+          >
+            Omni Tools
+          </Typography>
         </Typography>
       </Stack>
-      <Typography fontSize={20} mb={2}>
+      <Typography
+        sx={{ textAlign: 'center' }}
+        fontSize={{ xs: 15, md: 20 }}
+        mb={2}
+      >
         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
@@ -76,7 +86,14 @@ export default function Hero() {
       />
       <Grid container spacing={2} mt={2}>
         {exampleTools.map((tool) => (
-          <Grid onClick={() => navigate(tool.url)} item xs={4} key={tool.label}>
+          <Grid
+            onClick={() => navigate(tool.url)}
+            item
+            xs={12}
+            md={6}
+            lg={4}
+            key={tool.label}
+          >
             <Box
               sx={{
                 display: 'flex',

src/components/Navbar/index.tsx

@@ -1,15 +1,57 @@
-import React from 'react';
+import React, { useState } from 'react';
 import AppBar from '@mui/material/AppBar';
 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 MenuIcon from '@mui/icons-material/Menu';
 import { Link, useNavigate } from 'react-router-dom';
 import githubIcon from '@assets/github-mark.png'; // Adjust the path to your GitHub icon
-import { Stack } from '@mui/material';
+import {
+  Stack,
+  Drawer,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemButton
+} from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
 
 const Navbar: React.FC = () => {
   const navigate = useNavigate();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  const toggleDrawer = (open: boolean) => () => {
+    setDrawerOpen(open);
+  };
+
+  const drawerList = (
+    <List>
+      <ListItemButton onClick={() => navigate('/features')}>
+        <ListItemText primary="Features" />
+      </ListItemButton>
+      <ListItemButton onClick={() => navigate('/about-us')}>
+        <ListItemText primary="About Us" />
+      </ListItemButton>
+      <ListItemButton
+        component="a"
+        href="https://github.com/iib0011/omni-tools"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          src={githubIcon}
+          alt="GitHub"
+          style={{ height: '24px', marginRight: '8px' }}
+        />
+        <Typography variant="button">Star us</Typography>
+      </ListItemButton>
+    </List>
+  );
+
   return (
     <AppBar
       position="static"
@@ -24,37 +66,52 @@ const Navbar: React.FC = () => {
         >
           OmniTools
         </Typography>
-        <Stack direction={'row'}>
-          <Button color="inherit">
-            <Link
-              to="/features"
-              style={{ textDecoration: 'none', color: 'inherit' }}
+        {isMobile ? (
+          <>
+            <IconButton color="inherit" onClick={toggleDrawer(true)}>
+              <MenuIcon />
+            </IconButton>
+            <Drawer
+              anchor="right"
+              open={drawerOpen}
+              onClose={toggleDrawer(false)}
             >
-              Features
-            </Link>
-          </Button>
-          <Button color="inherit">
-            <Link
-              to="/about-us"
-              style={{ textDecoration: 'none', color: 'inherit' }}
+              {drawerList}
+            </Drawer>
+          </>
+        ) : (
+          <Stack direction={'row'}>
+            <Button color="inherit">
+              <Link
+                to="/features"
+                style={{ textDecoration: 'none', color: 'inherit' }}
+              >
+                Features
+              </Link>
+            </Button>
+            <Button color="inherit">
+              <Link
+                to="/about-us"
+                style={{ textDecoration: 'none', color: 'inherit' }}
+              >
+                About Us
+              </Link>
+            </Button>
+            <IconButton
+              color="primary"
+              href="https://github.com/iib0011/omni-tools"
+              target="_blank"
+              rel="noopener noreferrer"
             >
-              About Us
-            </Link>
-          </Button>
-          <IconButton
-            color="primary"
-            href="https://github.com/iib0011/omni-tools"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <img
-              src={githubIcon}
-              alt="GitHub"
-              style={{ height: '24px', marginRight: '8px' }}
-            />
-            <Typography variant="button">Star us</Typography>
-          </IconButton>
-        </Stack>
+              <img
+                src={githubIcon}
+                alt="GitHub"
+                style={{ height: '24px', marginRight: '8px' }}
+              />
+              <Typography variant="button">Star us</Typography>
+            </IconButton>
+          </Stack>
+        )}
       </Toolbar>
     </AppBar>
   );