misc: revamp partner components

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.backgroundPurplin,
-  styles.backgroundOrange,
+  styles.backgroundFirewatch,
-  styles.backgroundPurple,
+  styles.backgroundLush,
-  styles.backgroundRed,
+  styles.backgroundSweetMorning,
+  styles.backgroundViceCity,
+  styles.backgroundRadar,
+  styles.backgroundCosmicFusion,
+  styles.backgroundAzurePop,
+  styles.backgroundTranquil,
 ];
 
-function TopResume({className, position}) {
+function FAANGTechLeads({className, position}) {
+  switch (position) {
+    case 'docs_bottom':
       return (
         <a
           className={clsx(styles.container, className)}
-      href="https://tidd.ly/3oezgOo"
+          href={`https://www.faangtechleads.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=1e80c401fe7e2`}
           target="_blank"
           rel="noopener"
           onClick={() => {
-        window.gtag('event', `topresume.${position}.click`);
+            window.gtag('event', `faangtechleads.${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{' '}
+            FAANG Tech Leads' <u>resume review service</u> helped me get
-        <u>free resume review</u> services, which has helped countless software
+            shortlisted at top Bay Area companies. Their resume templates are
-        engineers get interviews at FAANG.
+            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') ||

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

@@ -10,20 +10,44 @@
     var(--ifm-transition-timing-default);
 }
 
-.backgroundPurple {
+.backgroundPurplin {
-  background-image: linear-gradient(138deg, rgb(69, 104, 220), rgb(176, 106, 179));
+  background-image: linear-gradient(
+    138deg,
+    rgb(69, 104, 220),
+    rgb(176, 106, 179)
+  );
 }
 
-.backgroundRed {
+.backgroundFirewatch {
-  background-image: linear-gradient(39deg, rgb(188, 78, 156), rgb(248, 7, 89));
+  background-image: linear-gradient(139deg, #cb2d3e, #ef473a);
 }
 
-.backgroundOrange {
+.backgroundLush {
-  background-image: linear-gradient(39deg, rgb(255, 81, 47), rgb(240, 152, 25));
+  background-image: linear-gradient(139deg, #56ab2f, #a8e063);
 }
 
-.backgroundBlue {
+.backgroundSweetMorning {
-  background-image: linear-gradient(153deg, rgb(116, 116, 191), rgb(52, 138, 199));
+  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 {

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"