feat(contact): init contact page

src/components/input-text.js

@@ -18,11 +18,26 @@ const Input = styled.input`
   border: 1px solid var(--theme-color-dark);
 `;
 
-export default function InputText({ id, label, required, textArea }) {
+export default function InputText({
+  id,
+  name,
+  label,
+  value,
+  onChange,
+  required,
+  textArea
+}) {
   return (
     <Container>
       <Label htmlFor={id}>{label}</Label>
-      <Input type="text" id={id} as={textArea ? "textarea" : "input"} />
+      <Input
+        type="text"
+        id={id}
+        name={name}
+        value={value}
+        onChange={onChange}
+        as={textArea ? "textarea" : "input"}
+      />
     </Container>
   );
 }

src/icons/check-circle.svg

@@ -0,0 +1,3 @@
+<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path>
+</svg>

src/pages/contact.js

@@ -0,0 +1,146 @@
+import React, { useState } from "react";
+import { graphql } from "gatsby";
+import Layout from "../layout";
+import {
+  Button,
+  Header,
+  Icon,
+  IconWithContent,
+  InputText,
+  Link,
+  Section,
+  Text
+} from "../components";
+import Phone from "../icons/phone.svg";
+import Envelope from "../icons/envelope.svg";
+import CheckCircle from "../icons/check-circle.svg";
+
+const encodeData = data =>
+  Object.keys(data)
+    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
+    .join("&");
+
+export default function Index({ data }) {
+  const [submitted, setSubmitted] = useState();
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    const body = encodeData({
+      "form-name": "contact",
+      name: e.target.name.value,
+      email: e.target.email.value,
+      telephone: e.target.telephone.value,
+      message: e.target.message.value
+    });
+    fetch("/contact", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body
+    })
+      .then(res => {
+        if (res.status !== 200) {
+          console.log("error", res);
+        } else {
+          setSubmitted(true);
+        }
+      })
+      .catch(error => console.log(error));
+  };
+  return (
+    <Layout>
+      <Header image={data.headerImage.childImageSharp.fluid}>
+        <h1>Get in touch</h1>
+      </Header>
+      <Section grid={2} breakpoint="40em">
+        <div>
+          <Text>Get in touch with us</Text>
+          <Text textStyle="italic">More info here</Text>
+          <IconWithContent>
+            <Icon color="dark" size="lg">
+              <Phone />
+            </Icon>
+            <Text color="dark" size="lg">
+              07123 456789
+            </Text>
+          </IconWithContent>
+          <IconWithContent>
+            <Icon color="dark" size="lg">
+              <Envelope />
+            </Icon>
+            <Link
+              color="dark"
+              size="md"
+              to="mailto:quotations@abcprojectdesign.com"
+            >
+              quotations@abcprojectdesign.com
+            </Link>
+          </IconWithContent>
+        </div>
+        <div>
+          {submitted ? (
+            <IconWithContent>
+              <Icon color="dark" size="lg">
+                <CheckCircle />
+              </Icon>
+              <>
+                <Text color="dark" size="lg">
+                  Thank you for contacting us
+                </Text>
+                <Text color="dark" size="md">
+                  We will be in touch shortly
+                </Text>
+              </>
+            </IconWithContent>
+          ) : (
+            <>
+              <IconWithContent>
+                <Icon color="dark" size="lg">
+                  <Envelope />
+                </Icon>
+                <Text color="dark" size="lg">
+                  Contact us
+                </Text>
+              </IconWithContent>
+              <form
+                name="contact"
+                method="POST"
+                action="/contact"
+                onSubmit={handleSubmit}
+                data-netlify="true"
+                data-netlify-honeypot="bot-field"
+              >
+                <input type="hidden" name="form-name" value="contact" />
+                <InputText id="contact-name" name="name" label="Name" />
+                <InputText id="contact-email" name="email" label="Email" />
+                <InputText
+                  id="contact-telephone"
+                  name="telephone"
+                  label="Telephone"
+                />
+                <InputText
+                  id="contact-message"
+                  name="message"
+                  label="Message"
+                  textArea
+                />
+                <Button type="submit">Submit</Button>
+              </form>
+            </>
+          )}
+        </div>
+      </Section>
+    </Layout>
+  );
+}
+
+export const query = graphql`
+  query {
+    headerImage: file(relativePath: { eq: "bathroom.png" }) {
+      childImageSharp {
+        fluid(maxWidth: 1920, quality: 100) {
+          ...GatsbyImageSharpFluid_withWebp
+        }
+      }
+    }
+  }
+`;