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

feat: init card and nav

Browse Source
This commit is contained in:
Dan Head
2021-01-14 17:12:40 +00:00
parent c5e8c04ddc
commit e129093113
19 changed files with 417 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/404.js
View File

@@ -1,5 +1,5 @@
import React from "react";
import { graphql } from "gatsby";
import { Link, graphql } from "gatsby";
import Layout from "../layout";
import Header from "../components/header";
import HeaderLogo from "../components/header-logo";
@@ -9,10 +9,12 @@ export default function Index({ data }) {
return (
<Layout>
<Header image={data.headerImage.childImageSharp.fluid}>
<HeaderLogo visible={true} />
<h2>404</h2>
</Header>
<Section variant="primary">oops.</Section>
<Section>
<p>Page not found</p>
<Link to="/">Back Home</Link>
</Section>
</Layout>
);
}

70
src/pages/colours.js Normal file
View File

@@ -0,0 +1,70 @@
import React from "react";
import { graphql } from "gatsby";
import Layout from "../layout";
import Header from "../components/header";
import HeaderLogo from "../components/header-logo";
import Section from "../components/section";
import Text from "../components/text";
export default function Index({ data }) {
return (
<Layout>
<Header image={data.headerImage.childImageSharp.fluid}>
<HeaderLogo>
<h1>ABC Project Design</h1>
<p>Easy as ABC</p>
</HeaderLogo>
</Header>
<Section>
<Text
style={{
"background-color": "var(--theme-color-primary)"
}}
>
--theme-color-primary: #9c0905;
</Text>
<Text
style={{
"background-color": "var(--theme-color-secondary)"
}}
>
--theme-color-secondary: #9590a8;
</Text>
<Text
style={{
"background-color": "var(--theme-color-tertiary)"
}}
>
--theme-color-tertiary: #bbcbcb;
</Text>
<Text
style={{
"background-color": "var(--theme-color-light)"
}}
>
--theme-color-light: #e5ffde;
</Text>
<Text
style={{
"background-color": "var(--theme-color-dark)",
color: "white"
}}
>
--theme-color-dark: #000a61;
</Text>
</Section>
</Layout>
);
}
export const query = graphql`
query {
headerImage: file(relativePath: { eq: "bathroom.png" }) {
childImageSharp {
fluid(maxWidth: 1920, quality: 100) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
`;

57
src/pages/index.js
View File

@@ -4,6 +4,7 @@ import Layout from "../layout";
import Header from "../components/header";
import HeaderLogo from "../components/header-logo";
import Section from "../components/section";
import Card from "../components/card";
import ReviewSummary from "../components/review-summary";
import CustomSlick from "../components/custom-slick";
import Text from "../components/text";
@@ -12,7 +13,7 @@ export default function Index({ data }) {
return (
<Layout>
<Header image={data.headerImage.childImageSharp.fluid}>
<HeaderLogo />
<HeaderLogo transition={true} />
</Header>
<Section>
<Text>
@@ -25,6 +26,32 @@ export default function Index({ data }) {
operate in Essex, Hertfordshire, Kent and London.
</Text>
</Section>
<Section grid={2}>
<Card
to="/services/bathrooms"
image={data.bathroomImage.childImageSharp.fixed}
>
Bathrooms
</Card>
<Card
to="/services/tiling"
image={data.tilingImage.childImageSharp.fixed}
>
Tiling
</Card>
<Card
to="/services/electrics"
image={data.electricsImage.childImageSharp.fixed}
>
Electrics
</Card>
<Card
to="/services/carpentry"
image={data.carpentryImage.childImageSharp.fixed}
>
Carpentry
</Card>
</Section>
<Section variant="primary">
<CustomSlick>
{data.site.siteMetadata.reviews.map((review, i) => (
@@ -45,6 +72,34 @@ export const query = graphql`
}
}
}
bathroomImage: file(relativePath: { eq: "service_bathroom.png" }) {
childImageSharp {
fixed(width: 96, height: 54, quality: 100) {
...GatsbyImageSharpFixed_withWebp
}
}
}
tilingImage: file(relativePath: { eq: "service_tiling.png" }) {
childImageSharp {
fixed(width: 96, height: 54, quality: 100) {
...GatsbyImageSharpFixed_withWebp
}
}
}
electricsImage: file(relativePath: { eq: "service_electrics.png" }) {
childImageSharp {
fixed(width: 96, height: 54, quality: 100) {
...GatsbyImageSharpFixed_withWebp
}
}
}
carpentryImage: file(relativePath: { eq: "service_carpentry.png" }) {
childImageSharp {
fixed(width: 96, height: 54, quality: 100) {
...GatsbyImageSharpFixed_withWebp
}
}
}
site {
siteMetadata {
reviews {

26
src/pages/services/bathrooms.js Normal file
View File

@@ -0,0 +1,26 @@
import React from "react";
import { graphql } from "gatsby";
import Layout from "../../layout";
import Header from "../../components/header";
export default function Index({ data }) {
return (
<Layout>
<Header image={data.headerImage.childImageSharp.fluid}>
<h1>Bathrooms</h1>
</Header>
</Layout>
);
}
export const query = graphql`
query {
headerImage: file(relativePath: { eq: "bathroom2.png" }) {
childImageSharp {
fluid(maxWidth: 1920, quality: 100) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
`;

27
src/pages/services/index.js Normal file
View File

@@ -0,0 +1,27 @@
import React from "react";
import { graphql } from "gatsby";
import Layout from "../../layout";
import Header from "../../components/header";
export default function Index({ location, data }) {
console.log(location);
return (
<Layout>
<Header image={data.headerImage.childImageSharp.fluid}>
<h1>Services</h1>
</Header>
</Layout>
);
}
export const query = graphql`
query {
headerImage: file(relativePath: { eq: "bathroom2.png" }) {
childImageSharp {
fluid(maxWidth: 1920, quality: 100) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
`;