diff --git a/javascript-vue/js/app.js b/javascript-vue/js/app.js
new file mode 100644
index 0000000..40c55f6
--- /dev/null
+++ b/javascript-vue/js/app.js
@@ -0,0 +1 @@
+require('./bootstrap');
diff --git a/javascript-vue/js/bootstrap.js b/javascript-vue/js/bootstrap.js
new file mode 100644
index 0000000..6922577
--- /dev/null
+++ b/javascript-vue/js/bootstrap.js
@@ -0,0 +1,28 @@
+window._ = require('lodash');
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// window.Pusher = require('pusher-js');
+
+// window.Echo = new Echo({
+// broadcaster: 'pusher',
+// key: process.env.MIX_PUSHER_APP_KEY,
+// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+// forceTLS: true
+// });
diff --git a/javascript-vue/js/icons/eye-fill.vue b/javascript-vue/js/icons/eye-fill.vue
new file mode 100644
index 0000000..726eed7
--- /dev/null
+++ b/javascript-vue/js/icons/eye-fill.vue
@@ -0,0 +1,8 @@
+
+
+
diff --git a/javascript-vue/js/icons/instagram.vue b/javascript-vue/js/icons/instagram.vue
new file mode 100644
index 0000000..cd4ec42
--- /dev/null
+++ b/javascript-vue/js/icons/instagram.vue
@@ -0,0 +1,67 @@
+
+
+
diff --git a/javascript-vue/js/icons/loading.vue b/javascript-vue/js/icons/loading.vue
new file mode 100644
index 0000000..10fd5d3
--- /dev/null
+++ b/javascript-vue/js/icons/loading.vue
@@ -0,0 +1,3 @@
+
+
+
diff --git a/javascript-vue/js/icons/plus-fill.vue b/javascript-vue/js/icons/plus-fill.vue
new file mode 100644
index 0000000..4a86388
--- /dev/null
+++ b/javascript-vue/js/icons/plus-fill.vue
@@ -0,0 +1,5 @@
+
+
+
diff --git a/javascript-vue/js/icons/plus.vue b/javascript-vue/js/icons/plus.vue
new file mode 100644
index 0000000..b917ed6
--- /dev/null
+++ b/javascript-vue/js/icons/plus.vue
@@ -0,0 +1,6 @@
+
+
+
diff --git a/javascript-vue/js/icons/youtube.vue b/javascript-vue/js/icons/youtube.vue
new file mode 100644
index 0000000..1bf5548
--- /dev/null
+++ b/javascript-vue/js/icons/youtube.vue
@@ -0,0 +1,39 @@
+
+
+
diff --git a/javascript-vue/js/main.js b/javascript-vue/js/main.js
new file mode 100644
index 0000000..4ba0b70
--- /dev/null
+++ b/javascript-vue/js/main.js
@@ -0,0 +1,116 @@
+import RegisterArea from './register-area/register-area.vue'
+import Panel from './panel/panel.vue'
+import '../scss/main.scss'
+import { createApp } from 'vue'
+importAll(require.context('../images', false, /\.(png|jpe?g|svg)$/))
+
+let heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p")
+let registerToggles = document.querySelectorAll(".register-btn, .register-area\
+ .cancel-button, .services-cards button")
+let token = getCookie('XSRF-TOKEN')
+
+function importAll(r) {
+ return r.keys().map(r)
+}
+
+function getCookie(name) {
+ var re = new RegExp(name + "=([^;]+)")
+ var value = re.exec(document.cookie)
+
+ return (value != null) ? unescape(value[1]) : null
+}
+
+function getToken() {
+ return fetch("/sanctum/csrf-cookie", {
+ method: 'GET'
+ }).then( () => {
+ token = getCookie('XSRF-TOKEN')
+ return token
+ })
+}
+
+function login(event) {
+ getToken().then(fetch("/login", {
+ method: 'POST',
+ headers: {'Content-Type': 'application/json',
+ 'Accept': 'application/json',
+ 'X-XSRF-TOKEN': token},
+ body: JSON.stringify({"email":
+ document.getElementById("login_email").value,
+ "password": document.getElementById("login_password").value}),
+ }).then(response => {
+ if (response.ok) {
+ window.location.assign("/panel")
+ } else {
+ document.querySelector("#login_form .error").innerText =
+ "Invalid credentials."
+ }
+ }))
+ event.preventDefault()
+ // event.stopPropogation()
+}
+
+
+//Attempt to resend the verification link
+function resendLink(event) {
+ fetch("/resend-verification", {
+ method: 'POST',
+ headers: {'Content-Type': 'application/json',
+ 'Accept': 'application/json',
+ 'X-XSRF-TOKEN': token},
+ }).then(response => {
+ if (response.ok) {
+ event.target.parentNode.getElementsByTagName('h3')[0].innerText =
+ "The link has been resent."
+ } else {
+ event.target.parentNode.getElementsByTagName('h3')[0].innerText =
+ `${response.status} : ${response.statusText}`
+ }})
+ event.preventDefault();
+}
+
+function toggleNav() {
+ heroText.forEach(item => {
+ item.classList.toggle("hidden")
+ })
+ document.querySelector("nav form.login").classList.toggle("active")
+ this.classList.toggle("toggled")
+}
+
+
+if (window.location.pathname == '/') {
+ document.getElementById('nav_toggle').addEventListener('click', toggleNav)
+ document.querySelector('#login_form button').addEventListener('click', login)
+ const app = createApp(RegisterArea).mount('#app')
+ // app.token = token
+ if (!token) {app.token = getToken()}
+
+ //Triggers for registration menu
+ for (let i = 0; i < registerToggles.length; i++) {
+ registerToggles[i].addEventListener("click", function() {
+ document.querySelector(".register-area").classList.add("active")
+ app.active = 'register'
+ })
+ }
+ document.getElementById("forgot-password-btn").onclick = event => {
+ document.querySelector(".register-area").classList.add("active")
+ app.active = 'forgot'
+ event.preventDefault()
+ }
+
+ //FAQ collapsibles
+ let cols = document.getElementsByClassName("collapsible");
+
+ for (let i = 0; i < cols.length; i++) {
+ cols[i].addEventListener("click", function() {
+ this.classList.toggle("active");
+ });
+ }
+} else if (window.location.pathname == '/verify-email') {
+ document.getElementById('resend_verification').addEventListener("click", resendLink)
+} else if (window.location.pathname == '/panel') {
+ const app = createApp(Panel).mount('#panel')
+ getToken().then(()=> {app.token = token})
+ window.onhashchange = ()=>{app.active = location.hash}
+}
+
diff --git a/javascript-vue/js/panel/admin.vue b/javascript-vue/js/panel/admin.vue
new file mode 100644
index 0000000..e69de29
diff --git a/javascript-vue/js/panel/credits.vue b/javascript-vue/js/panel/credits.vue
new file mode 100644
index 0000000..90e1fc0
--- /dev/null
+++ b/javascript-vue/js/panel/credits.vue
@@ -0,0 +1,188 @@
+
+ Payeer allows you to pay securely by transfering your choice of cryptocurrency
+ to a temporary address.
+ Pay by transfering USD from your Perfect Money wallet. ID: {{order.id}} Orders are typically completed within 1-5
+ days.10 Credits
+$10.99
50 Credits
+5 Free Credits$54.99
100 Credits
+10 Free Credits$109.99
1000 Credits
+150 Free Credits$1010.00
Total: ${{total.toLocaleString('en')}}
+
+Select a payment method
+
+
+
+ Card
Default
Delete
+Pending Orders
+
+
+
+
URL: {{order.url}}
Quantity:
+ {{order.quantity}}
Note: {{order.note}}Order History
+
+
+
+ Date ID Name Status
+ Quantity
+
+
+
+
+ {{order.updated_at}}
+ {{order.id}}
+ {{order.service.name}}
+ {{order.status.charAt(0).toUpperCase() +
+ order.status.slice(1)}}
+ {{order.quantity}}
+
+
We've just launched. Thanks for joining us! Some features are still - being tested.
+ being tested. If you experience a delay in credits being added to your + account, please wait 24 hours before contacting support@trendplays.com.