feat(components): unify api

src/pages/404.js

@@ -1,9 +1,7 @@
 import React from "react";
-import { Link, graphql } from "gatsby";
+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 { Header, Link, Section } from "../components";
 
 export default function Index({ data }) {
   return (

src/pages/colours.js

@@ -1,70 +0,0 @@
-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
-        }
-      }
-    }
-  }
-`;

src/pages/index.js

@@ -1,13 +1,15 @@
 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 Card from "../components/card";
-import ReviewSummary from "../components/review-summary";
-import CustomSlick from "../components/custom-slick";
-import Text from "../components/text";
+import {
+  Card,
+  CustomSlick,
+  Header,
+  HeaderLogo,
+  ReviewSummary,
+  Section,
+  Text
+} from "../components";
 
 export default function Index({ data }) {
   return (

src/pages/services/bathrooms.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { graphql } from "gatsby";
 import Layout from "../../layout";
-import Header from "../../components/header";
+import { Header } from "../../components";
 
 export default function Index({ data }) {
   return (

src/pages/services/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { graphql } from "gatsby";
 import Layout from "../../layout";
-import Header from "../../components/header";
+import { Header } from "../../components";
 
 export default function Index({ data }) {
   return (