add all froggit data's features and add header link

docusaurus.config.js

@@ -60,7 +60,7 @@ module.exports = {
         src: "img/logo_froggit.svg",
       },
       items: [      
-        {to: "/dummy_page", label: "Fonctionnalités", position: "left"},
+        {href: "https://lydra.systeme.io/froggit-beta-inscription", label: "Fonctionnalités", position: "left"},
         {to: "/faq", label: "FAQ", position: "left"},
         {to: "/dummy_page", label: "Tarifs", position: "left"},
         {to: "/blog", label: "Blog", position: "left"},        

src/pages/index.js

@@ -21,8 +21,22 @@ export default function Home() {
 
   const context = useDocusaurusContext();
   const {siteConfig = {}} = context;
-  const sections = siteConfig.customFields.blockSections;
-    
+  const blockSections = siteConfig.customFields.blockSections;
+             
+  const Section = blockSections.map((blockSection, i) => {
+    return (
+      <div className={clsx("hero hero--primary", styles.sectionContainer)} key={i}>
+        <div className={styles.sectionImg}>
+          <img src={blockSection.img.src} alt={blockSection.img.alt} />
+        </div>
+        <div className={styles.sectionText} >
+          <h2>{blockSection.title}</h2>
+          <p>{blockSection.text}</p>
+        </div>
+      </div>
+    );
+  });
+
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
@@ -31,15 +45,10 @@ export default function Home() {
       <HomepageHeader />
       <main>
         <HomepageFeatures />
-        <div>
-          {sections.map((blockSection, i) => {
-            return (
-              <div key={i}>                        
-                  <h6>{blockSection.title}</h6>
-                  <p>{blockSection.text}</p>
-              </div>
-            );
-          })};
+        <div className={clsx("hero hero--primary", styles.sectionContainer)}>
+          <div className="container">           
+            {Section}
+          </div>
         </div>
       </main>
     </Layout>

src/pages/index.module.css

@@ -23,3 +23,60 @@
   align-items: center;
   justify-content: center;
 }
+  
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 150px;
+  width: 150px;
+}
+
+ .sectionContainer {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+  min-height: 200px;
+  padding: 2.5rem 0;
+  margin-bottom: -1px;
+  border-top: 1px solid rgb(238, 238, 238);
+  border-bottom: 1px solid rgb(238, 238, 238);
+  transition: all 0.2s ease 0s;
+  flex-direction: row;
+}
+
+.sectionContent {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 50px 25px 50px 50px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.sectionContainer:hover {
+  box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.1);
+}
+
+.sectionContainer > .sectionImg {
+  width: 50%;
+  flex-shrink: 1;
+  text-align: center;
+}
+
+.sectionText {
+  padding-left: 70px;
+  width: 50%;
+  flex-shrink: 0;
+}
+
+img {
+  height: 175px;
+  width: 175px;
+}