feat(landing page): update style

widefix · Sep 7, 2023 · ee9c348 · ee9c348
1 parent 8a1c097
commit ee9c348
Show file tree

Hide file tree

Showing 19 changed files with 88 additions and 91 deletions.
diff --git a/app/assets/images/hero.jpg b/app/assets/images/hero.jpg
diff --git a/app/assets/images/pmoney_landing_1.png b/app/assets/images/pmoney_landing_1.png
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -19,7 +19,7 @@
 
 
  .navbar {
-  background-color: lightyellow;
+  background-color: white;
  }
 
  @media (max-width: 1024px) {
@@ -28,3 +28,22 @@
       display: flex;
     }
  }
+
+@media (min-width: 1408px) {
+  .ml-6-pmoney-fullhd  {
+    margin-left: 3rem !important;
+  }
+}
+
+.is-pmoney-primary {
+  background-color: rgb(102, 51, 153);
+  color: white;
+}
+
+.is-pmoney-primary:hover {
+  color: white;
+}
+
+.has-text-pmoney-color {
+  color: rgb(102, 51, 153) !important;
+}
diff --git a/app/views/account_automatic_topup_configs/edit.html.slim b/app/views/account_automatic_topup_configs/edit.html.slim
@@ -6,4 +6,4 @@
         = f.text_field :amount, autofocus: true, class: "input", placeholder: "Weekly amount"
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', account_path(account), class: 'button is-light'
-        = f.submit 'Update', class: "button is-primary"
+        = f.submit 'Update', class: "button is-pmoney-primary"
diff --git a/app/views/account_automatic_topup_configs/new.html.slim b/app/views/account_automatic_topup_configs/new.html.slim
@@ -6,4 +6,4 @@
         = f.text_field :amount, autofocus: true, class: "input", placeholder: "Weekly amount"
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', account_path(account), class: 'button is-light'
-        = f.submit 'Save', class: "button is-primary"
+        = f.submit 'Save', class: "button is-pmoney-primary"
diff --git a/app/views/account_shares/new.html.slim b/app/views/account_shares/new.html.slim
@@ -12,4 +12,4 @@
       br
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', account_shares_path(account), class: 'button is-light'
-        = f.submit "Send invitation", class: 'button is-primary'
+        = f.submit "Send invitation", class: 'button is-pmoney-primary'
diff --git a/app/views/accounts/edit.html.slim b/app/views/accounts/edit.html.slim
@@ -13,4 +13,4 @@
       br
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', account_path(account), class: 'button is-light'
-        = f.submit 'Save', class: 'button is-primary'
+        = f.submit 'Save', class: 'button is-pmoney-primary'
diff --git a/app/views/accounts/new.html.slim b/app/views/accounts/new.html.slim
@@ -8,4 +8,4 @@
         br
         div.buttons.is-flex.is-justify-content-flex-end
           = link_to 'Back', my_account_path, class: 'button is-light'
-          = f.submit 'Save', class: "button is-primary is-fullwidth"
+          = f.submit 'Save', class: "button is-pmoney-primary is-fullwidth"
diff --git a/app/views/devise/registrations/edit.html.slim b/app/views/devise/registrations/edit.html.slim
@@ -20,4 +20,4 @@
           | (we need your current password to confirm your changes)
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', request.referer.present? && request.referer != edit_user_registration_path ? request.referer : root_path, class: 'button is-light'
-        = f.submit "Update",  class: "button is-primary"
+        = f.submit "Update",  class: "button is-pmoney-primary"
diff --git a/app/views/devise/registrations/new.html.slim b/app/views/devise/registrations/new.html.slim
@@ -15,7 +15,7 @@
       br
       .actions.is-flex.is-flex-direction-column.is-align-items-end
       div.is-fullwidth
-        = f.submit 'Sign up',  class: "button is-primary is-fullwidth"
+        = f.submit 'Sign up',  class: "button is-pmoney-primary is-fullwidth"
       br
       .is-flex.is-justify-content-center
         | Already have an account? &nbsp;

diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -1,30 +1,28 @@
-<section class="hero is-white is-halfheight">
+<section class="hero is-small 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-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-1 mb-6">
-            Children wallet
+                    is-5-fullhd ml-6-pmoney-fullhd">
+          <h1 class="title titled is-1 mb-6 has-text-pmoney-color is-size-3-mobile">
+            Spend less on kids's toys and save the family budget
           </h1>
-          <div class="column is-half">
-            <div class="buttons">
-              <%= link_to 'Go!', my_account_path, class: 'button is-primary is-fullwidth' %>
-            </div>
+          <div class="buttons">
+            <%= link_to 'Go!', my_account_path, class: 'button is-large is-fullwidth has-text-weight-bold is-pmoney-primary ' %>
           </div>
         </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-4-desktop is-offset-1-desktop
                     is-4-widescreen is-offset-1-widescreen
-                    is-4-fullhd is-offset-1-fullhd">
+                    is-4-fullhd is-offset-2-fullhd">
           <figure class="image">
-            <%= image_tag('hero.jpg', alt: 'Children wallet') %>
+            <%= image_tag('pmoney_landing_1.png', alt: 'Children wallet') %>
           </figure>
         </div>
       </div>
@@ -52,10 +50,10 @@
                       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">
+            <h1 class="titled title is-2 mb-6 has-text-pmoney-color is-size-3-mobile">
               <%= reason[0]['name']%>
             </h1>
-            <h2 class="subtitled subtitle">  <%= reason[0]['explanation']%></h2>
+            <h2 class="subtitled subtitle has-text-pmoney-color">  <%= reason[0]['explanation']%></h2>
           </div>
         </div>
       </div>
@@ -71,10 +69,10 @@
                       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">
+            <h1 class="title titled is-2 mb-6 has-text-pmoney-color is-size-3-mobile">
               <%= reason[1]['name']%>
             </h1>
-            <h2 class="subtitled subtitle">  <%= reason[1]['explanation']%></h2>
+            <h2 class="subtitled subtitle has-text-pmoney-color">  <%= reason[1]['explanation']%></h2>
           </div>
           <div class="column
                       is-10-mobile is-offset-1-mobile
@@ -91,25 +89,3 @@
     </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>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -12,38 +12,40 @@
   </head>
 
   <body>
-    <nav class="navbar" role="navigation" aria-label="main navigation">
-      <div class="navbar-brand">
-        <%= link_to root_path, class: "navbar-item" do %>
-          <%= image_tag 'logo.svg', width: 112, height: 28 %>
-        <% end %>
-        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-        </a>
-      </div>
-      <div id="navbarMenu" class="navbar-menu">
-        <div class="navbar-end">
-          <div class="navbar-item">
-            <div class="buttons">
-              <% if user_signed_in? %>
-                <div class="navbar-item has-dropdown is-hoverable">
-                  <a class="button is-primary is-outlined">
-                    <span class="icon">
-                      <i class="fa fa-user"></i>
-                    </span>
-                  </a>
-                  <div class="navbar-dropdown is-right is-boxed">
-                    <%= link_to 'My profile', edit_user_registration_path, class: "navbar-item" %>
-                    <hr class="navbar-divider">
-                    <%= link_to 'Log out', destroy_user_session_path, method: :delete, class:"navbar-item"%>
+    <nav class="navbar is-spaced" role="navigation" aria-label="main navigation">
+      <div class="container">
+        <div class="navbar-brand">
+          <%= link_to root_path, class: "navbar-item" do %>
+            <%= image_tag 'logo.svg', width: 112, height: 28 %>
+          <% end %>
+          <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+          </a>
+        </div>
+        <div id="navbarMenu" class="navbar-menu">
+          <div class="navbar-end">
+            <div class="navbar-item">
+              <div class="buttons">
+                <% if user_signed_in? %>
+                  <div class="navbar-item has-dropdown is-hoverable">
+                    <a class="button is-pmoney-primary">
+                      <span class="icon">
+                        <i class="fa fa-user"></i>
+                      </span>
+                    </a>
+                    <div class="navbar-dropdown is-right is-boxed">
+                      <%= link_to 'My profile', edit_user_registration_path, class: "navbar-item" %>
+                      <hr class="navbar-divider">
+                      <%= link_to 'Log out', destroy_user_session_path, method: :delete, class:"navbar-item"%>
+                    </div>
                   </div>
-                </div>
-              <% else %>
-                <%= link_to 'Sign up', new_user_registration_path, class: 'button is-primary' %>
-                <%= link_to 'Log in', new_user_session_path, class: 'button is-light' %>
-              <% end %>
+                <% else %>
+                  <%= link_to 'Sign up', new_user_registration_path, class: 'button is-pmoney-primary' %>
+                  <%= link_to 'Log in', new_user_session_path, class: 'button is-light' %>
+                <% end %>
+              </div>
             </div>
           </div>
         </div>

diff --git a/app/views/my_accounts/show.html.slim b/app/views/my_accounts/show.html.slim
@@ -1,7 +1,7 @@
 .columns
   .column.is-flex.is-justify-content-flex-end
     - if account.children.present? || shared_accounts.present?
-      = link_to 'Add account', new_account_path, class: 'button is-primary'
+      = link_to 'Add account', new_account_path, class: 'button is-pmoney-primary'
 
 - if account.children.present? || shared_accounts.present?
   - account.children.each do |child|
@@ -66,4 +66,4 @@
               h1.title.titled.is-5.mb-6
                 p Welcome to our app!
                 p We invite you to embark on your journey by creating your first account
-              = link_to 'Add account', new_account_path, class: 'button is-primary'
+              = link_to 'Add account', new_account_path, class: 'button is-pmoney-primary'
diff --git a/app/views/objectives/new.html.slim b/app/views/objectives/new.html.slim
@@ -10,4 +10,4 @@
         = f.text_field :image_url, class: "input", placeholder: "Image URL"
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', account_path(account), class: 'button is-light'
-        = f.submit 'Save', class: 'button is-primary'
+        = f.submit 'Save', class: 'button is-pmoney-primary'
diff --git a/app/views/public_account_shares/new.html.slim b/app/views/public_account_shares/new.html.slim
@@ -4,4 +4,4 @@
   p Create a new Public Account Share
 
 = form_with(url: account_public_account_shares_path, method: :post) do |form|
-  = form.submit 'Create', class: 'button is-primary'
+  = form.submit 'Create', class: 'button is-pmoney-primary'
diff --git a/app/views/spends/new.html.slim b/app/views/spends/new.html.slim
@@ -14,4 +14,4 @@
         = f.text_field :description, class: "input", placeholder: "Description"
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', request.referer, class: 'button is-light'
-        = f.submit 'Save', class: "button is-primary is-fullwidth"
+        = f.submit 'Save', class: "button is-pmoney-primary is-fullwidth"
diff --git a/app/views/topups/new.html.slim b/app/views/topups/new.html.slim
@@ -14,4 +14,4 @@
         = f.text_field :description, class: "input", placeholder: "Description"
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', request.referer, class: 'button is-light'
-        = f.submit 'Save', class: "button is-primary is-fullwidth"
+        = f.submit 'Save', class: "button is-pmoney-primary is-fullwidth"
diff --git a/config/initializers/bulma_form_builder.rb b/config/initializers/bulma_form_builder.rb
@@ -78,7 +78,7 @@ def submit(value = nil, options = {})
 
   # Submit button with the primary colour for most forms
   def submit_primary(value = nil, options = {})
-    submit(value, merge_class(options, 'is-primary'))
+    submit(value, merge_class(options, 'is-pmoney-primary'))
   end
 
   private

diff --git a/config/pocket_money_reasons.yml b/config/pocket_money_reasons.yml
@@ -1,24 +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
+    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
 
   - 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
+    image: pmoney_landing_1.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: hero.jpg
+    image: pmoney_landing_1.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: hero.jpg
+    image: pmoney_landing_1.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: hero.jpg
+    image: pmoney_landing_1.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: hero.jpg
+    image: pmoney_landing_1.png