highperfocused/open-saas
1
0
Fork 0
mirror of https://github.com/wasp-lang/open-saas.git synced 2025-06-11 01:10:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve features and pricing section

Browse Source
This commit is contained in:
vincanger 2023-11-09 16:31:40 +01:00
parent 25e5c2cda9
commit c38343515a
4 changed files with 178 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/client/App.tsx
View File

@ -1,8 +1,14 @@
import './Main.css'; import './Main.css';
import NavBar from './NavBar'; import NavBar from './NavBar';
import { ReactNode } from 'react'; import { useMemo, ReactNode } from 'react';
import { useLocation } from 'react-router-dom';
export default function App({ children }: { children: ReactNode }) { export default function App({ children }: { children: ReactNode }) {
const location = useLocation();
const shouldDisplayAppNavBar = useMemo(() => {
return !location.pathname.startsWith('/landing-page');
}, [location]);
/** /**
* use this component to wrap all child components * use this component to wrap all child components
* this is useful for templates, themes, and context * this is useful for templates, themes, and context
@ -10,7 +16,7 @@ export default function App({ children }: { children: ReactNode }) {
*/ */
return ( return (
<div> <div>
{/* <NavBar /> */} {shouldDisplayAppNavBar && <NavBar />}
<div className='mx-auto max-w-7xl sm:px-6 lg:px-8 '>{children}</div> <div className='mx-auto max-w-7xl sm:px-6 lg:px-8 '>{children}</div>
</div> </div>
); );

316
src/client/LandingPage.tsx
View File

@ -6,7 +6,9 @@ import { MdPayments } from 'react-icons/md';
import { HiDocumentText } from 'react-icons/hi'; import { HiDocumentText } from 'react-icons/hi';
import { PiMagicWandFill } from 'react-icons/pi'; import { PiMagicWandFill } from 'react-icons/pi';
import { HiBars3 } from 'react-icons/hi2'; import { HiBars3 } from 'react-icons/hi2';
import { BiLogIn } from 'react-icons/bi';
import logo from './static/logo.png'; import logo from './static/logo.png';
import daBoi from './static/magic-app-gen-logo.png';
const navigation = [ const navigation = [
{ name: 'Product', href: '#' }, { name: 'Product', href: '#' },
@ -18,30 +20,43 @@ const features = [
{ {
name: 'Auto-magic Auth', name: 'Auto-magic Auth',
description: description:
'Not only is Auth built-in, you can integrate Google, GitHub, Email Verified Login, and more with just a few lines of code, thanks to the power of Wasp', 'Not only is Auth pre-configured, but you can integrate more providers with just a few lines of code, thanks to the power of Wasp',
icon: FiKey, // icon: FiKey,
icon: '🔐',
},
{
name: 'Full-stack Type Safety',
description:
'Because Wasp understands your app, it provides end-to-end type safety out of the box. Nothing to configure!',
// icon: FiKey,
icon: '🥞',
}, },
{ {
name: 'Stripe Integration', name: 'Stripe Integration',
description: description:
"No SaaS is complete without payments. That's why subscriptions and there necessary webhooks are built-in!", "No SaaS is complete without payments. That's why subscriptions and there necessary webhooks are built-in!",
icon: MdPayments, // icon: MdPayments,
}, icon: '💸',
{
name: 'Complete Documentation & Support',
description:
"We don't leave you hanging. We have a complete documentation site, and a Discord community to help you get along the way.",
icon: HiDocumentText,
},
{
name: 'OpenAI ChatGPT API Integration',
description: 'Technology is moving fast, and so are new ideas. Profit from yours quickly.',
icon: PiMagicWandFill,
}, },
// {
// name: 'OpenAI ChatGPT API Integration',
// description: 'Technology is moving fast, and so are new ideas. Profit from yours quickly.',
// icon: '🧙‍♂️',
// },
{ {
name: 'No 3rd Party Services', name: 'No 3rd Party Services',
description: 'You own your data, and you own your code. No expensive 3rd party services to worry about.', description: 'You own your data, and you own your code. No expensive 3rd party services to worry about.',
icon: PiMagicWandFill, icon: '🚫',
},
{
name: 'Deploy Anywhere',
description: 'You own all your code, so deploy it wherever you want!',
icon: '🚀 ',
},
{
name: 'Complete Documentation & Support',
description: "We don't leave you hanging. We have tons of docs, and a Discord community to help!",
icon: '🫂',
}, },
]; ];
const tiers = [ const tiers = [
@ -150,14 +165,21 @@ export default function LandingPage() {
</div> </div>
<div className='hidden lg:flex lg:gap-x-12'> <div className='hidden lg:flex lg:gap-x-12'>
{navigation.map((item) => ( {navigation.map((item) => (
<a key={item.name} href={item.href} className='text-sm font-semibold leading-6 text-gray-900'> <a
key={item.name}
href={item.href}
className='text-sm font-semibold leading-6 text-gray-900 hover:text-yellow-500'
>
{item.name} {item.name}
</a> </a>
))} ))}
</div> </div>
<div className='hidden lg:flex lg:flex-1 lg:justify-end'> <div className='hidden lg:flex lg:flex-1 lg:justify-end lg:align-end'>
<a href='#' className='text-sm font-semibold leading-6 text-gray-900'> <a
Log in <span aria-hidden='true'>&rarr;</span> href='#'
className='flex justify-end items-center text-sm font-semibold leading-6 text-gray-900 hover:text-yellow-500'
>
Log in <BiLogIn size='1.1rem' className='ml-1 mt-[0.1rem]' />
</a> </a>
</div> </div>
</nav> </nav>
@ -211,38 +233,51 @@ export default function LandingPage() {
<main className='isolate'> <main className='isolate'>
{/* Hero section */} {/* Hero section */}
<div className='relative pt-14'> <div className='relative pt-14 w-full '>
<div className='absolute inset-x-0 top-80 -z-10 transform-gpu overflow-hidden blur-3xl' aria-hidden='true'> <div
className='absolute top-0 right-0 -z-10 transform-gpu overflow-hidden w-full blur-3xl sm:top-0 '
aria-hidden='true'
>
<div <div
className='relative left-1/2 aspect-[1155/678] w-[36.125rem] -translate-x-3/4 bg-gradient-to-tr from-amber-300 to-yellow-200 opacity-30 sm:left-1/2 sm:w-[72.1875rem]' className='aspect-[1020/880] w-[55rem] flex-none bg-gradient-to-tr from-amber-400 to-purple-300 opacity-40 sm:right-1/4 sm:translate-x-1/2'
style={{ style={{
clipPath: 'ellipse(50% 25% at 25% 50%)', clipPath: 'polygon(80% 20%, 90% 55%, 50% 100%, 70% 30%, 20% 50%, 50% 0)',
pointerEvents: 'none' /* This ensures the element does not block interaction with elements below it */,
}}
/>
</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 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>
<div className='py-24 sm:py-32'> <div className='py-24 sm:py-32'>
<div className='mx-auto max-w-7xl px-6 lg:px-8'> <div className='mx-auto max-w-8xl px-6 lg:px-8'>
<div className='mx-auto max-w-2xl text-center'> <div className='mx-auto max-w-2xl text-center'>
<h1 className='text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl'> <h1 className='text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl'>
The <span className='italic'>free</span> SaaS template with superpowers The <span className='italic'>free</span> SaaS template with superpowers
</h1> </h1>
<p className='mt-6 text-lg leading-8 text-gray-600'> <p className='mt-6 text-lg leading-8 text-gray-600'>
Get all the features of a modern SaaS app, in a ready-made teplate. Built on top of Wasp, the only Get all the features of a modern SaaS app, in a ready-made template. Built on top of Wasp, the only
full-stack React + NodeJS framework that builds features for you. full-stack React + NodeJS framework that builds features for you.
</p> </p>
<div className='mt-10 flex items-center justify-center gap-x-6'> <div className='mt-10 flex items-center justify-center gap-x-6'>
<a <a
href='#' href='#'
className='rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white hover:text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600' className='rounded-md bg-yellow-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:text-white shadow-sm hover:bg-yellow-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
> >
Get started
</a>
<a href='#' className='text-sm font-semibold leading-6 text-gray-900'>
Learn more <span aria-hidden='true'>→</span> Learn more <span aria-hidden='true'>→</span>
</a> </a>
</div> </div>
</div> </div>
<div className='mt-16 flow-root sm:mt-24 '> <div className='mt-14 flow-root sm:mt-14 '>
<div className='-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4'> <div className='-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4'>
<img <img
src='https://coverlettergpt.xyz/homepage.png' src='https://coverlettergpt.xyz/homepage.png'
@ -255,17 +290,17 @@ export default function LandingPage() {
</div> </div>
</div> </div>
</div> </div>
<div {/* <div
className='absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]' className='absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-45rem)]'
aria-hidden='true' aria-hidden='true'
> >
<div <div
className='relative left-1/2 aspect-[1155/678] w-[36.125rem] -translate-x-1/4 bg-gradient-to-tr from-amber-300 to-yellow-200 opacity-30 sm:left-1/2 sm:w-[72.1875rem]' className='relative aspect-[1020/880] left-3/4 -translate-x-1/4 bg-gradient-to-tr from-yellow-400 to-amber-300 opacity-50 w-[72.1875rem]'
style={{ style={{
clipPath: 'ellipse(50% 25% at 75% 40%)', clipPath: 'ellipse(80% 25% at 30% 40%)',
}} }}
/> />
</div> </div> */}
{/* <div {/* <div
className='absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]' className='absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]'
aria-hidden='true' aria-hidden='true'
@ -279,69 +314,66 @@ export default function LandingPage() {
/> />
</div> */} </div> */}
</div> </div>
{/*
<div className=' flex justify-center'>
<p className='relative px-5 py-3 text-sm text-gray-600 rounded-xl ring-[1.5px] ring-gray-200'>
<span className='hidden md:inline'>
Transistor saves up to $40,000 per year, per employee by working with us.
</span>
<a href='#' className='font-semibold text-indigo-600'>
<span className='absolute inset-0' aria-hidden='true' /> Read our case study{' '}
<span aria-hidden='true'>&rarr;</span>
</a>
</p>
</div> */}
<div className='mt-12 mx-auto max-w-7xl px-6 lg:px-8 flex flex-col items-between gap-y-6'>
<h2 className='text-center font-semibold tracking-wide leading-7 text-gray-500'>Built and Ships with</h2>
{/* Logo cloud */}
<div className='mx-auto max-w-7xl px-6 lg:px-8'>
<div className='mx-auto grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-12 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 sm:gap-y-14 lg:mx-0 lg:max-w-none lg:grid-cols-5'> <div className='mx-auto grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-12 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 sm:gap-y-14 lg:mx-0 lg:max-w-none lg:grid-cols-5'>
<img <img
className='col-span-2 max-h-12 w-full object-contain lg:col-span-1' className='col-span-2 max-h-12 w-full object-contain grayscale opacity-100 lg:col-span-1'
src='https://tailwindui.com/img/logos/158x48/transistor-logo-gray-900.svg' src='https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png'
alt='Transistor' alt='React'
width={158}
height={48} height={48}
/> />
<img <img
className='col-span-2 max-h-12 w-full object-contain lg:col-span-1' className='col-span-2 max-h-12 w-full object-contain grayscale opacity-70 lg:col-span-1'
src='https://tailwindui.com/img/logos/158x48/reform-logo-gray-900.svg' src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/590px-Node.js_logo.svg.png'
alt='Reform' alt='NodeJS'
width={158}
height={48} height={48}
/> />
<img <img
className='col-span-2 max-h-12 w-full object-contain lg:col-span-1' className='col-span-2 col-start-2 max-h-12 w-full object-contain grayscale opacity-80 sm:col-start-auto lg:col-span-1'
src='https://tailwindui.com/img/logos/158x48/tuple-logo-gray-900.svg' src={logo}
alt='Tuple' alt='Wasp'
width={158}
height={48} height={48}
/> />
<img <img
className='col-span-2 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1' className='col-span-2 max-h-12 w-full object-contain grayscale lg:col-span-1'
src='https://tailwindui.com/img/logos/158x48/savvycal-logo-gray-900.svg' src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Tailwind_CSS_Logo.svg/512px-Tailwind_CSS_Logo.svg.png'
alt='SavvyCal' alt='Tailwind CSS'
width={158}
height={48} height={48}
/> />
<img <img
className='col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto lg:col-span-1' className='col-span-2 max-h-12 w-full object-contain grayscale opacity-80 sm:col-start-2 lg:col-span-1'
src='https://tailwindui.com/img/logos/158x48/statamic-logo-gray-900.svg' src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Stripe_Logo%2C_revised_2016.svg/512px-Stripe_Logo%2C_revised_2016.svg.png'
alt='Statamic' alt='Stripe'
width={158}
height={48} height={48}
/> />
</div> </div>
<div className='mt-16 flex justify-center'>
<p className='relative rounded-full px-4 py-1.5 text-sm leading-6 text-gray-600 ring-1 ring-inset ring-gray-900/10 hover:ring-gray-900/20'>
<span className='hidden md:inline'>
Transistor saves up to $40,000 per year, per employee by working with us.
</span>
<a href='#' className='font-semibold text-indigo-600'>
<span className='absolute inset-0' aria-hidden='true' /> Read our case study{' '}
<span aria-hidden='true'>&rarr;</span>
</a>
</p>
</div>
</div> </div>
{/* Feature section */} {/* Feature section */}
<div className='mx-auto mt-32 max-w-7xl px-6 sm:mt-56 lg:px-8'> <div className='mx-auto mt-48 max-w-7xl px-6 lg:px-8'>
<div className='mx-auto max-w-2xl lg:text-center'> <div className='mx-auto max-w-2xl lg:text-center'>
<h2 className='text-base font-semibold leading-7 text-indigo-600'>Deploy faster</h2> <p className='mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl'>
<p className='mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl'> All the important <span className='text-yellow-500'>stuff</span>
Everything you need to deploy your app
</p> </p>
<p className='mt-6 text-lg leading-8 text-gray-600'> <p className='mt-6 text-lg leading-8 text-gray-600'>
Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum We've pre-built the important stuff.
pulvinar et feugiat blandit at. In mi viverra elit nunc. <br /> Wasp does all the boring stuff.
<br /> You get all the credit.
</p> </p>
</div> </div>
<div className='mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl'> <div className='mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl'>
@ -349,8 +381,9 @@ export default function LandingPage() {
{features.map((feature) => ( {features.map((feature) => (
<div key={feature.name} className='relative pl-16'> <div key={feature.name} className='relative pl-16'>
<dt className='text-base font-semibold leading-7 text-gray-900'> <dt className='text-base font-semibold leading-7 text-gray-900'>
<div className='absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600'> <div className='absolute left-0 top-0 flex h-10 w-10 items-center justify-center border border-yellow-400 bg-yellow-100/50 rounded-lg'>
<feature.icon className='h-6 w-6 text-white' aria-hidden='true' /> {/* <feature.icon className='h-6 w-6 text-white' aria-hidden='true' /> */}
<div className='text-2xl'>{feature.icon}</div>
</div> </div>
{feature.name} {feature.name}
</dt> </dt>
@ -363,49 +396,41 @@ export default function LandingPage() {
{/* Testimonial section */} {/* Testimonial section */}
<div className='mx-auto mt-32 max-w-7xl sm:mt-56 sm:px-6 lg:px-8'> <div className='mx-auto mt-32 max-w-7xl sm:mt-56 sm:px-6 lg:px-8'>
<div className='relative overflow-hidden bg-gray-900 px-6 py-20 shadow-xl sm:rounded-3xl sm:px-10 sm:py-24 md:px-12 lg:px-20'> <div className='-m-2 rounded-xl bg-yellow-400/20 p-1 lg:ring-1 lg:ring-inset lg:ring-yellow-500/50 lg:-m-4 lg:rounded-2xl lg:p-4'>
<img <div className='relative overflow-hidden bg-gray-900 px-6 py-20 shadow-xl sm:rounded-xl sm:px-10 sm:py-16 md:px-12 lg:px-20'>
className='absolute inset-0 h-full w-full object-cover brightness-150 saturate-0' <h2 className='text-left font-semibold tracking-wide leading-7 text-gray-500'>Testimonials</h2>
src='https://images.unsplash.com/photo-1601381718415-a05fb0a261f3?ixid=MXwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8ODl8fHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1216&q=80' <div className='relative flex gap-12 w-full mt-6 z-10 justify-between lg:mx-0'>
alt='' <figure className='flex-1 p-8 rounded-xl bg-gray-500/5 '>
/> <blockquote className='text-lg font-semibold text-white sm:text-xl sm:leading-8'>
<div className='absolute inset-0 bg-gray-900/90 mix-blend-multiply' /> <p>“My cats love it!”</p>
<div className='absolute -left-80 -top-56 transform-gpu blur-3xl' aria-hidden='true'> </blockquote>
<div <figcaption className=' mt-6 text-base text-white'>
className='aspect-[1097/845] w-[68.5625rem] bg-gradient-to-r from-[#ff4694] to-[#776fff] opacity-[0.45]' <div className='font-semibold'>Fecony</div>
style={{ <div className='mt-1'>Wasp Expert</div>
clipPath: </figcaption>
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)', </figure>
}} <figure className='flex-1 p-8 rounded-xl bg-gray-500/5 '>
/> <blockquote className='text-lg font-semibold text-white sm:text-xl sm:leading-8'>
</div> <p>“I've never SaaSed so much in my life. WOO!”</p>
<div </blockquote>
className='hidden md:absolute md:bottom-16 md:left-[50rem] md:block md:transform-gpu md:blur-3xl' <figcaption className=' mt-6 text-base text-white'>
aria-hidden='true' <div className='font-semibold'>Vince</div>
> <div className='mt-1'>Padawan Hacker</div>
<div </figcaption>
className='aspect-[1097/845] w-[68.5625rem] bg-gradient-to-r from-[#ff4694] to-[#776fff] opacity-25' </figure>
style={{ <figure className='flex-1 p-8 rounded-xl bg-gray-500/5 '>
clipPath: <blockquote className='text-lg font-semibold text-white sm:text-xl sm:leading-8'>
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)', <p>“I don't even know how to code. I'm just a plushie.”</p>
}} </blockquote>
/> <figcaption className=' mt-6 text-base text-white'>
</div> <div className='font-semibold'>Da Boi</div>
<div className='relative mx-auto max-w-2xl lg:mx-0'> <div className='mt-1'>Wasp's Unofficial Mascot</div>
<img className='h-12 w-auto' src='https://tailwindui.com/img/logos/workcation-logo-white.svg' alt='' /> </figcaption>
<figure> </figure>
<blockquote className='mt-6 text-lg font-semibold text-white sm:text-xl sm:leading-8'> </div>
<p> <div className='absolute top-10 right-0 sm:right-10 w-[10%] grayscale-[35%]'>
“Amet amet eget scelerisque tellus sit neque faucibus non eleifend. Integer eu praesent at a. Ornare <img src={daBoi} />
arcu gravida natoque erat et cursus tortor consequat at. Vulputate gravida sociis enim nullam </div>
ultricies habitant malesuada lorem ac.”
</p>
</blockquote>
<figcaption className='mt-6 text-base text-white'>
<div className='font-semibold'>Judith Black</div>
<div className='mt-1'>CEO of Tuple</div>
</figcaption>
</figure>
</div> </div>
</div> </div>
</div> </div>
@ -414,42 +439,39 @@ export default function LandingPage() {
<div className='py-24 sm:pt-48'> <div className='py-24 sm:pt-48'>
<div className='mx-auto max-w-7xl px-6 lg:px-8'> <div className='mx-auto max-w-7xl px-6 lg:px-8'>
<div className='mx-auto max-w-4xl text-center'> <div className='mx-auto max-w-4xl text-center'>
<h2 className='text-base font-semibold leading-7 text-indigo-600'>Pricing</h2> <h2 className='mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl'>
<p className='mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl'> Pick your <span className='text-yellow-500'>pricing</span>
Pricing plans for teams of&nbsp;all&nbsp;sizes </h2>
</p>
</div> </div>
<p className='mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600'> <p className='mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600'>
Distinctio et nulla eum soluta et neque labore quibusdam. Saepe et quasi iusto modi velit ut non voluptas Secure Stripe webhooks, and a complete subscription management system are built-in.
in. Explicabo id ut laborum.
</p> </p>
<div className='isolate mx-auto mt-16 grid max-w-md grid-cols-1 gap-y-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3'> <div className='isolate flex gap-4 mx-auto mt-10 max-w-md sm:mt-212 lg:mx-0 lg:max-w-none'>
{tiers.map((tier, tierIdx) => ( {tiers.map((tier) => (
<div <div
key={tier.id} key={tier.id}
className={classNames( className={`relative flex flex-col ${
tier.mostPopular ? 'lg:z-10 lg:rounded-b-none' : 'lg:mt-8', tier.mostPopular ? 'flex-2 ring-2' : 'flex-1 ring-1'
tierIdx === 0 ? 'lg:rounded-r-none' : '', } lg:mt-8 justify-between rounded-3xl ring-gray-200 overflow-hidden p-8 xl:p-10`}
tierIdx === tiers.length - 1 ? 'lg:rounded-l-none' : '',
'flex flex-col justify-between rounded-3xl bg-white p-8 ring-1 ring-gray-200 xl:p-10'
)}
> >
{tier.mostPopular && (
<div
className='absolute top-0 right-0 -z-10 w-full h-full transform-gpu blur-3xl'
aria-hidden='true'
>
<div
className='absolute w-full h-full bg-gradient-to-br from-amber-400 to-purple-300 opacity-30'
style={{
clipPath: 'circle(670% at 50% 50%)',
}}
/>
</div>
)}
<div> <div>
<div className='flex items-center justify-between gap-x-4'> <div className='flex items-center justify-between gap-x-4'>
<h3 <h3 id={tier.id} className='text-gray-900 text-lg font-semibold leading-8'>
id={tier.id}
className={classNames(
tier.mostPopular ? 'text-indigo-600' : 'text-gray-900',
'text-lg font-semibold leading-8'
)}
>
{tier.name} {tier.name}
</h3> </h3>
{tier.mostPopular ? (
<p className='rounded-full bg-indigo-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-indigo-600'>
Most popular
</p>
) : null}
</div> </div>
<p className='mt-4 text-sm leading-6 text-gray-600'>{tier.description}</p> <p className='mt-4 text-sm leading-6 text-gray-600'>{tier.description}</p>
<p className='mt-6 flex items-baseline gap-x-1'> <p className='mt-6 flex items-baseline gap-x-1'>
@ -459,7 +481,7 @@ export default function LandingPage() {
<ul role='list' className='mt-8 space-y-3 text-sm leading-6 text-gray-600'> <ul role='list' className='mt-8 space-y-3 text-sm leading-6 text-gray-600'>
{tier.features.map((feature) => ( {tier.features.map((feature) => (
<li key={feature} className='flex gap-x-3'> <li key={feature} className='flex gap-x-3'>
<AiFillCheckCircle className='h-6 w-5 flex-none text-indigo-600' aria-hidden='true' /> <AiFillCheckCircle className='h-6 w-5 flex-none text-purple-300' aria-hidden='true' />
{feature} {feature}
</li> </li>
))} ))}
@ -470,7 +492,7 @@ export default function LandingPage() {
aria-describedby={tier.id} aria-describedby={tier.id}
className={classNames( className={classNames(
tier.mostPopular tier.mostPopular
? 'bg-indigo-600 text-white shadow-sm hover:bg-indigo-500' ? 'bg-yellow-500 text-white shadow-sm hover:bg-indigo-500'
: 'text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300', : 'text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300',
'mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600' 'mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
)} )}

1
src/client/NavBar.tsx
View File

@ -3,6 +3,7 @@
import { Disclosure } from '@headlessui/react'; import { Disclosure } from '@headlessui/react';
import { AiOutlineBars, AiOutlineClose, AiOutlineUser } from 'react-icons/ai'; import { AiOutlineBars, AiOutlineClose, AiOutlineUser } from 'react-icons/ai';
import useAuth from '@wasp/auth/useAuth'; import useAuth from '@wasp/auth/useAuth';
import logo from './static/logo.png'
const active = 'inline-flex items-center border-b-2 border-indigo-300 px-1 pt-1 text-sm font-medium text-gray-900'; const active = 'inline-flex items-center border-b-2 border-indigo-300 px-1 pt-1 text-sm font-medium text-gray-900';
const inactive = 'inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700' const inactive = 'inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700'

BIN
src/client/static/magic-app-gen-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB