Improve home page (#305)

* improve landing page

* revert navbar

.gitignore

@@ -3,3 +3,4 @@ build/
 .docusaurus
 .cache-loader
 Cargo.lock
+yarn.lock

examples/easy-form-handling/src/main.rs

@@ -1,8 +1,8 @@
 use actix_web::{web, App, HttpResponse, HttpServer, Responder};
 use serde::Deserialize;
-// <easy-form-handling>
 use actix_web::web::{Either, Json, Form};
 
+// <easy-form-handling>
 #[derive(Deserialize)]
 struct Register {
     username: String,

examples/request-routing/src/main.rs

@@ -1,22 +1,19 @@
 // <request-routing>
-use actix_web::{get, web, App, HttpRequest, HttpServer, Responder};
+use actix_web::{get, web, App, HttpServer, Responder};
 
 #[get("/")]
-async fn index(_req: HttpRequest) -> impl Responder {
+async fn index() -> impl Responder {
-    "Hello from the index page."
+    "Hello, World!"
 }
 
-async fn hello(path: web::Path<String>) -> impl Responder {
+#[get("/{name}")]
-    format!("Hello {}!", &path)
+async fn hello(name: web::Path<String>) -> impl Responder {
+    format!("Hello {}!", &name)
 }
 
 #[actix_web::main]
 async fn main() -> std::io::Result<()> {
-    HttpServer::new(|| {
+    HttpServer::new(|| App::new().service(index).service(hello))
-        App::new()
-            .service(index)
-            .route("/{name}", web::get().to(hello))
-    })
         .bind(("127.0.0.1", 8080))?
         .run()
         .await

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,8 +131,23 @@ const Highlights = () => {
 
 const Examples = () => {
   return (
-    <div>
+    <div className={styles.examples}>
       <div className={styles.example}>
+        <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.exampleContent}>
           <div className={styles.featureText}>
             <h3 className={styles.featureTitle}>Flexible Responders</h3>
             <p>
@@ -157,7 +163,9 @@ const Examples = () => {
             />
           </div>
         </div>
+      </div>
       <div className={styles.example}>
+        <div className={styles.exampleContent}>
           <div className={styles.featureText}>
             <h3 className={styles.featureTitle}>Powerful Extractors</h3>
             <p>
@@ -175,7 +183,9 @@ const Examples = () => {
             />
           </div>
         </div>
+      </div>
       <div className={styles.example}>
+        <div className={styles.exampleContent}>
           <div className={styles.featureText}>
             <h3 className={styles.featureTitle}>Easy Form Handling</h3>
             <p>
@@ -190,18 +200,6 @@ const Examples = () => {
             />
           </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>
       </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;
   }
 }