diff --git a/app/assets/images/pmoney_landing_1.png b/app/assets/images/pmoney_landing_0.png similarity index 100% rename from app/assets/images/pmoney_landing_1.png rename to app/assets/images/pmoney_landing_0.png diff --git a/app/assets/images/pmoney_landing_1.jpg b/app/assets/images/pmoney_landing_1.jpg new file mode 100644 index 00000000..7424d5e9 Binary files /dev/null and b/app/assets/images/pmoney_landing_1.jpg differ diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 1377853b..df6b1320 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -14,6 +14,7 @@ *= require_self */ +// bulma variables $text: hsl(270, 50%, 29%); $text-light: hsl(270, 50%, 48%); $text-strong: hsl(270, 50%, 21%); @@ -21,17 +22,27 @@ $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; @@ -39,8 +50,12 @@ $text-strong: hsl(270, 50%, 21%); } .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 { diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index 6016f740..abd1e0de 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -1,14 +1,14 @@
-
+
-

+

Spend less on kids's toys and save the family budget

@@ -22,7 +22,7 @@ is-4-widescreen is-offset-1-widescreen is-4-fullhd is-offset-2-fullhd">
- <%= image_tag('pmoney_landing_1.png', alt: 'Children wallet') %> + <%= image_tag('pmoney_landing_0.png', alt: 'Children wallet') %>
@@ -33,59 +33,67 @@
-
+
+ is-4-fullhd ml-6-pmoney-fullhd">
<%= image_tag(reason[0]['image'], alt: reason[0]['name']) %>
-

- <%= reason[0]['name']%> + is-5-fullhd is-offset-2-fullhd"> +

+ <%= reason[0]['name'] %>

-

<%= reason[0]['explanation']%>

+

<%= reason[0]['explanation'] %>

+
+ <%= link_to 'Go!', my_account_path, class: 'button is-large is-fullwidth has-text-weight-bold is-primary ' %> +
-
-
-
-
-
+
+
+
+
-

- <%= reason[1]['name']%> -

-

<%= reason[1]['explanation']%>

-
-
+

+ <%= reason[1]['name'] %> +

+

<%= reason[1]['explanation'] %>

+
+ <%= link_to 'Go!', my_account_path, class: 'button is-large is-fullwidth has-text-weight-bold is-primary ' %> +
+
+
-
- <%= image_tag(reason[1]['image'], alt: reason[1]['name']) %> -
+ is-4-fullhd is-offset-2-fullhd"> +
+ <%= image_tag(reason[1]['image'], alt: reason[1]['name']) %> +
+
-
-
+
+ <% end %> <% end %> diff --git a/config/pocket_money_reasons.yml b/config/pocket_money_reasons.yml index 2e0ac14d..d087516b 100644 --- a/config/pocket_money_reasons.yml +++ b/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