separate how it works

src/corp/AppBtn.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-btn prepend-icon="mdi-arrow-up-bold" color="primary" variant="tonal" text="Try the App" @click="openApp"/>
+</template>
+
+<script setup>
+function openApp() {
+  window.open('https://alpha.dexorder.trade/', 'dexorderapp')
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/corp/Home.vue

@@ -1,36 +1,34 @@
 <template>
-  <div>
-    <v-card rounded="0" border="0" elevation="0" class="maxw">
-      <v-card-item>
-        <logo class="logo-xl"/>
-      </v-card-item>
-      <v-card-subtitle class="pl-8 mx-auto">Advanced DeFi Orders</v-card-subtitle>
-  <!--    <social class="ml-12"/>-->
-      <v-card-text>
-        Dexorder powers up your favorite DeFi exchange with advanced order types!
-      </v-card-text>
-      <v-card-text>
-        <v-list>
-          <v-list-item>
-            <uniswap-logo class="mr-2"/>
-            Supports Uniswap v3 <alpha/>
-          </v-list-item>
-          <v-list-item><v-icon icon="mdi-ray-vertex" class="mr-2"/> Limit Orders <alpha/></v-list-item>
-          <v-list-item><v-icon icon="mdi-clock-outline" class="mr-2"/> DCA and TWAP Orders <alpha/></v-list-item>
-          <v-list-item><v-icon icon="mdi-vector-line" class="mr-2"/> Diagonal Limit Orders <soon/></v-list-item>
-          <v-list-item><v-icon icon="mdi-chart-timeline-variant-shimmer" class="mr-2"/> Stop Loss / Take Profit <soon/></v-list-item>
-          <v-list-item><v-icon icon="mdi-format-list-checks" class="mr-2"/> One-Cancels-the-Other (OCO) Groups <soon/></v-list-item>
-          <v-list-item><v-icon icon="mdi-cancel" class="mr-2"/> Single-transaction Cancel All <alpha/></v-list-item>
-          <v-list-item><v-icon icon="mdi-alert-outline" class="mr-2"/> Single-transaction Sell Everything <soon/></v-list-item>
-          <v-list-item><v-icon icon="mdi-shimmer" class="mr-2"/> Custom Complex Orders <soon/></v-list-item>
-        </v-list>
-      </v-card-text>
-      <home-actions/>
-    </v-card>
-    <div style="height: 3rem; font-size: 0; line-height: 0;"/>
-    <how-it-works/>
-    <home-actions/>
-  </div>
+  <v-card rounded="0" border="0" elevation="0" class="maxw">
+    <v-card-item>
+      <logo class="logo-xl"/>
+    </v-card-item>
+    <v-card-subtitle class="pl-8 mx-auto">Advanced DeFi Orders</v-card-subtitle>
+<!--    <social class="ml-12"/>-->
+    <v-card-text>
+      Dexorder powers up your favorite DeFi exchange with advanced order types!
+    </v-card-text>
+    <v-card-text>
+      <v-list>
+        <v-list-item>
+          <uniswap-logo class="mr-2"/>
+          Supports Uniswap v3 <alpha/>
+        </v-list-item>
+        <v-list-item><v-icon icon="mdi-ray-vertex" class="mr-2"/> Limit Orders <alpha/></v-list-item>
+        <v-list-item><v-icon icon="mdi-clock-outline" class="mr-2"/> DCA and TWAP Orders <alpha/></v-list-item>
+        <v-list-item><v-icon icon="mdi-vector-line" class="mr-2"/> Diagonal Limit Orders <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-chart-timeline-variant-shimmer" class="mr-2"/> Stop Loss / Take Profit <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-format-list-checks" class="mr-2"/> One-Cancels-the-Other (OCO) Groups <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-cancel" class="mr-2"/> Single-transaction Cancel All <alpha/></v-list-item>
+        <v-list-item><v-icon icon="mdi-alert-outline" class="mr-2"/> Single-transaction Sell Everything <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-shimmer" class="mr-2"/> Custom Complex Orders <soon/></v-list-item>
+      </v-list>
+    </v-card-text>
+    <div class="w-100 d-flex justify-center my-6 actions">
+      <app-btn/>
+      <v-btn prepend-icon="mdi-information-outline" variant="flat" text="How It Works" @click="nav('HowItWorks')"/>
+    </div>
+  </v-card>
 </template>
 
 <script setup>
@@ -41,6 +39,8 @@ import HowItWorks from "@/corp/HowItWorks.vue";
 import HomeActions from "@/corp/HomeActions.vue";
 import UniswapLogo from "@/corp/UniswapLogo.vue";
 import Logo from "@/components/Logo.vue";
+import {nav} from "@/misc.js";
+import AppBtn from "@/corp/AppBtn.vue";
 
 const theme = useTheme().current
 

src/corp/HomeActions.vue

@@ -1,15 +1,13 @@
 <template>
   <v-card-actions>
-    <v-btn prepend-icon="mdi-arrow-up-bold" color="primary" variant="tonal" text="Try the App" @click="openApp"/>
+    <app-btn/>
     <v-btn prepend-icon="mdi-discord" variant="flat" text="Join Discord" @click="discord"/>
     <v-btn prepend-icon="mdi-twitter" variant="flat" text="Follow Twitter" @click="twitter"/>
   </v-card-actions>
 </template>
 
 <script setup>
-function openApp() {
-  window.open('https://alpha.dexorder.trade/', 'dexorderapp')
-}
+import AppBtn from "@/corp/AppBtn.vue";
 
 function discord() {
   window.open('https://discord.gg/fqp9JXXQyt','discord')

src/corp/HowItWorks.vue

@@ -20,6 +20,9 @@
         Only you the vault's owner may withdraw funds or manage orders in your vault.
         The orders in the vault may only trade the tokens in the vault, and your regular wallet is never touched.
       </p>
+      <p>
+        See our open source smart contracts on <a href="https://github.com/dexorder-trade/contract">GitHub</a>.
+      </p>
     </v-card-text>
     <v-card-text>
       <h4>Funds are Never Locked</h4>
@@ -47,12 +50,22 @@
         provide gas at the correct times.
       </p>
     </v-card-text>
+    <v-card-text>
+      <h4 id="Charts">Charts</h4>
+        Creating dexorders couldn't be easier using the charts you know and love by
+        <a href="https://tradingview.com/" target="TradingView">TradingView</a>. What you see on the chart is the order
+        you get on-chain.
+    </v-card-text>
     <v-card-text>
       <h4>Power Up</h4>
       <p>
         Use Dexorder trading vaults for sophisticated order management when trading with your favorite <uniswap-logo/> DeFi pool!
       </p>
     </v-card-text>
+    <v-card-actions class="justify-center my-6 actions">
+      <app-btn/>
+      <v-btn prepend-icon="mdi-home-outline" variant="flat" text="Home" @click="nav('Home')"/>
+    </v-card-actions>
   </v-card>
 </template>
 
@@ -62,6 +75,9 @@ import Alpha from "@/components/Alpha.vue";
 import Soon from "@/components/Soon.vue";
 import UniswapLogo from "@/corp/UniswapLogo.vue";
 import Logo from "@/components/Logo.vue";
+import HomeActions from "@/corp/HomeActions.vue";
+import {nav} from "@/misc.js";
+import AppBtn from "@/corp/AppBtn.vue";
 </script>
 
 <style scoped lang="scss">

src/corp/MenuBar.vue

@@ -3,10 +3,11 @@
 <!--    <v-app-bar-nav-icon @click="s.nav=!s.nav" icon="mdi-plus"/>-->
 
     <v-app-bar-title>
-      <logo/>
+      <logo @click="nav('Home')" class="clickable"/>
     </v-app-bar-title>
 
-    <v-btn prepend-icon="mdi-arrow-up-bold" variant="tonal" color="primary" @click="openApp">Launch App</v-btn>
+    <v-btn @click="nav('HowItWorks')" prepend-icon="mdi-information-outline" text="How It Works"/>
+    <v-btn prepend-icon="mdi-arrow-up-bold" variant="tonal" color="primary" @click="openApp" text="Launch App"/>
 
   </v-app-bar>
 </template>
@@ -14,6 +15,7 @@
 <script setup>
 import {useTheme} from "vuetify";
 import Logo from "@/components/Logo.vue";
+import {nav} from "@/misc.js";
 
 const theme = useTheme().current