feat(homepage): add fonts, images and other styles from figma

app/assets/stylesheets/application.scss

@@ -18,6 +18,7 @@ body {
   font-size: 100%;
   margin: 0;
   padding: 0;
+  font-family: 'Libre Franklin', sans-serif;
 }
 
 * {

app/assets/stylesheets/static_pages.scss

@@ -10,11 +10,23 @@
 }
 
 #money {
-  background: no-repeat center/cover url('cat-background-sample');
+  background: linear-gradient(rgba($primary-color, 0.1) 0%, rgba($primary-color, 0.2) 99%);
+
+  @media (min-width: 48rem) {
+    background: no-repeat center/cover url('donate_photo_1.jpg');
+  }
 }
 
 #cause {
-  background: no-repeat center/cover url('cat-background-sample');
+  background: linear-gradient(rgba($primary-color, 0.2) 0%, rgba($primary-color, 0.1) 99%);
+
+  @media (min-width: 48rem) {
+    background: no-repeat center/cover url('donate_photo_2.jpg');
+  }
+}
+
+#retail {
+  background: linear-gradient(rgba($primary-color, 0.1) 0%, rgba($primary-color, 0.2) 99%);
 }
 
 #money,
@@ -39,7 +51,6 @@
   }
 
   > section {
-    min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -49,6 +60,20 @@
     @media (min-width: 48rem) {
       padding: 2rem 5rem;
     }
+
+    @media (min-width: 80rem) {
+      min-height: 100vh;
+    }
+  }
+
+  .mobile-section-photo {
+    width: 100%;
+    display: block;
+    margin: 0 auto;
+
+    @media (min-width: 48rem) {
+      display: none;
+    }
   }
 
   .subscription {
@@ -86,6 +111,7 @@
 
       h3 {
         width: 100%;
+        font-weight: bold;
         display: flex;
         justify-content: space-between;
       }
@@ -94,6 +120,15 @@
         margin: 0.5rem 0;
         text-align: left;
       }
+
+      p,
+      .trix-content {
+        display: none;
+
+        @media (min-width: 80rem) {
+          display: block;
+        }
+      }
     }
 
     &--plan-price {
@@ -123,11 +158,17 @@
       margin: 1rem 2rem;
       background: $primary-color;
       border: 1px solid $secondary-color;
-      border-radius: 5px;
+      border-radius: 1rem;
+      overflow: hidden;
 
-      img {
+      img { // fix for odd image export from Figma
         display: block;
+        height: 101%;
+        margin-left: -1px;
+        margin-top: -1px;
+        overflow: hidden;
         width: 100%;
+        width: 101%;
       }
     }
   }

app/views/layouts/admin.html.erb

@@ -9,6 +9,8 @@
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link href="https://fonts.googleapis.com/css?family=Libre+Franklin&display=swap" rel="stylesheet">
+
     <%= javascript_pack_tag 'admin-bundle' %>
   </head>
 

app/views/layouts/application.html.erb

@@ -11,7 +11,7 @@
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag 'https://checkout.stripe.com/checkout.js' %>
     <%= javascript_include_tag 'https://js.stripe.com/v3/' %>
-
+    <link href="https://fonts.googleapis.com/css?family=Libre+Franklin&display=swap" rel="stylesheet">
 
     <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

app/views/static_pages/home.html.erb

@@ -47,7 +47,9 @@
       </div>
     </div>
   </section>
-
+
+  <img class="mobile-section-photo" alt="Help us fund our mission" src="assets/donate_photo_1_mobile.jpg" />
+
   <section id="money">
     <div class="content">
       <h2>Where is your money going?</h2>
@@ -60,7 +62,9 @@
       </ul>
     </div>
   </section>
-
+
+  <img class="mobile-section-photo" alt="Push us closer to future projects" src="assets/donate_photo_2_mobile.jpg" />
+
   <section id="cause">
     <div class="content">
       <h2>What are we fighting for?</h2>
@@ -75,16 +79,16 @@
     </div>
   </section>
 
-  <section>
+  <section id="retail">
     <section class="retail--products">
       <div class="retail--product">
-        <img alt="article" src="https://placekitten.com/500/500" />
+        <img alt="sweather" src="assets/product_1.jpg" />
       </div>
       <div class="retail--product">
-        <img alt="article" src="https://placekitten.com/500/500" />
+        <img alt="t-shirt" src="assets/product_2.jpg" />
       </div>
       <div class="retail--product">
-        <img alt="article" src="https://placekitten.com/500/500" />
+        <img alt="stickers" src="assets/product_3.jpg" />
       </div>
     </section>
     <h2>Rather war your cause on your sleeve?</h2>