Add information, examples, and all tools sections

src/components/allTools/AllTools.tsx

@@ -0,0 +1,36 @@
+import { Box, Grid, Stack, Typography } from '@mui/material';
+import ToolCard from './ToolCard';
+
+export interface ToolCardProps {
+  title: string;
+  description: string;
+  link: string;
+}
+
+interface AllToolsProps {
+  title: string;
+  toolCards: ToolCardProps[];
+}
+
+export default function AllTools({ title, toolCards }: AllToolsProps) {
+  return (
+    <Box mt={4} mb={10}>
+      <Typography mb={2} fontSize={30} color={'primary'}>
+        {title}
+      </Typography>
+      <Stack direction={'row'} alignItems={'center'} spacing={2}>
+        <Grid container spacing={2}>
+          {toolCards.map((card) => (
+            <Grid item xs={4} key={card.title}>
+              <ToolCard
+                title={card.title}
+                description={card.description}
+                link={card.link}
+              />
+            </Grid>
+          ))}
+        </Grid>
+      </Stack>
+    </Box>
+  );
+}

src/components/allTools/ToolCard.tsx

@@ -0,0 +1,40 @@
+import { Box, Link, Card, CardContent, Typography } from '@mui/material';
+import { ToolCardProps } from './AllTools';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+
+export default function ToolCard({ title, description, link }: ToolCardProps) {
+  return (
+    <Card
+      raised
+      sx={{
+        borderRadius: 2,
+        bgcolor: '#5581b5',
+        borderColor: '#5581b5',
+        color: '#fff',
+        boxShadow: '6px 6px 12px #b8b9be, -6px -6px 12px #fff'
+      }}
+    >
+      <CardContent>
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          sx={{
+            paddingBottom: 1,
+            borderBottomWidth: 1,
+            borderColor: '#ffffff70'
+          }}
+        >
+          <Typography variant="h5" component="h2">
+            {title}
+          </Typography>
+          <Link href={link} underline="none" sx={{ color: '#fff' }}>
+            <ChevronRightIcon />
+          </Link>
+        </Box>
+        <Typography variant="body2" mt={2} color="#fff">
+          {description}
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+}