Clean up landing app && Update wording

consensusnetworks · Mar 20, 2023 · e0b2404 · e0b2404
1 parent ed049b9
commit e0b2404
Show file tree

Hide file tree

Showing 16 changed files with 461 additions and 967 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,82 @@
 <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 gap-[20px]">
+        <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-[1px] bg-primary" />
+        </div>
+        <!-- TD: change link to match app link not landing link -->
+        <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.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/Hexes.vue b/apps/landing/src/components/Hexes.vue
@@ -0,0 +1,157 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+onMounted(() => {
+    var c = document.getElementById( 'c' ),
+    w = c.width = window.innerWidth,
+    h = c.height = window.innerHeight,
+    ctx = c.getContext( '2d' ),
+
+    opts = {
+      
+      len: 20,
+      count: 50,
+      baseTime: 5,
+      addedTime: 0.1,
+      dieChance: .05,
+      spawnChance: 1,
+      sparkChance: .1,
+      sparkDist: 10,
+      sparkSize: 2,
+      
+      color: 'rgba(13, 94, 255, 1)',
+      // color: 'rgba(140, 140, 140, 1)',
+      baseLight: 50,
+      addedLight: 10,
+      shadowToTimePropMult: 6,
+      baseLightInputMultiplier: .01,
+      addedLightInputMultiplier: .02,
+      
+      cx: w / 2,
+      cy: h / 2,
+      repaintAlpha: .04,
+      hueChange: 0
+    },
+    
+    tick = 0,
+    lines = [],
+    dieX = (w / 2 / opts.len) - 2,
+    dieY = (h / 2 / opts.len) - 2,
+    
+    baseRad = Math.PI * 2 / 6
+    
+    function loop() {
+    
+    window.requestAnimationFrame( loop )
+    
+    ++tick
+    
+    ctx.globalCompositeOperation = 'source-over'
+    ctx.fillStyle = 'rgba(0, 0, 0, 0)'
+    ctx.fillRect( 0, 0, w, h )
+    ctx.globalCompositeOperation = 'lighter'
+    
+    if( lines.length < opts.count && Math.random() < opts.spawnChance )
+        lines.push( new Line )
+    
+    lines.map( function( line ){ line.step() } )
+    }
+    function Line(){
+    
+    this.reset()
+    }
+    Line.prototype.reset = function(){
+    
+    this.x = 0
+    this.y = 0
+    this.addedX = 0
+    this.addedY = 0
+    
+    this.rad = 0
+    
+    this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random()
+    
+    this.color = opts.color.replace( 'hue', tick * opts.hueChange )
+    this.cumulativeTime = 0
+    
+    this.beginPhase()
+    }
+    Line.prototype.beginPhase = function(){
+    
+    this.x += this.addedX
+    this.y += this.addedY
+    
+    this.time = 0
+    this.targetTime = ( opts.baseTime + opts.addedTime * Math.random() ) |0
+    
+    this.rad += baseRad * ( Math.random() < .5 ? 1 : -1 )
+    this.addedX = Math.cos( this.rad )
+    this.addedY = Math.sin( this.rad )
+    
+    if( Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY )
+        this.reset()
+    }
+    Line.prototype.step = function(){
+    
+    ++this.time
+    ++this.cumulativeTime
+    
+    if( this.time >= this.targetTime )
+        this.beginPhase()
+    
+    var prop = this.time / this.targetTime,
+        wave = Math.sin( prop * Math.PI / 2  ),
+        x = this.addedX * wave,
+        y = this.addedY * wave
+    ctx.shadowBlur = prop * opts.shadowToTimePropMult
+    ctx.fillStyle = ctx.shadowColor = this.color.replace( 'light', opts.baseLight + opts.addedLight * Math.sin( this.cumulativeTime * this.lightInputMultiplier ) )
+    ctx.fillRect( opts.cx + ( this.x + x ) * opts.len, opts.cy + ( this.y + y ) * opts.len, 2, 2 )
+    
+    if( Math.random() < opts.sparkChance )
+        ctx.fillRect( opts.cx + ( this.x + x ) * opts.len + Math.random() * opts.sparkDist * ( Math.random() < .5 ? 1 : -1 ) - opts.sparkSize / 2, opts.cy + ( this.y + y ) * opts.len + Math.random() * opts.sparkDist * ( Math.random() < .5 ? 1 : -1 ) - opts.sparkSize / 2, opts.sparkSize, opts.sparkSize )
+    }
+    loop()
+
+    window.addEventListener( 'resize', function(){
+    
+    w = c.width = window.innerWidth
+    h = c.height = window.innerHeight
+    ctx.fillStyle = 'rgba(0, 0, 0, 0)'
+    ctx.fillRect( 0, 0, w, h )
+    
+    opts.cx = w / 2
+    opts.cy = h / 2
+    
+    dieX = w / 2 / opts.len
+    dieY = h / 2 / opts.len
+    })
+
+  })
+</script>
+
+<template>
+  <div class="w-full h-full relative">
+    <canvas
+      id="c"
+      class="w-full h-full absolute top-0 left-0 pulse"
+    />
+  </div>
+</template>
+
+
+<style scoped>
+
+.pulse{
+  animation: pulse 1.25s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  from,
+  to {
+    
+    opacity: 1; 
+  }
+  50% {
+    opacity: 0; 
+  }
+}
+</style>