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

fix: get lighthouse score to 100 (#180)

Browse Source 
* Lighthouse Report

* quick fix

* quick adjustment

* PR Corrections

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

---------

Co-authored-by: Rotimi Best <best@classroomio.com>
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
Download Patch File Download Diff File Expand all files Collapse all files
apps/classroomio-com/src/lib/Hero/Hero.svelte
+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}