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
2024-04-22 22:17:33 +01:00
committed by GitHub
co-authored by Rotimi Best
parent 295116773d
commit 32e10302cb
22 changed files with 429 additions and 68 deletions
+2 -2
View File
@@ -1,9 +1,9 @@
name: Cypress Tests
on:
push:
branches:
- cyprus
workflow_dispatch:
- cypress # Only trigger on update to this branch
jobs:
cypress-run:
+2 -2
View File
@@ -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');
};
@@ -0,0 +1,15 @@
<svg width="73" height="81" viewBox="0 0 73 81" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M41.9909 75.1372L44.4191 76.8264C45.2637 77.4598 45.4748 78.6211 44.9469 79.5712C44.5246 80.0991 43.9968 80.4158 43.3634 80.4158C42.9411 80.4158 42.6244 80.3102 42.3076 80.0991L35.6566 75.4539L35.1288 75.1372C34.6009 74.8205 34.2842 74.1871 34.2842 73.5536C34.2842 72.9202 34.6009 72.2868 35.1288 71.9701L42.0965 67.1138C42.9411 66.4803 44.2079 66.6915 44.8414 67.6416C45.4748 68.4862 45.2637 69.7531 44.3135 70.3865L43.1522 71.1255C57.6156 68.2751 68.595 55.5009 68.595 40.1929C68.595 26.363 59.4103 13.9056 46.1082 9.99939C45.1581 9.47153 44.5246 8.41582 44.8414 7.3601C45.1581 6.30438 46.2138 5.77652 47.2695 6.09324C62.1551 10.5273 72.5012 24.5683 72.5012 39.9818C72.5012 57.929 59.1991 72.7091 41.9909 75.1372Z" fill="#0233BD"/>
<path d="M37.8739 8.41486L30.9062 13.2712C30.5894 13.4823 30.1672 13.5879 29.8504 13.5879C29.217 13.5879 28.5836 13.2712 28.2669 12.7433C27.6334 11.8987 27.8446 10.6319 28.7947 9.99844L29.956 9.25944C15.3871 12.2155 4.40762 24.9896 4.40762 40.2976C4.40762 54.1275 13.5924 66.585 26.8944 70.4911C27.9501 70.8078 28.478 71.8635 28.1613 72.9193C27.9501 73.7638 27.1056 74.2917 26.261 74.2917C26.0499 74.2917 25.9443 74.2917 25.7331 74.1861C10.8475 69.7521 0.501465 55.8166 0.501465 40.2976C0.501465 22.4559 13.8035 7.57029 31.0117 5.24771L28.5836 3.55856C27.739 2.92513 27.5279 1.76384 28.0557 0.813691C28.6891 -0.0308837 29.8504 -0.242027 30.8006 0.285832L37.346 4.82542L37.8739 5.24771C38.4018 5.56442 38.7185 6.19786 38.7185 6.83129C38.7185 7.46472 38.4018 8.09815 37.8739 8.41486Z" fill="#0233BD"/>
<path d="M37.0284 66.6926C22.3539 66.6926 10.4243 54.763 10.4243 40.0885C10.4243 25.414 22.3539 13.4844 37.0284 13.4844C51.7029 13.4844 63.6325 25.414 63.6325 40.0885C63.6325 54.763 51.7029 66.6926 37.0284 66.6926ZM37.0284 14.9624C23.1985 14.9624 12.0079 26.153 12.0079 39.9829C12.0079 53.8128 23.1985 65.0034 37.0284 65.0034C50.8583 65.0034 62.049 53.8128 62.049 39.9829C62.049 26.153 50.8583 14.9624 37.0284 14.9624Z" fill="#040F2D"/>
<path d="M60.8285 45.6273C63.9055 32.4508 55.7182 19.2748 42.5417 16.1979C29.3653 13.1209 16.1893 21.3082 13.1123 34.4847C10.0354 47.6611 18.2227 60.8371 31.3991 63.9141C44.5756 66.991 57.7516 58.8037 60.8285 45.6273Z" fill="#0233BD"/>
<g clip-path="url(#clip0_5480_21555)">
<path d="M41 47.8C41 46.7 40.7 45.8 40 45C39.4 44.3 38.2 43.6 36.7 43C33.6 41.9 31.3 40.6 29.8 39.2C28.3 37.8 27.6 35.9 27.6 33.3C27.6 31 28.3 29 29.8 27.5C31.3 26.1 33.3 25.3 35.8 25V20.5H39.1V25.1C41.5 25.5 43.5 26.5 44.9 28.2C46.3 29.8 47 32 47 34.7L46.9 34.8H41C41 33.2 40.7 31.9 40 31C39.3 30.1 38.4 29.7 37.2 29.7C36 29.7 35.1 30 34.5 30.7C33.9 31.4 33.6 32.3 33.6 33.4C33.6 34.5 33.9 35.4 34.5 36C35.1 36.7 36.3 37.3 37.9 38C41 39.2 43.3 40.5 44.8 41.9C46.3 43.3 47 45.2 47 47.7C47 50.1 46.3 52 44.8 53.5C43.3 55 41.3 55.8 38.7 56.1V60.2H35.4V56.1C32.8 55.9 30.7 55 29 53.4C27.3 51.8 26.5 49.5 26.5 46.4V46.3H32.4C32.4 48.2 32.8 49.5 33.7 50.3C34.6 51.1 35.7 51.5 37 51.5C38.3 51.5 39.2 51.2 39.9 50.5C40.6 49.8 41 48.9 41 47.8Z" fill="#D9E0F5"/>
<path d="M38.8002 60.8H35.4002C35.1002 60.8 34.9002 60.6 34.9002 60.3V56.6C32.4002 56.3 30.3002 55.3 28.6002 53.8C26.8002 52.1 25.9002 49.7 26.0002 46.5C26.0002 46.4 26.0002 46.4 26.0002 46.3V46.2C26.1002 46 26.3002 45.9 26.5002 45.9H32.4002C32.8002 45.8 33.0002 46 33.0002 46.3C33.0002 48 33.4002 49.2 34.1002 49.9C34.9002 50.7 35.8002 51 37.0002 51C38.1002 51 39.0002 50.7 39.6002 50.1C40.2002 49.5 40.5002 48.7 40.5002 47.7C40.5002 46.7 40.2002 45.9 39.7002 45.3C39.1002 44.7 38.0002 44 36.6002 43.4C33.5002 42.3 31.1002 41 29.6002 39.5C27.9002 38.1 27.0002 36.1 27.0002 33.4C27.0002 30.9 27.8002 28.9 29.4002 27.3C30.9002 25.8 32.9002 24.9 35.3002 24.6V20.5C35.3002 20.2 35.6002 20 35.8002 20H39.1002C39.4002 20 39.6002 20.2 39.6002 20.5V24.6C42.0002 25 43.9002 26.1 45.2002 27.8C46.7002 29.6 47.4002 31.9 47.4002 34.7C47.4002 34.8 47.4002 34.9 47.3002 35H47.4002C47.3002 35.2 47.1002 35.2 47.0002 35.2H41.0002C40.7002 35.2 40.5002 35 40.5002 34.7C40.5002 33.2 40.2002 32 39.6002 31.2C39.0002 30.4 38.2002 30.1 37.2002 30.1C36.1002 30.1 35.4002 30.4 34.9002 31C34.4002 31.6 34.1002 32.4 34.1002 33.4C34.1002 34.4 34.4002 35.1 34.9002 35.7C35.5002 36.3 36.6002 36.9 38.1002 37.6C41.2002 38.8 43.6002 40.2 45.1002 41.6C46.7002 43.1 47.5002 45.1 47.5002 47.8C47.5002 50.3 46.7002 52.4 45.1002 54C43.6002 55.4 41.6002 56.3 39.2002 56.7V60.4C39.3002 60.5 39.0002 60.8 38.8002 60.8ZM35.9002 59.8H38.2002V56.2C38.2002 55.9 38.4002 55.7 38.6002 55.7C41.0002 55.4 43.0002 54.6 44.4002 53.3C45.8002 51.9 46.5002 50.1 46.5002 47.9C46.5002 45.6 45.8002 43.8 44.4002 42.5C43.0002 41.2 40.7002 39.9 37.7002 38.7C36.0002 38 34.8002 37.3 34.1002 36.6C33.4002 35.8 33.0002 34.8 33.0002 33.6C33.0002 32.3 33.3002 31.3 34.0002 30.5C34.7002 29.7 35.7002 29.3 37.1002 29.3C38.4002 29.3 39.5002 29.8 40.3002 30.8C41.0002 31.7 41.4002 32.9 41.4002 34.4H46.4002C46.4002 32 45.7002 30.1 44.5002 28.6C43.2002 27 41.4002 26.1 39.1002 25.7C38.9002 25.7 38.7002 25.5 38.7002 25.2V21H36.4002V25C36.4002 25.3 36.2002 25.5 36.0002 25.5C33.5002 25.7 31.6002 26.6 30.1002 28C28.7002 29.4 28.0002 31.2 28.0002 33.4C28.0002 35.8 28.7002 37.6 30.1002 38.9C31.5002 40.2 33.8002 41.5 36.8002 42.6C38.5002 43.3 39.6002 43.9 40.3002 44.7C41.0002 45.5 41.4002 46.5 41.4002 47.8C41.4002 49.1 41.0002 50.1 40.2002 50.9C39.5002 51.6 38.4002 52 37.0002 52C35.6002 52 34.4002 51.5 33.4002 50.7C32.5002 49.9 32.0002 48.6 32.0002 46.8H27.0002C27.0002 49.5 27.8002 51.6 29.3002 53C30.9002 54.5 33.0002 55.4 35.5002 55.6C35.8002 55.6 35.9002 55.8 35.9002 56.1V59.8Z" fill="#040F2D"/>
</g>
<defs>
<clipPath id="clip0_5480_21555">
<rect width="21.6" height="40.8" fill="white" transform="translate(26 20)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 5.7 KiB

@@ -0,0 +1,6 @@
<svg width="76" height="78" viewBox="0 0 76 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M62.2559 60.8821C55.9494 57.4736 51.5468 57.5911 48.572 55.1229C48.334 54.7703 47.8581 53.0074 47.6201 51.832C50.3569 49.7164 52.6177 46.6606 53.9266 42.8995C54.4025 41.6067 54.6405 40.4313 54.7595 39.7261C55.5924 39.4911 56.7823 38.7859 58.4482 37.1404C60.352 35.1423 63.2078 28.7956 61.8989 24.917C61.5419 23.8592 60.828 23.0365 59.8761 22.4488C62.3748 4.93638 53.2126 0 39.4098 0C28.8197 0 17.6346 3.05586 19.5385 22.4488C18.3486 22.9189 17.3966 23.8592 16.9207 25.0345C15.4928 28.9131 18.3486 35.2599 20.3714 37.2579C21.9183 38.9034 23.2271 39.6086 24.0601 39.8437C24.1791 40.5489 24.417 41.6067 24.893 43.0171C26.0829 46.7781 28.4627 49.834 31.0805 51.9496C30.7235 53.4775 30.1286 55.2405 30.1286 55.2405C27.2728 57.7087 22.7512 57.5911 16.4447 60.9996C10.2572 64.2905 7.87744 76.3964 7.87744 76.3964H39.4098H70.9421C70.9421 76.3964 68.5623 64.2905 62.2559 60.8821ZM39.4098 60.4119C33.6983 60.4119 32.5084 56.6509 32.2704 55.358C32.3894 54.8879 32.6274 54.0652 32.8653 53.1249C35.0072 54.4177 37.387 55.1229 39.4098 55.1229C41.4326 55.1229 43.6934 54.4177 45.8352 53.1249C46.0732 54.3002 46.3112 55.1229 46.5492 55.5931C46.1922 56.6509 44.6453 60.4119 39.4098 60.4119ZM45.8352 50.7742C44.5264 51.7145 43.0985 52.4197 41.7896 52.7723C40.9567 53.0074 40.1237 53.1249 39.4098 53.1249C38.6958 53.1249 37.8629 53.0074 37.03 52.7723C35.7211 52.4197 34.2932 51.7145 32.9843 50.7742C30.3665 49.0112 27.9867 46.1904 26.7968 42.4294C26.0829 40.1963 25.8449 38.9034 25.8449 38.9034L25.7259 37.7281L24.655 37.9631C24.417 37.9631 23.5841 37.7281 21.7993 35.8475C20.1334 34.2021 17.7536 28.5605 18.8245 25.6222C19.1815 24.5644 19.8954 24.0943 21.2043 23.9767L22.1562 23.8592V23.6241C22.7512 24.3293 23.2271 26.0923 23.9411 31.3813H25.25V17.2773C25.25 17.2773 43.6934 19.7455 49.8809 11.9884C50.5948 12.341 51.1898 12.6936 51.6657 13.1637C54.4025 19.1579 54.0455 31.3813 54.0455 31.3813H55.4734C55.4734 31.3813 56.0684 25.6222 56.9013 23.8592L57.6152 23.9767C58.8051 24.0943 59.5191 24.6819 59.995 25.6222C61.066 28.5605 58.6862 34.0845 57.0203 35.8475C55.2354 37.6105 54.2835 37.8456 54.1645 37.9631L53.0936 37.7281L52.9746 38.9034C52.9746 38.9034 52.7367 40.4313 52.0227 42.4294C50.8328 46.1904 48.453 49.0112 45.8352 50.7742Z" fill="#040F2D"/>
<path d="M62.2559 62.4092C56.0684 59.1182 51.7847 59.1182 48.81 56.8851H46.4302C46.4302 57.0026 46.5492 57.1202 46.5492 57.1202C46.1922 58.178 44.6453 61.8215 39.4098 61.8215C33.6983 61.8215 32.5084 58.0604 32.2704 56.7676H30.0096C27.1538 59.1182 22.7512 59.0007 16.5637 62.2916C10.2572 65.7001 7.87744 77.806 7.87744 77.806H39.4098H70.9421C71.0611 77.806 68.5623 65.7001 62.2559 62.4092Z" fill="#1D4ED8"/>
<path d="M12.6233 42.8227L13.09 42.3956L12.5666 42.0402C9.50519 39.9617 7.68681 37.0197 7.68681 33.7656H7.18681H6.68681C6.68681 37.0123 4.78807 39.9566 1.71915 42.0402L1.19568 42.3956L1.66246 42.8227C4.72632 45.6264 6.68681 49.791 6.68681 54.3184H7.18681H7.68681C7.68681 49.6925 9.56316 45.6229 12.6233 42.8227Z" fill="#D9E0F5" stroke="#040F2D"/>
<path d="M74.3229 16.0168L74.8517 15.5694L74.2605 15.2083C71.5977 13.5821 70.0918 11.3014 70.0918 8.80859H69.5918H69.0918C69.0918 11.296 67.517 13.5801 64.9178 15.2116L64.3386 15.5751L64.8607 16.0168C67.4468 18.2046 69.0918 21.4451 69.0918 24.9572H69.5918H70.0918C70.0918 21.4451 71.7368 18.2046 74.3229 16.0168Z" fill="#D9E0F5" stroke="#040F2D"/>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

@@ -0,0 +1,40 @@
<svg
width="22"
height="24"
viewBox="0 0 32 34"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.65622 9.05895L4.88535 6.64282C4.56 6.44281 4.50667 5.99212 4.77601 5.72277L6.19209 4.3067C6.4641 4.03468 6.92279 4.09335 7.11747 4.4267L9.47493 8.25891C9.78428 8.78694 9.17891 9.37897 8.65622 9.05895Z"
fill="#FFC107"
/>
<path
d="M5.35996 20.6798L0.981061 20.7679C0.599707 20.7759 0.327693 21.1385 0.423698 21.5066L0.933059 23.4427C1.03173 23.816 1.45575 23.9947 1.79177 23.808L5.66131 21.7839C6.19467 21.4826 5.97333 20.6665 5.35996 20.6798Z"
fill="#FFC107"
/>
<path
d="M15.531 28.1184L14.571 32.3826C14.483 32.7533 14.763 33.1107 15.1443 33.1107H17.1471C17.5338 33.1107 17.8138 32.7453 17.7178 32.372L16.6751 28.1077C16.5204 27.513 15.675 27.521 15.531 28.1184Z"
fill="#FFC107"
/>
<path
d="M23.3447 9.05895L27.1156 6.64282C27.4409 6.44281 27.4943 5.99212 27.2249 5.72277L25.8088 4.3067C25.5368 4.03468 25.0781 4.09335 24.8835 4.4267L22.526 8.25891C22.2167 8.78694 22.822 9.37897 23.3447 9.05895Z"
fill="#FFC107"
/>
<path
d="M26.6411 20.6798L31.02 20.7679C31.4014 20.7759 31.6734 21.1385 31.5774 21.5066L31.068 23.4427C30.9693 23.816 30.5453 23.9947 30.2093 23.808L26.3397 21.7839C25.8064 21.4826 26.0277 20.6665 26.6411 20.6798Z"
fill="#FFC107"
/>
<path
d="M17.0805 1.1697L20.67 9.35681C20.9447 9.98351 21.5394 10.4129 22.2221 10.4742L30.9666 11.2582C31.9559 11.4022 32.3506 12.6156 31.6333 13.3144L25.0462 18.848C24.5129 19.296 24.2702 20 24.4169 20.6801L26.3316 29.6432C26.4996 30.6273 25.4676 31.3793 24.5822 30.9126L16.9498 26.4431C16.3631 26.099 15.6377 26.099 15.051 26.4431L7.41863 30.91C6.53592 31.374 5.5012 30.6246 5.6692 29.6406L7.58397 20.6774C7.72798 19.9974 7.48797 19.2933 6.95461 18.8453L0.364922 13.317C-0.349783 12.621 0.0449049 11.4049 1.03162 11.2609L9.77609 10.4769C10.4588 10.4155 11.0535 9.98617 11.3282 9.35947L14.9177 1.17237C15.3631 0.276322 16.6378 0.276322 17.0805 1.1697Z"
fill="#FDD835"
/>
<path
d="M16.8194 9.84867L16.2113 3.81635C16.1873 3.48033 16.118 2.9043 16.6567 2.9043C17.0834 2.9043 17.3154 3.79234 17.3154 3.79234L19.1395 8.63527C19.8275 10.478 19.5448 11.1101 18.8808 11.4834C18.1181 11.9101 16.9927 11.5768 16.8194 9.84867Z"
fill="#FFFF8D"
/>
<path
d="M24.3425 18.3113L29.5747 14.2284C29.8334 14.0124 30.3001 13.6684 29.9267 13.2763C29.6307 12.967 28.8307 13.4123 28.8307 13.4123L24.2518 15.2018C22.8864 15.6738 21.9797 16.3725 21.8997 17.2525C21.7956 18.4259 22.849 19.33 24.3425 18.3113Z"
fill="#F4B400"
/>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

@@ -0,0 +1,9 @@
<svg width="88" height="64" viewBox="0 0 88 64" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0.906738" width="86.1867" height="64" fill="url(#pattern0_5457_21522)"/>
<defs>
<pattern id="pattern0_5457_21522" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_5457_21522" transform="scale(0.00990099 0.0133333)"/>
</pattern>
<image id="image0_5457_21522" width="101" height="75" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAABLCAYAAABp2kmJAAAFQklEQVR4Ae2dT0gVQRzHl0hef1Cjsqwwo0vRH0TIsKA81KEI0kOFXfLSMZC81UVv3bQgb4bRoQ4FUhCdzFtBFw8WhFBCBCKFViREEBPfB7P83rzZ2dnn7ts/8xt4zKxv3m93f5/5zfx+M+usJyzT8PCwaG9vF57nhX46OjrEysqKUfLk5KRobm4OlWVzvqzXgT6mpqaM+qBfevQgqDw4OBhZeYBoSq4AoQ3GFkwoFLR4Kti23HTghmi7+DHws66hsSa5tufPYj30NDYpFMrMzExk5TU0HRR7zr8LBAJYWzvvCBfBJAKlZW+3Udkm63DxO9ViGYqh+6xXA2EoGYCgwmYoDCXYs1Jbi8vHbClsKWwpNj0AWwpbSnKWMvrku+/OP53+IU5c/5Tb2KgQlgIAupRXOIWAcuX2Fx0T/2+Agzo2/XkW6jgBRdJ5O7eaCzhOQckLnEJCgUUM3VsUX5f+Sg7aPKuWU1gocmywgQN4qCd/k3ZeeChSwXmC4wwUCQdeGLotU0rbcpyDEhUOgtLDV+fr2rU5CyUKnF+r/0Q94TgPhcJBkGlKgFOP6RuGokxIQukmOBiPJMikcoYSAAVWoUsfPv9hKDatUZ37qqU1h1mIBHRucIGhJA3FBoYc6OsxnuB+ne2+YF2msQOWIWGwS6z08XFbik3wmBYMea/OWIoNDETy9YxHJAQ1LzwUWxg8IVlDF6W2JnoMxdME7ytPE5D0XlAupKVQQLpy2hOOKgT12CkosCBYlaqErB07ASUvMGTjKAQUBHW6lDcYhYKCm3nwYtnnkrdHiiQMmRfCUuTNFCVnKDG753E0DIbiCpSFhYWKAGjf0UuZd0PjaOFxyUjEUjDi4p/ye3p6xMDAgOgbes9QIlhkYlB8V0gIcTkHAVtcrTwOOQwlQguOQ+E2MhiKa1DGx8ed2XVIbd1xHtOhIKgcujcLfogdieK8MFdlxbZhTq27GLmqeNN9Y48zmxRqKRBkOhF/F74pXalUErZAAC0UCuITqvjNbX0cp0R0KG7eXbQxEL+OEcrs7GwFEMDZcfIRQ4kIBa7zz9/6pzR9EqRghIIInlrJ+o27GUgNQABl9PE3onZzMRAKBnh1n0fsZmcTMHGd6o0fDvXPi5evXgv0PmEpEMrY2FiFlWBrwbAtCBlGNQyqk5adbWWdYvdVE5xAKOp2t437r7GV1Nh1AQzGYjoU9Pb2BhqMFgpmhakAlHednWYoa4Cy/fj9Kp1iWUSXtFBUN3hj6xkGsgYgsguDo0QbO/Z71qUqKOqiFoSwG2weK6TSw/ItR25VQIEjpdvpvAoKu8HxANABgqNELQVlXaRfAYXd4OSASEiYEaFg4ImpqQJKFt1g/JMPHsSLI+F5MqmctPLWnmonCruk01QBJYtu8MjEEr3eNZez8PxxaVtXhbVgyKDJh5JVN7iIUDAzQrswlKl77ENBMEMrgmZaJk7PG2f3hUdgqew0y6p7TF9tUoaic4MR7KR50UU/N15lQo0A7rFMZSjqS2t4Njh5L8zkHns6NxhBTtFbahbuL8g99tTlXp4NTt5KZIMIco891Q3m5d76QQEcnXvs0cGmyGX0AGhwYWtCcHDw+qogXUAOJmjD5MAKVIUHyaR/L08Gy4UX+kWRy90XRspLs1ie1X02bGoKBEL10nW6X/v7iefL4s3cqug8dspKDpWJcnnuceLhs5p+rArLyzGNB6QLSnPb+zAtUkGeuvxhK7f8sAoEYLBX1+NtheSpHsZPGjlTGLJs8zQodGVazpU6jaIbXJt8D6Qf0cuL4jx9DfwHwBe3BYaSweYAAAAASUVORK5CYII="/>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 249 KiB

@@ -0,0 +1,36 @@
<svg width="32" height="35" viewBox="0 0 32 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.1996 33.8187C19.7128 33.7985 15.9812 33.7005 12.31 33.3547C9.78288 33.1155 7.17216 32.7381 5.18963 31.6142C4.6306 31.2973 4.01971 31.2195 3.47797 31.1532C3.24744 31.1244 3.03132 31.0984 2.8469 31.0552C1.44069 30.7238 0.45807 29.5078 0.452307 28.0987L0.432136 18.6615C0.429254 17.3562 1.36001 16.264 2.64807 16.0623C2.67113 16.0594 2.6913 16.0537 2.71435 16.0479C2.87284 15.9961 6.65924 14.7627 9.51201 12.5324C10.8548 11.4835 12.0046 9.86692 12.5895 8.21001C13.1716 6.55887 13.1687 4.75787 13.1659 3.31132C13.1659 2.37769 13.163 1.21641 13.4166 1.04639C14.0332 0.640091 14.7133 0.432617 15.4365 0.432617C17.6611 0.432617 19.9318 2.46413 20.0211 4.53311C20.0845 5.96814 19.6033 7.66251 19.1394 9.29925C18.5919 11.2386 18.1164 12.9128 18.5458 14.051C18.6092 14.221 18.7705 14.3305 18.9492 14.3305C18.955 14.3305 21.0499 14.2585 21.0499 14.2585H21.07C23.4214 14.2585 25.3348 16.1718 25.3377 18.5203L25.3521 30.6835C25.3521 31.522 25.0293 32.3087 24.4357 32.8994C23.845 33.4902 23.0583 33.8187 22.2198 33.8187H22.1996Z" fill="url(#paint0_radial_5480_21629)"/>
<path d="M15.4367 0.864475C17.4134 0.864475 19.5083 2.72598 19.589 4.55002C19.6495 5.91589 19.1798 7.57568 18.7245 9.18073C18.154 11.1921 17.6641 12.9297 18.1425 14.2004C18.2693 14.5376 18.592 14.7595 18.9522 14.7595H18.9839L21.0586 14.6874H21.0759C23.1881 14.6874 24.9084 16.4049 24.9113 18.5199L24.9257 30.6831C24.9257 31.4035 24.6462 32.0836 24.1362 32.5936C23.6261 33.1036 22.9489 33.386 22.2257 33.386H22.2026C19.7245 33.3659 16.0043 33.2679 12.3505 32.925C9.87231 32.6916 7.31347 32.3227 5.40298 31.2393C4.76903 30.8791 4.08321 30.7955 3.53283 30.7263C3.31383 30.7004 3.10924 30.6745 2.94787 30.6341C1.7376 30.3488 0.890416 29.3057 0.887534 28.0983L0.864481 18.6611C0.861599 17.5719 1.63963 16.6584 2.71446 16.4913C2.75768 16.4855 2.80379 16.474 2.84413 16.4596C3.0055 16.4077 6.86106 15.1485 9.77434 12.872C11.1777 11.7742 12.3822 10.0855 12.9931 8.35371C13.6011 6.63341 13.5982 4.79207 13.5953 3.31094C13.5953 2.60783 13.5924 1.65691 13.7135 1.36875C14.2437 1.03161 14.8229 0.864475 15.4367 0.864475ZM15.4367 0C14.673 0 13.9008 0.207474 13.1775 0.685817C12.2439 1.30248 13.2553 5.01396 12.1805 8.06267C11.535 9.89248 10.3046 11.3621 9.24413 12.1891C6.42018 14.3964 2.58191 15.6355 2.58191 15.6355C1.09213 15.8689 -0.00287591 17.1541 5.674e-06 18.664L0.0230586 28.1012C0.0288218 29.7264 1.16705 31.1009 2.74904 31.4755C3.38875 31.6254 4.26187 31.585 4.9765 31.9913C6.88699 33.0748 9.33634 33.5071 12.2698 33.7837C15.9006 34.1266 19.589 34.2275 22.1969 34.2505H22.2257C24.1938 34.2505 25.7931 32.6541 25.7902 30.6831L25.7758 18.5199C25.7729 15.9236 23.6665 13.8258 21.0759 13.8258H21.0413L18.9551 13.8979C18.2347 11.9845 20.5947 7.67942 20.4564 4.51256C20.3555 2.26204 17.9552 0 15.4367 0Z" fill="#91674D"/>
<path d="M16.6095 16.7676C17.1513 18.2084 17.157 20.4561 16.6095 21.845C15.8171 23.8506 13.8778 25.6055 11.6388 25.9138C11.0913 25.9887 11.4169 26.493 11.9615 26.4181C14.385 26.0838 17.6642 25.1012 18.5172 22.9256C20.857 16.9463 18.1195 13.814 16.8977 14.7476C16.3099 15.2029 16.3041 15.9521 16.6095 16.7676Z" fill="#91674D"/>
<path d="M22.4188 18.9057C20.0098 18.9057 17.1138 18.459 16.9899 16.3238C16.9554 15.7129 17.1398 15.2 17.5547 14.7591C18.6468 13.6007 21.3296 12.9639 25.1102 12.9639C26.4819 12.9639 27.4818 13.0532 27.4933 13.0532C27.5048 13.0532 27.5192 13.0561 27.5308 13.0561H27.5567C27.597 13.0532 27.6345 13.0532 27.6748 13.0532C28.8995 13.0532 29.9225 14.1568 30.006 15.5659C30.0925 17.024 29.1329 18.2689 27.8679 18.3409C27.8477 18.3409 27.8247 18.3438 27.8045 18.3495C27.7786 18.3524 25.1102 18.9057 22.4188 18.9057Z" fill="url(#paint1_radial_5480_21629)"/>
<path d="M25.1131 13.3967C26.4617 13.3967 27.4472 13.4831 27.4559 13.4831C27.4818 13.486 27.5077 13.486 27.5337 13.486C27.551 13.486 27.5683 13.486 27.5827 13.4831C27.6144 13.4803 27.6461 13.4803 27.6749 13.4803C28.669 13.4803 29.5047 14.4053 29.5738 15.5838C29.6459 16.8027 28.8678 17.843 27.842 17.9035C27.7988 17.9064 27.7556 17.9121 27.7152 17.9208C27.6893 17.9266 25.0584 18.4712 22.4189 18.4712C20.8859 18.4712 19.6698 18.2925 18.8082 17.941C17.6239 17.4569 17.4481 16.771 17.4222 16.2985C17.3934 15.8057 17.5375 15.4109 17.8717 15.0536C18.8659 14.0018 21.5054 13.3967 25.1131 13.3967ZM25.1131 12.5322C21.8224 12.5322 16.3647 13.0307 16.5577 16.3503C16.6989 18.7478 19.592 19.3385 22.4189 19.3385C25.1881 19.3385 27.8939 18.7709 27.8939 18.7709C29.3981 18.6815 30.5392 17.235 30.4383 15.5377C30.3432 13.8952 29.1214 12.6187 27.6778 12.6187C27.6288 12.6187 27.5827 12.6187 27.5337 12.6216C27.5337 12.6216 26.5222 12.5322 25.1131 12.5322Z" fill="#91674D"/>
<path d="M24.2253 24.3895C21.0815 24.3895 17.3354 23.8622 17.3354 21.3437C17.3354 18.8252 21.0815 18.2979 24.2253 18.2979C26.8908 18.2979 29.32 18.6869 29.343 18.6897C29.3661 18.6926 29.3891 18.6955 29.4122 18.6955C30.6829 18.6955 31.5676 20.0383 31.5676 21.2428C31.5676 22.5136 30.6253 23.989 29.4122 23.989C29.3891 23.989 29.3661 23.9919 29.343 23.9947C29.3171 24.0005 26.8879 24.3895 24.2253 24.3895Z" fill="url(#paint2_radial_5480_21629)"/>
<path d="M24.2254 18.7336C26.8534 18.7336 29.2509 19.1169 29.274 19.1197C29.3201 19.1284 29.3662 19.1313 29.4123 19.1313C30.3978 19.1313 31.1355 20.2493 31.1355 21.2464C31.1355 22.2866 30.3401 23.5603 29.4123 23.5603C29.3662 23.5603 29.3201 23.5632 29.274 23.5718C29.2509 23.5747 26.8506 23.9579 24.2254 23.9579C22.2573 23.9579 20.6926 23.7505 19.5717 23.3384C17.9551 22.7448 17.7678 21.9149 17.7678 21.3443C17.7678 20.7709 17.9551 19.9439 19.5717 19.3503C20.6897 18.9411 22.2573 18.7336 24.2254 18.7336ZM24.2254 17.8691C20.7877 17.8691 16.9033 18.5002 16.9033 21.3472C16.9033 24.1942 20.7848 24.8253 24.2254 24.8253C26.9601 24.8253 29.4123 24.4276 29.4123 24.4276C30.8992 24.4276 31.9999 22.7246 31.9999 21.2492C31.9999 19.7739 30.8992 18.2697 29.4123 18.2697C29.4123 18.2668 26.9572 17.8691 24.2254 17.8691Z" fill="#91674D"/>
<path d="M26.6198 33.9682C25.4066 33.9682 19.2602 33.8731 17.3987 32.0087C17.0731 31.6831 16.9175 31.3316 16.9175 30.9339C16.9232 29.4211 19.5138 28.5537 24.0235 28.5537C25.6314 28.5537 26.8762 28.669 26.8906 28.669C26.9022 28.669 26.9166 28.6719 26.9281 28.6719C27.6024 28.6747 28.2392 28.9485 28.7147 29.447C29.1959 29.9484 29.4581 30.6169 29.4581 31.3258C29.4524 32.781 28.3141 33.9624 26.9195 33.9624C26.8993 33.9682 26.7984 33.9682 26.6198 33.9682Z" fill="url(#paint3_radial_5480_21629)"/>
<path d="M24.0265 28.9885C25.6085 28.9885 26.8389 29.1009 26.8505 29.1038C26.8764 29.1066 26.9023 29.1066 26.9283 29.1066C27.4844 29.1095 28.0089 29.3372 28.4036 29.7492C28.8071 30.1699 29.0289 30.7319 29.0261 31.3283C29.0232 32.5444 28.078 33.5356 26.911 33.5356H26.9081H26.8908C26.8851 33.5356 26.7871 33.5385 26.6171 33.5385C21.387 33.5385 18.5457 32.5501 17.7043 31.7058C17.3845 31.386 17.3499 31.1151 17.3499 30.9393C17.3557 29.7348 19.9116 28.9885 24.0265 28.9885ZM24.0265 28.124C20.9375 28.124 16.4941 28.539 16.4883 30.9336C16.4768 34.2359 24.9313 34.4001 26.6199 34.4001C26.8072 34.4001 26.911 34.3972 26.911 34.3972H26.9196C28.5564 34.3972 29.8848 33.0256 29.8905 31.3283C29.8963 29.6282 28.5708 28.245 26.9312 28.2393C26.9312 28.2422 25.6719 28.124 24.0265 28.124Z" fill="#91674D"/>
<path d="M25.5423 29.395C22.9517 29.395 16.9292 29.1011 16.9292 26.378C16.9292 24.09 21.2717 23.75 23.8623 23.75C26.1532 23.75 28.127 24.0036 28.1472 24.0065C28.1645 24.0093 28.1847 24.0093 28.202 24.0093C29.4036 24.0093 30.804 24.6029 30.804 26.2771C30.804 27.862 29.5649 29.3028 28.202 29.3028H28.1674C28.1559 29.3057 27.0464 29.395 25.5423 29.395Z" fill="url(#paint4_radial_5480_21629)"/>
<path d="M23.8624 23.3213V24.1858C26.1187 24.1858 28.0724 24.4365 28.0897 24.4393C28.1271 24.4451 28.1646 24.4451 28.2021 24.4451C29.251 24.4451 30.3719 24.9263 30.3719 26.2807C30.3719 27.6149 29.3172 28.8741 28.2021 28.8741C28.179 28.8741 28.156 28.8741 28.13 28.877C28.1185 28.877 27.0264 28.9663 25.5395 28.9663C23.969 28.9663 21.7243 28.8655 19.9463 28.3929C18.2318 27.9347 17.3615 27.2575 17.3615 26.3844C17.3615 26.1164 17.3615 25.3009 19.1885 24.7275C20.3267 24.3702 21.8972 24.1886 23.8595 24.1886L23.8624 23.3213ZM23.8624 23.3213C20.5313 23.3213 16.4971 23.8457 16.4971 26.3815C16.4971 29.3697 22.0873 29.8308 25.5424 29.8308C27.0869 29.8308 28.2021 29.7386 28.2021 29.7386C29.8273 29.7386 31.2364 28.0586 31.2364 26.2807C31.2364 24.5027 29.8273 23.5806 28.2021 23.5806C28.2021 23.5806 26.2051 23.3213 23.8624 23.3213Z" fill="#91674D"/>
<path d="M5.56451 31.8681L4.18423 26.4219L3.60791 31.3206L5.56451 31.8681Z" fill="#91674D"/>
<defs>
<radialGradient id="paint0_radial_5480_21629" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12.474 7.8069) rotate(90.125) scale(25.0811 19.7463)">
<stop offset="0.6" stop-color="#BA8D68"/>
<stop offset="1" stop-color="#A47B62"/>
</radialGradient>
<radialGradient id="paint1_radial_5480_21629" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(27.2252 15.6742) rotate(176.727) scale(8.14672 3.98632)">
<stop offset="0.5" stop-color="#BA8D68"/>
<stop offset="1" stop-color="#A47B62"/>
</radialGradient>
<radialGradient id="paint2_radial_5480_21629" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(28.5118 21.2644) rotate(-179.936) scale(9.16869 3.67678)">
<stop offset="0.5" stop-color="#BA8D68"/>
<stop offset="1" stop-color="#A47B62"/>
</radialGradient>
<radialGradient id="paint3_radial_5480_21629" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(26.7379 31.2014) rotate(-179.726) scale(7.69993 4.00879)">
<stop offset="0.5" stop-color="#BA8D68"/>
<stop offset="1" stop-color="#A47B62"/>
</radialGradient>
<radialGradient id="paint4_radial_5480_21629" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(27.8266 26.4994) rotate(-179.934) scale(8.77266 3.64894)">
<stop offset="0.5" stop-color="#BA8D68"/>
<stop offset="1" stop-color="#A47B62"/>
</radialGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB