Addition of 3 columns + styling

src/layouts/page/landing-page-1.html

@@ -46,7 +46,7 @@
     <div class="row">
       <div class="col" style="z-index:100;">
         <h1 class="prompt yellow">KEEP <br>WHAT IS <br>YOURS.</h1>
-        <a id="prompt-btn" class="btn btn-primary charcoal auth-btn mb-3 prompt_btn" href="https://github.com/apps/tea-xyz/installations/new" role="button">Authenticate with GitHub<span class="badge rounded-pill bg-primary auth-btn ms-3"><span id="count2" class="charcoal"></span></span></a>
+        <a id="prompt-btn" class="btn btn-primary charcoal mb-3 prompt_btn" href="https://github.com/apps/tea-xyz/installations/new" role="button">Authenticate with GitHub<span class="badge rounded-pill bg-primary auth-btn ms-3"><span id="count2" class="charcoal"></span></span></a>
         <p style="color:#b3c8c8;" class="mt-5 mb-5 lead">Equitable Open-Source for web3</p>
       </div>
     </div>
@@ -57,6 +57,124 @@
         <p class="small boiler">Limited numbers of tea beta invites will be given to the first devs who authenticate their Github account. So don’t delay, get it while it’s hot.</p>
       </div>
     </div>
+
+<!-- Start three column value props -->
+
+<style>
+
+   .syne,
+   .syne-sub{
+     font-family: 'Syne', sans-serif !important;
+   }
+
+   .syne-sub{
+     font-size: 1.5em;
+   }
+
+   .syne-body{
+     font-size: 1.3em;
+   }
+
+   .syne-small{
+     color:#F5F5F5;
+     opacity: 55%;
+   }
+
+   .syne-col{
+     z-index:100;
+   }
+
+   .syne-hr{
+     border-top: 1px solid white;
+     opacity: 100;
+   }
+
+@media only screen and (min-width: 600px) {
+   .syne-btn{
+     border: 2px solid #DDFC76;
+     font-size: 20px;
+     width: 400px;
+     color: #DDFC76;
+     background: transparent !important;
+     display: block;
+     margin-left:auto;
+     margin-right:auto;
+   }
+
+   .syne-btn:hover{
+     border: 2px solid #DDFC76;
+     background: #DDFC76 !important;
+     color:black;
+   }
+
+   .syne-boiler{
+     width: 50%;
+     display: block;
+     margin-left:auto;
+     margin-right:auto;
+   }
+}
+
+@media only screen and (max-width: 600px) {
+   .syne-btn{
+     border: 2px solid #DDFC76;
+     font-size: 20px;
+     color: #DDFC76;
+     background: transparent !important;
+     display: block;
+     margin-left:auto;
+     margin-right:auto;
+   }
+
+   .syne-btn:hover{
+     border: 2px solid #DDFC76;
+     background: #DDFC76 !important;
+     color:black;
+   }
+
+   .syne-boiler{
+     width: 100%;
+     display: block;
+     margin-left:auto;
+     margin-right:auto;
+   }
+}
+
+   .syne-badge {
+     background-color: #DDFC76 !important;
+     color: black;
+   }
+
+ </style>
+
+    <div class="row">
+
+     <div class="col-lg-4 col-md-4 col-sm-12 col-12 syne-col pt-5 pb-3" style="display:flex; flex-direction:column;">
+       <hr class="syne-hr">
+       <p class="syne-small">The revolution is here.</p>
+       <p class="syne-sub mb-4">We’re calling on all open‐source devs to authenticate their Github with tea.</p>
+       <a class="btn btn-primary mb-sm-0 mb-md-5 mb-0" id="whitepaper-btn" href="/white-paper/"
+         role="button" style="background:transparent;">Read Our White Paper</a>
+       <hr class="syne-hr d-none d-lg-block" style="margin-top:auto;">
+     </div>
+
+     <div class="col-lg-4 col-md-4 col-sm-12 col-12 syne-col pt-5 pb-3" style="display:flex; flex-direction:column;">
+       <hr class="syne-hr">
+       <p class="syne-small">Become an early adopter.</p>
+       <p class="syne-sub">Join early to be entitled to a variety of rewards.</p>
+       <hr class="syne-hr d-none d-lg-block" style="margin-top:auto;">
+     </div>
+
+     <div class="col-lg-4 col-md-4 col-sm-12 col-12 syne-col pt-5 pb-3">
+       <hr class="syne-hr">
+       <p class="syne-small">Join the Community.</p>
+       <p class="syne-sub mb-4">Join our discord, where you can talk to our team on the regular and ask anything.</p>
+       <a class="btn btn-primary mb-sm-0 mb-md-5 mb-0" id="whitepaper-btn" href="https://discord.gg/KCZsXfJphn"
+         role="button" style="background:transparent;">Join our Discord</a>
+       <hr class="syne-hr d-none d-lg-block">
+     </div>
+
+   </div>
   </div>
 
   <!-- Mission Statement -->

src/layouts/partials/head.html

@@ -34,6 +34,7 @@
       integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <link rel="apple-touch-icon-precomposed" href="/favicon-180.png">
     <link rel="stylesheet" href="/css/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap" rel="stylesheet">
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>