Skip to content

Commit

Permalink
feat(landing page): update style (#79)
Browse files Browse the repository at this point in the history 
* feat(landing page): update style

* feat(landing page): redefine color constants
  • Loading branch information
@andreybakanovsky
andreybakanovsky committed Sep 8, 2023
1 parent 25da517 commit d2eb7f4
Show file tree
Hide file tree
Showing 6 changed files with 86 additions and 90 deletions.
Binary file removed app/assets/images/hero.jpg
View file
Binary file not shown.
Binary file added app/assets/images/pmoney_landing_1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 29 additions & 11 deletions app/assets/stylesheets/application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,35 @@
*= require_self
*/

@import "bulma";
@import "font-awesome";
$text: hsl(270, 50%, 29%);
$text-light: hsl(270, 50%, 48%);
$text-strong: hsl(270, 50%, 21%);

@import "bulma";
@import "font-awesome";

.navbar {
background-color: lightyellow;
}
.navbar {
background-color: white;
}

@media (max-width: 1024px) {
.reverse-columns {
flex-direction: column-reverse;
display: flex;
}
}
@media (max-width: 1024px) {
.stacked-elements {
flex-direction: column;
display: flex;
}
}

@media (min-width: 1408px) {
.ml-6-pmoney-fullhd {
margin-left: 3rem !important;
}
}

.is-primary {
background-color: rgb(102, 51, 153) !important ;
color: rgb(102, 51, 153);
}

.is-light {
color: $text-light !important ;
}
58 changes: 17 additions & 41 deletions app/views/home/index.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,39 @@
<section class="hero is-white is-halfheight">
<section class="hero is-small is-halfheight">
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered reverse-columns">
<div class="columns is-vcentered stacked-elements">
<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 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-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>
</div>
</div>
</section>
<% @pocket_money_reasons.each_slice(2) do |reason| %>
<section class="hero is-white is-halfheight">
<section class="hero is-halfheight">
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered reverse-columns">
<div class="columns is-vcentered stacked-elements">
<div class="column
is-10-mobile is-offset-1-mobile
is-10-tablet is-offset-1-tablet
Expand All @@ -52,7 +50,7 @@
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 is-size-3-mobile">
<%= reason[0]['name']%>
</h1>
<h2 class="subtitled subtitle"> <%= reason[0]['explanation']%></h2>
Expand All @@ -61,17 +59,17 @@
</div>
</div>
</section>
<section class="hero is-white is-halfheight">
<section class="hero is-halfheight">
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered reverse-columns">
<div class="columns is-vcentered stacked-elements">
<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">
<h1 class="title titled is-2 mb-6 is-size-3-mobile">
<%= reason[1]['name']%>
</h1>
<h2 class="subtitled subtitle"> <%= reason[1]['explanation']%></h2>
Expand All @@ -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>
64 changes: 33 additions & 31 deletions app/views/layouts/application.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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-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-primary' %>
<%= link_to 'Log in', new_user_session_path, class: 'button is-light' %>
<% end %>
</div>
</div>
</div>
</div>
Expand Down
14 changes: 7 additions & 7 deletions config/pocket_money_reasons.yml
View file
Original file line number Diff line number Diff line change
@@ -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

0 comments on commit d2eb7f4

Please sign in to comment.