Started with Vue
diff --git a/erpnext/public/js/education/web-academy.js b/erpnext/public/js/education/web-academy.js
new file mode 100644
index 0000000..1bf325b
--- /dev/null
+++ b/erpnext/public/js/education/web-academy.js
@@ -0,0 +1,27 @@
+import Vue from 'vue/dist/vue.js';
+import VueRouter from 'vue-router/dist/vue-router.js'
+import AcademyRoot from "./web-academy/AcademyRoot.vue";
+import AcademyHome from "./web-academy/pages/AcademyHome.vue";
+import AcademyProgramPage from "./web-academy/pages/AcademyProgramPage.vue";
+import AcademyCoursePage from "./web-academy/pages/AcademyCoursePage.vue";
+
+Vue.use(VueRouter)
+
+const routes = [
+ {path: '', component: AcademyHome},
+ {path: '/Program/:code', component: AcademyProgramPage, props: true},
+ {path: '/Course', component: AcademyCoursePage},
+];
+
+const router = new VueRouter({
+ routes: routes,
+});
+
+frappe.ready(() => {
+ new Vue({
+ el: "#web-academy",
+ router: router,
+ template: "<academy-root/>",
+ components: { AcademyRoot }
+ });
+})
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/AcademyRoot.vue b/erpnext/public/js/education/web-academy/AcademyRoot.vue
new file mode 100644
index 0000000..e5edfb6
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/AcademyRoot.vue
@@ -0,0 +1,10 @@
+<template>
+ <div id="academy-root">
+ <router-view></router-view>
+ </div>
+</template>
+<script>
+export default {
+ name: "AcademyRoot",
+};
+</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/components/AcademyCardList.vue b/erpnext/public/js/education/web-academy/components/AcademyCardList.vue
new file mode 100644
index 0000000..16e1924
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/AcademyCardList.vue
@@ -0,0 +1,31 @@
+<template>
+ <section class='section-padding section-bg'>
+ <div class='container'>
+ <h3 class='text-center'>Featured Programs</h3>
+ <p class='lead text-center'>Master Engineering</p>
+ <AcademyProgramCard v-for="program in featured_programs" v-bind:id="program" v-bind:title="program"/>
+ <div class='mt-4 text-center'>
+ <a class="btn btn-primary btn-lg" href="/program">View All</a>
+ </div>
+ </div>
+</section>
+</template>
+<script>
+import AcademyProgramCard from "../components/AcademyProgramCard.vue"
+export default {
+ name: "AcademyCardList",
+ data() {
+ return {
+ featured_programs: [],
+ };
+ },
+ mounted() {
+ frappe.call("erpnext.www.academy.get_featured_programs").then(r => {
+ this.featured_programs = r.message
+ })
+ },
+ components: {
+ AcademyProgramCard
+ }
+};
+</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue b/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue
new file mode 100644
index 0000000..3228421
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue
@@ -0,0 +1,38 @@
+<template>
+ <div class='card-deck mt-5'>
+ <div class="card">
+ <img :src="program.hero_image" style='height: 150px'>
+ <div class='card-body'>
+ <router-link :to="'/Program/' + program.name">
+ <h5 class='card-title'>{{ program.name }}</h5>
+ </router-link>
+ <div v-html="program.description"></div>
+ </div>
+ <div class='card-footer text-right'>
+ <!-- <a class='video-btn btn btn-secondary btn-sm' data-toggle="modal" data-src=" insert jinja stuff here " data-target="#myModal">Watch Intro</a> -->
+ <a class='btn btn-secondary btn-sm' href="/enroll?course=user">Enroll Now</a>
+ </div>
+ </div>
+</div>
+</template>
+<script>
+export default {
+ props: ['title'],
+ name: "AcademyProgramCard",
+ data() {
+ return {
+ program: ''
+ };
+ },
+ mounted() {
+ frappe.call({
+ method: "erpnext.www.academy.get_program_details",
+ args: {
+ program_name: this.title
+ }
+ }).then(r => {
+ this.program = r.message
+ })
+ },
+};
+</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue b/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue
new file mode 100644
index 0000000..0c1f5a6
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue
@@ -0,0 +1,34 @@
+<template>
+<section class='top-section'>
+ <div class='container'>
+ <div class='text-center'>
+ <!-- <img class="main-illustration" src='/assets/erpnext_com/img/erpnext_com_illustration.png'
+ style='width: 700px;'> -->
+ </div>
+ <h1 v-html="title"></h1>
+ <ul class="list-group">
+ </ul>
+ <p class='lead' v-html="description"></p>
+ <p class="mt-4">
+ <a class="btn btn-primary btn-lg" href="/enroll">Explore Courses</a>
+ </p>
+ </div>
+</section>
+</template>
+<script>
+export default {
+ name: "AcademyTopSection",
+ data() {
+ return {
+ title: '',
+ description: ''
+ };
+ },
+ mounted() {
+ frappe.call("erpnext.www.academy.get_portal_details").then(r => {
+ this.title = r.message.title,
+ this.description = r.message.description
+ })
+ },
+};
+</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/pages/AcademyCoursePage.vue b/erpnext/public/js/education/web-academy/pages/AcademyCoursePage.vue
new file mode 100644
index 0000000..c57076b
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/pages/AcademyCoursePage.vue
@@ -0,0 +1,10 @@
+<template>
+<div>
+ Course Page
+</div>
+</template>
+<script>
+export default {
+ name: "AcademyCoursePage"
+};
+</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/pages/AcademyHome.vue b/erpnext/public/js/education/web-academy/pages/AcademyHome.vue
new file mode 100644
index 0000000..0a57ef2
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/pages/AcademyHome.vue
@@ -0,0 +1,17 @@
+<template>
+<div>
+ <AcademyTopSection/>
+ <AcademyCardList/>
+</div>
+</template>
+<script>
+import AcademyTopSection from "../components/AcademyTopSection.vue"
+import AcademyCardList from "../components/AcademyCardList.vue"
+
+export default {
+ name: "AcademyHome",
+ components: {
+ AcademyTopSection, AcademyCardList
+ }
+};
+</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue b/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
new file mode 100644
index 0000000..813e012
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
@@ -0,0 +1,14 @@
+<template>
+<div>
+ Program Page {{ code }}
+</div>
+</template>
+<script>
+export default {
+ props: ['code'],
+ name: "AcademyProgramPage",
+ data() {
+ return this.code
+ }
+};
+</script>
\ No newline at end of file