From c8beb23dbdbd16822a795db35335d861a01c607a Mon Sep 17 00:00:00 2001
From: desmukh <desmukh@users.noreply.github.com>
Date: Sat, 7 Jan 2023 01:04:08 +0500
Subject: [PATCH] create h2 separator component

---
 src/components/h2-separator.js | 44 ++++++++++++++++++++++++++++++++++
 src/pages/index.js             | 17 +++++++------
 2 files changed, 54 insertions(+), 7 deletions(-)
 create mode 100644 src/components/h2-separator.js

diff --git a/src/components/h2-separator.js b/src/components/h2-separator.js
new file mode 100644
index 0000000..faa3d77
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 943dc84..c2369ad 100644
--- a/src/pages/index.js
+++ b/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}>