import React from "react" import { Heading, Button, Text, List, ListItem } from "@chakra-ui/core" import { Link } from "gatsby" import Layout from "../components/layout" import SEO from "../components/seo" import Section from "../components/section" const headerStyling = { color: "white", fontSize: ["32px", "48px", "64px", "64px", "84px"], fontWeight: "bold", marginTop: [5, 5, 10], paddingBottom: [5, 5, 20], } const buttonStyling = { backgroundColor: "yellow", marginY: 10, } const textStyling = { fontSize: ["20px", "20px", "35px"], paddingY: 5, color: "white", fontWeight: "bold", } const TechVolunteers = () => { return ( <Layout> <SEO title="Tech Volunteers" /> <Section backgroundColor={"purple"} paddingY={[1,8]} > <Heading {...headerStyling}>Hello and welcome,<br/> fellow Technologists!</Heading> <Text {...textStyling}> The number of people who are volunteering for this effort is fantastic, and we want to ensure this energy gets directed to the right place and optimised. </Text> <Text {...textStyling}> So tell us what skills you have and your realistic availability, and we'll add you to the Slack group to get you started! </Text> </Section> <Section fontSize={[16, 16, 24]} paddingY={[1,8]} > <Text paddingY={5}> So you’re a: </Text> <List> <ListItem>• Developer</ListItem> <ListItem>• Data Scientist</ListItem> <ListItem>• Designer</ListItem> <ListItem>• Product / Project Manager</ListItem> <ListItem>• Content Creator, Writer</ListItem> <ListItem>• Marketing / PR / Marketplace Specialist</ListItem> </List> <Text>etc!</Text> <Text paddingY={[5]}>...and you want to help in the Covid19 crisis?</Text> <Text>This is what you can find here:</Text> <List> <ListItem>• Offer your skills to existing projects by code4covid group</ListItem> <ListItem>• Ask for tech resources for your project to code4covid group</ListItem> <ListItem>• Check the Coronavirus Tech Handbook by TechForUK group</ListItem> <ListItem>• Explore List Of Existing Tech Communities</ListItem> </List> <Link to="/tech-volunteers-form/"> <Button {...buttonStyling}>CLICK TO START!</Button> </Link> </Section> </Layout> ) }; export default TechVolunteers