init token page

content/navigation/navigation.md

@@ -11,7 +11,7 @@ navLinks:
     expandable: false
   - name: TOKEN
     link: /token
-    external: true
+    external: false
     expandable: false
   - name: LEARN
     link: "" # /dropdown

content/page/token/token.md

@@ -0,0 +1,10 @@
+---
+id: token
+header_slogan: WE ARE GROWING NOW.
+header_title: YOU GROW WHEN THE THREEFOLD GRID GROWS.
+header_image: ./token_header.png
+header_altImg: ThreeFold Token
+header_excerpt: The ThreeFold Token is the currency of the fastest growing P2P internet network on the planet. The perfect time to get involved in our growth is now.
+button: Get Tokens
+link: /
+---

gridsome.config.js

@@ -6,7 +6,8 @@
 
 module.exports = {
     siteName: 'ThreeFold',
-    plugins: [
+    pathPrefix: "threefold",
+	plugins: [
 
         // Local models
         {
@@ -493,7 +494,8 @@ module.exports = {
             externalLinksTarget: '_blank',
             externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
             anchorClassName: 'icon icon-link',
-            plugins: [
+            pathPrefix: "threefold",
+	plugins: [
                 ['gridsome-plugin-remark-prismjs-all', {
                         highlightClassName: "gridsome-highlight",
                         codeTitleClassName: "gridsome-code-title",

src/components/AppListItem.vue

@@ -15,7 +15,7 @@
       :key="product.id"
     >
       <div class="post-card-image-link px-1">
-        <g-link :href="product.link">
+        <g-link :to="product.link">
           <g-image
             :src="img(product.image)"
             :alt="product.title"

src/components/custom/Navbar/Navbar.vue

@@ -158,12 +158,12 @@
                     target="_blank"
                     >{{ link.title }}</a
                   >
-                  <a
+                  <g-link
                     v-else
                     class="block px-4 py-1 text-sm bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
                     @click="open = false"
-                    :href="link.path"
-                    >{{ link.title }}</a
+                    :to="link.path"
+                    >{{ link.title }}</g-link
                   >
                 </div>
               </div>

src/components/marketing/sections/cta-sections/Header.vue

@@ -40,7 +40,46 @@
       </div>
     </div>
 
-    <div class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 -mx-2" v-else>
+    <div
+      class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 -mx-2"
+      v-else-if="id == 'token'"
+    >
+      <div class="lg:w-1/2 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none">
+        <h1
+          v-if="id == 'token'"
+          class="text-4xl text-center mb-6 mt-20 leading-none font-normal font-heading"
+        >
+          {{ title }} <br />
+          <span class="font-bold">{{ slogan }}</span>
+        </h1>
+        <div
+          class="mb-8 text-center text-gray-700 leading-relaxed"
+          v-html="excerpt"
+        ></div>
+        <div v-if="button">
+          <a
+            v-if="link.includes('http')"
+            target="_blank"
+            class="nline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+            :href="link"
+            >{{ button }}</a
+          >
+          <a
+            v-else
+            class="nline-block bg-blue-900 text-md learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+            :href="link"
+            >{{ button }}</a
+          >
+          <!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
+        </div>
+      </div>
+      <div class="lg:w-1/2 px-2"><g-image :src="img" :alt="altImg" /></div>
+    </div>
+
+    <div
+      class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 -mx-2"
+      v-else
+    >
       <div class="lg:w-2/5 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none">
         <h2
           class="text-6xl mb-6 mt-20 leading-none font-extrabold font-heading"
@@ -91,3 +130,4 @@ export default {
   },
 };
 </script>
+