Merge pull request #290 from consensusnetworks/nav-concept

New Landing Page
consensusnetworks · Mar 20, 2023 · 982b827 · 982b827
2 parents 5366795 + 9a772eb
commit 982b827
Show file tree

Hide file tree

Showing 17 changed files with 276 additions and 1,113 deletions.
diff --git a/apps/landing/index.html b/apps/landing/index.html
@@ -14,9 +14,7 @@
     <title>Casimir</title>
   </head>
   <body>
-    <div style="background: #00091A; min-width: 360px; overflow: auto;">
-      <div id="app"></div>
-    </div>
+    <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/apps/landing/public/ETHLogo.svg b/apps/landing/public/ETHLogo.svg
diff --git a/apps/landing/public/ETHTest.svg b/apps/landing/public/ETHTest.svg
diff --git a/apps/landing/public/casimir_black.svg b/apps/landing/public/casimir_black.svg
diff --git a/apps/landing/src/App.vue b/apps/landing/src/App.vue
@@ -1,15 +1,81 @@
 <script lang="ts" setup>
-import NavBar from '@/components/nav/NavBar.vue'
-
+import Scrambler from '@/components/Scrambler.vue'
 
 </script>
+
 <template>
-  <div class="h-screen min-w-[360px] overflow-auto">
-    <div class="h-navbar">
-      <NavBar />
-    </div>
-    <div class="overflow-auto">
-      <router-view />
+  <div class="border h-screen w-full flex flex-col gap-[20px] justify-center items-center bg-[#D0D6E1]">
+    <div>
+      <div class="flex justify-center items-center">
+        <img
+          src="/ETHLogo.svg"
+          alt=""
+          class="h-[200px]"
+        >
+        <div>
+          <div class=" flex gap-[10px]">
+            <img
+              src="/casimir.svg"
+              alt=""
+              class="h-[20px]"
+            >
+            <Scrambler 
+              :phrases="['Non-Custodial']"
+              :repeat="false"
+              :delay="0"
+              :text-class="'font-semibold text-[16px] text-[#343434] leading-[24px] tracking-normal'"
+              :transform-timer="5"
+            />
+          </div>
+
+          <Scrambler 
+            :phrases="['Ethereum Staking']"
+            :repeat="false"
+            :delay="200"
+            :text-class="'font-medium text-[76px] text-[#3a3a3a] leading-[120px] tracking-wider'"
+            :transform-timer="15"
+          />
+        </div>
+      </div>
+      <div class="flex flex-col justify-center items-end gap-[25px]">
+        <div class="flex gap-[3px]">
+          <Scrambler 
+            :phrases="['No minimum amount.', 'Maximum staking rewards.']"
+            :repeat="true"
+            :delay="300"
+            :text-class="'font-semibold text-[20px] text-[#3a3a3a] leading-[30px] tracking-normal'"
+            :transform-timer="10"
+          /> 
+          <span class="pulse w-[2px] rounded bg-primary" />
+        </div>
+        <!-- <a
+          class=" rounded-[4px] flex justify-center items-center gap-[10px]
+        bg-primary text-white px-[25px] py-[7px] font-bold hover:bg-blue_4
+        hover:text-black"
+          href="https://www.app.casimir.co/"
+        >
+          <i
+            class="iconoir-drone-take-off"
+          /> Launch App
+        </a> -->
+      </div>
     </div>
   </div>
 </template>
+
+
+<style scoped>
+.pulse{
+  animation: pulse 1.25s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  from,
+  to {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+</style>
diff --git a/apps/landing/src/components/Scrambler.vue b/apps/landing/src/components/Scrambler.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { remove } from '@vue/shared'
+import { ref, onMounted } from 'vue'
+
+// eslint-disable-next-line no-undef
+const props = defineProps({
+    phrases: {
+        type: Array,
+        required: true,
+    },
+    repeat: {
+        type: Boolean,
+        required: true
+    },
+    delay: {
+        type: Number,
+        default: 3000
+    },
+    textClass: {
+        type: String,
+        required: true
+    },
+    transformTimer: {
+        type: Number, 
+        default: 0
+    }
+})
+
+const text = ref('')
+onMounted(() => {
+    // const phrases = [
+    // 'Stake any amount.',
+    // 'Across any wallet.',
+    // 'The first non-custodial platform.',
+    // ]
+    let chars = '!<>-_\\/[]{}—=+*^?#________'
+    let counter = 0
+    const next = ()=> {
+        
+        // let newText = (Math.floor(Math.random() * (3300 - 100) + 100) / 100).toString()
+        let newText = props.phrases[counter] as string 
+        let oldText = text.value
+
+        const randomChar = () => {
+            return chars[Math.floor(Math.random() * chars.length)]
+        }
+
+        let from = oldText.split('')
+        let to = newText.split('')
+        if(from.length >= to.length){
+            const replace = () => {
+                let textValue = text.value.split('')
+                let toValue = newText.split('')
+                if(text.value != newText){
+                    let index = Math.floor(Math.random() * toValue.length)
+                    textValue[index] = toValue[index]
+                    text.value = textValue.join('')
+                    textValue.splice(index, 1)
+                    toValue.splice(index, 1)
+                    setTimeout(() => {
+                        replace()
+                    }, props.transformTimer)
+                }else{
+                    if(props.repeat){
+                        setTimeout(() => {
+                            next()
+                        }, 3000)    
+                    }
+                }
+            }
+            // remove random chars until lengths match
+            const remove = () => {
+                if(text.value.length > to.length){
+                    const index = Math.floor(Math.random() * text.value.length)
+                    let newValue = text.value.split('')
+                    newValue.splice(index, 1)
+                    text.value = newValue.join('')
+                    setTimeout(() => {
+                        remove()
+                    },  props.transformTimer)
+                } else {
+                    replace()
+                }
+            }
+            // update text.value to random chars
+            const update = () =>{
+                let possibleIndexes = []
+                for (let i = 0; i < text.value.length; i++) {
+                    if(oldText.includes(text.value.split('')[i])){
+                        possibleIndexes.push(i)
+                    }
+                }
+                const checkIfTextIncludes = () => {
+                    for (let i = 0; i < text.value.length; i++) {
+                        if(oldText.includes(text.value.split('')[i])) return true
+                    }
+                    return false
+                }
+                if(checkIfTextIncludes()){
+                    let char = randomChar()
+                    let index = Math.floor(Math.random() * possibleIndexes.length)
+                    from[possibleIndexes[index]] = char
+                    possibleIndexes.splice(index, 1)
+                    text.value = from.join('')
+                    setTimeout(() => {
+                        update()
+                    },  props.transformTimer)
+                } else {
+                    remove()
+                }
+            }
+
+            update()
+            // replace random chars until texts match
+        } else {
+            const replace = () => {
+                let textValue = text.value.split('')
+                let toValue = newText.split('')
+                if(text.value != newText){
+                    let index = Math.floor(Math.random() * toValue.length)
+                    textValue[index] = toValue[index]
+                    text.value = textValue.join('')
+                    textValue.splice(index, 1)
+                    toValue.splice(index, 1)
+                    setTimeout(() => {
+                        replace()
+                    },  props.transformTimer)
+                }else{
+                    if(props.repeat){
+                        setTimeout(() => {
+                            next()
+                        }, 3000)    
+                    }
+                }
+            }
+            const update = () => {
+                if(from.length < to.length){
+                    let char = randomChar()
+                    let index = Math.floor(Math.random() * from.length)
+                    from.splice(index ,0, char)
+                    text.value = from.join('')
+                    setTimeout(() => {
+                        update()
+                    },  props.transformTimer)
+                } else {
+                    replace()
+                }
+            }
+            update()
+
+            
+        }
+        counter = (counter + 1) % props.phrases.length
+    }
+    
+    setTimeout(()=>{
+        next()
+    }, props.delay)
+    
+    
+})
+</script>
+
+<template>
+  <div>
+    <span :class="props.textClass">
+      {{ text }}
+    </span>
+  </div>
+</template>
+
+<style>
+</style>
+
+
diff --git a/apps/landing/src/components/nav/NavBar.vue b/apps/landing/src/components/nav/NavBar.vue