From ff7d2cee357a5e65c33978bc692290deab57f417 Mon Sep 17 00:00:00 2001
From: Adeyemi Adetunji <tvnji01@gmail.com>
Date: Fri, 19 Apr 2024 05:24:04 +0100
Subject: [PATCH] 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 <best@classroomio.com>
---
 apps/classroomio-com/.env.example             |   1 -
 apps/classroomio-com/src/app.css              |   4 +
 apps/classroomio-com/src/lib/Faq/Faq.svelte   |  32 +---
 apps/classroomio-com/src/lib/Hero/Hero.svelte |   8 +-
 .../src/lib/Navigation/Navigation.svelte      |   2 +-
 .../src/lib/PageSignupCTA/index.svelte        |  47 +++++
 apps/classroomio-com/src/routes/+page.svelte  |   7 +-
 .../src/routes/blog/+page.svelte              |  18 +-
 .../src/routes/pricing/+layout.ts             |   1 +
 .../src/routes/pricing/+page.svelte           | 177 ++++++++++++++++++
 10 files changed, 251 insertions(+), 46 deletions(-)
 create mode 100644 apps/classroomio-com/src/lib/PageSignupCTA/index.svelte
 create mode 100644 apps/classroomio-com/src/routes/pricing/+layout.ts
 create mode 100644 apps/classroomio-com/src/routes/pricing/+page.svelte

diff --git a/apps/classroomio-com/.env.example b/apps/classroomio-com/.env.example
index 08864129..4dae1251 100644
--- a/apps/classroomio-com/.env.example
+++ b/apps/classroomio-com/.env.example
@@ -1,4 +1,3 @@
-PUBLIC_ENABLE_PRICING=1
 PUBLIC_ENABLE_FAQ=1
 PUBLIC_ENABLE_USERS_COMPANIES=
 PUBLIC_ENABLE_STATS=
\ No newline at end of file
diff --git a/apps/classroomio-com/src/app.css b/apps/classroomio-com/src/app.css
index d2e957b5..84e91325 100644
--- a/apps/classroomio-com/src/app.css
+++ b/apps/classroomio-com/src/app.css
@@ -101,3 +101,7 @@ li {
   padding: none;
   text-align: center;
 }
+
+.hero-bg {
+  background-image: url('/hero-bg.svg');
+}
diff --git a/apps/classroomio-com/src/lib/Faq/Faq.svelte b/apps/classroomio-com/src/lib/Faq/Faq.svelte
index fb0b8f9d..ec239db9 100644
--- a/apps/classroomio-com/src/lib/Faq/Faq.svelte
+++ b/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
-    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="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 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>
+  <PageSignupCTA
+    header="Launch Your Bootcamp Today"
+    subText="Try before you buy. No credit card required."
+    btnLabel="Book a demo"
+    link="classroomio/demo"
+  />
 </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>
diff --git a/apps/classroomio-com/src/lib/Hero/Hero.svelte b/apps/classroomio-com/src/lib/Hero/Hero.svelte
index b06c73ef..091798d7 100644
--- a/apps/classroomio-com/src/lib/Hero/Hero.svelte
+++ b/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>
diff --git a/apps/classroomio-com/src/lib/Navigation/Navigation.svelte b/apps/classroomio-com/src/lib/Navigation/Navigation.svelte
index ddcb6f29..832ce1ef 100644
--- a/apps/classroomio-com/src/lib/Navigation/Navigation.svelte
+++ b/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 -->
diff --git a/apps/classroomio-com/src/lib/PageSignupCTA/index.svelte b/apps/classroomio-com/src/lib/PageSignupCTA/index.svelte
new file mode 100644
index 00000000..cecb366d
--- /dev/null
+++ b/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>
diff --git a/apps/classroomio-com/src/routes/+page.svelte b/apps/classroomio-com/src/routes/+page.svelte
index fe5f7454..2006a0a5 100644
--- a/apps/classroomio-com/src/routes/+page.svelte
+++ b/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}
diff --git a/apps/classroomio-com/src/routes/blog/+page.svelte b/apps/classroomio-com/src/routes/blog/+page.svelte
index 44cd90b5..a686045f 100644
--- a/apps/classroomio-com/src/routes/blog/+page.svelte
+++ b/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>
-  .root {
-    background-image: url('/hero-bg.svg');
-  }
-</style>
+  <PageSignupCTA
+    header="Ready To Launch Your First Training?"
+    subText="It's free to sign up and start getting value out of the product."
+    btnLabel="Sign me up"
+    link="/signup"
+    demo={false}
+  />
+</div>
diff --git a/apps/classroomio-com/src/routes/pricing/+layout.ts b/apps/classroomio-com/src/routes/pricing/+layout.ts
new file mode 100644
index 00000000..d43d0cd2
--- /dev/null
+++ b/apps/classroomio-com/src/routes/pricing/+layout.ts
@@ -0,0 +1 @@
+export const prerender = false;
diff --git a/apps/classroomio-com/src/routes/pricing/+page.svelte b/apps/classroomio-com/src/routes/pricing/+page.svelte
new file mode 100644
index 00000000..14f52528
--- /dev/null
+++ b/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}
+/>