website: add Great Front End affiliate links

contents/coding-interview-prep.md

@@ -22,11 +22,13 @@ sidebar_label: Step-by-step how to prepare
   <meta property="og:image" content="https://www.techinterviewhandbook.org/social/coding-interview-prep.png" />
 </head>
 
+import InDocAd from './\_components/InDocAd';
+
 _The ultimate guide on how to efficiently prepare for your software engineering technical interview - coding test round._
 
 If you have decided to embark on the arduous process of preparing for your coding interviews and you don't know how to maximize your time, this is the only guide you need to go from zero to hero on your coding test.
 
-import InDocAd from './\_components/InDocAd';
+<InDocAd />
 
 ## What is a Software Engineering coding interview?
 
@@ -100,6 +102,8 @@ Apart from helping you master important coding interview data structures and alg
 
 This course by Design Gurus expands upon the questions on the recommended practice questions but approaches the practicing from a questions pattern perspective, which is an approach I also agree with for learning and have personally used to get better at coding interviews. The course allows you to practice selected questions in Java, Python, C++, JavaScript and also provides sample solutions in those languages along with step-by-step visualizations. **Learn and understand patterns, not memorize answers!** [**Get lifetime access today →**](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-coding-interview)
 
+<InDocAd />
+
 ### 4. Accompany practice with coding interview cheatsheets to internalize the must-dos and must-remembers {#practice-with-cheatsheets}
 
 To maximize what you get out of your practice, I recommend referring to the following coding interview cheatsheets _while_ you are studying and practicing:

contents/software-engineering-interview-guide.md

@@ -20,6 +20,8 @@ sidebar_label: 'SWE interviews: What are they and how to prepare'
   <meta property="og:image" content="https://www.techinterviewhandbook.org/social/software-engineering-interview-guide.png" />
 </head>
 
+import InDocAd from './\_components/InDocAd';
+
 Nobody has time to grind hundreds of LeetCode questions, and the good news is that you don't need to do that many to actually get the job at FAANG!
 
 I was frustrated at my job at Grab, a ridesharing company in South-east Asia and wanted to break into FAANG but I wasn't sure how to. After a few months of research, studying and practicing, I interviewed at 11 companies and managed to get 9 offers from top tech companies in the Bay Area - Facebook, Google, Airbnb, Palantir, Dropbox, Lyft, and some startups. It was a tedious process which I don't ever want to go through again. **I went through that process but with this guide, you don't have to.**
@@ -37,6 +39,8 @@ How to prepare for your software engineering interview:
 1. Prepare for the behavioral interview
 1. Negotiating the offer package
 
+<InDocAd />
+
 ## Maximize your chances of being shortlisted
 
 Do you still have trouble getting shortlisted at some or all of the top tech companies? Your resume could be the issue.

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