website: improve GFE banner

website/package-lock.json

@@ -13,7 +13,8 @@
         "@docusaurus/preset-classic": "3.1.1",
         "clsx": "^2.0.0",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-icons": "^5.0.1"
       }
     },
     "node_modules/@algolia/autocomplete-core": {
@@ -11855,6 +11856,14 @@
         "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+      "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",

website/src/pages/index.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import clsx from 'clsx';
 import Layout from '@theme/Layout';
-import BrowserOnly from '@docusaurus/BrowserOnly';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
-import {RiStackLine} from 'react-icons/ri'
+import {
+  RiBookLine,
+  RiBookOpenLine,
+  RiPresentationLine,
+  RiStackLine,
+} from 'react-icons/ri';
 
 import successStories from '@site/src/data/successStories';
 
@@ -78,21 +82,22 @@ function HeroSection() {
 function GreatFrontEndSection() {
   return (
     <div
-      className={clsx('padding-vert--lg')}
+      className="padding-vert--lg"
       style={{ backgroundColor: 'rgb(214, 43, 121)' }}>
-      <div className="container">
+      <div className="container padding-vert--lg">
         <div className="row">
-          <div className="col col--10 col--offset-1">
-            <div className="margin-vert--lg text--center">
+          <div className="col col--8 col--offset-2">
+            <div className="margin-bottom--lg text--center">
               <div>
-                <h1
+                <h2
                   className={styles.sectionSponsorTitle}
                   style={{ fontSize: 'var(--ifm-h1-font-size)' }}>
                   <strong>
-                    Looking for front end interview practice? <br/>
-                    GreatFrontEnd has 200+ practice questions and reference solutions from big tech ex-interviewers
+                    Looking for front end interview practice? <br />
+                    GreatFrontEnd has 200+ practice questions and reference
+                    solutions from big tech ex-interviewers
                   </strong>
-                </h1>
+                </h2>
                 <div className="margin-vert--md">
                   <a
                     className="button button--secondary button--lg"
@@ -109,33 +114,38 @@ function GreatFrontEndSection() {
                   </a>
                 </div>
                 <div className="margin-vert--md">
-                  <h5 style={{color:'rgb(255,255,255)', fontWeight:'normal'}}>Psst...I helped build this!<br/></h5> 
+                  <h5
+                    style={{ color: 'rgb(255,255,255)', fontWeight: 'normal' }}>
+                    Psst... I built this!
+                    <br />
+                  </h5>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div className="row">
-          <div className="col col--1"></div>
-          <div className={`col col--3 ${styles.flexContainer}`}>
-            <RiStackLine className={styles.icon} />
-            <h5 className={styles.whiteText}>
-              <strong>Well-explained solutions for every question</strong>
-            </h5>
-          </div>
-          <div className="col col--1"></div>
-          <div className={`col col--3 ${styles.flexContainer}`}>
-            <RiStackLine className={styles.icon} />
-            <h5 className={styles.whiteText}>
-              <strong>Step-by-step study plans</strong>
-            </h5>
-          </div>
-          <div className="col col--1"></div>
-          <div className={`col col--3 ${styles.flexContainer}`}>
-            <RiStackLine className={styles.icon} />
-            <h5 className={styles.whiteText}>
-              <strong>Structured 4-stage process</strong>
-            </h5>
+          <div className={clsx('col col--8 col--offset-2')}>
+            <div className="row">
+              <div className={clsx('col col--4', styles.flexContainer)}>
+                <RiPresentationLine className={styles.promoIcon} />
+                <p className={styles.whiteText}>
+                  <strong>Well-explained solutions for every question</strong>
+                </p>
+              </div>
+              <div className={clsx('col col--4', styles.flexContainer)}>
+                <RiBookOpenLine className={styles.promoIcon} />
+                <p className={styles.whiteText}>
+                  <strong>Step-by-step study plans</strong>
+                </p>
+              </div>
+              <div className={clsx('col col--4', styles.flexContainer)}>
+                <RiStackLine className={styles.promoIcon} />
+                <p className={styles.whiteText}>
+                  <strong>Structured 4-stage process</strong>
+                </p>
+              </div>
+            </div>
           </div>
         </div>
       </div>

website/src/pages/styles.module.css

@@ -23,17 +23,18 @@
 
 .flexContainer {
   display: flex;
-  align-items: center;
 }
 
-.icon {
-  color: rgb(255, 255, 255);
-  font-size: 1.5rem;
+.promoIcon {
+  color: #fff;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
   margin-right: 0.5rem;
 }
 
 .whiteText {
-  color: rgb(255, 255, 255);
+  color: #fff;
   margin: 0;
 }