programs pages are added

src/App.vue

@@ -112,7 +112,7 @@
 
           <v-card>
             <v-card-text>
-              <p>Team selection for Hackathon v2.0 is under going </p>
+              <p>Team selection for Hackathon v2.0 is undergoing </p>
             </v-card-text>
 
             <v-card-actions>

src/components/HomePage.vue

@@ -22,8 +22,8 @@
       <v-layout column wrap class="my-5" align-center>
         <v-flex xs12 sm4 class="my-3">
           <div class="text-xs-center">
-            <h2 class="headline">The best way to demonistrate your coding skill</h2>
-            <span class="subheading">while solving potential problems</span>
+            <h2 class="headline">The best way to demonstrate your coding skill</h2>
+            <span class="subheading">while solving real-life challenges</span>
           </div>
         </v-flex>
         <v-flex xs12>
@@ -38,9 +38,9 @@
                     <div class="headline text-xs-center">Design The Challenge</div>
                   </v-card-title>
                   <v-card-text>
-                    Hackathon boosts your design skill and critical thinking towards solving the challenge. It gives you the opportunity to improve your
-                    skill on how to understand the problem domain or the challenge topic, analze and come up with potential
-                    ,feasible solution.
+                    Hackathons help focus your design and critical thinking skills towards
+                     solving challenges.  You get the opportunity to understand the problem, 
+                     analyze it, and come up with feasible solutions.
                   </v-card-text>
                 </v-card>
               </v-flex>
@@ -53,9 +53,9 @@
                     <div class="headline">Build The Solution</div>
                   </v-card-title>
                   <v-card-text>
-                    You will build digital solution that trully solves the problem. By collaboration with a team, you
-                    will learn how to coordinate to build the designed solution. You will demonistrate your skill
-                    within a short period of time. You will also learn new skills from the teams.
+                    This is about results! You will build digital solution that 
+                    truly solves a problem. Team collaboration helps to develop 
+                    coordination capacity, share experience, and develop a network of partners. 
                   </v-card-text>
                 </v-card>
               </v-flex>
@@ -68,8 +68,9 @@
                     <div class="headline text-xs-center">Win Big Prizes</div>
                   </v-card-title>
                   <v-card-text>
-                    You will get big prizes for your outstanding solution/product. You will also get exposure to the
-                    potential stakeholders to work on the winning project. This award is a complement for your passion.
+                    The teams with the top solutions will receive prizes,
+                     but everyone benefits from the experience and will have 
+                     the chance to show their ideas to potential stakeholders.  
                   </v-card-text>
                 </v-card>
               </v-flex>

src/components/Programs.vue

@@ -2,7 +2,8 @@
   <div>
     <v-toolbar tabs color="primary" dark>
 
-      <v-toolbar-title>Hackathon v1.0</v-toolbar-title>
+      <v-toolbar-title>Hackathon v1.0 <span class="subheading">"Youth and Entrepreneurship"</span></v-toolbar-title>
+
 
       <v-spacer></v-spacer>
 
@@ -25,45 +26,74 @@
         dark
       >
         <v-tabs-slider></v-tabs-slider>
-        <v-tab href="#tab-1">Introduction
-          <v-icon>speaker_notes</v-icon>
-        </v-tab>
-
-        <v-tab href="#tab-2">Teams
-          <v-icon>people</v-icon>
-        </v-tab>
-
-        <v-tab href="#tab-3">Schedule
-          <v-icon>timer</v-icon>
-        </v-tab>
 
-        <v-tab href="#tab-4">Winners
-          <v-icon>card_giftcard</v-icon>
-        </v-tab>
-
-        <v-tab href="#tab-5">Gallery
-          <v-icon>collections</v-icon>
-        </v-tab>
-        <v-tab href="#tab-6">Discussion
-          <v-icon>forum</v-icon>
+        <v-tab v-for="(tab, key) in tabList" :key="key" :href="'#tab-'+ key">
+          {{tab.title}}
+          <v-icon>{{tab.icon}}</v-icon>
         </v-tab>
       </v-tabs>
     </v-toolbar>
 
     <v-tabs-items v-model="tabs" class="white elevation-1">
-      <v-tab-item v-for="i in 6" :id="'tab-' + i" :key="i">
+      <v-tab-item v-for="(tab, i) in tabList" :id="'tab-' + i" :key="i">
           <v-card flat>
-            <v-card-text>{{ text }}</v-card-text>
+            <v-card-text>
+              <intro-page v-if="i == 0"></intro-page>
+              <teams-page v-if="i == 1"></teams-page>
+
+              </v-card-text>
           </v-card>
         </v-tab-item>
     </v-tabs-items>
   </div>
 </template>
 <script>
+
+import Intro from './programPages/Intro.vue';
+import Teams from './programPages/Teams.vue';
+
 export default {
+  components: {
+    'intro-page': Intro,
+    'teams-page': Teams
+  },
   data() {
     return {
       tabs: null,
+      tabList: [
+        {
+          title: "Introduction",
+          icon: "speaker_notes"
+        }, 
+        {
+          title: "Teams",
+          icon: "people"
+        },
+        {
+          title: "Schedule",
+          icon: "timer",
+        },
+        {
+          title: "Judging",
+          icon: "how_to_vote"
+        },
+        {
+          title: "Rules",
+          icon: "book"
+        },
+        {
+          title: "Winners",
+          icon: "card_giftcard"
+        },
+        {
+          title: "Gallery",
+          icon: "collections"
+        },
+        {
+          title: "Discussion",
+          icon: "forum"
+        }
+      ],
       text:
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
     };

src/components/programPages/Intro.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <h3>What is Hackathon?</h3>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    }
+}
+</script>

src/components/programPages/Teams.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <h3>Teams Page</h3>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            
+        }
+    }
+}
+</script>