website: add Great Front End affiliate links

website/src/components/SidebarAd/index.js

@@ -29,6 +29,25 @@ function FAANGTechLeads({ position }) {
   );
 }
 
+function GreatFrontEnd({ position }) {
+  return (
+    <a
+      className={clsx(styles.container, styles.backgroundGreatFrontEnd)}
+      href={`https://www.greatfrontend.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&fpr=techinterviewhandbook`}
+      target="_blank"
+      rel="noopener"
+      onClick={() => {
+        window.gtag('event', `greatfrontend.${position}.click`);
+      }}>
+      <p className={styles.tagline}>
+        <strong className={styles.title}>LeetCode for Front End</strong>
+        Prepare with <u>Great Front End</u>'s large pool of high quality front
+        end interview questions and solutions!
+      </p>
+    </a>
+  );
+}
+
 function AlgoMonster({ position }) {
   return (
     <a
@@ -175,9 +194,16 @@ export default React.memo(function SidebarAd({ position }) {
     <BrowserOnly key={counter}>
       {() => {
         const rand = Math.random();
-
         const path = window.location.pathname;
+
         // Ugly hack to show conditional sidebar content.
+        if (
+          (path.includes('software-engineering-interview-guide') ||
+            path.includes('coding-interview-prep')) &&
+          position === 'in_doc'
+        ) {
+          return <GreatFrontEnd key={Math.random()} position={position} />;
+        }
 
         if (path.includes('resume')) {
           return <FAANGTechLeads key={Math.random()} position={position} />;

website/src/components/SidebarAd/styles.module.css

@@ -20,6 +20,10 @@
   background-color: rgb(244, 63, 94);
 }
 
+.backgroundGreatFrontEnd {
+  background-color: rgb(79, 70, 229);
+}
+
 .backgroundGrokkingCoding {
   background-color: #6fc8cc;
   color: #083436 !important;

website/src/pages/index.js

@@ -111,13 +111,14 @@ function Home() {
       description={siteConfig.tagline}>
       <HeroSection />
       <WhatIsThisSection />
-      <FAANGTechLeadsSection />
+      <GreatFrontEndSection />
       <TweetsSection />
       <HowToUseSection />
-      <AlgoMonsterSection />
+      <FAANGTechLeadsSection />
       <FeaturesSection />
-      <DesignGurusSection />
+      <AlgoMonsterSection />
       <SuccessStoriesSection />
+      <DesignGurusSection />
       <SponsorshipSection />
       <PreFooterSection />
     </Layout>
@@ -499,6 +500,72 @@ function FAANGTechLeadsSection() {
   );
 }
 
+function GreatFrontEndSection() {
+  return (
+    <div
+      className={clsx('padding-vert--lg')}
+      style={{backgroundColor: 'rgb(79, 70, 229)'}}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--8 col--offset-2">
+            <div className="margin-vert--lg text--center">
+              <div>
+                <h2>
+                  <span class="badge badge--secondary">
+                    LeetCode for Front End Interviews
+                  </span>
+                </h2>
+                <h3
+                  className={styles.sectionSponsorTitle}
+                  style={{fontSize: 'var(--ifm-h2-font-size)'}}>
+                  <strong>
+                    Spend less time but prepare better for your Front End
+                    Interviews with{' '}
+                    <a
+                      href="https://www.greatfrontend.com/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=homepage&fpr=techinterviewhandbook"
+                      style={{color: '#fff', textDecoration: 'underline'}}>
+                      Great Front End's
+                    </a>{' '}
+                    large pool of high quality practice questions and solutions.
+                  </strong>
+                </h3>
+                <div className="margin-vert--lg">
+                  <a
+                    className="button button--secondary button--lg"
+                    href="https://www.greatfrontend.com/questions/javascript/flatten?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=homepage&fpr=techinterviewhandbook"
+                    rel="noopener"
+                    target="_blank"
+                    onClick={() => {
+                      window.gtag(
+                        'event',
+                        'greatfrontend.homepage.question.click',
+                      );
+                    }}>
+                    Try a question &nbsp;&nbsp;→
+                  </a>{' '}
+                  <a
+                    className="button button--secondary button--lg"
+                    href="https://www.greatfrontend.com/get-started?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=homepage&fpr=techinterviewhandbook"
+                    rel="noopener"
+                    target="_blank"
+                    onClick={() => {
+                      window.gtag(
+                        'event',
+                        'greatfrontend.homepage.study_plan.click',
+                      );
+                    }}>
+                    View study plans &nbsp;&nbsp;→
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function AlgoMonsterSection() {
   return (
     <div