Resolve "change for froggit colors and fonts"

Closes #21 (closed)

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>