feat: dashboard billing (#193)

* feat: move plans into sharable json

* remove unused code

* update pnpm lock

* update plans.json

* implement early adopter pricing

* docs: update meta title and description

* Finished the UI for upgrading plans

* Updated the pricing plans

* Updated the cards ui

* use relative import

* improve styling of upgrade plan card

* styling improvements, lemonsqueezy setup

* trigger lemonsqueezy payment and add webhook

* update pnpm lock

* add logout route

* feat: complete billing functionality

* generate lock file

* make crypto false on browser

* feat: adding upgrade prompts to org

* chore: add upgrade icon to upload video

* feat: add upgrade prompt to certificate and settings

* feat: implement onboarding setup page (#229)

* working on the onboarding setup

* working on the onboarding page

* Almost done with the onboarding UI

* finished the UI of the onBoarding setup

* finished the UI of the onBoarding setup

* Implementing the functions to carryout the logic of updating the UI onmount if a user has carried out a certain step or not

* Implementing the functions to carryout the logic of updating the UI onmount if a user has carried out a certain step or not

* making some chnages

* finished the onBoarding task

* updated some logic

* Removed the uneeded svg from the static folder

* fixed isCoursePublished not returning a boolean

* improved the setup link protection

* chore: make menuItems reactive

* improve formatting

* format supabase queries

---------

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

* revamp setup

* improve the upgrade experience

* migration

* feat: add lemonsqueezy customer portal

---------

Co-authored-by: emmanuel <chifez1@gmail.com>

apps/classroomio-com/src/lib/Faq/Faq.svelte

@@ -2,29 +2,29 @@
   import { faqs } from './faqs';
 </script>
 
-<div class="mt-[5%] mb-[15%]">
-  <header class="text-center mb-[5%] px-[8%]">
-    <h1 class="mt-2 text-4xl lg:text-4xl font-medium tracking-tight text-gray-900">
+<div class="mb-[15%] mt-[5%]">
+  <header class="mb-[5%] px-[8%] text-center">
+    <h1 class="mt-2 text-4xl font-medium tracking-tight text-gray-900 lg:text-4xl">
       Questions & Answers
     </h1>
     <p
-      class="lg:px-[20%] mt-4 text-lg lg:text-xl text-gray-600 font-normal tracking-normal lg:tracking-wide"
+      class="mt-4 text-lg font-normal tracking-normal text-gray-600 lg:px-[20%] lg:text-xl lg:tracking-wide"
     >
       Can’t find the answer you’re looking for?
-      <a class="text-blue-700 font-semibold" href="mailto:help@classroomio.com" target="_blank"
+      <a class="font-semibold text-blue-700" href="mailto:help@classroomio.com" target="_blank"
         >Shoot us an email</a
       > and we’ll get back to you ASAP.
     </p>
   </header>
 
-  <div class="grid grid-cols-1 lg:grid-cols-3 gap-10 lg:gap-20 lg:px-[13%] mt-[20%] lg:m-0">
+  <div class="mt-[20%] grid grid-cols-1 gap-10 lg:m-0 lg:grid-cols-3 lg:gap-20 lg:px-[13%]">
     {#each faqs as faq}
       <div class="max-w-[100%] px-6 lg:p-0">
         <h1 class="text:md lg:text-md font-semibold leading-8 text-gray-800">
           {faq.question}
         </h1>
         <p
-          class="mt-2 text:md lg:text-md font-light leading-7 lg:leading-9 text-gray-600 tracking-wide"
+          class="text:md lg:text-md mt-2 font-light leading-7 tracking-wide text-gray-600 lg:leading-9"
         >
           {faq.answer}
         </p>
@@ -33,16 +33,16 @@
   </div>
 
   <div
-    class="floating relative mt-[10%] grad w-[100%] h-[61vh] lg:h-[54vh] flex items-center flex-col justify-center lg:w-[70%] mx-auto py-[12%] px-[6%] text-center shadow-2xl lg:rounded-3xl"
+    class="floating grad relative mx-auto mt-[10%] flex h-[61vh] w-[100%] flex-col items-center justify-center px-[6%] py-[12%] text-center shadow-2xl lg:h-[54vh] lg:w-[70%] lg:rounded-3xl"
   >
-    <h1 class="mt-3 lg:mt-2 text-3xl lg:text-4xl font-bold font-display tracking-tight text-white">
-      Supercharge your Classroom Today
+    <h1 class="font-display mt-3 text-3xl font-bold tracking-tight text-white lg:mt-2 lg:text-4xl">
+      Launch Your Bootcamp Today
     </h1>
-    <p class="mt-6 text-xl lg:text-lg text-gray-300">
+    <p class="mt-6 text-xl text-gray-300 lg:text-lg">
       Try before you buy. No credit card required.
     </p>
     <button
-      class="font-semibold text-md lg:text-lg text-gray-900 bg-white px-6 lg:px-7 py-4 lg:py-3 rounded-md mt-10"
+      class="text-md mt-10 rounded-md bg-white px-6 py-4 font-semibold text-gray-900 lg:px-7 lg:py-3 lg:text-lg"
       data-cal-config={"{'layout':'month_view'}"}
       data-cal-link="classroomio/demo"
     >