Add Campus Ambassadors Page

src/components/Menu/AppBar.vue

@@ -37,9 +37,12 @@
           <span class="fa fa-circle fa-xs" :class="$style.awesome" aria-hidden="true"></span>
         </router-link>
       </li>-->
-      <li :class="$style.link" slot="right" v-if="['md', 'lg', 'xl', 'xxl'].includes(this.$mq)">
+      <li v-show="!isCampusAmbassador" :class="$style.link" slot="right" v-if="['md', 'lg', 'xl', 'xxl'].includes(this.$mq)">
         <router-link to="/referral"><b>Referrals</b></router-link>
       </li>
+      <li v-show="isCampusAmbassador" :class="$style.link" slot="right" v-if="['md', 'lg', 'xl', 'xxl'].includes(this.$mq)">
+        <router-link to="/ca"><b>Campus Ambassadors</b></router-link>
+      </li>
       <li :class="$style.link" slot="right" v-if="['md', 'lg', 'xl', 'xxl'].includes(this.$mq)"
         v-show="showDashboardActions">
         <router-link to="/dashboard">
@@ -126,9 +129,12 @@
             <!-- <li :class="$style.link">
               <router-link to="/team">Team</router-link>
             </li>-->
-            <li :class="$style.link">
+            <li v-show="!isCampusAmbassador" :class="$style.link">
               <router-link to="/referral"><b>Referrals</b></router-link>
             </li>
+            <li v-show="isCampusAmbassador" :class="$style.link">
+              <router-link to="/ca"><b>Campus Ambassadors</b></router-link>
+            </li>
             <!-- <li :class="$style.link" v-show="showDashboardActions">
               <router-link to="/dashboard">
                 Dashboard
@@ -181,6 +187,9 @@ export default {
     showDashboardActions() {
       return this.$store.getters.isLoggedIn;
     },
+    isCampusAmbassador() {
+      return this.$store.getters.isCampusAmbassador;
+    },
     isThemeLight() {
       return this.$store.getters.currentTheme === "light";
     }

src/components/ca/AboutCA.vue

@@ -2,15 +2,14 @@
   <div :class="[$style.aboutContainer, $style[$mq]]">
     <ResponsiveTwoColumnLayout :isRightAbove="true">
       <div :class="$style.aboutImage" slot="right">
-        <img src="#" />
+        <img src="@assets/ca/about.svg" />
       </div>
       <div :class="$style.aboutHead" slot="left">
         <p>
-          A good leader is one who knows the way, goes the way and shows the
-          way. With this in mind, CodeFest invites you to lead your college in
-          the sixth edition of the coding extravaganza by becoming a part of our
-          team as a Campus Ambassador. Apply now to grab the opportunity of
-          becoming the face of CodeFest in your college!
+          The CA program is our warm invitation to all you dynamic and enthusiastic students who are eager to represent the spirit of CodeFest’24 team in your campus. 
+        </p>
+        <p>
+          Accompanied with the opportunity to foster innovation and build connections, are the exclusive perks, exciting goodies and well-deserved rewards.
         </p>
       </div>
     </ResponsiveTwoColumnLayout>

src/components/ca/CAHero.vue

@@ -2,15 +2,15 @@
   <div :class="[$style.heroContainer, $style[$mq]]">
     <ResponsiveTwoColumnLayout :isRightAbove="true">
       <div :class="$style.caHead" slot="left">
-        <img src="#" />
+        <h1><span>CodeFest'24</span></h1>  
         <span :class="$style.tagline">Imagine. Create. Iterate.</span>
         <span :class="$style.venue">
           <span :id="$style.loc">
             <i class="fas fa-map-marked-alt"></i> IIT (BHU), Varanasi
           </span>
           <span :id="$style.sep">|</span>
           <span :id="$style.date">
-            <i class="far fa-calendar-alt"></i> 23 - 25 August, 2019
+            <i class="far fa-calendar-alt"></i> February 2024
           </span>
         </span>
         <h1>
@@ -19,19 +19,19 @@
         </h1>
         <h3>
           Be part of
-          <span>CODEFEST'20</span> by becoming our CAMPUS AMBASSADOR.
+          <span>CODEFEST'24</span> by becoming our CAMPUS AMBASSADOR.
         </h3>
         <div :class="$style.link">
           <a
-            href="https://forms.gle/BDcmVFr4K7o2GjRn9"
+            href="/login"
             :class="$style.linkText"
           >
             <h4>Register</h4>
           </a>
         </div>
       </div>
       <div :class="$style.caImage" slot="right">
-        <img src="#" />
+        <img src="@assets/ca/hero.svg" />
       </div>
     </ResponsiveTwoColumnLayout>
   </div>

src/components/ca/FaqCA.vue

@@ -2,7 +2,7 @@
   <div :class="[$style.faqContainer, $style[$mq]]">
     <ResponsiveTwoColumnLayout>
       <div :class="$style.faqHeader" slot="left">
-        <img src="#" />
+        <img src="@assets/ca/faq.svg" />
       </div>
       <FAQ :faqItems="faq" slot="right" />
     </ResponsiveTwoColumnLayout>
@@ -23,26 +23,29 @@ export default {
     return {
       faq: [
         {
-          question: "Who is eligible for being a campus ambassador?",
+          question: "What is the role of a Campus Ambassador?",
           answer:
-            "Anyone currently enrolled in any technical institute, who is \
-            connected to people who might be interested in coding competitions and hackathons can be a Campus ambassador.",
+            "Campus Ambassadors are passionate student representatives who spark excitement for CodeFest within their colleges. They act as a bridge between the organizers and their peers, ensuring smooth participation and offering valuable insights into the event.",
         },
         {
-          question: "What is the responsibility of a CA",
+          question: "Am I suitable to become a Campus Ambassador?",
           answer:
-            "A CA's responsibility is to publicize CodeFest among the students of\
-             their college and act as a representative of the fest in their college.",
+            "Any passionate and motivated college student from any academic background or technical skill level is eligible to apply.",
         },
         {
-          question: "How to apply for the CA programme?",
+          question: "Can there be multiple Campus Ambassadors from a particular college?",
           answer:
-            "Visit our facebook page/website and register as a CA by filling up the Google form available.",
+            "The number of Campus Ambassadors chosen from each college may vary depending on the college size and number of applications.",
         },
         {
-          question: "Can a CA register as a participant too?",
+          question: "How much time do I need to invest once selected as a Campus Ambassador?",
           answer:
-            "Ofcourse! Any CA can participate in whatever event he/she wishes to, there is no such restriction.",
+            "The time commitment will vary depending on the tasks allotted and the stage of the CodeFest cycle.",
+        },
+        {
+          question: "Will my progress be monitored?",
+          answer:
+            "Yes, your dedication will shine on our leaderboard. We will track your progress based on the number of referrals you bring to CodeFest and reward the top scorers with exciting prizes, so stay motivated and keep the CodeFest spirit alive!",
         },
       ],
     };

src/components/ca/Perks.vue

@@ -2,7 +2,7 @@
   <div :class="[$style.workContainer, $style[$mq]]">
     <ResponsiveTwoColumnLayout :isRightAbove="true">
       <div :class="$style.workImage" slot="right">
-        <img src="#" />
+        <img src="@assets/ca/perks.svg" />
       </div>
       <div :class="$style.workHead" slot="left">
         <div :class="$style.taskList">
@@ -33,24 +33,34 @@ export default {
     return {
       tasks: [
         {
-          start: "Connect : ",
+          start: "A certificate of recognition, authenticated by the HoD ",
           rest:
-            "Grow a strong network with peers inside your college as well as the CodeFest team.",
+            "of the Department of Computer Science and Engineering, IIT(BHU),  that will boost your resume and showcase your leadership skills.",
         },
         {
-          start: "Communication : ",
+          start: "Unlock a treasure chest of exciting goodies ",
           rest:
-            "Develop communication skills and get an edge over competition.",
+            "– perks you won't find anywhere else!",
         },
         {
-          start: "Certificate : ",
+          start: "Free access ",
           rest:
-            "Get Work Experience certificate as a CodeFest Campus Ambassador.",
+            "to exclusive workshops, seminars, and events organized by CodeFest that will enhance your knowledge and skills in various domains of coding.",
         },
         {
-          start: "Goodies : ",
+          start: "Build lasting connections and professional networks ",
           rest:
-            "Official CodeFest goodies and/or tees depending upon the number of participants in CodeFest from your college.",
+            "with like-minded peers within the vibrant CodeFest community.",
+        },
+        {
+          start: "Track your impact ",
+          rest:
+            "and see your hard work pay off with the dynamic leaderboard on CodeFest's official website. The top-ranked Campus Ambassadors will unlock exclusive rewards and recognition.",
+        },
+        {
+          start: "A lifetime experience ",
+          rest:
+            "of being part of a dynamic community of coders eager to learn, innovate, and create an impact.",
         },
       ],
     };

src/components/ca/Work.vue

@@ -2,7 +2,7 @@
   <div :class="[$style.workContainer, $style[$mq]]">
     <ResponsiveTwoColumnLayout>
       <div :class="$style.workImage" slot="left">
-        <img src="#" />
+        <img src="@assets/ca/work.svg" />
       </div>
       <div :class="$style.workHead" slot="right">
         <div :class="$style.taskList">
@@ -18,10 +18,10 @@
         </div>
       </div>
     </ResponsiveTwoColumnLayout>
-    <div :class="$style.para">
+    <!-- <div :class="$style.para">
       The number of participants from your college will determine the number of
       goodies you get as a Campus Ambassador of CodeFest.
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -37,19 +37,29 @@ export default {
     return {
       tasks: [
         {
-          start: "Connect ",
+          start: "Coordinating ",
           rest:
-            "CodeFest with the student community inside your campus and circle.",
+            "with our organizing team to facilitate the participation process for students from your college",
         },
         {
-          start: "Publicize",
+          start: "Creating awareness ",
           rest:
-            "CodeFest by sharing the posts and updates on social media, through word-of-mouth, posters and e-mails.",
+            "about CodeFest in your respective colleges by circulating posters, mails or messages in the official college groups",
         },
         {
-          start: "Encourage",
+          start: "Promoting CodeFest ",
           rest:
-            "the students of your campus for active participation in CodeFest.",
+            "in your college campus and through various social media platforms, including but not limited to Facebook, Instagram, and LinkedIn",
+        },
+        {
+          start: "Encouraging students ",
+          rest:
+            "from your college to participate in the event and engage in the various activities and competitions",
+        },
+        {
+          start: "Providing feedback and suggestions ",
+          rest:
+            "to enhance the overall experience of participants",
         },
       ],
     };

src/pages/CampusAmbassador.vue

@@ -3,24 +3,24 @@
     <AppBar />
     <main :class="$style.wrapper">
       <CAHero />
-      <SectionLayout title="About">
+      <SectionLayout title="What is the Campus Ambassador Program?">
         <AboutCA />
       </SectionLayout>
-      <SectionLayout title="What you need to do">
+      <SectionLayout title="What is a Campus Ambassador’s job?">
         <Work />
       </SectionLayout>
-      <SectionLayout title="Perks and Benefits">
+      <SectionLayout title="Why should you become a Campus Ambassador?">
         <Perks />
       </SectionLayout>
       <SectionLayout title="FAQ">
         <FaqCA />
       </SectionLayout>
-      <SectionLayout title="Contact Us">
+      <!-- <SectionLayout title="Contact Us">
         <ContactCA />
-      </SectionLayout>
-      <SectionLayout title="Points Table">
+      </SectionLayout> -->
+      <!-- <SectionLayout title="Points Table">
         <PointsTable />
-      </SectionLayout>
+      </SectionLayout> -->
     </main>
     <Footer />
   </div>

src/store/auth.js

@@ -16,18 +16,21 @@ export default {
   state: {
     token: getTokenFromStorage() || "",
     userId: -1,
+    isCampusAmbassador: true,
   },
   getters: {
     isLoggedIn: (state) => {
       return !!state.token;
     },
     authToken: (state) => state.token,
+    isCampusAmbassador: (state) => state.isCampusAmbassador,
   },
   mutations: {
     AUTH_SUCCESS(state, data) {
-      const { token, user_id } = data;
+      const { token, user_id, is_campus_ambassador } = data;
       state.token = token;
       state.userId = user_id;
+      state.isCampusAmbassador = is_campus_ambassador;
       putTokenToStorage(token);
     },
     AUTH_LOGOUT(state) {