refactor(card): rework

src/components/card.js

@@ -3,59 +3,58 @@ import { Link as GatsbyLink } from "gatsby";
 import Img from "gatsby-image";
 import styled from "@emotion/styled";
 
-const Container = styled.div`
+const Media = styled.div`
+  transition: transform 0.15s ease-in;
+`;
+const Heading = styled.div``;
+const Body = styled.div``;
+
+const Content = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   display: flex;
-  align-items: center;
-  margin: 0 calc(var(--spacing-x-xs) * -1) var(--spacing-y-sm);
+  flex-direction: column;
+  justify-content: space-between;
+  padding: var(--spacing-y-sm) var(--spacing-x-xs);
+  color: var(--color-white);
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.25);
+  transform: translate3d(0, calc(100% - 58px), 0);
+  transition: transform 0.15s ease-in, background-color 0.3s ease-in;
+`;
 
-  @media (max-width: 30em) {
-    &:nth-of-type(even) {
-      flex-direction: row-reverse;
-    }
+const Container = styled.div`
+  position: relative;
+  overflow: hidden;
+  &:hover ${Content} {
+    background-color: rgba(0, 0, 0, 0.65);
+    transform: translate3d(0, 0, 0);
+  }
+  &:hover ${Media} {
+    transform: scale(1.05);
   }
-`;
-
-const Media = styled.span`
-  padding: 0 var(--spacing-x-xs);
-  transition: transform 0.15s ease-in, filter 0.15s ease-in;
-`;
-
-const Content = styled.span`
-  padding: 0 var(--spacing-x-xs);
 `;
 
 const Link = styled(GatsbyLink)`
   outline: 0;
   text-decoration: none;
-  color: var(--color-black);
-
-  &:hover ${Media} {
-    transform: scale(1.1);
-    filter: brightness(110%) contrast(110%);
-  }
-
-  @media (max-width: 30em) {
-    &:nth-of-type(even) ${Container} {
-      flex-direction: row-reverse;
-    }
-  }
 `;
 
-export default function Card({ image, children, to }) {
+export default function Card({ image, heading, children, to }) {
   const render = () => (
     <Container>
       {image && (
         <Media>
-          <Img
-            style={{
-              display: "block",
-              borderRadius: "5px"
-            }}
-            fixed={image}
-          />
+          <Img fluid={image} />
         </Media>
       )}
-      <Content>{children}</Content>
+      <Content>
+        {heading && <Heading>{heading}</Heading>}
+        <Body>{children}</Body>
+      </Content>
     </Container>
   );
   return to ? <Link to={to}>{render()}</Link> : render();

src/components/section.js

@@ -19,14 +19,20 @@ const Content = styled.div`
   margin: 0 auto;
 `;
 
+const Head = styled.div`
+  text-align: center;
+`;
+
 const Body = styled.div`
   ${props =>
     props.grid > 0 &&
     css`
+      display: grid;
+      gap: var(--spacing-x-sm) 0;
+
       @media (min-width: ${props.breakpoint}) {
-        display: grid;
         grid-template-columns: repeat(${props.grid}, 1fr);
-        gap: var(--spacing-x-xs);
+        gap: var(--spacing-x-md);
       }
     `}
 `;
@@ -42,7 +48,11 @@ export default function Section({
   return (
     <Container variant={variant}>
       <Content>
-        {heading && <Heading el={headingElement}>{heading}</Heading>}
+        {heading && (
+          <Head>
+            <Heading el={headingElement}>{heading}</Heading>
+          </Head>
+        )}
         <Body grid={grid} breakpoint={breakpoint}>
           {children}
         </Body>

src/pages/index.js

@@ -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
         }
       }
     }