🧀 lay Courses section out

gatsby-config.js

@@ -15,6 +15,13 @@ module.exports = {
         path: `${__dirname}/src/images`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `courses`,
+        path: `${__dirname}/src/images/courses`,
+      },
+    },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     {

src/components/courseItem.jsx

@@ -0,0 +1,32 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const CourseItem = ({ title, price, description, image }) => {
+  return (
+    <div className="col-lg-4 col-md-6 d-flex align-items-stretch">
+      <div className="course-item">
+        <img src={image} className="img-fluid" alt="..." />
+        <div className="course-content">
+          <div className="d-flex justify-content-between align-items-center mb-3">
+            <h4>{title}</h4>
+            <p className="price">{`${price}€/h`}</p>
+          </div>
+
+          <h3>
+            <a href="course-details.html">{title}</a>
+          </h3>
+          <p>{description}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CourseItem
+
+CourseItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  price: PropTypes.number.isRequired,
+  description: PropTypes.string.isRequired,
+  image: PropTypes.node.isRequired,
+}

src/components/courses.jsx

@@ -0,0 +1,49 @@
+import React from "react"
+
+import CourseItem from "./courseItem"
+
+import img1 from "../static/img/course-1.jpg"
+import img2 from "../static/img/course-2.jpg"
+import img3 from "../static/img/course-3.jpg"
+
+const data = [
+  {
+    title: "Garderie",
+    price: 10,
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse necessitatibus sunt, porro animi vel officiis?",
+    image: img1,
+  },
+  {
+    title: "Collège",
+    price: 15,
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse necessitatibus sunt, porro animi vel officiis?",
+    image: img2,
+  },
+  {
+    title: "Lycée",
+    price: 18,
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse necessitatibus sunt, porro animi vel officiis?",
+    image: img3,
+  },
+]
+
+const Courses = () => (
+  <section id="popular-courses" className="courses">
+    <div className="container">
+      <div className="section-title">
+        <h2>Cours</h2>
+        <p>Tous nos niveaux </p>
+      </div>
+      <div className="row">
+        {data.map((props, i) => (
+          <CourseItem key={i} {...props} />
+        ))}
+      </div>
+    </div>
+  </section>
+)
+
+export default Courses

src/pages/index.jsx

@@ -6,6 +6,7 @@ import Hero from "../components/hero"
 import About from "../components/about"
 import Counters from "../components/counters"
 import Why from "../components/why"
+import Courses from "../components/courses"
 
 const IndexPage = () => (
   <Layout>
@@ -17,6 +18,7 @@ const IndexPage = () => (
     <About />
     <Counters />
     <Why />
+    <Courses />
   </Layout>
 )