segmentio · jedrzejchalubek · Oct 7, 2019 · Oct 4, 2019 · Oct 7, 2019 · Oct 7, 2019
diff --git a/src/_includes/components/feedback.html b/src/_includes/components/feedback.html
@@ -0,0 +1,51 @@
+<div class="flex flex--wrap flex--justify waffle">
+  <div class="flex__column flex__column--5">
+    <div class="flex flex--stack flex--justify waffle container container--stretch">
+      <div class="flex__column">
+        <h4>Need support?</h4>
+
+        <p>If you need any help visit our Support page and get in touch with us.</p>
+      </div>
+
+      <div class="flex__column flex__column--shrink">
+        {% include components/button-link.html text="Go to support" href="https://segment.com" %}
+      </div>
+    </div>
+  </div>
+
+  <div class="flex__column flex__column--5">
+    <div class="flex flex--stack flex--justify waffle container container--stretch">
+      <div class="flex__column">
+        <h4>Was this page helpful?</h4>
+      </div>
+
+      <div class="flex__column">
+        <div class="flex">
+          <div class="flex__column flex__column--shrink">
+            <button class="button button--small button-fill button-fill--white" data-ref="feedback[helpful]">
+              <span class="button__icon">
+                {% include icons/symbols/thumb-up.svg %}
+              </span>
+
+              <span>Yes</span>
+            </button>
+          </div>
+
+          <div class="flex__column flex__column--shrink">
+            <button class="button button--small button-fill button-fill--white" data-ref="feedback[unhelpful]">
+              <span class="button__icon">
+                {% include icons/symbols/thumb-down.svg %}
+              </span>
+
+              <span>No</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex__column flex__column--shrink">
+        {% include components/button-link.html text="Send us feedback" href="https://segment.com" %}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/_includes/components/list-steps.html b/src/_includes/components/list-steps.html
@@ -2,12 +2,12 @@
   <span class="list-steps__number">{{ include.number }}</span>
   {% if include.heading == %}
     <div class="list-steps__content list-steps__content--align">
-      {{ include.content }}
+      {{ include.content | markdownify }}
     </div>
   {% else %}
     <h5 class="list-steps__title">{{ include.heading }}</h5>
     <div class="list-steps__content">
-      {{ include.content }}
+      {{ include.content | markdownify }}
     </div>
   {% endif %}
 </div>
diff --git a/src/_includes/components/media-icon.html b/src/_includes/components/media-icon.html
@@ -1,7 +1,7 @@
 <div  class="media-icon media-icon--{{ include.variant }}">
   <a class="media-icon__inner" href="{{ include.href }}">
     <span class="media-icon__icon">
-      {% include icons/{{ include.icon }}.svg %}
+      {% include icons/media/{{ include.icon }} %}
     </span>
     <h5 class="media-icon__heading">{{ include.title }}</h5>
     <div class="media-icon__content">

diff --git a/src/_includes/icons/media/academy.svg → src/_includes/icons/media/icon-academy.svg b/src/_includes/icons/media/academy.svg → src/_includes/icons/media/icon-academy.svg
diff --git a/src/_includes/icons/media/web-app.svg → src/_includes/icons/media/icon-app.svg b/src/_includes/icons/media/web-app.svg → src/_includes/icons/media/icon-app.svg
diff --git a/src/_includes/icons/media/connections.svg → ...includes/icons/media/icon-connections.svg b/src/_includes/icons/media/connections.svg → ...includes/icons/media/icon-connections.svg
diff --git a/src/_includes/icons/media/guides.svg → src/_includes/icons/media/icon-guides.svg b/src/_includes/icons/media/guides.svg → src/_includes/icons/media/icon-guides.svg
diff --git a/src/_includes/icons/media/partners.svg → src/_includes/icons/media/icon-partners.svg b/src/_includes/icons/media/partners.svg → src/_includes/icons/media/icon-partners.svg
diff --git a/src/_includes/icons/media/personas.svg → src/_includes/icons/media/icon-personas.svg b/src/_includes/icons/media/personas.svg → src/_includes/icons/media/icon-personas.svg
diff --git a/src/_includes/icons/media/privacy.svg → src/_includes/icons/media/icon-privacy.svg b/src/_includes/icons/media/privacy.svg → src/_includes/icons/media/icon-privacy.svg
diff --git a/src/_includes/icons/media/protocols.svg → src/_includes/icons/media/icon-protocols.svg b/src/_includes/icons/media/protocols.svg → src/_includes/icons/media/icon-protocols.svg
diff --git a/src/_includes/landing.html b/src/_includes/landing.html
@@ -1,19 +1,14 @@
-<div class="l-block-grid-collection">
+<div class="flex flex--wrap waffle waffle--large">
   {% for category in site.data.landing %}
     {% assign url = category.name | downcase %}
 
     {% if url contains "app" %}
       {% assign url = url | replace: "app", "segment-app" %}
+      {% assign category_href = url | relative_path %}
     {% endif %}
 
-    <a class="block-grid-item" href="{{url | relative_path }}/">
-      <div class="logo">
-        <img src="{{site.baseurl}}/icons/home/{{ category.icon }}" />
-      </div>
-      <div class="content">
-        <p class="title">{{ category.name }}</p>
-        <p class="description">{{ category.description }}</p>
-      </div>
-    </a>
+    <div class="flex__column flex__column--6">
+      {% include components/media-icon.html variant="small" href=category_href icon=category.icon title=category.name content=category.description %}
+    </div>
   {% endfor %}
 </div>
diff --git a/src/_layouts/home.html b/src/_layouts/home.html
@@ -0,0 +1,29 @@
+---
+layout: default
+---
+
+<article class="home page">
+  <div class="home__body">
+    <div>
+      {%- if page.title -%}
+        <h1 id="{{ page.title | downcase }}" class="page__heading">
+          {{ page.title }} {% unless page.landing %}{{ page.integration_type | capitalize }}{% endunless %}
+        </h1>
+      {%- endif -%}
+
+      {%- if page.beta -%}
+        {% include content/beta.md %}
+      {%- endif -%}
+
+      <div class="home__markdown markdown" data-headings-anchors>
+        {{ content }}
+      </div>
+    </div>
+
+    <hr>
+
+    {% include components/feedback.html title="Get started with Segment" content="Segment is the easiest way to integrate your websites & mobile apps data to 250+ analytics and growth tools." %}
+
+    {% include components/callout.html title="Get started with Segment" content="Segment is the easiest way to integrate your websites & mobile apps data to 250+ analytics and growth tools." %}
+  </div>
+</article>
diff --git a/src/_sass/components/_button-link.scss b/src/_sass/components/_button-link.scss
@@ -1,4 +1,4 @@
 .button-link {
   text-decoration: underline;
-  font-weight: 700;
+  font-weight: 500;
 }
diff --git a/src/_sass/components/_media-icon.scss b/src/_sass/components/_media-icon.scss
@@ -1,15 +1,17 @@
 .media-icon {
   $this: &;
 
+  height: 100%;
   border: 1px solid color(border-gray);
   background-color: color(white);
   transition: 0.3s box-shadow;
   border-radius: 8px;
 
   &__inner {
     position: relative;
-    padding: 15px;
+    padding: 10px;
     width: 100%;
+    height: 100%;
     color: color(secondary-dark);
     display: grid;
     column-gap: 15px;
@@ -70,7 +72,7 @@
   }
 
   &__content {
-    font-size: 14px;
+    font-size: 12px;
     color: color(secondary-dark);
     margin-top: 15px;
     grid-area: content;
@@ -79,6 +81,7 @@
     @include breakpoint(large up) {
       margin-top: 0;
       grid-area: content;
+      font-size: 14px;
     }
   }
 
@@ -132,7 +135,7 @@
       text-align: center;
       line-height: 1.57;
       margin-top: 10px;
-      
+
       @include breakpoint(large up) {
         text-align: left;
         margin-top: 0;
@@ -142,7 +145,7 @@
     #{$this}__heading {
       line-height: 1.33;
       padding-top: 15px;
-      
+
       @include breakpoint(large up) {
         text-align: left;
         padding-top: 0;

diff --git a/src/_sass/elements/_h.scss b/src/_sass/elements/_h.scss
@@ -13,6 +13,7 @@ h6,
   color: $heading-color;
   font-weight: $heading-font-weight;
   font-family: $heading-font-family;
+  letter-spacing: -1px;
 }
 
 h1, .h1 {

diff --git a/src/_sass/objects/_container.scss b/src/_sass/objects/_container.scss
@@ -0,0 +1,7 @@
+.container {
+  width: 100%;
+
+  &--stretch {
+    height: 100%;
+  }
+}
diff --git a/src/_sass/pages/_docs.scss b/src/_sass/pages/_docs.scss
@@ -25,6 +25,7 @@
 
     @include breakpoint(large up)  {
       padding-top: 15px;
+      padding-bottom: 70px;
     }
 
     & > * + * {

diff --git a/src/_sass/pages/_home.scss b/src/_sass/pages/_home.scss
@@ -0,0 +1,17 @@
+.home {
+  &__body {
+    & > * + * {
+      margin-top: 30px;
+    }
+  }
+
+  &__markdown {
+    & > p {
+      margin-top: 5px;
+    }
+
+    & > div {
+      margin-top: 25px;
+    }
+  }
+}
diff --git a/src/_sass/segment.scss b/src/_sass/segment.scss
@@ -29,6 +29,7 @@
 @import "objects/gutter";
 @import "objects/waffle";
 @import "objects/image";
+@import "objects/container";
 
 // Elements
 // =================================================
@@ -79,6 +80,7 @@
 // =================================================
 @import "pages/docs";
 @import "pages/page";
+@import "pages/home";
 
 // Vendors
 // =================================================

diff --git a/src/index.md b/src/index.md
@@ -1,7 +1,7 @@
 ---
 title: Segment Documentation
+layout: home
 landing: true
-hide_toc: true
 redirect_from:
 - '/api/'
 - '/big-picture/'
@@ -15,23 +15,27 @@ redirect_from:
 - '/troubleshooting/data'
 ---
 
-**Welcome to the Segment Documentation!**
+Welcome to the Segment!
 Get familiar with our products, features, and integrations!
 
 {% include landing.html %}
 
----
-
 ## Getting Started
 
-- **Totally new here**? Not sure what to track or why? Check out Segment's [Analytics Academy](https://segment.com/academy/) to learn more about the wide world of analytics, including the what and why and some stories about beautiful stacks.
-- **Digging in on technical details**?  Check out [Segment University](https://university.segment.com/) for some step-by-step instruction on implementing Segment, and some of our advanced features.
-- **Ready to get started implementing**? Check out the [Connections](/docsv2/connections/) documentation to learn about our [Sources](/docsv2/connections/sources/) (what you can use to collect your data), [the Segment Spec](/docsv2/connections/spec/) (the formats you can build on to collect data), and our [Destinations](/docsv2/connections/destinations/) (the tools you can then send data to).
+{% capture step1 %}
+  Not sure what to track or why? Check out Segment's [Analytics Academy](https://segment.com/academy/) to learn more about the wide world of analytics, including the what and why and some stories about beautiful stacks.
+{% endcapture %}
 
-Be sure to check out the [Guides](/docsv2/guides/) for FAQs and Best Practices, and dig in to the [App](/docsv2/segment-app/) section to get to know the Segment web app.
+{% capture step2 %}
+  Check out [Segment University](https://university.segment.com/) for some step-by-step instruction on implementing Segment, and some of our advanced features.
+{% endcapture %}
 
-### Intro
+{% capture step3 %}
+  Check out the [Connections](/docsv2/connections/) documentation to learn about our [Sources](/docsv2/connections/sources/) (what you can use to collect your data), [the Segment Spec](/docsv2/connections/spec/) (the formats you can build on to collect data), and our [Destinations](/docsv2/connections/destinations/) (the tools you can then send data to).
+{% endcapture %}
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in ipsum aliquam purus ullamcorper suscipit a et urna. Donec at enim non velit mollis feugiat. Sed arcu purus, condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in ipsum aliquam purus ullamcorper suscipit a et urna. Donec at enim non velit mollis feugiat. Sed arcu purus, condimentum.
+{% include components/list-steps.html number="1" heading="Totally new here?" content=step1 %}
+{% include components/list-steps.html number="2" heading="Digging in on technical details?" content=step2 %}
+{% include components/list-steps.html number="3" heading="Ready to get started implementing?" content=step3 %}
 
----
+Be sure to check out the [Guides](/docsv2/guides/) for FAQs and Best Practices, and dig in to the [App](/docsv2/segment-app/) section to get to know the Segment web app.
diff --git a/src/styleguide.md b/src/styleguide.md
@@ -81,8 +81,8 @@ analytics.identify('025pikachu025', {
 
 ## Media Icons
 
-{% include components/media-icon.html variant="small" href="#" icon="media/academy" title="Title" content="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ratione ipsum fugiat nostrum velit iure, molestiae accusamus tempora quos laborum, ex modi illum delectus. Suscipit nesciunt labore nulla numquam excepturi?" excerpt="Read more" %}
-{% include components/media-icon.html variant="large" href="#" icon="media/academy" title="Title" content="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ratione ipsum fugiat nostrum velit iure, molestiae accusamus tempora quos laborum, ex modi illum delectus. Suscipit nesciunt labore nulla numquam excepturi?" excerpt="Read more" %}
+{% include components/media-icon.html variant="small" href="#" icon="icon-academy.svg" title="Title" content="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ratione ipsum fugiat nostrum velit iure, molestiae accusamus tempora quos laborum, ex modi illum delectus. Suscipit nesciunt labore nulla numquam excepturi?" excerpt="Read more" %}
+{% include components/media-icon.html variant="large" href="#" icon="icon-academy.svg" title="Title" content="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ratione ipsum fugiat nostrum velit iure, molestiae accusamus tempora quos laborum, ex modi illum delectus. Suscipit nesciunt labore nulla numquam excepturi?" excerpt="Read more" %}
 {% include components/button-link.html text="Find out more" href="https://segment.com" %}
 
 ---