scaffold home page content

src/pages/index.js

@@ -1,9 +1,25 @@
 import * as React from "react"
-import { Link, graphql } from "gatsby"
+import { Link as GatsbyLink, graphql } from "gatsby"
 
 import Bio from "../components/bio"
 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'
+
+const serviceMenu = [
+  { label: "Support", path: "/" },
+  { label: "Website development", path: "/" },
+  { label: "Custom development", path: "/" },
+  { label: "Training", path: "/" },
+  { label: "Etc Whatever U Want", path: "/" },
+]
+
+const coreValues = [
+  { label: "Sustainability", path: "/"},
+  { label: "Privacy", path: "/"},
+  { label: "Transparency", path: "/"},
+]
 
 const BlogIndex = ({ data, location }) => {
   const siteTitle = data.site.siteMetadata?.title || `Title`
@@ -24,8 +40,59 @@ const BlogIndex = ({ data, location }) => {
 
   return (
     <Layout location={location} title={siteTitle}>
-      <Bio />
+      <Typography variant="h1">
-      <ol style={{ listStyle: `none` }}>
+        Autonomic is a co-operative that is owned and run by its workers
+      </Typography>
+      <Typography variant="h2">What we offer</Typography>
+      <List>
+        {serviceMenu.map(({ label, path }) => (
+          <ListItem key={label}>
+            <ListItemButton component={GatsbyLink} to={path}>
+              <ListItemIcon>
+                <EastIcon />
+              </ListItemIcon>
+              <ListItemText
+                primary={label}
+                primaryTypographyProps={{ textTransform: "capitalize" }}
+              />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+      <Typography variant="h2" textTransform={"uppercase"}>
+        Interested? Work with us
+      </Typography>
+      <Typography>
+        We build technologies and infrastructure to empower users to make a
+        positive impact on the world. All of our services reflect our commitment
+        to our core values:
+      </Typography>
+      <Stack direction="row">
+        {coreValues.map(({ label, path }) => (
+          <Button
+            component={GatsbyLink}
+            to={path}
+            key={label}
+            variant="outlined"
+            fullWidth
+          >
+            {label}
+          </Button>
+        ))}
+      </Stack>
+      <Typography>
+        You can consult our expanded list of values{" "}
+        <Link component={GatsbyLink} to="/">
+          here
+        </Link>
+        .
+      </Typography>
+
+      <Box display="flex" justifyContent="center">
+        <Button variant="contained">Contact us at hello@autonomic.zone</Button>
+      </Box>
+      {/* <Bio /> */}
+      {/* <ol style={{ listStyle: `none` }}>
         {posts.map(post => {
           const title = post.frontmatter.title || post.fields.slug
 
@@ -56,7 +123,7 @@ const BlogIndex = ({ data, location }) => {
             </li>
           )
         })}
-      </ol>
+      </ol> */}
     </Layout>
   )
 }