Use webp over png and lazy load images (#314)

* use webp and lazy load images

* fix hero

* update app_diff

* fix app_diff

* fix head

* remove async decoding

opensaas-sh/app_diff/src/landing-page/components/Clients.tsx.diff

@@ -1,7 +1,7 @@
 --- template/app/src/landing-page/components/Clients.tsx
 +++ opensaas-sh/app/src/landing-page/components/Clients.tsx
 @@ -1,23 +1,64 @@
-+import logo from '../../client/static/logo.png';
++import logo from '../../client/static/logo.webp';
  import AstroLogo from "../logos/AstroLogo";
 -import OpenAILogo from "../logos/OpenAILogo";
  import PrismaLogo from "../logos/PrismaLogo";

opensaas-sh/app_diff/src/landing-page/components/Header.tsx.diff

@@ -25,7 +25,7 @@
            >
              <NavLogo />
 -            <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Your Saas</span>
-+            <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Open Saas</span>
++            <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Open SaaS</span>
            </a>
          </div>
          <div className='flex lg:hidden'>
@@ -47,6 +47,15 @@
                  </div>
                </Link>
              ) : (
+@@ -78,7 +79,7 @@
+         <Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 dark:bg-boxdark dark:text-white'>
+           <div className='flex items-center justify-between'>
+             <a href='/' className='-m-1.5 p-1.5'>
+-              <span className='sr-only'>Your SaaS</span>
++              <span className='sr-only'>Open SaaS</span>
+               <NavLogo />
+             </a>
+             <button
 @@ -107,8 +108,8 @@
                <div className='py-6'>
                  {isUserLoading ? null : !user ? (
@@ -58,13 +67,12 @@
                      </div>
                    </Link>
                  ) : (
-@@ -125,3 +126,27 @@
+@@ -125,3 +126,26 @@
      </header>
    )
  }
 +
-+const ContestURL =
-+  'https://docs.opensaas.sh/blog/';
++const ContestURL = 'https://x.com/WaspLang';
 +
 +function Announcement() {
 +  return (
@@ -75,7 +83,7 @@
 +        onClick={() => window.open(ContestURL, '_blank')}
 +        className='hidden lg:block cursor-pointer rounded-full bg-neutral-700 px-2.5 py-1 text-xs hover:bg-neutral-600 tracking-wider'
 +      >
-+        Enter here and win prizes! →
++        Vote for the winner here! →
 +      </div>
 +      <div
 +        onClick={() => window.open(ContestURL, '_blank')}

opensaas-sh/app_diff/src/landing-page/components/Hero.tsx.diff

@@ -1,7 +1,7 @@
 --- template/app/src/landing-page/components/Hero.tsx
 +++ opensaas-sh/app/src/landing-page/components/Hero.tsx
 @@ -1,7 +1,25 @@
--import openSaasBanner from '../../client/static/open-saas-banner.png';
+-import openSaasBannerWebp from '../../client/static/open-saas-banner.webp';
 -import { DocsUrl } from '../../shared/common';
 +import { useState, useEffect } from 'react';
 +import { AiFillGithub } from 'react-icons/ai';
@@ -26,9 +26,9 @@
 +  }, []);
 +
    return (
-     <div className='relative pt-14 w-full '>
-       <div
-@@ -29,30 +47,47 @@
+     <div className='relative pt-14 w-full'>
+       <TopGradient />
+@@ -9,31 +27,47 @@
        <div className='py-24 sm:py-32'>
          <div className='mx-auto max-w-8xl px-6 lg:px-8'>
            <div className='lg:mb-18 mx-auto max-w-3xl text-center'>
@@ -69,15 +69,17 @@
 +              </a>
              </div>
            </div>
-           <div className='mt-14 flow-root sm:mt-14 '>
--            <div className='-m-2 rounded-xl  lg:-m-4 lg:rounded-2xl lg:p-4'>
+-          <div className='mt-14 flow-root sm:mt-14'>
+-            <div className='-m-2  flex justify-center rounded-xl lg:-m-4 lg:rounded-2xl lg:p-4'>
 -              <img
--                src={openSaasBanner}
+-                src={openSaasBannerWebp}
 -                alt='App screenshot'
--                width={2432}
--                height={1442}
+-                width={1000}
+-                height={530}
+-                loading='lazy'
 -                className='rounded-md shadow-2xl ring-1 ring-gray-900/10'
 -              />
++          <div className='mt-14 flow-root sm:mt-14 '>
 +            <div className='-m-2 mx-auto rounded-xl lg:-m-4 lg:rounded-2xl lg:p-4'>
 +              <iframe
 +                className=' mx-auto w-full md:w-[85%] aspect-[4/3] shadow-2xl'

opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff

@@ -2,8 +2,8 @@
 +++ opensaas-sh/app/src/landing-page/contentSections.ts
 @@ -1,74 +1,131 @@
 -import { DocsUrl, BlogUrl } from '../shared/common';
--import daBoiAvatar from '../client/static/da-boi.png';
--import avatarPlaceholder from '../client/static/avatar-placeholder.png';
+-import daBoiAvatar from '../client/static/da-boi.webp';
+-import avatarPlaceholder from '../client/static/avatar-placeholder.webp';
 -import { routes } from 'wasp/client/router';
 +import { DocsUrl, BlogUrl, GithubUrl } from '../shared/common';