feat: display all products on the HP

gatsby/src/pages/index.js

@@ -1,34 +1,45 @@
 import React from "react"
 import { Link } from "gatsby"
+import Img from "gatsby-image"
 
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 
 const IndexPage = ({ data }) => (
   <Layout>
-    <SEO title="Home" />
+    <SEO title="The fastest shop on earth!" />
     <h1>Hello world</h1>
 
     <h2>Nos produits</h2>
-    <ul>
+    <ul
+      style={{
+        listStyle: "none",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "space-between",
+      }}
+    >
       {data.allProduct.nodes.map(product => (
-        <li>
-          <Link to={`/product/${product.slug}`}>{product.name}</Link>
+        <li key={product.slug}>
+          <Link to={`/product/${product.slug}`}>
+            <Img fixed={product.localImage.childImageSharp.fixed} />
+            <br />
+            {product.name}
+          </Link>
         </li>
       ))}
     </ul>
 
     <h2>Nos catégories</h2>
     <ul>
-        {data.allCategory.edges.map(({ node }) => {
-            return (
-                <li key={node.code}>
-                    <Link to={`/categories/${node.code}`}>{node.name}</Link>
-                </li>
-            )
-        })}
+      {data.allCategory.edges.map(({ node }) => {
+        return (
+          <li key={node.code}>
+            <Link to={`/categories/${node.code}`}>{node.name}</Link>
+          </li>
+        )
+      })}
     </ul>
-
   </Layout>
 )
 
@@ -50,6 +61,15 @@ export const query = graphql`
       nodes {
         slug
         name
+        localImage {
+          childImageSharp {
+            # Specify the image processing specifications right in the query.
+            # Makes it trivial to update as your page's design changes.
+            fixed(width: 125, height: 125) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
       }
     }
   }