corp homepage

src/components/Alpha.vue

@@ -0,0 +1,8 @@
+<template>
+  <v-chip text="ALPHA" size='x-small' color="red" class="align-self-start" variant="text"/>
+</template>
+<script>
+export default {
+  name: 'alpha'
+}
+</script>

src/components/Footer.vue

@@ -1,11 +1,6 @@
 <template>
   <v-footer class="text-center d-flex flex-column mb-12" location="bottom">
-    <div>
+    <social/>
-      <v-btn variant="plain" icon="mdi-facebook" @click="window.open('https://facebook.com','facebook')"/>
-      <v-btn variant="plain" icon="mdi-twitter" @click="window.open('https://x.com','twitter')"/>
-      <v-btn variant="plain" icon="mdi-reddit" @click="window.open('https://reddit.com','reddit')"/>
-      <v-btn variant="plain" icon="mdi-discord" @click="window.open('https://discord.com','discord')"/>
-    </div>
     <div class="text-grey logo" style="font-size: small; margin-bottom: 0;">dexorder</div>
     <div class="text-grey" style="font-size: x-small">&copy;{{ new Date().getFullYear() }}</div>
   </v-footer>
@@ -13,6 +8,7 @@
 
 <script setup>
 import {useStore} from "@/store/store";
+import Social from "@/components/Social.vue";
 
 const s = useStore()
 

src/components/Social.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <!--      <v-btn variant="plain" icon="mdi-facebook" @click="window.open('https://facebook.com','facebook')"/>-->
+    <v-btn variant="plain" icon="mdi-twitter" @click="open('https://twitter.com/Dexorder_trade','twitter')"/>
+    <!--      <v-btn variant="plain" icon="mdi-reddit" @click="window.open('https://reddit.com','reddit')"/>-->
+    <v-btn variant="plain" icon="mdi-discord" @click="open('https://discord.gg/fqp9JXXQyt','discord')"/>
+  </div>
+</template>
+
+<script setup>
+function open(url, target) {window.open(url,target)}
+</script>

src/components/Soon.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-chip text="Coming Soon" size='x-small' color="grey" variant="text"/>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/chart/Toolbar.vue

@@ -3,7 +3,7 @@
     <div class="d-flex align-end clickable" @click="$router.push('/order')">
       <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>
       <span class="logo">dexorder</span>
-      <v-chip text="ALPHA" size='x-small' color="red" class="align-self-start pr-6" variant="text"/>
+      <alpha class="pr-6"/>
     </div>
 <!--
     <div class="d-flex align-center">
@@ -18,7 +18,7 @@
       <toolbar-button tooltip="Assets" icon="mdi-currency-btc" path="/assets"/>
       <!-- mdi-format-list-checks mdi-format-list-bulleted-square -->
       <toolbar-button tooltip="Status" icon="mdi-format-list-checks" path="/status"/>
-      <v-btn variant="text" icon="mdi-help-circle-outline" text="Info" @click="showCorp" disabled></v-btn>
+      <v-btn variant="text" icon="mdi-help-circle-outline" text="Info" @click="showCorp"></v-btn>
     </div>
   </div>
 </template>
@@ -28,6 +28,7 @@ import {useStore} from "@/store/store.js";
 import {useChartOrderStore} from "@/orderbuild.js";
 import {useTheme} from "vuetify";
 import ToolbarButton from "@/components/chart/ToolbarButton.vue";
+import Alpha from "@/components/Alpha.vue";
 
 const props = defineProps(['title', 'icon'])
 
@@ -37,7 +38,7 @@ const co = useChartOrderStore()
 const theme = useTheme().current
 
 function showCorp() {
-  window.open('https://dexorder.trade', 'dexorder')
+  window.open('https://dexorder.trade/corp', 'dexorder')
 }
 
 </script>

src/corp/CorpLayout.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-app>
+    <menu-bar/>
+    <corp-view/>
+    <Footer/>
+  </v-app>
+</template>
+
+<script setup>
+import Footer from "@/components/Footer.vue";
+import {useStore} from "@/store/store.js";
+import CorpView from "@/corp/CorpView.vue";
+import MenuBar from "@/corp/MenuBar.vue";
+
+const s = useStore()
+</script>

src/corp/CorpView.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-main>
+    <v-container class="d-flex justify-center">
+      <router-view/>
+    </v-container>
+  </v-main>
+</template>
+
+<script setup>
+import {useStore} from "@/store/store.js";
+
+const store = useStore()
+</script>
+
+<style scoped lang="scss">
+@use '../styles/vars' as *;
+.maxw {
+  max-width: $card-maxw;
+}
+</style>

src/corp/Home.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-card rounded="0" border="0" elevation="0" class="maxw">
+    <v-card-title class="d-flex align-center">
+      <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>
+      <span class="logo">dexorder</span>
+    </v-card-title>
+    <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 exchanges with advanced order types!
+    </v-card-text>
+    <v-card-text>
+      <v-list>
+        <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 <soon/></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"/> One-Click Cancel All <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-shimmer" class="mr-2"/> Custom Complex Orders <soon/></v-list-item>
+        <v-list-item>
+          <v-img src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Uniswap_Logo.svg" width="1.3em"
+                 inline style="vertical-align: middle" class="mr-2"/>
+          Supports Uniswap v3 <alpha/>
+        </v-list-item>
+      </v-list>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn prepend-icon="mdi-arrow-up-bold" color="primary" variant="tonal" text="Try the App" @click="openApp"/>
+      <v-btn prepend-icon="mdi-discord" variant="flat" text="Join Discord" @click="discord"/>
+      <v-btn prepend-icon="mdi-twitter" variant="flat" text="Follow on Twitter" @click="twitter"/>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+import {useTheme} from "vuetify";
+import Alpha from "@/components/Alpha.vue";
+import Soon from "@/components/Soon.vue";
+
+const theme = useTheme().current
+
+function openApp() {
+  window.open('https://alpha.dexorder.trade/', 'dexorderapp')
+}
+
+function discord() {
+  window.open('https://discord.gg/fqp9JXXQyt','discord')
+}
+
+function twitter() {
+  window.open('https://twitter.com/Dexorder_trade', 'twitter')
+}
+
+</script>
+
+<style scoped lang="scss">
+.arrow {
+  font-size: 22px;
+}
+</style>

src/corp/MenuBar.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-app-bar scroll-behavior="hide" scroll-threshold="1">
+<!--    <v-app-bar-nav-icon @click="s.nav=!s.nav" icon="mdi-plus"/>-->
+
+    <v-app-bar-title>
+      <span class="logo d-flex mb-1 align-center w-100">
+        <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>
+        <span class="logo">dexorder</span>
+      </span>
+    </v-app-bar-title>
+
+    <v-btn prepend-icon="mdi-arrow-up-bold" variant="tonal" color="primary" @click="openApp">Launch App</v-btn>
+
+  </v-app-bar>
+</template>
+
+<script setup>
+import {useTheme} from "vuetify";
+
+const theme = useTheme().current
+
+function openApp() {
+  window.open('https://alpha.dexorder.trade/', 'dexorderapp')
+}
+</script>
+
+<style scoped lang="scss">
+.arrow {
+  font-size: 22px;
+}
+</style>

src/router/index.js

@@ -2,6 +2,16 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
 const routes = [
+  {
+    path: '/corp',
+    component: () => import('@/corp/CorpLayout.vue'),
+    children: [
+      {
+        path: '',
+        component: () => import(/* webpackChunkName: "vaultview" */ '@/corp/Home.vue'),
+      }
+    ]
+  },
   {
     path: '/',
     component: () => import('@/layouts/chart/ChartLayout.vue'),