Update hero

CaliCastle · Mar 13, 2019 · b062d23 · b062d23
1 parent 07565a9
commit b062d23
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 13 deletions.
diff --git a/src/components/ComingSoon.vue → src/components/Hero.vue b/src/components/ComingSoon.vue → src/components/Hero.vue
@@ -1,16 +1,24 @@
 <template>
   <div
-    class="coming-soon flex flex-col w-full h-screen justify-center items-center pt-16 md:p-0"
+    class="hero relative flex flex-col w-full h-screen justify-center items-center pt-16 md:p-0"
   >
     <div class="masked mt-24 mb-6 text-center" ref="title">
       <h1 data-depth="0.15">Knife 2<br />Meat U</h1>
     </div>
-    <p
-      class="text-grey text-5xl flex justify-center items-center"
+    <div
+      class="subtitle text-grey text-5xl flex justify-center items-center"
       ref="subtitle"
     >
-      <span data-depth="-0.4">Coming Soon</span>
-    </p>
+      <div data-depth="-0.4" :style="{ pointerEvents: 'auto' }">
+        <a
+          class="knifeable text-white no-underline px-8 py-5 bg-red-light outline-none rounded-lg"
+          :href="$root.links.game.itch"
+          target="_blank"
+        >
+          Free 2 Download
+        </a>
+      </div>
+    </div>
     <div class="crab my-6" ref="crab">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -38,7 +46,7 @@
 import Parallax from 'parallax-js'
 
 export default {
-  name: 'coming-soon',
+  name: 'hero',
   mounted() {
     new Parallax(this.$refs.title)
     new Parallax(this.$refs.subtitle)
@@ -48,7 +56,9 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
-.coming-soon {
+.hero {
+  z-index 12000
+
   .masked {
     animation grandOpening 0.78s cubic-bezier(0.57, 0, 0.22, 1.3) both
 
@@ -71,7 +81,7 @@ export default {
     }
   }
 
-  p {
+  .subtitle {
     animation grandOpening 0.35s 0.75s cubic-bezier(0.57, 0, 0.22, 1.3) both
   }
 

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -66,7 +66,7 @@
           </span>
           <a
             class="knifeable m-4 has-title"
-            href="https://itch.io/profile/vvspaceship"
+            :href="$root.links.game.itch"
             target="_blank"
             name="itch.io"
           >

diff --git a/src/main.js b/src/main.js
@@ -7,5 +7,14 @@ Vue.config.productionTip = false
 
 new Vue({
   router,
+  data() {
+    return {
+      links: {
+        game: {
+          itch: 'https://vvspaceship.itch.io/knife-2-meat-u'
+        }
+      }
+    }
+  },
   render: h => h(App)
 }).$mount('#app')
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="k2mu min-h-screen">
-    <ComingSoon v-if="!ready" />
-    <main v-else></main>
+    <Hero />
+    <main></main>
     <KnifeCursor />
     <Particles />
   </div>
 </template>
 
 <script>
-import ComingSoon from '../components/ComingSoon'
+import Hero from '../components/Hero'
 import KnifeCursor from '../components/KnifeCursor'
 import Particles from '../components/Particles'
 
 export default {
   name: 'home',
-  components: { Particles, ComingSoon, KnifeCursor },
+  components: { Particles, Hero, KnifeCursor },
   data() {
     return {
       ready: false