From 5bd30cac87d3a27d23627d7afc0089a079e7fd03 Mon Sep 17 00:00:00 2001
From: erciccione <erciccione@protonmail.com>
Date: Wed, 19 May 2021 10:04:45 +0200
Subject: [PATCH] home: update top card with new slogan and additional button

---
 _i18n/en.yml   |  7 ++++---
 css/custom.css | 25 ++++++++++++++++++++-----
 index.html     |  8 ++++----
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/_i18n/en.yml b/_i18n/en.yml
index c4ae3eb9..3f5ffd13 100644
--- a/_i18n/en.yml
+++ b/_i18n/en.yml
@@ -68,10 +68,11 @@ index:
   page_title: "Monero - secure, private, untraceable"
 
 home:
-  heading2: A Private Digital Currency
-  monero_is_cash: Monero is cash for a connected world. It’s fast, private, and secure. With Monero, you are your own bank. You can spend safely, knowing that others cannot see your balances or track your activity.
+  heading: Monero Means Money
+  heading2: Private, decentralized cryptocurrency that keeps your finances confidential and secure.
   whatis: Learn more about Monero
-  get_started: Get Started
+  about: About Monero
+  joincommunity: Join Community
   choosewallet: Choose a Wallet
   choosewallet_para: To use Monero, the first thing you are going to need is a wallet. Visit our Downloads page and get the right wallet for you. The Monero wallets are available for a variety of platforms and contain everything you need to use Monero immediately.
   downloads: Downloads
diff --git a/css/custom.css b/css/custom.css
index 24350b2e..b4eea659 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -1434,8 +1434,7 @@ p, h4 {
 h1#main-h1 {
     font-family: 'Hind', 'Open Sans', sans-serif;
     font-weight: 700;
-    font-size: 3.4375rem;
-    text-transform: uppercase;
+    font-size: 2.6rem;
     margin: 0;
     line-height: 1;
     padding: 0;
@@ -1576,7 +1575,6 @@ h1 {
 
 h1#main-h1 {
     font-size: 3rem;
-    text-transform: uppercase;
     margin: 0;
 }
 
@@ -2641,9 +2639,9 @@ img.monero-logo {
     display: block;
 }
 
-.main-info #btn-primary-box {
+.main-info #btn-top-box {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
 }
 
 .main-info p a.btn-auto, a.btn-primary {
@@ -2656,6 +2654,12 @@ img.monero-logo {
     padding: 0;
 }
 
+a.btn-primary-top {
+  background-color: #d26e2b;
+  border: 2px solid #d26e2b;
+  color: #ffffff;
+}
+
 .main-info p a.btn-auto:hover, a.btn-primary:hover, .main-info p a.btn-auto:focus, a.btn-primary:focus, .main-info p a.btn-auto:active, a.btn-primary:active {
     background-color: #ce5e14;
     border: 2px solid #ce5e14;
@@ -2742,6 +2746,11 @@ p.main-downloads {
     padding-left: 0.5rem;
 }
 
+a.btn-primary-top {
+  margin-top: 1rem;
+  padding: 0;
+}
+
 }
 
 @media only screen and (max-width: 62rem) {
@@ -2795,6 +2804,12 @@ p.main-downloads {
     padding-left: 0;
 }
 
+.main-info #btn-top-box {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+
 }
 
 @media only screen and (max-width: 48rem) {
diff --git a/index.html b/index.html
index eb4c7dcf..521cf53e 100644
--- a/index.html
+++ b/index.html
@@ -23,11 +23,11 @@ permalink: index.html
                 </div>
                 <div class="col-lg-5 col-md-5 col-xs-12">
                     <div class="main-info">
-                        <h1 id="main-h1">{% t global.monero %}</h1>
+                        <h1 id="main-h1">{% t home.heading %}</h1>
                         <h2 id="main-h2">{% t home.heading2 %}</h2>
-                            <p id="main-text">{% t home.monero_is_cash %}</p>
-                            <p id="btn-primary-box">
-                                <a href="{{ site.baseurl }}/get-started/what-is-monero/" class="btn-link btn-auto btn-intro btn-primary">{% t home.whatis %}</a>
+                            <p id="btn-top-box">
+                                <a href="{{ site.baseurl }}/get-started/what-is-monero/" class="btn-link btn-fixed btn-primary-top">{% t home.about %}</a>
+                                <a href="{{ site.baseurl }}/get-started/what-is-monero/" class="btn-link btn-fixed btn-primary-top">{% t home.joincommunity %}</a>
                             </p>
                     </div>
                 </div>