Init

src/pages/404.jsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Link } from 'gatsby';
+
+const pageStyles = {
+  color: '#232129',
+  padding: '96px',
+  fontFamily: '-apple-system, Roboto, sans-serif, serif',
+};
+const headingStyles = {
+  marginTop: 0,
+  marginBottom: 64,
+  maxWidth: 320,
+};
+
+const paragraphStyles = {
+  marginBottom: 48,
+};
+const codeStyles = {
+  color: '#8A6534',
+  padding: 4,
+  backgroundColor: '#FFF4DB',
+  fontSize: '1.25rem',
+  borderRadius: 4,
+};
+
+function NotFoundPage() {
+  return (
+    <main style={pageStyles}>
+      <h1 style={headingStyles}>Page not found</h1>
+      <p style={paragraphStyles}>
+        Sorry 😔, we couldn’t find what you were looking for.
+        <br />
+        {process.env.NODE_ENV === 'development' ? (
+          <>
+            <br />
+            Try creating a page in <code style={codeStyles}>src/pages/</code>
+            .
+            <br />
+          </>
+        ) : null}
+        <br />
+        <Link to="/">Go home</Link>.
+      </p>
+    </main>
+  );
+}
+
+export default NotFoundPage;
+
+export function Head() {
+  return <title>Not found</title>;
+}

src/pages/HomePage/HomePage.jsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Link } from 'gatsby';
+
+import '../../styles/styles.scss';
+
+function Home() {
+  return (
+    <main>
+      <h1>Insights</h1>
+      <p className="text-container p-b-56">
+        Upcoming fashion insights, enabling you to make informed procurement and
+        manufacturing decisions that align with consumer preferences and market
+        demands
+      </p>
+      <div className="center p-b-56">
+        <Link
+          to="/insights/"
+          className="button button__primary"
+          style={{ pointerEvents: 'none' }}
+        >
+          Women’s Fashion
+        </Link>
+      </div>
+      <div className="box center p-b-80">
+        <Link to="/insights/" className="button button__secondary m-t-80">
+          Generate Insights
+        </Link>
+      </div>
+    </main>
+  );
+}
+
+export default Home;

src/pages/List/List.jsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import {graphql, Link} from "gatsby";
+import Breadcrumbs from "../../components/Breadcrumbs/Breadcrumbs";
+import Listing from "../../components/Listing/Listing";
+
+const List = ({data, location}) => {
+    const products = data.allDataJson.nodes;
+    const images = data.allImageSharp.nodes;
+
+    return (
+        <main>
+            <Breadcrumbs location={location.pathname} label="Insights"/>
+            <h1>Insights</h1>
+            <p className="text-container m-b-56">
+                Upcoming fashion insights, enabling you to make informed procurement and
+                manufacturing decisions that align with consumer preferences and market
+                demands
+            </p>
+            <div className="center">
+                <Link to="/insights/" className="button button__primary active">
+                    Women’s Fashion
+                </Link>
+            </div>
+            <Listing products={products} images={images}/>
+        </main>
+    );
+};
+export const query = graphql`
+  query {
+    allDataJson {
+      nodes {
+        name
+        images
+        tags
+        description
+        socialMedia {
+        Twitter {
+          Social_Media_Influence
+          Tweet_Bookmarks
+          Tweet_Bookmarks_Relative_to_Average
+          Tweet_Likes
+          Tweet_Likes_Relative_to_Average
+          Tweet_Quotes
+          Tweet_Quotes_Relative_to_Average
+          Tweet_Reposts
+          Tweet_Reposts_Relative_to_Average
+          Tweet_Views
+          Tweet_Views_Relative_to_Average
+          found
+        }
+        Instagram {
+          Post_Comments
+          Post_Comments_Relative_to_Average
+          Post_Likes
+          Post_Likes_Relative_to_Average
+          Social_Media_Influence
+          found
+        }
+      }
+      }
+    }
+    allImageSharp(sort: { original: { src: ASC } }) {
+      nodes {
+        gatsbyImageData(
+          width: 400
+          height: 500
+          placeholder: BLURRED
+          transformOptions: { cropFocus: CENTER, fit: COVER }
+        )
+        fluid {
+          originalName
+        }
+      }
+    }
+  }
+`;
+
+export default List;