feat: move pricing section to /pricing (#266)

* feat: On landing page move pricing section to its own route /pricing

* increase font size

* make card more modular

* update text

---------

Co-authored-by: Rotimi Best <[email protected]>

apps/classroomio-com/.env.example

@@ -1,4 +1,3 @@
-PUBLIC_ENABLE_PRICING=1
 PUBLIC_ENABLE_FAQ=1
 PUBLIC_ENABLE_USERS_COMPANIES=
 PUBLIC_ENABLE_STATS=

apps/classroomio-com/src/app.css

@@ -101,3 +101,7 @@ li {
   padding: none;
   text-align: center;
 }
+
+.hero-bg {
+  background-image: url('/hero-bg.svg');
+}

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

@@ -1,5 +1,6 @@
 <script>
   import { faqs } from './faqs';
+  import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
 </script>
 
 <div class="mb-[15%] mt-[5%]">
@@ -32,29 +33,10 @@
     {/each}
   </div>
 
-  <div
+  <PageSignupCTA
-    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"
+    header="Launch Your Bootcamp Today"
-  >
+    subText="Try before you buy. No credit card required."
-    <h1 class="font-display mt-3 text-3xl font-bold tracking-tight text-white lg:mt-2 lg:text-4xl">
+    btnLabel="Book a demo"
-      Launch Your Bootcamp Today
+    link="classroomio/demo"
-    </h1>
+  />
-    <p class="mt-6 text-xl text-gray-300 lg:text-lg">
-      Try before you buy. No credit card required.
-    </p>
-    <button
-      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"
-    >
-      Book a demo
-    </button>
 </div>
-</div>
-
-<style>
-  .grad {
-    background: rgb(51, 16, 71);
-    background: radial-gradient(circle at 50% 100%, rgba(51, 16, 71, 1) 1%, rgba(2, 0, 36, 1) 100%);
-    background-size: cover;
-  }
-</style>

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

@@ -30,7 +30,7 @@
   });
 </script>
 
-<div class="root relative border-b-2 text-center bg-[#F5F8FE] h-full mt-[5%] w-full">
+<div class="hero-bg relative border-b-2 text-center bg-[#F5F8FE] h-full mt-[5%] w-full">
   <div class="pt-24 w-full">
     <div class="mb-10 ml-[5%] lg:ml-0 flex w-full items-center justify-start lg:justify-center">
       <a
@@ -231,9 +231,3 @@
     {/if}
   </div>
 </div>
-
-<style>
-  .root {
-    background-image: url('/hero-bg.svg');
-  }
-</style>

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

@@ -104,7 +104,7 @@
         <li class="text-gray-800 font-semibold text-sm cursor-pointer">More features</li>
       </a> -->
       <!-- Pricing -->
-      <a href="/#pricing">
+      <a href="/pricing">
         <li class="text-gray-800 font-semibold text-sm cursor-pointer">Pricing</li>
       </a>
       <!-- Docs -->

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

@@ -0,0 +1,47 @@
+<script>
+  export let header = '';
+  export let subText = '';
+  export let btnLabel = '';
+  export let link = '';
+  export let demo = true;
+</script>
+
+<div
+  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"
+>
+  <div>
+    <h1 class="font-display mt-3 text-3xl font-bold tracking-tight text-white lg:mt-2 lg:text-4xl">
+      {header}
+    </h1>
+    <p class="mt-6 text-xl text-gray-300 lg:text-lg">
+      {subText}
+    </p>
+  </div>
+
+  {#if demo}
+    <button
+      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"
+    >
+      {btnLabel}
+    </button>
+  {:else}
+    <a
+      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"
+      href={link}
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+    >
+      {btnLabel}
+    </a>
+  {/if}
+</div>
+
+<style>
+  .grad {
+    background: rgb(51, 16, 71);
+    background: radial-gradient(circle at 50% 100%, rgba(51, 16, 71, 1) 1%, rgba(2, 0, 36, 1) 100%);
+    background-size: cover;
+  }
+</style>

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

@@ -1,13 +1,12 @@
 <script>
   import Hero from '$lib/Hero/Hero.svelte';
   import Body from '$lib/Body/Body.svelte';
-  import Pricing from '$lib/Pricing/Pricing.svelte';
   import Faq from '$lib/Faq/Faq.svelte';
   import StudentDashboard from '$lib/StudentDashboard/StudentDashboard.svelte';
   import MoreFeatures from '$lib/MoreFeatures/MoreFeatures.svelte';
   import Testimonial from '$lib/Testimonial/Testimonial.svelte';
 
-  import { PUBLIC_ENABLE_PRICING, PUBLIC_ENABLE_FAQ } from '$env/static/public';
+  import { PUBLIC_ENABLE_FAQ } from '$env/static/public';
 </script>
 
 <Hero />
@@ -16,9 +15,7 @@
 <Testimonial />
 <MoreFeatures />
 
-{#if PUBLIC_ENABLE_PRICING}
+
-  <Pricing />
-{/if}
 {#if PUBLIC_ENABLE_FAQ}
   <Faq />
 {/if}

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

@@ -1,6 +1,8 @@
 <script>
   import Chip from '$lib/Chip/Chip.svelte';
   import { formatDate } from '$lib/utils/formatDate';
+  import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
+
   export let data;
 </script>
 
@@ -10,7 +12,7 @@
 
 <div class="mt-[10%] md:mt-16">
   <header
-    class="root lg:min-h-[30rem] pt-24 pb-16 w-full flex flex-col items-center justify-center text-center border-b border-slate-100"
+    class="hero-bg lg:min-h-[30rem] pt-24 pb-16 w-full flex flex-col items-center justify-center text-center border-b border-slate-100"
   >
     <h1
       class="mx-auto text-4xl md:text-7xl lg:text-6xl font-bold text-slate-900 flex flex-col items-center"
@@ -56,10 +58,12 @@
       {/each}
     </ul>
   </div>
-</div>
 
-<style>
+  <PageSignupCTA
-  .root {
+    header="Ready To Launch Your First Training?"
-    background-image: url('/hero-bg.svg');
+    subText="It's free to sign up and start getting value out of the product."
-  }
+    btnLabel="Sign me up"
-</style>
+    link="/signup"
+    demo={false}
+  />
+</div>

apps/classroomio-com/src/routes/pricing/+layout.ts

@@ -0,0 +1 @@
+export const prerender = false;

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

@@ -0,0 +1,177 @@
+<script>
+  import Checkmark from 'carbon-icons-svelte/lib/Checkmark.svelte';
+  import PLANS from 'shared-constants/src/plans/data.json';
+  import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
+
+  let isYearlyPlan = false;
+
+  function toggleIsYearlyPlan() {
+    isYearlyPlan = !isYearlyPlan;
+  }
+</script>
+
+<section class="mt-[10%] md:mt-16">
+  <header
+    class="hero-bg lg:min-h-[30rem] pt-24 pb-16 w-full flex flex-col items-center justify-center text-center border-b border-slate-100"
+  >
+    <h1
+      class="mx-auto text-4xl md:text-7xl lg:text-6xl font-bold text-slate-900 flex flex-col items-center"
+    >
+      <span>There is room for</span>
+      <span class="text-blue-700 relative">Everyone.</span>
+    </h1>
+    <p class="w-[90%] md:w-[60%] text-center font-normal text-lg text-slate-700 mt-10 lg:mt-7">
+      You get a customizable LMS, AI integration for productive educators and many more...
+    </p>
+    <div class="relative mt-10 flex items-center rounded-[30px] border-[2px] p-[2px] 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>
+  </header>
+  <div class="flex flex-col items-center justify-center px-[6%]">
+    <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-md 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-md 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-md 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-md 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-md 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-md 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-md 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-md 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-md 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>
+
+<PageSignupCTA
+  header="Launch Your First Training in Minutes"
+  subText="Try before you buy. No credit card required."
+  btnLabel="Sign up"
+  link="/signup"
+  demo={false}
+/>