dan/abc-project-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(grid): init component

Browse Source
This commit is contained in:
Dan Head
2021-01-27 00:07:25 +00:00
parent 9817e3d0e9
commit 9c84cb91c9
4 changed files with 109 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/pages/contact.js
View File

@@ -4,6 +4,7 @@ import { Marker } from "google-maps-react";
import Layout from "../layout";
import {
Button,
Grid,
Header,
Icon,
IconWithContent,
@@ -56,83 +57,85 @@ export default function Index({ data }) {
>
<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 ? (
<Section>
<Grid columns={[1, 2]} breakpoints={["40rem"]}>
<div>
<Text>Get in touch with us</Text>
<Text textStyle="italic">More info here</Text>
<IconWithContent>
<Icon color="dark" size="lg">
<CheckCircle />
<Phone />
</Icon>
<>
<Text color="dark" size="lg">
Thank you for contacting us
</Text>
<Text color="dark" size="md">
We will be in touch shortly
</Text>
</>
<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">
<Envelope />
<CheckCircle />
</Icon>
<Text color="dark" size="lg">
Contact us
</Text>
<>
<Text color="dark" size="lg">
Thank you for contacting us
</Text>
<Text color="dark" size="md">
We will be in touch shortly
</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>
) : (
<>
<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>
</Grid>
</Section>
<Map
initialCenter={{