Add info section to main page

Signed-off-by: lucperkins <lucperkins@gmail.com>

assets/sass/style.sass

@@ -28,6 +28,7 @@ $primary: $grpc-green
 $secondary: $grpc-blue
 $navbar-height: 5rem
 $navbar-item-img-max-height: $navbar-height * 0.6
+$section-padding: 6rem 1.5rem
 
 // Font overrides
 {{ if $fonts }}
@@ -64,7 +65,7 @@ $colors: mergeColorMaps(("secondary": ($secondary, $white)), $colors)
 
 // @import "bulma/sass/elements/box"
 @import "bulma/sass/elements/button"
-// @import "bulma/sass/elements/content"
+@import "bulma/sass/elements/content"
 @import "bulma/sass/elements/icon"
 // @import "bulma/sass/elements/image"
 // @import "bulma/sass/elements/notification"
@@ -105,18 +106,34 @@ $colors: mergeColorMaps(("secondary": ($secondary, $white)), $colors)
 =logo($d, $t)
   +desktop
     width: $d
-    margin-bottom: 2rem
   +touch
     width: $t
-    margin-bottom: 1rem
 
 .is-hero-logo
   +logo(50%, 80%)
 
+  +desktop
+    margin-bottom: 2rem
+  +touch
+    margin-bottom: 1rem
+
+.is-feature-icon
+  +tablet
+    width: 80%
+  +mobile
+    width: 30%
+
+  +touch
+    margin: 0 auto
+
 .is-page
   display: flex
   flex-direction: column
   min-height: 100vh
 
   .is-main
-    flex: 1
+    flex: 1
+
+  
+.is-feature-pane
+  margin-bottom: 2rem

config.toml

@@ -14,6 +14,30 @@ google_analytics_id = "UA-60127042-1"
 font_awesome_version = "5.12.1"
 milestones_link = "https://github.com/grpc/grpc/milestones"
 description = "A high-performance, open source universal RPC framework"
+why = """
+gRPC is a modern open source high performance RPC framework that can run in any environment. It can efficiently connect services in and across data centers with pluggable support for load balancing, tracing, health checking and authentication. It is also applicable in last mile of distributed computing to connect devices, mobile applications and browsers to backend services.
+"""
+
+[[params.features]]
+title = "Simple service definition"
+description = "Define your service using Protocol Buffers, a powerful binary serialization toolset and language"
+icon = "feature-1.svg"
+
+[[params.features]]
+title = "Start quickly and scale"
+description = "Install runtime and dev environments with a single line and also scale to millions of RPCs per second with the framework"
+icon = "feature-2.svg"
+
+[[params.features]]
+title = "Works across languages and platforms"
+description = "Automatically generate idiomatic client and server stubs for your service in a variety of languages and platforms"
+icon = "feature-3.svg"
+
+[[params.features]]
+title = "Bi-directional streaming and integrated auth"
+description = "Bi-directional streaming and fully integrated pluggable authentication with HTTP/2-based transport"
+icon = "feature-4.svg"
+
 
 [params.logos]
 navbar = "grpc-horizontal-white.png"

layouts/index.html

@@ -1,3 +1,5 @@
 {{ define "main" }}
 {{ partial "home/hero.html" . }}
+{{ partial "home/info.html" . }}
+{{ partial "home/used-by.html" . }}
 {{ end }}

layouts/partials/home/info.html

@@ -0,0 +1,42 @@
+{{ $why      := site.Params.why | markdownify }}
+{{ $features := site.Params.features }}
+<section class="section">
+  <div class="container has-text-centered">
+    <p class="title is-size-1 is-size-2-mobile has-text-primary has-text-weight-medium">
+      Why gRPC?
+    </p>
+
+    <div class="content is-large has-text-weight-light">
+      {{ $why }}
+    </div>
+  </div>
+</section>
+
+<section class="section has-background-white-bis">
+  <div class="container">
+    <div class="columns is-vcentered is-multiline is-variable is-8">
+      {{ range $features }}
+      {{ $icon  := printf "img/icons/%s" .icon | relURL }}
+      {{ $title := .title }}
+      {{ $desc  := .description | markdownify }}
+      <div class="column is-half is-feature-pane">
+        <div class="columns is-variable is-8">
+          <div class="column is-one-third">
+            <img class="is-feature-icon" src="{{ $icon }}" alt="{{ $title }} feature icon">
+          </div>
+
+          <div class="column">
+            <p class="title is-size-3 is-size-4-mobile has-text-primary has-text-weight-light is-spaced">
+              {{ $title }}
+            </p>
+
+            <p class="subtitle">
+              {{ $desc }}
+            </p>
+          </div>
+        </div>
+      </div>
+      {{ end }}
+    </div>
+  </div>
+</section>