pre-release stage 1

.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
   },
   extends: [
     '@nuxtjs/eslint-config-typescript',
-    'plugin:nuxt/recommended'
+    'plugins:nuxt/recommended'
   ],
   plugins: [
   ],

.github/workflows/chrome-e2e.yaml

@@ -0,0 +1,68 @@
+name: Chrome E2E CI
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        containers: [ 1, 2, 3 ]
+    name: E2E on Chrome
+    steps:
+      - name: Checking out code ⚡
+        uses: actions/checkout@v2
+
+      - name: Setting up NodeJS 📐
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+
+      - name: Caching Dependencies 💾
+        uses: actions/cache@v1
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Building 🏗
+        run: |
+          npm install -g yarn
+          yarn install --frozen-lockfile
+          yarn install
+
+
+      - name: E2E Testing 🤖
+        uses: cypress-io/github-action@v2
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          record: true
+          start: yarn run dev
+          parallel: true
+          browser: chrome
+          wait-on-timeout: 120
+          wait-on: 'http://localhost:3000'
+
+
+      - name: Uploading Screenshots ☁
+        uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+
+      - name: Uploading Videos ☁
+        uses: actions/upload-artifact@v1
+        if: always()
+        with:
+          name: cypress-videos
+          path: cypress/videos

.github/workflows/netlify-deploy.yaml

@@ -0,0 +1,27 @@
+name: Deploy
+on:
+  push:
+    branches:
+      - master
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        containers: [ 1, 2, 3 ]
+    name: Deploy
+    steps:
+      - name: Deploy to Netlify ✅
+        uses: nwtgck/[email protected]
+        with:
+          publish-dir: './dist'
+          production-branch: master
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          deploy-message: "Deploy from GitHub Actions"
+          enable-pull-request-comment: false
+          enable-commit-comment: true
+          overwrites-pull-request-comment: true
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

.gitignore

@@ -1,4 +1,4 @@
-# Created by .ignore support plugin (hsz.mobi)
+# Created by .ignore support plugins (hsz.mobi)
 ### Node template
 # Logs
 /logs
@@ -88,3 +88,5 @@ sw.*
 
 # Vim swap files
 *.swp
+
+cypress/

assets/css/tailwind.css

@@ -21,7 +21,7 @@
   }
 
   .sub-heading {
-    @apply font-medium text-center text-base md:text-xl text-center text-gray-300
+    @apply font-medium text-center text-base md:text-lg text-center text-gray-400
   }
 
   .input {

components/Global/Footer.vue

@@ -78,11 +78,11 @@
         <div class="text-gray-400 text-sm text-center">
           <h3 class="font-bold text-lg text-gray-300">Policies</h3>
           <ul class="flex-col space-y-2 pt-3 ">
-            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/">Refund Policy
+            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/legal/refund-policy">Refund Policy
             </NuxtLink>
-            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/">T&C
+            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/legal/terms-condition">T&C
             </NuxtLink>
-            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/">Privacy policy
+            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/legal/privacy-policy">Privacy policy
             </NuxtLink>
           </ul>
         </div>
@@ -95,28 +95,40 @@
           >
             Products</h3>
           <ul class="flex-col space-y-2 pt-3 ">
-            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/">Modded OS
+            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/products/modded-os">
+              Modded OS
             </NuxtLink>
-            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/">Premium
+            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/products/premium">
+              Premium
             </NuxtLink>
-            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/">Commands
+            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/products/commands">
+              Commands
             </NuxtLink>
-            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/">Pricing
-            </NuxtLink>
-            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/">Documentation
+            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/pricing">Pricing
             </NuxtLink>
+            <li>
+              <a class="block hover:text-white duration-200 transition hover:underline"
+                 href="https://docs.andronix.app"
+              >Documentation
+              </a>
+            </li>
           </ul>
         </div>
         <!--   Policies     -->
         <div class="text-gray-400 text-sm text-center md:order-2 order-1">
           <h3 class="font-bold text-lg text-gray-300">Know us</h3>
           <ul class="flex-col space-y-2 pt-3 ">
-            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/">Help
-            </NuxtLink>
-            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/">About us
+            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/help">Help
             </NuxtLink>
-            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/">Translate
+            <NuxtLink class="block hover:text-white duration-200 transition hover:underline" to="/about">About us
             </NuxtLink>
+            <li>
+              <a
+                class="block hover:text-white duration-200 transition hover:underline"
+                href="https://translate.andronix.app"
+              >Translate
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -130,9 +142,11 @@
         <h3 class="font-extrabold text-lg">Andronix App</h3>
         <p class="text-gray-400 text-sm">©2021 Andronix | Techriz. All Rights Reserved.</p>
         <p class="mt-3 text-xs text-gray-400 w-10/12 text-center mx-auto">
-          Made with <strong class="font-bold text-gray-300">Tailwind, NuxtJS and NodeJS</strong> by <a
+          Made with <a href="https://tailwindcss.com" class="underline font-bold text-gray-200"
+        >Tailwind</a>, <a href="https://nuxtjs.org" class="underline font-bold text-gray-200"
+        >NuxtJS</a> by <a
           href="https://github.com/imprakharshukla"
-          class="font-bold text-gray-200"
+          class="underline font-bold text-gray-100"
         >imprakharshukla</a> in 🇮🇳
         </p>
       </div>

components/Global/Heading.vue

@@ -1,6 +1,6 @@
 <template>
   <XyzTransition :appear-visible="true" duration="auto">
-    <div class="px-10 py-5 pb-16 md:pb-24"
+    <div class="px-10 py-5 pb-16 md:pb-24 lg:max-w-screen-md mx-auto"
     >
       <div class="flex-col space-y-4" xyz="fade flip-down duration-10 delay-2 stagger ease-out-back">
         <h2 class="deco-heading xyz-nested">{{ deco_heading }}</h2>

components/Global/NavBar.vue

@@ -1,6 +1,8 @@
 <template>
-  <div>
-    <div class="flex pt-6 md:pt-6 lg:pt-8 px-8 items-center justify-end">
+  <nav class="z-10 fixed w-full transition transform duration-100 ease-in-out"
+       :class="!view.atTopOfPage?'bg-gray-800 bg-opacity-80':''"
+  >
+    <div class="flex pt-4 lg:pt-6 lg:pb-6 px-8 pb-4 items-center justify-end">
       <XyzTransition appear-visible xyz="fade left-100% small">
         <div class="flex justify-self-start mr-auto cursor-pointer" @click="$router.push('/')">
           <h3 class="text-white font-sans font-bold text-lg">andronix</h3>
@@ -10,41 +12,65 @@
 
       <!--  Download Button    -->
       <div
-        class="invisible md:invisible lg:visible cursor-pointer px-3 py-1 bg-primary-500 flex items-center space-x-5 justify-center rounded hover:bg-primary-600 hover:scale-105 transition transform duration-300"
+        class="text-white invisible md:invisible lg:visible cursor-pointer px-3 py-2 bg-primary-600 flex items-center space-x-5 justify-center rounded hover:bg-white hover:text-primary-600 hover:-translate-y-1.5 transition transform duration-300"
       >
-        <svg class="text-white fill-current w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+        <svg class="text-current fill-current w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
              fill="currentColor"
         >
           <path fill-rule="evenodd"
                 d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v3.586l-1.293-1.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V8z"
                 clip-rule="evenodd"
           />
         </svg>
-        <a href="https://play.andronix.app" class="text-white font-bold">Download</a>
+        <a href="https://play.andronix.app" class="text-current font-bold">Download</a>
       </div>
 
-      <div @click="$store.commit('drawer/toggleDrawer')" class="cursor-pointer ml-5">
-        <svg class="stroke-current text-white w-8" xmlns="http://www.w3.org/2000/svg" width="31" height="21">
-          <g data-name="Group 393" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3">
-            <path data-name="Line 9" d="M1.5 1.5h28"/>
-            <path data-name="Line 10" d="M1.5 10.5h17"/>
-            <path data-name="Line 11" d="M1.5 19.5h22"/>
+      <!--   Hamburger   -->
+      <div id="nav_hamburger" @click="$store.commit('drawer/toggleDrawer')" class="cursor-pointer ml-5">
+        <svg class="stroke-current text-white w-8" xmlns="http://www.w3.org/2000/svg" width="31" height="15">
+          <g fill="none" stroke="#fff" stroke-width="3">
+            <path d="M0 1.5h31M0 13.5h31"/>
           </g>
         </svg>
       </div>
 
     </div>
-  </div>
+  </nav>
 </template>
 
 
 <script>
 
 export default {
   name: 'NavBar',
+  // a beforeMount call to add a listener to the window
+  beforeMount () {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+
+  methods: {
+    // the function to call when the user scrolls, added as a method
+    handleScroll () {
+      // when the user scrolls, check the pageYOffset
+      if (window.pageYOffset > 0) {
+        // user is scrolled
+        if (this.view.atTopOfPage) {
+          this.view.atTopOfPage = false
+        }
+      } else {
+        // user is at top of page
+        if (!this.view.atTopOfPage) {
+          this.view.atTopOfPage = true
+        }
+      }
+    }
+  },
   data: function () {
     return {
-      userData: this.$store.getters['auth/getUserData']
+      userData: this.$store.getters['auth/getUserData'],
+      view: {
+        atTopOfPage: true
+      }
     }
   }
 }

components/Global/SideBar.vue

@@ -10,13 +10,14 @@
     >
       <Overlay v-show="$store.state.drawer.isDrawerOpen"/>
     </transition>
-    <div
-      class="bg-background2 p-8 rounded-r-lg transform top-0 left-0 w-72 fixed h-full overflow-auto ease-in-out transition-all duration-300 z-30"
-      :class="this.$store.state.drawer.isDrawerOpen ? 'translate-x-0' : '-translate-x-full'"
+    <div id="drawer_main"
+         class="bg-gray-800 p-8 rounded-r-lg transform top-0 left-0 w-72 fixed h-full overflow-auto ease-in-out transition-all duration-300 z-30"
+         :class="this.$store.state.drawer.isDrawerOpen ? 'translate-x-0' : '-translate-x-full'"
     >
-      <div class="flex justify-between mb-10">
-        <h2 class="font-extrabold text-primary-500">ANDRONIX</h2>
-        <svg @click="$store.commit('drawer/toggleDrawer')" class="stroke-current text-white w-5"
+      <div
+        class="flex cursor-pointer hover:-translate-y-0.5 hover:text-primary-400 transition text-white transform duration-100 justify-end mb-10"
+      >
+        <svg @click="$store.commit('drawer/toggleDrawer')" class="stroke-current text-current w-5"
              xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
              stroke="currentColor"
         >
@@ -25,11 +26,11 @@
       </div>
 
       <!--  Account Details    -->
-      <div v-if="isLoggedIn"
+      <div id="drawer_account" v-if="isLoggedIn"
            class="my-10 text-white"
       >
         <div @click="$store.commit('drawer/toggleDrawer');$router.push('/user/profile')"
-             class="flex-col bg-background bg-opacity-40 px-4 py-4 rounded-lg justify-center items-center cursor-pointer hover:scale-105 duration-200 transform transition"
+             class="flex-col bg-gray-700 bg-opacity-40 px-4 py-4 rounded-lg justify-center items-center cursor-pointer hover:scale-105 duration-200 transform transition"
         >
           <div class="rounded-full mx-auto overflow-hidden w-8 h-8">
             <img class="object-cover"
@@ -38,7 +39,7 @@
             >
           </div>
           <p class="font-medium mt-2 text-sm text-center overflow-ellipsis line-clamp-1">
-            {{ userData.name ? userData.name : 'Anonymous' }}</p>
+            {{ userData.name ? userData.name : 'Email Sign-in' }}</p>
           <p class="mt-1 text-xs text-center overflow-ellipsis line-clamp-1">{{
               userData.email ? userData.email : 'Not Logged In'
             }}</p>
@@ -47,16 +48,23 @@
 
 
       <!--  Menu    -->
-      <div
-        class="text-white font-medium flex-col space-y-5 mt-6"
+      <div id="drawer_menu"
+           class="text-white font-medium flex-col space-y-5 mt-6"
       >
         <div v-for="(items, index) in menu" :key="items.color">
           <hr v-if="index !== 0" class="border-dashed border-t-1 mr-3 my-4 border-opacity-50 border-gray-700">
-          <div class="flex space-x-6 items-center" @click="$store.commit('drawer/toggleDrawer')">
+          <div
+            class="cursor-pointer text-white flex space-x-6 items-center px-2"
+            @click="$store.commit('drawer/toggleDrawer')"
+          >
             <div>
               <div v-html="items.icon"></div>
             </div>
-            <NuxtLink :class="`hover:${items.color}`" :to="items.to">{{ items.title }}</NuxtLink>
+            <NuxtLink :class="`hover:${items.color}`" :id="items.id" v-if="!items.to.includes('https://')"
+                      :to="items.to"
+            >{{ items.title }}
+            </NuxtLink>
+            <a :class="`hover:${items.color}`" :id="items.id" v-else :href="items.to">{{ items.title }}</a>
           </div>
         </div>
       </div>
@@ -67,7 +75,7 @@
       <!--  Logout Button    -->
 
       <div v-if="isLoggedIn" class="mt-10">
-        <div @click="logout"
+        <div id="drawer_logout_button" @click="logout"
              class="cursor-pointer px-3 -mt-4 py-2 bg-card_background flex items-center space-x-5 justify-center rounded hover:bg-background hover:scale-105 transition transform duration-300"
         >
           <svg class="text-white stroke-current w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
@@ -83,7 +91,9 @@
 
 
       <!--  Account Action    -->
-      <div v-if="!isLoggedIn" class="flex flex-wrap space-x-3 mt-8 justify-center items-center text-white">
+      <div id="drawer_account_action" v-if="!isLoggedIn"
+           class="flex flex-wrap space-x-3 mt-8 justify-center items-center text-white"
+      >
         <div @click="$store.commit('drawer/toggleDrawer');$router.push('/auth/register')"
              class="rounded bg-primary-600 text-center px-4 py-2 hover:scale-105 transition transform duration-300 cursor-pointer"
         >Register