add new landing page

main.wasp

@@ -56,7 +56,7 @@ app SaaSTemplate {
     ("@tailwindcss/forms", "^0.5.3"),
     ("@tailwindcss/typography", "^0.5.7"),
     ("react-hook-form", "7.43.1"),
-    ("react-icons", "4.8.0"),
+    ("react-icons", "4.11.0"),
     ("request-ip", "3.3.0"),
     ("@types/request-ip", "0.0.37"),
     ("node-fetch", "3.3.0"),
@@ -117,6 +117,11 @@ page 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 }
 page LoginPage {
   component: import Login from "@client/auth/LoginPage"

src/client/App.tsx

@@ -10,7 +10,7 @@ export default function App({ children }: { children: ReactNode }) {
    */
   return (
     <div>
-      <NavBar />
+      {/* <NavBar /> */}
       <div className='mx-auto max-w-7xl sm:px-6 lg:px-8 '>{children}</div>
     </div>
   );

src/client/LandingPage.tsx

@@ -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'>&rarr;</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'>&rarr;</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&nbsp;all&nbsp;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>
+  );
+}

src/client/NavBar.tsx

@@ -1,5 +1,5 @@
 
-import logo from './static/logo.png'
+
 import { Disclosure } from '@headlessui/react';
 import { AiOutlineBars, AiOutlineClose, AiOutlineUser } from 'react-icons/ai';
 import useAuth from '@wasp/auth/useAuth';