feat: teachers page (#275)

* feat: add a teacher route

* refactor

* PR Fixes

* text-md fix

* remove root

* fixes

* update content

* Update Register behavior

---------

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

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

@@ -2,6 +2,7 @@
   import Chip from '$lib/Chip/Chip.svelte';
   import { formatDate } from '$lib/utils/formatDate';
   import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
+  import PageHeader from '$lib/PageHeader/PageHeader.svelte';
 
   export let data;
 </script>
@@ -10,10 +11,8 @@
   <title>Blog | ClassroomIO</title>
 </svelte:head>
 
-<div 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"
-  >
+<section>
+  <PageHeader className="flex flex-col items-center justify-center text-center">
     <h1
       class="mx-auto text-4xl md:text-7xl lg:text-6xl font-bold text-slate-900 flex flex-col items-center"
     >
@@ -23,7 +22,7 @@
     <p class="w-[90%] md:w-[60%] text-center font-normal text-lg text-slate-700 mt-10 lg:mt-7">
       Get the latest news from ClassroomIO, including product updates, team announcements and more!
     </p>
-  </header>
+  </PageHeader>
   <div class="w-full flex items-center justify-center">
     <ul class="flex flex-col items-start justify-start gap-2 w-[90%] md:w-[50%]">
       {#each data.posts as post}
@@ -66,4 +65,4 @@
     link="/signup"
     demo={false}
   />
-</div>
+</section>

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

@@ -1,15 +1,15 @@
 <script>
-  export let data;
+  import PageHeader from '$lib/PageHeader/PageHeader.svelte';
 
-  let { friends } = data;
+  export let data;
 </script>
 
 <svelte:head>
   <title>Our Open-source Friends | ClassroomIO</title>
 </svelte:head>
 
-<div class=" mt-[10%] md:mt-16">
-  <header class="pt-24 pb-16 w-full flex flex-col items-center text-center">
+<section>
+  <PageHeader className="flex flex-col items-center justify-center text-center">
     <h1
       class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] text-slate-900 items-center"
     >
@@ -19,9 +19,10 @@
       In ClassroomIO, we are committed to building a commercial open source company and here are
       some of our friends on the same mission.
     </p>
-  </header>
+  </PageHeader>
+
   <ul role="list" class="m-4 mt-12 grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
-    {#each friends as friend}
+    {#each data.friends as friend}
       <li
         class="overflow-hidden rounded-md border border-gray-200 flex flex-col justify-between py-6"
       >
@@ -41,7 +42,7 @@
             class="inline-block w-full"
           >
             <button
-              class="font-semibold text-md text-white bg-gray-800 hover:bg-gray-900 hover:shadow-xl transition-all delay-100 px-4 py-3 rounded-md"
+              class="font-semibold text-base text-white bg-gray-800 hover:bg-gray-900 hover:shadow-xl transition-all delay-100 px-4 py-3 rounded-md"
             >
               Learn more
             </button>
@@ -50,4 +51,4 @@
       </li>
     {/each}
   </ul>
-</div>
+</section>

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

@@ -2,6 +2,7 @@
   import Checkmark from 'carbon-icons-svelte/lib/Checkmark.svelte';
   import PLANS from 'shared/src/plans/data.json';
   import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
+  import PageHeader from '$lib/PageHeader/PageHeader.svelte';
 
   let isYearlyPlan = false;
 
@@ -14,10 +15,8 @@
   <title>Pricing | ClassroomIO</title>
 </svelte:head>
 
-<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"
-  >
+<section>
+  <PageHeader className="flex flex-col items-center justify-center text-center">
     <h1
       class="mx-auto text-4xl md:text-7xl lg:text-6xl font-bold text-slate-900 flex flex-col items-center"
     >
@@ -48,7 +47,8 @@
         Save 2 months
       </div>
     </div>
-  </header>
+  </PageHeader>
+
   <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 -->
@@ -56,7 +56,7 @@
         <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">
+        <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">
@@ -64,7 +64,7 @@
           <!-- <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"
+          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"
         >
@@ -89,7 +89,7 @@
         <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">
+        <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">
@@ -97,7 +97,7 @@
           <!-- <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"
+          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"
         >
@@ -118,14 +118,14 @@
         <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">
+        <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-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"
+          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"
         >
@@ -152,19 +152,19 @@
   >
     <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"
+        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-md leading-7 lg:leading-6 text-gray-600"
+        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-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"
+        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>

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

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

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

@@ -0,0 +1,208 @@
+<script lang="ts">
+  import { slide } from 'svelte/transition';
+  import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
+  import PageHeader from '$lib/PageHeader/PageHeader.svelte';
+
+  const whyStart = [
+    {
+      src: '/teach/teach-from-anywhere.svg',
+      header: 'Fully Online; Teach from anywhere',
+      subText:
+        ' Facilitate a subject from the comfort of your space, engaging students from highly diverse background'
+    },
+    {
+      src: '/teach/get-paid.svg',
+      header: 'Get paid extra commission',
+      subText:
+        'Get paid for the course you design and earn extra comission based on course perfomance'
+    },
+    {
+      src: '/teach/inspire-learners.svg',
+      header: 'Inspire learners',
+      subText:
+        'Your opportunity to inspire thousands of learners to achieve dreams and academic pursue exellence'
+    }
+  ];
+
+  const steps = [
+    {
+      title: 'Sign up',
+      subText: 'Create a free account on our platform by going to classroomio.com/signup'
+    },
+    {
+      title: 'Record course & Plan exercise',
+      subText: 'Prepare your content however you want and then upload them onto our platform.'
+    },
+    {
+      title: 'Launch your course',
+      subText: 'Polish your course, make sure it is ready for students. Then publish it.'
+    },
+    {
+      title: 'Start making sales',
+      subText:
+        'Share your course with your audience and on social media and start earning money on the courses you create'
+    }
+  ];
+
+  let faqs = [
+    {
+      question: 'What kind of tutors does ClassroomIO look for?',
+      answer:
+        'We are looking for all kinds of tutors. The most important thing is that you have some experience teaching and you have proven track record of excellent communication',
+      showAnswer: false
+    },
+    {
+      question: 'What equipment do I need to teach on ClassroomIO?',
+      answer: 'You just need internet access and a laptop.',
+      showAnswer: false
+    },
+    {
+      question: 'What happens after I apply?',
+      answer:
+        'We will get your application and review it. You should get a response from us within 2-5 working days depending on the volume of applications',
+      showAnswer: false
+    },
+    {
+      question: 'How much can I earn?',
+      answer:
+        'That depends on how much your course sells for and how many students buy your course. Your income is limitless, you can keep making money while you sleep.',
+      showAnswer: false
+    }
+  ];
+
+  function toggleAnswer(index: number) {
+    faqs[index].showAnswer = !faqs[index].showAnswer;
+  }
+</script>
+
+<svelte:head>
+  <title>Teach | ClassroomIO</title>
+</svelte:head>
+
+<section>
+  <PageHeader className="flex items-center justify-evenly px-5 flex-wrap text-left">
+    <div>
+      <h1 class="text-5xl font-bold">Teach with us</h1>
+      <p class="my-5 lg:w-[77%] lg:text-left text-center">
+        With ClassroomIO, you can make side income while teaching the subject you love
+      </p>
+
+      <a
+        href="/teach/register"
+        target="_blank"
+        class="w-full block text-center lg:w-[30%] py-3 text-base text-white rounded-md bg-[#1D4ED8]"
+      >
+        Register
+      </a>
+    </div>
+
+    <div class=" ">
+      <img src="/teach/teacher-hero.png" alt="" class="w-full" />
+    </div>
+  </PageHeader>
+
+  <div class="mt-10 mx-auto">
+    <div class="px-[10%] pb-10 border-b border-slate-100">
+      <h1 class="text-4xl pb-28 text-center font-bold flex gap-3 justify-center items-center">
+        Why you should teach with us? <img src="/teach/star.svg" alt="" />
+      </h1>
+
+      <div class="flex flex-wrap justify-center lg:justify-between mt-10">
+        {#each whyStart as why}
+          <figure
+            class="flex gap-3 flex-col justify-center items-center px-2 w-full h-full max-w-[250px] max-h-[380px] text-center"
+          >
+            <img src={why.src} alt="" class="w-[80px] h-[80px]" />
+            <figcaption>
+              <h1 class="font-bold text-base">{why.header}</h1>
+              <p class="text-sm mt-1">
+                {why.subText}
+              </p>
+            </figcaption>
+          </figure>
+        {/each}
+      </div>
+    </div>
+
+    <div class="px-[10%] mt-10 py-10">
+      <h1 class="text-4xl mb-28 text-center font-bold flex gap-3 justify-center items-center">
+        How to get started <img src="/teach/thumbs-up.svg" alt="" />
+      </h1>
+
+      <div class="flex flex-wrap justify-between gap-y-10 mx-auto mt-5">
+        {#each steps as step, i}
+          <div class="lg:max-w-[40%] px-10 py-5">
+            <h1 class="font-bold text-2xl">
+              <span class="px-2 py-1 mr-3 bg-[#F7F7F7] rounded-md">{i + 1}</span>
+              {step.title}
+            </h1>
+            <p class="text-base text-gray-600 mt-5">
+              {step.subText}
+            </p>
+          </div>
+        {/each}
+      </div>
+      <div class="flex justify-center px-[5%] mt-3">
+        <a
+          href="/teach/register"
+          target="_blank"
+          class="w-full lg:max-w-[20%] py-3 text-base text-white rounded-md bg-[#1D4ED8] text-center"
+        >
+          Get Started
+        </a>
+      </div>
+    </div>
+
+    <div class="px-[12%] bg-[#F5F8FE] my-10 py-12 h-[75%] lg:h-[80%]">
+      <h1 class="text-2xl text-center font-bold flex gap-3 justify-center items-center">
+        Word from our fufilled facilitators
+      </h1>
+
+      <div
+        class="mt-10 w-[50%] mx-auto border shadow-sm bg-white rounded-md text-center py-6 relative before:w-[4.5%] before:absolute before:left-0 before:top-0 before:h-full before:bg-[#0233BD] before:rounded-tl-md before:rounded-bl-md"
+      >
+        <h1 class="text-base font-medium leading-5 w-[77%] mx-auto">
+          With ClassroomIO, I am training over 100 students. I am making more money than expected
+          with little effort and my students are happy. Love the product
+        </h1>
+        <div class="flex flex-row gap-4 justify-center items-center mt-3">
+          <img src="/teach/user-profile.png" alt="" class="w-8" />
+          <p class="text-sm">
+            <span class="font-semibold mr-2"> Bilik Diana </span> English tutor
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="px-[10%] lg:px-[15%] lg:max-w-[65%] my-10 mt-10 mx-auto">
+      <h1 class="text-2xl text-center font-bold">Frequently asked questions</h1>
+
+      <div class="mt-10">
+        {#each faqs as faq, index}
+          <div class="border-b border-black lg:px-3 pt-1 pb-2">
+            <div>
+              <button
+                type="button"
+                class="w-full font-medium text-lg my-2 flex justify-between"
+                on:click={() => toggleAnswer(index)}
+              >
+                {faq.question} <span>{faq.showAnswer ? '-' : '+'}</span>
+              </button>
+            </div>
+            {#if faq.showAnswer}
+              <div transition:slide class="text-base font-light leading-5">{faq.answer}</div>
+            {/if}
+          </div>
+        {/each}
+      </div>
+    </div>
+
+    <PageSignupCTA
+      header="Skyrocket Your Teaching Career"
+      subText="Don't wait, let's get you started."
+      btnLabel="Register"
+      link="/teach/register"
+      demo={false}
+    />
+  </div>
+</section>

apps/classroomio-com/src/routes/teach/register/+page.server.ts

@@ -0,0 +1,11 @@
+import { redirect } from '@sveltejs/kit';
+import { client } from '$lib/utils/posthog';
+
+export const load = ({ request }) => {
+  client.capture({
+    distinctId: request.headers.get('x-forwarded-for') || new Date().getTime().toString(),
+    event: 'cal.com page visited'
+  });
+
+  throw redirect(307, 'https://heyform.net/f/1qkguGkN');
+};