🦸‍♀️ lay header banner out

src/components/hero.jsx

@@ -0,0 +1,24 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+import ButtonCTA from "./buttonCTA"
+
+const Hero = ({ title, subtitle }) => (
+  <section
+    id="hero"
+    className="d-flex justify-content-center align-items-center"
+  >
+    <div className="container position-relative">
+      <h1>{title}</h1>
+      <h2>{subtitle}</h2>
+      <ButtonCTA variant="secondary" />
+    </div>
+  </section>
+)
+
+Hero.propTypes = {
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+}
+
+export default Hero

src/pages/index.jsx

@@ -1,12 +1,16 @@
 import React from "react"
-import { Link } from "gatsby"
 
 import Layout from "../components/layout"
 import SEO from "../components/seo"
+import Hero from "../components/hero"
 
 const IndexPage = () => (
   <Layout>
     <SEO title="Accueil" />
+    <Hero
+      title="Le PLUS pour mener votre enfant vers la réussite"
+      subtitle="Accompagnement et suivi personnalisé orienté vers l'international"
+    />
   </Layout>
 )