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:
co-authored by
Rotimi Best
parent
ff524fca27
commit
1c0d6fd49b
+121
-100
@@ -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 – 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 – 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 – 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 – 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 – 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 – 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 – 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 – 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>
|
||||
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
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>
|
||||
@@ -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
|
||||
|
||||
@@ -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 Open Source Platform for Tech 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>
|
||||
|
||||
@@ -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 |
Reference in New Issue
Block a user