ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: change classroomio tagline (#140)

Browse Source
This commit is contained in:
Rotimi Best
2024-01-26 10:06:39 +01:00
committed by GitHub
parent 326cf2d387
commit 9539e1e842
15 changed files with 111 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/classroomio-com/src/lib/Pricing/Pricing.svelte
+28 -67
View File
@@ -14,7 +14,7 @@
'AI Course Builder (no video upload)',
'Course Landing Page',
'Live chat & Live polls',
'20 AI Prompts',
'20 AI Prompts'
];
const proFeatures = [
@@ -25,36 +25,26 @@
'Certificates',
'2000 AI Prompts',
'Remove ClassroomIO Branding',
'Email Support',
'Email Support'
];
const teamFeatures = [
'Everything in Pro',
'Unlimited students',
'Unlimited AI Prompts',
'White Labelling',
'Priority Support',
'Priority Support'
];
</script>
<section id="pricing" class="py-[12%]">
<div class="px-[6%] flex flex-col justify-center items-center">
<div class="text-center mb-[3%]">
<h3
id="pricing"
class="inter text-[#1D4EE2] text-md font-semibold tracking-wide"
>
Pricing
</h3>
<h1
class="my-5 lg:my-4 font-semibold tracking-tight text-gray-900 text-3xl lg:text-4xl"
>
<h3 id="pricing" class="inter text-[#1D4EE2] text-md font-semibold tracking-wide">Pricing</h3>
<h1 class="my-5 lg:my-4 font-semibold tracking-tight text-gray-900 text-3xl lg:text-4xl">
For teams and individuals
</h1>
<p
class="inter mt-4 text-lg text-gray-500 tracking-normal lg:tracking-wide"
>
Customizable LMS, AI integration for productive educators and many
more...
<p class="inter mt-4 text-lg text-gray-500 tracking-normal lg:tracking-wide">
Customizable LMS, AI integration for productive educators and many more...
</p>
</div>
@@ -62,16 +52,14 @@
class="flex items-center border-[2px] rounded-[30px] p-[2px] relative lg:scale-100 mt-10 lg:mt-0"
>
<button
style="background-color: {prices
? 'initial'
: '#1D4EE2'}; color: {prices ? '#777E8A' : '#fff'}"
style="background-color: {prices ? 'initial' : '#1D4EE2'}; color: {prices
? '#777E8A'
: '#fff'}"
class="bg-[#1D4EE2] text-white rounded-[30px] py-1 px-3 lg:py-2 lg:px-4 inter text-xs"
on:click={handlePriceChange}>Monthly</button
>
<button
style="background-color: {prices ? '#1D4EE2' : ''}; color: {prices
? '#fff'
: '#777E8A'}"
style="background-color: {prices ? '#1D4EE2' : ''}; color: {prices ? '#fff' : '#777E8A'}"
class="text-white rounded-[30px] py-1 lg:py-2 px-3 lg:px-4 inter text-xs"
on:click={handlePriceChange}>Annually</button
>
@@ -84,25 +72,16 @@
<div class="isolate mt-10 grid gap-10 grid-cols-1 lg:grid-cols-3">
<!-- card 1 -->
<div
class="ring-gray-200 rounded-3xl p-8 ring-1 xl:p-9 max-w-xl lg:max-w-sm"
>
<h3 class="text-gray-900 text-lg lg:text-xl font-semibold leading-8">
Hobby
</h3>
<p
class="text-gray-500 font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6 inter"
>
For personal use. Hobby plan is free for up to 5 courses forever, no
credit card required.
<div class="ring-gray-200 rounded-3xl p-8 ring-1 xl:p-9 max-w-xl lg:max-w-sm">
<h3 class="text-gray-900 text-lg lg:text-xl font-semibold leading-8">Hobby</h3>
<p class="text-gray-500 font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6 inter">
For personal use. Hobby plan is free for up to 5 courses forever, no credit card required.
</p>
<h1
class="mt-6 flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium inter"
>
<h1 class="mt-6 flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium inter">
$0 <sub class="text-base">/mo</sub>
</h1>
<button
class="font-medium lg:font-semibold text-md lg:text-lg text-white py-3 lg:py-3 w-full bg-slate-900 hover:bg-slate-700 rounded-md lg:rounded-xl mt-10 inter"
class="font-medium lg:font-semibold text-md lg:text-lg text-white py-3 lg:py-3 w-full bg-slate-900 hover:bg-slate-700 rounded-md lg:rounded-md mt-10 inter"
data-cal-config={"{'layout':'month_view'}"}
data-cal-link="classroomio/demo"
>
@@ -124,12 +103,8 @@
<!-- card 2 -->
<div class="bg-gray-900 rounded-3xl p-8 xl:p-9 max-w-xl lg:max-w-lg">
<h3 class="text-white text-lg lg:text-xl font-semibold leading-8">
Pro
</h3>
<p
class="text-white font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6 inter"
>
<h3 class="text-white text-lg lg:text-xl font-semibold leading-8">Pro</h3>
<p class="text-white font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6 inter">
Advanced features for small teaching businesses. Built for scale.
</p>
<h1
@@ -138,22 +113,16 @@
${prices ? '12' : '15'} <sub class="text-base">/member</sub>
</h1>
<button
class="font-medium lg:font-semibold text-md lg:text-lg text-slate-900 py-3 lg:py-3 w-full bg-white hover:bg-indigo-50 rounded-md lg:rounded-xl mt-10 inter"
class="font-medium lg:font-semibold text-md lg:text-lg text-slate-900 py-3 lg:py-3 w-full bg-white hover:bg-indigo-50 rounded-md lg:rounded-md mt-10 inter"
data-cal-config={"{'layout':'month_view'}"}
data-cal-link="classroomio/demo"
>
Get Started
</button>
<ul
class="text-white mt-8 space-y-3 font-light lg:space-y-5 text-sm xl:mt-10"
>
<ul class="text-white mt-8 space-y-3 font-light lg:space-y-5 text-sm xl:mt-10">
{#each proFeatures as proFeature}
<li class="flex items-center">
<Checkmark
size={24}
fill="#fff"
class="mr-2 lg:mr-3 scale-[70%] lg:scale-[100%]"
/>
<Checkmark size={24} fill="#fff" class="mr-2 lg:mr-3 scale-[70%] lg:scale-[100%]" />
{proFeature}
</li>
{/each}
@@ -161,24 +130,16 @@
</div>
<!-- card 3 -->
<div
class="ring-gray-200 rounded-3xl p-8 ring-1 xl:p-9 max-w-xl lg:max-w-sm"
>
<h3 class="text-gray-900 text-lg lg:text-xl font-semibold leading-8">
Team
</h3>
<p
class="text-gray-500 font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6 inter"
>
<div class="ring-gray-200 rounded-3xl p-8 ring-1 xl:p-9 max-w-xl lg:max-w-sm">
<h3 class="text-gray-900 text-lg lg:text-xl font-semibold leading-8">Team</h3>
<p class="text-gray-500 font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6 inter">
Best suited for teams and larger businesses that need more control.
</p>
<h1
class="mt-6 lg:mt-6 flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium inter"
>
<h1 class="mt-6 lg:mt-6 flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium inter">
${prices ? '42' : '50'} <sub class="text-base">/member</sub>
</h1>
<button
class="font-medium lg:font-semibold text-md lg:text-lg text-white py-3 lg:py-3 w-full bg-slate-900 hover:bg-slate-700 rounded-md lg:rounded-xl mt-10 inter"
class="font-medium lg:font-semibold text-md lg:text-lg text-white py-3 lg:py-3 w-full bg-slate-900 hover:bg-slate-700 rounded-md lg:rounded-md mt-10 inter"
data-cal-config={"{'layout':'month_view'}"}
data-cal-link="classroomio/demo"
>
@@ -217,7 +178,7 @@
</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-[#1D4EE2] rounded-lg lg:rounded-xl inter w-[70%] lg:w-full"
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-[#1D4EE2] rounded-lg lg:rounded-md inter w-[70%] lg:w-full"
>
Create a free account
</button>