<footer
sx={{
fontSize: 1,
variant: 'styles.footer',
}}>
<div
sx={{
display: 'grid',
gridTemplateRows: 'repeat(4, 32px)',
gridTemplateColumns: ['repeat(2, 1fr)', 'repeat(4, 1fr)'],
gridAutoFlow: 'column',
px: 2,
py: 4,
}}>
<Link to="/" sx={{ variant: 'styles.navlink', p: 2 }}>
Home
</Link>
<Link to="/work" sx={{ variant: 'styles.navlink', p: 2 }}>
Work
</Link>
<Link to="/blog" sx={{ variant: 'styles.navlink', p: 2 }}>
Blog
</Link>
<Link to="/about" sx={{ variant: 'styles.navlink', p: 2 }}>
About
</Link>
<Link to="/products" sx={{ variant: 'styles.navlink', p: 2 }}>
Products
</Link>
<Link to="/community" sx={{ variant: 'styles.navlink', p: 2 }}>
Community
</Link>
<Link to="/support" sx={{ variant: 'styles.navlink', p: 2 }}>
Support
</Link>
<Link to="/contact" sx={{ variant: 'styles.navlink', p: 2 }}>
Contact
</Link>
<Link to="/support" sx={{ variant: 'styles.navlink', p: 2 }}>
Support
</Link>
<Link to="/products" sx={{ variant: 'styles.navlink', p: 2 }}>
Products
</Link>
<Link to="/contact" sx={{ variant: 'styles.navlink', p: 2 }}>
Contact
</Link>
<Link to="/community" sx={{ variant: 'styles.navlink', p: 2 }}>
Community
</Link>
<Link to="/products" sx={{ variant: 'styles.navlink', p: 2 }}>
Products
</Link>
<Link to="/community" sx={{ variant: 'styles.navlink', p: 2 }}>
Community
</Link>
<Link to="/support" sx={{ variant: 'styles.navlink', p: 2 }}>
Support
</Link>
<Link to="/contact" sx={{ variant: 'styles.navlink', p: 2 }}>
Contact
</Link>
</div>
<div
sx={{
display: 'flex',
justifyContent: 'flex-end',
p: 3,
}}>
<Link to="/privacy-policy" sx={{ color: 'inherit' }}>
Privacy Policy
</Link>
<div sx={{ mx: 1 }} />
<Link to="/terms-of-use" sx={{ color: 'inherit' }}>
Terms of Use
</Link>
<div sx={{ mx: 1 }} />© 2019 Jane Doe
</div>
</footer>
Edit the page on GitHub