From 5bf2c0ef3443773fa81cee1b7757c5b00de97600 Mon Sep 17 00:00:00 2001
From: Julie Thezenas <julie@lydra.fr>
Date: Mon, 4 Jul 2022 15:18:21 +0200
Subject: [PATCH] feat: add results component in home page

---
 src/components/HomepageResults.js | 54 +++++++++++++++++++++++++++++++
 src/css/custom.css                |  1 +
 src/pages/index.js                |  2 ++
 3 files changed, 57 insertions(+)
 create mode 100644 src/components/HomepageResults.js

diff --git a/src/components/HomepageResults.js b/src/components/HomepageResults.js
new file mode 100644
index 0000000..3a17b32
--- /dev/null
+++ b/src/components/HomepageResults.js
@@ -0,0 +1,54 @@
+import React from "react";
+
+const ResultsList = [
+  {
+    title: "Alliez compétitivité et respect de l’environnement",   
+    description: (
+      <>
+        Froggit est pensé pour ceux qui regardent vers l&apos;avenir et choisissent des solutions robustes, responsables, qui durent dans le temps.
+      </>
+    ), 
+  },     
+  {
+    title: "Intégrez facilement les pratiques DevOps",  
+    description: (
+      <>
+        Répondez plus vite aux besoins de vos clients avec notre forge logicielle agile pensée par des techs pour les techs.
+      </>
+    ), 
+  },
+  {
+    title: "Bénéficiez d’un service de proximité",
+    description: (
+      <>
+        Froggit c&apos;est aussi un service client en français et une équipe qui améliore régulièrement l&apos;offre en fonction de vos retours !
+      </>
+    ),
+  },
+];
+
+
+function Results({title, description}) {
+  return (
+    <div className="sectionsReverse row">    
+      <div className="col col--5">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>      
+    </div>
+    
+  );
+}
+
+export default function HomepageResults() {
+  return (
+    <section className="sections container" id="results">      
+      <h2 className="promise-title">Obtenez de meilleurs résultats, <br/>et pas seulement au niveau du code !</h2>
+      <div>
+        {ResultsList.map((props, idx) => (
+          <Results key={idx} {...props} />
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 269a697..0e40f72 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -208,4 +208,5 @@ ul {
 .promise-title {
   display: flex;
   justify-content: center;
+  text-align: center;
 }
diff --git a/src/pages/index.js b/src/pages/index.js
index e42da2e..efc9de8 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -6,6 +6,7 @@ import HomepagePromises from "../components/HomepagePromises";
 import HomepageFeatures from "../components/HomepageFeatures";
 import CarouselLibre from "@site/src/components/CarouselLibre";
 import Link from "@docusaurus/Link";
+import HomepageResults from "../components/HomepageResults";
 
 function HomepageHeader(){
   return (
@@ -36,6 +37,7 @@ export default function Home() {
         <HomepagePromises />
         <HomepageFeatures />
         <CarouselLibre/> 
+        <HomepageResults />
       </main>
     </Layout>
   );
-- 
GitLab