Campus captain

README.md

@@ -41,7 +41,6 @@ Layouts are a great help when you want to change the look and feel of your Nuxt
 
 More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).
 
-
 ### `pages`
 
 This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.
@@ -58,7 +57,7 @@ More information about the usage of this directory in [the documentation](https:
 
 This directory contains your static files. Each file inside this directory is mapped to `/`.
 
-Example: `/static/robots.txt` is mapped as `/robots.txt`.
+Example: `/assets/images/robots.txt` is mapped as `/robots.txt`.
 
 More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static).
 

components/BenefitCard.vue

@@ -0,0 +1,30 @@
+<template>
+ <div class="benefit-card">
+ <img :src="require(`@/assets/images/${benefit.icon}`)" height="80" />
+ <h5>
+ {{ benefit.title }}
+ </h5>
+ </div>
+</template>
+<script>
+export default {
+ props: ["benefit"]
+};
+</script>
+<style>
+.benefit-card {
+ background: white;
+ border: none;
+ border-radius: 20px;
+ height: 10rem;
+ width: 10rem;
+ padding: 2rem;
+}
+.benefit-card h5 {
+ font-size: 18px;
+ color: #5b5b5d;
+}
+.benefit-card img {
+ height: 3.6rem;
+}
+</style>

components/Benefits.vue

@@ -0,0 +1,60 @@
+<template>
+ <div class="section benefits">
+ <h2 class="heading">
+ <img :src="require('@/assets/images/udemy.png')" />
+ Udemy + Coding minutes advantage
+ </h2>
+ <h4 class="subheading">
+ Now spend less than a Pizza 🍕, Learn more than ever💡
+ </h4>
+
+ <div class="benefits-list">
+ <BenefitCard
+ v-for="benefit in Benefits"
+ :key="benefit.title"
+ :benefit="benefit"
+ />
+ </div>
+ </div>
+</template>
+<script>
+import Benefits from "@/data/benefits.json";
+import BenefitCard from "@/components/BenefitCard";
+
+export default {
+ components: {
+ BenefitCard
+ },
+ data() {
+ return {
+ Benefits
+ };
+ }
+};
+</script>
+<style>
+.benefits {
+ margin-top: 5rem;
+}
+.benefits-list {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ align-items: end;
+ background: #f9f9f9;
+ border-radius: 20px;
+ padding: 4rem 4rem;
+ gap: 45px;
+}
+.benefits .heading {
+ text-align: center;
+ font-size: 2.4rem;
+}
+.benefits .heading img {
+ height: 2rem;
+}
+.benefits .subheading {
+ color: #151518cc;
+ text-align: center;
+ font-size: 1.4rem;
+}
+</style>

components/CampusCaptain.vue

@@ -0,0 +1,42 @@
+<template>
+ <RocketCircles>
+ <h3>
+ Campus Captain 🏁
+ <span class="badge">
+ NEW
+ </span>
+ </h3>
+ <p>
+ Become a Campus Captain for your campus, win swags, Coding T-Shirts & cash
+ incentives!
+ </p>
+ <a
+ href="https://codingminutes.com/"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <button class="btn btn-purple">
+ Join as Campus Captain
+ </button>
+ </a>
+ </RocketCircles>
+</template>
+
+<script>
+import RocketCircles from "@/components/RocketCircles.vue";
+
+export default {
+ components: {
+ RocketCircles
+ }
+};
+</script>
+<style>
+.badge {
+ background: linear-gradient(90deg, #e73c3c 0%, #ff5b37 100%);
+ border-radius: 10px;
+ color: white;
+ padding: 0.5rem 0.5rem;
+ font-size: 22px;
+}
+</style>

components/CourseCard.vue

@@ -0,0 +1,111 @@
+<template>
+ <div class="course-card">
+ <div class="backdrop">
+ <img
+ class="course-card-backdrop"
+ :src="require(`@/assets/images/courses_backdrops/${course.backdrop}`)"
+ />
+ </div>
+ <div class="details">
+ <span class="level">
+ <template v-if="course.level == 1">
+ BEGINNER 🔥
+ </template>
+ <template v-if="course.level == 2">
+ INTERMEDIATE 🔥🔥
+ </template>
+ <template v-if="course.level == 3">
+ ADVANCED 🔥🔥🔥
+ </template>
+ </span>
+ <span class="title">{{ course.title }}</span>
+ <span class="mentors">
+ Mentors:
+ {{ instructors.join(", ") }}
+ </span>
+ <div class="review-explore-box">
+ <!-- TODO: Star rating here -->
+ <span class="rating">
+ {{ course.rating }}
+ </span>
+ <NuxtLink :to="'/' + course.slug">
+ <button class="explore-now">
+ Explore now
+ </button>
+ </NuxtLink>
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+import Team from "@/data/team.json";
+
+export default {
+ props: ["course"],
+ data() {
+ const mentors = this.course.mentors;
+ const instructors = mentors.map(mentor => {
+ return Team.find(member => member.username === mentor).name;
+ });
+ return {
+ instructors
+ };
+ }
+};
+</script>
+<style>
+.course-card {
+ margin: 10px;
+ width: 30vw;
+ border-radius: 0.5rem;
+ background: white;
+}
+.course-card .details > span {
+ display: block;
+}
+.course-card .details .level {
+ padding: 0.2rem 1rem;
+ border: 1px solid #eaeaea;
+ width: min-content;
+ white-space: nowrap;
+ border-radius: 1rem;
+ margin-bottom: 1rem;
+}
+.course-card .details .title {
+ color: #151518;
+ font-weight: bold;
+ font-size: 1.5rem;
+}
+.course-card .details .mentors {
+ color: rgba(21, 21, 24, 0.6);
+ font-size: 16px;
+ line-height: 160%;
+ margin-bottom: 1.5rem;
+ font-family: "Nexa Light";
+}
+.course-card .details .rating {
+ font-weight: bold;
+ font-size: 1rem;
+}
+.course-card .review-explore-box {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.course-card-backdrop {
+ width: 100%;
+}
+.course-card .details {
+ padding: 2rem 1.8rem;
+}
+.course-card .explore-now {
+ background: linear-gradient(90deg, #5848ea 0%, #9549eb 100%);
+ border-radius: 1.4rem;
+ height: 2.5rem;
+ border: none;
+ outline: none;
+ color: white;
+ padding: 0.5rem 1.2rem;
+ cursor: pointer;
+}
+</style>

components/CourseDetails.vue

@@ -0,0 +1,118 @@
+<template>
+ <div class="section course-details row">
+ <div class="details">
+ <div class="row heading">
+ <img
+ :src="require(`@/assets/images/${category.icon}`)"
+ v-if="category.icon"
+ v-bind:alt="category.icon"
+ />
+ <h2>
+ {{ category.category }}, <br />
+ {{ course.title }}
+ </h2>
+ </div>
+ <p class="description">
+ {{ course.description }}
+ </p>
+ <div class="pricing row">
+ <span class="current">₹ {{ courseMeta.currentprice }}</span>
+ <span class="oldprice">₹ {{ courseMeta.oldprice }}</span>
+ <span class="discountcoupon btn" v-if="courseMeta.discountcoupon">
+ Use code: {{ courseMeta.discountcoupon }}
+ </span>
+ </div>
+ <div class="udemy-ratings-box row">
+ <a :href="courseMeta.udemy" target="_blank" rel="noopener noreferrer">
+ <button class="btn btn-purple">
+ Enroll now on Udemy
+ </button>
+ </a>
+ <span class="star-rating"> {{ course.rating }} / 5.0 </span>
+ </div>
+ </div>
+ <div class="youtube-video">
+ <iframe
+ :src="course.youtube"
+ title="YouTube video player"
+ frameborder="0"
+ width="100%"
+ height="100%"
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+ allowfullscreen
+ ></iframe>
+ </div>
+ </div>
+</template>
+<script>
+import CourseMeta from "@/data/courses_meta.json";
+
+export default {
+ props: ["course", "category"],
+ data() {
+ const courseMetadata = CourseMeta.find(
+ item => item.slug === this.course.slug
+ );
+ return {
+ courseMeta: courseMetadata
+ };
+ }
+};
+</script>
+<style>
+html,
+button {
+ font-family: "Nexa Bold", "Verdana", "Helvetica", "sans-serif";
+}
+.section {
+ padding: 0.2rem 5vw;
+}
+.course-details {
+ background: #f9f9f9;
+ min-height: 40vh;
+ padding-top: 4rem;
+ padding-bottom: 4rem;
+}
+.course-details .youtube-video {
+ width: 100%;
+ min-height: 25vh;
+}
+.course-details .heading {
+ height: 10vh;
+ gap: 2rem;
+ line-height: 2rem;
+ justify-content: start;
+}
+.course-details .heading h2 {
+ font-size: 30px;
+}
+.course-details .description {
+ font-family: "Nexa Light";
+ font-family: 1.3rem;
+ color: rgba(21, 21, 24, 0.8);
+ width: 75%;
+ margin-top: 3rem;
+}
+.course-details .pricing {
+ width: 60%;
+ margin: 3.5rem 0;
+}
+.course-details .pricing .current {
+ font-size: 25px;
+}
+.course-details .pricing .oldprice {
+ font-size: 25px;
+ color: #b9b9c0;
+ text-decoration: line-through;
+}
+.course-details .pricing .discountcoupon {
+ background: linear-gradient(90deg, #f77b26 0%, #f55a47 100%);
+ border-radius: 3px;
+ color: white;
+ font-size: 1rem;
+}
+.course-details .udemy-ratings-box {
+ width: 75%;
+ color: #151518;
+}
+</style>