feat(landing page): update with the section 2

app/assets/stylesheets/application.scss

@@ -14,33 +14,48 @@
  *= require_self
  */
 
+// bulma variables
 $text: hsl(270, 50%, 29%);
 $text-light: hsl(270, 50%, 48%);
 $text-strong: hsl(270, 50%, 21%);
 
 @import "bulma";
 @import "font-awesome";
 
+// pocket-money variables
+$primary-pocket-money-color: hsl(270, 50%, 40%);
+
 .navbar {
   background-color: white;
 }
 
 @media (max-width: 1024px) {
-  .stacked-elements {
+  .normal-columns {
     flex-direction: column;
     display: flex;
   }
 }
 
+@media (max-width: 1024px) {
+  .reverse-columns {
+    flex-direction: column-reverse;
+    display: flex;
+  }
+}
+
 @media (min-width: 1408px) {
   .ml-6-pmoney-fullhd {
     margin-left: 3rem !important;
   }
 }
 
 .is-primary {
-  background-color: hsl(270, 50%, 40%) !important ;
-  color: hsl(270, 50%, 40%);
+  background-color: $primary-pocket-money-color !important ;
+  color: $primary-pocket-money-color;
+}
+
+.text-has-pmoney-color {
+  color: $primary-pocket-money-color;
 }
 
 .is-light {

app/views/home/index.html.erb

@@ -1,14 +1,14 @@
 <section class="hero is-small is-halfheight">
   <div class="hero-body">
     <div class="container">
-      <div class="columns is-vcentered stacked-elements">
+      <div class="columns is-vcentered normal-columns">
         <div class="column
                     is-10-mobile is-offset-0-mobile
                     is-10-tablet is-offset-1-tablet
                     is-5-desktop is-offset-1-desktop
                     is-5-widescreen is-offset-1-widescreen
                     is-5-fullhd ml-6-pmoney-fullhd">
-          <h1 class="title titled is-1 mb-6 is-size-3-mobile">
+          <h1 class="title titled text-has-pmoney-color is-1 mb-6 is-size-3-mobile">
             Spend less on kids's toys and save the family budget
           </h1>
           <div class="buttons">
@@ -22,7 +22,7 @@
                     is-4-widescreen is-offset-1-widescreen
                     is-4-fullhd is-offset-2-fullhd">
           <figure class="image">
-            <%= image_tag('pmoney_landing_1.png', alt: 'Children wallet') %>
+            <%= image_tag('pmoney_landing_0.png', alt: 'Children wallet') %>
           </figure>
         </div>
       </div>
@@ -33,59 +33,67 @@
   <section class="hero is-halfheight">
     <div class="hero-body">
       <div class="container">
-        <div class="columns is-vcentered stacked-elements">
+        <div class="columns is-vcentered reverse-columns">
           <div class="column
-                      is-10-mobile is-offset-1-mobile
+                      is-10-mobile is-offset-0-mobile
                       is-10-tablet is-offset-1-tablet
                       is-4-desktop is-offset-1-desktop
                       is-4-widescreen is-offset-1-widescreen
-                      is-4-fullhd is-offset-1-fullhd">
+                      is-4-fullhd ml-6-pmoney-fullhd">
             <figure class="image">
               <%= image_tag(reason[0]['image'], alt: reason[0]['name']) %>
             </figure>
           </div>
           <div class="column
-                      is-10-mobile is-offset-1-mobile
+                      is-10-mobile is-offset-0-mobile
                       is-10-tablet is-offset-1-tablet
                       is-5-desktop is-offset-1-desktop
                       is-5-widescreen is-offset-1-widescreen
-                      is-5-fullhd is-offset-1-fullhd">
-            <h1 class="titled title is-2 mb-6 is-size-3-mobile">
-              <%= reason[0]['name']%>
+                      is-5-fullhd is-offset-2-fullhd">
+            <h1 class="titled title text-has-pmoney-color is-2 mb-6 is-size-3-mobile">
+              <%= reason[0]['name'] %>
             </h1>
-            <h2 class="subtitled subtitle">  <%= reason[0]['explanation']%></h2>
+            <h2 class="subtitled subtitle text-has-pmoney-color">  <%= reason[0]['explanation'] %></h2>
+            <div class="buttons">
+              <%= link_to 'Go!', my_account_path, class: 'button is-large is-fullwidth has-text-weight-bold is-primary ' %>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </section>
-  <section class="hero is-halfheight">
-    <div class="hero-body">
-      <div class="container">
-        <div class="columns is-vcentered stacked-elements">
-          <div class="column
-                      is-10-mobile is-offset-1-mobile
+  <% if reason[1] %>
+    <section class="hero is-halfheight">
+      <div class="hero-body">
+        <div class="container">
+          <div class="columns is-vcentered normal-columns">
+            <div class="column
+                      is-10-mobile is-offset-0-mobile
                       is-10-tablet is-offset-1-tablet
                       is-5-desktop is-offset-1-desktop
                       is-5-widescreen is-offset-1-widescreen
-                      is-5-fullhd is-offset-1-fullhd">
-            <h1 class="title titled is-2 mb-6 is-size-3-mobile">
-              <%= reason[1]['name']%>
-            </h1>
-            <h2 class="subtitled subtitle">  <%= reason[1]['explanation']%></h2>
-          </div>
-          <div class="column
-                      is-10-mobile is-offset-1-mobile
+                      is-5-fullhd ml-6-pmoney-fullhd">
+              <h1 class="title titled text-has-pmoney-color is-2 mb-6 is-size-3-mobile">
+                <%= reason[1]['name'] %>
+              </h1>
+              <h2 class="subtitled subtitle text-has-pmoney-color">  <%= reason[1]['explanation'] %></h2>
+              <div class="buttons">
+                <%= link_to 'Go!', my_account_path, class: 'button is-large is-fullwidth has-text-weight-bold is-primary ' %>
+              </div>
+            </div>
+            <div class="column
+                      is-10-mobile is-offset-0-mobile
                       is-10-tablet is-offset-1-tablet
                       is-4-desktop is-offset-1-desktop
                       is-4-widescreen is-offset-1-widescreen
-                      is-4-fullhd is-offset-1-fullhd">
-            <figure class="image">
-              <%= image_tag(reason[1]['image'], alt: reason[1]['name']) %>
-            </figure>
+                      is-4-fullhd is-offset-2-fullhd">
+              <figure class="image">
+                <%= image_tag(reason[1]['image'], alt: reason[1]['name']) %>
+              </figure>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </section>
+    </section>
+  <% end %>
 <% end %>

config/pocket_money_reasons.yml

@@ -1,24 +1,28 @@
 reasons:
+  - name: Get rid of the clutter
+    explanation: Uncontrollable toy purchases lead to chaos at home. Does that make you feel uncomfortable? Take control of toy purchases with our application. Prevent toys from cluttering your space
+    image: pmoney_landing_1.jpg
+
   - name: Convenience
     explanation: An allowance app makes it easy for parents to manage their children's allowances from their smartphones, without having to carry cash or remember to make payments manually
-    image: pmoney_landing_1.png
+    image: pmoney_landing_0.png
 
   - name: Tracking
     explanation: A kids' allowance app allows parents to track how much money their children receive and spend, helping them to monitor their kids' spending habits and teach them financial responsibility
-    image: pmoney_landing_1.png
+    image: pmoney_landing_0.png
 
   - name: Budgeting
     explanation: Parents can use an allowance app to set up a budget for their children, which can help kids learn how to manage money and make wise spending decisions
-    image: pmoney_landing_1.png
+    image: pmoney_landing_0.png
 
   - name: Teaching financial literacy
     explanation: An allowance app can be a useful tool for parents to teach their children about money management and financial literacy
-    image: pmoney_landing_1.png
+    image: pmoney_landing_0.png
 
   - name: Encouraging responsibility
     explanation: By using an allowance app, parents can encourage their children to take responsibility for their own spending and saving, which can help kids develop important life skills
-    image: pmoney_landing_1.png
+    image: pmoney_landing_0.png
 
   - name: Overall
     explanation: A kids' allowance app can be a useful tool for parents to help their children learn about money and develop good financial habits that will serve them well in the future
-    image: pmoney_landing_1.png
+    image: pmoney_landing_0.png