Merge pull request #36 from NaturalSelectionLabs/ui

feat: index page logo and bg updates

Author: Candinya

src/assets/images/pass3.gif

@@ -1,7 +1,7 @@
 <template>
-    <div class="onboarding h-full text-center bg-cover bg-fixed flex items-center justify-center">
-        <div class="body px-4 h-2/3 flex flex-col justify-between">
-            <h1 class="text-8xl text-primary font-bold">Hello</h1>
+    <div class="onboarding h-full text-center bg-cover bg-fixed flex items-center justify-center bg-pass3gradient">
+        <div class="body px-4 h-2/3 flex flex-col justify-center items-center gap-56">
+            <div class="logo-container w-50 h-50 bg-pass3logo bg-center bg-contain bg-no-repeat"></div>
             <div class="leading-17.5 text-white w-83.5 text-2xl mx-auto">
                 <Button
                     size="lg"
@@ -161,8 +161,8 @@ export default class Index extends Vue {
 
 <style lang="postcss" scoped>
 @layer components {
-    .onboarding {
-        background-image: url('../assets/images/rss3-bg.png');
+    .logo-container {
+        mix-blend-mode: multiply;
     }
 }
 </style>

src/assets/images/pass3logo.svg

@@ -91,14 +91,22 @@ module.exports = {
             },
             width: {
                 27: '6.75rem', //108px, scan tag width
-                45: '11.25rem', //180px, discard & save button width
+                45: '11.25rem', //180px, discard & save button width,
+                50: '12.5rem', //200px
+            },
+            height: {
+                50: '12.5rem', //200px
             },
             backgroundImage: (theme) => ({
                 BSC: "url('@/assets/images/chains/BSC.png')",
                 Ethereum: "url('@/assets/images/chains/Ethereum.png')",
                 Ronin: "url('@/assets/images/chains/Ronin.png')",
                 Etherscan: "url('@/assets/images/scans/Etherscan.png')",
                 Roninscan: "url('@/assets/images/scans/Roninscan.png')",
+                pass3gif: 'url(@/assets/images/pass3.gif)',
+                pass3logo: 'url(@/assets/images/pass3logo.svg)',
+                pass3gradient:
+                    'linear-gradient(172.52deg, #0072FF -40.83%, #96C5FF -3.21%, #DDECFF 28.66%, #FFFFFF 44.01%);',
             }),
             backgroundSize: {
                 85: '85%',