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 <[email protected]>
This commit is contained in:
Adeyemi Adetunji
co-authored by
Rotimi Best
Rotimi Best
parent
295116773d
commit
32e10302cb
@@ -21,11 +21,11 @@
|
||||
<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">
|
||||
<h1 class="text:md lg:text-base font-semibold leading-8 text-gray-800">
|
||||
{faq.question}
|
||||
</h1>
|
||||
<p
|
||||
class="text:md lg:text-md mt-2 font-light leading-7 tracking-wide text-gray-600 lg:leading-9"
|
||||
class="text:md lg:text-base mt-2 font-light leading-7 tracking-wide text-gray-600 lg:leading-9"
|
||||
>
|
||||
{faq.answer}
|
||||
</p>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
alt="classroomio logo"
|
||||
class="mb-5"
|
||||
/>
|
||||
<p class="lg:text-md mb-5 mr-2 text-sm leading-7 tracking-wide text-gray-600 lg:leading-7">
|
||||
<p class="lg:text-base mb-5 mr-2 text-sm leading-7 tracking-wide text-gray-600 lg:leading-7">
|
||||
Launch Your Online Bootcamp In Minutes
|
||||
<br />
|
||||
The easiest way to launch and scale your online bootcamp
|
||||
@@ -61,61 +61,83 @@
|
||||
class="mt-16 flex w-full flex-col items-start justify-between gap-3 space-y-6 lg:mt-0 lg:w-2/4 lg:flex-row lg:space-y-0"
|
||||
>
|
||||
<div>
|
||||
<p class="lg:text-md mb-3 text-base font-semibold leading-6 text-gray-900 lg:mb-10">
|
||||
<p class="lg:text-base mb-3 text-base font-semibold leading-6 text-gray-900 lg:mb-10">
|
||||
Product
|
||||
</p>
|
||||
<ul class="space-y-2 lg:space-y-4">
|
||||
<li class="lg:text-md text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900">
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="/#coursemanagement"> Course Management </a>
|
||||
</li>
|
||||
<li class="lg:text-md text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900">
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="/#customization"> Customizations </a>
|
||||
</li>
|
||||
<li class="lg:text-md text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900">
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="/#collaboration"> Forum </a>
|
||||
</li>
|
||||
<li class="lg:text-md text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900">
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="/#ai"> AI Lesson Planner </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="lg:text-md mb-3 text-base font-semibold leading-6 text-gray-900 lg:mb-10">
|
||||
<p class="lg:text-base mb-3 text-base font-semibold leading-6 text-gray-900 lg:mb-10">
|
||||
Resources
|
||||
</p>
|
||||
<ul class="space-y-2 lg:space-y-4">
|
||||
<li class="lg:text-md text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900">
|
||||
<a href="/blog"> Blog </a>
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="/teach">Teach with us</a>
|
||||
</li>
|
||||
<li class="lg:text-md text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900">
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a target="_blank" href="https://classroomio.com/docs/"> Help center </a>
|
||||
</li>
|
||||
<li class="lg:text-md text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900">
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a target="_blank" href="https://classroomio.com/docs/what-is-classroomio">
|
||||
What is ClassroomIO?
|
||||
</a>
|
||||
</li>
|
||||
<li class="lg:text-md text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900">
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a target="_blank" href="https://classroomio.com/docs/quickstart/signup">
|
||||
Getting Started
|
||||
</a>
|
||||
</li>
|
||||
<li class="lg:text-md text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900">
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="/oss-friends"> OSS Friends </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="lg:text-md mb-3 text-base font-semibold leading-6 text-gray-900 lg:mb-10">
|
||||
<p class="lg:text-base mb-3 text-base font-semibold leading-6 text-gray-900 lg:mb-10">
|
||||
Company
|
||||
</p>
|
||||
<ul class="space-y-2 lg:space-y-4">
|
||||
<li class="lg:text-md text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900">
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="mailto:[email protected]" target="_blank"> Contact us </a>
|
||||
</li>
|
||||
<li class="lg:text-md text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900">
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a
|
||||
href="https://app.enzuzo.com/policies/privacy/958fc978-5477-11ee-a03b-7b111830c594"
|
||||
target="_blank"
|
||||
@@ -123,12 +145,16 @@
|
||||
Privacy policy
|
||||
</a>
|
||||
</li>
|
||||
<li class="lg:text-md text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900">
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a target="_blank" href="https://classroomio.com/docs/quickstart/signup">
|
||||
Getting Started
|
||||
</a>
|
||||
</li>
|
||||
<li class="lg:text-md text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900">
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a
|
||||
href="https://app.enzuzo.com/policies/tos/958fc978-5477-11ee-a03b-7b111830c594"
|
||||
target="_blank"
|
||||
@@ -141,7 +167,7 @@
|
||||
</nav>
|
||||
</div>
|
||||
<footer
|
||||
class="lg:text-md border-t-[1px] py-[3%] text-center text-xs font-light leading-5 text-gray-500 lg:text-left"
|
||||
class="lg:text-base border-t-[1px] py-[3%] text-center text-xs font-light leading-5 text-gray-500 lg:text-left"
|
||||
>
|
||||
<p>All rights reserved.</p>
|
||||
<p class="flex items-center">
|
||||
|
||||
@@ -113,7 +113,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-md mx-auto mt-10 px-4 text-slate-700 md:text-lg lg:mt-6 lg:w-[42%] lg:p-0">
|
||||
<p class="text-base mx-auto mt-10 px-4 text-slate-700 md:text-lg lg:mt-6 lg:w-[42%] lg:p-0">
|
||||
Meet a better learning management system (LMS) for teachers and students. ClassroomIO allows
|
||||
you to launch and scale your online bootcamp with ease.
|
||||
</p>
|
||||
@@ -182,7 +182,7 @@
|
||||
Sign Up for Free
|
||||
</a>
|
||||
<!-- <a
|
||||
class="font-medium lg:font-semibold text-sm md:text-md w-11/12 md:w-fit border px-6 py-3 lg:px-10 lg:py-5 rounded-md"
|
||||
class="font-medium lg:font-semibold text-sm md:text-base w-11/12 md:w-fit border px-6 py-3 lg:px-10 lg:py-5 rounded-md"
|
||||
href="/github"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<script>
|
||||
export let className = '';
|
||||
</script>
|
||||
|
||||
<header
|
||||
class="hero-bg lg:min-h-[30rem] mt-[10%] md:mt-16 pt-24 pb-16 w-full border-b border-slate-100 {className}"
|
||||
>
|
||||
<slot />
|
||||
</header>
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
{#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"
|
||||
class="text-base 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"
|
||||
>
|
||||
@@ -28,7 +28,7 @@
|
||||
</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"
|
||||
class="text-base 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"
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<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-md font-semibold tracking-wide text-blue-700">Pricing</h1>
|
||||
<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>
|
||||
@@ -51,7 +51,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">
|
||||
@@ -59,7 +59,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"
|
||||
>
|
||||
@@ -84,7 +84,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">
|
||||
@@ -92,7 +92,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"
|
||||
>
|
||||
@@ -113,14 +113,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"
|
||||
>
|
||||
@@ -147,19 +147,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>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</h1>
|
||||
|
||||
<p
|
||||
class="mx-auto mt-10 lg:mt-6 px-4 lg:p-0 text-md tracking-wide leading-6 text-gray-400 lg:w-2/4"
|
||||
class="mx-auto mt-10 lg:mt-6 px-4 lg:p-0 text-base tracking-wide leading-6 text-gray-400 lg:w-2/4"
|
||||
>
|
||||
Once you create an account, you get a dedicated dashboard where your students can access all
|
||||
their courses, assignments, and more.
|
||||
|
||||
@@ -10,12 +10,12 @@
|
||||
</h1>
|
||||
|
||||
<p
|
||||
class="mx-auto text-center my-5 lg:mt-6 px-4 lg:p-0 text-md tracking-wide leading-6 text-gray-400 lg:w-2/4"
|
||||
class="mx-auto text-center my-5 lg:mt-6 px-4 lg:p-0 text-base tracking-wide leading-6 text-gray-400 lg:w-2/4"
|
||||
>
|
||||
See what excites them about building and managing bootcamps with ClassroomIO.
|
||||
</p>
|
||||
<a
|
||||
class="md:text-md w-11/12 rounded-md bg-blue-700 px-6 py-3 text-sm font-medium text-white text-center transition-all delay-100 hover:bg-blue-800 hover:shadow-xl hover:scale-95 md:w-fit lg:px-6 lg:py-5 lg:font-semibold"
|
||||
class="md:text-base w-11/12 rounded-md bg-blue-700 px-6 py-3 text-sm font-medium text-white text-center transition-all delay-100 hover:bg-blue-800 hover:shadow-xl hover:scale-95 md:w-fit lg:px-6 lg:py-5 lg:font-semibold"
|
||||
href="/signup"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export const prerender = true;
|
||||
@@ -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>
|
||||
@@ -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');
|
||||
};
|
||||
Reference in New Issue
Block a user