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

feat: move pricing section to /pricing (#266)

Browse Source 
* feat: On landing page move pricing section to its own route /pricing

* increase font size

* make card more modular

* update text

---------

Co-authored-by: Rotimi Best <[email protected]>
This commit is contained in:
Adeyemi Adetunji
2024-04-19 05:24:04 +01:00
committed by GitHub
co-authored by Rotimi Best
parent 2f3a4784a1
commit ff7d2cee35
10 changed files with 251 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/classroomio-com/src/lib/Faq/Faq.svelte
+7 -25
View File
@@ -1,5 +1,6 @@
<script>
import { faqs } from './faqs';
import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
</script>
<div class="mb-[15%] mt-[5%]">
@@ -32,29 +33,10 @@
{/each}
</div>
<div
class="floating grad relative mx-auto mt-[10%] flex h-[61vh] w-[100%] flex-col items-center justify-center px-[6%] py-[12%] text-center shadow-2xl lg:h-[54vh] lg:w-[70%] lg:rounded-3xl"
>
<h1 class="font-display mt-3 text-3xl font-bold tracking-tight text-white lg:mt-2 lg:text-4xl">
Launch Your Bootcamp Today
</h1>
<p class="mt-6 text-xl text-gray-300 lg:text-lg">
Try before you buy. No credit card required.
</p>
<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"
data-cal-config={"{'layout':'month_view'}"}
data-cal-link="classroomio/demo"
>
Book a demo
</button>
</div>
<PageSignupCTA
header="Launch Your Bootcamp Today"
subText="Try before you buy. No credit card required."
btnLabel="Book a demo"
link="classroomio/demo"
/>
</div>
<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-size: cover;
}
</style>
apps/classroomio-com/src/lib/Hero/Hero.svelte
+1 -7
View File
@@ -30,7 +30,7 @@
});
</script>
<div class="root relative border-b-2 text-center bg-[#F5F8FE] h-full mt-[5%] w-full">
<div class="hero-bg relative border-b-2 text-center bg-[#F5F8FE] h-full mt-[5%] w-full">
<div class="pt-24 w-full">
<div class="mb-10 ml-[5%] lg:ml-0 flex w-full items-center justify-start lg:justify-center">
<a
@@ -231,9 +231,3 @@
{/if}
</div>
</div>
<style>
.root {
background-image: url('/hero-bg.svg');
}
</style>
apps/classroomio-com/src/lib/Navigation/Navigation.svelte
+1 -1
View File
@@ -104,7 +104,7 @@
<li class="text-gray-800 font-semibold text-sm cursor-pointer">More features</li>
</a> -->
<!-- Pricing -->
<a href="/#pricing">
<a href="/pricing">
<li class="text-gray-800 font-semibold text-sm cursor-pointer">Pricing</li>
</a>
<!-- Docs -->
apps/classroomio-com/src/lib/PageSignupCTA/index.svelte
+47
View File
@@ -0,0 +1,47 @@
<script>
export let header = '';
export let subText = '';
export let btnLabel = '';
export let link = '';
export let demo = true;
</script>
<div
class="floating grad relative mx-auto mt-[10%] flex h-[61vh] w-[100%] flex-col items-center justify-center px-[6%] py-[12%] text-center shadow-2xl lg:h-[54vh] lg:w-[70%] lg:rounded-3xl"
>
<div>
<h1 class="font-display mt-3 text-3xl font-bold tracking-tight text-white lg:mt-2 lg:text-4xl">
{header}
</h1>
<p class="mt-6 text-xl text-gray-300 lg:text-lg">
{subText}
</p>
</div>
{#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"
data-cal-config="'layout':'month_view'"
data-cal-link="classroomio/demo"
>
{btnLabel}
</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"
href={link}
target="_blank"
rel="noopener noreferrer nofollow"
>
{btnLabel}
</a>
{/if}
</div>
<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-size: cover;
}
</style>