feat(landing page): update text, style (#59)

app/assets/stylesheets/application.scss

@@ -21,3 +21,10 @@
  .navbar {
   background-color: lightyellow;
  }
+
+ @media (max-width: 1024px) {
+    .reverse-columns {
+      flex-direction: column-reverse;
+      display: flex;
+    }
+ }

app/controllers/home_controller.rb

@@ -1,4 +1,5 @@
 class HomeController < ApplicationController
   def index
+    @pocket_money_reasons = YAML.load_file(Rails.root.join('config', 'pocket_money_reasons.yml'))['reasons']
   end
 end

app/views/devise/sessions/new.html.slim

@@ -1,6 +1,6 @@
 .columns.is-centered
   .column.is-one-third
-    h2.title.is-4.has-text-centered = t('.sign_up')
+    h2.title.is-4.has-text-centered = t('.log_in')
     = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
       .field
         = f.email_field :email, autofocus: true, autocomplete: "email", placeholder: "email"

app/views/home/index.html.erb

@@ -0,0 +1,115 @@
+<section class="hero is-white is-halfheight">
+  <div class="hero-body">
+    <div class="container">
+      <div class="columns is-vcentered reverse-columns">
+        <div class="column
+                    is-10-mobile is-offset-1-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-1 mb-6">
+            Children wallet
+          </h1>
+          <div class="column is-half">
+            <div class="buttons">
+              <%= link_to 'Go!', my_account_path, class: 'button is-primary is-fullwidth' %>
+            </div>
+          </div>
+        </div>
+        <div class="column
+                    is-10-mobile is-offset-1-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('hero.jpg', alt: 'Children wallet') %>
+          </figure>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<% @pocket_money_reasons.each_slice(2) do |reason| %>
+  <section class="hero is-white is-halfheight">
+    <div class="hero-body">
+      <div class="container">
+        <div class="columns is-vcentered reverse-columns">
+          <div class="column
+                      is-10-mobile is-offset-1-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[0]['image'], alt: reason[0]['name']) %>
+            </figure>
+          </div>
+          <div class="column
+                      is-10-mobile is-offset-1-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">
+              <%= reason[0]['name']%>
+            </h1>
+            <h2 class="subtitled subtitle">  <%= reason[0]['explanation']%></h2>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="hero is-white is-halfheight">
+    <div class="hero-body">
+      <div class="container">
+        <div class="columns is-vcentered reverse-columns">
+          <div class="column
+                      is-10-mobile is-offset-1-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">
+              <%= reason[1]['name']%>
+            </h1>
+            <h2 class="subtitled subtitle">  <%= reason[1]['explanation']%></h2>
+          </div>
+          <div class="column
+                      is-10-mobile is-offset-1-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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+<% end %>
+<section class="hero is-white is-small">
+  <div class="hero-body">
+    <div class="container">
+      <div class="hero-body">
+        <div class="container">
+          <div class="columns is-centered">
+            <div class="column
+                        is-10-mobile is-offset-1-mobile
+                        is-10-tablet is-offset-1-tablet
+                        is-4-desktop is-offset-1-desktop
+                        is-4-widescreen is-offset-1-widescreen
+                        is-3-fullhd is-offset-1-fullhd">
+              <div class="buttons">
+                <%= link_to "Let's go!", my_account_path, class: 'button is-primary is-fullwidth' %>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

app/views/layouts/application.html.erb

@@ -5,6 +5,8 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
   </head>

config/pocket_money_reasons.yml

@@ -0,0 +1,24 @@
+reasons:
+  - 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: hero.jpg
+
+  - 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: hero.jpg
+
+  - 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: hero.jpg
+
+  - 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: hero.jpg
+
+  - 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: hero.jpg
+
+  - 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: hero.jpg