From 2dfdfbf9c76b850b0204070aca195e4955ac81af Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Thu, 16 Jul 2020 13:23:49 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=B8=20lay=20why=20section=20out?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/why.jsx | 62 ++++++++++++++++++++++++++++++++++++++++++
 src/pages/index.jsx    |  2 ++
 2 files changed, 64 insertions(+)
 create mode 100644 src/components/why.jsx

diff --git a/src/components/why.jsx b/src/components/why.jsx
new file mode 100644
index 0000000..a5045ef
--- /dev/null
+++ b/src/components/why.jsx
@@ -0,0 +1,62 @@
+import React from "react"
+import { Link } from "gatsby"
+
+import * as ROUTES from "../global/routes"
+
+const Why = () => (
+  <section id="why-us" class="why-us">
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-4 d-flex align-items-stretch">
+          <div class="content">
+            <h3>Pourquoi chosir Lékol PLUS ?</h3>
+            <p>Il suffit d'un déclic, d'un PLUS !</p>
+            <div class="text-center">
+              <Link to={ROUTES.CALENDAR} class="more-btn">
+                Inscription <i class="bx bx-chevron-right"></i>
+              </Link>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-8 d-flex align-items-stretch">
+          <div class="icon-boxes d-flex flex-column justify-content-center">
+            <div class="row">
+              <div class="col-xl-4 d-flex align-items-stretch">
+                <div class="icon-box mt-4 mt-xl-0">
+                  <i class="bx bx-receipt"></i>
+                  <h4>Suivi Pédagogique Personnalisé</h4>
+                  <p>
+                    Consequuntur sunt aut quasi enim aliquam quae harum pariatur
+                    laboris nisi ut aliquip
+                  </p>
+                </div>
+              </div>
+              <div class="col-xl-4 d-flex align-items-stretch">
+                <div class="icon-box mt-4 mt-xl-0">
+                  <i class="bx bx-cube-alt"></i>
+                  <h4>Groupes de 4 élèves maximum</h4>
+                  <p>
+                    Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt
+                  </p>
+                </div>
+              </div>
+              <div class="col-xl-4 d-flex align-items-stretch">
+                <div class="icon-box mt-4 mt-xl-0">
+                  <i class="bx bx-images"></i>
+                  <h4>50% Déductible d'impôts</h4>
+                  <p>
+                    Aut suscipit aut cum nemo deleniti aut omnis. Doloribus ut
+                    maiores omnis facere
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+)
+
+export default Why
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 6bbfdb4..616c89b 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -5,6 +5,7 @@ import SEO from "../components/seo"
 import Hero from "../components/hero"
 import About from "../components/about"
 import Counters from "../components/counters"
+import Why from "../components/why"
 
 const IndexPage = () => (
   <Layout>
@@ -15,6 +16,7 @@ const IndexPage = () => (
     />
     <About />
     <Counters />
+    <Why />
   </Layout>
 )