website: revamp homepage

website/sidebars.js

@@ -4,7 +4,7 @@ module.exports = {
       Preface: ['introduction', 'landscape'],
     },
     {
-      'Step 1: Preparing your resume': [
+      'Step 1: Prepare a FAANG-ready resume': [
         'resume/guide',
         'resume/ats-proof-template',
         'resume/write-effective-content',
@@ -15,7 +15,7 @@ module.exports = {
     },
     {
       type: 'category',
-      label: 'Step 2: Acing the interview',
+      label: 'Step 2: Ace the interview',
       collapsed: false,
       items: [
         {
@@ -76,13 +76,13 @@ module.exports = {
       ],
     },
     {
-      'Step 3: Negotiating the best offer': [
+      'Step 3: Negotiate the best offer': [
         'understanding-compensation',
         'negotiation',
       ],
     },
     {
-      'Step 4: Getting ready for your job': [
+      'Step 4: Prepare for the job': [
         'choosing-between-companies',
         'engineering-levels',
         // 'team-selection',

website/src/pages/index.js

@@ -10,6 +10,8 @@ import successStories from '../data/successStories';
 
 const BLIND_75_URL =
   'https://www.teamblind.com/post/New-Year-Gift---Curated-List-of-Top-75-LeetCode-Questions-to-Save-Your-Time-OaM1orEU';
+const BLIND_OFFER_NUMBERS_URL =
+  'https://www.teamblind.com/post/Sharing-my-offer-numbers-from-big-companies-for-your-reference-yNgqUPQR';
 
 const FEATURES = [
   {
@@ -107,11 +109,12 @@ function Home() {
       title="Technical Interview Guide for Busy Engineers"
       description={siteConfig.tagline}>
       <HeroSection />
+      <WhatIsThisSection />
+      <TweetsSection />
+      <HowToUseSection />
       <EducativeSection />
-      <ProductContentsSection />
       <FeaturesSection />
       <MoonchaserSection />
-      <TweetsSection />
       <SuccessStoriesSection />
       <SponsorshipSection />
       <PreFooterSection />
@@ -160,6 +163,57 @@ function HeroSection() {
   );
 }
 
+function WhatIsThisSection() {
+  return (
+    <div className={classnames('padding-vert--xl', styles.sectionAlt)}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--8 col--offset-2">
+            <h2 className="text--center margin-bottom--lg">
+              <span class="badge badge--primary">What is this</span>
+            </h2>
+            <h3
+              className={classnames(
+                'text--center',
+                'margin-bottom--lg',
+                styles.sectionTitle,
+              )}>
+              The fastest way to prepare effectively for your software
+              engineering interviews, used by >500,000 engineers
+            </h3>
+            <p
+              className={classnames(
+                'margin-bottom--lg',
+                styles.sectionTagline,
+              )}>
+              Tech Interview Handbook goes{' '}
+              <strong>straight to the point</strong> and tells you the{' '}
+              <strong>minimum</strong> you need to know to excel in your
+              technical interviews.
+              <br />
+              <br />
+              As a Senior Software Engineer and Tech Lead at Meta/Facebook, I
+              have personally gone through the frustrating process of browsing
+              through many unorganized resources to prepare for my technical
+              interviews.
+              <br />
+              <br />
+              This handbook contains the essence of technical interviewing I
+              gathered over my last job hunt, which allowed me to clinch{' '}
+              <a href={BLIND_OFFER_NUMBERS_URL}>
+                9 offers out of 11 top Bay Area companies
+              </a>{' '}
+              -{' '}
+              <strong>Facebook, Google, Airbnb, Palantir, Dropbox, Lyft</strong>
+              , and some startups!
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function MoonchaserSection() {
   // Because the SSR and client output can differ and hydration doesn't patch attribute differences,
   // we'll render this on the browser only.
@@ -202,104 +256,131 @@ function MoonchaserSection() {
   );
 }
 
-function ProductContentsSection() {
+function HowToUseStep({index, title, ctaLink, contents}) {
   return (
-    <div className={classnames('padding-vert--xl')}>
+    <div className={classnames('card', styles.howToUseStep)}>
+      <div className="card__header">
+        <div className="margin-bottom--sm">
+          <small className={styles.howToUseStepLabel}>STEP {index}</small>
+        </div>
+        <h3>{title}</h3>
+      </div>
+      <div className="card__body">
+        <ul>
+          {contents.map((content, i) => (
+            <li key={i}>{content}</li>
+          ))}
+        </ul>
+      </div>
+      <div class="card__footer">
+        <a
+          class="button button--secondary button--block"
+          href={useBaseUrl(ctaLink)}>
+          Read now →
+        </a>
+      </div>
+    </div>
+  );
+}
+
+function HowToUseSection() {
+  return (
+    <div className={classnames('padding-vert--xl', styles.sectionAlt)}>
       <div className="container">
         <div className="row">
           <div className="col col--10 col--offset-1">
-            <h2
+            <h2 className="text--center margin-bottom--lg">
+              <span class="badge badge--primary">How to use</span>
+            </h2>
+            <h3
               className={classnames(
                 'text--center',
-                'margin-bottom--xl',
+                'margin-bottom--lg',
                 styles.sectionTitle,
               )}>
-              Complete guide to getting software engineering jobs at top firms
+              Not sure where to start in your interview preparation?
-            </h2>
+              <br /> We've got you covered.
+            </h3>
+            <p
+              className={classnames(
+                'text--center',
+                'margin-bottom--lg',
+                styles.sectionTagline,
+              )}>
+              This guide is structured in a{' '}
+              <strong>simple to follow, step-by-step</strong> style covering all
+              aspects of your software engineering interview preparation -{' '}
+              <strong>no prior interview experience required</strong>.
+            </p>
+          </div>
+        </div>
         <div className={classnames('row', styles.featuresRow)}>
           <div
             className={classnames(
               'col',
-                  'col--4',
+              'col--3',
               styles.featuresRowItemContainer,
             )}>
-                <h3>Not sure where to start? We got you covered</h3>
+            <HowToUseStep
-                <ul>
+              index={1}
-                  <li>
+              title={<>Prepare a FAANG-ready resume</>}
-                    <a href={useBaseUrl('resume/guide')}>
+              contents={[
-                      Step-by-step resume preparation
+                <>Create an ATS-proof resume</>,
-                    </a>
+                <>Software engineering specific resume content</>,
-                  </li>
+                <>Optimizing and and testing your resume</>,
-                  <li>
+              ]}
-                    <a href={useBaseUrl('interview-formats')}>
+              ctaLink="/resume/guide"
-                      Interview formats
+            />
-                    </a>
-                  </li>
-                  <li>
-                    <a href={useBaseUrl('best-practice-questions')}>
-                      Best practice questions
-                    </a>
-                  </li>
-                </ul>
           </div>
           <div
             className={classnames(
               'col',
-                  'col--4',
+              'col--3',
               styles.featuresRowItemContainer,
             )}>
-                <h3>Efficiently prepare for all kinds of interviews</h3>
+            <HowToUseStep
-                <ul>
+              index={2}
-                  <li>
+              title={<>Ace the interviews</>}
-                    <a href={useBaseUrl('coding-interview')}>Coding</a>
+              contents={[
-                  </li>
+                <>Step-by-step coding interview preparation</>,
-                  <li>
+                <>Algorithms deep dive</>,
-                    <a href={useBaseUrl('algorithms/introduction')}>
+                <>System design interview preparation</>,
-                      Algorithms
+                <>Behavioral interview preparation</>,
-                    </a>
+              ]}
-                  </li>
+              ctaLink="/interview-formats"
-                  <li>
+            />
-                    <a href={useBaseUrl('system-design')}>System design</a>
-                  </li>
-                  <li>
-                    <a href={useBaseUrl('behavioral-interview')}>Behavioral</a>
-                  </li>
-                  <li>
-                    <a
-                      href="https://frontendinterviewhandbook.com"
-                      rel="noopener">
-                      Front end
-                    </a>
-                  </li>
-                </ul>
           </div>
           <div
             className={classnames(
               'col',
-                  'col--4',
+              'col--3',
               styles.featuresRowItemContainer,
             )}>
-                <h3>Algorithms deep-dive</h3>
+            <HowToUseStep
-                <ul>
+              index={3}
-                  <li>
+              title={<>Negotiate the best offer</>}
-                    <a href={useBaseUrl('algorithms/array')}>Array</a>
+              contents={[
-                  </li>
+                <>Negotiation strategies for software engineers</>,
-                  <li>
+                <>Guide on how compensation works for software engineers</>,
-                    <a href={useBaseUrl('algorithms/graph')}>Graph</a>
+              ]}
-                  </li>
+              ctaLink="/understanding-compensation"
-                  <li>
+            />
-                    <a href={useBaseUrl('algorithms/linked-list')}>
-                      Linked list
-                    </a>
-                  </li>
-                  <li>
-                    <a href={useBaseUrl('algorithms/introduction')}>
-                      and more...
-                    </a>
-                  </li>
-                </ul>
-              </div>
           </div>
+          <div
+            className={classnames(
+              'col',
+              'col--3',
+              styles.featuresRowItemContainer,
+            )}>
+            <HowToUseStep
+              index={4}
+              title={<>Prepare for the job</>}
+              contents={[
+                <>How to choose between companies</>,
+                <>Guide to engineering levels</>,
+              ]}
+              ctaLink="/choosing-between-companies"
+            />
           </div>
         </div>
       </div>
@@ -313,14 +394,17 @@ function FeaturesSection() {
       <div className="container">
         <div className="row">
           <div className="col col--10 col--offset-1">
-            <h2
+            <h2 className="text--center margin-bottom--lg">
+              <span class="badge badge--primary">Why this guide</span>
+            </h2>
+            <h3
               className={classnames(
                 'text--center',
-                'margin-bottom--xl',
+                'margin-vert--lg',
                 styles.sectionTitle,
               )}>
-              There's everything you need
+              We have everything you need - all straight to the point
-            </h2>
+            </h3>
             <div className={classnames('row', styles.featuresRow)}>
               {FEATURES.map(({title, description, link}) => (
                 <div
@@ -329,7 +413,7 @@ function FeaturesSection() {
                     'col--4',
                     styles.featuresRowItemContainer,
                   )}>
-                  <div className={'card ' + styles.featuresRowItem}>
+                  <div className={classnames('card', styles.featuresRowItem)}>
                     <h3 className={styles.featuresRowItemTitle}>{title}</h3>
                     <p className={styles.featuresRowItemDescription}>
                       {description}
@@ -338,7 +422,7 @@ function FeaturesSection() {
                       <a
                         className={styles.featuresRowItemLink}
                         href={useBaseUrl(link)}>
-                        <strong>Start reading →</strong>
+                        <strong>Read now →</strong>
                       </a>
                     )}
                   </div>
@@ -390,11 +474,11 @@ function EducativeSection() {
 
 function TweetsSection() {
   return (
-    <div className={classnames('padding-vert--lg', styles.sectionAlt)}>
+    <div className={classnames('padding-vert--xl', styles.sectionAlt2)}>
       <div className="container">
         <h2
           className={classnames(
-            'margin-vert--lg',
+            'margin-bottom--lg',
             'text--center',
             styles.sectionTitle,
           )}>
@@ -544,40 +628,60 @@ function TweetsSection() {
   );
 }
 
-function SuccessStoriesSection() {
+function SuccessStory({name, quote, thumbnail, title}) {
   return (
-    <div className={classnames('padding-vert--lg', styles.sectionAlt)}>
+    <div className="card margin-vert--lg">
+      <div className="card__body">
+        <p className={styles.quote}>"{quote}"</p>
+      </div>
+      <div className="card__header">
+        <div className="avatar">
+          <img alt={name} className="avatar__photo" src={thumbnail} />
+          <div className="avatar__intro">
+            <div className="avatar__name">{name}</div>
+            <small className="avatar__subtitle">{title}</small>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SuccessStoriesSection() {
+  const storiesColumns = [[], []];
+  successStories.forEach((tweet, i) => storiesColumns[i % 2].push(tweet));
+
+  return (
+    <div className={classnames('padding-vert--xl', styles.sectionAlt)}>
       <div className="container">
         <div className="row">
           <div className="col col--6 col--offset-3">
-            <h2
+            <h2 className="text--center margin-bottom--lg">
+              <span class="badge badge--primary">Success stories</span>
+            </h2>
+            <h3
               className={classnames(
                 'margin-vert--lg',
                 'text--center',
                 styles.sectionTitle,
               )}>
-              Success stories
+              Countless engineers have gotten a job at FAANG with this free
-            </h2>
+              handbook
-            {successStories.map((user) => (
+            </h3>
-              <div className="card margin-vert--lg" key={user.name}>
-                <div className="card__body">
-                  <p className={styles.quote}>"{user.quote}"</p>
-                </div>
-                <div className="card__header">
-                  <div className="avatar">
-                    <img
-                      alt={user.name}
-                      className="avatar__photo"
-                      src={user.thumbnail}
-                    />
-                    <div className="avatar__intro">
-                      <div className="avatar__name">{user.name}</div>
-                      <small className="avatar__subtitle">{user.title}</small>
-                    </div>
-                  </div>
           </div>
         </div>
+        <div className={classnames('row', styles.tweetsSection)}>
+          <div className="col col--offset-2 col--4">
+            {storiesColumns[0].map((user) => (
+              <SuccessStory key={user.name} {...user} />
             ))}
+          </div>
+          <div className="col col--4">
+            {storiesColumns[1].map((user) => (
+              <SuccessStory key={user.name} {...user} />
+            ))}
+          </div>
+        </div>
         <p className="margin-vert--lg text--center">
           Would you like to contribute a success story?{' '}
           <a
@@ -590,14 +694,12 @@ function SuccessStoriesSection() {
         </p>
       </div>
     </div>
-      </div>
-    </div>
   );
 }
 
 function SponsorshipSection() {
   return (
-    <div className={classnames('padding-vert--lg', 'text--center')}>
+    <div className={classnames('padding-vert--xl', 'text--center')}>
       <div className="container">
         <div className="row">
           <div className="col col--8 col--offset-2">
@@ -628,7 +730,7 @@ function SponsorshipSection() {
                 />
               </a>
             </div>
-            <div className="margin-vert--lg">
+            <div className="margin-top--lg">
               <a
                 className="button button--secondary button--lg"
                 href="https://opencollective.com/tech-interview-handbook"
@@ -646,7 +748,7 @@ function SponsorshipSection() {
 
 function PreFooterSection() {
   return (
-    <div className={classnames('padding-vert--xl', styles.sectionAlt)}>
+    <div className={classnames('padding-vert--xl', styles.sectionAlt2)}>
       <div className="container">
         <div className="row">
           <div className="col col--4">

website/src/pages/styles.module.css

@@ -33,6 +33,10 @@
   background-color: var(--ifm-color-emphasis-100);
 }
 
+html[data-theme='light'] .sectionAlt2 {
+  background-color: var(--ifm-color-emphasis-200);
+}
+
 .sectionSponsor {
   background: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
 }
@@ -54,6 +58,16 @@
   font-size: 1.1rem;
 }
 
+.howToUseStep {
+  height: 100%;
+}
+
+.howToUseStepLabel {
+  color: var(--ifm-color-primary);
+  font-size: 0.9rem;
+  font-weight: bold;
+}
+
 .featuresRow {
   margin-top: -2rem;
 }