From 408663dd5290f761e898ee68b484ab7b71b104b4 Mon Sep 17 00:00:00 2001
From: feilinlp <107558154+feilinlp@users.noreply.github.com>
Date: Fri, 1 Mar 2024 18:05:08 +0800
Subject: [PATCH] website: change homepage main banner (#414)

---
 website/package.json                |  3 +-
 website/src/pages/index.js          | 67 ++++++++++++++++-------------
 website/src/pages/styles.module.css | 16 +++++++
 3 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/website/package.json b/website/package.json
index a3841134b..e46151fb7 100755
--- a/website/package.json
+++ b/website/package.json
@@ -16,7 +16,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"
   },
   "browserslist": {
     "production": [
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 511b677af..1b8a69f2f 100755
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -6,6 +6,7 @@ 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 successStories from '@site/src/data/successStories';
 
@@ -78,32 +79,24 @@ function GreatFrontEndSection() {
   return (
     <div
       className={clsx('padding-vert--lg')}
-      style={{ backgroundColor: 'rgb(79, 70, 229)' }}>
+      style={{ backgroundColor: 'rgb(214, 43, 121)' }}>
       <div className="container">
         <div className="row">
           <div className="col col--10 col--offset-1">
             <div className="margin-vert--lg text--center">
               <div>
-                <h2
+                <h1
                   className={styles.sectionSponsorTitle}
-                  style={{ fontSize: 'var(--ifm-h2-font-size)' }}>
+                  style={{ fontSize: 'var(--ifm-h1-font-size)' }}>
                   <strong>
-                    Want to practice front end questions and reference answers
-                    from experienced ex-FAANG senior engineers? Top front end
-                    interview practice platform{' '}
-                    <a
-                      href="https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=homepage&fpr=frontendinterviewhandbook"
-                      style={{ color: '#fff', textDecoration: 'underline' }}>
-                      GreatFrontEnd
-                    </a>{' '}
-                    is now offering 25% off their lifetime plan! Try out their
-                    free questions today:
+                    Looking for front end interview practice? <br/>
+                    GreatFrontEnd has 200+ practice questions and reference solutions from big tech ex-interviewers
                   </strong>
-                </h2>
-                <div className="margin-vert--lg">
+                </h1>
+                <div className="margin-vert--md">
                   <a
                     className="button button--secondary button--lg"
-                    href="https://www.greatfrontend.com/questions/system-design/news-feed-facebook"
+                    href="https://www.greatfrontend.com/prepare/"
                     rel="noopener"
                     target="_blank"
                     onClick={() => {
@@ -112,27 +105,39 @@ function GreatFrontEndSection() {
                         'greatfrontend.homepage.system_design.click',
                       );
                     }}>
-                    System Design Questions &nbsp;&nbsp;→
-                  </a>
-                  &nbsp;&nbsp;&nbsp;
-                  <a
-                    className="button button--secondary button--lg"
-                    href="https://www.greatfrontend.com/questions/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=homepage&fpr=frontendinterviewhandbook"
-                    rel="noopener"
-                    target="_blank"
-                    onClick={() => {
-                      window.gtag(
-                        'event',
-                        'greatfrontend.homepage.coding.click',
-                      );
-                    }}>
-                    Coding Questions &nbsp;&nbsp;→
+                    Get started &nbsp;&nbsp;→
                   </a>
                 </div>
+                <div className="margin-vert--md">
+                  <h5 style={{color:'rgb(255,255,255)', fontWeight:'normal'}}>Psst...I helped build 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>
+        </div>
       </div>
     </div>
   );
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
index 3e7470862..0e4ee474a 100755
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@@ -21,6 +21,22 @@
   justify-content: center;
 }
 
+.flexContainer {
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  color: rgb(255, 255, 255);
+  font-size: 1.5rem;
+  margin-right: 0.5rem;
+}
+
+.whiteText {
+  color: rgb(255, 255, 255);
+  margin: 0;
+}
+
 .sectionTitle {
   font-size: 2rem;
 }