From 296c4311e976cd315f58a9d3761cef4d5ae003f4 Mon Sep 17 00:00:00 2001
From: Yarmo Mackenbach <yarmo@yarmo.eu>
Date: Fri, 28 Aug 2020 10:54:55 +0200
Subject: [PATCH] Improve index

---
 static/styles.css | 30 ++++++++++++++++++++++++++++++
 views/index.pug   |  9 +++++----
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index 129eed5..82bf60a 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -114,6 +114,29 @@ footer a {
     background-color: #72bde6;
     background: linear-gradient(0deg, #4da4d2 0%, #82c5ea 100%);
 }
+.fancyBtn {
+    display: inline-block;
+    margin-bottom: 12px;
+    padding: 8px 24px;
+    color: #fff;
+    font-size: 1.1em;
+    text-transform: uppercase;
+    text-decoration: none;
+    font-weight: bold;
+    background: #8b76f2;
+    /* background: linear-gradient(90deg, #8b76f2 0%, #6abae5 100%); */
+    background: linear-gradient(90deg, #6957c4 0%, #43afea 100%);
+    border: 0;
+    border-radius: 64px;
+    cursor: pointer;
+}
+.fancyBtn:hover {
+    color: #fff;
+    background-color: #a595f4;
+    /* background: linear-gradient(90deg, #a595f4 0%, #93d9ff 100%); */
+    /* background: linear-gradient(90deg, #6957c4 0%, #43afea 100%); */
+    background: linear-gradient(90deg, #8b76f2 0%, #6abae5 100%);
+}
 .full-width {
     width: 100% !important;
 }
@@ -159,11 +182,18 @@ p {
 a {
     color: #3f9acc;
 }
+a:hover {
+    color: #6957c4;
+}
 a.bigBtn {
     margin-right: 8px;
 }
 a.header-anchor {
     text-decoration: none;
+    opacity: 0.5;
+}
+a.header-anchor:hover {
+    opacity: 1;
 }
 ul {
     list-style: "-  ";
diff --git a/views/index.pug b/views/index.pug
index 7db00df..07da5c3 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -4,11 +4,12 @@ block content
   .content
     h1 Keyoxide
     p
-      | A modern, secure and privacy-friendly platform to establish your 
+      a(href="/") Keyoxide
+      |  is a modern, secure and privacy-friendly platform to establish your 
       strong decentralized online identity
-      | . Quickly 
-      a(href="/get-started") get started here
-      |  and generate your own profile with proofs!
+      | .
+    
+    a(href="/getting-started").fancyBtn Get started here
     
     h2 About
     p