chore: landing page improvements

apps/classroomio-com/src/app.css

@@ -105,3 +105,9 @@ li {
 .hero-bg {
   background-image: url('/hero-bg.svg');
 }
+
+.cio-bg-blue {
+  background: rgb(2, 51, 189);
+  background-size: cover;
+  background: radial-gradient(circle at 50% 100%, rgba(2, 51, 189, 1) 1%, rgb(4, 2, 56) 100%);
+}

apps/classroomio-com/src/lib/PageSignupCTA/index.svelte

@@ -40,8 +40,11 @@
 
 <style>
   .grad {
-    background: rgb(51, 16, 71);
+    /* background: rgb(2, 51, 189);
-    background: radial-gradient(circle at 50% 100%, rgba(51, 16, 71, 1) 1%, rgba(2, 0, 36, 1) 100%);
+    background: radial-gradient(circle at 50% 100%, rgba(2, 51, 189, 1) 1%, rgb(4, 2, 56) 100%); */
     background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-image: url('https://brand.cdn.clsrio.com/cta-bg.png');
   }
 </style>

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

@@ -1,168 +0,0 @@
-<script>
-  import Checkmark from 'carbon-icons-svelte/lib/Checkmark.svelte';
-  import PLANS from 'shared/src/plans/data.json';
-
-  let isYearlyPlan = false;
-
-  function toggleIsYearlyPlan() {
-    isYearlyPlan = !isYearlyPlan;
-  }
-</script>
-
-<section id="pricing" class="py-[12%]">
-  <div class="flex flex-col items-center justify-center px-[6%]">
-    <div class="mb-[3%] text-center">
-      <h1 id="pricing" class="text-base font-semibold tracking-wide text-blue-700">Pricing</h1>
-      <h2 class="my-5 text-3xl font-semibold tracking-tight text-gray-900 lg:my-4 lg:text-4xl">
-        For teams and individuals
-      </h2>
-      <p class="mt-4 text-lg tracking-normal text-gray-500 lg:tracking-wide">
-        Customizable LMS, AI integration for productive educators and many more...
-      </p>
-    </div>
-
-    <div
-      class="relative mt-10 flex items-center rounded-[30px] border-[2px] p-[2px] lg:mt-0 lg:scale-100"
-    >
-      <button
-        style="background-color: {isYearlyPlan ? 'initial' : '#1D4EE2'}; color: {isYearlyPlan
-          ? '#5e636b'
-          : '#fff'}"
-        class="rounded-[30px] bg-blue-700 px-3 py-1 text-xs text-white lg:px-4 lg:py-2"
-        on:click={toggleIsYearlyPlan}>Monthly</button
-      >
-      <button
-        style="background-color: {isYearlyPlan ? '#1D4EE2' : ''}; color: {isYearlyPlan
-          ? '#fff'
-          : '#5e636b'}"
-        class="rounded-[30px] px-3 py-1 text-xs text-white lg:px-4 lg:py-2"
-        on:click={toggleIsYearlyPlan}>Annually</button
-      >
-      <div
-        class="absolute right-[-40%] top-[-85%] scale-[90%] rounded-full bg-[#006600] px-3.5 py-1.5 text-xs text-white lg:right-[-43%] lg:top-[-75%] lg:scale-100"
-      >
-        Save 2 months
-      </div>
-    </div>
-
-    <div class="isolate mt-10 grid grid-cols-1 gap-10 lg:grid-cols-3">
-      <!-- Card 1 -->
-      <div class="max-w-xl rounded-3xl p-8 ring-1 ring-gray-200 lg:max-w-sm xl:p-9">
-        <p class="text-lg font-semibold leading-8 text-gray-900 lg:text-xl">
-          {PLANS.BASIC.NAME}
-        </p>
-        <p class="lg:text-base mt-4 text-sm font-light leading-6 text-gray-500 lg:leading-6">
-          {PLANS.BASIC.DESCRIPTION}
-        </p>
-        <p class="mt-6 flex items-baseline gap-x-1 text-4xl font-medium lg:text-4xl">
-          ${PLANS.BASIC.PRICE.MONTHLY}
-          <!-- <sub class="text-base">/mo</sub> -->
-        </p>
-        <a
-          class="text-base mt-10 block w-full rounded-md bg-slate-900 py-3 text-center font-medium text-white hover:bg-slate-700 lg:rounded-md lg:py-3 lg:text-lg lg:font-semibold"
-          href={PLANS.BASIC.CTA.LINK}
-          target="_blank"
-        >
-          {PLANS.BASIC.CTA.LABEL}
-        </a>
-        <ul class="mt-8 space-y-2 text-sm text-gray-600 lg:space-y-5 xl:mt-10">
-          {#each PLANS.BASIC.FEATURES as feature}
-            <li class="flex items-center">
-              <Checkmark
-                size={24}
-                fill="#1D4EE2"
-                class="mr-2 scale-[70%] lg:mr-3 lg:scale-[100%]"
-              />
-              {feature}
-            </li>
-          {/each}
-        </ul>
-      </div>
-
-      <!-- Card 2 -->
-      <div class="max-w-xl rounded-3xl bg-gray-900 p-8 lg:max-w-lg xl:p-9">
-        <p class="text-lg font-semibold leading-8 text-white lg:text-xl">
-          {PLANS.EARLY_ADOPTER.NAME}
-        </p>
-        <p class="lg:text-base mt-4 text-sm font-light leading-6 text-white lg:leading-6">
-          {PLANS.EARLY_ADOPTER.DESCRIPTION}
-        </p>
-        <p class="mt-6 flex items-baseline gap-x-1 text-4xl font-medium text-white lg:text-4xl">
-          ${isYearlyPlan ? PLANS.EARLY_ADOPTER.PRICE.YEARLY : PLANS.EARLY_ADOPTER.PRICE.MONTHLY}
-          <!-- <sub class="text-base">/mo</sub> -->
-        </p>
-        <a
-          class="text-base mt-10 block w-full rounded-md bg-white py-3 text-center font-medium text-slate-900 hover:bg-indigo-50 lg:rounded-md lg:py-3 lg:text-lg lg:font-semibold"
-          href={PLANS.EARLY_ADOPTER.CTA.LINK}
-          target="_blank"
-        >
-          {PLANS.EARLY_ADOPTER.CTA.LABEL}
-        </a>
-        <ul class="mt-8 space-y-3 text-sm font-light text-white lg:space-y-5 xl:mt-10">
-          {#each PLANS.EARLY_ADOPTER.FEATURES as features}
-            <li class="flex items-center">
-              <Checkmark size={24} fill="#fff" class="mr-2 scale-[70%] lg:mr-3 lg:scale-[100%]" />
-              {features}
-            </li>
-          {/each}
-        </ul>
-      </div>
-
-      <!-- Card 3 -->
-      <div class="max-w-xl rounded-3xl p-8 ring-1 ring-gray-200 lg:max-w-sm xl:p-9">
-        <p class="text-lg font-semibold leading-8 text-gray-900 lg:text-xl">
-          {PLANS.ENTERPRISE.NAME}
-        </p>
-        <p class="lg:text-base mt-4 text-sm font-light leading-6 text-gray-500 lg:leading-6">
-          {PLANS.ENTERPRISE.DESCRIPTION}
-        </p>
-        <p class="mt-6 flex items-baseline gap-x-1 text-xl font-medium lg:mt-6 lg:text-xl">
-          Request Pricing
-        </p>
-        <button
-          class="text-base mt-10 w-full rounded-md bg-slate-900 py-3 font-medium text-white hover:bg-slate-700 lg:rounded-md lg:py-3 lg:text-lg lg:font-semibold"
-          data-cal-config={"{'layout':'month_view'}"}
-          data-cal-link="classroomio/enterprise"
-        >
-          {PLANS.ENTERPRISE.CTA.LABEL}
-        </button>
-
-        <ul class="mt-8 space-y-2 text-sm text-gray-600 lg:space-y-5 xl:mt-10">
-          {#each PLANS.ENTERPRISE.FEATURES as features}
-            <li class="flex items-center">
-              <Checkmark
-                size={24}
-                fill="#1D4EE2"
-                class="mr-2 scale-[70%] lg:mr-3 lg:scale-[100%]"
-              />
-              {features}
-            </li>
-          {/each}
-        </ul>
-      </div>
-    </div>
-
-    <!-- <div
-      class="flex flex-col lg:flex-row items-start lg:items-center mx-auto lg:mx-10 mt-[5%] border-[1px] rounded-[30px] py-[10%] lg:py-[5%] px-[10px] lg:px-[30px] lg:w-full md:max-w-[550px] lg:max-w-full"
-    >
-      <div class="mr-5 pl-5">
-        <h2
-          class="text-base lg:text-xl font-semibold font-display leading-8 tracking-wide lg:tracking-tight text-blue-700 mb-0 lg:mb-4"
-        >
-          Hobby
-        </h2>
-        <p
-          class="m-0 lg:mt-1 text-base leading-7 lg:leading-6 text-gray-600"
-        >
-          For personal use. Hobby plan is free for up to 5 courses forever, no
-          credit Card required.
-        </p>
-      </div>
-        <button
-          class="font-semibold text-base lg:text-base text-white leading-5 mt-5 lg:m-0 p-4 lg:py-5 ml-5 bg-blue-700 rounded-lg lg:rounded-md w-[70%] lg:w-full"
-        >
-          Create a free account
-        </button>
-    </div> -->
-  </div>
-</section>

apps/classroomio-com/src/routes/pricing/+page.svelte

@@ -85,7 +85,7 @@
       </div>
 
       <!-- Card 2 -->
-      <div class="max-w-xl rounded-3xl bg-gray-900 p-8 lg:max-w-lg xl:p-9">
+      <div class="cio-bg-blue max-w-xl rounded-3xl p-8 lg:max-w-lg xl:p-9">
         <p class="text-lg font-semibold leading-8 text-white lg:text-xl">
           {PLANS.EARLY_ADOPTER.NAME}
         </p>

apps/dashboard/src/app.postcss

@@ -149,6 +149,11 @@ code {
 .bx--list-box__menu-item__option {
   height: fit-content !important;
 }
+.cio-bg-blue {
+  background: rgb(2, 51, 189);
+  background-size: cover;
+  background: radial-gradient(circle at 50% 100%, rgba(2, 51, 189, 1) 1%, rgb(4, 2, 56) 100%);
+}
 
 @media screen and (max-width: 457px) {
   .org-slot {

apps/dashboard/src/lib/components/Upgrade/Modal.svelte

@@ -151,7 +151,7 @@
         {#each planNames as planName}
           <div
             class="max-w-xl rounded-xl {planName === 'EARLY_ADOPTER' &&
-              'bg-primary-900'} p-4 ring-1 ring-gray-200 lg:max-w-sm"
+              'cio-bg-blue'} p-4 ring-1 ring-gray-200 lg:max-w-sm"
           >
             <p
               class="mb-2 text-lg font-semibold leading-8 {planName === 'EARLY_ADOPTER'