157 lines
4.3 KiB
JavaScript
157 lines
4.3 KiB
JavaScript
import * as React from "react"
|
|
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, ListItemIcon, ListItemText, Stack, SvgIcon, Typography } from "@mui/material"
|
|
import EastIcon from '@mui/icons-material/East'
|
|
import { H1Separator, H2Separator } from "../components/heading-separators"
|
|
import LeafIcon from "../components/leaf-icon"
|
|
|
|
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`
|
|
const posts = data.allMarkdownRemark.nodes
|
|
|
|
if (posts.length === 0) {
|
|
return (
|
|
<Layout location={location} title={siteTitle}>
|
|
<Bio />
|
|
<p>
|
|
No blog posts found. Add markdown posts to "content/blog" (or the
|
|
directory you specified for the "gatsby-source-filesystem" plugin in
|
|
gatsby-config.js).
|
|
</p>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Layout location={location} title={siteTitle} noHeader>
|
|
<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{" "}
|
|
<span>
|
|
<LeafIcon />
|
|
</span>
|
|
</Typography>
|
|
</Box>
|
|
<H1Separator title="What we offer" component="h2" />
|
|
<Box pl={8} py={1}>
|
|
<List>
|
|
{serviceMenu.map(({ label, path }) => (
|
|
<ListItem key={label}>
|
|
<ListItemIcon sx={{ minWidth: "inherit", pr: 1 }}>
|
|
<EastIcon fontSize="small" color="primary" />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={label}
|
|
sx={{ my: 0 }}
|
|
primaryTypographyProps={{
|
|
textTransform: "capitalize",
|
|
fontSize: 28,
|
|
fontWeight: 700,
|
|
lineHeight: 1,
|
|
}}
|
|
/>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Box>
|
|
<H2Separator title1="Interested?" title2="Work with us" component="h3" />
|
|
<Typography lineHeight={1.2} pb={3}>
|
|
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
|
|
sx={{
|
|
fontSize: 21,
|
|
textTransform: "capitalize",
|
|
fontWeight: 700,
|
|
py: 1,
|
|
lineHeight: 1,
|
|
}}
|
|
>
|
|
{label}
|
|
</Button>
|
|
))}
|
|
</Stack>
|
|
<Typography fontSize={12} pt={1} pb={4.5}>
|
|
You can consult our expanded list of values{" "}
|
|
<Link underline="always" component={GatsbyLink} to="/">
|
|
here
|
|
</Link>
|
|
.
|
|
</Typography>
|
|
|
|
<Box display="flex" justifyContent="center">
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
sx={{ textTransform: "none", fontSize: 12, p: 1.5 }}
|
|
disableElevation
|
|
>
|
|
Contact us at hello@autonomic.zone
|
|
</Button>
|
|
</Box>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
export default BlogIndex
|
|
|
|
/**
|
|
* Head export to define metadata for the page
|
|
*
|
|
* See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
|
|
*/
|
|
export const Head = () => <Seo title="Home" />
|
|
|
|
export const pageQuery = graphql`
|
|
{
|
|
site {
|
|
siteMetadata {
|
|
title
|
|
}
|
|
}
|
|
allMarkdownRemark(sort: { frontmatter: { date: DESC } }) {
|
|
nodes {
|
|
excerpt
|
|
fields {
|
|
slug
|
|
}
|
|
frontmatter {
|
|
date(formatString: "MMMM DD, YYYY")
|
|
title
|
|
description
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`
|