feat: make responsive

src/pages/home/index.tsx

@@ -11,7 +11,7 @@ export default function Home() {
 
   return (
     <Box
-      padding={5}
+      padding={{ xs: 1, md: 3, lg: 5 }}
       display={'flex'}
       flexDirection={'column'}
       alignItems={'center'}
@@ -21,7 +21,7 @@ export default function Home() {
       <Hero />
       <Grid width={'80%'} container mt={2} spacing={2}>
         {getToolsByCategory().map((category) => (
-          <Grid key={category.type} item xs={6}>
+          <Grid key={category.type} item xs={12} md={6}>
             <Card>
               <CardContent>
                 <Link
@@ -31,20 +31,22 @@ export default function Home() {
                   {category.title}
                 </Link>
                 <Typography sx={{ mt: 2 }}>{category.description}</Typography>
-                <Stack
-                  mt={2}
-                  direction={'row'}
-                  justifyContent={'space-between'}
-                >
-                  <Button
-                    onClick={() => navigate('/categories/' + category.type)}
-                    variant={'contained'}
-                  >{`See all ${category.title}`}</Button>
-                  <Button
-                    onClick={() => navigate(category.example.path)}
-                    variant={'outlined'}
-                  >{`Try ${category.example.title}`}</Button>
-                </Stack>
+                <Grid mt={1} container spacing={2}>
+                  <Grid item xs={12} md={6}>
+                    <Button
+                      fullWidth
+                      onClick={() => navigate('/categories/' + category.type)}
+                      variant={'contained'}
+                    >{`See all ${category.title}`}</Button>
+                  </Grid>
+                  <Grid item xs={12} md={6}>
+                    <Button
+                      fullWidth
+                      onClick={() => navigate(category.example.path)}
+                      variant={'outlined'}
+                    >{`Try ${category.example.title}`}</Button>
+                  </Grid>
+                </Grid>
               </CardContent>
             </Card>
           </Grid>

src/pages/number/generate/meta.ts

@@ -3,7 +3,7 @@ import { lazy } from 'react';
 // import image from '@assets/text.png';
 
 export const tool = defineTool('number', {
-  name: 'Generate',
+  name: 'Generate numbers',
   path: 'generate',
   shortDescription: 'Quickly calculate a list of integers in your browser',
   // image,

src/pages/tools-by-category/index.tsx

@@ -23,7 +23,7 @@ export default function Home() {
   return (
     <Box>
       <Box
-        padding={5}
+        padding={{ xs: 1, md: 3, lg: 5 }}
         display={'flex'}
         flexDirection={'column'}
         alignItems={'center'}
@@ -33,7 +33,7 @@ export default function Home() {
         <Hero />
       </Box>
       <Divider sx={{ borderColor: theme.palette.primary.main }} />
-      <Box width={'100%'} mt={3} ml={7} padding={3}>
+      <Box width={'100%'} mt={3} ml={{ xs: 1, md: 2, lg: 3 }} padding={3}>
         <Typography
           fontSize={22}
           color={theme.palette.primary.main}
@@ -42,7 +42,7 @@ export default function Home() {
           {getToolsByCategory()
             .find(({ type }) => type === categoryName)
             ?.tools?.map((tool) => (
-              <Grid item xs={12} md={4} key={tool.path}>
+              <Grid item xs={12} md={6} lg={4} key={tool.path}>
                 <Stack
                   sx={{
                     cursor: 'pointer',