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
+122 -101
View File
@@ -1,113 +1,134 @@
<!doctype html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="theme-color" content="#333333" />
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="theme-color" content="#333333" />
<title>ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes</title>
<meta name="description" content="ClassroomIO" />
<meta name="application-name" content="ClassroomIO" />
<meta name="apple-mobile-web-app-title" content="ClassroomIO" />
<meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes</title>
<meta name="description" content="ClassroomIO" />
<meta name="application-name" content="ClassroomIO" />
<meta name="apple-mobile-web-app-title" content="ClassroomIO" />
<meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Facebook Meta Tags -->
<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:title" content="ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes" />
<meta
property="og:description"
content="ClassroomIO is a no-code tool that allows you build and scale your own teaching platform with ease."
/>
<!-- Facebook Meta Tags -->
<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:title" content="ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes" />
<meta 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:image:type" content="image/png" />
<meta property="og:image:width" content="1920" />
<meta property="og:image:height" content="1080" />
<meta
property="og:image:secure_url"
itemprop="image"
content="https://classroomio.com/classroomio-opengraph-image.png"
/>
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1920" />
<meta property="og:image:height" content="1080" />
<meta property="og:image:secure_url" itemprop="image"
content="https://classroomio.com/classroomio-opengraph-image.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="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
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" />
<!-- <link rel="stylesheet" href="global.css"> -->
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
<link rel="icon" type="image/png" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="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
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" />
<!-- <link rel="stylesheet" href="global.css"> -->
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
<link rel="icon" type="image/png" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="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 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" />
<!-- <link rel="stylesheet" href="global.css"> -->
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
<link rel="icon" type="image/png" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="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 name="twitter:description"
content="ClassroomIO is a no-code tool that allows you build and scale your own teaching platform with ease." />
<meta name="twitter:image" content="https://classroomio.com/classroomio-opengraph-image.png" />
<!-- <link rel="stylesheet" href="global.css"> -->
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
<link rel="icon" type="image/png" href="/favicon.ico" />
<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"
data-domains="classroomio.com"
></script>
<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">
window.$crisp = [];
window.CRISP_WEBSITE_ID = '69176b47-5f63-42cc-bb9b-68d4927b6276';
(function () {
d = document;
s = d.createElement('script');
s.src = 'https://client.crisp.chat/l.js';
s.async = 1;
d.getElementsByTagName('head')[0].appendChild(s);
})();
</script>
<script type="text/javascript">
window.$crisp = [];
window.CRISP_WEBSITE_ID = '69176b47-5f63-42cc-bb9b-68d4927b6276';
(function () {
d = document;
s = d.createElement('script');
s.src = 'https://client.crisp.chat/l.js';
s.async = 1;
d.getElementsByTagName('head')[0].appendChild(s);
})();
</script>
<script type="text/javascript">
(function (C, A, L) {
let p = function (a, ar) {
a.q.push(ar);
};
let d = C.document;
C.Cal =
C.Cal ||
function () {
let cal = C.Cal;
let ar = arguments;
if (!cal.loaded) {
cal.ns = {};
cal.q = cal.q || [];
d.head.appendChild(d.createElement('script')).src = A;
cal.loaded = true;
}
if (ar[0] === L) {
const api = function () {
p(api, arguments);
};
const namespace = ar[1];
api.q = api.q || [];
typeof namespace === 'string' ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar);
return;
}
p(cal, ar);
<script type="text/javascript">
(function (C, A, L) {
let p = function (a, ar) {
a.q.push(ar);
};
})(window, 'https://app.cal.com/embed/embed.js', 'init');
Cal('init', { origin: 'https://cal.com' });
let d = C.document;
C.Cal =
C.Cal ||
function () {
let cal = C.Cal;
let ar = arguments;
if (!cal.loaded) {
cal.ns = {};
cal.q = cal.q || [];
d.head.appendChild(d.createElement('script')).src = A;
cal.loaded = true;
}
if (ar[0] === L) {
const api = function () {
p(api, arguments);
};
const namespace = ar[1];
api.q = api.q || [];
typeof namespace === 'string' ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar);
return;
}
p(cal, ar);
};
})(window, 'https://app.cal.com/embed/embed.js', 'init');
Cal('init', { origin: 'https://cal.com' });
Cal('ui', {
theme: 'light',
styles: { branding: { brandColor: '#1D4EE2' } },
hideEventTypeDetails: false,
layout: 'month_view'
});
</script>
%sveltekit.head%
</head>
Cal('ui', {
theme: 'light',
styles: { branding: { brandColor: '#1D4EE2' } },
hideEventTypeDetails: false,
layout: 'month_view'
});
</script>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
@@ -14,25 +14,25 @@
<div
class="w-4/5 mx-auto flex flex-col {rightToLeft
? '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="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'}
<img src={thumbsUp} alt="" class="w-7" />
<img width="27" height="27" loading="lazy" src={thumbsUp} alt="" class="w-7" />
{: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'}
<div class="flex items-center">
<img src={leftFist} alt="" class="w-6" />
<img src={rightFist} alt="" class="w-6" />
<img width="24" height="24" loading="lazy" src={leftFist} alt="" class="w-6" />
<img width="24" height="24" loading="lazy" src={rightFist} alt="" class="w-6" />
</div>
{: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}
<p class="font-medium text-md">{tagline}</p>
<p class="font-medium text-base">{tagline}</p>
</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">
{description}
</p>
@@ -44,8 +44,10 @@
</p>
{/if}
</div>
<div class="w-[95vw] md:w-[80vw] lg:w-full">
<div class="w-[80vw] md:w-[80vw] lg:w-full">
<video
width="100%"
height="100%"
class="w-full h-auto lg:max-h-[80%] rounded-md shadow-xl"
autoplay
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">
Questions & Answers
</h1>
<h3
class="lg:px-[20%] mt-4 text-lg lg:text-xl text-gray-500 font-normal tracking-normal lg:tracking-wide"
<p
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?
<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
> and we’ll get back to you ASAP.
</h3>
</p>
</header>
<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="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">
<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">
Launch Your Online Bootcamp In Minutes
<br />
@@ -16,6 +23,7 @@
href="https://www.producthunt.com/posts/classroomio?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-classroomio"
target="_blank"
><img
loading="lazy"
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"
style="width: 250px; height: 54px;"
@@ -24,20 +32,23 @@
/></a
>
<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
class="fill-gray-400 hover:fill-gray-500 hover:scale-110 scale-90 lg:scale-150 transition-all cursor-pointer"
size={20}
/>
</a>
<a href="https://twitter.com/classroomio" target="_blank">
<a href="https://twitter.com/classroomio" target="_blank" aria-label="Twitter Link">
<img
width="10"
height="10"
loading="lazy"
src="/twitter_logo.png"
alt=""
class="w-3 hover:fill-gray-500 hover:scale-110 scale-90 lg:scale-150 transition-all cursor-pointer"
/>
</a>
<a href="https://www.youtube.com/@ClassroomIO" target="_blank">
<a href="https://www.youtube.com/@ClassroomIO" target="_blank" aria-label="Youtube Link">
<LogoYoutube
class="fill-gray-400 hover:fill-gray-500 hover:scale-110 scale-90 lg:scale-150 transition-all cursor-pointer"
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"
>
<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
</h3>
</p>
<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">
<a href="/#coursemanagement"> Course Management </a>
@@ -70,9 +81,9 @@
</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
</h3>
</p>
<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">
<a href="/blog"> Blog </a>
@@ -97,9 +108,9 @@
</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
</h3>
</p>
<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">
<a href="mailto:[email protected]" target="_blank"> Contact us </a>
@@ -139,7 +150,7 @@
>Rotimi Best</a
>
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>
</footer>
</div>
+36 -8
View File
@@ -1,6 +1,31 @@
<script>
// import ImageCompare from './ImageCompare.svelte';
import { onMount } from 'svelte';
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>
<div class="text-center mt-[30%] md:mt-36 border-b-2 relative">
@@ -70,9 +95,12 @@
</video> -->
<img
src="./cio-hero-imac.png"
loading="eager"
{width}
{height}
src="./cio-hero-imac.webp"
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>
@@ -80,11 +108,11 @@
<div class="px-[15%] mb-[10%]">
<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%]">
<img src="/hero-1.svg" alt="" class="w-[30%] lg:w-[13%]" />
<img src="/hero-2.svg" alt="" class="w-[30%] lg:w-[13%]" />
<img src="/hero-3.svg" alt="" class="w-[30%] lg:w-[13%]" />
<img 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-1.svg" alt="" class="w-[30%] lg:w-[13%]" />
<img loading="lazy" src="/hero-2.svg" alt="" class="w-[30%] lg:w-[13%]" />
<img loading="lazy" src="/hero-3.svg" alt="" class="w-[30%] lg:w-[13%]" />
<img loading="lazy" src="/hero-4.svg" alt="" class="w-[30%] lg:w-[13%]" />
<img loading="lazy" src="/hero-5.svg" alt="" class="w-[30%] lg:w-[13%]" />
</div>
</div>
{/if}
@@ -61,6 +61,7 @@
on:mouseup={end}
>
<img
loading="lazy"
bind:this={img}
src={after}
alt="after"
@@ -69,6 +70,7 @@
{style}
/>
<img
loading="lazy"
src={before}
alt="before"
on:mousedown|preventDefault
@@ -12,7 +12,7 @@
title: 'Customizable Landing Page',
description:
'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,
@@ -71,10 +71,17 @@
}}
>
<div class="flex gap-1 items-center">
<img src={moreFeature.icon} alt="" class="w-8" />
<h4 class="text-lg font-semibold">
<img
loading="lazy"
width="32"
height="32"
src={moreFeature.icon}
alt=""
class="w-8"
/>
<p class="text-lg font-semibold">
{moreFeature.title}
</h4>
</p>
</div>
<p>{moreFeature.description}</p>
</button>
@@ -85,6 +92,9 @@
<div class="h-full w-full p-3 lg:w-2/3 lg:p-0">
{#key selected}
<img
width="100%"
height="100%"
loading="lazy"
id="image"
in:fly={{ y: 100, duration: 1000 }}
class="w-full flex flex-col items-center"
@@ -68,9 +68,16 @@
<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"
>
<a href="/">
<div class="flex items-center">
<img src="/logo-512.png" alt="classroomio logo" class="w-10 h-10" />
<a href="/" class="w-[20%]">
<div class="flex items-center w-full">
<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>
</div>
</a>
@@ -144,10 +151,20 @@
Sign Up
</button> -->
<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 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
class="font-medium text-sm after:content-['→'] after:ml-2"
@@ -157,8 +174,11 @@
</a>
</div>
<button class="block md:block lg:hidden" on:click={handleShowNav}
><TextAlignJustify size={24} /></button
<button
type="button"
aria-label="Hamburger Menu"
class="block md:block lg:hidden"
on:click={handleShowNav}><TextAlignJustify size={24} /></button
>
<!-- 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"
>
<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>
</div>
<nav class="">
@@ -235,7 +262,12 @@
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"
>
<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>
</a>
<a
@@ -243,7 +275,12 @@
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"
>
<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>
</a>
<a
@@ -39,10 +39,10 @@
<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="text-blue-700 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">
<h1 id="pricing" class="text-blue-700 text-md font-semibold tracking-wide">Pricing</h1>
<h2 class="my-5 lg:my-4 font-semibold tracking-tight text-gray-900 text-3xl lg:text-4xl">
For teams and individuals
</h1>
</h2>
<p class="mt-4 text-lg text-gray-500 tracking-normal lg:tracking-wide">
Customizable LMS, AI integration for productive educators and many more...
</p>
@@ -53,18 +53,18 @@
>
<button
style="background-color: {prices ? 'initial' : '#1D4EE2'}; color: {prices
? '#777E8A'
? '#5e636b'
: '#fff'}"
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
>
<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"
on:click={handlePriceChange}>Annually</button
>
<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
</div>
@@ -73,13 +73,13 @@
<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-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">
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">
<p class="mt-6 flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium">
$0 <sub class="text-base">/mo</sub>
</h1>
</p>
<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"
data-cal-config={"{'layout':'month_view'}"}
@@ -103,13 +103,13 @@
<!-- 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 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">
Advanced features for small teaching businesses. Built for scale.
</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>
</h1>
</p>
<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"
data-cal-config={"{'layout':'month_view'}"}
@@ -129,13 +129,13 @@
<!-- 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-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">
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">
<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>
</h1>
</p>
<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"
data-cal-config={"{'layout':'month_view'}"}
@@ -56,7 +56,7 @@
</a>
<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>
<p class="font-semibold">{post.author}</p>
<p class="text-slate-500">{post.role}</p>
@@ -23,7 +23,7 @@
</hgroup>
<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">
<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>
<p class="font-semibold">{data.meta.author}</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