mirror of
https://github.com/wasp-lang/open-saas.git
synced 2025-06-07 05:29:32 +02:00
add new landing page
This commit is contained in:
vincanger
parent
5b27934f66
commit
25e5c2cda9
@ -56,7 +56,7 @@ app SaaSTemplate {
|
|||||||
("@tailwindcss/forms", "^0.5.3"),
|
("@tailwindcss/forms", "^0.5.3"),
|
||||||
("@tailwindcss/typography", "^0.5.7"),
|
("@tailwindcss/typography", "^0.5.7"),
|
||||||
("react-hook-form", "7.43.1"),
|
("react-hook-form", "7.43.1"),
|
||||||
("react-icons", "4.8.0"),
|
("react-icons", "4.11.0"),
|
||||||
("request-ip", "3.3.0"),
|
("request-ip", "3.3.0"),
|
||||||
("@types/request-ip", "0.0.37"),
|
("@types/request-ip", "0.0.37"),
|
||||||
("node-fetch", "3.3.0"),
|
("node-fetch", "3.3.0"),
|
||||||
@ -117,6 +117,11 @@ page MainPage {
|
|||||||
component: import Main from "@client/MainPage"
|
component: import Main from "@client/MainPage"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
route LandingPageRoute { path: "/landing-page", to: LandingPage }
|
||||||
|
page LandingPage {
|
||||||
|
component: import LandingPage from "@client/LandingPage"
|
||||||
|
}
|
||||||
|
|
||||||
route LoginRoute { path: "/login", to: LoginPage }
|
route LoginRoute { path: "/login", to: LoginPage }
|
||||||
page LoginPage {
|
page LoginPage {
|
||||||
component: import Login from "@client/auth/LoginPage"
|
component: import Login from "@client/auth/LoginPage"
|
||||||
|
|||||||
@ -10,7 +10,7 @@ export default function App({ children }: { children: ReactNode }) {
|
|||||||
*/
|
*/
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<NavBar />
|
{/* <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>
|
||||||
);
|
);
|
||||||
|
|||||||
626
src/client/LandingPage.tsx
Normal file
626
src/client/LandingPage.tsx
Normal file
@ -0,0 +1,626 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Dialog } from '@headlessui/react';
|
||||||
|
import { AiFillCheckCircle, AiFillCloseCircle } from 'react-icons/ai';
|
||||||
|
import { FiKey } from 'react-icons/fi';
|
||||||
|
import { MdPayments } from 'react-icons/md';
|
||||||
|
import { HiDocumentText } from 'react-icons/hi';
|
||||||
|
import { PiMagicWandFill } from 'react-icons/pi';
|
||||||
|
import { HiBars3 } from 'react-icons/hi2';
|
||||||
|
import logo from './static/logo.png';
|
||||||
|
|
||||||
|
const navigation = [
|
||||||
|
{ name: 'Product', href: '#' },
|
||||||
|
{ name: 'Features', href: '#' },
|
||||||
|
{ name: 'Marketplace', href: '#' },
|
||||||
|
{ name: 'Company', href: '#' },
|
||||||
|
];
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
name: 'Auto-magic Auth',
|
||||||
|
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',
|
||||||
|
icon: FiKey,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Stripe Integration',
|
||||||
|
description:
|
||||||
|
"No SaaS is complete without payments. That's why subscriptions and there necessary webhooks are built-in!",
|
||||||
|
icon: MdPayments,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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: 'No 3rd Party Services',
|
||||||
|
description: 'You own your data, and you own your code. No expensive 3rd party services to worry about.',
|
||||||
|
icon: PiMagicWandFill,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const tiers = [
|
||||||
|
{
|
||||||
|
name: 'Freelancer',
|
||||||
|
id: 'tier-freelancer',
|
||||||
|
href: '#',
|
||||||
|
priceMonthly: '$24',
|
||||||
|
description: 'The essentials to provide your best work for clients.',
|
||||||
|
features: ['5 products', 'Up to 1,000 subscribers', 'Basic analytics', '48-hour support response time'],
|
||||||
|
mostPopular: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Startup',
|
||||||
|
id: 'tier-startup',
|
||||||
|
href: '#',
|
||||||
|
priceMonthly: '$32',
|
||||||
|
description: 'A plan that scales with your rapidly growing business.',
|
||||||
|
features: [
|
||||||
|
'25 products',
|
||||||
|
'Up to 10,000 subscribers',
|
||||||
|
'Advanced analytics',
|
||||||
|
'24-hour support response time',
|
||||||
|
'Marketing automations',
|
||||||
|
],
|
||||||
|
mostPopular: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Enterprise',
|
||||||
|
id: 'tier-enterprise',
|
||||||
|
href: '#',
|
||||||
|
priceMonthly: '$48',
|
||||||
|
description: 'Dedicated support and infrastructure for your company.',
|
||||||
|
features: [
|
||||||
|
'Unlimited products',
|
||||||
|
'Unlimited subscribers',
|
||||||
|
'Advanced analytics',
|
||||||
|
'1-hour, dedicated support response time',
|
||||||
|
'Marketing automations',
|
||||||
|
],
|
||||||
|
mostPopular: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const faqs = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
question: "What's the best thing about Switzerland?",
|
||||||
|
answer:
|
||||||
|
"I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
|
||||||
|
},
|
||||||
|
// More questions...
|
||||||
|
];
|
||||||
|
const footerNavigation = {
|
||||||
|
solutions: [
|
||||||
|
{ name: 'Hosting', href: '#' },
|
||||||
|
{ name: 'Data Services', href: '#' },
|
||||||
|
{ name: 'Uptime Monitoring', href: '#' },
|
||||||
|
{ name: 'Enterprise Services', href: '#' },
|
||||||
|
],
|
||||||
|
support: [
|
||||||
|
{ name: 'Pricing', href: '#' },
|
||||||
|
{ name: 'Documentation', href: '#' },
|
||||||
|
{ name: 'Guides', href: '#' },
|
||||||
|
{ name: 'API Reference', href: '#' },
|
||||||
|
],
|
||||||
|
company: [
|
||||||
|
{ name: 'About', href: '#' },
|
||||||
|
{ name: 'Blog', href: '#' },
|
||||||
|
{ name: 'Jobs', href: '#' },
|
||||||
|
{ name: 'Press', href: '#' },
|
||||||
|
{ name: 'Partners', href: '#' },
|
||||||
|
],
|
||||||
|
legal: [
|
||||||
|
{ name: 'Claim', href: '#' },
|
||||||
|
{ name: 'Privacy', href: '#' },
|
||||||
|
{ name: 'Terms', href: '#' },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
function classNames(...classes: string[]) {
|
||||||
|
return classes.filter(Boolean).join(' ');
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function LandingPage() {
|
||||||
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='bg-white'>
|
||||||
|
{/* Header */}
|
||||||
|
<header className='absolute inset-x-0 top-0 z-50'>
|
||||||
|
<nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
|
||||||
|
<div className='flex lg:flex-1'>
|
||||||
|
<a href='/' className='-m-1.5 p-1.5'>
|
||||||
|
<img className='h-8 w-8' src={logo} alt='My SaaS App' />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className='flex lg:hidden'>
|
||||||
|
<button
|
||||||
|
type='button'
|
||||||
|
className='-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700'
|
||||||
|
onClick={() => setMobileMenuOpen(true)}
|
||||||
|
>
|
||||||
|
<span className='sr-only'>Open main menu</span>
|
||||||
|
<HiBars3 className='h-6 w-6' aria-hidden='true' />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className='hidden lg:flex lg:gap-x-12'>
|
||||||
|
{navigation.map((item) => (
|
||||||
|
<a key={item.name} href={item.href} className='text-sm font-semibold leading-6 text-gray-900'>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className='hidden lg:flex lg:flex-1 lg:justify-end'>
|
||||||
|
<a href='#' className='text-sm font-semibold leading-6 text-gray-900'>
|
||||||
|
Log in <span aria-hidden='true'>→</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<Dialog as='div' className='lg:hidden' open={mobileMenuOpen} onClose={setMobileMenuOpen}>
|
||||||
|
<div className='fixed inset-0 z-50' />
|
||||||
|
<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'>
|
||||||
|
<div className='flex items-center justify-between'>
|
||||||
|
<a href='#' className='-m-1.5 p-1.5'>
|
||||||
|
<span className='sr-only'>Your Company</span>
|
||||||
|
<img
|
||||||
|
className='h-8 w-auto'
|
||||||
|
src='https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600'
|
||||||
|
alt=''
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<button
|
||||||
|
type='button'
|
||||||
|
className='-m-2.5 rounded-md p-2.5 text-gray-700'
|
||||||
|
onClick={() => setMobileMenuOpen(false)}
|
||||||
|
>
|
||||||
|
<span className='sr-only'>Close menu</span>
|
||||||
|
<AiFillCloseCircle className='h-6 w-6' aria-hidden='true' />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className='mt-6 flow-root'>
|
||||||
|
<div className='-my-6 divide-y divide-gray-500/10'>
|
||||||
|
<div className='space-y-2 py-6'>
|
||||||
|
{navigation.map((item) => (
|
||||||
|
<a
|
||||||
|
key={item.name}
|
||||||
|
href={item.href}
|
||||||
|
className='-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50'
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className='py-6'>
|
||||||
|
<a
|
||||||
|
href='#'
|
||||||
|
className='-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50'
|
||||||
|
>
|
||||||
|
Log in
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Dialog.Panel>
|
||||||
|
</Dialog>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main className='isolate'>
|
||||||
|
{/* Hero section */}
|
||||||
|
<div className='relative pt-14'>
|
||||||
|
<div className='absolute inset-x-0 top-80 -z-10 transform-gpu overflow-hidden blur-3xl' aria-hidden='true'>
|
||||||
|
<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]'
|
||||||
|
style={{
|
||||||
|
clipPath: 'ellipse(50% 25% at 25% 50%)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<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-2xl text-center'>
|
||||||
|
<h1 className='text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl'>
|
||||||
|
The <span className='italic'>free</span> SaaS template with superpowers
|
||||||
|
</h1>
|
||||||
|
<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
|
||||||
|
full-stack React + NodeJS framework that builds features for you.
|
||||||
|
</p>
|
||||||
|
<div className='mt-10 flex items-center justify-center gap-x-6'>
|
||||||
|
<a
|
||||||
|
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'
|
||||||
|
>
|
||||||
|
Get started
|
||||||
|
</a>
|
||||||
|
<a href='#' className='text-sm font-semibold leading-6 text-gray-900'>
|
||||||
|
Learn more <span aria-hidden='true'>→</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='mt-16 flow-root sm:mt-24 '>
|
||||||
|
<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
|
||||||
|
src='https://coverlettergpt.xyz/homepage.png'
|
||||||
|
alt='App screenshot'
|
||||||
|
// width={2432}
|
||||||
|
// height={1442}
|
||||||
|
className='rounded-md shadow-2xl ring-1 ring-gray-900/10'
|
||||||
|
/>
|
||||||
|
</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)]'
|
||||||
|
aria-hidden='true'
|
||||||
|
>
|
||||||
|
<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]'
|
||||||
|
style={{
|
||||||
|
clipPath: 'ellipse(50% 25% at 75% 40%)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* <div
|
||||||
|
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'
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className='relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]'
|
||||||
|
style={{
|
||||||
|
clipPath:
|
||||||
|
'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%)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 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'>
|
||||||
|
<img
|
||||||
|
className='col-span-2 max-h-12 w-full object-contain lg:col-span-1'
|
||||||
|
src='https://tailwindui.com/img/logos/158x48/transistor-logo-gray-900.svg'
|
||||||
|
alt='Transistor'
|
||||||
|
width={158}
|
||||||
|
height={48}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
className='col-span-2 max-h-12 w-full object-contain lg:col-span-1'
|
||||||
|
src='https://tailwindui.com/img/logos/158x48/reform-logo-gray-900.svg'
|
||||||
|
alt='Reform'
|
||||||
|
width={158}
|
||||||
|
height={48}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
className='col-span-2 max-h-12 w-full object-contain lg:col-span-1'
|
||||||
|
src='https://tailwindui.com/img/logos/158x48/tuple-logo-gray-900.svg'
|
||||||
|
alt='Tuple'
|
||||||
|
width={158}
|
||||||
|
height={48}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
className='col-span-2 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1'
|
||||||
|
src='https://tailwindui.com/img/logos/158x48/savvycal-logo-gray-900.svg'
|
||||||
|
alt='SavvyCal'
|
||||||
|
width={158}
|
||||||
|
height={48}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
className='col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto lg:col-span-1'
|
||||||
|
src='https://tailwindui.com/img/logos/158x48/statamic-logo-gray-900.svg'
|
||||||
|
alt='Statamic'
|
||||||
|
width={158}
|
||||||
|
height={48}
|
||||||
|
/>
|
||||||
|
</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'>→</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Feature section */}
|
||||||
|
<div className='mx-auto mt-32 max-w-7xl px-6 sm:mt-56 lg:px-8'>
|
||||||
|
<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-3xl font-bold tracking-tight text-gray-900 sm:text-4xl'>
|
||||||
|
Everything you need to deploy your app
|
||||||
|
</p>
|
||||||
|
<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
|
||||||
|
pulvinar et feugiat blandit at. In mi viverra elit nunc.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className='mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl'>
|
||||||
|
<dl className='grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16'>
|
||||||
|
{features.map((feature) => (
|
||||||
|
<div key={feature.name} className='relative pl-16'>
|
||||||
|
<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'>
|
||||||
|
<feature.icon className='h-6 w-6 text-white' aria-hidden='true' />
|
||||||
|
</div>
|
||||||
|
{feature.name}
|
||||||
|
</dt>
|
||||||
|
<dd className='mt-2 text-base leading-7 text-gray-600'>{feature.description}</dd>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Testimonial section */}
|
||||||
|
<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'>
|
||||||
|
<img
|
||||||
|
className='absolute inset-0 h-full w-full object-cover brightness-150 saturate-0'
|
||||||
|
src='https://images.unsplash.com/photo-1601381718415-a05fb0a261f3?ixid=MXwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8ODl8fHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1216&q=80'
|
||||||
|
alt=''
|
||||||
|
/>
|
||||||
|
<div className='absolute inset-0 bg-gray-900/90 mix-blend-multiply' />
|
||||||
|
<div className='absolute -left-80 -top-56 transform-gpu blur-3xl' aria-hidden='true'>
|
||||||
|
<div
|
||||||
|
className='aspect-[1097/845] w-[68.5625rem] bg-gradient-to-r from-[#ff4694] to-[#776fff] opacity-[0.45]'
|
||||||
|
style={{
|
||||||
|
clipPath:
|
||||||
|
'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%)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className='hidden md:absolute md:bottom-16 md:left-[50rem] md:block md:transform-gpu md:blur-3xl'
|
||||||
|
aria-hidden='true'
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className='aspect-[1097/845] w-[68.5625rem] bg-gradient-to-r from-[#ff4694] to-[#776fff] opacity-25'
|
||||||
|
style={{
|
||||||
|
clipPath:
|
||||||
|
'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%)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='relative mx-auto max-w-2xl lg:mx-0'>
|
||||||
|
<img className='h-12 w-auto' src='https://tailwindui.com/img/logos/workcation-logo-white.svg' alt='' />
|
||||||
|
<figure>
|
||||||
|
<blockquote className='mt-6 text-lg font-semibold text-white sm:text-xl sm:leading-8'>
|
||||||
|
<p>
|
||||||
|
“Amet amet eget scelerisque tellus sit neque faucibus non eleifend. Integer eu praesent at a. Ornare
|
||||||
|
arcu gravida natoque erat et cursus tortor consequat at. Vulputate gravida sociis enim nullam
|
||||||
|
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>
|
||||||
|
|
||||||
|
{/* Pricing section */}
|
||||||
|
<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-4xl text-center'>
|
||||||
|
<h2 className='text-base font-semibold leading-7 text-indigo-600'>Pricing</h2>
|
||||||
|
<p className='mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl'>
|
||||||
|
Pricing plans for teams of all sizes
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<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
|
||||||
|
in. Explicabo id ut laborum.
|
||||||
|
</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'>
|
||||||
|
{tiers.map((tier, tierIdx) => (
|
||||||
|
<div
|
||||||
|
key={tier.id}
|
||||||
|
className={classNames(
|
||||||
|
tier.mostPopular ? 'lg:z-10 lg:rounded-b-none' : 'lg:mt-8',
|
||||||
|
tierIdx === 0 ? 'lg:rounded-r-none' : '',
|
||||||
|
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'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div className='flex items-center justify-between gap-x-4'>
|
||||||
|
<h3
|
||||||
|
id={tier.id}
|
||||||
|
className={classNames(
|
||||||
|
tier.mostPopular ? 'text-indigo-600' : 'text-gray-900',
|
||||||
|
'text-lg font-semibold leading-8'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{tier.name}
|
||||||
|
</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>
|
||||||
|
<p className='mt-4 text-sm leading-6 text-gray-600'>{tier.description}</p>
|
||||||
|
<p className='mt-6 flex items-baseline gap-x-1'>
|
||||||
|
<span className='text-4xl font-bold tracking-tight text-gray-900'>{tier.priceMonthly}</span>
|
||||||
|
<span className='text-sm font-semibold leading-6 text-gray-600'>/month</span>
|
||||||
|
</p>
|
||||||
|
<ul role='list' className='mt-8 space-y-3 text-sm leading-6 text-gray-600'>
|
||||||
|
{tier.features.map((feature) => (
|
||||||
|
<li key={feature} className='flex gap-x-3'>
|
||||||
|
<AiFillCheckCircle className='h-6 w-5 flex-none text-indigo-600' aria-hidden='true' />
|
||||||
|
{feature}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href={tier.href}
|
||||||
|
aria-describedby={tier.id}
|
||||||
|
className={classNames(
|
||||||
|
tier.mostPopular
|
||||||
|
? 'bg-indigo-600 text-white shadow-sm hover:bg-indigo-500'
|
||||||
|
: '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'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Buy plan
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* FAQs */}
|
||||||
|
<div className='mx-auto max-w-2xl divide-y divide-gray-900/10 px-6 pb-8 sm:pb-24 sm:pt-12 lg:max-w-7xl lg:px-8 lg:pb-32'>
|
||||||
|
<h2 className='text-2xl font-bold leading-10 tracking-tight text-gray-900'>Frequently asked questions</h2>
|
||||||
|
<dl className='mt-10 space-y-8 divide-y divide-gray-900/10'>
|
||||||
|
{faqs.map((faq) => (
|
||||||
|
<div key={faq.id} className='pt-8 lg:grid lg:grid-cols-12 lg:gap-8'>
|
||||||
|
<dt className='text-base font-semibold leading-7 text-gray-900 lg:col-span-5'>{faq.question}</dt>
|
||||||
|
<dd className='mt-4 lg:col-span-7 lg:mt-0'>
|
||||||
|
<p className='text-base leading-7 text-gray-600'>{faq.answer}</p>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CTA section */}
|
||||||
|
<div className='relative -z-10 mt-32 px-6 lg:px-8'>
|
||||||
|
<div
|
||||||
|
className='absolute inset-x-0 top-1/2 -z-10 flex -translate-y-1/2 transform-gpu justify-center overflow-hidden blur-3xl sm:bottom-0 sm:right-[calc(50%-6rem)] sm:top-auto sm:translate-y-0 sm:transform-gpu sm:justify-end'
|
||||||
|
aria-hidden='true'
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className='aspect-[1108/632] w-[69.25rem] flex-none bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-25'
|
||||||
|
style={{
|
||||||
|
clipPath:
|
||||||
|
'polygon(73.6% 48.6%, 91.7% 88.5%, 100% 53.9%, 97.4% 18.1%, 92.5% 15.4%, 75.7% 36.3%, 55.3% 52.8%, 46.5% 50.9%, 45% 37.4%, 50.3% 13.1%, 21.3% 36.2%, 0.1% 0.1%, 5.4% 49.1%, 21.4% 36.4%, 58.9% 100%, 73.6% 48.6%)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='mx-auto max-w-2xl text-center'>
|
||||||
|
<h2 className='text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl'>
|
||||||
|
Boost your productivity.
|
||||||
|
<br />
|
||||||
|
Start using our app today.
|
||||||
|
</h2>
|
||||||
|
<p className='mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-600'>
|
||||||
|
Incididunt sint fugiat pariatur cupidatat consectetur sit cillum anim id veniam aliqua proident excepteur
|
||||||
|
commodo do ea.
|
||||||
|
</p>
|
||||||
|
<div className='mt-10 flex items-center justify-center gap-x-6'>
|
||||||
|
<a
|
||||||
|
href='#'
|
||||||
|
className='rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold 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'
|
||||||
|
>
|
||||||
|
Get started
|
||||||
|
</a>
|
||||||
|
<a href='#' className='text-sm font-semibold leading-6 text-gray-900'>
|
||||||
|
Learn more <span aria-hidden='true'>→</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className='absolute left-1/2 right-0 top-full -z-10 hidden -translate-y-1/2 transform-gpu overflow-hidden blur-3xl sm:block'
|
||||||
|
aria-hidden='true'
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className='aspect-[1155/678] w-[72.1875rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30'
|
||||||
|
style={{
|
||||||
|
clipPath:
|
||||||
|
'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%)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className='mx-auto mt-32 max-w-7xl px-6 lg:px-8'>
|
||||||
|
<footer
|
||||||
|
aria-labelledby='footer-heading'
|
||||||
|
className='relative border-t border-gray-900/10 py-24 sm:mt-56 sm:py-32'
|
||||||
|
>
|
||||||
|
<h2 id='footer-heading' className='sr-only'>
|
||||||
|
Footer
|
||||||
|
</h2>
|
||||||
|
<div className='xl:grid xl:grid-cols-3 xl:gap-8'>
|
||||||
|
<img
|
||||||
|
className='h-7'
|
||||||
|
src='https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600'
|
||||||
|
alt='Company name'
|
||||||
|
/>
|
||||||
|
<div className='mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0'>
|
||||||
|
<div className='md:grid md:grid-cols-2 md:gap-8'>
|
||||||
|
<div>
|
||||||
|
<h3 className='text-sm font-semibold leading-6 text-gray-900'>Solutions</h3>
|
||||||
|
<ul role='list' className='mt-6 space-y-4'>
|
||||||
|
{footerNavigation.solutions.map((item) => (
|
||||||
|
<li key={item.name}>
|
||||||
|
<a href={item.href} className='text-sm leading-6 text-gray-600 hover:text-gray-900'>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className='mt-10 md:mt-0'>
|
||||||
|
<h3 className='text-sm font-semibold leading-6 text-gray-900'>Support</h3>
|
||||||
|
<ul role='list' className='mt-6 space-y-4'>
|
||||||
|
{footerNavigation.support.map((item) => (
|
||||||
|
<li key={item.name}>
|
||||||
|
<a href={item.href} className='text-sm leading-6 text-gray-600 hover:text-gray-900'>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='md:grid md:grid-cols-2 md:gap-8'>
|
||||||
|
<div>
|
||||||
|
<h3 className='text-sm font-semibold leading-6 text-gray-900'>Company</h3>
|
||||||
|
<ul role='list' className='mt-6 space-y-4'>
|
||||||
|
{footerNavigation.company.map((item) => (
|
||||||
|
<li key={item.name}>
|
||||||
|
<a href={item.href} className='text-sm leading-6 text-gray-600 hover:text-gray-900'>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className='mt-10 md:mt-0'>
|
||||||
|
<h3 className='text-sm font-semibold leading-6 text-gray-900'>Legal</h3>
|
||||||
|
<ul role='list' className='mt-6 space-y-4'>
|
||||||
|
{footerNavigation.legal.map((item) => (
|
||||||
|
<li key={item.name}>
|
||||||
|
<a href={item.href} className='text-sm leading-6 text-gray-600 hover:text-gray-900'>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
|
|
||||||
import logo from './static/logo.png'
|
|
||||||
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';
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user