fix: get lighthouse score to 100 (#180)

* Lighthouse Report

* quick fix

* quick adjustment

* PR Corrections

* feat: move all email to defer queue (#186)

---------

Co-authored-by: Rotimi Best <[email protected]>
This commit is contained in:
Adeyemi Adetunji
2024-03-01 14:22:45 +01:00
committed by GitHub
co-authored by Rotimi Best
parent ff524fca27
commit 1c0d6fd49b
16 changed files with 428 additions and 165 deletions
+36 -15
View File
@@ -1,6 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en" class="scroll-smooth"> <html lang="en" class="scroll-smooth">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
@@ -15,24 +14,38 @@
<!-- Facebook Meta Tags --> <!-- Facebook Meta Tags -->
<meta property="og:url" content="https://www.classroomio.com/" /> <meta property="og:url" content="https://www.classroomio.com/" />
<meta property="og:image" itemprop="image" content="https://classroomio.com/classroomio-opengraph-image.png" /> <meta
property="og:image"
itemprop="image"
content="https://classroomio.com/classroomio-opengraph-image.png"
/>
<meta property="og:title" content="ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes" /> <meta property="og:title" content="ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes" />
<meta property="og:description" <meta
content="ClassroomIO is a no-code tool that allows you build and scale your own teaching platform with ease." /> property="og:description"
content="ClassroomIO is a no-code tool that allows you build and scale your own teaching platform with ease."
/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:image:type" content="image/png" /> <meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1920" /> <meta property="og:image:width" content="1920" />
<meta property="og:image:height" content="1080" /> <meta property="og:image:height" content="1080" />
<meta property="og:image:secure_url" itemprop="image" <meta
content="https://classroomio.com/classroomio-opengraph-image.png" /> property="og:image:secure_url"
itemprop="image"
content="https://classroomio.com/classroomio-opengraph-image.png"
/>
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="classroomio.com" /> <meta property="twitter:domain" content="classroomio.com" />
<meta property="twitter:url" content="https://www.classroomio.com/" /> <meta property="twitter:url" content="https://www.classroomio.com/" />
<meta name="twitter:title" content="ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes" /> <meta
<meta name="twitter:description" name="twitter:title"
content="Spend less time doing the boring stuff, instead focus on impacting the lives of your students." /> content="ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes"
/>
<meta
name="twitter:description"
content="Spend less time doing the boring stuff, instead focus on impacting the lives of your students."
/>
<meta name="twitter:image" content="https://classroomio.com/classroomio-opengraph-image.png" /> <meta name="twitter:image" content="https://classroomio.com/classroomio-opengraph-image.png" />
<!-- <link rel="stylesheet" href="global.css"> --> <!-- <link rel="stylesheet" href="global.css"> -->
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" /> <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
@@ -41,17 +54,26 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="classroomio.com" /> <meta property="twitter:domain" content="classroomio.com" />
<meta property="twitter:url" content="https://www.classroomio.com/" /> <meta property="twitter:url" content="https://www.classroomio.com/" />
<meta name="twitter:title" content="ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes" /> <meta
<meta name="twitter:description" name="twitter:title"
content="ClassroomIO is a no-code tool that allows you build and scale your own teaching platform with ease." /> content="ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes"
/>
<meta
name="twitter:description"
content="Spend less time doing the boring stuff, instead focus on impacting the lives of your students."
/>
<meta name="twitter:image" content="https://classroomio.com/classroomio-opengraph-image.png" /> <meta name="twitter:image" content="https://classroomio.com/classroomio-opengraph-image.png" />
<!-- <link rel="stylesheet" href="global.css"> --> <!-- <link rel="stylesheet" href="global.css"> -->
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" /> <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
<link rel="icon" type="image/png" href="/favicon.ico" /> <link rel="icon" type="image/png" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png" />
<script async src="https://analytics.umami.is/script.js" data-website-id="efd70f1f-1f2e-4513-a1dd-ba7826fec138" <script
data-domains="classroomio.com"></script> async
src="https://analytics.umami.is/script.js"
data-website-id="efd70f1f-1f2e-4513-a1dd-ba7826fec138"
data-domains="classroomio.com"
></script>
<script type="text/javascript"> <script type="text/javascript">
window.$crisp = []; window.$crisp = [];
@@ -109,5 +131,4 @@
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>
@@ -14,25 +14,25 @@
<div <div
class="w-4/5 mx-auto flex flex-col {rightToLeft class="w-4/5 mx-auto flex flex-col {rightToLeft
? 'lg:flex-row-reverse' ? 'lg:flex-row-reverse'
: 'lg:flex-row'} items-center justify-between gap-28" : 'lg:flex-row'} items-center justify-between gap-8 lg:gap-28"
> >
<div class="w-[80vw] flex flex-col"> <div class="w-[80vw] flex flex-col">
<div class="my-4 ml-1 flex gap-2 items-center"> <div class="my-2 lg:my-4 ml-1 flex gap-2 items-center">
{#if taglineIcon === 'simplified'} {#if taglineIcon === 'simplified'}
<img src={thumbsUp} alt="" class="w-7" /> <img width="27" height="27" loading="lazy" src={thumbsUp} alt="" class="w-7" />
{:else if taglineIcon === 'flexible'} {:else if taglineIcon === 'flexible'}
<img src={flexible} alt="" class="w-7" /> <img width="27" height="27" loading="lazy" src={flexible} alt="" class="w-7" />
{:else if taglineIcon === 'collaboration'} {:else if taglineIcon === 'collaboration'}
<div class="flex items-center"> <div class="flex items-center">
<img src={leftFist} alt="" class="w-6" /> <img width="24" height="24" loading="lazy" src={leftFist} alt="" class="w-6" />
<img src={rightFist} alt="" class="w-6" /> <img width="24" height="24" loading="lazy" src={rightFist} alt="" class="w-6" />
</div> </div>
{:else if taglineIcon === 'productivity'} {:else if taglineIcon === 'productivity'}
<img src={robotArm} alt="" class="w-7" /> <img width="27" height="27" loading="lazy" src={robotArm} alt="" class="w-7" />
{/if} {/if}
<p class="font-medium text-md">{tagline}</p> <p class="font-medium text-base">{tagline}</p>
</div> </div>
<h2 class="font-bold text-4xl mb-6">{title}</h2> <h2 class="font-bold text-4xl mb-3 lg:mb-6">{title}</h2>
<p class="leading-8 text-lg text-gray-500"> <p class="leading-8 text-lg text-gray-500">
{description} {description}
</p> </p>
@@ -44,8 +44,10 @@
</p> </p>
{/if} {/if}
</div> </div>
<div class="w-[95vw] md:w-[80vw] lg:w-full"> <div class="w-[80vw] md:w-[80vw] lg:w-full">
<video <video
width="100%"
height="100%"
class="w-full h-auto lg:max-h-[80%] rounded-md shadow-xl" class="w-full h-auto lg:max-h-[80%] rounded-md shadow-xl"
autoplay autoplay
loop loop
+4 -4
View File
@@ -7,14 +7,14 @@
<h1 class="mt-2 text-4xl lg:text-4xl font-medium tracking-tight text-gray-900"> <h1 class="mt-2 text-4xl lg:text-4xl font-medium tracking-tight text-gray-900">
Questions & Answers Questions & Answers
</h1> </h1>
<h3 <p
class="lg:px-[20%] mt-4 text-lg lg:text-xl text-gray-500 font-normal tracking-normal lg:tracking-wide" class="lg:px-[20%] mt-4 text-lg lg:text-xl text-gray-600 font-normal tracking-normal lg:tracking-wide"
> >
Can’t find the answer you’re looking for? Can’t find the answer you’re looking for?
<a class="text-blue-700" href="mailto:[email protected]" target="_blank" <a class="text-blue-700 font-semibold" href="mailto:[email protected]" target="_blank"
>Shoot us an email</a >Shoot us an email</a
> and we’ll get back to you ASAP. > and we’ll get back to you ASAP.
</h3> </p>
</header> </header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-10 lg:gap-20 lg:px-[13%] mt-[20%] lg:m-0"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-10 lg:gap-20 lg:px-[13%] mt-[20%] lg:m-0">
@@ -6,7 +6,14 @@
<div class="px-[2%] lg:px-[14%] border-t-[1px]"> <div class="px-[2%] lg:px-[14%] border-t-[1px]">
<div class="flex flex-col lg:flex-row justify-between items-center py-[10%] pl-5 lg:pl-0"> <div class="flex flex-col lg:flex-row justify-between items-center py-[10%] pl-5 lg:pl-0">
<div class="w-full lg:w-2/4"> <div class="w-full lg:w-2/4">
<img src="/logo-192.png" alt="classroomio logo" class="w-[10%] lg:w-[5%] mb-5 lg:mb-10" /> <img
width="32"
height="32"
loading="lazy"
src="/logo-192.png"
alt="classroomio logo"
class="w-[10%] lg:w-[5%] mb-5 lg:mb-10"
/>
<p class="text-sm lg:text-md tracking-wide leading-7 lg:leading-7 text-gray-600 mb-5 mr-2"> <p class="text-sm lg:text-md tracking-wide leading-7 lg:leading-7 text-gray-600 mb-5 mr-2">
Launch Your Online Bootcamp In Minutes Launch Your Online Bootcamp In Minutes
<br /> <br />
@@ -16,6 +23,7 @@
href="https://www.producthunt.com/posts/classroomio?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-classroomio" href="https://www.producthunt.com/posts/classroomio?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-classroomio"
target="_blank" target="_blank"
><img ><img
loading="lazy"
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=425236&theme=light" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=425236&theme=light"
alt="ClassroomIO - The&#0032;Open&#0032;Source&#0032;Platform&#0032;for&#0032;Tech&#0032;Bootcamps | Product Hunt" alt="ClassroomIO - The&#0032;Open&#0032;Source&#0032;Platform&#0032;for&#0032;Tech&#0032;Bootcamps | Product Hunt"
style="width: 250px; height: 54px;" style="width: 250px; height: 54px;"
@@ -24,20 +32,23 @@
/></a /></a
> >
<div class="flex items-center mt-5 lg:mt-10 gap-3 lg:gap-7"> <div class="flex items-center mt-5 lg:mt-10 gap-3 lg:gap-7">
<a href="https://www.facebook.com/classroomiohq" target="_blank"> <a href="https://www.facebook.com/classroomiohq" target="_blank" aria-label="Facebook Link">
<LogoFacebook <LogoFacebook
class="fill-gray-400 hover:fill-gray-500 hover:scale-110 scale-90 lg:scale-150 transition-all cursor-pointer" class="fill-gray-400 hover:fill-gray-500 hover:scale-110 scale-90 lg:scale-150 transition-all cursor-pointer"
size={20} size={20}
/> />
</a> </a>
<a href="https://twitter.com/classroomio" target="_blank"> <a href="https://twitter.com/classroomio" target="_blank" aria-label="Twitter Link">
<img <img
width="10"
height="10"
loading="lazy"
src="/twitter_logo.png" src="/twitter_logo.png"
alt="" alt=""
class="w-3 hover:fill-gray-500 hover:scale-110 scale-90 lg:scale-150 transition-all cursor-pointer" class="w-3 hover:fill-gray-500 hover:scale-110 scale-90 lg:scale-150 transition-all cursor-pointer"
/> />
</a> </a>
<a href="https://www.youtube.com/@ClassroomIO" target="_blank"> <a href="https://www.youtube.com/@ClassroomIO" target="_blank" aria-label="Youtube Link">
<LogoYoutube <LogoYoutube
class="fill-gray-400 hover:fill-gray-500 hover:scale-110 scale-90 lg:scale-150 transition-all cursor-pointer" class="fill-gray-400 hover:fill-gray-500 hover:scale-110 scale-90 lg:scale-150 transition-all cursor-pointer"
size={20} size={20}
@@ -50,9 +61,9 @@
class="flex justify-between items-start flex-col lg:flex-row w-full lg:w-2/4 gap-3 mt-16 lg:mt-0 space-y-6 lg:space-y-0" class="flex justify-between items-start flex-col lg:flex-row w-full lg:w-2/4 gap-3 mt-16 lg:mt-0 space-y-6 lg:space-y-0"
> >
<div> <div>
<h3 class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900"> <p class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900">
Product Product
</h3> </p>
<ul class="space-y-2 lg:space-y-4"> <ul class="space-y-2 lg:space-y-4">
<li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900"> <li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
<a href="/#coursemanagement"> Course Management </a> <a href="/#coursemanagement"> Course Management </a>
@@ -70,9 +81,9 @@
</div> </div>
<div> <div>
<h3 class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900"> <p class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900">
Resources Resources
</h3> </p>
<ul class="space-y-2 lg:space-y-4"> <ul class="space-y-2 lg:space-y-4">
<li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900"> <li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
<a href="/blog"> Blog </a> <a href="/blog"> Blog </a>
@@ -97,9 +108,9 @@
</div> </div>
<div> <div>
<h3 class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900"> <p class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900">
Company Company
</h3> </p>
<ul class="space-y-2 lg:space-y-4"> <ul class="space-y-2 lg:space-y-4">
<li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900"> <li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
<a href="mailto:[email protected]" target="_blank"> Contact us </a> <a href="mailto:[email protected]" target="_blank"> Contact us </a>
@@ -139,7 +150,7 @@
>Rotimi Best</a >Rotimi Best</a
> >
from from
<img alt="Nigerian Flag" src="/ng.png" class="ml-2 h-3 w-3" /> <img loading="lazy" alt="Nigerian Flag" src="/ng.png" class="ml-2 h-3 w-3" />
</p> </p>
</footer> </footer>
</div> </div>
+36 -8
View File
@@ -1,6 +1,31 @@
<script> <script>
// import ImageCompare from './ImageCompare.svelte'; import { onMount } from 'svelte';
import { PUBLIC_ENABLE_USERS_COMPANIES } from '$env/static/public'; import { PUBLIC_ENABLE_USERS_COMPANIES } from '$env/static/public';
let width = '710';
let height = '710';
onMount(() => {
const handleResize = () => {
const screenWidth = window.innerWidth;
if (screenWidth < 768) {
// Mobile view
width = '1920';
height = '1440';
} else {
// Desktop view
width = '710';
height = '710';
}
};
handleResize(); // Call it initially
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
});
</script> </script>
<div class="text-center mt-[30%] md:mt-36 border-b-2 relative"> <div class="text-center mt-[30%] md:mt-36 border-b-2 relative">
@@ -70,9 +95,12 @@
</video> --> </video> -->
<img <img
src="./cio-hero-imac.png" loading="eager"
{width}
{height}
src="./cio-hero-imac.webp"
alt="hero section with dark vs light mode" alt="hero section with dark vs light mode"
class="floating w-[85%] lg:w-[70%] mx-auto rounded-lg shadow-lg" class="hidden md:block lg:block floating mx-auto rounded-lg shadow-lg"
/> />
</div> </div>
@@ -80,11 +108,11 @@
<div class="px-[15%] mb-[10%]"> <div class="px-[15%] mb-[10%]">
<h2 class="text-base lg:text-xl font-semibold text-gray-900">Used at</h2> <h2 class="text-base lg:text-xl font-semibold text-gray-900">Used at</h2>
<div class="w-full flex flex-wrap flex-row gap-5 justify-between items-center py-[5%]"> <div class="w-full flex flex-wrap flex-row gap-5 justify-between items-center py-[5%]">
<img src="/hero-1.svg" alt="" class="w-[30%] lg:w-[13%]" /> <img loading="lazy" src="/hero-1.svg" alt="" class="w-[30%] lg:w-[13%]" />
<img src="/hero-2.svg" alt="" class="w-[30%] lg:w-[13%]" /> <img loading="lazy" src="/hero-2.svg" alt="" class="w-[30%] lg:w-[13%]" />
<img src="/hero-3.svg" alt="" class="w-[30%] lg:w-[13%]" /> <img loading="lazy" src="/hero-3.svg" alt="" class="w-[30%] lg:w-[13%]" />
<img src="/hero-4.svg" alt="" class="w-[30%] lg:w-[13%]" /> <img loading="lazy" src="/hero-4.svg" alt="" class="w-[30%] lg:w-[13%]" />
<img src="/hero-5.svg" alt="" class="w-[30%] lg:w-[13%]" /> <img loading="lazy" src="/hero-5.svg" alt="" class="w-[30%] lg:w-[13%]" />
</div> </div>
</div> </div>
{/if} {/if}
@@ -61,6 +61,7 @@
on:mouseup={end} on:mouseup={end}
> >
<img <img
loading="lazy"
bind:this={img} bind:this={img}
src={after} src={after}
alt="after" alt="after"
@@ -69,6 +70,7 @@
{style} {style}
/> />
<img <img
loading="lazy"
src={before} src={before}
alt="before" alt="before"
on:mousedown|preventDefault on:mousedown|preventDefault
@@ -12,7 +12,7 @@
title: 'Customizable Landing Page', title: 'Customizable Landing Page',
description: description:
'A minimalistic landing page template out of the box to share your courses with the world', 'A minimalistic landing page template out of the box to share your courses with the world',
image: '/landing-page-builder.png' image: '/landing-page-builder.webp'
}, },
{ {
icon: team, icon: team,
@@ -71,10 +71,17 @@
}} }}
> >
<div class="flex gap-1 items-center"> <div class="flex gap-1 items-center">
<img src={moreFeature.icon} alt="" class="w-8" /> <img
<h4 class="text-lg font-semibold"> loading="lazy"
width="32"
height="32"
src={moreFeature.icon}
alt=""
class="w-8"
/>
<p class="text-lg font-semibold">
{moreFeature.title} {moreFeature.title}
</h4> </p>
</div> </div>
<p>{moreFeature.description}</p> <p>{moreFeature.description}</p>
</button> </button>
@@ -85,6 +92,9 @@
<div class="h-full w-full p-3 lg:w-2/3 lg:p-0"> <div class="h-full w-full p-3 lg:w-2/3 lg:p-0">
{#key selected} {#key selected}
<img <img
width="100%"
height="100%"
loading="lazy"
id="image" id="image"
in:fly={{ y: 100, duration: 1000 }} in:fly={{ y: 100, duration: 1000 }}
class="w-full flex flex-col items-center" class="w-full flex flex-col items-center"
@@ -68,9 +68,16 @@
<div <div
class="flex w-full justify-between items-center py-6 border-b-[1px] md:px-12 px-5 fixed top-0 z-[3000] filter backdrop-blur-xl shadow-sm bg-white" class="flex w-full justify-between items-center py-6 border-b-[1px] md:px-12 px-5 fixed top-0 z-[3000] filter backdrop-blur-xl shadow-sm bg-white"
> >
<a href="/"> <a href="/" class="w-[20%]">
<div class="flex items-center"> <div class="flex items-center w-full">
<img src="/logo-512.png" alt="classroomio logo" class="w-10 h-10" /> <img
loading="lazy"
width="28"
height="28"
src="/logo-512.svg"
alt="classroomio logo"
class="w-[40%] lg:w-[15%]"
/>
<h1 class="text-xs md:text-lg font-medium ml-2">ClassroomIO</h1> <h1 class="text-xs md:text-lg font-medium ml-2">ClassroomIO</h1>
</div> </div>
</a> </a>
@@ -144,10 +151,20 @@
Sign Up Sign Up
</button> --> </button> -->
<a href="/discord" target="_blank"> <a href="/discord" target="_blank">
<img alt="discord logo" src="/discord-blue.png" class="w-8 h-6 mr-4 cursor-pointer" /> <img
loading="lazy"
alt="discord logo"
src="/discord-blue.png"
class="w-8 h-6 mr-4 cursor-pointer"
/>
</a> </a>
<a href="/github" target="_blank"> <a href="/github" target="_blank">
<img alt="github logo" src="/github-mark.png" class="w-6 h-6 mr-4 cursor-pointer" /> <img
loading="lazy"
alt="github logo"
src="/github-mark.png"
class="w-6 h-6 mr-4 cursor-pointer"
/>
</a> </a>
<a <a
class="font-medium text-sm after:content-['→'] after:ml-2" class="font-medium text-sm after:content-['→'] after:ml-2"
@@ -157,8 +174,11 @@
</a> </a>
</div> </div>
<button class="block md:block lg:hidden" on:click={handleShowNav} <button
><TextAlignJustify size={24} /></button type="button"
aria-label="Hamburger Menu"
class="block md:block lg:hidden"
on:click={handleShowNav}><TextAlignJustify size={24} /></button
> >
<!-- burger menu --> <!-- burger menu -->
@@ -169,7 +189,14 @@
class="w-[60%] md:w-[40%] h-[100vh] border-2 sm:block lg:hidden px-3 pt-3 pb-2 md:p-7 absolute right-0 top-0 bg-white" class="w-[60%] md:w-[40%] h-[100vh] border-2 sm:block lg:hidden px-3 pt-3 pb-2 md:p-7 absolute right-0 top-0 bg-white"
> >
<div class="flex justify-between py-2 mb-5"> <div class="flex justify-between py-2 mb-5">
<img src="/logo-512.png" alt="classroomio logo" class="w-[8%]" /> <img
loading="lazy"
width="20"
height="20"
src="/logo-512.svg"
alt="classroomio logo"
class="w-[15%]"
/>
<button on:click={handleShowNav}><CloseLarge size={24} class="mr-5" /></button> <button on:click={handleShowNav}><CloseLarge size={24} class="mr-5" /></button>
</div> </div>
<nav class=""> <nav class="">
@@ -235,7 +262,12 @@
target="_blank" target="_blank"
class="flex items-center rounded-md after:ml-2 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg" class="flex items-center rounded-md after:ml-2 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg"
> >
<img alt="discord logo" src="/discord-blue.png" class="w-8 h-6 mr-2 cursor-pointer" /> <img
loading="lazy"
alt="discord logo"
src="/discord-blue.png"
class="w-8 h-6 mr-2 cursor-pointer"
/>
<span>Discord</span> <span>Discord</span>
</a> </a>
<a <a
@@ -243,7 +275,12 @@
target="_blank" target="_blank"
class="flex items-center rounded-md after:ml-2 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg" class="flex items-center rounded-md after:ml-2 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg"
> >
<img alt="github logo" src="/github-mark.png" class="w-6 h-6 mr-3 cursor-pointer" /> <img
loading="lazy"
alt="github logo"
src="/github-mark.png"
class="w-6 h-6 mr-3 cursor-pointer"
/>
<span>Github</span> <span>Github</span>
</a> </a>
<a <a
@@ -39,10 +39,10 @@
<section id="pricing" class="py-[12%]"> <section id="pricing" class="py-[12%]">
<div class="px-[6%] flex flex-col justify-center items-center"> <div class="px-[6%] flex flex-col justify-center items-center">
<div class="text-center mb-[3%]"> <div class="text-center mb-[3%]">
<h3 id="pricing" class="text-blue-700 text-md font-semibold tracking-wide">Pricing</h3> <h1 id="pricing" class="text-blue-700 text-md font-semibold tracking-wide">Pricing</h1>
<h1 class="my-5 lg:my-4 font-semibold tracking-tight text-gray-900 text-3xl lg:text-4xl"> <h2 class="my-5 lg:my-4 font-semibold tracking-tight text-gray-900 text-3xl lg:text-4xl">
For teams and individuals For teams and individuals
</h1> </h2>
<p class="mt-4 text-lg text-gray-500 tracking-normal lg:tracking-wide"> <p class="mt-4 text-lg text-gray-500 tracking-normal lg:tracking-wide">
Customizable LMS, AI integration for productive educators and many more... Customizable LMS, AI integration for productive educators and many more...
</p> </p>
@@ -53,18 +53,18 @@
> >
<button <button
style="background-color: {prices ? 'initial' : '#1D4EE2'}; color: {prices style="background-color: {prices ? 'initial' : '#1D4EE2'}; color: {prices
? '#777E8A' ? '#5e636b'
: '#fff'}" : '#fff'}"
class="bg-blue-700 text-white rounded-[30px] py-1 px-3 lg:py-2 lg:px-4 text-xs" class="bg-blue-700 text-white rounded-[30px] py-1 px-3 lg:py-2 lg:px-4 text-xs"
on:click={handlePriceChange}>Monthly</button on:click={handlePriceChange}>Monthly</button
> >
<button <button
style="background-color: {prices ? '#1D4EE2' : ''}; color: {prices ? '#fff' : '#777E8A'}" style="background-color: {prices ? '#1D4EE2' : ''}; color: {prices ? '#fff' : '#5e636b'}"
class="text-white rounded-[30px] py-1 lg:py-2 px-3 lg:px-4 text-xs" class="text-white rounded-[30px] py-1 lg:py-2 px-3 lg:px-4 text-xs"
on:click={handlePriceChange}>Annually</button on:click={handlePriceChange}>Annually</button
> >
<div <div
class="absolute top-[-85%] right-[-40%] lg:top-[-75%] lg:right-[-43%] bg-green-600 border border-green-700 text-xs text-white px-3.5 py-1.5 rounded-full scale-[90%] lg:scale-100" class="absolute top-[-85%] right-[-40%] lg:top-[-75%] lg:right-[-43%] bg-[#006600] text-xs text-white px-3.5 py-1.5 rounded-full scale-[90%] lg:scale-100"
> >
Save 2 months Save 2 months
</div> </div>
@@ -73,13 +73,13 @@
<div class="isolate mt-10 grid gap-10 grid-cols-1 lg:grid-cols-3"> <div class="isolate mt-10 grid gap-10 grid-cols-1 lg:grid-cols-3">
<!-- card 1 --> <!-- card 1 -->
<div class="ring-gray-200 rounded-3xl p-8 ring-1 xl:p-9 max-w-xl lg:max-w-sm"> <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-900 text-lg lg:text-xl font-semibold leading-8">Hobby</p>
<p class="text-gray-500 font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6"> <p class="text-gray-500 font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6">
For personal use. Hobby plan is free for up to 5 courses forever, no credit card required. For personal use. Hobby plan is free for up to 5 courses forever, no credit card required.
</p> </p>
<h1 class="mt-6 flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium"> <p class="mt-6 flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium">
$0 <sub class="text-base">/mo</sub> $0 <sub class="text-base">/mo</sub>
</h1> </p>
<button <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-md mt-10" 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"
data-cal-config={"{'layout':'month_view'}"} data-cal-config={"{'layout':'month_view'}"}
@@ -103,13 +103,13 @@
<!-- card 2 --> <!-- card 2 -->
<div class="bg-gray-900 rounded-3xl p-8 xl:p-9 max-w-xl lg:max-w-lg"> <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 text-lg lg:text-xl font-semibold leading-8">Pro</p>
<p class="text-white font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6"> <p class="text-white font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6">
Advanced features for small teaching businesses. Built for scale. Advanced features for small teaching businesses. Built for scale.
</p> </p>
<h1 class="mt-6 text-white flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium"> <p class="mt-6 text-white flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium">
${prices ? '12' : '15'} <sub class="text-base">/member</sub> ${prices ? '12' : '15'} <sub class="text-base">/member</sub>
</h1> </p>
<button <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-md mt-10" 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"
data-cal-config={"{'layout':'month_view'}"} data-cal-config={"{'layout':'month_view'}"}
@@ -129,13 +129,13 @@
<!-- card 3 --> <!-- card 3 -->
<div class="ring-gray-200 rounded-3xl p-8 ring-1 xl:p-9 max-w-xl lg:max-w-sm"> <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-900 text-lg lg:text-xl font-semibold leading-8">Team</p>
<p class="text-gray-500 font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6"> <p class="text-gray-500 font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6">
Best suited for teams and larger businesses that need more control. Best suited for teams and larger businesses that need more control.
</p> </p>
<h1 class="mt-6 lg:mt-6 flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium"> <p class="mt-6 lg:mt-6 flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium">
${prices ? '42' : '50'} <sub class="text-base">/member</sub> ${prices ? '42' : '50'} <sub class="text-base">/member</sub>
</h1> </p>
<button <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-md mt-10" 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"
data-cal-config={"{'layout':'month_view'}"} data-cal-config={"{'layout':'month_view'}"}
@@ -56,7 +56,7 @@
</a> </a>
<div class="flex items-center justify-start gap-4 my-2"> <div class="flex items-center justify-start gap-4 my-2">
<img src={post.avatar} alt="avatar" class="w-10 h-10 rounded-full" /> <img loading="lazy" src={post.avatar} alt="avatar" class="w-10 h-10 rounded-full" />
<span> <span>
<p class="font-semibold">{post.author}</p> <p class="font-semibold">{post.author}</p>
<p class="text-slate-500">{post.role}</p> <p class="text-slate-500">{post.role}</p>
@@ -23,7 +23,7 @@
</hgroup> </hgroup>
<main class="mx-auto max-w-screen-md px-4 lg:px-8"> <main class="mx-auto max-w-screen-md px-4 lg:px-8">
<div class="flex items-center justify-start gap-4 my-2 border-y border-gray-200 py-4"> <div class="flex items-center justify-start gap-4 my-2 border-y border-gray-200 py-4">
<img src={data.meta.avatar} alt="avatar" class="w-10 h-10 rounded-full" /> <img loading="lazy" src={data.meta.avatar} alt="avatar" class="w-10 h-10 rounded-full" />
<span> <span>
<p class="font-semibold">{data.meta.author}</p> <p class="font-semibold">{data.meta.author}</p>
<p class="text-gray-500">{data.meta.role}</p> <p class="text-gray-500">{data.meta.role}</p>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 908 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 38 KiB