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

chore: landing page improvements

Browse Source
This commit is contained in:
Rotimi Best
2024-05-10 08:00:39 +01:00
parent ae5d7ad012
commit fc8b8e1898
6 changed files with 18 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/classroomio-com/src/app.css
+6
View File
@@ -105,3 +105,9 @@ li {
.hero-bg {
background-image: url('/hero-bg.svg');
}
.cio-bg-blue {
background: rgb(2, 51, 189);
background-size: cover;
background: radial-gradient(circle at 50% 100%, rgba(2, 51, 189, 1) 1%, rgb(4, 2, 56) 100%);
}
apps/classroomio-com/src/lib/PageSignupCTA/index.svelte
+5 -2
View File
@@ -40,8 +40,11 @@
<style>
.grad {
background: rgb(51, 16, 71);
background: radial-gradient(circle at 50% 100%, rgba(51, 16, 71, 1) 1%, rgba(2, 0, 36, 1) 100%);
/* background: rgb(2, 51, 189);
background: radial-gradient(circle at 50% 100%, rgba(2, 51, 189, 1) 1%, rgb(4, 2, 56) 100%); */
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url('https://brand.cdn.clsrio.com/cta-bg.png');
}
</style>
apps/classroomio-com/src/lib/Pricing/Pricing.svelte
-168
View File
@@ -1,168 +0,0 @@
<script>
import Checkmark from 'carbon-icons-svelte/lib/Checkmark.svelte';
import PLANS from 'shared/src/plans/data.json';
let isYearlyPlan = false;
function toggleIsYearlyPlan() {
isYearlyPlan = !isYearlyPlan;
}
</script>
<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-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>
<p class="mt-4 text-lg tracking-normal text-gray-500 lg:tracking-wide">
Customizable LMS, AI integration for productive educators and many more...
</p>
</div>
<div
class="relative mt-10 flex items-center rounded-[30px] border-[2px] p-[2px] lg:mt-0 lg:scale-100"
>
<button
style="background-color: {isYearlyPlan ? 'initial' : '#1D4EE2'}; color: {isYearlyPlan
? '#5e636b'
: '#fff'}"
class="rounded-[30px] bg-blue-700 px-3 py-1 text-xs text-white lg:px-4 lg:py-2"
on:click={toggleIsYearlyPlan}>Monthly</button
>
<button
style="background-color: {isYearlyPlan ? '#1D4EE2' : ''}; color: {isYearlyPlan
? '#fff'
: '#5e636b'}"
class="rounded-[30px] px-3 py-1 text-xs text-white lg:px-4 lg:py-2"
on:click={toggleIsYearlyPlan}>Annually</button
>
<div
class="absolute right-[-40%] top-[-85%] scale-[90%] rounded-full bg-[#006600] px-3.5 py-1.5 text-xs text-white lg:right-[-43%] lg:top-[-75%] lg:scale-100"
>
Save 2 months
</div>
</div>
<div class="isolate mt-10 grid grid-cols-1 gap-10 lg:grid-cols-3">
<!-- Card 1 -->
<div class="max-w-xl rounded-3xl p-8 ring-1 ring-gray-200 lg:max-w-sm xl:p-9">
<p class="text-lg font-semibold leading-8 text-gray-900 lg:text-xl">
{PLANS.BASIC.NAME}
</p>
<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">
${PLANS.BASIC.PRICE.MONTHLY}
<!-- <sub class="text-base">/mo</sub> -->
</p>
<a
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"
>
{PLANS.BASIC.CTA.LABEL}
</a>
<ul class="mt-8 space-y-2 text-sm text-gray-600 lg:space-y-5 xl:mt-10">
{#each PLANS.BASIC.FEATURES as feature}
<li class="flex items-center">
<Checkmark
size={24}
fill="#1D4EE2"
class="mr-2 scale-[70%] lg:mr-3 lg:scale-[100%]"
/>
{feature}
</li>
{/each}
</ul>
</div>
<!-- Card 2 -->
<div class="max-w-xl rounded-3xl bg-gray-900 p-8 lg:max-w-lg xl:p-9">
<p class="text-lg font-semibold leading-8 text-white lg:text-xl">
{PLANS.EARLY_ADOPTER.NAME}
</p>
<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">
${isYearlyPlan ? PLANS.EARLY_ADOPTER.PRICE.YEARLY : PLANS.EARLY_ADOPTER.PRICE.MONTHLY}
<!-- <sub class="text-base">/mo</sub> -->
</p>
<a
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"
>
{PLANS.EARLY_ADOPTER.CTA.LABEL}
</a>
<ul class="mt-8 space-y-3 text-sm font-light text-white lg:space-y-5 xl:mt-10">
{#each PLANS.EARLY_ADOPTER.FEATURES as features}
<li class="flex items-center">
<Checkmark size={24} fill="#fff" class="mr-2 scale-[70%] lg:mr-3 lg:scale-[100%]" />
{features}
</li>
{/each}
</ul>
</div>
<!-- Card 3 -->
<div class="max-w-xl rounded-3xl p-8 ring-1 ring-gray-200 lg:max-w-sm xl:p-9">
<p class="text-lg font-semibold leading-8 text-gray-900 lg:text-xl">
{PLANS.ENTERPRISE.NAME}
</p>
<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-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"
>
{PLANS.ENTERPRISE.CTA.LABEL}
</button>
<ul class="mt-8 space-y-2 text-sm text-gray-600 lg:space-y-5 xl:mt-10">
{#each PLANS.ENTERPRISE.FEATURES as features}
<li class="flex items-center">
<Checkmark
size={24}
fill="#1D4EE2"
class="mr-2 scale-[70%] lg:mr-3 lg:scale-[100%]"
/>
{features}
</li>
{/each}
</ul>
</div>
</div>
<!-- <div
class="flex flex-col lg:flex-row items-start lg:items-center mx-auto lg:mx-10 mt-[5%] border-[1px] rounded-[30px] py-[10%] lg:py-[5%] px-[10px] lg:px-[30px] lg:w-full md:max-w-[550px] lg:max-w-full"
>
<div class="mr-5 pl-5">
<h2
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-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-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>
</div> -->
</div>
</section>
apps/classroomio-com/src/routes/pricing/+page.svelte
+1 -1
View File
@@ -85,7 +85,7 @@
</div>
<!-- Card 2 -->
<div class="max-w-xl rounded-3xl bg-gray-900 p-8 lg:max-w-lg xl:p-9">
<div class="cio-bg-blue max-w-xl rounded-3xl p-8 lg:max-w-lg xl:p-9">
<p class="text-lg font-semibold leading-8 text-white lg:text-xl">
{PLANS.EARLY_ADOPTER.NAME}
</p>
apps/dashboard/src/app.postcss
+5
View File
@@ -149,6 +149,11 @@ code {
.bx--list-box__menu-item__option {
height: fit-content !important;
}
.cio-bg-blue {
background: rgb(2, 51, 189);
background-size: cover;
background: radial-gradient(circle at 50% 100%, rgba(2, 51, 189, 1) 1%, rgb(4, 2, 56) 100%);
}
@media screen and (max-width: 457px) {
.org-slot {
apps/dashboard/src/lib/components/Upgrade/Modal.svelte
+1 -1
View File
@@ -151,7 +151,7 @@
{#each planNames as planName}
<div
class="max-w-xl rounded-xl {planName === 'EARLY_ADOPTER' &&
'bg-primary-900'} p-4 ring-1 ring-gray-200 lg:max-w-sm"
'cio-bg-blue'} p-4 ring-1 ring-gray-200 lg:max-w-sm"
>
<p
class="mb-2 text-lg font-semibold leading-8 {planName === 'EARLY_ADOPTER'