feat: setup drizzle (#594)
* chore: migration to SvelteKit 2 * stage 1: migrate to svelte 5 and fix rerendering issues * stage 2: fix more $: reactivity across dashboard * fix merge conflicts * chore: migrate code in main to svelte 5 * chore: update preventDefault * chore: simplify tsconfig and remove unused mobileMenuRef in MobileMenu.svelte * chore: enforce .ts across dashboard * rename from classroomio-com to website * stage-3: Replace carbon icon svelte with lucide icon * update lock file * chore: finish icon replacement * fix: settings and setup page multiple rerender * stage 3: More icon and rerendering fixes * feat: setup drizzle and better auth * fix: onboarding validation error showing translation key #586 (#593) * fix: onboarding validation error showing translation key #586 * fix: remove debug log for profile update errors * chore: add a clean command * fix: remove message from email verification response
This commit is contained in:
Rotimi Best
@@ -0,0 +1 @@
|
||||
export const prerender = true;
|
||||
@@ -0,0 +1,227 @@
|
||||
<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 a course',
|
||||
subText: 'Prepare your content however you want and then upload them onto our platform.'
|
||||
},
|
||||
{
|
||||
title: 'Launch the 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>
|
||||
<meta property="og:image" itemprop="image" content="https://brand.cdn.clsrio.com/og/teach.png" />
|
||||
<meta property="og:title" content="Teach on ClassroomIO" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="On ClassroomIO you can make side income while doing what you love."
|
||||
/>
|
||||
|
||||
<meta
|
||||
property="og:image:secure_url"
|
||||
itemprop="image"
|
||||
content="https://brand.cdn.clsrio.com/og/teach.png"
|
||||
/>
|
||||
|
||||
<meta name="twitter:title" content="Teach on ClassroomIO" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="On ClassroomIO you can make side income while doing what you love."
|
||||
/>
|
||||
<meta name="twitter:image" content="https://brand.cdn.clsrio.com/og/teach.png" />
|
||||
</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-blue-700"
|
||||
>
|
||||
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-blue-700 text-center"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-2 lg: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-full md:w-2/4 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-sm md:text-lg my-2 flex justify-between text-left md:text-center"
|
||||
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="Kick off your Teaching Business in Minutes"
|
||||
subText="Don't wait, let's get you started."
|
||||
btnLabel="Register"
|
||||
link="/teach/register"
|
||||
demo={false}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,5 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export const load = ({ request }) => {
|
||||
redirect(307, 'https://heyform.net/f/1qkguGkN');
|
||||
};
|
||||
Reference in New Issue
Block a user