website: refactor homepage

website/src/pages/index.js

@@ -101,12 +101,28 @@ function Tweet({url, handle, name, content, avatar, date}) {
 }
 
 function Home() {
-  const context = useDocusaurusContext();
+  const {siteConfig = {}} = useDocusaurusContext();
-  const {siteConfig = {}} = context;
   return (
     <Layout
       title="Technical Interview Guide for Busy Engineers"
       description={siteConfig.tagline}>
+      <HeroSection />
+      <MoonchaserSection />
+      <ProductContentsSection />
+      <FeaturesSection />
+      <EducativeSection />
+      <TweetsSection />
+      <SuccessStoriesSection />
+      <SponsorshipSection />
+      <PreFooterSection />
+    </Layout>
+  );
+}
+
+function HeroSection() {
+  const {siteConfig = {}} = useDocusaurusContext();
+
+  return (
     <header className={classnames('hero', styles.heroBanner)}>
       <div className="container">
         <img
@@ -142,13 +158,16 @@ function Home() {
         </div>
       </div>
     </header>
-      <div>
+  );
-        {/* // Because the SSR and client output can differ and hydration doesn't patch attribute differences, 
+}
-        we'll render this on the browser only. */}
+
+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.
+  return (
     <BrowserOnly>
       {() => (
-            <div
+        <div className={classnames('padding-vert--lg', styles.sectionSponsor)}>
-              className={classnames('padding-vert--lg', styles.sectionSponsor)}>
           <div className="container">
             <div className="row">
               <div className="col col--8 col--offset-2">
@@ -181,6 +200,11 @@ function Home() {
         </div>
       )}
     </BrowserOnly>
+  );
+}
+
+function ProductContentsSection() {
+  return (
     <div className={classnames('padding-vert--xl')}>
       <div className="container">
         <div className="row">
@@ -191,8 +215,7 @@ function Home() {
                 'margin-bottom--xl',
                 styles.sectionTitle,
               )}>
-                  Complete guide to getting software engineering jobs at top
+              Complete guide to getting software engineering jobs at top firms
-                  firms
             </h2>
             <div className={classnames('row', styles.featuresRow)}>
               <div
@@ -207,9 +230,7 @@ function Home() {
                     <a href={useBaseUrl('resume')}>Resume Preparation</a>
                   </li>
                   <li>
-                        <a href={useBaseUrl('resume-case-study')}>
+                    <a href={useBaseUrl('resume-case-study')}>Resume Samples</a>
-                          Resume Samples
-                        </a>
                   </li>
                   <li>
                     <a href={useBaseUrl('interview-formats')}>
@@ -282,6 +303,11 @@ function Home() {
         </div>
       </div>
     </div>
+  );
+}
+
+function FeaturesSection() {
+  return (
     <div className={classnames('padding-vert--xl', styles.sectionAlt)}>
       <div className="container">
         <div className="row">
@@ -322,8 +348,12 @@ function Home() {
         </div>
       </div>
     </div>
-        <div
+  );
-          className={classnames('padding-vert--lg', styles.sectionSponsorAlt)}>
+}
+
+function EducativeSection() {
+  return (
+    <div className={classnames('padding-vert--lg', styles.sectionSponsorAlt)}>
       <div className="container">
         <div className="row">
           <div className="col col--8 col--offset-2">
@@ -331,9 +361,8 @@ function Home() {
               <div>
                 <h2 className={styles.sectionSponsorTitle}>
                   <strong>
-                        Looking for high quality interview courses? Educative
+                    Looking for high quality interview courses? Educative offers
-                        offers a ton of great courses to improve your interview
+                    a ton of great courses to improve your interview game.
-                        game.
                   </strong>
                 </h2>
                 <div className="margin-vert--lg">
@@ -354,6 +383,11 @@ function Home() {
         </div>
       </div>
     </div>
+  );
+}
+
+function TweetsSection() {
+  return (
     <div className={classnames('padding-vert--lg', styles.sectionAlt)}>
       <div className="container">
         <h2
@@ -377,9 +411,9 @@ function Home() {
                   1️⃣ Tech Interview Handbook
                   <br />
                   <br />
-                      This repository has practical content that covers all
+                  This repository has practical content that covers all phases
-                      phases of a technical interview, from applying for a job
+                  of a technical interview, from applying for a job to passing
-                      to passing the interviews to offer negotiation. 📎
+                  the interviews to offer negotiation. 📎
                 </>
               }
             />
@@ -392,9 +426,8 @@ function Home() {
               content={
                 <>
                   Another excellent tech interview handbook! If you need to
-                      prepare yourself for a tech interview or you're an
+                  prepare yourself for a tech interview or you're an interviewer
-                      interviewer and need additional inspiration. Happy Monday!
+                  and need additional inspiration. Happy Monday! #techinterviews
-                      #techinterviews
                 </>
               }
             />
@@ -406,9 +439,8 @@ function Home() {
               avatar="https://pbs.twimg.com/profile_images/1305935669705965568/vS_bpIuu_400x400.jpg"
               content={
                 <>
-                      Tech Interview Handbook 💻 - Content to help you ace your
+                  Tech Interview Handbook 💻 - Content to help you ace your next
-                      next technical interview. Lots of front-end content here
+                  technical interview. Lots of front-end content here ✅
-                      ✅
                 </>
               }
             />
@@ -443,8 +475,8 @@ function Home() {
                   Preparing for a job interview?
                   <br />
                   <br />
-                      The tech interview handbook contains carefully curated to
+                  The tech interview handbook contains carefully curated to help
-                      help you ace your next technical interview.
+                  you ace your next technical interview.
                   <br />
                   <br />
                   And it's free.
@@ -469,10 +501,10 @@ function Home() {
               avatar="https://pbs.twimg.com/profile_images/1479884864543285255/pcE_Nl12_400x400.jpg"
               content={
                 <>
-                      Lastly, the Tech Interview Handbook. This is a pretty
+                  Lastly, the Tech Interview Handbook. This is a pretty solid
-                      solid comprehensive resource from your initial
+                  comprehensive resource from your initial introduction, to
-                      introduction, to resumes, system design, coding, etc.
+                  resumes, system design, coding, etc. Points to other solid
-                      Points to other solid resources that can be a great help.
+                  resources that can be a great help.
                 </>
               }
             />
@@ -484,10 +516,9 @@ function Home() {
               avatar="https://pbs.twimg.com/profile_images/1413766958281990145/--os1eLq_400x400.jpg"
               content={
                 <>
-                      🔹Tech Interview Handbook: Another useful resource that
+                  🔹Tech Interview Handbook: Another useful resource that covers
-                      covers information about technical interviews. It covers
+                  information about technical interviews. It covers the job
-                      the job applications, the interview process and the
+                  applications, the interview process and the post-interview
-                      post-interview
                 </>
               }
             />
@@ -499,8 +530,8 @@ function Home() {
               avatar="https://pbs.twimg.com/profile_images/1425900902783668228/eJF_2-Ds_400x400.jpg"
               content={
                 <>
-                      The Tech Interview Handbook provides carefully curated
+                  The Tech Interview Handbook provides carefully curated content
-                      content to help you ace your next technical interview.
+                  to help you ace your next technical interview.
                 </>
               }
             />
@@ -508,6 +539,11 @@ function Home() {
         </div>
       </div>
     </div>
+  );
+}
+
+function SuccessStoriesSection() {
+  return (
     <div className={classnames('padding-vert--lg', styles.sectionAlt)}>
       <div className="container">
         <div className="row">
@@ -530,9 +566,7 @@ function Home() {
                     <img className="avatar__photo" src={user.thumbnail} />
                     <div className="avatar__intro">
                       <div className="avatar__name">{user.name}</div>
-                          <small className="avatar__subtitle">
+                      <small className="avatar__subtitle">{user.title}</small>
-                            {user.title}
-                          </small>
                     </div>
                   </div>
                 </div>
@@ -551,15 +585,16 @@ function Home() {
         </div>
       </div>
     </div>
+  );
+}
+
+function SponsorshipSection() {
+  return (
     <div className={classnames('padding-vert--lg', 'text--center')}>
       <div className="container">
         <div className="row">
           <div className="col col--8 col--offset-2">
-                <h2
+            <h2 className={classnames('margin-vert--lg', styles.sectionTitle)}>
-                  className={classnames(
-                    'margin-vert--lg',
-                    styles.sectionTitle,
-                  )}>
               Enjoying Tech Interview Handbook so far?
             </h2>
             <p className={classnames(styles.sectionTagline)}>
@@ -591,6 +626,11 @@ function Home() {
         </div>
       </div>
     </div>
+  );
+}
+
+function PreFooterSection() {
+  return (
     <div className={classnames('padding-vert--xl', styles.sectionAlt)}>
       <div className="container">
         <div className="row">
@@ -599,8 +639,8 @@ function Home() {
           </div>
           <div className="col col--8">
             <p className={classnames(styles.sectionTagline)}>
-                  It's free! Start improving your interview game today and get
+              It's free! Start improving your interview game today and get the
-                  the job at the company of your dreams.
+              job at the company of your dreams.
             </p>
             <a
               className={classnames('button button--primary button--lg')}
@@ -611,8 +651,6 @@ function Home() {
         </div>
       </div>
     </div>
-      </div>
-    </Layout>
   );
 }