highperfocused/open-saas
1
0
Fork 0
mirror of https://github.com/wasp-lang/open-saas.git synced 2025-03-29 11:12:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* use webp and lazy load images

* fix hero

* update app_diff

* fix app_diff

* fix head

* remove async decoding
This commit is contained in:
vincanger 2024-11-12 13:38:06 +01:00 committed by GitHub
parent 685e02536c
commit 3bb78654d8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
36 changed files with 165 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
opensaas-sh/app_diff/deletions
View File

@ -1,6 +1,6 @@
public/public-banner.png
src/client/static/avatar-placeholder.png
src/client/static/open-saas-banner.png
src/client/static/avatar-placeholder.webp
src/client/static/da-boi.webp
src/client/static/open-saas-banner.webp
src/landing-page/logos/SalesforceLogo.tsx
src/payment/lemonSqueezy/checkoutUtils.ts
src/payment/lemonSqueezy/paymentDetails.ts

70
opensaas-sh/app_diff/main.wasp.diff
View File

@ -1,6 +1,6 @@
--- template/app/main.wasp
+++ opensaas-sh/app/main.wasp
@@ -3,24 +3,24 @@
@@ -3,30 +3,30 @@
version: "^0.15.0"
},
@ -8,35 +8,47 @@
+ title: "Open SaaS",
head: [
"<meta property='og:type' content='website' />",
- "<meta property='og:title' content='My Open SaaS App' />",
+ "<meta property='og:title' content='Open SaaS' />",
"<meta property='og:url' content='https://opensaas.sh' />",
- "<meta property='og:description' content='I made a SaaS App. Buy my stuff.' />",
- "<meta property='og:image' content='https://opensaas.sh/public-banner.png' />",
- "<meta name='twitter:image' content='https://opensaas.sh/public-banner.png' />",
+ "<meta property='og:description' content='Free, open-source SaaS boilerplate starter for React & NodeJS.' />",
+ "<meta property='og:image' content='https://opensaas.sh/banner.png' />",
"<meta charset='utf-8' />",
- "<meta name='description' content='Your apps main description and features.' />",
- "<meta name='author' content='Your (App) Name' />",
- "<meta name='keywords' content='saas, solution, product, app, service' />",
-
+ "<meta name='description' content='Build and launch your SaaS application faster with our free, open-source starter kit. Features include auth, payments, AI example app, and admin dashboard.' />",
+ "<meta name='author' content='Open SaaS' />",
+ "<meta name='keywords' content='saas, starter, boilerplate, free, open source, authentication, payments' />",
+
+ "<meta name=\"twitter:title\" content=\"Open SaaS\" />",
+ "<meta name=\"twitter:text:title\" content=\"Open SaaS\" />",
+ "<meta name='twitter:image' content='https://opensaas.sh/banner.png' />",
+ "<meta name=\"twitter:image:alt\" content=\"Open SaaS\" />",
"<meta name='twitter:image:width' content='800' />",
"<meta name='twitter:image:height' content='400' />",
"<meta name='twitter:card' content='summary_large_image' />",
- // TODO: You can put your Plausible analytics scripts below (https://docs.opensaas.sh/guides/analytics/):
- // NOTE: Plausible does not use Cookies, so you can simply add the scripts here.
- // Google, on the other hand, does, so you must instead add the script dynamically
- // via the Cookie Consent component after the user clicks the "Accept" cookies button.
- "<script defer data-domain='<your-site-id>' src='https://plausible.io/js/script.js'></script>", // for production
- "<script defer data-domain='<your-site-id>' src='https://plausible.io/js/script.local.js'></script>", // for development
+ "<script defer data-domain='opensaas.sh' src='https://plausible.apps.twoducks.dev/js/script.js'></script>",
+ "<script defer data-domain='opensaas.sh' src='https://plausible.apps.twoducks.dev/js/script.local.js'></script>",
+ "<meta property='og:site_name' content='Open SaaS' />",
"<meta property='og:type' content='website' />",
- "<meta property='og:title' content='Your Open SaaS App' />",
- "<meta property='og:site_name' content='Your Open SaaS App' />",
- "<meta property='og:url' content='https://your-saas-app.com' />",
- "<meta property='og:description' content='Your apps main description and features.' />",
- "<meta property='og:image' content='https://your-saas-app.com/public-banner.webp' />",
- "<meta name='twitter:image' content='https://your-saas-app.com/public-banner.webp' />",
+ "<meta property='og:title' content='Open SaaS' />",
+ "<meta property='og:url' content='https://opensaas.sh' />",
+ "<meta property='og:description' content='Free, open-source SaaS boilerplate starter for React & NodeJS.' />",
+ "<meta property='og:image' content='https://opensaas.sh/public-banner.webp' />",
+
+ "<meta name=\"twitter:title\" content=\"Open SaaS\" />",
+ "<meta name=\"twitter:text:title\" content=\"Open SaaS\" />",
+ "<meta name='twitter:image' content='https://opensaas.sh/public-banner.webp' />",
+ "<meta name=\"twitter:image:alt\" content=\"Open SaaS\" />",
"<meta name='twitter:image:width' content='800' />",
"<meta name='twitter:image:height' content='400' />",
"<meta name='twitter:card' content='summary_large_image' />",
- // TODO: You can put your Plausible analytics scripts below (https://docs.opensaas.sh/guides/analytics/):
- // NOTE: Plausible does not use Cookies, so you can simply add the scripts here.
- // Google, on the other hand, does, so you must instead add the script dynamically
- // via the Cookie Consent component after the user clicks the "Accept" cookies button.
- "<script defer data-domain='<your-site-id>' src='https://plausible.io/js/script.js'></script>", // for production
- "<script defer data-domain='<your-site-id>' src='https://plausible.io/js/script.local.js'></script>", // for development
+ "<script defer data-domain='opensaas.sh' src='https://plausible.apps.twoducks.dev/js/script.js'></script>",
+ "<script defer data-domain='opensaas.sh' src='https://plausible.apps.twoducks.dev/js/script.local.js'></script>",
],
// 🔐 Auth out of the box! https://wasp-lang.dev/docs/auth/overview
@@ -32,7 +32,7 @@
@@ -38,7 +38,7 @@
email: {
fromField: {
name: "Open SaaS App",
@ -45,7 +57,7 @@
},
emailVerification: {
clientRoute: EmailVerificationRoute,
@@ -44,21 +44,18 @@
@@ -50,21 +50,18 @@
},
userSignupFields: import { getEmailUserFields } from "@src/auth/userSignupFields",
},
@ -79,7 +91,7 @@
},
onAfterSignup: import { onAfterSignup } from "@src/auth/hooks",
onAuthFailedRedirectTo: "/login",
@@ -81,11 +78,11 @@
@@ -87,11 +84,11 @@
// NOTE: "Dummy" provider is just for local development purposes.
// Make sure to check the server logs for the email confirmation url (it will not be sent to an address)!
// Once you are ready for production, switch to e.g. "SendGrid" or "Mailgun" providers. Check out https://docs.opensaas.sh/guides/email-sending/ .
@ -93,7 +105,7 @@
},
},
}
@@ -206,9 +203,9 @@
@@ -212,9 +209,9 @@
}
api paymentsWebhook {

11
opensaas-sh/app_diff/migrations/20241031103046_remove_checkout_session_id/migration.sql.diff Normal file
View File

@ -0,0 +1,11 @@
--- template/app/migrations/20241031103046_remove_checkout_session_id/migration.sql
+++ opensaas-sh/app/migrations/20241031103046_remove_checkout_session_id/migration.sql
@@ -0,0 +1,8 @@
+/*
+ Warnings:
+
+ - You are about to drop the column `checkoutSessionId` on the `User` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "User" DROP COLUMN "checkoutSessionId";

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

@ -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";

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

@ -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')}

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

@ -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'

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

@ -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';

6
opensaas-sh/app_diff/tailwind.config.cjs.diff
View File

@ -1,13 +1,15 @@
--- template/app/tailwind.config.cjs
+++ opensaas-sh/app/tailwind.config.cjs
@@ -8,6 +8,7 @@
@@ -8,7 +8,8 @@
theme: {
extend: {
fontFamily: {
- satoshi: ['Satoshi', 'system-ui', 'sans-serif'],
+ sans: ['ui-monospace', 'Liberation Mono', 'Menlo', 'monospace'],
satoshi: ['Satoshi', 'sans-serif'],
+ satoshi: ['Satoshi', 'sans-serif'],
},
colors: {
current: 'currentColor',
@@ -246,6 +247,9 @@
'spin-2': 'spin 2s linear infinite',
'spin-3': 'spin 3s linear infinite',

2
opensaas-sh/blog/astro.config.mjs
View File

@ -14,7 +14,7 @@ export default defineConfig({
description: 'Open SaaS is a free, open-source, full-stack SaaS starter kit for React + NodeJS.',
customCss: ['./src/styles/tailwind.css'],
logo: {
src: '/src/assets/logo.png',
src: '/src/assets/logo.webp',
alt: 'Open SaaS',
},
head: [

BIN
opensaas-sh/blog/src/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
opensaas-sh/blog/src/assets/logo.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

2
opensaas-sh/blog/src/content/docs/guides/seo.md
View File

@ -22,7 +22,7 @@ app SaaSTemplate {
"<meta property='og:url' content='https://opensaas.sh' />",
"<meta property='og:title' content='Open SaaS' />",
"<meta property='og:description' content='Free, open-source SaaS boilerplate starter for React & NodeJS.' />",
"<meta property='og:image' content='https://opensaas.sh/public-banner.png' />",
"<meta property='og:image' content='https://opensaas.sh/public-banner.webp' />",
//...
],
//...

6
opensaas-sh/blog/src/content/docs/start/guided-tour.md
View File

@ -60,7 +60,7 @@ If you are using an older version of the OpenSaaS template with Wasp `v0.13.x` o
.
├── main.wasp # Wasp Config file. You define your app structure here.
├── .wasp/ # Output dir for Wasp. DON'T MODIFY THESE FILES!
├── public/ # Public assets dir, e.g. www.yourdomain.com/banner.png
├── public/ # Public assets dir, e.g. www.yourdomain.com/public-banner.webp
├── src/ # Your code goes here.
│   ├── admin/ # Admin dashboard related pages and components.
│   ├── analytics/ # Logic and background jobs for processing analytics.
@ -320,11 +320,11 @@ But before you start setting up the main features, let's walk through the custom
#### Customizing the Look / Style of the App
- [ ] Update your favicon at `public/favicon.ico`.
- [ ] Update the banner image used when posting links to your site at `public/public-banner.png`.
- [ ] Update the banner image used when posting links to your site at `public/public-banner.webp`.
- [ ] Update the URL for this banner at `og:image` and `twitter:image` in `app.head` of the `main.wasp` file.
- [ ] Make changes to your landing page, `landingPage.tsx`.
- [ ] Customize the `navBar`, `features`, `testimonials`, and `faqs` in the `contentSections.ts` file.
- [ ] Change/rename the `logo.png` and main banner (`open-saas-banner.png`) in the `static` folder.
- [ ] Change/rename the `logo.webp` and main hero banner (`open-saas-banner.webp`) in the `static` folder.
- [ ] If you want to make changes to the global styles of the app, you can do so in `tailwind.config.cjs`. **Be aware that the current custom global styles defined already are mostly used in the app's Admin Dashboard!**
#### Customizing the Analytics & Admin Dashboard

36
template/app/main.wasp
View File

@ -6,21 +6,27 @@ app OpenSaaS {
title: "My Open SaaS App",
head: [
"<meta property='og:type' content='website' />",
"<meta property='og:title' content='My Open SaaS App' />",
"<meta property='og:url' content='https://opensaas.sh' />",
"<meta property='og:description' content='I made a SaaS App. Buy my stuff.' />",
"<meta property='og:image' content='https://opensaas.sh/public-banner.png' />",
"<meta name='twitter:image' content='https://opensaas.sh/public-banner.png' />",
"<meta name='twitter:image:width' content='800' />",
"<meta name='twitter:image:height' content='400' />",
"<meta name='twitter:card' content='summary_large_image' />",
// TODO: You can put your Plausible analytics scripts below (https://docs.opensaas.sh/guides/analytics/):
// NOTE: Plausible does not use Cookies, so you can simply add the scripts here.
// Google, on the other hand, does, so you must instead add the script dynamically
// via the Cookie Consent component after the user clicks the "Accept" cookies button.
"<script defer data-domain='<your-site-id>' src='https://plausible.io/js/script.js'></script>", // for production
"<script defer data-domain='<your-site-id>' src='https://plausible.io/js/script.local.js'></script>", // for development
"<meta charset='utf-8' />",
"<meta name='description' content='Your apps main description and features.' />",
"<meta name='author' content='Your (App) Name' />",
"<meta name='keywords' content='saas, solution, product, app, service' />",
"<meta property='og:type' content='website' />",
"<meta property='og:title' content='Your Open SaaS App' />",
"<meta property='og:site_name' content='Your Open SaaS App' />",
"<meta property='og:url' content='https://your-saas-app.com' />",
"<meta property='og:description' content='Your apps main description and features.' />",
"<meta property='og:image' content='https://your-saas-app.com/public-banner.webp' />",
"<meta name='twitter:image' content='https://your-saas-app.com/public-banner.webp' />",
"<meta name='twitter:image:width' content='800' />",
"<meta name='twitter:image:height' content='400' />",
"<meta name='twitter:card' content='summary_large_image' />",
// TODO: You can put your Plausible analytics scripts below (https://docs.opensaas.sh/guides/analytics/):
// NOTE: Plausible does not use Cookies, so you can simply add the scripts here.
// Google, on the other hand, does, so you must instead add the script dynamically
// via the Cookie Consent component after the user clicks the "Accept" cookies button.
"<script defer data-domain='<your-site-id>' src='https://plausible.io/js/script.js'></script>", // for production
"<script defer data-domain='<your-site-id>' src='https://plausible.io/js/script.local.js'></script>", // for development
],
// 🔐 Auth out of the box! https://wasp-lang.dev/docs/auth/overview

BIN
template/app/public/banner.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 840 KiB

BIN
template/app/public/public-banner.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 246 KiB

BIN
template/app/public/public-banner.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

2
template/app/src/admin/layout/Sidebar.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import Logo from '../../client/static/logo.png';
import Logo from '../../client/static/logo.webp';
import SidebarLinkGroup from './SidebarLinkGroup';
import { cn } from '../../client/cn';

2
template/app/src/client/App.tsx
View File

@ -3,7 +3,7 @@ import { updateCurrentUser } from 'wasp/client/operations';
import './Main.css';
import AppNavBar from './components/AppNavBar';
import CookieConsentBanner from './components/cookie-consent/Banner';
import { useMemo, useEffect, ReactNode } from 'react';
import { useMemo, useEffect } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
/**

1
template/app/src/client/Main.css
View File

@ -31,6 +31,7 @@
src: url('/fonts/Satoshi-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* third-party libraries CSS */

2
template/app/src/client/components/AppNavBar.tsx
View File

@ -5,7 +5,7 @@ import { Dialog } from '@headlessui/react';
import { BiLogIn } from 'react-icons/bi';
import { AiFillCloseCircle } from 'react-icons/ai';
import { HiBars3 } from 'react-icons/hi2';
import logo from '../static/logo.png';
import logo from '../static/logo.webp';
import DropdownUser from '../../user/DropdownUser';
import { UserMenuItems } from '../../user/UserMenuItems';
import { DocsUrl, BlogUrl } from '../../shared/common';

BIN
template/app/src/client/static/avatar-placeholder.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.2 KiB

BIN
template/app/src/client/static/avatar-placeholder.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
template/app/src/client/static/da-boi.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 178 KiB

BIN
template/app/src/client/static/da-boi.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
template/app/src/client/static/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
template/app/src/client/static/logo.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
template/app/src/client/static/open-saas-banner.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 840 KiB

BIN
template/app/src/client/static/open-saas-banner.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

8
template/app/src/landing-page/LandingPage.tsx
View File

@ -1,10 +1,4 @@
import {
features,
navigation,
faqs,
footerNavigation,
testimonials
} from './contentSections';
import { features, navigation, faqs, footerNavigation, testimonials } from './contentSections';
import Header from './components/Header';
import Hero from './components/Hero';
import Clients from './components/Clients';

2
template/app/src/landing-page/components/Header.tsx
View File

@ -5,7 +5,7 @@ import { AiFillCloseCircle } from 'react-icons/ai';
import { Dialog } from '@headlessui/react';
import { Link } from 'wasp/client/router';
import { useAuth } from 'wasp/client/auth';
import logo from '../../client/static/logo.png';
import logo from '../../client/static/logo.webp';
import DarkModeSwitcher from '../../client/components/DarkModeSwitcher';
import DropdownUser from '../../user/DropdownUser';
import { UserMenuItems } from '../../user/UserMenuItems';

71
template/app/src/landing-page/components/Hero.tsx
View File

@ -1,31 +1,11 @@
import openSaasBanner from '../../client/static/open-saas-banner.png';
import openSaasBannerWebp from '../../client/static/open-saas-banner.webp';
import { DocsUrl } from '../../shared/common';
export default function Hero() {
return (
<div className='relative pt-14 w-full '>
<div
className='absolute top-0 right-0 -z-10 transform-gpu overflow-hidden w-full blur-3xl sm:top-0 '
aria-hidden='true'
>
<div
className='aspect-[1020/880] w-[55rem] flex-none sm:right-1/4 sm:translate-x-1/2 dark:hidden bg-gradient-to-tr from-amber-400 to-purple-300 opacity-40'
style={{
clipPath: 'polygon(80% 20%, 90% 55%, 50% 100%, 70% 30%, 20% 50%, 50% 0)',
}}
/>
</div>
<div
className='absolute inset-x-0 top-[calc(100%-40rem)] sm:top-[calc(100%-65rem)] -z-10 transform-gpu overflow-hidden blur-3xl'
aria-hidden='true'
>
<div
className='relative aspect-[1020/880] sm:-left-3/4 sm:translate-x-1/4 dark:hidden bg-gradient-to-br from-amber-400 to-purple-300 opacity-50 w-[72.1875rem]'
style={{
clipPath: 'ellipse(80% 30% at 80% 50%)',
}}
/>
</div>
<div className='relative pt-14 w-full'>
<TopGradient />
<BottomGradient />
<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'>
@ -44,13 +24,14 @@ export default function Hero() {
</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>
@ -60,3 +41,35 @@ export default function Hero() {
</div>
);
}
function TopGradient() {
return (
<div
className='absolute top-0 right-0 -z-10 transform-gpu overflow-hidden w-full blur-3xl sm:top-0'
aria-hidden='true'
>
<div
className='aspect-[1020/880] w-[55rem] flex-none sm:right-1/4 sm:translate-x-1/2 dark:hidden bg-gradient-to-tr from-amber-400 to-purple-300 opacity-40'
style={{
clipPath: 'polygon(80% 20%, 90% 55%, 50% 100%, 70% 30%, 20% 50%, 50% 0)',
}}
/>
</div>
);
}
function BottomGradient() {
return (
<div
className='absolute inset-x-0 top-[calc(100%-40rem)] sm:top-[calc(100%-65rem)] -z-10 transform-gpu overflow-hidden blur-3xl'
aria-hidden='true'
>
<div
className='relative aspect-[1020/880] sm:-left-3/4 sm:translate-x-1/4 dark:hidden bg-gradient-to-br from-amber-400 to-purple-300 opacity-50 w-[72.1875rem]'
style={{
clipPath: 'ellipse(80% 30% at 80% 50%)',
}}
/>
</div>
);
}

2
template/app/src/landing-page/components/Testimonials.tsx
View File

@ -22,7 +22,7 @@ export default function Testimonials({ testimonials }: { testimonials: Testimoni
</blockquote>
<figcaption className='mt-6 text-base text-white'>
<a href={testimonial.socialUrl} className='flex items-center gap-x-2'>
<img src={testimonial.avatarSrc} className='h-12 w-12 rounded-full' />
<img src={testimonial.avatarSrc} loading='lazy' className='h-12 w-12 rounded-full' />
<div>
<div className='font-semibold hover:underline'>{testimonial.name}</div>
<div className='mt-1'>{testimonial.role}</div>

4
template/app/src/landing-page/contentSections.ts
View File

@ -1,6 +1,6 @@
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';
export const navigation = [

2
template/app/tailwind.config.cjs
View File

@ -8,7 +8,7 @@ module.exports = {
theme: {
extend: {
fontFamily: {
satoshi: ['Satoshi', 'sans-serif'],
satoshi: ['Satoshi', 'system-ui', 'sans-serif'],
},
colors: {
current: 'currentColor',

2
template/blog/astro.config.mjs
View File

@ -14,7 +14,7 @@ export default defineConfig({
customCss: ['./src/styles/tailwind.css'],
description: 'Documentation for your SaaS.',
logo: {
src: '/src/assets/logo.png',
src: '/src/assets/logo.webp',
alt: 'Your SaaS',
},
head: [