create h2 separator component

src/components/h2-separator.js

@@ -0,0 +1,44 @@
+import { Box, Typography } from "@mui/material"
+import React from "react"
+
+const TerminalDiamond = ({ right }) => (
+  <Box position="relative">
+    <Box
+      sx={{
+        width: 5,
+        height: 5,
+        bgcolor: "primary.main",
+        transform: "rotate(45deg)",
+        position: "absolute",
+        top: -3,
+        left: right ? "inherit" : -3,
+        right: right ? -3 : "inherit",
+      }}
+    />
+  </Box>
+)
+
+const H2Separator = ({ title }) => {
+
+  return (
+    <Box display="flex">
+      <Box width={80} borderTop={1}>
+        <TerminalDiamond />
+      </Box>
+      <Box py={1.5} px={1} border={1} borderTop={0}>
+        <Typography
+          variant="h1"
+          component="h2"
+          sx={{ textTransform: "uppercase" }}
+        >
+          {title}
+        </Typography>
+      </Box>
+      <Box flexGrow={1} borderTop={1}>
+        <TerminalDiamond right />
+      </Box>
+    </Box>
+  )
+}
+
+export default H2Separator

src/pages/index.js

@@ -6,6 +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 H2Separator from "../components/h2-separator"
 
 const serviceMenu = [
   { label: "Support", path: "/" },
@@ -40,13 +41,15 @@ const BlogIndex = ({ data, location }) => {
 
   return (
     <Layout location={location} title={siteTitle}>
-      <Typography
-        variant="h1"
-        sx={{ fontWeight: 400, fontSize: 44, lineHeight: "40px" }}
-      >
-        Autonomic is a co-operative that is owned and run by its workers
-      </Typography>
-      <Typography variant="h1" component="h2" sx={{textTransform: "uppercase"}}>What we offer</Typography>
+      <Box py={4}>
+        <Typography
+          variant="h1"
+          sx={{ fontWeight: 400, fontSize: 44, lineHeight: "40px" }}
+        >
+          Autonomic is a co-operative that is owned and run by its workers
+        </Typography>
+      </Box>
+      <H2Separator title="What we offer" />
       <List>
         {serviceMenu.map(({ label, path }) => (
           <ListItem key={label}>