init makeup

assets/images/icons/check.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.292889 4.53553C-0.0976512 4.92607 -0.097608 5.55925 0.292889 5.94974L4.53553 10.1924C4.92603 10.5829 5.5592 10.5829 5.94974 10.1924L14.435 1.7071C14.8256 1.31656 14.8255 0.683386 14.435 0.292889C14.0445 -0.097608 13.4114 -0.0976512 13.0208 0.292889L5.24264 8.07106L1.7071 4.53553C1.31661 4.14503 0.683429 4.14499 0.292889 4.53553Z" fill="#44F1A6"/>
+</svg>

assets/images/icons/tool.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M17.58,3.75a2.39,2.39,0,0,0-1.75-1.47l-.09,0s0-.06,0-.09A2.4,2.4,0,0,0,14.25.42,6,6,0,0,0,12.05,0a5.93,5.93,0,0,0-5.8,4.68,5.56,5.56,0,0,0-.12,1.63l-5,5a3.94,3.94,0,0,0,5.57,5.57l5-5a6.34,6.34,0,0,0,1.63-.13,5.94,5.94,0,0,0,4.26-8Zm-2.74,5A3.85,3.85,0,0,1,12.9,9.8,4.06,4.06,0,0,1,11,9.74L5.3,15.43a1.92,1.92,0,0,1-2.73,0,1.92,1.92,0,0,1,0-2.73L8.26,7A4.06,4.06,0,0,1,8.2,5.1,3.85,3.85,0,0,1,9.27,3.16a3.93,3.93,0,0,1,4.24-.88.38.38,0,0,1,.25.3.41.41,0,0,1-.11.38L11.52,5.09l.25,1.14,1.14.25L15,4.35a.41.41,0,0,1,.38-.11.38.38,0,0,1,.3.25A3.93,3.93,0,0,1,14.84,8.73Z"/></svg>

assets/images/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.9 39.9"><path d="M40,19.4A17.3,17.3,0,0,0,22.8,2.8,17.1,17.1,0,0,0,8.6,10.4,11.3,11.3,0,0,1,19.3,0,17.1,17.1,0,0,0,2.8,17.1a16.8,16.8,0,0,0,7.7,14.2A11.3,11.3,0,0,1,0,20.6a17.1,17.1,0,0,0,31.3,9A11.4,11.4,0,0,1,20.6,39.9,17.1,17.1,0,0,0,37.1,22.8,17.3,17.3,0,0,0,29.5,8.6,11.8,11.8,0,0,1,40,19.4ZM20,27.2a7.4,7.4,0,0,1-5.2-2.1,7.1,7.1,0,0,1-2-5.1A7.2,7.2,0,1,1,20,27.2Z" fill="#44F1A6"/></svg>

assets/styles/app.scss

@@ -0,0 +1,43 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  @media print {
+    background: none;
+  }
+
+  > .main-content {
+    flex: 1;
+  }
+}
+
+@import 'components/font';
+@import 'components/base';
+@import 'components/button';
+@import 'components/icons';
+@import 'components/step';
+@import 'components/header';
+
+html {
+  background: linear-gradient(180deg, #181818 0%, #000000 100%);
+  background-attachment: fixed;
+}
+
+.title {
+  span {
+    color: $primary;
+  }
+
+  &.is-14px {
+    font-size: 0.875rem;
+  }
+}
+
+.tornado-discoverer {
+  margin-top: -3.5rem;
+  background-image: url('../images/discoverer.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+

assets/styles/components/_base.scss

@@ -0,0 +1,43 @@
+$primary: #44F1A6;
+$primary-invert: #000000;
+
+$size-normal: 0.875rem;
+
+@import '~bulma/sass/utilities/_all';
+
+$widescreen-enabled: false;
+$fullhd-enabled: false;
+
+$body-family: 'PT Mono', monospace;
+$body-background-color: $primary-invert;
+$body-color: $white;
+$body-min-width: 320px;
+
+$title-size: 2.25rem;
+$title-color: $white;
+$title-weight: 600;
+$title-line-height: 2.5rem;
+
+$subtitle-color: $white;
+$subtitle-size: 0.813rem;
+$subtitle-line-height: 1.5;
+$subtitle-negative-margin: -1rem;
+
+$link: $primary;
+$link-hover: darken($primary, 15%);
+
+$navbar-background-color: transparent;
+$navbar-item-color: $white;
+$navbar-item-hover-color: $primary;
+$navbar-item-hover-background-color: transparent;
+$navbar-item-active-color: $primary;
+$navbar-breakpoint: $tablet;
+
+@import '~bulma/sass/base/_all';
+@import '~bulma/sass/helpers/_all';
+@import '~bulma/sass/elements/_all';
+@import '~bulma/sass/components/_all';
+@import '~bulma/sass/form/_all';
+@import '~bulma/sass/grid/_all';
+@import '~bulma/sass/layout/_all';
+@import '~buefy/src/scss/buefy';

assets/styles/components/_button.scss

@@ -0,0 +1,43 @@
+.button {
+  font-weight: 700;
+
+  &.is-primary {
+    &.is-outlined {
+      background-color: #182922;
+    }
+
+    .trnd {
+      background-color: $primary;
+    }
+
+    &:hover, &:focus {
+      .trnd {
+        background-color: $primary-invert;
+      }
+    }
+
+    &[disabled] {
+      .trnd {
+        background-color: $primary;
+      }
+    }
+  }
+
+  .icon {
+    &:first-child:not(:last-child) {
+      margin-left: -0.25em;
+      margin-right: 0.5em; }
+    &:last-child:not(:first-child) {
+      margin-left: 0.5em;
+      margin-right: -0.25em; }
+    &:first-child:last-child {
+      margin-left: 0;
+      margin-right: 0; }
+  }
+
+  &:not(.is-small) {
+    span:not(.icon):not(.b-tooltip):first-child:last-child {
+      padding: 0 .5rem;
+    }
+  }
+}

assets/styles/components/_font.scss

@@ -0,0 +1,14 @@
+@font-face {
+  font-family: 'PT Mono';
+  src: local('PT Mono'), local('PTMono-Regular'), url('../fonts/PTMono-Regular.woff2') format('woff2');
+  font-display: swap;
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'PT Mono';
+  src: local('PT Mono Bold'), local('PTMono-Bold'), url('../fonts/PTMono-Bold.woff2') format('woff2');
+  font-display: swap;
+  font-weight: 700;
+  font-style: normal;
+}

assets/styles/components/_header.scss

@@ -0,0 +1,26 @@
+.header {
+  padding-top: 20px;
+  padding-left: .75rem;
+  padding-right: .75rem;
+
+  @include tablet {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  @include desktop {
+    > .container {
+      .navbar-brand {
+        margin-left: 0;
+
+        .navbar-item {
+          padding-left: 0;
+        }
+      }
+    }
+  }
+
+  .logo {
+    height: 40px;
+  }
+}

assets/styles/components/_icons.scss

@@ -0,0 +1,21 @@
+.trnd {
+  height: 1rem;
+  width: 1rem;
+  background-color: $primary;
+  mask-position: center;
+  mask-size: contain;
+  mask-repeat: no-repeat;
+
+  .trnd-48px {
+    height: 2rem;
+    width: 2rem;
+  }
+
+  &-tool {
+    mask-image: url('../images/icons/tool.svg');
+  }
+
+  &-check {
+    mask-image: url('../images/icons/check.svg');
+  }
+}

assets/styles/components/_step.scss

@@ -0,0 +1,50 @@
+.step {
+  margin: 1.25rem 0;
+  background: #1F1F1F;
+  border-radius: 6px;
+  padding: 1.25rem;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+
+  .diamond {
+    margin-right: 1.25rem;
+  }
+
+  &-body {
+    flex-grow: 1;
+
+    h4 {
+      font-weight: 700;
+    }
+
+    .deployed {
+      font-size: 0.813rem;
+      color: #6B6B6B;
+      margin-top: .25rem;
+    }
+  }
+
+  &-tail {
+    background-color: #191919;
+    align-self: stretch;
+    margin: -1.25rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1.25rem;
+    width: 148px;
+
+    .completed {
+      display: flex;
+      align-items: center;
+      font-size: $size-normal;
+      color: $primary;
+      font-weight: 700;
+
+      .icon {
+        margin-right: 0.5em;
+      }
+    }
+  }
+}

components/Diamond.vue

@@ -0,0 +1,46 @@
+<template>
+  <svg
+    width="60"
+    height="60"
+    viewBox="0 0 60 60"
+    fill="none"
+    class="diamond"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="30"
+      cy="30"
+      r="29.5"
+      fill="#111111"
+      :stroke="active ? '#44F1A6' : '#3F3F3F'"
+    />
+    <circle
+      cx="30"
+      cy="30"
+      r="23.5"
+      fill="#191919"
+      :stroke="active ? '#44F1A6' : '#3F3F3F'"
+    />
+    <path
+      d="M34.5801 15.893C34.6485 16.9078 34.4722 17.4907 34.1736 17.886C33.8637 18.2962 33.3621 18.5882 32.5885 18.8921C32.2511 19.0247 31.8702 19.1558 31.4515 19.3C29.9916 19.8026 28.0728 20.4631 25.94 21.8938C23.8639 23.2864 22.4643 25.0309 21.3363 26.4369C20.9682 26.8958 20.6291 27.3186 20.3047 27.6813C19.6245 28.4421 19.0358 28.9193 18.3942 29.0845C17.777 29.2435 17.0037 29.1381 15.8951 28.4718C13.8305 27.2309 13.4688 24.7439 14.399 21.9281C15.3227 19.1318 17.4754 16.2282 20.0662 14.4904C22.6546 12.7541 26.2741 11.849 29.2741 12.0493C30.7723 12.1494 32.0721 12.5223 33.0055 13.1619C33.9217 13.7898 34.4985 14.6808 34.5801 15.893Z"
+      :fill="active ? '#3AC589' : '#2B2B2B'"
+      :stroke="active ? '#44F1A6' : '#3F3F3F'"
+    />
+    <path
+      d="M44.5653 38.8122C44.7443 38.8672 44.8454 38.9473 44.907 39.0292C44.9708 39.1138 45.019 39.2361 45.0317 39.415C45.0583 39.7898 44.922 40.3278 44.6007 40.9715C43.9648 42.2456 42.7203 43.7047 41.3387 44.6648C39.946 45.6324 38.2245 46.3213 36.8574 46.4887C36.1691 46.573 35.6284 46.5179 35.2712 46.3555C34.951 46.21 34.7622 45.9763 34.7271 45.575C34.6742 44.9706 34.7575 44.6626 34.8723 44.4788C34.987 44.2951 35.1852 44.15 35.5682 43.9855C35.7449 43.9096 35.9558 43.8332 36.195 43.7466C36.9544 43.4715 37.999 43.0931 39.141 42.2995C40.2209 41.5492 40.9829 40.7142 41.5823 40.0575C41.809 39.8091 42.0124 39.5862 42.2009 39.403C42.5596 39.0546 42.8671 38.8363 43.2057 38.7332C43.5362 38.6326 43.9552 38.6245 44.5653 38.8122Z"
+      :fill="active ? '#3AC589' : '#2B2B2B'"
+      :stroke="active ? '#44F1A6' : '#3F3F3F'"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    active: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>

components/Logo.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="logo" viewBox="0 0 155 40">
+    <path
+      fill="#44F1A6"
+      fill-rule="evenodd"
+      d="M29.4,8.6A11.5,11.5,0,0,1,39.9,19.4,17.1,17.1,0,0,0,8.5,10.5,11.5,11.5,0,0,1,19.3,0a17.2,17.2,0,0,0-8.9,31.4A11.5,11.5,0,0,1,0,20.6a17.1,17.1,0,0,0,31.3,9.1A11.4,11.4,0,0,1,20.6,40,17.1,17.1,0,0,0,29.4,8.6ZM19.9,27.2a6.9,6.9,0,0,1-5-2.1,7.1,7.1,0,1,1,5,2.1Zm36.6-9.7v7.4c0,1.3.5,1.6,1.8,1.6a4.8,4.8,0,0,0,1.8-.3v2.9a6.4,6.4,0,0,1-2.4.5c-3,0-4.8-1.9-4.8-5V17.5H50.4V14.4h2.5V9.9h3.6v4.5h3.6v3.1ZM77,21.9c0,5-2.5,7.7-7,7.7s-7.1-2.7-7.1-7.7,2.5-7.7,7.1-7.7S77,16.9,77,21.9Zm-3.6,0c0-4-1.3-4.8-3.4-4.8s-3.5.8-3.5,4.8,1.3,4.7,3.5,4.7S73.4,25.8,73.4,21.9ZM88,14.1v3.2a11.5,11.5,0,0,0-3.8.5V29.4H80.6V15.7A20.4,20.4,0,0,1,88,14.1Zm16.9,6.3v9h-3.6V20.1c0-1.4-.2-2.8-3.5-2.8a12,12,0,0,0-2.8.3V29.4H91.4V15.8a15,15,0,0,1,6.9-1.7C102.4,14.1,104.9,16.5,104.9,20.4Zm16.2.1v4.1c0,2.4-1.6,5-6.3,5s-6.4-2.6-6.4-5.1.5-4.7,6.5-4.7a11,11,0,0,1,2.6.2c0-1.7-.8-2.9-3.2-2.9a11.2,11.2,0,0,0-4.4.8V15a12.5,12.5,0,0,1,4.6-.9C118.8,14.1,121.1,16.4,121.1,20.5Zm-3.6,1.7h-2.1c-2.5,0-3.4.7-3.4,1.9s.9,2.4,2.8,2.4,2.7-.9,2.7-2.3Zm13.9-8.1,2.5.3V8.7h3.6V24.6c0,2.4-1.7,5-6.4,5-2,0-6.7-.8-6.7-7.9C124.4,16.8,126.9,14.1,131.4,14.1Zm-.3,12.4c1.6,0,2.8-.4,2.8-1.6V17.2l-2.4-.2c-2.1,0-3.5,1-3.5,4.5S128.8,26.5,131.1,26.5ZM155,21.9c0,5-2.5,7.7-7.1,7.7s-7.1-2.7-7.1-7.7,2.5-7.7,7.1-7.7S155,16.9,155,21.9Zm-3.6,0c0-4-1.4-4.8-3.5-4.8s-3.5.8-3.5,4.8,1.4,4.7,3.5,4.7S151.4,25.8,151.4,21.9Z"
+    />
+  </svg>
+</template>

components/Navbar.vue

@@ -0,0 +1,19 @@
+<template>
+  <b-navbar wrapper-class="container" class="header">
+    <template slot="brand">
+      <b-navbar-item tag="router-link" to="/" active-class="">
+        <Logo />
+      </b-navbar-item>
+    </template>
+  </b-navbar>
+</template>
+
+<script>
+import Logo from '@/components/Logo'
+
+export default {
+  components: {
+    Logo,
+  },
+}
+</script>

components/Step.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="step">
+    <diamond :active="data.deployAddress" />
+    <div class="step-body">
+      <h4>{{ data.title }}</h4>
+      <div v-if="data.deployAddress" class="deployed">
+        Deployed by: <a href="#">{{ data.deployAddress }}</a>
+      </div>
+    </div>
+    <div class="step-tail">
+      <div v-if="data.deployAddress" class="completed">
+        <b-icon icon="check" />
+        <span>Completed</span>
+      </div>
+      <b-button v-else type="is-primary" outlined icon-left="tool">
+        Deploy
+      </b-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Diamond from '@/components/Diamond'
+
+export default {
+  components: {
+    Diamond,
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+}
+</script>

components/Steps.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="steps">
+    <step v-for="(step, index) in steps" :key="index" :data="step" />
+  </div>
+</template>
+
+<script>
+import Step from '@/components/Step'
+
+export default {
+  components: {
+    Step,
+  },
+  data() {
+    return {
+      steps: [
+        { title: 'But I must explain to you how all this mistaken idea' },
+        {
+          title:
+            'Nor again is there anyone who loves or pursues or desires to obtain',
+          deployAddress: '0xf7a526d8642f6c6cb98bcda9919209d3c1ce359e',
+        },
+      ],
+    }
+  },
+}
+</script>

layouts/default.vue

@@ -1,32 +1,8 @@
 <template>
-  <div>
+  <div class="wrapper">
-    <nav
+    <Navbar />
-      class="navbar header has-shadow is-primary"
+    <section class="main-content section">
-      role="navigation"
+      <div class="container">
-      aria-label="main navigation"
-    >
-      <div class="navbar-brand">
-        <div class="navbar-burger">
-          <span />
-          <span />
-          <span />
-        </div>
-      </div>
-    </nav>
-
-    <section class="main-content columns">
-      <aside class="column is-2 section">
-        <p class="menu-label is-hidden-touch">General</p>
-        <ul class="menu-list">
-          <li v-for="(item, key) of items" :key="key">
-            <nuxt-link :to="item.to" exact-active-class="is-active">
-              <b-icon :icon="item.icon" /> {{ item.title }}
-            </nuxt-link>
-          </li>
-        </ul>
-      </aside>
-
-      <div class="container column is-10">
         <nuxt />
       </div>
     </section>
@@ -34,22 +10,11 @@
 </template>
 
 <script>
+import Navbar from '@/components/Navbar'
+
 export default {
-  data() {
+  components: {
-    return {
+    Navbar,
-      items: [
-        {
-          title: 'Home',
-          icon: 'home',
-          to: { name: 'index' },
-        },
-        {
-          title: 'Inspire',
-          icon: 'lightbulb',
-          to: { name: 'inspire' },
-        },
-      ],
-    }
   },
 }
 </script>

nuxt.config.js

@@ -7,17 +7,34 @@ export default {
 
   // Global page headers (https://go.nuxtjs.dev/config-head)
   head: {
-    title: 'governance-dep-ui',
+    title: 'Tornado.cash',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       { hid: 'description', name: 'description', content: '' },
     ],
-    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+    link: [
+      { rel: 'manifest', href: '/manifest.json' },
+      {
+        rel: 'shortcut icon',
+        type: 'image/x-icon',
+        href: '/favicon/favicon.ico',
+      },
+      { rel: 'apple-touch-icon', href: '/favicon/apple-touch-icon.png' },
+    ],
+  },
+
+  // Customize the progress-bar color
+  loading: { color: '#44F1A6', height: '5px', duration: 5000 },
+
+  loadingIndicator: {
+    name: 'circle',
+    color: '#44F1A6',
+    background: '#000',
   },
 
   // Global CSS (https://go.nuxtjs.dev/config-css)
-  css: [],
+  css: ['@/assets/styles/app.scss'],
 
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
   plugins: [],
@@ -34,7 +51,25 @@ export default {
   // Modules (https://go.nuxtjs.dev/config-modules)
   modules: [
     // https://go.nuxtjs.dev/buefy
-    'nuxt-buefy',
+    [
+      'nuxt-buefy',
+      {
+        css: false,
+        materialDesignIcons: false,
+        defaultIconPack: 'trnd',
+        customIconPacks: {
+          trnd: {
+            sizes: {
+              default: 'trnd-24px',
+              'is-small': null,
+              'is-medium': 'trnd-36px',
+              'is-large': 'trnd-48px',
+            },
+            iconPrefix: 'trnd-',
+          },
+        },
+      },
+    ],
   ],
 
   // Build Configuration (https://go.nuxtjs.dev/config-build)

package.json

@@ -12,8 +12,10 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "node-sass": "^4.14.1",
     "nuxt": "^2.14.6",
-    "nuxt-buefy": "^0.4.3"
+    "nuxt-buefy": "^0.4.3",
+    "sass-loader": "^10.0.3"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^3.1.0",

pages/index.vue

@@ -1,11 +1,29 @@
 <template>
-  <section class="section">
+  <div>
-    <div class="columns is-mobile"></div>
+    <h1 class="title has-text-centered">Tornado.cash <span>Ceremony</span></h1>
-  </section>
+    <h2 class="subtitle has-text-centered">
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+      accusantium.
+    </h2>
+
+    <div class="buttons is-centered">
+      <b-button type="is-primary" outlined icon-left="tool">Start now</b-button>
+    </div>
+
+    <h3 class="title is-14px mt-6">Completed Tasks: <span>5/16</span></h3>
+
+    <div class="tornado-discoverer image is-16by9"></div>
+
+    <steps />
+  </div>
 </template>
 
 <script>
+import Steps from '@/components/Steps'
+
 export default {
-  name: 'HomePage',
+  components: {
+    Steps,
+  },
 }
 </script>

static/favicon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/favicon/mstile-150x150.png"/>
+            <TileColor>#000403</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

static/manifest.json

@@ -0,0 +1,19 @@
+{
+    "name": "Tornado Cash",
+    "short_name": "Tornado Cash",
+    "icons": [
+        {
+            "src": "/favicon/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/favicon/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#000",
+    "background_color": "#000",
+    "display": "standalone"
+}