refactor: team contact details
This commit is contained in:
@@ -1,8 +1,25 @@
|
||||
const { resolve } = require("path");
|
||||
const reviews = require("./src/data/reviews.json");
|
||||
const caseStudies = require("./src/data/case-studies.json");
|
||||
const team = require("./src/data/team.json");
|
||||
|
||||
exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
|
||||
team.team.forEach(person => {
|
||||
const { name, email, phone, altPhone, title } = person;
|
||||
const node = {
|
||||
name,
|
||||
email,
|
||||
phone,
|
||||
altPhone,
|
||||
title,
|
||||
id: createNodeId(`team-${name.replace(/ /g, "-")}`),
|
||||
internal: {
|
||||
type: "person",
|
||||
contentDigest: createContentDigest(person)
|
||||
}
|
||||
};
|
||||
actions.createNode(node);
|
||||
});
|
||||
reviews.reviews.forEach((review, i) => {
|
||||
const { name, title, text, author, date } = review;
|
||||
const node = {
|
||||
|
||||
@@ -30,6 +30,10 @@ const Cell = styled.div`
|
||||
`}
|
||||
`;
|
||||
|
||||
const Item = styled.div`
|
||||
margin-bottom: var(--spacing-y-sm);
|
||||
`;
|
||||
|
||||
export default function Footer() {
|
||||
const year = new Date().getFullYear();
|
||||
return (
|
||||
@@ -37,6 +41,7 @@ export default function Footer() {
|
||||
<Content>
|
||||
<Grid columns={[1, 2]} breakpoints={["45em"]}>
|
||||
<Cell>
|
||||
<Item>
|
||||
<IconWithContent>
|
||||
<Icon color="dark" size="lg">
|
||||
<Phone />
|
||||
@@ -51,6 +56,8 @@ export default function Footer() {
|
||||
07539 051512
|
||||
</Link>
|
||||
</IconWithContent>
|
||||
</Item>
|
||||
<Item>
|
||||
<IconWithContent>
|
||||
<Icon color="dark" size="lg">
|
||||
<Phone />
|
||||
@@ -65,8 +72,10 @@ export default function Footer() {
|
||||
07378 839358
|
||||
</Link>
|
||||
</IconWithContent>
|
||||
</Item>
|
||||
</Cell>
|
||||
<Cell flexEnd={"45em"}>
|
||||
<Item>
|
||||
<IconWithContent>
|
||||
<Icon color="dark" size="lg">
|
||||
<Envelope />
|
||||
@@ -81,6 +90,7 @@ export default function Footer() {
|
||||
quotations@abcprojectdesign.com
|
||||
</Link>
|
||||
</IconWithContent>
|
||||
</Item>
|
||||
</Cell>
|
||||
</Grid>
|
||||
<Text size="xs">© {year} Abc Project Ltd</Text>
|
||||
|
||||
@@ -5,7 +5,6 @@ import { Icon } from "./";
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-y-sm);
|
||||
`;
|
||||
|
||||
const IconWrapper = styled.div`
|
||||
|
||||
@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const Container = styled.span`
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
width: ${props => `var(--icon-size-${props.size})`};
|
||||
height: ${props => `var(--icon-size-${props.size})`};
|
||||
${props =>
|
||||
|
||||
@@ -23,5 +23,6 @@ export { default as ReviewSummary } from "./review-summary";
|
||||
export { default as Section } from "./section";
|
||||
export { default as Select } from "./select";
|
||||
export { default as Table } from "./table";
|
||||
export { default as Team } from './team';
|
||||
export { default as Text } from "./text";
|
||||
export { default as Tile } from "./tile";
|
||||
|
||||
66
src/components/team.js
Normal file
66
src/components/team.js
Normal file
@@ -0,0 +1,66 @@
|
||||
import React from "react";
|
||||
import styled from "@emotion/styled";
|
||||
import { Icon, IconWithContent, Link, Text } from ".";
|
||||
import PhoneIcon from "../icons/phone.svg";
|
||||
import EnvelopeIcon from "../icons/envelope.svg";
|
||||
|
||||
const Container = styled.ul`
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
`;
|
||||
|
||||
const Item = styled.li`
|
||||
margin-bottom: var(--spacing-y-md);
|
||||
`;
|
||||
|
||||
export default function Team({ team = [] }) {
|
||||
return (
|
||||
<Container>
|
||||
{team.map((person, i) => (
|
||||
<Item key={i}>
|
||||
<div>
|
||||
<Text size="sm" noMargin>
|
||||
<strong>{person.name}</strong> – {person.title}
|
||||
</Text>
|
||||
</div>
|
||||
<div>
|
||||
{person.phone && (
|
||||
<IconWithContent>
|
||||
<Icon color="dark" size="sm">
|
||||
<PhoneIcon />
|
||||
</Icon>
|
||||
<Link
|
||||
weight="bold"
|
||||
color="dark"
|
||||
size="sm"
|
||||
to={`tel:${person.phone
|
||||
.replace(/ /g, "")
|
||||
.replace(/^0/, "+44")}`}
|
||||
noDecoration
|
||||
>
|
||||
{person.phone}
|
||||
</Link>
|
||||
</IconWithContent>
|
||||
)}
|
||||
{person.email && (
|
||||
<IconWithContent>
|
||||
<Icon color="dark" size="sm">
|
||||
<EnvelopeIcon />
|
||||
</Icon>
|
||||
<Link
|
||||
weight="bold"
|
||||
color="dark"
|
||||
size="sm"
|
||||
to={`mailto:${person.email}`}
|
||||
noDecoration
|
||||
>
|
||||
{person.email}
|
||||
</Link>
|
||||
</IconWithContent>
|
||||
)}
|
||||
</div>
|
||||
</Item>
|
||||
))}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
27
src/data/team.json
Normal file
27
src/data/team.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"team": [
|
||||
{
|
||||
"name": "Nicholas Day",
|
||||
"email": "quotations@abcprojectdesign.com",
|
||||
"phone": "07539 051512",
|
||||
"altPhone": "01708 938455",
|
||||
"title": "Head of Sales and Marketing"
|
||||
},
|
||||
{
|
||||
"name": "Daniel Costea",
|
||||
"email": "daniel.costea@abcprojectdesign.com",
|
||||
"phone": "07378 839358",
|
||||
"title": "Project Director"
|
||||
},
|
||||
{
|
||||
"name": "Maria Antonia",
|
||||
"email": "maria.antonia@abcprojectdesign.com",
|
||||
"title": "Design and Consultation Manager"
|
||||
},
|
||||
{
|
||||
"name": "Harry Jackson",
|
||||
"email": "harry.jackson@abcprojectdesign.com",
|
||||
"title": "After Sales Manager"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -30,6 +30,7 @@ const GlobalStyles = css`
|
||||
--font-size-lg: 1.125rem; // 18px
|
||||
--font-size-xl: 1.375rem; // 22px
|
||||
--font-size-xxl: 1.625rem; // 26px
|
||||
--icon-size-sm: 12px;
|
||||
--icon-size-md: 16px;
|
||||
--icon-size-lg: 24px;
|
||||
|
||||
|
||||
@@ -16,12 +16,13 @@ import {
|
||||
Map,
|
||||
Section,
|
||||
Select,
|
||||
Team,
|
||||
Text
|
||||
} from "../components";
|
||||
import CheckCircle from "../icons/check-circle.svg";
|
||||
import Envelope from "../icons/envelope.svg";
|
||||
import Phone from "../icons/phone.svg";
|
||||
import Team from "../icons/team.svg";
|
||||
import CheckCircleIcon from "../icons/check-circle.svg";
|
||||
import EnvelopeIcon from "../icons/envelope.svg";
|
||||
import PhoneIcon from "../icons/phone.svg";
|
||||
import TeamIcon from "../icons/team.svg";
|
||||
|
||||
const encode = data => {
|
||||
const formData = new FormData();
|
||||
@@ -86,7 +87,7 @@ export default function Index({ data }) {
|
||||
<>
|
||||
<IconWithContent>
|
||||
<Icon color="dark" size="lg">
|
||||
<CheckCircle />
|
||||
<CheckCircleIcon />
|
||||
</Icon>
|
||||
<Text color="dark" size="lg">
|
||||
Thank you for contacting us!
|
||||
@@ -102,7 +103,7 @@ export default function Index({ data }) {
|
||||
{formState === "submitting" && <Interrupt />}
|
||||
<IconWithContent>
|
||||
<Icon color="dark" size="lg">
|
||||
<Envelope />
|
||||
<EnvelopeIcon />
|
||||
</Icon>
|
||||
<Text color="dark" size="lg">
|
||||
Contact us
|
||||
@@ -222,102 +223,13 @@ export default function Index({ data }) {
|
||||
<div>
|
||||
<IconWithContent>
|
||||
<Icon color="dark" size="lg">
|
||||
<Team />
|
||||
<TeamIcon />
|
||||
</Icon>
|
||||
<Text color="dark" size="lg">
|
||||
The team
|
||||
</Text>
|
||||
</IconWithContent>
|
||||
<ul>
|
||||
<li>
|
||||
<Text>
|
||||
<Link to="mailto:quotations@abcprojectdesign.com">
|
||||
Nicholas Day
|
||||
</Link>{" "}
|
||||
– <em>Sales and Marketing Manager</em>
|
||||
</Text>
|
||||
</li>
|
||||
<li>
|
||||
<Text>
|
||||
<Link to="mailto:daniel.costea@abcprojectdesign.com">
|
||||
Daniel Costea
|
||||
</Link>{" "}
|
||||
– <em>Project Director</em>
|
||||
</Text>
|
||||
</li>
|
||||
<li>
|
||||
<Text>
|
||||
<Link to="mailto:maria.antonia@abcprojectdesign.com">
|
||||
Maria Antonia
|
||||
</Link>{" "}
|
||||
– <em>Design and Consultation Manager</em>
|
||||
</Text>
|
||||
</li>
|
||||
<li>
|
||||
<Text>
|
||||
<Link to="mailto:harry.jackson@abcprojectdesign.com">
|
||||
Harry Jackson
|
||||
</Link>{" "}
|
||||
– <em>After Sales Manager</em>
|
||||
</Text>
|
||||
</li>
|
||||
</ul>
|
||||
<IconWithContent>
|
||||
<Icon color="dark" size="lg">
|
||||
<Phone />
|
||||
</Icon>
|
||||
<Link
|
||||
weight="bold"
|
||||
color="dark"
|
||||
size="lg"
|
||||
to="tel:+447539051512"
|
||||
noDecoration
|
||||
>
|
||||
07539 051512
|
||||
</Link>
|
||||
</IconWithContent>
|
||||
<IconWithContent>
|
||||
<Icon color="dark" size="lg">
|
||||
<Phone />
|
||||
</Icon>
|
||||
<Link
|
||||
weight="bold"
|
||||
color="dark"
|
||||
size="lg"
|
||||
to="tel:+447378839358"
|
||||
noDecoration
|
||||
>
|
||||
07378 839358
|
||||
</Link>
|
||||
</IconWithContent>
|
||||
<IconWithContent>
|
||||
<Icon color="dark" size="lg">
|
||||
<Phone />
|
||||
</Icon>
|
||||
<Link
|
||||
weight="bold"
|
||||
color="dark"
|
||||
size="lg"
|
||||
to="tel:+441708938455"
|
||||
noDecoration
|
||||
>
|
||||
01708 938455
|
||||
</Link>
|
||||
</IconWithContent>
|
||||
<IconWithContent>
|
||||
<Icon color="dark" size="lg">
|
||||
<Envelope />
|
||||
</Icon>
|
||||
<Link
|
||||
weight="bold"
|
||||
color="dark"
|
||||
size="md"
|
||||
to="mailto:quotations@abcprojectdesign.com"
|
||||
noDecoration
|
||||
>
|
||||
quotations@abcprojectdesign.com
|
||||
</Link>
|
||||
</IconWithContent>
|
||||
<Team team={data.allPerson.nodes} />
|
||||
</div>
|
||||
</Grid>
|
||||
</Section>
|
||||
@@ -354,5 +266,14 @@ export const query = graphql`
|
||||
}
|
||||
}
|
||||
}
|
||||
allPerson {
|
||||
nodes {
|
||||
name
|
||||
email
|
||||
phone
|
||||
altPhone
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user