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
@@ -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 – Launch Your Online Bootcamp In Minutes" />
|
<meta property="og:title" content="ClassroomIO – 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 – 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 – 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 – 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 – 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
|
||||||
|
|||||||
@@ -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 Open Source Platform for Tech Bootcamps | Product Hunt"
|
alt="ClassroomIO - The Open Source Platform for Tech 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>
|
||||||
|
|||||||
@@ -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 |
Reference in New Issue
Block a user