add chat copy, button in EN

_data/en/home.yml

@@ -2,12 +2,12 @@ site_name: 'Butter'
 page_logo: ['/assets/images/butter-logo-feature-large.svg', 'Butter App Feature Logo']
 title: 'Life without internet made smoother. <br /> Get access to tools that help.'
 text: |
-  Butter features a collection of apps to make life without <br /> the internet a little smoother.
+  This Butter Box offers an Android app store and chat rooms.  You can use the app store to discover and download free, ad-free apps or to spread the love and share apps offline. The chat rooms hang on to messages while you're gone and deliver them whenever a device reconnects to the Butter Box.
-  Use it to discover and download <br /> free, ad-free apps or to spread the love and share offline.
+fdroid_apps_caption: Just a few of the apps available via Butter.
-button_text: 'Download Android App'
+fdroid_button_text: 'Download Android App Store'
+chat_button_text: 'Start a chat room instantly'
 image: ['/assets/images/butter-collection-features-offline-essentials.svg', 'Butter App features collection']
 
-
 modal_data:
   title: 'Butter: Free, ad-free apps to help you offline'
   logo: ['/assets/images/butter-app-icon-large.svg', 'Butter App Logo']

_data/home.yml

@@ -2,12 +2,12 @@ site_name: 'Butter'
 page_logo: ['/assets/images/butter-logo-feature-large.svg', 'Butter App Feature Logo']
 title: 'Life without internet made smoother. <br /> Get access to tools that help.'
 text: |
-  Butter features a collection of apps to make life without <br /> the internet a little smoother.
+  This Butter Box offers an Android app store and chat rooms.  You can use the app store to discover and download free, ad-free apps or to spread the love and share apps offline. The chat rooms hang on to messages while you're gone and deliver them whenever a device reconnects to the Butter Box.
-  Use it to discover and download <br /> free, ad-free apps or to spread the love and share offline.
+fdroid_apps_caption: Just a few of the apps available via Butter.
-button_text: 'Download Android App'
+fdroid_button_text: 'Download Android App Store'
+chat_button_text: 'Start a chat room instantly'
 image: ['/assets/images/butter-collection-features-offline-essentials.svg', 'Butter App features collection']
 
-
 modal_data:
   title: 'Butter: Free, ad-free apps to help you offline'
   logo: ['/assets/images/butter-app-icon-large.svg', 'Butter App Logo']

_scss/helpers/utilities.scss

@@ -64,6 +64,7 @@ body {
   &:hover {
     background-color: lighten($royal-blue, 5%);
   }
+  margin-bottom: 10px;
 }
 
 
@@ -77,6 +78,13 @@ body {
   }
 }
 
+.caption {
+  color: $dark-gray;
+  font-family: $text-font-family;
+  font-size: 16px;
+  margin-top: 8px;
+}
+
 .text-black {
   color: $black;
 }
@@ -94,6 +102,9 @@ body {
 .mb-2 {
   margin-bottom: 24px;
 }
+.mt-2 {
+  margin-top: 24px;
+}
 
 
 // Arrows classes

_scss/pages/home.scss

@@ -3,6 +3,7 @@
 // -------------------------
 .main-area {
   background-color: $gold;
+  min-height: 100vh;
 }
 
 // -------------------------
@@ -92,6 +93,7 @@ a:active {
 .content-area {
   &-wrapper {
     margin-top: 30px;
+    min-height: calc(100vh - 202px);  // take up space above the footer 
     .content-title {
       font-size: 42px;
       font-weight: 800;
@@ -114,7 +116,7 @@ a:active {
       img {
         display: block;
         margin: 0 auto;
-        max-width: 100%;
+        max-width: 70%;
       }
     }
   }

index.html

@@ -8,12 +8,15 @@ layout: default
   <div class="container">
     <div class="content-area-wrapper text-center">
       <img src="{{site.baseurl}}{{ page_data.page_logo[0] }}" alt="{{ page_data.page_logo[1] }}" />
-      <h1 class="content-title mb-2">{{ page_data.title }}</h1>
+      <h1 class="content-title mb-2 mt-2">{{ page_data.title }}</h1>
       <p class="content-text text-black ls-40 mb-2">{{ page_data.text }}</p>
-      <a class="btn-main btn-modal" href="#" data-micromodal-trigger="product-modal">{{ page_data.button_text | upcase }}</a>
       <div class="content-img">
         <img src="{{site.baseurl}}{{ page_data.image[0] }}" alt="{{ page_data.image[1] }}" />
+        <p class="caption ls-40 mb-2">{{ page_data.fdroid_apps_caption }}</p>
       </div>
+      <a class="btn-main btn-modal" href="#" data-micromodal-trigger="product-modal">{{ page_data.fdroid_button_text | upcase }}</a>
+      <a class="btn-main btn-modal" href="/chat">{{ page_data.chat_button_text | upcase }}</a>
+      <p class="content-text text-black ls-40 mb-2">{{ page_data.chat_text }}</p>
     </div>
   </div>
 </section>