From 7d159bfb4b1ff02c051a91129cb997491d2c72a9 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Tue, 6 Dec 2022 09:56:30 -0500
Subject: [PATCH] Feature tea/cli more prominently (#209)

* Copy change

* Added button

* Button styling

* Button stying, mobile art fix

* Link update
---
 src/layouts/index.html                     |   5 +-
 src/layouts/partials/mobile-art-home.html  |   9 +-
 src/layouts/partials/purple-btn-large.html | 198 +++++++++++++++++++++
 src/static/css/homepage.css                |   8 +-
 4 files changed, 210 insertions(+), 10 deletions(-)
 create mode 100644 src/layouts/partials/purple-btn-large.html

diff --git a/src/layouts/index.html b/src/layouts/index.html
index 0b0e8c5..7d2a5f3 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -8,14 +8,15 @@
   <div class="container hero-container">
     <div class="row">
       <div class="col">
-        <h1 class="impact" style="z-index:3; position: relative;">Keep <span class="white">what</span><br><span class="hero-float" style="float:right;"><span class="white">is</span> yours.</span></h1>
+        <h1 class="impact" style="z-index:3; position: relative;">TEA <span class="white">CLI</span><br><span class="hero-float" style="float:right;"><span class="white">is</span> HERE.</span></h1>
       </div>
     </div>
     <div class="row">
       <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
         <div class="lead-text-container animated-25 animatedFadeInUp fadeInUp black-bg p-4" style="z-index:3; position: relative;">
-          <p class="lead" style="margin-bottom: 0px;">The open-source revolution is here. We’re calling on all devs to build with our powerful, new unified package manager.</p>
+          <p class="lead" style="margin-bottom: 0px;"><a href="https://github.com/teaxyz/cli">Visit GitHub</a> to check out our README, and &#11088; the repository. You can install tea by running the one&#8208;liner in your terminal.</p>
         </div>
+        {{- partial "purple-btn-large.html" -}}
         <img class="mobile-grid-element mt-5" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
       </div>
     </div>
diff --git a/src/layouts/partials/mobile-art-home.html b/src/layouts/partials/mobile-art-home.html
index 3c6d9fc..befc964 100644
--- a/src/layouts/partials/mobile-art-home.html
+++ b/src/layouts/partials/mobile-art-home.html
@@ -5,7 +5,7 @@
     width:57vw;
     height: 19.3vw;
     left: 6.8vw;
-    margin-top:164vw;
+    margin-top:173vw;
     z-index: 1;
     background-image: url("/Images/gen-art/orange-pattern.jpg");
     background-position: center;
@@ -18,7 +18,7 @@
     width:36vw;
     height: 19.3vw;
     right: 6.8vw;
-    margin-top:154vw;
+    margin-top:183vw;
     z-index: 3;
     background-image: url("/Images/gen-art/gen-art-_0010_DALL·E 2022-09-01 10.48.33 - bright blue and green _It’s time we stop robbing Peter to pay Mark and Jeff._.jpg");
     background-position: center;
@@ -32,7 +32,7 @@
     height: 18vw;
     border-radius:200px;
     right: 40vw;
-    margin-top:167vw;
+    margin-top:170vw;
     z-index: 3;
     background-image: url("/Images/gen-art/gen-art-_0002_DALL·E 2022-09-01 09.50.45 - rainbow oil spill on pavement.png.jpg");
     background-position: center;
@@ -46,7 +46,7 @@
     width:36vw;
     height: 12vw;
     right: 50vw;
-    margin-top:180vw;
+    margin-top:190vw;
     z-index: 2;
     background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
     background-position: center;
@@ -100,6 +100,7 @@
 
 </style>
 
+
 <div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-1"></div>
 <div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-home-gen-art-2"></div>
 <div class="gen-art-mobile" id="m-home-gen-art-3"></div>
diff --git a/src/layouts/partials/purple-btn-large.html b/src/layouts/partials/purple-btn-large.html
new file mode 100644
index 0000000..656aee0
--- /dev/null
+++ b/src/layouts/partials/purple-btn-large.html
@@ -0,0 +1,198 @@
+<a href="https://github.com/teaxyz/cli">
+    <button class="purple-btn-large"><i class="icon-enter-arrow"></i>VISIT GITHUB</button>
+</a>
+
+<style>
+
+  /* Detail Button - Large */
+
+  @media only screen and (min-width: 1200px) {
+
+    .purple-btn-large{
+      font-family: "pp-neue-machina", sans-serif;
+      font-size: 16px;
+      background-color: #8000ff;
+      border: none;
+      color: #fff;
+      padding-top: 0.279vw;
+      text-decoration: none;
+      text-transform: uppercase;
+      width: 20.925vw;
+      height: 4.185vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover{
+      background-color: #8000ff;
+      box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
+    }
+
+     /* Icon Styling */
+
+    .purple-btn-large .icon-enter-arrow{
+      display: inline-block;
+      position: relative;
+      margin-right: 0.558vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover .icon-enter-arrow{
+      display: inline-block;
+      transform: rotate(-45deg) !important;
+    }
+
+  }
+
+  @media only screen and (min-width: 992px) and (max-width: 1200px) {
+
+    .purple-btn-large{
+      font-family: "pp-neue-machina", sans-serif;
+      font-size: 16px;
+      background-color: #8000ff;
+      border: none;
+      color: #fff;
+      padding-top: 0.279vw;
+      text-decoration: none;
+      text-transform: uppercase;
+      width: 30vw;
+      height: 5vw;
+      transition: 0.2s ease-in-out;
+      margin-bottom: 1vw;
+    }
+
+    .purple-btn-large:hover{
+      background-color: #8000ff;
+      box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
+    }
+
+     /* Icon Styling */
+
+    .purple-btn-large .icon-enter-arrow{
+      display: inline-block;
+      position: relative;
+      margin-right: 0.558vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover .icon-enter-arrow{
+      display: inline-block;
+      transform: rotate(-45deg) !important;
+    }
+
+  }
+
+  @media only screen and (min-width: 768px) and (max-width: 992px) {
+
+    .purple-btn-large{
+      font-family: "pp-neue-machina", sans-serif;
+      font-size: 14px;
+      background-color: #8000ff;
+      border: none;
+      color: #fff;
+      padding-top: 0.279vw;
+      text-decoration: none;
+      text-transform: uppercase;
+      width: 30vw;
+      height: 5.141vw;
+      margin-bottom: 1vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover{
+      box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
+    }
+
+     /* Icon Styling */
+
+    .purple-btn-large .icon-enter-arrow{
+      display: inline-block;
+      position: relative;
+      margin-right: 0.558vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover .icon-enter-arrow{
+      display: inline-block;
+      transform: rotate(-45deg) !important;
+    }
+
+  }
+
+  @media only screen and (min-width: 576px) and (max-width: 768px) {
+
+    .purple-btn-large{
+      font-family: "pp-neue-machina", sans-serif;
+      font-size: 14px;
+      background-color: #8000ff;
+      border: none;
+      color: #fff;
+      padding-top: 0.279vw;
+      text-decoration: none;
+      text-transform: uppercase;
+      width: 33.85vw;
+      height: 6.77vw;
+      margin-bottom: 2.5vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover{
+      background-color: #8000ff;
+      box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
+    }
+
+     /* Icon Styling */
+
+    .purple-btn-large .icon-enter-arrow{
+      display: inline-block;
+      position: relative;
+      margin-right: 0.558vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover .icon-enter-arrow{
+      display: inline-block;
+      transform: rotate(-45deg) !important;
+    }
+
+  }
+
+  @media only screen and (max-width: 576px) {
+
+    .purple-btn-large{
+      display:inline-block;
+      font-family: "pp-neue-machina", sans-serif;
+      font-size: 3vw;
+      background-color: #8000ff;
+      border: none;
+      color: #fff;
+      padding-top: 0.279vw;
+      text-decoration: none;
+      text-transform: uppercase;
+      width: 100%;
+      height: 14vw;
+      margin-top: 5vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover{
+      background-color: #8000ff;
+      box-shadow: inset 0vw 0vw 0vw 1.25vw #1a1a1a !important;
+    }
+
+     /* Icon Styling */
+
+    .purple-btn-large .icon-enter-arrow{
+      display: inline-block;
+      position: relative;
+      margin-right: 2vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover .icon-enter-arrow{
+      display: inline-block;
+      transform: rotate(-45deg) !important;
+    }
+
+  }
+
+</style>
diff --git a/src/static/css/homepage.css b/src/static/css/homepage.css
index f5b625f..3050b76 100644
--- a/src/static/css/homepage.css
+++ b/src/static/css/homepage.css
@@ -247,7 +247,7 @@ mark{
     align-items: center;
     height: 15vw;
     margin-top: 0.4vw;
-    margin-bottom: 1vw;
+    margin-bottom: 0px;
   }
 
   .package_before{
@@ -303,7 +303,7 @@ mark{
     align-items: center;
     height: 15vw;
     margin-top: 1.1vw;
-    margin-bottom: 1vw;
+    margin-bottom: 0px;
   }
 
   .package_before{
@@ -358,8 +358,8 @@ mark{
     justify-content: center;
     align-items: center;
     height: 20.2vw;
-    margin-top: 1.3vw;
-    margin-bottom: 2.5vw;
+    margin-top: .5vw;
+    margin-bottom: 0;
   }
 
   .metric-block{