From 72055a6d678b7a5515ec2a7bff7d991cd108fc97 Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Mon, 21 Feb 2022 10:00:05 +0800
Subject: [PATCH] misc: revamp partner components

---
 website/src/components/SidebarAd/index.js     | 92 +++++++++++++------
 .../components/SidebarAd/styles.module.css    | 40 ++++++--
 website/src/theme/TOC/index.js                |  2 +-
 3 files changed, 97 insertions(+), 37 deletions(-)

diff --git a/website/src/components/SidebarAd/index.js b/website/src/components/SidebarAd/index.js
index 461901c8..e0b2352c 100644
--- a/website/src/components/SidebarAd/index.js
+++ b/website/src/components/SidebarAd/index.js
@@ -7,31 +7,58 @@ import clsx from 'clsx';
 import styles from './styles.module.css';
 
 const BACKGROUNDS = [
-  styles.backgroundBlue,
-  styles.backgroundOrange,
-  styles.backgroundPurple,
-  styles.backgroundRed,
+  styles.backgroundPurplin,
+  styles.backgroundFirewatch,
+  styles.backgroundLush,
+  styles.backgroundSweetMorning,
+  styles.backgroundViceCity,
+  styles.backgroundRadar,
+  styles.backgroundCosmicFusion,
+  styles.backgroundAzurePop,
+  styles.backgroundTranquil,
 ];
 
-function TopResume({className, position}) {
-  return (
-    <a
-      className={clsx(styles.container, className)}
-      href="https://tidd.ly/3oezgOo"
-      target="_blank"
-      rel="noopener"
-      onClick={() => {
-        window.gtag('event', `topresume.${position}.click`);
-      }}>
-      <p className={styles.tagline}>
-        <strong>Best resume service for FAANG</strong>
-        <br />
-        If you are running low on time, I recommend TopResume's{' '}
-        <u>free resume review</u> services, which has helped countless software
-        engineers get interviews at FAANG.
-      </p>
-    </a>
-  );
+function FAANGTechLeads({className, position}) {
+  switch (position) {
+    case 'docs_bottom':
+      return (
+        <a
+          className={clsx(styles.container, className)}
+          href={`https://www.faangtechleads.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=1e80c401fe7e2`}
+          target="_blank"
+          rel="noopener"
+          onClick={() => {
+            window.gtag('event', `faangtechleads.${position}.click`);
+          }}>
+          <p className={styles.tagline}>
+            <strong>Best resume service for FAANG</strong>
+            <br />
+            FAANG Tech Leads' <u>resume review service</u> helped me get
+            shortlisted at top Bay Area companies. Their resume templates are
+            only <u>$28 now (70% off)</u> and tailored to your experience level.
+          </p>
+        </a>
+      );
+    default:
+      return (
+        <a
+          className={clsx(styles.container, className)}
+          href={`https://www.faangtechleads.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=1e80c401fe7e2`}
+          target="_blank"
+          rel="noopener"
+          onClick={() => {
+            window.gtag('event', `faangtechleads.${position}.click`);
+          }}>
+          <p className={styles.tagline}>
+            <strong>Get shortlisted at FAANG</strong>
+            <br />
+            FAANG Tech Leads' <u>resume review service</u> helped me get
+            shortlisted at top Bay Area companies. Their resume templates are
+            only <u>$28 now (70% off)</u> and tailored to your experience level.
+          </p>
+        </a>
+      );
+  }
 }
 
 function AlgoMonster({className, position}) {
@@ -58,7 +85,7 @@ function Moonchaser({className, position}) {
   return (
     <a
       className={clsx(styles.container, className)}
-      href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_docs_sidebar"
+      href={`https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}`}
       key={Math.random()}
       target="_blank"
       rel="noopener"
@@ -78,7 +105,7 @@ function Educative({className, position}) {
   return (
     <a
       className={clsx(styles.container, className)}
-      href="https://educative.io/tech-interview-handbook"
+      href={`https://educative.io/tech-interview-handbook?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=x23W`}
       key={Math.random()}
       target="_blank"
       rel="noopener"
@@ -99,7 +126,7 @@ function EducativeCoding({className, position}) {
   return (
     <a
       className={clsx(styles.container, className)}
-      href="https://www.educative.io/courses/grokking-the-coding-interview?aff=x23W"
+      href={`https://www.educative.io/courses/grokking-the-coding-interview?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=x23W`}
       key={Math.random()}
       target="_blank"
       rel="noopener"
@@ -121,7 +148,7 @@ function EducativeSystemDesign({className, position}) {
   return (
     <a
       className={clsx(styles.container, className)}
-      href="https://www.educative.io/courses/grokking-the-system-design-interview?aff=x23W"
+      href={`https://www.educative.io/courses/grokking-the-system-design-interview?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=x23W`}
       key={Math.random()}
       target="_blank"
       rel="noopener"
@@ -151,6 +178,16 @@ export default React.memo(function SidebarAd({position}) {
         const path = window.location.pathname;
         // Ugly hack to show conditional sidebar content.
 
+        if (path.includes('resume')) {
+          return (
+            <FAANGTechLeads
+              className={backgroundClass}
+              key={Math.random()}
+              position={position}
+            />
+          );
+        }
+
         if (path.includes('negotiation') || path.includes('compensation')) {
           return (
             <Moonchaser
@@ -162,7 +199,6 @@ export default React.memo(function SidebarAd({position}) {
         }
 
         if (
-          path.includes('resume') ||
           path.includes('coding') ||
           path.includes('best-practice-questions') ||
           path.includes('cheatsheet') ||
diff --git a/website/src/components/SidebarAd/styles.module.css b/website/src/components/SidebarAd/styles.module.css
index f8a58506..2de2e52d 100644
--- a/website/src/components/SidebarAd/styles.module.css
+++ b/website/src/components/SidebarAd/styles.module.css
@@ -10,20 +10,44 @@
     var(--ifm-transition-timing-default);
 }
 
-.backgroundPurple {
-  background-image: linear-gradient(138deg, rgb(69, 104, 220), rgb(176, 106, 179));
+.backgroundPurplin {
+  background-image: linear-gradient(
+    138deg,
+    rgb(69, 104, 220),
+    rgb(176, 106, 179)
+  );
 }
 
-.backgroundRed {
-  background-image: linear-gradient(39deg, rgb(188, 78, 156), rgb(248, 7, 89));
+.backgroundFirewatch {
+  background-image: linear-gradient(139deg, #cb2d3e, #ef473a);
 }
 
-.backgroundOrange {
-  background-image: linear-gradient(39deg, rgb(255, 81, 47), rgb(240, 152, 25));
+.backgroundLush {
+  background-image: linear-gradient(139deg, #56ab2f, #a8e063);
 }
 
-.backgroundBlue {
-  background-image: linear-gradient(153deg, rgb(116, 116, 191), rgb(52, 138, 199));
+.backgroundSweetMorning {
+  background-image: linear-gradient(139deg, #ff5f6d, #ffc371);
+}
+
+.backgroundViceCity {
+  background-image: linear-gradient(139deg, #3494e6, #ec6ead);
+}
+
+.backgroundRadar {
+  background-image: linear-gradient(139deg, #a770ef, #cf8bf3, #fdb99b);
+}
+
+.backgroundCosmicFusion {
+  background-image: linear-gradient(139deg, #333399, #ff00cc);
+}
+
+.backgroundAzurePop {
+  background-image: linear-gradient(138deg, #ef32d9, #89fffd);
+}
+
+.backgroundTranquil {
+  background-image: linear-gradient(138deg, #ef629f, #eecda3);
 }
 
 .container:hover {
diff --git a/website/src/theme/TOC/index.js b/website/src/theme/TOC/index.js
index 111f86e0..4ea056e2 100644
--- a/website/src/theme/TOC/index.js
+++ b/website/src/theme/TOC/index.js
@@ -22,7 +22,7 @@ function TOC({className, ...props}) {
       <div className="margin--md">
         <div className={clsx('padding--md', styles.socialLinksContainer)}>
           <div className={styles.socialLinks}>
-            Follow us
+            Follow
             <a
               href="https://t.me/techinterviewhandbook"
               target="_blank"