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

---
 src/components/about.jsx             |  68 +++++++++++++++++++++++++++
 src/{static/img => images}/about.jpg | Bin
 src/pages/index.jsx                  |   2 +
 3 files changed, 70 insertions(+)
 create mode 100644 src/components/about.jsx
 rename src/{static/img => images}/about.jpg (100%)

diff --git a/src/components/about.jsx b/src/components/about.jsx
new file mode 100644
index 0000000..8da3270
--- /dev/null
+++ b/src/components/about.jsx
@@ -0,0 +1,68 @@
+import React from "react"
+import { useStaticQuery, graphql, Link } from "gatsby"
+import Img from "gatsby-image"
+
+import * as ROUTES from "../global/routes"
+
+const Image = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      placeholderImage: file(relativePath: { eq: "about.jpg" }) {
+        childImageSharp {
+          fluid {
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
+    }
+  `)
+
+  return (
+    <Img
+      fluid={data.placeholderImage.childImageSharp.fluid}
+      className="img-fluid"
+      alt=""
+    />
+  )
+}
+
+const About = () => (
+  <section id="about" className="about">
+    <div className="container">
+      <div className="section-title">
+        <h2>À Propos</h2>
+        <p>Qui sommes-nous</p>
+      </div>
+
+      <div className="row">
+        <div className="col-lg-6 order-1 order-lg-2">
+          <Image />
+        </div>
+        <div className="col-lg-6 pt-4 pt-lg-0 order-2 order-lg-1 content">
+          <h3>Éducateurs expérimentés</h3>
+          <p className="font-italic">
+            Des éducateurs innovants au service de la réussite de votre enfant.
+          </p>
+          <ul>
+            <li>
+              <i className="icofont-check-circled"></i> X années d'expériences.
+            </li>
+            <li>
+              <i className="icofont-check-circled"></i> Méthode éprouvée à
+              l'internationale.
+            </li>
+          </ul>
+          <p>
+            Nous nous concentrons sur le développement de l'autonomie de
+            l'étudiant.
+          </p>
+          <Link to={ROUTES.A_PROPOS} className="learn-more-btn">
+            En Savoir Plus
+          </Link>
+        </div>
+      </div>
+    </div>
+  </section>
+)
+
+export default About
diff --git a/src/static/img/about.jpg b/src/images/about.jpg
similarity index 100%
rename from src/static/img/about.jpg
rename to src/images/about.jpg
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 40d3f52..3c029ac 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -3,6 +3,7 @@ import React from "react"
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 import Hero from "../components/hero"
+import About from "../components/about"
 
 const IndexPage = () => (
   <Layout>
@@ -11,6 +12,7 @@ const IndexPage = () => (
       title="Le PLUS pour mener votre enfant vers la réussite"
       subtitle="Accompagnement et suivi personnalisé orienté vers l'international"
     />
+    <About />
   </Layout>
 )