Feature/rebrand 0108 (#73)

* add font lt saeada

* update barlow to lexend

* replace meta icon

* update og images

* fix christmas image

* update cover images

* bitcoin pizza image updates

* updating colors and styles

webapp/index.html

@@ -33,7 +33,9 @@
     <!-- load font -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lexend:[email protected]&display=swap" rel="stylesheet">
 
     <!-- load jquery -->
     <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

webapp/public/fonts/OFL.txt

@@ -0,0 +1,94 @@
+Copyright (c) 2024, LyonsType (lyonstype4.wixsite.com/lyonstype-beta),
+with Reserved Font Name LT Saeada.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

webapp/src/App.vue

@@ -148,25 +148,25 @@ createWeb3Modal({
 
 
 <template>  
-    <div class="global-wrap">
-      <div class="flex-wrap">
-        <NavBar />
-        <RouterView />
-      </div>
-    </div>
+  <NavBar />
+  <RouterView />
 </template>
 
 <style lang="scss">
 
 .verse-wide {
+  @font-face {
+    font-family: "Saeada";
+    src: local("Saeada", url("/fonts/LtSaeada-Black.otf"));
+  }
   &.home {
-    background: linear-gradient(rgb(49, 201, 244) 0%, rgb(44, 150, 246) 100%);
+    background: linear-gradient(90deg, #2569fa 0%, #9333ea 100%);
   }
   &:hover {
-    background: linear-gradient(rgb(49, 201, 244) 0%, rgb(44, 150, 246) 100%);
+    background: linear-gradient(90deg, #2569fa 0%, #9333ea 100%);
   }
   &:active {
-    background:linear-gradient(rgb(1, 137, 254) 0%, rgb(44, 150, 246) 100%)
+    background: linear-gradient(90deg, #2569fa 0%, #9333ea 100%);
   }
   
   &.fixBottomMobile {
@@ -197,20 +197,21 @@ createWeb3Modal({
     }
   }
   &.secondary {
-    background: linear-gradient(180deg, #425472 0%, #313E57 100%);
+    background: #202B58;
+
   }
   cursor: pointer;
   margin-top: 24px;
-  background: linear-gradient(180deg, #0EBEF0 0%, #0085FF 100%);
+  background: linear-gradient(90deg, #2569fa 0%, #9333ea 100%);
   height: 48px;
   border: none;
   width: 100%;
   border-radius: 100px;
   color: white;
-  font-weight: 600;
+  font-weight: 800;
   font-size: 17px;
   line-height: 21.6px;
-  font-family: 'Barlow', sans-serif;
+  font-family: Saeada, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
   &.disabled {
     color: #313E57;
@@ -222,14 +223,14 @@ createWeb3Modal({
 .global-wrap {
   background-image: v-bind('activeProduct.backgroundImage')!important;
   background-size: cover;
-  position: relative;
+  /* position: relative; */
+  /* min-height: 800px; */
   
   @media(max-width: 880px) {
     background-image: none!important;
   }
 }
 
-
 .flex-wrap {
   @media(min-width: 768px) {
     width: 100%;
@@ -238,7 +239,9 @@ createWeb3Modal({
     max-width: 80rem;
     margin: 0px auto;
     gap: 1rem;
-    grid-template-columns: min-content max-content auto;
+    /* display: grid; */
+    /* grid-template-columns: min-content max-content auto; */
+    height: fit-content;
   }
 }
 i.close-btn {
@@ -269,12 +272,12 @@ i.close-btn {
     margin-top: 0;
     color: #C5CEDB!important;
     margin-bottom: 0;
-    font-weight: 600px;
+    font-weight: 800px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   }
   .balance {
     margin-top: 2px;
-    font-weight: 600;
+    font-weight: 800;
     margin-bottom: 0;
     font-size: 24px;
   }
@@ -365,7 +368,7 @@ i.close-btn {
           width: 100%;
           td.key {
             width: 50%;
-            font-weight: 600;
+            font-weight: 800;
             text-align: left;
           }
           td.value {
@@ -383,7 +386,7 @@ i.close-btn {
         .loadingText {
           color: #FFFFFF;
           font-size: 18px;
-          font-weight: 600;
+          font-weight: 800;
         }
         position: relative;
         @media(max-width: 880px) {
@@ -474,7 +477,7 @@ i.close-btn {
             text-align: left;
             color: #C5CEDB;
             line-height: 14.32px;
-            font-weight: 600;
+            font-weight: 800;
             margin: 0;
             font-size: 12px;
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -636,9 +639,9 @@ i.close-btn {
               border: 1px solid #0F1823;
               outline: none;
               color: white;
-              font-family: Barlow;
+              font-family: Saeada, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
               font-size: 13px;
-              font-weight: 600;
+              font-weight: 800;
               text-align: center;
               z-index: 5;
               position: relative;
@@ -670,7 +673,7 @@ i.close-btn {
           h3.title {
             color: white;
             font-size: 16px;
-            font-weight: 600;
+            font-weight: 800;
             position: absolute;
             left: 18px;
           }
@@ -722,23 +725,23 @@ i.close-btn {
 
 h3 {
   font-size: 24px;
-  font-weight: 600;
+  font-weight: 800;
 }
 
 body {
   position: unset;
   width: 100%;
-  min-height: calc(100vh - 200px);
+  /* min-height: calc(100vh - 200px); */
   padding: 0;
   background-size: 100%;
   margin: 0;
   overflow: auto;
-  font-family: 'Barlow', sans-serif;
-  background: rgba(3, 12, 20, 1);
+  font-family: Saeada, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  background: #0A0A2C;
   background-repeat: no-repeat!important;
   background-size: cover;
   @media(max-width: 880px) {
-    background: rgba(3, 12, 20, 1);
+    background: #0A0A2C;
     background-image: none!important;
     min-height: unset;
   }

webapp/src/components/Footer.vue

@@ -52,8 +52,12 @@ export default {
     flex-direction: column;
     flex: 0 1 0%;
     z-index: 1;
-    color: rgb(255, 255, 255);
-    background: black;
+    background: #0A0A2C;
+    border-top: 1px solid #141F4C;
+    @media(min-width: 880px) {
+        height: 64px;
+    }
+
 
     .footer-content {
         display: flex;
@@ -76,18 +80,23 @@ export default {
                 flex-wrap: wrap;
                 align-items: center;
                 gap: 1rem;
+
                 .short-link {
                     text-decoration: none;
                     font-size: 0.75rem;
                     font-weight: 400;
-                    color: rgb(197, 206, 219);
+                    color: #8B92AA;
+                    @media(max-width:880px) {
+                        width: 9.719rem;
+                    }
                 }
             }
         }
         .company {
             font-size: 0.75rem;
             font-weight: 400;
-            color: rgb(88, 111, 145);
+            color:#434C74;
+            ;
         }
     }