corp feature loop front & center

src/.vitepress/config.mts

@@ -111,6 +111,7 @@ export default defineConfig({
 
     footer: {
       copyright: `© ${new Date().getFullYear()} Dexorder Trading Services Ltd. (BVI)`,
+      message: 'Contact us <a href="mailto:info@dexorder.com">info@dexorder.com</a>'
     },
 
   },

src/.vitepress/theme/index.ts

@@ -3,14 +3,16 @@ import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme-without-fonts'  // WITHOUT fonts
 import './style.css'
-import IntroVideoAutoplay from "../../components/IntroVideoAutoplay.vue";
+import FeatureVideoLoop from "../../components/FeatureVideoLoop.vue";
+import IntroVideo from "../../components/IntroVideo.vue";
 
 export default {
   extends: DefaultTheme,
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
-      'home-hero-actions-after': () => h(IntroVideoAutoplay),
+      'home-hero-info-after': () => h(FeatureVideoLoop),
+      'home-features-after': () => h(IntroVideo),
     })
   },
   enhanceApp({ app, router, siteData }) {

src/components/FeatureVideoLoop.vue

@@ -0,0 +1,8 @@
+<template>
+  <div style="display: flex; margin: 2em 0">
+    <video width="500" autoplay loop muted>
+      <source src="/supercut.mov" type="video/mp4" />
+      Your browser does not support the video tag.
+    </video>
+  </div>
+</template>

src/components/IntroVideo.vue

@@ -1,10 +1,12 @@
 <template>
-  <div style="margin-top: 1.5em; margin-bottom: 1.5em;">
+  <div style="display: flex; flex-direction: column; align-items: center">
-    <!-- NOTE:
+    <div style="margin: 1.5em auto; display: inline-block">
-      add ?autoplay=1 to the src query string
+      <!-- NOTE:
-      add enablejsapi=1 to query to allow video play tracking in the page's Google Analytics
+        add ?autoplay=1 to the src query string
-    -->
+        add enablejsapi=1 to query to allow video play tracking in the page's Google Analytics
-    <iframe style="display: inline-block" width="560" height="315" :src="`https://www.youtube.com/embed/${idAndSi}&enablejsapi=1&autoplay=${autoplay?'1':'0'}`" title="Dexorder on YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+      -->
+      <iframe style="display: inline-block" width="560" height="315" :src="`https://www.youtube.com/embed/${idAndSi}&enablejsapi=1&autoplay=${autoplay?'1':'0'}`" title="Dexorder on YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+    </div>
   </div>
 </template>
 

src/components/IntroVideoAutoplay.vue

@@ -1,7 +0,0 @@
-<template>
-  <intro-video/>
-</template>
-
-<script setup>
-import IntroVideo from "./IntroVideo.vue";
-</script>

src/index.md

@@ -72,6 +72,6 @@ a.VPButton-medium-brand:hover {
 </style>
 
 <div style="text-align: center; margin-top: 2rem;">
-  <a class="VPButton-medium-brand" href="https://dexorder.com/" target="dexorder-app">Launch App</a>
+  <a class="VPButton-medium-brand" href="https://app.dexorder.com/" target="dexorder-app">Launch App</a>
 </div>