create h2-separator component

src/components/heading-separators.js

@@ -39,4 +39,25 @@ export const H1Separator = ({ title, component }) => {
       </Box>
     </Box>
   )
-}
+}
+
+export const H2Separator = ({ title1, title2, component }) => (
+  <Box display="flex" py={1}>
+    <Typography
+      variant="h2"
+      component={component}
+      sx={{ textTransform: "uppercase", pr: 2.5 }}
+    >
+      {title1}{" "}
+      <Box component="span" fontWeight={700}>
+        {title2}
+      </Box>
+    </Typography>
+    <Box flexGrow={1} display="flex" alignItems="center">
+      <Box borderTop={1} width="100%" height="1px">
+        <TerminalDiamond />
+        <TerminalDiamond right />
+      </Box>
+    </Box>
+  </Box>
+)

src/pages/index.js

@@ -6,7 +6,7 @@ import Layout from "../components/layout"
 import Seo from "../components/seo"
 import { Box, Button, Link, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack, Typography } from "@mui/material"
 import EastIcon from '@mui/icons-material/East'
-import { H1Separator } from "../components/heading-separators"
+import { H1Separator, H2Separator } from "../components/heading-separators"
 
 const serviceMenu = [
   { label: "Support", path: "/" },
@@ -65,9 +65,7 @@ const BlogIndex = ({ data, location }) => {
           </ListItem>
         ))}
       </List>
-      <Typography variant="h2" component="h3" textTransform={"uppercase"}>
-        Interested? Work with us
-      </Typography>
+      <H2Separator title1="Interested?" title2="Work with us" component="h3" />
       <Typography>
         We build technologies and infrastructure to empower users to make a
         positive impact on the world. All of our services reflect our commitment