From 4613e2bc6062c770a945dfc0a2c4c598e1a14a9f Mon Sep 17 00:00:00 2001
From: "Urko." <urko@fungimail.com>
Date: Tue, 26 Dec 2023 19:18:19 +0100
Subject: [PATCH] fix: index css styles

---
 cmd/http/views/index.hbs | 56 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 7 deletions(-)
diff --git a/cmd/http/views/index.hbs b/cmd/http/views/index.hbs
index 9a621ee..f8fe60c 100644
--- a/cmd/http/views/index.hbs
+++ b/cmd/http/views/index.hbs
@@ -4,31 +4,32 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>BTC Pay Checker</title>
+    <title>BTCPayChecker</title>
     <style>
         body {
             font-family: Arial, sans-serif;
             margin: 0;
             padding: 0;
-            background-color: #f4f4f4;
+            background-color: #191D20;
         }
 
         .container {
             width: 80%;
             margin: auto;
             overflow: hidden;
+            color: #ffffff;
         }
 
         header {
-            background: #50b3a2;
+            background: #191D20;
             color: white;
             padding-top: 30px;
             min-height: 70px;
-            border-bottom: #e8491d 3px solid;
+            border-bottom: #FF006E 3px solid;
         }
 
         header a {
-            color: #ffffff;
+            color: #EFEFEF;
             text-decoration: none;
             text-transform: uppercase;
             font-size: 16px;
@@ -55,7 +56,7 @@
 
         header .highlight,
         header .current a {
-            color: #e8491d;
+            color: #FF006E;
             font-weight: bold;
         }
 
@@ -83,15 +84,38 @@
         .number {
             color: #61aeee;
         }
+
+        .get-started-btn {
+            background-color: #FF006E;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 16px;
+            margin: 4px 2px;
+            cursor: pointer;
+            border-radius: 5px;
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        .get-started-btn:hover {
+            background-color: #e60062;
+            color: #ffffff;
+        }
     </style>
 </head>
 
 <body>
     <header>
         <div class="container">
-            <div id="branding">
+<div id="branding">
                 <h1><span class="highlight">BTC</span> Pay Checker</h1>
             </div>
+
+
+        <!-- Get Started Button -->
             <nav>
                 <ul>
                     <li class="current"><a href="/">Home</a></li>
@@ -103,6 +127,24 @@
     </header>
 
     <div class="container">
+                <h2>Welcome to BTC Paychecker!</h2>
+            <p>If you're looking to process orders using bitcoin, you landed in the right place.</p>
+
+            <h3>Let's walk through how to use our '/order' POST endpoint. It's like filling out a digital form to tell us what you need!</h3>
+            <p>Here's a simple breakdown of what you'll need to provide:</p>
+            <ul>
+                <li><strong>Order ID:</strong> Just like a unique receipt number, this is the ID for your order.</li>
+                <li><strong>Client ID:</strong> This is your identification in our system.</li>
+                <li><strong>Amount:</strong> Tell us how much you're paying, in USD.</li>
+                <li><strong>Currency:</strong> We need to know the currency type. Make sure it's a valid FiatCurrency.</li>
+                <li><strong>Client Email:</strong> Where should we send the confirmations? Give us your email.</li>
+            </ul>
+            <p><strong>Click 'Get Started' to download our quick & easy PDF guide.</strong></p>
+
+            <a href="/get-started" class="get-started-btn" download>Get Started</a>
+            <p>This guide will help you get set up for everything you need to make business transactions with BTC!</p>
+
+
         <h2>How to use the /order POST endpoint</h2>
         <p>This endpoint allows you to create a new order. It requires a JSON body with the following fields:</p>
         <ul>
