new apps page

_scss/helpers/utilities.scss

@@ -84,7 +84,7 @@ body {
       margin: auto;
       .button-main-text {
         font-size: 16px;
-        font-weight: 500;
+        font-weight: 600;
       }
       .button-sub-text {
         font-size: 11px;

_scss/pages/home.scss

@@ -172,6 +172,7 @@ a:active {
     text-align: center;
   }
   p.subtitle {
+    color: #9B9A98;
     font-size: 16px;
     font-weight: 400;
     margin: 0 auto 10px auto;
@@ -197,6 +198,28 @@ a:active {
     width: fit-content;
     margin: 30px auto;
   }
+  .btn-secondary {
+    background-color: #F4F3F2;
+    border-radius: 26px;
+    height: 52px;
+    width: fit-content;
+    padding: 0 20px;
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0 auto;
+    // center text vertically
+    display: flex;
+    align-items: center;
+  }
+}
+
+// TODO: Make this push to the bottom when the page isn't as tall as the viewport.
+.push-footer {
+  font-size: 12px;
+  text-align: center;
+  margin: 20px 0;
+  padding: 0 10px;
+  width: 100%;
 }
 
 // ----------------------------------

apps.html

@@ -0,0 +1,26 @@
+---
+layout: informational
+breadcrumb: "App Store"
+---
+
+<!-- Custom style= makes the image line up with the icon. -->
+<img src="{{ site.baseurl }}/assets/images/app-store-top.png" alt="App Store icon samples" class="hero" style="max-width: 473px; display: block; margin: 0 auto;">
+<img src="{{ site.baseurl }}/assets/images/butter-app-icon-large.svg" alt="Butter Tile" class="app-tile">
+
+<h1>Discover the Butter App Store</h1>
+<p class="subtitle">Featuring free, ad-free Android apps that use less internet and less battery</p>
+
+<div class="btn-container">
+    {% assign apk_url = site.baseurl | append: "/assets/download/butter.apk" %}
+    {% include fancybutton.html main_cta="Download App Store" sub_cta="Less than 10 MB" href=apk_url %}
+</div>
+
+<a class="btn-secondary" href="{{ site.base_url }}/fdroid-webdash/">View in Browser</a>
+
+<footer class="push-footer">
+    <p>
+        <a href="https://gitlab.com/guardianproject/wind-fdroidclient">
+            The Butter App Store is built on F-Droid free software
+        </a>
+    </p>
+</footer>

index.html

@@ -19,7 +19,7 @@ layout: default
         {% t message_board %}
       </div>
     </a>
-    <a class="btn-modal" href="#" data-micromodal-trigger="product-modal">
+    <a href="{{ site.baseurl }}/apps">
       <div class="card">
           <img src="{{ site.baseurl }}/assets/images/appstore-icon.png" alt="App Store Icon" class="card-icon">
           {% t app_store %}