website: add Educative banner

website/src/pages/index.js

@@ -61,15 +61,15 @@ function Home() {
               className={classnames(
                 'margin-bottom--lg',
                 'padding-vert--lg',
-                styles.sectionPrimary,
+                styles.sectionSponsor,
               )}>
               <div className="container">
                 <div className="row">
                   <div className="col col--8 col--offset-2">
                     <div className="margin-vert--lg text--center">
                       {Math.random() > 0.5 ? (
-                        <div key={Math.random()}>
-                          <h2 className={styles.sectionPrimaryTitle}>
+                        <div>
+                          <h2 className={styles.sectionSponsorTitle}>
                             <strong>
                               Get paid more. Receive risk-free salary
                               negotiation help from Moonchaser. You pay nothing
@@ -93,8 +93,8 @@ function Home() {
                           </div>
                         </div>
                       ) : (
-                        <div key={Math.random()}>
-                          <h2 className={styles.sectionPrimaryTitle}>
+                        <div>
+                          <h2 className={styles.sectionSponsorTitle}>
                             <strong>
                               Get paid, not played. Chat with former tech
                               recruiters who'll guide you on exactly what to say
@@ -192,6 +192,42 @@ function Home() {
             </div>
           </div>
         </div>
+        <div
+          className={classnames(
+            'margin-bottom--lg',
+            'padding-vert--lg',
+            styles.sectionSponsorAlt,
+          )}>
+          <div className="container">
+            <div className="row">
+              <div className="col col--8 col--offset-2">
+                <div className="margin-vert--lg text--center">
+                  <div>
+                    <h2 className={styles.sectionSponsorTitle}>
+                      <strong>
+                        Looking for high quality interview courses? Educative
+                        offers a ton of great courses to improve your interview
+                        game.
+                      </strong>
+                    </h2>
+                    <div className="margin-vert--lg">
+                      <a
+                        className="button button--secondary button--lg"
+                        href="https://www.educative.io/explore?search_string=interview&aff=x23W"
+                        rel="noreferrer noopener"
+                        target="_blank"
+                        onClick={() => {
+                          window.gtag('event', 'educative.homepage.click');
+                        }}>
+                        Get Started&nbsp;&nbsp;→
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
         <div
           className={classnames(
             'margin-vert--lg',

website/src/pages/styles.module.css

@@ -33,11 +33,20 @@
   background-color: var(--ifm-color-emphasis-100);
 }
 
-.sectionPrimary {
-  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
+.sectionSponsor {
+  background: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
 }
 
-.sectionPrimaryTitle {
+.sectionSponsorAlt {
+  background: linear-gradient(
+    135deg,
+    rgb(29, 136, 244),
+    rgb(252, 67, 128),
+    rgb(251, 191, 36)
+  );
+}
+
+.sectionSponsorTitle {
   color: var(--ifm-color-white);
 }