Improve home page (#305)

* improve landing page

* revert navbar

src/css/custom.css

@@ -50,4 +50,4 @@ html[data-theme='dark'] {
 
 .navbar__logo {
   filter: var(--logo-filter);
-}
+}

src/pages/index.js

@@ -22,7 +22,6 @@ const Home = () => {
     <Layout description={siteConfig.tagline}>
       <Hero />
       <main className={styles.main}>
-        <MainExample />
         <Highlights />
         <Examples />
       </main>
@@ -97,21 +96,13 @@ const Hero = () => {
   );
 };
 
-const MainExample = () => (
-  <div className={styles.main_example}>
-    <div className={styles.main_example__code}>
-      <CodeBlock example="main-example" section="main-example" />
-    </div>
-  </div>
-);
-
 const Highlights = () => {
   return (
     <>
       <section id="highlights" className={styles.highlights}>
         <div className="container">
           <div className="row">
-            <div className="col col--11 col--offset-1">
+            <div className="col">
               <div className="row">
                 {highlights.map((highlight, idx) => (
                   <div
@@ -140,67 +131,74 @@ const Highlights = () => {
 
 const Examples = () => {
   return (
-    <div>
+    <div className={styles.examples}>
       <div className={styles.example}>
-        <div className={styles.featureText}>
-          <h3 className={styles.featureTitle}>Flexible Responders</h3>
-          <p>
-            Handler functions in actix can return a wide range of objects that
-            implement the <code>Responder</code> trait. This makes it a breeze
-            to return consistent responses from your APIs.
-          </p>
-        </div>
-        <div className={styles.example__code}>
-          <CodeBlock
-            example="flexible-responders"
-            section="flexible-responders"
-          />
+        <div className={styles.exampleContent}>
+          <div className={styles.featureText}>
+            <h3 className={styles.featureTitle}>Hello World!</h3>
+            <p>
+              Getting started with actix is easy. An actix app comes with a URL routing system that lets you match on
+              URLs and invoke individual handlers.
+            </p>
+          </div>
+          <div className={styles.example__code}>
+            <CodeBlock example="request-routing" section="request-routing" />
+          </div>
         </div>
       </div>
       <div className={styles.example}>
-        <div className={styles.featureText}>
-          <h3 className={styles.featureTitle}>Powerful Extractors</h3>
-          <p>
-            Actix comes with a powerful extractor system that extracts data from
-            the incoming HTTP request and passes it to your view functions. Not
-            only does this make for a convenient API but it also means that your
-            view functions can be synchronous code and still benefit from
-            asynchronous IO handling.
-          </p>
-        </div>
-        <div className={styles.example__code}>
-          <CodeBlock
-            example="powerful-extractors"
-            section="powerful-extractors"
-          />
+        <div className={styles.exampleContent}>
+          <div className={styles.featureText}>
+            <h3 className={styles.featureTitle}>Flexible Responders</h3>
+            <p>
+              Handler functions in actix can return a wide range of objects that
+              implement the <code>Responder</code> trait. This makes it a breeze
+              to return consistent responses from your APIs.
+            </p>
+          </div>
+          <div className={styles.example__code}>
+            <CodeBlock
+              example="flexible-responders"
+              section="flexible-responders"
+            />
+          </div>
         </div>
       </div>
       <div className={styles.example}>
-        <div className={styles.featureText}>
-          <h3 className={styles.featureTitle}>Easy Form Handling</h3>
-          <p>
-            Handling multipart/urlencoded form data is easy. Just define a
-            structure that can be deserialized and actix will handle the rest.
-          </p>
-        </div>
-        <div className={styles.example__code}>
-          <CodeBlock
-            example="easy-form-handling"
-            section="easy-form-handling"
-          />
+        <div className={styles.exampleContent}>
+          <div className={styles.featureText}>
+            <h3 className={styles.featureTitle}>Powerful Extractors</h3>
+            <p>
+              Actix comes with a powerful extractor system that extracts data from
+              the incoming HTTP request and passes it to your view functions. Not
+              only does this make for a convenient API but it also means that your
+              view functions can be synchronous code and still benefit from
+              asynchronous IO handling.
+            </p>
+          </div>
+          <div className={styles.example__code}>
+            <CodeBlock
+              example="powerful-extractors"
+              section="powerful-extractors"
+            />
+          </div>
         </div>
       </div>
       <div className={styles.example}>
-        <div className={styles.featureText}>
-          <h3 className={styles.featureTitle}>Request Routing</h3>
-          <p>
-            An actix app comes with a URL routing system that lets you match on
-            URLs and invoke individual handlers. For extra flexibility, scopes
-            can be used.
-          </p>
-        </div>
-        <div className={styles.example__code}>
-          <CodeBlock example="request-routing" section="request-routing" />
+        <div className={styles.exampleContent}>
+          <div className={styles.featureText}>
+            <h3 className={styles.featureTitle}>Easy Form Handling</h3>
+            <p>
+              Handling multipart/urlencoded form data is easy. Just define a
+              structure that can be deserialized and actix will handle the rest.
+            </p>
+          </div>
+          <div className={styles.example__code}>
+            <CodeBlock
+              example="easy-form-handling"
+              section="easy-form-handling"
+            />
+          </div>
         </div>
       </div>
     </div>

src/pages/styles.module.scss

@@ -110,28 +110,8 @@
   color: var(--ifm-color-emphasis-600);
 }
 
-.main_example {
-  display: flex;
-  justify-content: center;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  flex-wrap: wrap;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
-.main_example__code {
-  width: 100%;
-}
-
-@media (min-width: 1024px) {
-  .main_example__code {
-    width: unset;
-  }
-}
-
 // features
-.example {
+.exampleContent {
   display: flex;
   width: 100%;
   flex-direction: column;
@@ -145,30 +125,51 @@
 }
 
 .example__code {
+  flex: 1;
   width: 100%;
 }
 
 .featureText {
+  flex: 1;
   justify-self: center;
   padding-bottom: 1rem;
 }
 
 @media (min-width: 1024px) {
-  .example {
+  .exampleContent {
     flex-direction: row;
     padding-top: 7rem;
     padding-bottom: 7rem;
+    max-width: 1280px;
+    margin: auto;
   }
 
   .example:nth-child(odd) {
-    flex-direction: row-reverse;
     background-color: var(--examples-odd-background-color);
+
+    .exampleContent {
+      flex-direction: row-reverse;
+
+      .featureText {
+        padding-right: 0px;
+        padding-left: 30px;
+      }
+
+      .example__code {
+        padding-left: 0px;
+        padding-right: 30px;
+      }
+    }
   }
+
   .featureText {
     width: 33%;
+    padding-right: 30px;
   }
+
   .example__code {
     width: unset;
+    padding-left: 30px;
   }
 }