feat: add 4 certificate templates (#295)

* add cloud translation api package

* feat: Script that auto generates translations for other languages

* add comments

* fix: broken translation

* improve translation

* update locck file

* clean up

* all round trasnlations check

* checkpoint

* finish up

* move to dev dependencies

* fix vercel build error

* translations fix

* - add documentation
- translation bug fix

* quick adjust

* PR Fixes

* add new line

* update docs

* checkpoint

* feat: redesign & addition of certificates

* text color update

* patterned width fix

* "student-name" class remove

* checkpoint

* PR Fix

* quick fix

* PR Fixes

* update certificate ready page for students

* PR Fixes

* quick cleanup

* move fetchCourses into .ts file

* feat: give students access to certificates only after completing course

* checkpoint

* height fix

* Merge branch 'main' of https://github.com/rotimi-best/classroomio into classroomio-issue-272

* Fix; merge PR Fix

* fix: width of plain & professional certs

* PR Fix

* feat: add translation

* handle error when trying to download a certificate

* add fetchExploreCourses

* fix: requested reviews

* review fixes checkpoint

* replace the certificate background

* height fix for patterned certififcates

* fix more bugs

* rename schema

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/dashboard/src/routes/courses/[id]/certificates/+page.svelte

@@ -13,12 +13,12 @@
   import StudentCertificate from '$lib/components/Course/components/Ceritficate/StudentCertificate/Index.svelte';
   import { t } from '$lib/utils/functions/translations';
 
-  export let courseId: string = '';
+  export let data;
 </script>
 
 <IssueCertificateModal />
 
-<CourseContainer bind:courseId>
+<CourseContainer bind:courseId={data.courseId}>
   <PageNav title={$t('course.navItem.certificates.title')} disableSticky={true}>
     <slot:fragment slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>
@@ -32,11 +32,11 @@
     </slot:fragment>
   </PageNav>
 
-  <PageBody className="w-full mx-0" padding="px-3">
+  <PageBody className="w-full mx-0" padding="px-3 pb-10">
     <RoleBasedSecurity allowedRoles={[1, 2]}>
       <Design />
     </RoleBasedSecurity>
-    <RoleBasedSecurity allowedRoles={[3]}>
+    <RoleBasedSecurity onlyStudent>
       <StudentCertificate />
     </RoleBasedSecurity>