feat: paid certifications on courses

frontend/src/components/CourseCard.vue

@@ -100,9 +100,15 @@
 					<CourseInstructors :instructors="course.instructors" />
 				</div>
 
-				<div class="font-semibold">
+				<div v-if="course.paid_course" class="font-semibold">
 					{{ course.price }}
 				</div>
+				<div
+					v-if="course.paid_certificate"
+					class="text-xs text-ink-blue-3 bg-surface-blue-1 py-0.5 px-1 rounded-md"
+				>
+					{{ __('Paid Certificate') }}
+				</div>
 			</div>
 		</div>
 	</div>

frontend/src/components/CourseCardOverlay.vue

@@ -6,7 +6,7 @@
 			class="rounded-t-md min-h-56 w-full"
 		/>
 		<div class="p-5">
-			<div v-if="course.data.price" class="text-2xl font-semibold mb-3">
+			<div v-if="course.data.paid_course" class="text-2xl font-semibold mb-3">
 				{{ course.data.price }}
 			</div>
 			<router-link
@@ -113,12 +113,21 @@
 						{{ course.data.rating }} {{ __('Rating') }}
 					</span>
 				</div>
+				<div
+					v-if="course.data.paid_certificate"
+					class="flex items-center font-semibold text-ink-gray-9"
+				>
+					<GraduationCap class="h-4 w-4 stroke-2" />
+					<span class="ml-2">
+						{{ __('Paid Certificate') }}
+					</span>
+				</div>
 			</div>
 		</div>
 	</div>
 </template>
 <script setup>
-import { BookOpen, Users, Star } from 'lucide-vue-next'
+import { BookOpen, Users, Star, GraduationCap } from 'lucide-vue-next'
 import { computed, inject } from 'vue'
 import { Button, createResource } from 'frappe-ui'
 import { showToast, formatAmount } from '@/utils/'

frontend/src/components/CourseReviews.vue

@@ -38,7 +38,7 @@
 						<div class="flex mt-2">
 							<Star
 								v-for="index in 5"
-								class="h-5 w-5 text-ink-gray-2 rounded-sm mr-2"
+								class="h-5 w-5 text-ink-gray-1 rounded-sm mr-2"
 								:class="
 									index <= Math.ceil(review.rating)
 										? 'fill-orange-500'