refactor(card): rework

This commit is contained in:
2021-01-23 13:20:02 +00:00
parent ff6fcabc9c
commit d772583981
3 changed files with 70 additions and 56 deletions

View File

@@ -6,6 +6,7 @@ import {
CustomSlick,
Header,
HeaderLogo,
Heading,
ReviewSummary,
Section,
Text
@@ -20,27 +21,31 @@ export default function Index({ data }) {
<Section grid={2} heading="What we do">
<Card
to="/services/bathrooms"
image={data.bathroomImage.childImageSharp.fixed}
image={data.bathroomImage.childImageSharp.fluid}
heading={<Heading el="h3">Bathrooms</Heading>}
>
Bathrooms
Fully accredited bathroom refurbishment service
</Card>
<Card
to="/services/tiling"
image={data.tilingImage.childImageSharp.fixed}
image={data.tilingImage.childImageSharp.fluid}
heading={<Heading el="h3">Tiling</Heading>}
>
Tiling
Our tiling is primo!
</Card>
<Card
to="/services/electrics"
image={data.electricsImage.childImageSharp.fixed}
image={data.electricsImage.childImageSharp.fluid}
heading={<Heading el="h3">Electrics</Heading>}
>
Electrics
Bring some light to your next project
</Card>
<Card
to="/services/carpentry"
image={data.carpentryImage.childImageSharp.fixed}
image={data.carpentryImage.childImageSharp.fluid}
heading={<Heading el="h3">Carpentry</Heading>}
>
Carpentry
Our woodworking is sharp!
</Card>
</Section>
<Section variant="primary">
@@ -65,29 +70,29 @@ export const query = graphql`
}
bathroomImage: file(relativePath: { eq: "service_bathroom.png" }) {
childImageSharp {
fixed(width: 96, height: 54, quality: 100) {
...GatsbyImageSharpFixed_withWebp
fluid(maxWidth: 480, quality: 100) {
...GatsbyImageSharpFluid_withWebp
}
}
}
tilingImage: file(relativePath: { eq: "service_tiling.png" }) {
childImageSharp {
fixed(width: 96, height: 54, quality: 100) {
...GatsbyImageSharpFixed_withWebp
fluid(maxWidth: 480, quality: 100) {
...GatsbyImageSharpFluid_withWebp
}
}
}
electricsImage: file(relativePath: { eq: "service_electrics.png" }) {
childImageSharp {
fixed(width: 96, height: 54, quality: 100) {
...GatsbyImageSharpFixed_withWebp
fluid(maxWidth: 480, quality: 100) {
...GatsbyImageSharpFluid_withWebp
}
}
}
carpentryImage: file(relativePath: { eq: "service_carpentry.png" }) {
childImageSharp {
fixed(width: 96, height: 54, quality: 100) {
...GatsbyImageSharpFixed_withWebp
fluid(maxWidth: 480, quality: 100) {
...GatsbyImageSharpFluid_withWebp
}
}
}