Created new landing page for Beta.

2024-09-11 15:26:19 +03:00 · 2022-10-24 10:43:21 +02:00 · 2022-10-24 10:43:21 +02:00 · 9050ce3c74
commit 9050ce3c74
parent 140cbcd018
70 changed files with 12868 additions and 1365 deletions
--- a/.gitignore
+++ b/.gitignore
@ -4,6 +4,8 @@

 # editor related
 .idea/
+*.swo
+*.swp

 # macOS related
 .DS_Store
--- a/project-page/.eslintrc.json
+++ b/project-page/.eslintrc.json
@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
--- a/project-page/.gitignore
+++ b/project-page/.gitignore
@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/project-page/README.md
+++ b/project-page/README.md
@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
--- a/project-page/components/Benefits.js
+++ b/project-page/components/Benefits.js
@ -0,0 +1,102 @@
+import classNames from 'classnames'
+import { Terminal, Layers, Coffee, Code } from 'react-feather'
+
+import SectionContainer from './Layouts/SectionContainer'
+
+import styles from '../styles/index.module.css'
+
+const Lang = () => (
+  <>
+    <span className='underline decoration-yellow-500 font-bold'>
+      language
+    </span>
+  </>
+)
+
+const Benefit = ({ Icon, title, description }) => (
+  <div className='mb-10 md:mb-0 space-y-4'>
+    <div className='flex items-center'>
+      <div
+        className={`
+          inline-flex h-8 w-8 rounded-md
+          items-center justify-center
+          text-yellow-500 bg-neutral-700
+        `}
+      >
+        <Icon size={20} />
+      </div>
+      <dt className='ml-4'>
+        { title }
+      </dt>
+    </div>
+    <p className=''>
+      { description }
+    </p>
+  </div>
+)
+
+const Benefits = () => {
+  return (
+    <SectionContainer className='space-y-16'>
+      <div className='grid grid-cols-12'>
+        <div className='col-span-12 text-center'>
+          <h2 className='text-xl lg:text-2xl text-neutral-700 mb-4'>
+            Yet another web framework. Except it is
+            a <Lang />.
+          </h2>
+          <p className='text-neutral-500'>
+            Don&apos;t worry, it takes less than 30 minutes to learn.
+          </p>
+        </div>
+      </div>
+
+      <dl className='grid grid-cols-1 lg:grid-cols-3 md:gap-16 lg:gap-x-8 xl:gap-x-24'>
+        <Benefit
+          Icon={Layers}
+          title='Truly full-stack'
+          description={`
+            When we say full-stack, we really mean it. Wasp has you covered from front-end,
+            back-end and database to deployment. Zero config required to get started.
+          `}
+        />
+
+        <Benefit
+          Icon={Coffee}
+          title='The wheel can take a break'
+          description={`
+            No reinventing the wheel here. Write your code in React & Node.js as you are used to,
+            along with your favourite NPM packages.
+          `}
+        />
+
+        <Benefit
+          Icon={Code}
+          title='Less boilerplate'
+          description={`
+            The language approach allows us to immensely improve developer experience.
+            E.g., full-stack auth takes only 5 lines of code.
+          `}
+        />
+      </dl>
+    </SectionContainer>
+  )
+}
+
+const BenefitsWithSkewedBorder = () => (
+  <div className='relative'>
+    <div className={classNames(styles.sectionSkewedContainer)}>
+      <div
+        className={classNames(
+          styles.sectionSkewed,
+          'border-t border-b border-yellow-500/25 bg-neutral-100/50'
+        )}
+      >
+      </div>
+    </div>
+    <div className='relative'>
+      <Benefits />
+    </div>
+  </div>
+)
+
+export default BenefitsWithSkewedBorder
--- a/project-page/components/DarkModeToggle.js
+++ b/project-page/components/DarkModeToggle.js
@ -0,0 +1,44 @@
+import { useState } from 'react'
+import { Sun, Moon } from 'react-feather'
+
+const DarkModeToggle = () => {
+  const [isDarkMode, setIsDarkMode] = useState(false)
+  
+  const toggleDarkMode = () => {
+    setIsDarkMode(!isDarkMode)
+  }
+  
+  return (
+    <div className='flex items-end'>
+      <Sun strokeWidth={2} size={22} className='text-neutral-500' />
+      <button
+        type='button'
+        aria-pressed='false'
+        className={`
+          relative inline-flex
+          h-6 w-11 mx-3 flex-shrink-0 cursor-pointer
+          rounded-full border-2 border-transparent
+          bg-neutral-500
+          transition-colors duration-200 ease-in-out focus:outline-none
+        `}
+        onClick={() => toggleDarkMode()}
+      >
+        <span
+          aria-hidden='true'
+          className={`
+            ${isDarkMode ? 'translate-x-5' : 'translate-x-0'}
+            inline-block h-5 w-5
+            bg-white shadow-lg rounded-full ring-0
+            transform transition duration-200 ease-in-out
+          `}
+        />
+      </button>
+
+      <Moon strokeWidth={2} size={22} className='text-neutral-500' />
+    </div>
+    
+
+  )
+}
+
+export default DarkModeToggle
--- a/project-page/components/Faq.js
+++ b/project-page/components/Faq.js
@ -0,0 +1,92 @@
+import { useState } from 'react'
+import Link from 'next/link'
+import { ChevronDown, ChevronRight } from 'react-feather'
+
+import SectionContainer from './Layouts/SectionContainer'
+
+const faqs = [
+  {
+    question: 'How is Wasp different from Next.js / Nuxt.js / Gatsby?',
+    answer: <p>
+      Next.js is front-end solution only, focused on static websites. This is some
+      longer text so I can see how it behaves.<br/>
+
+      Maybe I should put here component so I have freedom in formatting, putting URLs, etc?
+      This is some test <Link href='/'><a>url</a></Link>
+    </p>
+  },
+  {
+    question: 'How is Wasp different from Ruby on Rails, Django, etc?',
+    answer: 'Those are all back-end frameworks. Wasp is full-stack!'
+  },
+  {
+    question: 'How hard is it to learn Wasp?',
+    answer: 'Well, it is actually really easy!'
+  },
+  {
+    question: 'Do you support only React currently?',
+    answer: 'Well, it is actually really easy!'
+  }
+]
+
+const FaqItem = ({ keyP, faq }) => {
+
+  const [isExpanded, setIsExpanded] = useState(false)
+  
+  return (
+    <div className='py-6'>
+      <dt key={keyP} className='text-base text-neutral-700'>
+        <button
+          className='text-left w-full flex items-center justify-between'
+          onClick={() => { setIsExpanded(!isExpanded) }}
+        >
+          <span>{faq.question}</span>
+          <div className='ml-6 text-yellow-500'>
+            {isExpanded ? (
+              <ChevronDown size={20} />
+            ) : (
+              <ChevronRight size={20} />
+            )}
+          </div>
+        </button>
+      </dt>
+      {isExpanded && (
+        <dd className='mt-2 text-neutral-500'>
+          {faq.answer}
+        </dd>
+      )}
+    </div>
+  )
+}
+
+const Faq = () => {
+  return (
+    <SectionContainer>
+      <div className='grid grid-cols-12'>
+        <div className='col-span-12 text-center'>
+          <h2 className='text-xl lg:text-2xl text-neutral-700 mb-4'>
+            Frequently asked questions
+          </h2>
+          <p className='text-neutral-500'>
+            For anything not covered here, join&nbsp;
+            <a 
+              href='https://discord.gg/rzdnErX'
+              className='underline decoration-2 decoration-yellow-500 font-medium'
+            >
+              our Discord
+            </a>!
+          </p>
+        </div>
+      </div>
+
+      <dl className='mt-6 max-w-3xl mx-auto divide-y divide-neutral-300'>
+        {faqs.map((faq, idx) => (
+          <FaqItem keyP={idx} key={idx} faq={faq} />
+        ))}
+      </dl>
+
+    </SectionContainer>
+  )
+}
+
+export default Faq
--- a/project-page/components/Footer.js
+++ b/project-page/components/Footer.js
@ -0,0 +1,167 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+import SectionContainer from './Layouts/SectionContainer'
+import DarkModeToggle from './DarkModeToggle'
+
+const docs = [
+  {
+    text: 'Getting Started',
+    url: '/'
+  },
+  {
+    text: 'Todo app tutorial',
+    url: '/'
+  },
+  {
+    text: 'Language reference',
+    url: '/'
+  }
+]
+
+const community = [
+  {
+    text: 'Discord',
+    url: '/'
+  },
+  {
+    text: 'Twitter',
+    url: '/'
+  },
+  {
+    text: 'GitHub',
+    url: '/'
+  }
+]
+
+const company = [
+  {
+    text: 'Blog',
+    url: '/'
+  },
+  {
+    text: 'Careers',
+    url: '/'
+  },
+  {
+    text: 'Company',
+    url: '/'
+  }
+]
+
+// TODO(matija): duplication, I already have Logo in Nav/index.js
+const Logo = () => (
+  <div className='flex flex-shrink-0 items-center'>
+    <Link href='/' as='/'>
+      <a>
+        <Image
+          src='/wasp-logo.png'
+          width={35}
+          height={35}
+          alt='Wasp Logo'
+        />
+      </a>
+    </Link>
+    <span className='ml-3 font-semibold text-lg text-neutral-700'>
+      Wasp
+    </span>
+  </div>
+)
+
+const Segment = ({ title, links }) => (
+  <div>
+    <h6 className='text-neutral-700'>{title}</h6>
+    <ul className='mt-4 space-y-2'>
+      {links.map((l, idx) => {
+        return (
+          <li key={idx}>
+            <a
+              href={l.url}
+              className={`
+                text-sm text-neutral-500 hover:text-neutral-400
+                transition-colors
+              `}
+            >
+              {l.text}
+            </a>
+          </li>
+        )
+      })}
+    </ul>
+  </div>
+)
+
+const Footer = () => {
+  
+  return (
+    <footer className='border-t'>
+      <SectionContainer>
+        <div className='grid grid-cols-1 gap-8 xl:grid xl:grid-cols-3'>
+
+          {/* cols with links */}
+          <div className='grid grid-cols-1 xl:col-span-2'>
+            <div className='grid grid-cols-2 gap-8 md:grid-cols-3'>
+
+              <Segment title='Docs' links={docs} />
+              <Segment title='Community' links={community} />
+              <Segment title='Company' links={company} />
+
+            </div>
+
+          </div>
+
+          {/* newsletter part */}
+          <div className='xl:col-span-1'>
+            <h3 className='text-base'>Stay up to date</h3>
+            <p className='mt-4 text-sm text-neutral-500'>
+              Join our mailing list and be the first to know when
+              we ship new features and updates!
+            </p>
+
+            <form className='mt-4 sm:flex sm:max-w-md'>
+              <input
+                type="email" name="email-address" id="email-address"
+                required autoComplete='email'
+                placeholder='you@awesomedev.com'
+                className={`
+                  text-sm w-full
+                  appearance-none
+                  placeholder:text-neutral-400
+                  border border-yellow-500
+                  px-4 py-2 rounded-md bg-transparent
+                  focus:outline-none focus:ring-2 focus:ring-yellow-400
+                `}
+              />
+              <div className='rounded-md mt-3 sm:mt-0 sm:ml-3'>
+                <button type='submit'
+                  className={`
+                    w-full
+                    text-sm border border-transparent rounded-md
+                    bg-yellow-500 text-white
+                    px-4 py-2
+                    hover:bg-yellow-400
+                    transition ease-out duration-200
+                  `}
+                >
+                  Subscribe
+                </button>
+              </div>
+            </form>
+
+          </div>
+        </div>
+        <div className='pt-8 mt-8'>
+          <Logo />
+          <div className='flex justify-between'>
+            <p className='mt-4 text-xs text-neutral-400'>
+              © Wasp, Inc. All rights reserved.
+            </p>
+            <DarkModeToggle />
+          </div>
+        </div>
+      </SectionContainer>
+    </footer>
+  )
+}
+
+export default Footer
--- a/project-page/components/Hero.js
+++ b/project-page/components/Hero.js
@ -0,0 +1,197 @@
+import Link from 'next/link'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import { qtcreatorLight, atomOneLight, atomOneDark, a11ylight } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
+import { Terminal } from 'react-feather'
+
+import SectionContainer from './Layouts/SectionContainer'
+
+const StartIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16" height="16" viewBox="0 0 24 24" fill="none"
+    stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+    strokeLinejoin="round" opacity="0.5"
+  >
+    <polyline points="13 17 18 12 13 7"></polyline>
+    <polyline points="6 17 11 12 6 7"></polyline>
+  </svg>
+)
+
+const ActionButtons = () => (
+  <div className='flex items-center gap-2'>
+    <Link href='/'>
+      <a>
+        <button
+          className={`
+            inline-flex items-center space-x-2
+            px-3 py-2 rounded
+            bg-yellow-500 text-white text-sm leading-4
+            border border-yellow-500 hover:border-yellow-400
+            hover:bg-yellow-400
+            transition ease-out duration-200
+          `}
+        >
+          <span>Get started in 5 minutes</span>
+          <StartIcon />
+        </button>
+      </a>
+    </Link>
+
+    <Link href='/'>
+      <a>
+        <button
+          className={`
+            inline-flex items-center space-x-2
+            px-3 py-2 rounded
+            border border-neutral-500
+            text-sm leading-4
+            hover:text-neutral-400 hover:border-neutral-400
+            transition ease-out duration-200
+          `}
+        >
+          <Terminal size={16} />
+          <span>Showcases</span>
+        </button>
+      </a>
+    </Link>
+  </div>
+)
+
+const PHBadge = () => (
+  <a
+    href="https://www.producthunt.com/posts/wasp-lang-alpha?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-wasp&#0045;lang&#0045;alpha"
+    target="_blank"
+    rel="noreferrer"
+  >
+    <img
+      className='w-32 md:w-[180px]'
+      src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=277135&theme=light&period=daily"
+      alt="Wasp&#0045;lang&#0032;Alpha - Develop&#0032;web&#0032;apps&#0032;in&#0032;React&#0032;&#0038;&#0032;Node&#0046;js&#0032;with&#0032;no&#0032;boilerplate | Product Hunt" 
+    />
+  </a>
+)
+
+const Hero = () => {
+  const codeString =
+`app todoApp {
+  title: "ToDo App", /* visible in tab */
+
+  auth: { /* full-stack auth out-of-the-box */
+    userEntity: User,
+    externalAuthEntity: SocialLogin,
+    methods: {
+      usernameAndPassword: {},
+      google: {}
+    }
+  }
+}
+
+route RootRoute { path: "/", to: MainPage }
+page MainPage {
+  /* import your React code */
+  component: import Main from "@ext/Main.js"
+}`
+
+  return (
+    <SectionContainer className='pb-5 pt-24'>
+      <div className='lg:grid lg:grid-cols-12 lg:gap-16'>
+
+        <div className='lg:col-span-6 space-y-12'>
+          {/* Hero title and subtitle */}
+          <div>
+            <h1
+              className={`
+                text-4xl lg:text-5xl lg:leading-tight
+                font-extrabold text-neutral-700
+                dark:text-yellow-500
+              `}
+            >
+              Develop full-stack web apps&nbsp;
+              <span className='underline decoration-yellow-500'>without boilerplate</span>.
+            </h1>
+
+            <p className='mt-4 sm:mt-5 text-xl lg:text-xl text-neutral-500'>
+              Describe common features via Wasp DSL and write the rest in React, Node.js
+              and Prisma.
+            </p>
+          </div> {/* EOF Hero title and subtitle */}
+
+          <ActionButtons />
+
+          <div className='flex flex-col gap-4'>
+            <small className='text-neutral-500 text-xs'>works with</small>
+
+            <div className='flex'>
+              <img
+                className='h-8 md:h-10 pr-5 md:pr-10'
+                src='/react-logo-gray.svg'
+                alt='React'
+              />
+              <img
+                className='h-8 md:h-10 pr-5 md:pr-10'
+                src='/nodejs-logo-gray.svg'
+                alt='Node'
+              />
+              <img
+                className='h-8 md:h-10 pr-5 md:pr-10'
+                src='/prisma-logo-gray.svg'
+                alt='Prisma'
+              />
+            </div>
+          </div>
+
+        </div>
+
+        <div className='lg:col-span-6 lg:mt-0 mt-16'>
+          <div className='relative flex flex-col items-center justify-center'>
+
+            <div className='bg-yellow-500/10 flex h-6 w-full items-center justify-between rounded-t-md px-2'>
+              <span className='text-sm text-neutral-500'>todoApp.wasp</span>
+              <div className='flex space-x-2'>
+                <div className='bg-yellow-500 h-2 w-2 rounded-full' />
+                <div className='bg-yellow-500 h-2 w-2 rounded-full' />
+                <div className='bg-yellow-500 h-2 w-2 rounded-full' />
+              </div>
+
+            </div>
+
+            <div className='w-full text-sm shadow-2xl rounded-b-md'>
+              <SyntaxHighlighter
+                language="javascript" 
+                style={atomOneLight}
+                customStyle={{
+                  borderBottomLeftRadius: '10px',
+                  borderBottomRightRadius: '10px',
+                  paddingLeft: '15px',
+                }}
+              >
+                {codeString}
+              </SyntaxHighlighter>
+            </div> {/* EOF code block wrapper */}
+
+          </div> {/* EOF wrapper of header + code */}
+
+        </div> {/* EOF col-span-6 */}
+
+      </div>
+
+      <div className='flex justify-center items-center space-x-4 mt-20 mb-10 md:mt-28 md:mb-0'>
+        <PHBadge />
+        <div
+          className={`
+            h-11 border border-transparent border-l-neutral-400/50
+          `}
+        />
+        <img
+          className='w-32 md:w-[180px]'
+          src='/yc-logo.png'
+          alt='YC'
+        />
+      </div>
+
+    </SectionContainer>
+  )
+
+}
+
+export default Hero
--- a/project-page/components/HowItWorks.js
+++ b/project-page/components/HowItWorks.js
@ -0,0 +1,103 @@
+import { ArrowRight } from 'react-feather'
+
+import SectionContainer from './Layouts/SectionContainer'
+
+const Feature = ({ title, description, url }) => (
+  <div className='col-span-12 md:col-span-6'>
+    <div className='lg:mt-5'>
+      <dt>
+        <h4 className='mb-4'>
+          <span className='bg-yellow-500/25 px-2 py-1 rounded'>{ title }</span>
+        </h4>
+        <p className='text-neutral-600'>
+          { description }
+        </p>
+        <TextLink url={url} label='Learn more' />
+      </dt>
+    </div>
+  </div>
+)
+
+const TextLink = ({ url, label }) => (
+  <a href={url}
+    className={`
+      mt-3 block cursor-pointer text-sm
+      text-neutral-600 hover:text-neutral-500
+    `}
+  >
+    <div className='group flex gap-1 items-center'>
+      <span>{label}</span>
+      <div className='transition-all group-hover:ml-0.5'>
+        <span className='text-yellow-600'>
+          <ArrowRight size={14} strokeWidth={2} />
+        </span>
+      </div>
+    </div>
+  </a>
+)
+
+const HowItWorks = () => {
+  return (
+    <SectionContainer className='lg:pb-8'>
+      <div className='grid grid-cols-12'>
+
+        <div className='col-span-12 lg:col-span-4'>
+          <h2 className='text-xl lg:text-2xl text-neutral-700 mb-4'>
+             What&apos;s under the hood? 🚕
+          </h2>
+          <p className='text-neutral-700'>
+            Given <code>.wasp</code> and <code>.js(x)/.css/...</code>, source files,
+            Wasp compiler generates the full source of your web app in
+            the target stack - front-end, back-end and deployment.
+          </p>
+
+          {/* Features */}
+          <div className='py-8'>
+            <dl className='grid grid-cols-12 gap-y-4 md:gap-8'>
+
+              <Feature 
+                title='Typescript support'
+                url='/'
+                description="JS or TS - mix'n'match as you wish."
+              />
+
+              <Feature 
+                title='Wasp CLI'
+                url='/'
+                description='All the handy commands at your fingertips.'
+              />
+
+              <Feature 
+                title='LSP for VS Code'
+                url='/'
+                description='Syntax highligthing, go-to-definition, etc. work out-of-the-box.'
+              />
+
+              <Feature 
+                title='Deploy anywhere'
+                url='/'
+                description='See our deployment guide for more details.'
+              />
+
+            </dl>
+
+          </div> {/* EOF Features */}
+        </div>
+
+        <div className='col-span-12 lg:col-span-7 xl:col-span-7 xl:col-start-6'>
+          <img
+            className=''
+            src='/wasp-compilation-diagram.png'
+            alt='React'
+          />
+        </div>
+
+      </div>
+    </SectionContainer>
+    
+
+  )
+
+}
+
+export default HowItWorks
--- a/project-page/components/Layouts/SectionContainer.js
+++ b/project-page/components/Layouts/SectionContainer.js
@ -0,0 +1,16 @@
+import classNames from 'classnames'
+
+const SectionContainer = ({ children, className }) => (
+  <div 
+    className={classNames(
+      'container mx-auto px-6 py-16 sm:py-18',
+      'md:py-24',
+      'lg:px-16 lg:py-24 xl:px-20',
+      className
+    )}
+  >
+    { children }
+  </div>
+)
+
+export default SectionContainer
--- a/project-page/components/Nav/SocialIcons.js
+++ b/project-page/components/Nav/SocialIcons.js
@ -0,0 +1,14 @@
+
+export const DiscordIcon = () => (
+  <svg width='24' height='24' fill='currentColor' viewBox='0 5 30.67 23.25'>
+    <title>Discord</title>
+    <path d='M26.0015 6.9529C24.0021 6.03845 21.8787 5.37198 19.6623 5C19.3833 5.48048 19.0733 6.13144 18.8563 6.64292C16.4989 6.30193 14.1585 6.30193 11.8336 6.64292C11.6166 6.13144 11.2911 5.48048 11.0276 5C8.79575 5.37198 6.67235 6.03845 4.6869 6.9529C0.672601 12.8736 -0.41235 18.6548 0.130124 24.3585C2.79599 26.2959 5.36889 27.4739 7.89682 28.2489C8.51679 27.4119 9.07477 26.5129 9.55525 25.5675C8.64079 25.2265 7.77283 24.808 6.93587 24.312C7.15286 24.1571 7.36986 23.9866 7.57135 23.8161C12.6241 26.1255 18.0969 26.1255 23.0876 23.8161C23.3046 23.9866 23.5061 24.1571 23.7231 24.312C22.8861 24.808 22.0182 25.2265 21.1037 25.5675C21.5842 26.5129 22.1422 27.4119 22.7621 28.2489C25.2885 27.4739 27.8769 26.2959 30.5288 24.3585C31.1952 17.7559 29.4733 12.0212 26.0015 6.9529ZM10.2527 20.8402C8.73376 20.8402 7.49382 19.4608 7.49382 17.7714C7.49382 16.082 8.70276 14.7025 10.2527 14.7025C11.7871 14.7025 13.0425 16.082 13.0115 17.7714C13.0115 19.4608 11.7871 20.8402 10.2527 20.8402ZM20.4373 20.8402C18.9183 20.8402 17.6768 19.4608 17.6768 17.7714C17.6768 16.082 18.8873 14.7025 20.4373 14.7025C21.9717 14.7025 23.2271 16.082 23.1961 17.7714C23.1961 19.4608 21.9872 20.8402 20.4373 20.8402Z'></path>
+  </svg>
+)
+
+export const TwitterIcon = () => (
+  <svg width='24' height='24' fill='currentColor' viewBox='0 0 335 276'>
+    <title>Discord</title>
+    <path d='m302 70a195 195 0 0 1 -299 175 142 142 0 0 0 97 -30 70 70 0 0 1 -58 -47 70 70 0 0 0 31 -2 70 70 0 0 1 -57 -66 70 70 0 0 0 28 5 70 70 0 0 1 -18 -90 195 195 0 0 0 141 72 67 67 0 0 1 116 -62 117 117 0 0 0 43 -17 65 65 0 0 1 -31 38 117 117 0 0 0 39 -11 65 65 0 0 1 -32 35'></path>
+  </svg>
+)
--- a/project-page/components/Nav/index.js
+++ b/project-page/components/Nav/index.js
@ -0,0 +1,187 @@
+import Link from 'next/link'
+import Image from 'next/image'
+import { Star, Twitter } from 'react-feather'
+
+import { DiscordIcon, TwitterIcon } from './SocialIcons'
+
+const Nav = () => {
+
+  const Logo = () => (
+    <div className='flex flex-shrink-0 items-center'>
+      <Link href='/' as='/'>
+        <a>
+          <Image
+            src='/wasp-logo.png'
+            width={35}
+            height={35}
+            alt='Wasp Logo'
+          />
+        </a>
+      </Link>
+      <span className='ml-3 font-semibold text-lg text-neutral-700'>
+        Wasp <sup className='text-base text-yellow-500'>βeta</sup>
+      </span>
+    </div>
+  )
+
+  const SocialIcon = ({ Icon, url }) => (
+    <a href={url} target='_blank' rel='noreferrer'
+      className={`
+        hidden lg:flex hover:opacity-75 py-5
+        hover:text-yellow-500 hover:border-yellow-500
+        border-b-2 border-transparent
+      `}
+    >
+      <Icon />
+    </a>
+  )
+
+  const GitHubButton = () => (
+    <a href='https://github.com/wasp-lang/wasp' target='_blank' rel='noreferrer'
+      className={`
+        px-2.5 py-1 rounded
+        hover:bg-neutral-200
+        transition ease-out duration-200
+        hidden lg:flex items-center space-x-2 text-xs
+        group
+      `}
+    >
+      <div
+        className={`
+          flex h-3 w-3 items-center justify-center
+          group-hover:h-4 group-hover:w-4
+          group-hover:text-yellow-500
+        `}
+      >
+        <Star strokeWidth={2} />
+      </div>
+      <span className='truncate'>Star us on GitHub</span>
+    </a>
+  )
+
+  const HamburgerButton = () => (
+    <div className='absolute inset-y-0 left-0 px-2 flex items-center lg:hidden'>
+      <button
+        className={`
+          inline-flex items-center p-2
+          rounded-md hover:bg-gray-50
+          focus:ring-yellow-500 focus:outline-none focus:ring-2 focus:ring-inset
+        `}
+      >
+
+        <span className="sr-only">Open menu</span>
+
+        <svg
+          className="block h-6 w-6"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M4 6h16M4 12h16M4 18h16"
+          />
+        </svg>
+      </button>
+    </div>
+
+  )
+
+  return (
+    <>
+      <div className='sticky top-0 z-50'>
+        <div className='bg-[#f5f4f0] absolute top-0 h-full w-full opacity-80'></div>
+        <nav className='border-b backdrop-blur-sm'>
+          <div className='
+              relative mx-auto 
+              flex justify-between
+              h-16
+              lg:container lg:px-16 xl:px-20
+            '
+          >
+            <HamburgerButton />
+            <div className='
+                flex flex-1
+                items-center justify-center
+                sm:items-stretch
+                lg:justify-between
+              '
+            >
+              <div className='flex items-center'> {/* Navbar left side */}
+                <Logo />
+
+                <div className='hidden pl-4 sm:ml-6 sm:space-x-4 lg:flex'> {/* Left items */}
+                  <Link href='/docs'>
+                    <a 
+                      className={`
+                        p-5 px-1
+                        hover:text-yellow-500 hover:border-yellow-500
+                        border-b-2 border-transparent
+                        text-sm font-medium
+                      `}
+                    >
+                      Docs
+                    </a>
+                  </Link>
+                  <Link href='/blog'>
+                    <a 
+                      className={`
+                        p-5 px-1
+                        hover:text-yellow-500 hover:border-yellow-500
+                        border-b-2 border-transparent
+                        text-sm font-medium
+                      `}
+                    >
+                      Blog
+                    </a>
+                  </Link>
+                  
+                </div> {/* EOF left items */}
+              </div> {/* EOF left side */}
+
+              <div className='flex items-center gap-2 space-x-2'> {/* Navbar right side */}
+                <GitHubButton />
+
+                <Link href='/docs'>
+                  <a>
+                    <button
+                      className={`
+                        hidden lg:block text-xs
+                        px-2.5 py-1 rounded
+                        bg-yellow-500 text-white
+                        hover:bg-yellow-400
+                        transition ease-out duration-200
+                      `}
+                    >
+                      Get started
+                    </button>
+                  </a>
+                </Link>
+
+                <SocialIcon
+                  Icon={ DiscordIcon } 
+                  url='https://discord.gg/rzdnErX'
+                />
+                <SocialIcon
+                  Icon={ TwitterIcon } 
+                  url='https://twitter.com/WaspLang'
+                />
+              </div> {/* EOF right side */}
+
+            </div>
+
+          </div>
+        </nav>
+
+
+      </div>
+    </>
+  )
+
+}
+
+export default Nav
--- a/project-page/components/ShowcaseGallery.js
+++ b/project-page/components/ShowcaseGallery.js
@ -0,0 +1,108 @@
+import classNames from 'classnames'
+import Image from 'next/image'
+import SectionContainer from './Layouts/SectionContainer'
+
+const Tag = ({ text, className }) => (
+  <span
+    className={classNames(`
+      text-sm border rounded-md px-2.5 py-0.5
+
+    `, className
+    )}
+  >
+    {text}
+  </span>
+)
+
+const ShowcaseItem = ({ url, thumb, title, description, children }) => (
+  <div>
+    <a href={url}>
+      <div className='group inline-block min-w-full'>
+        <div className='flex flex-col space-y-3 pb-8 md:pb-0'>
+
+          <div
+            className={`
+              border-neutral-300 relative mb-4 h-60 w-full overflow-auto
+              rounded-lg border shadow-lg
+            `}
+          >
+            <Image 
+              layout='fill'
+              src={thumb}
+              objectFit='cover'
+              className=''
+            />
+          </div>
+
+          <h3 className='text-neutral-700 text-xl'>{title}</h3>
+
+          <div className='flex space-x-2'>
+            {children}
+          </div>
+
+          <p className='text-neutral-500 text-base'>{description}</p>
+
+        </div>
+      </div>
+    </a>
+  </div>
+  
+)
+
+const ShowcaseGallery = () => {
+  return (
+    <SectionContainer className='space-y-16'>
+      <div className='grid grid-cols-12'>
+        <div className='col-span-12 text-center'>
+          <h2 className='text-xl lg:text-2xl text-neutral-700 mb-4'>
+            🏆 Showcase Gallery 🏆
+          </h2>
+          <p className='text-neutral-500'>
+            See what others are building with Wasp.
+          </p>
+        </div>
+      </div>
+
+      <div
+        className={`
+          mx-auto grid max-w-lg gap-8
+          lg:max-w-none lg:grid-cols-3 lg:gap-12
+        `}
+      >
+        <ShowcaseItem
+          url='/'
+          thumb='/showcase/farnance-dashboard.png'
+          title='Farnance: SaaS marketplace for farmers'
+          description="See how Julian won HackLBS 2021 among 250 participants and why Wasp was instrumental for the team's victory."
+        >
+          <Tag text='hackathon' className='text-yellow-600 border-yellow-600 bg-yellow-50' />
+          <Tag text='material-ui' className='text-blue-500 border-blue-500 bg-slate-50' />
+        </ShowcaseItem>
+
+        <ShowcaseItem
+          url='/'
+          thumb='/showcase/grabbit-hero.png'
+          title='Grabbit: Easily manage dev environments'
+          description='See how Michael built and deployed an internal tool for managing dev resources at StudentBeans.'
+        >
+          <Tag text='internal-tools' className='text-green-600 border-green-600 bg-green-50' />
+        </ShowcaseItem>
+
+        <ShowcaseItem
+          url='/'
+          thumb='/showcase/amicus-landing.png'
+          title='Amicus: Task and workflow management for legal teams'
+          description='See how Erlis rolled out fully-fledged SaaS as a team of one in record time and got first paying customers.'
+        >
+          <Tag text='startup' className='text-fuchsia-600 border-fuchsia-600 bg-fuchsia-50' />
+          <Tag text='material-ui' className='text-blue-500 border-blue-500 bg-slate-50' />
+        </ShowcaseItem>
+
+      </div>
+
+
+    </SectionContainer>
+  )
+}
+
+export default ShowcaseGallery
--- a/project-page/jsconfig.json
+++ b/project-page/jsconfig.json
@ -0,0 +1,5 @@
+{
+    "compilerOptions": {
+        "baseUrl": "."
+    }
+}
--- a/project-page/next.config.js
+++ b/project-page/next.config.js
@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+}
+
+module.exports = nextConfig
--- a/project-page/package-lock.json
+++ b/project-page/package-lock.json
--- a/project-page/package.json
+++ b/project-page/package.json
@ -0,0 +1,26 @@
+{
+  "name": "project-page",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "classnames": "^2.3.2",
+    "next": "12.3.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-feather": "^2.0.10",
+    "react-syntax-highlighter": "^15.5.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.12",
+    "eslint": "8.25.0",
+    "eslint-config-next": "12.3.1",
+    "postcss": "^8.4.18",
+    "tailwindcss": "^3.2.0"
+  }
+}
--- a/project-page/pages/_app.js
+++ b/project-page/pages/_app.js
@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp
--- a/project-page/pages/api/hello.js
+++ b/project-page/pages/api/hello.js
@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function handler(req, res) {
+  res.status(200).json({ name: 'John Doe' })
+}
--- a/project-page/pages/index.js
+++ b/project-page/pages/index.js
@ -0,0 +1,57 @@
+import Head from 'next/head'
+import Image from 'next/image'
+import classNames from 'classnames'
+
+import Nav from 'components/Nav/index'
+import Hero from 'components/Hero'
+import Benefits from 'components/Benefits'
+import HowItWorks from 'components/HowItWorks'
+import ShowcaseGallery from 'components/ShowcaseGallery'
+import Faq from 'components/Faq'
+import Footer from 'components/Footer'
+
+import styles from '../styles/index.module.css'
+
+
+const Background = () => {
+  return (
+    <div className='absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none'>
+      <span className={classNames(styles.leftLights, "opacity-100")} />
+    </div>
+  )
+}
+
+const LightsTwo = () => (
+  <div className='absolute top-[1800px] lg:top-[1000px] left-0 w-full h-full overflow-hidden pointer-events-none'>
+    <span className={classNames(styles.lightsTwo, "opacity-100")} />
+  </div>
+)
+
+const Index = () => {
+  return (
+    <>
+      <Nav />
+      <div className='min-h-screen'>
+        <main>
+          <Background />
+          <div> {/* container */}
+
+            <Hero />
+            <Benefits />
+
+            <LightsTwo />
+
+            <HowItWorks />
+            <ShowcaseGallery />
+            <Faq />
+
+          </div> {/* eof container */}
+        </main>
+      </div>
+      <Footer />
+    </>
+
+  )
+}
+
+export default Index
--- a/project-page/postcss.config.js
+++ b/project-page/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/project-page/public/favicon.ico
+++ b/project-page/public/favicon.ico
--- a/project-page/public/nodejs-logo-gray.svg
+++ b/project-page/public/nodejs-logo-gray.svg
@ -0,0 +1,6 @@
+<svg width="138" height="40" viewBox="0 0 138 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M126.684 14.3582C126.349 14.3582 126.023 14.4274 125.735 14.5907L116.604 19.8634C116.013 20.204 115.654 20.8468 115.654 21.5309V32.0573C115.654 32.7408 116.013 33.3829 116.604 33.7243L118.989 35.1008C120.147 35.6717 120.574 35.6628 121.102 35.6628C122.817 35.6628 123.796 34.622 123.796 32.8133V22.4225C123.796 22.2756 123.669 22.1706 123.525 22.1706H122.381C122.235 22.1706 122.11 22.2756 122.11 22.4225V32.8133C122.11 33.6149 121.275 34.4213 119.919 33.7437L117.438 32.2898C117.35 32.2421 117.283 32.1578 117.283 32.0573V21.5307C117.283 21.431 117.349 21.3294 117.438 21.2787L126.549 16.0257C126.59 16.0016 126.637 15.9889 126.685 15.9889C126.732 15.9889 126.779 16.0016 126.82 16.0257L135.932 21.279C136.018 21.3313 136.087 21.428 136.087 21.5312V32.0576C136.087 32.1581 136.036 32.261 135.951 32.3095L126.82 37.5628C126.742 37.6095 126.634 37.6095 126.549 37.5628L124.203 36.1672C124.168 36.1478 124.128 36.1377 124.087 36.1377C124.046 36.1377 124.006 36.1478 123.971 36.1672C123.323 36.5342 123.202 36.5767 122.594 36.7874C122.445 36.8397 122.218 36.9208 122.672 37.1754L125.735 38.9779C126.024 39.1445 126.351 39.2315 126.685 39.2301C127.018 39.2322 127.346 39.1452 127.635 38.9782L136.765 33.7245C137.356 33.381 137.715 32.7411 137.715 32.0576V21.5309C137.715 20.8471 137.356 20.2053 136.765 19.864L127.635 14.5912C127.348 14.4277 127.02 14.3584 126.685 14.3584L126.684 14.3582Z" fill="#2F2F2F" fill-opacity="0.5"/>
+<path d="M129.127 21.8796C126.527 21.8796 124.979 22.9862 124.979 24.8264C124.979 26.8223 126.516 27.3709 129.011 27.6177C131.997 27.91 132.229 28.3484 132.229 28.936C132.229 29.9553 131.417 30.3899 129.496 30.3899C127.083 30.3899 126.553 29.7874 126.375 28.5871C126.354 28.4583 126.255 28.3543 126.123 28.3543H124.94C124.795 28.3543 124.669 28.4799 124.669 28.6259C124.669 30.1625 125.505 31.9795 129.496 31.9795C132.385 31.9795 134.052 30.8455 134.052 28.8584C134.052 26.8889 132.706 26.36 129.903 25.9895C127.071 25.6147 126.801 25.4313 126.801 24.7682C126.801 24.2207 127.03 23.4884 129.127 23.4884C131.001 23.4884 131.694 23.8926 131.977 25.1559C132.002 25.2745 132.107 25.369 132.229 25.369H133.412C133.485 25.369 133.555 25.3243 133.606 25.272C133.655 25.2163 133.69 25.1535 133.683 25.0783C133.5 22.9029 132.049 21.8796 129.127 21.8796Z" fill="#2F2F2F" fill-opacity="0.5"/>
+<path d="M73.0059 0.555789C72.9038 0.555857 72.8036 0.582507 72.7149 0.633116C72.6269 0.68465 72.5537 0.758239 72.5027 0.846634C72.4518 0.935029 72.4247 1.03518 72.4242 1.13722V15.9672C72.4242 16.1127 72.3566 16.2431 72.2305 16.3161C72.1687 16.3521 72.0984 16.3711 72.0269 16.3711C71.9554 16.3711 71.8852 16.3521 71.8234 16.3161L69.4001 14.9205C69.2234 14.8182 69.0228 14.7643 68.8186 14.7643C68.6144 14.7643 68.4137 14.8182 68.237 14.9205L58.5636 20.5033C58.2021 20.7121 57.9822 21.1133 57.9822 21.5309V32.6969C57.9822 33.114 58.2023 33.4961 58.5636 33.7049L68.237 39.288C68.4137 39.3905 68.6143 39.4445 68.8186 39.4445C69.0228 39.4445 69.2235 39.3905 69.4001 39.288L79.0735 33.7049C79.2506 33.6029 79.3976 33.4561 79.4998 33.2791C79.6019 33.1021 79.6555 32.9013 79.6552 32.6969V4.8594C79.6549 4.65027 79.5992 4.44495 79.4936 4.26442C79.388 4.08388 79.2365 3.93459 79.0543 3.83179L73.2966 0.613717C73.2064 0.563333 73.1061 0.554442 73.0059 0.555789ZM10.7783 14.494C10.594 14.5012 10.4205 14.5336 10.2551 14.6295L0.581435 20.2126C0.404234 20.3144 0.257114 20.4613 0.154999 20.6383C0.0528854 20.8153 -0.000587913 21.0162 4.87546e-06 21.2206L0.0194039 36.206C0.0194039 36.4143 0.126907 36.608 0.310119 36.7098C0.397956 36.7626 0.498497 36.7905 0.600969 36.7905C0.703441 36.7905 0.803983 36.7626 0.891819 36.7098L6.62988 33.4144C6.99334 33.1983 7.23071 32.8228 7.23071 32.4062V25.408C7.23071 24.9904 7.45029 24.6073 7.81241 24.3998L10.2548 22.9848C10.4314 22.8821 10.6322 22.8285 10.8365 22.8296C11.0359 22.8296 11.2406 22.8794 11.4179 22.9848L13.8606 24.3998C14.0379 24.5015 14.1852 24.6484 14.2874 24.8255C14.3896 25.0026 14.443 25.2036 14.4423 25.408V32.406C14.4423 32.8225 14.6821 33.2008 15.0431 33.4142L20.7812 36.7098C20.869 36.7626 20.9695 36.7905 21.072 36.7905C21.1745 36.7905 21.275 36.7626 21.3629 36.7098C21.4513 36.6587 21.5247 36.5852 21.5758 36.4967C21.6268 36.4082 21.6538 36.3079 21.6538 36.2057L21.6727 21.2206C21.6739 21.0161 21.6206 20.815 21.5184 20.6379C21.4163 20.4608 21.2689 20.314 21.0913 20.2126L11.4179 14.6295C11.2544 14.5336 11.0803 14.5015 10.8947 14.494H10.7783ZM97.703 14.6295C97.5009 14.6295 97.3029 14.6807 97.1215 14.7847L87.4482 20.3678C87.271 20.4697 87.124 20.6166 87.0218 20.7936C86.9197 20.9706 86.8661 21.1714 86.8665 21.3757V32.5417C86.8665 32.9618 87.103 33.3422 87.4673 33.55L97.0633 39.0167C97.4176 39.2188 97.8503 39.2341 98.2071 39.0355L104.023 35.7983C104.207 35.696 104.332 35.5047 104.333 35.2945C104.334 35.1922 104.307 35.0914 104.256 35.0028C104.205 34.9141 104.131 34.8408 104.042 34.7904L94.3106 29.2073C94.1284 29.1033 94.0005 28.8928 94.0005 28.6838V25.1946C94.0005 24.9858 94.1298 24.7945 94.3106 24.6905L97.3347 22.9457C97.423 22.8946 97.5234 22.8676 97.6255 22.8676C97.7276 22.8676 97.828 22.8946 97.9164 22.9457L100.94 24.6905C101.029 24.7414 101.102 24.8148 101.153 24.9033C101.205 24.9918 101.231 25.0922 101.231 25.1944V27.9471C101.231 28.0493 101.258 28.1497 101.309 28.2382C101.36 28.3267 101.433 28.4001 101.522 28.451C101.703 28.5558 101.923 28.5561 102.103 28.451L107.9 25.0785C108.077 24.9762 108.223 24.8292 108.326 24.6523C108.428 24.4753 108.481 24.2746 108.482 24.0703V21.376C108.482 20.9597 108.261 20.5769 107.9 20.3678L98.2847 14.7847C98.1079 14.6824 97.9072 14.629 97.703 14.6297V14.6295ZM68.7796 22.9654C68.8303 22.9654 68.8896 22.9778 68.9348 23.0039L72.2499 24.9231C72.3399 24.9751 72.4051 25.0713 72.4051 25.175V29.0133C72.4051 29.1176 72.3404 29.2135 72.2499 29.2655L68.9348 31.1846C68.8905 31.2099 68.8404 31.2232 68.7895 31.2232C68.7385 31.2232 68.6884 31.2099 68.6441 31.1846L65.3293 29.2655C65.239 29.2132 65.1741 29.1176 65.1741 29.0133V25.175C65.1741 25.071 65.2393 24.9756 65.3293 24.9231L68.6441 23.0042C68.6849 22.9788 68.7319 22.9655 68.7799 22.9657V22.9654H68.7796Z" fill="#2F2F2F" fill-opacity="0.5"/>
+<path d="M39.837 14.5709C39.6354 14.5709 39.4361 14.6221 39.2555 14.7261L29.5822 20.2899C29.2203 20.4981 29.0005 20.9001 29.0005 21.3172V32.4832C29.0005 32.9008 29.2206 33.2823 29.5822 33.4914L39.2555 39.0743C39.4322 39.1769 39.6328 39.2309 39.8371 39.2309C40.0414 39.2309 40.242 39.1769 40.4187 39.0743L50.092 33.4914C50.2691 33.3894 50.4161 33.2425 50.5182 33.0654C50.6203 32.8884 50.6739 32.6876 50.6735 32.4832V21.3172C50.6735 20.8996 50.4536 20.4981 50.092 20.2899L40.4187 14.7261C40.2419 14.624 40.0412 14.5705 39.837 14.5709ZM97.6834 24.5353C97.6449 24.5353 97.602 24.5353 97.5673 24.5547L95.7063 25.6402C95.6716 25.6595 95.6426 25.6876 95.6221 25.7216C95.6017 25.7557 95.5906 25.7945 95.5899 25.8342V27.9665C95.5899 28.0468 95.6363 28.1203 95.7063 28.1605L97.5673 29.2266C97.637 29.267 97.7114 29.267 97.7804 29.2266L99.6413 28.1602C99.6759 28.1408 99.7048 28.1127 99.7252 28.0788C99.7456 28.0448 99.7568 28.0061 99.7577 27.9665V25.8339C99.7568 25.7943 99.7456 25.7556 99.7252 25.7216C99.7048 25.6876 99.6759 25.6596 99.6413 25.6402L97.7804 24.5544C97.7459 24.5342 97.7222 24.5355 97.6834 24.5355V24.5353Z" fill="#2F2F2F" fill-opacity="0.5"/>
+</svg>
--- a/project-page/public/prisma-logo-gray.svg
+++ b/project-page/public/prisma-logo-gray.svg
@ -0,0 +1,6 @@
+<svg width="114" height="46" viewBox="0 0 114 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M69.8179 30.5522H72.8172V19.5584H69.8179V30.5522ZM69.6904 16.7164C69.6904 15.7397 70.2345 15.2515 71.3227 15.2515C72.4106 15.2515 72.955 15.7397 72.955 16.7164C72.955 17.182 72.8189 17.5442 72.547 17.8032C72.2748 18.0622 71.8668 18.1914 71.3227 18.1914C70.2345 18.1914 69.6904 17.6997 69.6904 16.7164Z" fill="#2F2F2F" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.6831 24.2095C58.6504 23.39 59.1338 22.207 59.1338 20.6598C59.1338 19.1716 58.6799 18.0522 57.772 17.3015C56.864 16.5515 55.5383 16.1758 53.7942 16.1758H49.2021V30.5522H52.2504V25.4387H53.5584C55.3414 25.4387 56.7164 25.0293 57.6831 24.2095ZM53.2535 22.9411H52.2504V18.6737H53.6369C54.4695 18.6737 55.0806 18.8438 55.4709 19.1848C55.8608 19.5258 56.056 20.0536 56.056 20.7682C56.056 21.4758 55.8233 22.015 55.3577 22.3855C54.8921 22.756 54.191 22.9411 53.2535 22.9411Z" fill="#2F2F2F" fill-opacity="0.5"/>
+<path d="M68.2271 19.4403C67.9583 19.3813 67.6208 19.3518 67.2143 19.3518C66.5323 19.3518 65.9014 19.5403 65.3215 19.9171C64.7441 20.291 64.2691 20.8031 63.9396 21.407H63.7924L63.3497 19.5584H61.0781V30.5522H64.0774V24.957C64.0774 24.072 64.3444 23.3834 64.8785 22.8917C65.4132 22.4001 66.1587 22.1542 67.116 22.1542C67.4636 22.1542 67.7583 22.1872 68.0011 22.2525L68.2271 19.4403ZM82.2011 29.864C82.9848 29.2737 83.3764 28.4154 83.3764 27.2876C83.3764 26.7435 83.2817 26.2747 83.0914 25.8813C82.9014 25.4879 82.606 25.1407 82.2063 24.839C81.8066 24.5376 81.1771 24.2133 80.3181 23.8657C79.3546 23.4789 78.7303 23.1869 78.4452 22.9904C78.1601 22.7938 78.0171 22.5612 78.0171 22.2921C78.0171 21.8136 78.4598 21.5744 79.3448 21.5744C79.8428 21.5744 80.3313 21.6497 80.8098 21.8001C81.2882 21.9515 81.8032 22.1445 82.3539 22.3806L83.2584 20.2174C82.0063 19.6407 80.7181 19.3522 79.3938 19.3522C78.0039 19.3522 76.9309 19.6192 76.174 20.1535C75.416 20.6879 75.0375 21.4431 75.0375 22.4199C75.0375 22.9904 75.1278 23.4706 75.3084 23.8605C75.4882 24.2508 75.7768 24.5966 76.174 24.898C76.5698 25.1997 77.1917 25.5275 78.0368 25.8813C78.6268 26.1306 79.099 26.3484 79.4532 26.5352C79.807 26.7223 80.0563 26.8893 80.2007 27.0369C80.3448 27.1845 80.4167 27.3761 80.4167 27.6122C80.4167 28.2414 79.8726 28.556 78.7841 28.556C78.2532 28.556 77.6386 28.4675 76.9407 28.2907C76.242 28.1136 75.6146 27.8942 75.0573 27.6317V30.1098C75.5666 30.3249 76.0974 30.4847 76.6407 30.5866C77.2045 30.6949 77.8862 30.7491 78.6862 30.7491C80.2459 30.7491 81.4178 30.4539 82.2011 29.8636V29.864ZM95.2581 30.5522H92.2588V24.131C92.2588 23.3379 92.1258 22.7428 91.8608 22.3463C91.5949 21.9497 91.1772 21.7511 90.6067 21.7511C89.84 21.7511 89.2827 22.0331 88.9351 22.597C88.5876 23.1608 88.414 24.0883 88.414 25.3799V30.5522H85.4146V19.5584H87.706L88.1091 20.9647H88.2765C88.5712 20.4598 88.9976 20.0647 89.5546 19.7796C90.1119 19.4945 90.7511 19.3518 91.4723 19.3518C93.1178 19.3518 94.232 19.8897 94.8157 20.9647H95.081C95.3761 20.4532 95.8105 20.0567 96.3841 19.7747C96.9577 19.4928 97.6049 19.3518 98.3261 19.3518C99.5716 19.3518 100.514 19.6716 101.153 20.3105C101.792 20.9497 102.112 21.974 102.112 23.3834V30.5522H99.1029V24.131C99.1029 23.3379 98.9699 22.7428 98.7049 22.3463C98.439 21.9497 98.0213 21.7511 97.4508 21.7511C96.7168 21.7511 96.1678 22.0136 95.8036 22.5379C95.44 23.0626 95.2581 23.8949 95.2581 25.0355V30.5522Z" fill="#2F2F2F" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M111.144 29.0572L111.725 30.552H113.819V23.2259C113.819 21.9148 113.426 20.9381 112.639 20.2957C111.852 19.6533 110.722 19.3318 109.247 19.3318C107.706 19.3318 106.303 19.6631 105.038 20.3252L106.031 22.3509C107.217 21.8197 108.25 21.5544 109.129 21.5544C110.269 21.5544 110.84 22.1117 110.84 23.2259V23.7079L108.932 23.7669C107.287 23.8259 106.056 24.1325 105.239 24.6863C104.423 25.2405 104.015 26.1009 104.015 27.2676C104.015 28.3822 104.318 29.2409 104.925 29.844C105.531 30.4471 106.362 30.7485 107.418 30.7485C108.276 30.7485 108.973 30.6256 109.507 30.3798C110.041 30.1339 110.561 29.6933 111.066 29.0572H111.144ZM109.679 25.4975L110.84 25.4582V26.3627C110.84 27.0252 110.631 27.5561 110.215 27.9558C109.799 28.3558 109.243 28.5558 108.548 28.5558C107.578 28.5558 107.093 28.1329 107.093 27.2874C107.093 26.6971 107.306 26.2582 107.732 25.9697C108.158 25.6815 108.807 25.5238 109.679 25.4975ZM33.8912 36.0308L13.9332 41.9336C13.3234 42.1142 12.7391 41.5867 12.8672 40.9718L19.9971 6.82588C20.1304 6.18769 21.013 6.0863 21.2915 6.67762L34.4929 34.711C34.7419 35.2398 34.4579 35.8634 33.8912 36.0308ZM37.3138 34.6384L22.0283 2.17934V2.17865C21.8384 1.77895 21.5438 1.43809 21.1759 1.19222C20.808 0.946358 20.3803 0.804647 19.9384 0.782117C19.0082 0.72795 18.1748 1.17656 17.7047 1.94011L1.12687 28.7909C0.875024 29.1965 0.744005 29.6655 0.749171 30.1429C0.754336 30.6203 0.895473 31.0863 1.15604 31.4864L9.25953 44.0392C9.74252 44.7885 10.5793 45.2222 11.4491 45.2222C11.6956 45.2222 11.9436 45.1874 12.1873 45.1152L35.7096 38.1582C36.0637 38.0545 36.3914 37.876 36.6705 37.6347C36.9497 37.3934 37.1738 37.095 37.3277 36.7596C37.4796 36.4262 37.557 36.0637 37.5546 35.6973C37.5522 35.331 37.47 34.9695 37.3138 34.6381V34.6384Z" fill="#2F2F2F" fill-opacity="0.5"/>
+</svg>
--- a/project-page/public/react-logo-gray.svg
+++ b/project-page/public/react-logo-gray.svg
@ -0,0 +1,4 @@
+<svg width="57" height="50" viewBox="0 0 57 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56.3048 25.0057C56.3048 21.2863 51.6469 17.7615 44.5057 15.5756C46.1537 8.29709 45.4213 2.50629 42.194 0.652323C41.4501 0.217441 40.5803 0.0114443 39.6305 0.0114443V2.56352C40.1569 2.56352 40.5803 2.66651 40.9351 2.86107C42.4915 3.75372 43.1667 7.15267 42.6403 11.5244C42.5144 12.6001 42.3084 13.7331 42.0566 14.889C39.8136 14.3397 37.3645 13.9162 34.7895 13.6416C33.2446 11.5244 31.6424 9.60174 30.0287 7.91943C33.7595 4.45182 37.2615 2.55207 39.6419 2.55207V0C36.4947 0 32.3748 2.24308 28.2091 6.13413C24.0434 2.26596 19.9234 0.0457771 16.7763 0.0457771V2.59785C19.1452 2.59785 22.6586 4.48615 26.3894 7.93088C24.7872 9.61318 23.185 11.5244 21.663 13.6416C19.0766 13.9162 16.6275 14.3397 14.3844 14.9004C14.1212 13.756 13.9266 12.6459 13.7893 11.5816C13.2514 7.20989 13.9152 3.81094 15.4602 2.90684C15.8035 2.70085 16.2498 2.60929 16.7763 2.60929V0.0572213C15.8149 0.0572213 14.9452 0.263218 14.1899 0.6981C10.974 2.55207 10.253 8.33143 11.9124 15.5871C4.79411 17.7844 0.15918 21.2978 0.15918 25.0057C0.15918 28.7251 4.817 32.2499 11.9582 34.4358C10.3102 41.7144 11.0427 47.5051 14.27 49.3591C15.0138 49.794 15.8836 50 16.8449 50C19.9921 50 24.112 47.7569 28.2777 43.8659C32.4435 47.734 36.5634 49.9542 39.7106 49.9542C40.6719 49.9542 41.5416 49.7482 42.297 49.3133C45.5128 47.4594 46.2338 41.68 44.5744 34.4244C51.6698 32.2385 56.3048 28.7137 56.3048 25.0057ZM41.4043 17.3724C40.9809 18.8487 40.4544 20.3708 39.8593 21.8929C39.3901 20.9773 38.898 20.0618 38.3601 19.1463C37.8337 18.2307 37.2729 17.3381 36.7122 16.4683C38.3373 16.7086 39.9051 17.0062 41.4043 17.3724ZM36.1628 29.5605C35.2702 31.1055 34.3547 32.5704 33.4048 33.9323C31.6996 34.081 29.9715 34.1611 28.232 34.1611C26.5039 34.1611 24.7758 34.081 23.082 33.9437C22.1322 32.5818 21.2052 31.1284 20.3125 29.5949C19.4428 28.0957 18.6531 26.5736 17.9321 25.0401C18.6417 23.5065 19.4428 21.973 20.3011 20.4738C21.1937 18.9288 22.1093 17.464 23.0592 16.1021C24.7644 15.9533 26.4924 15.8732 28.232 15.8732C29.9601 15.8732 31.6881 15.9533 33.3819 16.0906C34.3318 17.4525 35.2587 18.9059 36.1514 20.4395C37.0212 21.9387 37.8108 23.4607 38.5318 24.9943C37.8108 26.5278 37.0212 28.0613 36.1628 29.5605ZM39.8593 28.0728C40.4773 29.6063 41.0038 31.1399 41.4387 32.6276C39.9395 32.9938 38.3601 33.3028 36.7236 33.5431C37.2844 32.6619 37.8452 31.7578 38.3716 30.8309C38.898 29.9153 39.3901 28.9883 39.8593 28.0728ZM28.2549 40.2838C27.1905 39.1852 26.1262 37.9606 25.0734 36.6217C26.1033 36.6674 27.1562 36.7018 28.2205 36.7018C29.2963 36.7018 30.3606 36.6789 31.402 36.6217C30.372 37.9606 29.3077 39.1852 28.2549 40.2838ZM19.7403 33.5431C18.1152 33.3028 16.5474 33.0053 15.0482 32.639C15.4716 31.1627 15.998 29.6407 16.5931 28.1186C17.0624 29.0341 17.5545 29.9496 18.0923 30.8652C18.6302 31.7807 19.1796 32.6734 19.7403 33.5431ZM28.1976 9.72763C29.262 10.8263 30.3263 12.0508 31.3791 13.3898C30.3492 13.344 29.2963 13.3097 28.232 13.3097C27.1562 13.3097 26.0919 13.3326 25.0505 13.3898C26.0804 12.0508 27.1448 10.8263 28.1976 9.72763ZM19.7289 16.4683C19.1681 17.3495 18.6073 18.2536 18.0809 19.1806C17.5545 20.0961 17.0624 21.0117 16.5931 21.9272C15.9752 20.3937 15.4487 18.8602 15.0138 17.3724C16.513 17.0176 18.0923 16.7086 19.7289 16.4683ZM9.37181 30.7965C5.32054 29.0684 2.69981 26.8025 2.69981 25.0057C2.69981 23.209 5.32054 20.9316 9.37181 19.2149C10.356 18.7915 11.4318 18.4138 12.5419 18.0591C13.1942 20.3021 14.0525 22.6368 15.1168 25.0286C14.064 27.409 13.2171 29.7322 12.5762 31.9638C11.4432 31.6091 10.3675 31.22 9.37181 30.7965ZM15.5288 47.1504C13.9724 46.2577 13.2972 42.8588 13.8236 38.4871C13.9495 37.4113 14.1555 36.2783 14.4073 35.1225C16.6504 35.6718 19.0994 36.0952 21.6744 36.3699C23.2194 38.4871 24.8216 40.4097 26.4352 42.092C22.7044 45.5596 19.2024 47.4594 16.822 47.4594C16.307 47.4479 15.8722 47.3449 15.5288 47.1504ZM42.6746 38.4298C43.2125 42.8016 42.5487 46.2005 41.0038 47.1046C40.6604 47.3106 40.2141 47.4022 39.6877 47.4022C37.3187 47.4022 33.8053 45.5139 30.0745 42.0691C31.6767 40.3868 33.2789 38.4756 34.801 36.3584C37.3874 36.0838 39.8365 35.6603 42.0795 35.0996C42.3428 36.2554 42.5487 37.3655 42.6746 38.4298ZM47.0807 30.7965C46.0965 31.22 45.0207 31.5976 43.9106 31.9524C43.2583 29.7093 42.4 27.3747 41.3357 24.9828C42.3885 22.6024 43.2354 20.2792 43.8763 18.0476C45.0093 18.4024 46.085 18.7915 47.0921 19.2149C51.1434 20.943 53.7641 23.209 53.7641 25.0057C53.7527 26.8025 51.1319 29.0799 47.0807 30.7965Z" fill="#2F2F2F" fill-opacity="0.5"/>
+<path d="M28.2203 30.2361C31.1087 30.2361 33.4503 27.8945 33.4503 25.006C33.4503 22.1176 31.1087 19.776 28.2203 19.776C25.3318 19.776 22.9902 22.1176 22.9902 25.006C22.9902 27.8945 25.3318 30.2361 28.2203 30.2361Z" fill="#2F2F2F" fill-opacity="0.5"/>
+</svg>
--- a/project-page/public/showcase/amicus-landing.png
+++ b/project-page/public/showcase/amicus-landing.png
--- a/project-page/public/showcase/farnance-dashboard.png
+++ b/project-page/public/showcase/farnance-dashboard.png
--- a/project-page/public/showcase/grabbit-hero.png
+++ b/project-page/public/showcase/grabbit-hero.png
--- a/project-page/public/vercel.svg
+++ b/project-page/public/vercel.svg
@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>
--- a/project-page/public/wasp-compilation-diagram.png
+++ b/project-page/public/wasp-compilation-diagram.png
--- a/project-page/public/wasp-compilation-diagram.svg
+++ b/project-page/public/wasp-compilation-diagram.svg
--- a/project-page/public/wasp-logo.png
+++ b/project-page/public/wasp-logo.png
--- a/project-page/public/yc-logo.png
+++ b/project-page/public/yc-logo.png
--- a/project-page/styles/Home.module.css
+++ b/project-page/styles/Home.module.css
@ -0,0 +1,131 @@
+.container {
+  padding: 0 2rem;
+}
+
+.main {
+  min-height: 100vh;
+  padding: 4rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer {
+  display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.title a {
+  color: #0070f3;
+  text-decoration: none;
+}
+
+.title a:hover,
+.title a:focus,
+.title a:active {
+  text-decoration: underline;
+}
+
+.title {
+  margin: 0;
+  line-height: 1.15;
+  font-size: 4rem;
+}
+
+.title,
+.description {
+  text-align: center;
+}
+
+.description {
+  margin: 4rem 0;
+  line-height: 1.5;
+  font-size: 1.5rem;
+}
+
+.code {
+  background: #fafafa;
+  border-radius: 5px;
+  padding: 0.75rem;
+  font-size: 1.1rem;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
+}
+
+.grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 800px;
+}
+
+.card {
+  margin: 1rem;
+  padding: 1.5rem;
+  text-align: left;
+  color: inherit;
+  text-decoration: none;
+  border: 1px solid #eaeaea;
+  border-radius: 10px;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  max-width: 300px;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  color: #0070f3;
+  border-color: #0070f3;
+}
+
+.card h2 {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+}
+
+.card p {
+  margin: 0;
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+
+.logo {
+  height: 1em;
+  margin-left: 0.5rem;
+}
+
+@media (max-width: 600px) {
+  .grid {
+    width: 100%;
+    flex-direction: column;
+  }
+}
+
+/*
+@media (prefers-color-scheme: dark) {
+  .card,
+  .footer {
+    border-color: #222;
+  }
+  .code {
+    background: #111;
+  }
+  .logo img {
+    filter: invert(1);
+  }
+}
+*/
--- a/project-page/styles/globals.css
+++ b/project-page/styles/globals.css
@ -0,0 +1,70 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Removes blue tap box over Button/Link on mobile.
+ * Issue on Tailwind's repo: https://github.com/tailwindlabs/tailwindcss/discussions/2984
+ */
+@layer base {
+    html {
+        -webkit-tap-highlight-color: transparent;
+    }
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  /*
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  */
+
+  /*
+  font-family: Inter;
+  */
+
+  /* Fading out dots */
+  /*
+  background: linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff 300px),
+              fixed 0 0 /20px 20px radial-gradient(#d1d1d1 1px,transparent 0),
+              fixed 10px 10px /20px 20px radial-gradient(#d1d1d1 1px,transparent 0)
+  */
+
+  /** Honeycomb pattern
+   *
+  background:
+    radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,
+    radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,
+    linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,
+    linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
+    linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
+    linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
+  background-size: 40px 60px;
+  */
+
+  background-color: #f5f5f5;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/*
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    color: white;
+    background: black;
+  }
+}
+*/
--- a/project-page/styles/index.module.css
+++ b/project-page/styles/index.module.css
@ -0,0 +1,103 @@
+
+.sectionSkewed {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  transform-origin: 100% 0;
+  transform: skewY(-2deg);
+  overflow: hidden;
+}
+
+.sectionSkewedContainer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.leftLights::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  width: 1223px;
+  height: 912px;
+
+  width: 1200px;
+  height: 912px;
+
+  left: calc(50% - 1100px);
+  top: -10%;
+
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    rgba(255, 214, 0, 0.2) 0%, 
+    rgba(255, 168, 0, 0) 100%
+  );
+  will-change: filter;
+  mix-blend-mode: normal;
+}
+
+.lightsTwo::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  width: 1223px;
+  height: 912px;
+
+  width: 1200px;
+  height: 912px;
+
+  left: calc(50%);
+  top: 0px;
+
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    rgba(255, 214, 0, 0.2) 0%, 
+    rgba(255, 168, 0, 0) 100%
+  );
+  will-change: filter;
+  mix-blend-mode: normal;
+}
+
+/*
+.leftLights::before {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  width: 25%;
+  height: 900px;
+  left: -12.5%;
+  top: calc(50% - 900px / 2 + 151px);
+  opacity: 0.2;
+  background: linear-gradient(180deg, #77b8ff 0%, rgba(42, 138, 246, 0.4) 100%);
+  filter: blur(125px);
+  transform: rotate(-15deg);
+  border-bottom-left-radius: 25% 25%;
+  border-bottom-right-radius: 25% 25%;
+  border-top-left-radius: 100% 100%;
+  border-top-right-radius: 100% 100%;
+  z-index: 200;
+  will-change: filter;
+  mix-blend-mode: normal;
+}
+
+.leftLights::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  width: 40%;
+  height: 422px;
+  left: 0px;
+  top: calc(50% - 422px / 2 + 298px);
+  opacity: 0.5;
+  background: linear-gradient(
+    180deg,
+    rgba(29, 92, 162, 0.2) 0%,
+    rgba(42, 138, 246, 0.4) 100%
+  );
+  filter: blur(125px);
+  will-change: filter;
+  mix-blend-mode: normal;
+}
+*/
--- a/project-page/tailwind.config.js
+++ b/project-page/tailwind.config.js
@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter']
+      }
+    },
+  },
+  plugins: [],
+}
--- a/project-page/yarn.lock
+++ b/project-page/yarn.lock
--- a/web/.gitignore
+++ b/web/.gitignore
@ -18,3 +18,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vercel
--- a/web/docusaurus.config.js
+++ b/web/docusaurus.config.js
@ -15,6 +15,9 @@ module.exports = {
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
+  stylesheets: [
+    'https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'
+  ],
  themeConfig: {
    announcementBar: {
      id: 'Beta_is_coming',
@ -150,5 +153,18 @@ module.exports = {
  scripts: [
    '/scripts/posthog.js',
    '/js/fix-multiple-trailing-slashes.js'
-  ]
+  ],
+  plugins: [
+    async function myPlugin(context, options) {
+      return {
+        name: "docusaurus-tailwindcss",
+        configurePostCss(postcssOptions) {
+          // Appends TailwindCSS and AutoPrefixer.
+          postcssOptions.plugins.push(require("tailwindcss"));
+          postcssOptions.plugins.push(require("autoprefixer"));
+          return postcssOptions;
+        },
+      };
+    },
+  ],
 };
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -13,11 +13,17 @@
        "@docusaurus/preset-classic": "2.2.0",
        "@mdx-js/react": "^1.6.22",
        "@svgr/webpack": "^6.5.1",
+        "autoprefixer": "^10.4.13",
+        "classnames": "^2.3.2",
        "clsx": "^1.2.1",
+        "postcss": "^8.4.19",
        "prism-react-renderer": "^1.3.5",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
-        "react-modal": "^3.14.3"
+        "react-feather": "^2.0.10",
+        "react-modal": "^3.14.3",
+        "react-syntax-highlighter": "^15.5.0",
+        "tailwindcss": "^3.2.4"
      },
      "devDependencies": {
        "@docusaurus/module-type-aliases": "2.2.0"
@ -3602,6 +3608,35 @@
        "acorn": "^8"
      }
    },
+    "node_modules/acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "dependencies": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      }
+    },
+    "node_modules/acorn-node/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-node/node_modules/acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/acorn-walk": {
      "version": "8.2.0",
      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
@ -4404,6 +4439,11 @@
      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.5.0.tgz",
      "integrity": "sha512-yH4RezKOGlOhxkmhbeNuC4eYZKAUsEaGtBuBzDDP1eFUKiccDWzBABxBfOx31IDwDIXMTxWuwAxUGModvkbuVw=="
    },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
    "node_modules/clean-css": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@ -5256,6 +5296,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/defined": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/del": {
      "version": "6.1.1",
      "resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz",
@ -5353,6 +5401,27 @@
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
    },
+    "node_modules/detective": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
+      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
+      "dependencies": {
+        "acorn-node": "^1.8.2",
+        "defined": "^1.0.0",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "detective": "bin/detective.js"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
+    },
    "node_modules/dir-glob": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@ -5364,6 +5433,11 @@
        "node": ">=8"
      }
    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
    "node_modules/dns-equal": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@ -5879,6 +5953,18 @@
        "reusify": "^1.0.4"
      }
    },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/faye-websocket": {
      "version": "0.11.4",
      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
@ -6164,6 +6250,14 @@
        "node": ">=6"
      }
    },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
    "node_modules/forwarded": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@ -6632,6 +6726,14 @@
        "he": "bin/he"
      }
    },
+    "node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/history": {
      "version": "4.10.1",
      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
@ -7610,6 +7712,19 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/lru-cache": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@ -8068,6 +8183,14 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/object-inspect": {
      "version": "1.12.2",
      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
@ -8425,6 +8548,14 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/pkg-dir": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@ -8490,9 +8621,9 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.4.18",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
-      "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==",
+      "version": "8.4.19",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
+      "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
      "funding": [
        {
          "type": "opencollective",
@ -8614,6 +8745,68 @@
        "postcss": "^8.2.15"
      }
    },
+    "node_modules/postcss-import": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/postcss-loader": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.0.1.tgz",
@ -8797,6 +8990,24 @@
        "postcss": "^8.1.0"
      }
    },
+    "node_modules/postcss-nested": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
+      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
    "node_modules/postcss-normalize-charset": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
@ -9230,6 +9441,17 @@
        }
      ]
    },
+    "node_modules/quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@ -9435,6 +9657,17 @@
      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
    },
+    "node_modules/react-feather": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-2.0.10.tgz",
+      "integrity": "sha512-BLhukwJ+Z92Nmdcs+EMw6dy1Z/VLiJTzEQACDUEnWMClhYnFykJCGWQx+NmwP/qQHGX/5CzQ+TGi8ofg2+HzVQ==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.6"
+      }
+    },
    "node_modules/react-helmet-async": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.3.0.tgz",
@ -9570,6 +9803,21 @@
        "react": ">=15"
      }
    },
+    "node_modules/react-syntax-highlighter": {
+      "version": "15.5.0",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
+      "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "highlight.js": "^10.4.1",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.27.0",
+        "refractor": "^3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
    "node_modules/react-textarea-autosize": {
      "version": "8.3.4",
      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz",
@ -9586,6 +9834,14 @@
        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
      }
    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
    "node_modules/readable-stream": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@ -9637,6 +9893,28 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/refractor": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
+      "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
+      "dependencies": {
+        "hastscript": "^6.0.0",
+        "parse-entities": "^2.0.0",
+        "prismjs": "~1.27.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/prismjs": {
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+      "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/regenerate": {
      "version": "1.4.2",
      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@ -10968,6 +11246,57 @@
        "url": "https://github.com/fb55/entities?sponsor=1"
      }
    },
+    "node_modules/tailwindcss": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
+      "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==",
+      "dependencies": {
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "color-name": "^1.1.4",
+        "detective": "^5.2.1",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.12",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "lilconfig": "^2.0.6",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.18",
+        "postcss-import": "^14.1.0",
+        "postcss-js": "^4.0.0",
+        "postcss-load-config": "^3.1.4",
+        "postcss-nested": "6.0.0",
+        "postcss-selector-parser": "^6.0.10",
+        "postcss-value-parser": "^4.2.0",
+        "quick-lru": "^5.1.1",
+        "resolve": "^1.22.1"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/tapable": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@ -15068,6 +15397,28 @@
      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
      "requires": {}
    },
+    "acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "requires": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
+        },
+        "acorn-walk": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+          "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA=="
+        }
+      }
+    },
    "acorn-walk": {
      "version": "8.2.0",
      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
@ -15648,6 +15999,11 @@
      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.5.0.tgz",
      "integrity": "sha512-yH4RezKOGlOhxkmhbeNuC4eYZKAUsEaGtBuBzDDP1eFUKiccDWzBABxBfOx31IDwDIXMTxWuwAxUGModvkbuVw=="
    },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
    "clean-css": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@ -16236,6 +16592,11 @@
        "object-keys": "^1.1.1"
      }
    },
+    "defined": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q=="
+    },
    "del": {
      "version": "6.1.1",
      "resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz",
@ -16307,6 +16668,21 @@
        }
      }
    },
+    "detective": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
+      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
+      "requires": {
+        "acorn-node": "^1.8.2",
+        "defined": "^1.0.0",
+        "minimist": "^1.2.6"
+      }
+    },
+    "didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
+    },
    "dir-glob": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@ -16315,6 +16691,11 @@
        "path-type": "^4.0.0"
      }
    },
+    "dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
    "dns-equal": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@ -16716,6 +17097,14 @@
        "reusify": "^1.0.4"
      }
    },
+    "fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "requires": {
+        "format": "^0.2.0"
+      }
+    },
    "faye-websocket": {
      "version": "0.11.4",
      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
@ -16915,6 +17304,11 @@
        }
      }
    },
+    "format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww=="
+    },
    "forwarded": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@ -17263,6 +17657,11 @@
      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
    },
+    "highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
+    },
    "history": {
      "version": "4.10.1",
      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
@ -17963,6 +18362,15 @@
      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA=="
    },
+    "lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "requires": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      }
+    },
    "lru-cache": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@ -18280,6 +18688,11 @@
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
    },
+    "object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
+    },
    "object-inspect": {
      "version": "1.12.2",
      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
@ -18536,6 +18949,11 @@
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
    },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
+    },
    "pkg-dir": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@ -18585,9 +19003,9 @@
      }
    },
    "postcss": {
-      "version": "8.4.18",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
-      "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==",
+      "version": "8.4.19",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
+      "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
      "requires": {
        "nanoid": "^3.3.4",
        "picocolors": "^1.0.0",
@ -18655,6 +19073,33 @@
        "postcss-selector-parser": "^6.0.5"
      }
    },
+    "postcss-import": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "requires": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      }
+    },
+    "postcss-js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+      "requires": {
+        "camelcase-css": "^2.0.1"
+      }
+    },
+    "postcss-load-config": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "requires": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^1.10.2"
+      }
+    },
    "postcss-loader": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.0.1.tgz",
@ -18762,6 +19207,14 @@
        "icss-utils": "^5.0.0"
      }
    },
+    "postcss-nested": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
+      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.10"
+      }
+    },
    "postcss-normalize-charset": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
@ -19047,6 +19500,11 @@
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
    },
+    "quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA=="
+    },
    "randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@ -19207,6 +19665,14 @@
      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
    },
+    "react-feather": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-2.0.10.tgz",
+      "integrity": "sha512-BLhukwJ+Z92Nmdcs+EMw6dy1Z/VLiJTzEQACDUEnWMClhYnFykJCGWQx+NmwP/qQHGX/5CzQ+TGi8ofg2+HzVQ==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
    "react-helmet-async": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.3.0.tgz",
@ -19306,6 +19772,18 @@
        "tiny-warning": "^1.0.0"
      }
    },
+    "react-syntax-highlighter": {
+      "version": "15.5.0",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
+      "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "highlight.js": "^10.4.1",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.27.0",
+        "refractor": "^3.6.0"
+      }
+    },
    "react-textarea-autosize": {
      "version": "8.3.4",
      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz",
@ -19316,6 +19794,14 @@
        "use-latest": "^1.2.1"
      }
    },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "requires": {
+        "pify": "^2.3.0"
+      }
+    },
    "readable-stream": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@ -19355,6 +19841,23 @@
        "minimatch": "^3.0.5"
      }
    },
+    "refractor": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
+      "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
+      "requires": {
+        "hastscript": "^6.0.0",
+        "parse-entities": "^2.0.0",
+        "prismjs": "~1.27.0"
+      },
+      "dependencies": {
+        "prismjs": {
+          "version": "1.27.0",
+          "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+          "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA=="
+        }
+      }
+    },
    "regenerate": {
      "version": "1.4.2",
      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@ -20357,6 +20860,46 @@
        }
      }
    },
+    "tailwindcss": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
+      "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==",
+      "requires": {
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "color-name": "^1.1.4",
+        "detective": "^5.2.1",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.12",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "lilconfig": "^2.0.6",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.18",
+        "postcss-import": "^14.1.0",
+        "postcss-js": "^4.0.0",
+        "postcss-load-config": "^3.1.4",
+        "postcss-nested": "6.0.0",
+        "postcss-selector-parser": "^6.0.10",
+        "postcss-value-parser": "^4.2.0",
+        "quick-lru": "^5.1.1",
+        "resolve": "^1.22.1"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+          "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+          "requires": {
+            "is-glob": "^4.0.3"
+          }
+        }
+      }
+    },
    "tapable": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
--- a/web/package.json
+++ b/web/package.json
@ -15,15 +15,21 @@
  },
  "dependencies": {
    "@docusaurus/core": "2.2.0",
-    "@docusaurus/preset-classic": "2.2.0",
    "@docusaurus/plugin-google-gtag": "2.2.0",
+    "@docusaurus/preset-classic": "2.2.0",
    "@mdx-js/react": "^1.6.22",
    "@svgr/webpack": "^6.5.1",
+    "autoprefixer": "^10.4.13",
+    "classnames": "^2.3.2",
    "clsx": "^1.2.1",
+    "postcss": "^8.4.19",
    "prism-react-renderer": "^1.3.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
-    "react-modal": "^3.14.3"
+    "react-feather": "^2.0.10",
+    "react-modal": "^3.14.3",
+    "react-syntax-highlighter": "^15.5.0",
+    "tailwindcss": "^3.2.4"
  },
  "devDependencies": {
    "@docusaurus/module-type-aliases": "2.2.0"
--- a/web/src/components/Benefits.js
+++ b/web/src/components/Benefits.js
@ -0,0 +1,103 @@
+import React from 'react'
+import classNames from 'classnames'
+import { Terminal, Layers, Coffee, Code } from 'react-feather'
+
+import SectionContainer from './Layouts/SectionContainer'
+
+import styles from '../pages/styles.module.css'
+
+const Lang = () => (
+  <>
+    <span className='underline decoration-yellow-500 font-bold'>
+      language
+    </span>
+  </>
+)
+
+const Benefit = ({ Icon, title, description }) => (
+  <div className='mb-10 md:mb-0 space-y-4'>
+    <div className='flex items-center'>
+      <div
+        className={`
+          inline-flex h-8 w-8 rounded-md
+          items-center justify-center
+          text-yellow-500 bg-neutral-700
+        `}
+      >
+        <Icon size={20} />
+      </div>
+      <dt className='ml-4'>
+        { title }
+      </dt>
+    </div>
+    <p className=''>
+      { description }
+    </p>
+  </div>
+)
+
+const Benefits = () => {
+  return (
+    <SectionContainer className='space-y-16'>
+      <div className='grid grid-cols-12'>
+        <div className='col-span-12 text-center'>
+          <h2 className='text-xl lg:text-2xl text-neutral-700 mb-4'>
+            Yet another web framework. Except it's
+            a <Lang />.
+          </h2>
+          <p className='text-neutral-500'>
+            Don&apos;t worry, it takes less than 30 minutes to learn.
+          </p>
+        </div>
+      </div>
+
+      <dl className='grid grid-cols-1 lg:grid-cols-3 md:gap-16 lg:gap-x-8 xl:gap-x-24'>
+        <Benefit
+          Icon={Layers}
+          title='Truly full-stack'
+          description={`
+            When we say full-stack, we really mean it. Wasp has you covered from front-end,
+            back-end and database to deployment. Zero config required to get started.
+          `}
+        />
+
+        <Benefit
+          Icon={Coffee}
+          title='The wheel can take a break'
+          description={`
+            No reinventing the wheel here. Write your code in React & Node.js as you are used to,
+            along with your favourite NPM packages.
+          `}
+        />
+
+        <Benefit
+          Icon={Code}
+          title='Less boilerplate'
+          description={`
+            The language approach allows us to immensely improve developer experience.
+            E.g., full-stack auth takes only 5 lines of code.
+          `}
+        />
+      </dl>
+    </SectionContainer>
+  )
+}
+
+const BenefitsWithSkewedBorder = () => (
+  <div className='relative'>
+    <div className={classNames(styles.sectionSkewedContainer)}>
+      <div
+        className={classNames(
+          styles.sectionSkewed,
+          'border-t border-b border-yellow-500/25 bg-neutral-100/50'
+        )}
+      >
+      </div>
+    </div>
+    <div className='relative'>
+      <Benefits />
+    </div>
+  </div>
+)
+
+export default BenefitsWithSkewedBorder
--- a/web/src/components/DarkModeToggle.js
+++ b/web/src/components/DarkModeToggle.js
@ -0,0 +1,44 @@
+import React, { useState } from 'react'
+import { Sun, Moon } from 'react-feather'
+
+const DarkModeToggle = () => {
+  const [isDarkMode, setIsDarkMode] = useState(false)
+  
+  const toggleDarkMode = () => {
+    setIsDarkMode(!isDarkMode)
+  }
+  
+  return (
+    <div className='flex items-end'>
+      <Sun strokeWidth={2} size={22} className='text-neutral-500' />
+      <button
+        type='button'
+        aria-pressed='false'
+        className={`
+          relative inline-flex
+          h-6 w-11 mx-3 flex-shrink-0 cursor-pointer
+          rounded-full border-2 border-transparent
+          bg-neutral-500
+          transition-colors duration-200 ease-in-out focus:outline-none
+        `}
+        onClick={() => toggleDarkMode()}
+      >
+        <span
+          aria-hidden='true'
+          className={`
+            ${isDarkMode ? 'translate-x-5' : 'translate-x-0'}
+            inline-block h-5 w-5
+            bg-white shadow-lg rounded-full ring-0
+            transform transition duration-200 ease-in-out
+          `}
+        />
+      </button>
+
+      <Moon strokeWidth={2} size={22} className='text-neutral-500' />
+    </div>
+    
+
+  )
+}
+
+export default DarkModeToggle
--- a/web/src/components/Faq.js
+++ b/web/src/components/Faq.js
@ -0,0 +1,126 @@
+import React, { useState } from 'react'
+import Link from '@docusaurus/Link'
+import { ChevronDown, ChevronRight } from 'react-feather'
+
+import SectionContainer from './Layouts/SectionContainer'
+
+const faqs = [
+  {
+    question: 'How is Wasp different from Next.js / Nuxt.js / Gatsby?',
+    answer: <p>
+      <strong>TL;DR</strong> - These are frontend-first frameworks, with some limited backend capabilities.
+      Wasp is a full-stack framework.
+      <br/><br/>
+      The main difference between Wasp and the solutions listed above is that Wasp is a trully full-stack
+      framework, meaning it brings both back-end and database next to front-end. You can think of it as
+      Ruby on Rails, but made for JS (React & Node.js) and full-stack.
+      <br/><br/>
+      Next.js, Gatsby and others started out as frontend frameworks for static sites. Although some of them
+      now offer an option to use serverless functions, you still have to bring your own database and you'll
+      also need some kind of a server/backend if you'll need to run more complex operations.
+    </p>
+  },
+  {
+    question: 'How is Wasp different from Ruby on Rails, Django, etc?',
+    answer: <p>
+      <strong>TL;DR</strong> - These are backend frameworks, while Wasp covers full-stack, which makes it easier to sync and
+      reuse data models across the stack.
+      <br/><br/>
+      Back in the day when the whole UI was server-side rendered, Rails and Django were actually full-stack
+      frameworks. But, with the advent of SPAs and frontend frameworks such as React, they are today mostly
+      used as API servers, aka backend frameworks.
+      <br/><br/>
+      Wasp is a full-stack framework, which means it covers both frontend, backend and database at the same
+      time. That allows us to make it super easy to work with and sync data models across the entire
+      stack. You don't even have to define and deal with any kind of CRUD API - Wasp will do that for
+      you under the hood.
+    </p>
+  },
+  {
+    question: 'How hard is it to learn Wasp?',
+    answer: <p>
+      We measured! <strong>It takes about 30 minutes to get going</strong>, and
+      most users find it pretty straight-forward.
+      Since the majority of your coding will still be done in the tools you're familiar with (currently
+      React & Node.js), it's really a marginal change to what you're used to.
+      <br/><br/>
+      The reason is for that is that Wasp is a really simple configuration language, without any
+      loops or variables - you can think of it as of a JSON that is easier to read and is a bit smarter.
+      <br/><br/>
+      Still, although simple (and we plan to keep it that way), it's a real language so you get all the
+      IDE goodies with it - syntax highlighting, auto-completion, live error reporting, ...
+    </p>
+  },
+  {
+    question: 'Do you support only React & Node.js currently?',
+    answer:<p>
+      Yes, that is currently the supported stack. But, Wasp is being developed as a language/framework and
+      architecture-agnostic tool, so we plan to add support for more languages and frameworks in the future.
+      <br/><br/>
+      This is something we're pretty excited about and think could be potentially be a unique opportunity 
+      due to the language approach we're taking with Wasp.
+    </p>
+  }
+]
+
+const FaqItem = ({ keyP, faq }) => {
+
+  const [isExpanded, setIsExpanded] = useState(false)
+  
+  return (
+    <div className='py-6'>
+      <dt key={keyP} className='text-base text-neutral-700'>
+        <button
+          className='text-left w-full flex items-center justify-between'
+          onClick={() => { setIsExpanded(!isExpanded) }}
+        >
+          <span>{faq.question}</span>
+          <div className='ml-6 text-yellow-500'>
+            {isExpanded ? (
+              <ChevronDown size={20} />
+            ) : (
+              <ChevronRight size={20} />
+            )}
+          </div>
+        </button>
+      </dt>
+      {isExpanded && (
+        <dd className='mt-2 text-neutral-500'>
+          {faq.answer}
+        </dd>
+      )}
+    </div>
+  )
+}
+
+const Faq = () => {
+  return (
+    <SectionContainer>
+      <div className='grid grid-cols-12' id='faq'>
+        <div className='col-span-12 text-center'>
+          <h2 className='text-xl lg:text-2xl text-neutral-700 mb-4'>
+            Frequently asked questions
+          </h2>
+          <p className='text-neutral-500'>
+            For anything not covered here, join&nbsp;
+            <a 
+              href='https://discord.gg/rzdnErX'
+              className='underline decoration-2 decoration-yellow-500 font-medium'
+            >
+              our Discord
+            </a>!
+          </p>
+        </div>
+      </div>
+
+      <dl className='mt-6 max-w-3xl mx-auto divide-y divide-neutral-300'>
+        {faqs.map((faq, idx) => (
+          <FaqItem keyP={idx} key={idx} faq={faq} />
+        ))}
+      </dl>
+
+    </SectionContainer>
+  )
+}
+
+export default Faq
--- a/web/src/components/Footer.js
+++ b/web/src/components/Footer.js
@ -0,0 +1,142 @@
+import React from 'react'
+import Link from '@docusaurus/Link'
+import classNames from 'classnames'
+
+import SectionContainer from './Layouts/SectionContainer'
+import SubscribeForm from './SubscribeForm'
+import DarkModeToggle from './DarkModeToggle'
+
+const docs = [
+  {
+    text: 'Getting Started',
+    url: '/docs'
+  },
+  {
+    text: 'Todo app tutorial',
+    url: '/docs/tutorials/todo-app'
+  },
+  {
+    text: 'Language reference',
+    url: '/docs/language/overview'
+  }
+]
+
+const community = [
+  {
+    text: 'Discord',
+    url: 'https://discord.gg/rzdnErX'
+  },
+  {
+    text: 'Twitter',
+    url: 'https://twitter.com/WaspLang'
+  },
+  {
+    text: 'GitHub',
+    url: 'https://github.com/wasp-lang/wasp'
+  }
+]
+
+const company = [
+  {
+    text: 'Blog',
+    url: '/blog'
+  },
+  {
+    text: 'Careers',
+    url: 'https://www.notion.so/wasp-lang/Founding-Engineer-at-Wasp-88a73838f7f04ab3aee1f8e1c1bee6dd'
+  },
+  {
+    text: 'Company',
+    url: 'https://www.notion.so/wasp-lang/Founding-Engineer-at-Wasp-88a73838f7f04ab3aee1f8e1c1bee6dd#20569f14a8af452db10ae618d764d505'
+  }
+]
+
+// TODO(matija): duplication, I already have Logo in Nav/index.js
+const Logo = () => (
+  <div className='flex flex-shrink-0 items-center'>
+    <Link to='/'>
+      <img
+        src='img/lp/wasp-logo.png'
+        width={35}
+        height={35}
+        alt='Wasp Logo'
+      />
+    </Link>
+    <span className='ml-3 font-semibold text-lg text-neutral-700'>
+      Wasp
+    </span>
+  </div>
+)
+
+const Segment = ({ title, links }) => (
+  <div>
+    <h6 className='text-neutral-700'>{title}</h6>
+    <ul className='mt-4 space-y-2'>
+      {links.map((l, idx) => {
+        return (
+          <li key={idx}>
+            <a
+              href={l.url}
+              className={`
+                text-sm text-neutral-500 hover:text-neutral-400
+                transition-colors
+              `}
+            >
+              {l.text}
+            </a>
+          </li>
+        )
+      })}
+    </ul>
+  </div>
+)
+
+const Footer = () => {
+  
+  return (
+    <footer className='border-t'>
+      <SectionContainer>
+        <div className='grid grid-cols-1 gap-8 xl:grid xl:grid-cols-3'>
+
+          {/* cols with links */}
+          <div className='grid grid-cols-1 xl:col-span-2'>
+            <div className='grid grid-cols-2 gap-8 md:grid-cols-3'>
+
+              <Segment title='Docs' links={docs} />
+              <Segment title='Community' links={community} />
+              <Segment title='Company' links={company} />
+
+            </div>
+
+          </div>
+
+          {/* newsletter part */}
+          <div className='xl:col-span-1'>
+            <h3 className='text-base'>Stay up to date</h3>
+            <p className='mt-4 text-sm text-neutral-500'>
+              Join our mailing list and be the first to know when
+              we ship new features and updates!
+            </p>
+
+            <SubscribeForm
+              className='mt-4 sm:flex sm:max-w-md'
+              inputBgColor='bg-transparent'
+            />
+
+          </div>
+        </div>
+        <div className='pt-8 mt-8'>
+          <Logo />
+          <div className='flex justify-between'>
+            <p className='mt-4 text-xs text-neutral-400'>
+              © Wasp, Inc. All rights reserved.
+            </p>
+            <DarkModeToggle />
+          </div>
+        </div>
+      </SectionContainer>
+    </footer>
+  )
+}
+
+export default Footer
--- a/web/src/components/Hero.js
+++ b/web/src/components/Hero.js
@ -0,0 +1,193 @@
+import React from 'react'
+import Link from '@docusaurus/Link'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import { qtcreatorLight, atomOneLight, atomOneDark, a11ylight } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
+import { Terminal } from 'react-feather'
+
+import SectionContainer from './Layouts/SectionContainer'
+
+const StartIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16" height="16" viewBox="0 0 24 24" fill="none"
+    stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+    strokeLinejoin="round" opacity="0.5"
+  >
+    <polyline points="13 17 18 12 13 7"></polyline>
+    <polyline points="6 17 11 12 6 7"></polyline>
+  </svg>
+)
+
+const ActionButtons = () => (
+  <div className='flex items-center gap-2'>
+    <Link to='/docs'>
+      <button
+        className={`
+          inline-flex items-center space-x-2
+          px-3 py-2 rounded
+          bg-yellow-500 text-white text-sm leading-4
+          border border-yellow-500 hover:border-yellow-400
+          hover:bg-yellow-400
+          transition ease-out duration-200
+        `}
+      >
+        <span>Get started in 5 minutes</span>
+        <StartIcon />
+      </button>
+    </Link>
+
+    <Link to='#showcases'>
+      <button
+        className={`
+          inline-flex items-center space-x-2
+          px-3 py-2 rounded
+          border border-neutral-500
+          text-sm leading-4
+          hover:text-neutral-400 hover:border-neutral-400
+          transition ease-out duration-200
+        `}
+      >
+        <Terminal size={16} />
+        <span>Showcases</span>
+      </button>
+    </Link>
+  </div>
+)
+
+const PHBadge = () => (
+  <a
+    href="https://www.producthunt.com/posts/wasp-lang-alpha?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-wasp&#0045;lang&#0045;alpha"
+    target="_blank"
+    rel="noreferrer"
+  >
+    <img
+      className='w-32 md:w-[180px]'
+      src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=277135&theme=light&period=daily"
+      alt="Wasp&#0045;lang&#0032;Alpha - Develop&#0032;web&#0032;apps&#0032;in&#0032;React&#0032;&#0038;&#0032;Node&#0046;js&#0032;with&#0032;no&#0032;boilerplate | Product Hunt" 
+    />
+  </a>
+)
+
+const Hero = () => {
+  const codeString =
+`app todoApp {
+  title: "ToDo App", /* visible in tab */
+
+  auth: { /* full-stack auth out-of-the-box */
+    userEntity: User,
+    externalAuthEntity: SocialLogin,
+    methods: {
+      usernameAndPassword: {},
+      google: {}
+    }
+  }
+}
+
+route RootRoute { path: "/", to: MainPage }
+page MainPage {
+  /* import your React code */
+  component: import Main from "@ext/Main.js"
+}`
+
+  return (
+    <SectionContainer className='pb-5 pt-24'>
+      <div className='lg:grid lg:grid-cols-12 lg:gap-16'>
+
+        <div className='lg:col-span-6 space-y-12'>
+          {/* Hero title and subtitle */}
+          <div>
+            <h1
+              className={`
+                text-4xl lg:text-5xl lg:leading-tight
+                font-extrabold text-neutral-700
+              `}
+            >
+              Develop full-stack web apps&nbsp;
+              <span className='underline decoration-yellow-500'>without boilerplate</span>.
+            </h1>
+
+            <p className='mt-4 sm:mt-5 text-xl lg:text-xl text-neutral-500'>
+              Describe common features via Wasp DSL and write the rest in React, Node.js
+              and Prisma.
+            </p>
+          </div> {/* EOF Hero title and subtitle */}
+
+          <ActionButtons />
+
+          <div className='flex flex-col gap-4'>
+            <small className='text-neutral-500 text-xs'>works with</small>
+
+            <div className='flex'>
+              <img
+                className='h-8 md:h-10 pr-5 md:pr-10'
+                src='img/lp/react-logo-gray.svg'
+                alt='React'
+              />
+              <img
+                className='h-8 md:h-10 pr-5 md:pr-10'
+                src='img/lp/nodejs-logo-gray.svg'
+                alt='Node'
+              />
+              <img
+                className='h-8 md:h-10 pr-5 md:pr-10'
+                src='img/lp/prisma-logo-gray.svg'
+                alt='Prisma'
+              />
+            </div>
+          </div>
+
+        </div>
+
+        <div className='lg:col-span-6 lg:mt-0 mt-16'>
+          <div className='relative flex flex-col items-center justify-center'>
+
+            <div className='bg-yellow-500/10 flex h-6 w-full items-center justify-between rounded-t-md px-2'>
+              <span className='text-sm text-neutral-500'>todoApp.wasp</span>
+              <div className='flex space-x-2'>
+                <div className='bg-yellow-500 h-2 w-2 rounded-full' />
+                <div className='bg-yellow-500 h-2 w-2 rounded-full' />
+                <div className='bg-yellow-500 h-2 w-2 rounded-full' />
+              </div>
+
+            </div>
+
+            <div className='w-full text-sm shadow-2xl rounded-b-md'>
+              <SyntaxHighlighter
+                language="javascript" 
+                style={atomOneLight}
+                customStyle={{
+                  borderBottomLeftRadius: '10px',
+                  borderBottomRightRadius: '10px',
+                  paddingLeft: '15px',
+                }}
+              >
+                {codeString}
+              </SyntaxHighlighter>
+            </div> {/* EOF code block wrapper */}
+
+          </div> {/* EOF wrapper of header + code */}
+
+        </div> {/* EOF col-span-6 */}
+
+      </div>
+
+      <div className='flex justify-center items-center space-x-4 mt-20 mb-10 md:mt-28 md:mb-0'>
+        <PHBadge />
+        <div
+          className={`
+            h-11 border border-transparent border-l-neutral-400/50
+          `}
+        />
+        <img
+          className='w-32 md:w-[180px]'
+          src='img/lp/yc-logo.png'
+          alt='YC'
+        />
+      </div>
+
+    </SectionContainer>
+  )
+
+}
+
+export default Hero
--- a/web/src/components/HowItWorks.js
+++ b/web/src/components/HowItWorks.js
@ -0,0 +1,107 @@
+import React from 'react'
+import Link from '@docusaurus/Link'
+import { ArrowRight } from 'react-feather'
+
+import SectionContainer from './Layouts/SectionContainer'
+
+const Feature = ({ title, description, url }) => (
+  <div className='col-span-12 md:col-span-6'>
+    <div className='lg:mt-5'>
+      <dt>
+        <h4 className='mb-4'>
+          <span className='bg-yellow-500/25 px-2 py-1 rounded'>{ title }</span>
+        </h4>
+        <p className='text-neutral-600'>
+          { description }
+        </p>
+        <TextLink url={url} label='Learn more' />
+      </dt>
+    </div>
+  </div>
+)
+
+const TextLink = ({ url, label }) => (
+  <Link to={url}>
+    <span
+      className={`
+        mt-3 block cursor-pointer text-sm
+        text-neutral-600 hover:text-neutral-500
+      `}
+    >
+      <div className='group flex gap-1 items-center'>
+        <span>{label}</span>
+        <div className='transition-all group-hover:ml-0.5'>
+          <span className='text-yellow-600'>
+            <ArrowRight size={14} strokeWidth={2} />
+          </span>
+        </div>
+      </div>
+    </span>
+  </Link>
+)
+
+const HowItWorks = () => {
+  return (
+    <SectionContainer className='lg:pb-8'>
+      <div className='grid grid-cols-12'>
+
+        <div className='col-span-12 lg:col-span-4'>
+          <h2 className='text-xl lg:text-2xl text-neutral-700 mb-4'>
+             What&apos;s under the hood? 🚕
+          </h2>
+          <p className='text-neutral-700'>
+            Given <code>.wasp</code> and <code>.js(x)/.css/...</code>, source files,
+            Wasp compiler generates the full source of your web app in
+            the target stack - front-end, back-end and deployment.
+          </p>
+
+          {/* Features */}
+          <div className='py-8'>
+            <dl className='grid grid-cols-12 gap-y-4 md:gap-8'>
+
+              <Feature 
+                title='Typescript support'
+                url='/'
+                description="JS or TS - mix'n'match as you wish."
+              />
+
+              <Feature 
+                title='Wasp CLI'
+                url='/docs/cli'
+                description='All the handy commands at your fingertips.'
+              />
+
+              <Feature 
+                title='LSP for VS Code'
+                url=''
+                description='Syntax highligthing, go-to-definition, etc. work out-of-the-box.'
+              />
+
+              <Feature 
+                title='Deploy anywhere'
+                url='/docs/deploying'
+                description='See our deployment guide for more details.'
+              />
+
+            </dl>
+
+          </div> {/* EOF Features */}
+        </div>
+
+        <div className='col-span-12 lg:col-span-7 xl:col-span-7 xl:col-start-6'>
+          <img
+            className=''
+            src='img/lp/wasp-compilation-diagram.png'
+            alt='React'
+          />
+        </div>
+
+      </div>
+    </SectionContainer>
+    
+
+  )
+
+}
+
+export default HowItWorks
--- a/web/src/components/Layouts/SectionContainer.js
+++ b/web/src/components/Layouts/SectionContainer.js
@ -0,0 +1,18 @@
+import React from 'react'
+import classNames from 'classnames'
+
+const SectionContainer = ({ children, className, id }) => (
+  <div 
+    className={classNames(
+      'container mx-auto px-6 py-16 sm:py-18',
+      'md:py-24',
+      'lg:px-16 lg:py-24 xl:px-20',
+      className
+    )}
+    id={id}
+  >
+    { children }
+  </div>
+)
+
+export default SectionContainer
--- a/web/src/components/Nav/SocialIcons.js
+++ b/web/src/components/Nav/SocialIcons.js
@ -0,0 +1,15 @@
+import React from 'react'
+
+export const DiscordIcon = () => (
+  <svg width='24' height='24' fill='currentColor' viewBox='0 5 30.67 23.25'>
+    <title>Discord</title>
+    <path d='M26.0015 6.9529C24.0021 6.03845 21.8787 5.37198 19.6623 5C19.3833 5.48048 19.0733 6.13144 18.8563 6.64292C16.4989 6.30193 14.1585 6.30193 11.8336 6.64292C11.6166 6.13144 11.2911 5.48048 11.0276 5C8.79575 5.37198 6.67235 6.03845 4.6869 6.9529C0.672601 12.8736 -0.41235 18.6548 0.130124 24.3585C2.79599 26.2959 5.36889 27.4739 7.89682 28.2489C8.51679 27.4119 9.07477 26.5129 9.55525 25.5675C8.64079 25.2265 7.77283 24.808 6.93587 24.312C7.15286 24.1571 7.36986 23.9866 7.57135 23.8161C12.6241 26.1255 18.0969 26.1255 23.0876 23.8161C23.3046 23.9866 23.5061 24.1571 23.7231 24.312C22.8861 24.808 22.0182 25.2265 21.1037 25.5675C21.5842 26.5129 22.1422 27.4119 22.7621 28.2489C25.2885 27.4739 27.8769 26.2959 30.5288 24.3585C31.1952 17.7559 29.4733 12.0212 26.0015 6.9529ZM10.2527 20.8402C8.73376 20.8402 7.49382 19.4608 7.49382 17.7714C7.49382 16.082 8.70276 14.7025 10.2527 14.7025C11.7871 14.7025 13.0425 16.082 13.0115 17.7714C13.0115 19.4608 11.7871 20.8402 10.2527 20.8402ZM20.4373 20.8402C18.9183 20.8402 17.6768 19.4608 17.6768 17.7714C17.6768 16.082 18.8873 14.7025 20.4373 14.7025C21.9717 14.7025 23.2271 16.082 23.1961 17.7714C23.1961 19.4608 21.9872 20.8402 20.4373 20.8402Z'></path>
+  </svg>
+)
+
+export const TwitterIcon = () => (
+  <svg width='24' height='24' fill='currentColor' viewBox='0 0 335 276'>
+    <title>Twitter</title>
+    <path d='m302 70a195 195 0 0 1 -299 175 142 142 0 0 0 97 -30 70 70 0 0 1 -58 -47 70 70 0 0 0 31 -2 70 70 0 0 1 -57 -66 70 70 0 0 0 28 5 70 70 0 0 1 -18 -90 195 195 0 0 0 141 72 67 67 0 0 1 116 -62 117 117 0 0 0 43 -17 65 65 0 0 1 -31 38 117 117 0 0 0 39 -11 65 65 0 0 1 -32 35'></path>
+  </svg>
+)
--- a/web/src/components/Nav/index.js
+++ b/web/src/components/Nav/index.js
@ -0,0 +1,216 @@
+import React from 'react'
+import Link from '@docusaurus/Link'
+import { Star, Twitter } from 'react-feather'
+
+import { DiscordIcon, TwitterIcon } from './SocialIcons'
+
+const Nav = () => {
+
+  const Logo = () => (
+    <div className='flex flex-shrink-0 items-center'>
+      <Link to='/'>
+        <img
+          src='img/lp/wasp-logo.png'
+          width={35}
+          height={35}
+          alt='Wasp Logo'
+        />
+      </Link>
+      <span className='ml-3 font-semibold text-lg text-neutral-700'>
+        Wasp <sup className='text-base text-yellow-500'>βeta</sup>
+      </span>
+    </div>
+  )
+
+  const SocialIcon = ({ Icon, url }) => (
+    <a href={url} target='_blank' rel='noreferrer'
+      className={`
+        hidden lg:flex hover:opacity-75 py-5
+        hover:text-yellow-500 hover:border-yellow-500
+        border-b-2 border-transparent
+      `}
+    >
+      <Icon />
+    </a>
+  )
+
+  const GitHubButton = () => (
+    <a href='https://github.com/wasp-lang/wasp' target='_blank' rel='noreferrer'
+      className={`
+        px-2.5 py-1 rounded
+        hover:bg-neutral-200
+        transition ease-out duration-200
+        hidden lg:flex items-center space-x-2 text-xs
+        group
+      `}
+    >
+      <div
+        className={`
+          flex h-3 w-3 items-center justify-center
+          group-hover:h-4 group-hover:w-4
+          group-hover:text-yellow-500
+        `}
+      >
+        <Star strokeWidth={2} />
+      </div>
+      <span className='truncate'>Star us on GitHub</span>
+    </a>
+  )
+
+  const HamburgerButton = () => (
+    <div className='absolute inset-y-0 left-0 px-2 flex items-center lg:hidden'>
+      <button
+        className={`
+          inline-flex items-center p-2
+          rounded-md hover:bg-gray-50
+          focus:ring-yellow-500 focus:outline-none focus:ring-2 focus:ring-inset
+        `}
+      >
+
+        <span className="sr-only">Open menu</span>
+
+        <svg
+          className="block h-6 w-6"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M4 6h16M4 12h16M4 18h16"
+          />
+        </svg>
+      </button>
+    </div>
+
+  )
+
+  return (
+    <>
+      <div className='sticky top-0 z-50'>
+        <div className='bg-[#f5f4f0] absolute top-0 h-full w-full opacity-80'></div>
+        <nav className='border-b backdrop-blur-sm'>
+          <div className='
+              relative mx-auto 
+              flex justify-between
+              h-16
+              lg:container lg:px-16 xl:px-20
+            '
+          >
+            <HamburgerButton />
+            <div className='
+                flex flex-1
+                items-center justify-center
+                sm:items-stretch
+                lg:justify-between
+              '
+            >
+              <div className='flex items-center'> {/* Navbar left side */}
+                <Logo />
+
+                <div className='hidden pl-4 sm:ml-6 sm:space-x-4 lg:flex'> {/* Left items */}
+                  {/* Docs */}
+                  <Link to='/docs'>
+                    <span
+                      className={`
+                        py-5 px-1
+                        hover:text-yellow-500 hover:border-yellow-500
+                        border-b-solid border-b-2 border-transparent
+                        text-sm font-semibold
+                      `}
+                    >
+                      Docs
+                    </span>
+                  </Link>
+
+                  {/* Blog */}
+                  <Link to='/blog'>
+                    <span
+                      className={`
+                        py-5 px-1
+                        hover:text-yellow-500 hover:border-yellow-500
+                        border-b-2 border-transparent
+                        text-sm font-semibold
+                      `}
+                    >
+                      Blog
+                    </span>
+                  </Link>
+
+                  {/* FAQ */}
+                  <Link to='#faq'>
+                    <span
+                      className={`
+                        py-5 px-1
+                        hover:text-yellow-500 hover:border-yellow-500
+                        border-b-2 border-transparent
+                        text-sm font-medium
+                      `}
+                    >
+                      FAQ
+                    </span>
+                  </Link>
+
+                  {/* Join newsletter */}
+                  <Link to='#signup'>
+                    <span
+                      className={`
+                        py-5 px-1
+                        border-b-2 border-transparent
+                        text-sm font-medium
+                      `}
+                    >
+                      <span className='px-2 py-1 rounded bg-yellow-500/25 hover:bg-yellow-500/10'>
+                        📬 Join the list
+                      </span>
+                    </span>
+                  </Link>
+                  
+                </div> {/* EOF left items */}
+              </div> {/* EOF left side */}
+
+              <div className='flex items-center gap-2 space-x-2'> {/* Navbar right side */}
+                <GitHubButton />
+
+                <Link to='/docs'>
+                  <button
+                    className={`
+                      hidden lg:block text-xs
+                      px-2.5 py-1 rounded
+                      bg-yellow-500 text-white
+                      hover:bg-yellow-400
+                      transition ease-out duration-200
+                    `}
+                  >
+                    Get started
+                  </button>
+                </Link>
+
+                <SocialIcon
+                  Icon={ DiscordIcon } 
+                  url='https://discord.gg/rzdnErX'
+                />
+
+                <SocialIcon
+                  Icon={ TwitterIcon } 
+                  url='https://twitter.com/WaspLang'
+                />
+              </div> {/* EOF right side */}
+
+            </div>
+
+          </div>
+        </nav>
+
+
+      </div>
+    </>
+  )
+
+}
+
+export default Nav
--- a/web/src/components/Newsletter.js
+++ b/web/src/components/Newsletter.js
@ -0,0 +1,46 @@
+import React from 'react'
+
+import SubscribeForm from './SubscribeForm'
+import SectionContainer from './Layouts/SectionContainer'
+
+const Newsletter = () => {
+  return (
+    <SectionContainer id='signup'>
+      <div className='grid grid-cols-12'>
+        <div className='col-span-12'>
+
+          <div
+            className={`
+              px-6 py-6 bg-yellow-500/25 rounded-lg
+              md:p-12 lg:p-16
+              xl:flex xl:items-center
+            `}
+          >
+            <div className='xl:w-0 xl:flex-1'>
+              <h2 className='text-2xl font-extrabold text-neutral-700'>
+                Stay up to date
+              </h2>
+              <p className='mt-3 text-lg text-neutral-500 leading-6'>
+                Be the first to know when we ship new features and updates!
+              </p>
+            </div>
+
+            <div className='mt-8 sm:w-full sm:max-w-md xl:mt-0 xl:ml-8'>
+              <SubscribeForm
+                className='sm:flex'
+                inputBgColor='bg-[#f5f5f5]'
+              />
+
+            </div>
+
+          </div>
+
+        </div>
+      </div>
+
+    </SectionContainer>
+  )
+}
+
+export default Newsletter
+
--- a/web/src/components/ShowcaseGallery.js
+++ b/web/src/components/ShowcaseGallery.js
@ -0,0 +1,106 @@
+import React from 'react'
+import classNames from 'classnames'
+import SectionContainer from './Layouts/SectionContainer'
+
+const Tag = ({ text, className }) => (
+  <span
+    className={classNames(`
+      text-sm border rounded-md px-2.5 py-0.5
+
+    `, className
+    )}
+  >
+    {text}
+  </span>
+)
+
+const ShowcaseItem = ({ url, thumb, title, description, children }) => (
+  <div>
+    <a href={url}>
+      <div className='group inline-block min-w-full'>
+        <div className='flex flex-col space-y-3 pb-8 md:pb-0'>
+
+          <div
+            className={`
+              border-neutral-300 relative mb-4 h-60 w-full overflow-auto
+              rounded-lg border shadow-lg overflow-y-hidden
+            `}
+          >
+            <img 
+              src={thumb}
+              className='object-cover'
+            />
+          </div>
+
+          <h3 className='text-neutral-700 text-xl'>{title}</h3>
+
+          <div className='flex space-x-2'>
+            {children}
+          </div>
+
+          <p className='text-neutral-500 text-base'>{description}</p>
+
+        </div>
+      </div>
+    </a>
+  </div>
+  
+)
+
+const ShowcaseGallery = () => {
+  return (
+    <SectionContainer className='space-y-16' id='showcases'>
+      <div className='grid grid-cols-12'>
+        <div className='col-span-12 text-center'>
+          <h2 className='text-xl lg:text-2xl text-neutral-700 mb-4'>
+            🏆 Showcase Gallery 🏆
+          </h2>
+          <p className='text-neutral-500'>
+            See what others are building with Wasp.
+          </p>
+        </div>
+      </div>
+
+      <div
+        className={`
+          mx-auto grid max-w-lg gap-8
+          lg:max-w-none lg:grid-cols-3 lg:gap-12
+        `}
+      >
+        <ShowcaseItem
+          url='/blog/2022/10/28/farnance-hackathon-winner'
+          thumb='img/lp/showcase/farnance-dashboard.png'
+          title='Farnance: SaaS marketplace for farmers'
+          description="See how Julian won HackLBS 2021 among 250 participants and why Wasp was instrumental for the team's victory."
+        >
+          <Tag text='hackathon' className='text-yellow-600 border-yellow-600 bg-yellow-50' />
+          <Tag text='material-ui' className='text-blue-500 border-blue-500 bg-slate-50' />
+        </ShowcaseItem>
+
+        <ShowcaseItem
+          url='/blog/2022/11/26/michael-curry-usecase'
+          thumb='img/lp/showcase/grabbit-hero.png'
+          title='Grabbit: Easily manage dev environments'
+          description='See how Michael built and deployed an internal tool for managing dev resources at StudentBeans.'
+        >
+          <Tag text='internal-tools' className='text-green-600 border-green-600 bg-green-50' />
+        </ShowcaseItem>
+
+        <ShowcaseItem
+          url='/blog/2022/11/26/erlis-amicus-usecase'
+          thumb='img/lp/showcase/amicus-landing.png'
+          title='Amicus: Task and workflow management for legal teams'
+          description='See how Erlis rolled out fully-fledged SaaS as a team of one in record time and got first paying customers.'
+        >
+          <Tag text='startup' className='text-fuchsia-600 border-fuchsia-600 bg-fuchsia-50' />
+          <Tag text='material-ui' className='text-blue-500 border-blue-500 bg-slate-50' />
+        </ShowcaseItem>
+
+      </div>
+
+
+    </SectionContainer>
+  )
+}
+
+export default ShowcaseGallery
--- a/web/src/components/SubscribeForm.js
+++ b/web/src/components/SubscribeForm.js
@ -0,0 +1,44 @@
+import React from 'react'
+import classNames from 'classnames'
+
+const SubscribeForm = ({ className, inputBgColor }) => (
+  <form 
+    className={classNames('', className)}
+    action="https://gmail.us4.list-manage.com/subscribe/post?u=8139c7de74df98aa17054b235&amp;id=f0c6ba5f1d"
+    method="post"
+  >
+    <input
+      aria-label="Email address"
+      type="email"
+      name="EMAIL" 
+      id="email-address"
+      required autoComplete='email'
+      placeholder='you@awesomedev.com'
+      className={`
+        text-sm w-full
+        appearance-none
+        placeholder:text-neutral-400
+        border border-yellow-500
+        px-4 py-2 rounded-md
+        focus:outline-none focus:ring-2 focus:ring-yellow-400
+      ` + ` ${inputBgColor}`}
+    />
+    <div className='rounded-md mt-3 sm:mt-0 sm:ml-3'>
+      <button
+        type='submit'
+        className={`
+          w-full
+          text-sm border border-transparent rounded-md
+          bg-yellow-500 text-white
+          px-4 py-2
+          hover:bg-yellow-400
+          transition ease-out duration-200
+        `}
+      >
+        Subscribe
+      </button>
+    </div>
+  </form>
+)
+
+export default SubscribeForm
--- a/web/src/css/custom.css
+++ b/web/src/css/custom.css
@ -5,6 +5,26 @@
 * work well for content-centric websites.
 */

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Removes blue tap box over Button/Link on mobile.
+ * Issue on Tailwind's repo: https://github.com/tailwindlabs/tailwindcss/discussions/2984
+ */
+@layer base {
+    html {
+        -webkit-tap-highlight-color: transparent;
+        -webkit-font-smoothing: auto;
+    }
+}
+
+
+
+/* Docusaurus stuff */
+
 /* You can override the default Infima variables here. */
 :root {
  /* Our custom values */
@ -18,6 +38,7 @@
  --ifm-h3-font-size: 1.3rem;

  /* Infima overrides */
+  --ifm-font-family-base: 'Inter';
  --ifm-color-primary: #BF9900; /* wasp color (ffcc00) darkened by 25% */
  --ifm-color-primary-dark: #8a6f04;
  --ifm-color-primary-darker: rgb(31, 165, 136);
@ -47,292 +68,3 @@
  --custom-background-color-diff: #2A2A2A;
 }

-/* In-blog stuff */
-
-/* NOTE(matija): this is used within a blog post (e.g. seed round 
- * announcement). */
-.in-blog-cta--link {
-  color: var(--ifm-color-primary);
-  font-weight: bold;
-  text-decoration: underline;
-}
-
-.in-blog-cta--divider {
-  color: black;
-}
-
-.image-caption {
-  color: grey;
-}
-
-/* EOF In-blog stuff */
-
-.button--huge {
-  display: flex;
-  align-items: center;
-  font-size: 1.5rem;
-  height: 64px;
-
-  /* --ifm-button-size-multiplier: 1.95; */
-}
-
-.modal-step-title {
-  font-weight: 300;
-}
-
-.emailCtaTop {
-  margin-top: 0 !important;
-}
-
-.hero-row {
-  margin-bottom: 9rem;
-}
-
-.hero-title {
-  font-size: 2.2rem; /* 2.7rem */
-  font-weight: 700;
-}
-
-.hero-subtitle {
-  font-size: 2.5rem;
-  line-height: 2.7rem;
-  font-weight: 500;
-
-  margin-bottom: 3.5rem;
-}
-
-.hero-text-col {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-}
-
-.hero-works-with-icons img {
-  max-height: 4rem;
-}
-
-.hero-works-with-icons img:not(:last-child) {
-  margin-right: 2.2rem;
-}
-
-.works-with-text {
-  font-size: 1.4rem;
-  margin-bottom: 2rem;
-}
-
-.bg-diff {
-  background-color: var(--custom-background-color-diff);
-}
-
-.prism-code {
-  font-size: 0.9rem;
-}
-
-@media screen and (max-width: 996px) {
-  .row .col {
-    padding-top: var(--ifm-col-spacing-vertical);
-    padding-bottom: var(--ifm-col-spacing-vertical);
-  }
-}
-.docusaurus-highlight-code-line {
-  background-color: rgb(0, 77, 91);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
-#signup-atf {
-  padding: 0;
-}
-
-#signup {
-  padding: 2rem 0;
-}
-
-
-.section-text {
-  padding-top: 2rem;
-}
-
-.token.command {
-  color: white
-}
-
-.title {
-  font-size: 1.55rem;
-}
-
-.title-strong {
-  font-weight: 600;
-}
-
-.codeExampleFiles > *:not(:first-child) {
-  margin-top: 1rem;
-}
-
-.code-with-header pre {
-  border-radius: 0 0 4px 4px;
-}
-
-.code-header {
-  background: var(--ifm-code-background-dark);
-  color: #ccc;
-  padding: 5px 15px;
-  border-radius: 4px 4px 0 0;
-  font-size: 0.8rem;
-  font-weight: bold;
-  /* text-transform: uppercase; */
-  border-bottom: 1px solid #444;
-}
-
-img.logo {
-  max-height: 2rem;
-}
-
-html[data-theme='dark'] img.logo {
-  filter: invert(1)
-}
-
-img.wasp-diagram {
-  max-height: 450px;
-  background: white;
-  padding: 30px;
-}
-
-img.rwa {
-  border-style: solid;
-  border-width: 5px;
-  border-radius: 5px;
-  border-color: var(--ifm-color-primary);
-  margin-bottom: 1rem;
-  padding: 1px;
-}
-img.rwa:hover {
-  opacity: 0.5;
-}
-
-@media screen and (max-width: 996px) {
-  img.wasp-diagram {
-    padding: 0;
-  }
-}
-
-h3 {
-  font-weight: 400;
-}
-
-.section-lg {
-  margin: 5rem 0;
-}
-
-.CodeExamples {
-  display: flex;
-  flex-direction: row-reverse;
-}
-
-.ButtonTabs {
-  padding-left: 0 !important;
-}
-
-.ButtonTabs .button {
-  width: 100%;
-  display: block;
-  margin-bottom: 8px;
-  margin-right: 10px;
-  border: 2px solid var(--ifm-button-background-color);
-
-  text-align: left;
-}
-
-.ButtonTabs .button.is-active,
-.ButtonTabs .button:hover {
-  border: 2px solid var(--ifm-color-primary);
-  box-shadow: var(--custom-shadow-lw);
-}
-
-/* But */
-@media screen and (max-width: 997px) {
-  .ButtonTabs {
-    padding-left: var(--ifm-spacing-horizontal) !important;
-  }
-  .ButtonTabs > div {
-    display: flex !important;
-    flex-wrap: nowrap !important;
-    overflow-x: auto !important;
-    -webkit-overflow-scrolling: touch !important;
-    -ms-overflow-style: -ms-autohiding-scrollbar !important;
-  }
-  .ButtonTabs .button {
-    display: inline-block;
-    width: auto;
-  }
-}
-
-.navbar-item-inner {
-  font-weight: var(--ifm-font-weight-normal)
-}
-
-/* Discord icon */
-
-.navbar-item-discord {
-  margin-right: 15px;
-}
-
-.navbar-item-discord:hover {
-  opacity: 0.6;
-}
-
-.navbar-item-discord:before {
-  content: '';
-  margin-top: 6px;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 3 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.9699 7.7544C27.1043 5.44752 22.5705 5.05656 22.3761 5.04288C22.2284 5.03072 22.0806 5.0648 21.9531 5.1404C21.8257 5.216 21.7249 5.32937 21.6647 5.4648C21.5783 5.65936 21.5049 5.85949 21.4451 6.06384C23.3409 6.38424 25.6694 7.02864 27.7761 8.33616C27.8565 8.38604 27.9262 8.45126 27.9814 8.52809C28.0366 8.60493 28.0761 8.69187 28.0976 8.78397C28.1192 8.87607 28.1224 8.97151 28.1071 9.06485C28.0917 9.15819 28.0582 9.24759 28.0083 9.32796C27.9584 9.40833 27.8932 9.47809 27.8164 9.53325C27.7395 9.58842 27.6526 9.62791 27.5605 9.64947C27.4684 9.67103 27.373 9.67424 27.2796 9.65892C27.1863 9.6436 27.0969 9.61004 27.0165 9.56016C23.3949 7.3116 18.8719 7.2 17.9999 7.2C17.1287 7.2 12.6028 7.31232 8.98338 9.55944C8.90301 9.60932 8.81361 9.64288 8.72027 9.6582C8.62693 9.67352 8.53149 9.67031 8.43939 9.64875C8.25339 9.6052 8.09231 9.48955 7.99158 9.32724C7.89085 9.16493 7.85873 8.96925 7.90227 8.78325C7.94582 8.59725 8.06147 8.43617 8.22378 8.33544C10.3305 7.03152 12.659 6.38424 14.5547 6.06672C14.4453 5.7096 14.3459 5.48424 14.3387 5.4648C14.2788 5.32841 14.1776 5.2143 14.0493 5.13859C13.921 5.06288 13.7721 5.0294 13.6238 5.04288C13.4294 5.05728 8.89554 5.44752 5.99034 7.78536C4.47474 9.18792 1.43994 17.3894 1.43994 24.48C1.43994 24.6067 1.47378 24.7277 1.5357 24.8371C3.62802 28.5163 9.3405 29.4775 10.6423 29.52H10.6646C10.7782 29.5203 10.8903 29.4937 10.9916 29.4424C11.093 29.3911 11.1808 29.3165 11.2478 29.2248L12.5632 27.4133C9.01146 26.4967 7.19706 24.9386 7.09338 24.8458C6.95017 24.7194 6.86303 24.5412 6.85115 24.3506C6.83927 24.1599 6.90361 23.9723 7.03002 23.8291C7.15643 23.6859 7.33456 23.5988 7.52522 23.5869C7.71588 23.575 7.90345 23.6394 8.04666 23.7658C8.08842 23.8054 11.4299 26.64 17.9999 26.64C24.5807 26.64 27.9223 23.7938 27.9561 23.7658C28.0998 23.6403 28.2874 23.5769 28.4777 23.5896C28.668 23.6023 28.8456 23.69 28.9713 23.8334C29.0335 23.9042 29.0812 23.9864 29.1117 24.0756C29.1421 24.1647 29.1546 24.259 29.1486 24.353C29.1426 24.447 29.1181 24.5389 29.0766 24.6235C29.035 24.708 28.9772 24.7836 28.9065 24.8458C28.8028 24.9386 26.9884 26.4967 23.4367 27.4133L24.7528 29.2248C24.8198 29.3164 24.9074 29.3909 25.0087 29.4422C25.1099 29.4935 25.2218 29.5202 25.3353 29.52H25.3569C26.6601 29.4775 32.3719 28.5156 34.4649 24.8371C34.5261 24.7277 34.5599 24.6067 34.5599 24.48C34.5599 17.3894 31.5251 9.18864 29.9699 7.7544V7.7544ZM13.3199 21.6C11.9275 21.6 10.7999 20.3112 10.7999 18.72C10.7999 17.1288 11.9275 15.84 13.3199 15.84C14.7124 15.84 15.8399 17.1288 15.8399 18.72C15.8399 20.3112 14.7124 21.6 13.3199 21.6ZM22.6799 21.6C21.2875 21.6 20.1599 20.3112 20.1599 18.72C20.1599 17.1288 21.2875 15.84 22.6799 15.84C24.0724 15.84 25.1999 17.1288 25.1999 18.72C25.1999 20.3112 24.0724 21.6 22.6799 21.6Z'/%3E%3C/svg%3E")
-    no-repeat;
-}
-
-html[data-theme='dark'] .navbar-item-discord:before {
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 3 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M29.9699 7.7544C27.1043 5.44752 22.5705 5.05656 22.3761 5.04288C22.2284 5.03072 22.0806 5.0648 21.9531 5.1404C21.8257 5.216 21.7249 5.32937 21.6647 5.4648C21.5783 5.65936 21.5049 5.85949 21.4451 6.06384C23.3409 6.38424 25.6694 7.02864 27.7761 8.33616C27.8565 8.38604 27.9262 8.45126 27.9814 8.52809C28.0366 8.60493 28.0761 8.69187 28.0976 8.78397C28.1192 8.87607 28.1224 8.97151 28.1071 9.06485C28.0917 9.15819 28.0582 9.24759 28.0083 9.32796C27.9584 9.40833 27.8932 9.47809 27.8164 9.53325C27.7395 9.58842 27.6526 9.62791 27.5605 9.64947C27.4684 9.67103 27.373 9.67424 27.2796 9.65892C27.1863 9.6436 27.0969 9.61004 27.0165 9.56016C23.3949 7.3116 18.8719 7.2 17.9999 7.2C17.1287 7.2 12.6028 7.31232 8.98338 9.55944C8.90301 9.60932 8.81361 9.64288 8.72027 9.6582C8.62693 9.67352 8.53149 9.67031 8.43939 9.64875C8.25339 9.6052 8.09231 9.48955 7.99158 9.32724C7.89085 9.16493 7.85873 8.96925 7.90227 8.78325C7.94582 8.59725 8.06147 8.43617 8.22378 8.33544C10.3305 7.03152 12.659 6.38424 14.5547 6.06672C14.4453 5.7096 14.3459 5.48424 14.3387 5.4648C14.2788 5.32841 14.1776 5.2143 14.0493 5.13859C13.921 5.06288 13.7721 5.0294 13.6238 5.04288C13.4294 5.05728 8.89554 5.44752 5.99034 7.78536C4.47474 9.18792 1.43994 17.3894 1.43994 24.48C1.43994 24.6067 1.47378 24.7277 1.5357 24.8371C3.62802 28.5163 9.3405 29.4775 10.6423 29.52H10.6646C10.7782 29.5203 10.8903 29.4937 10.9916 29.4424C11.093 29.3911 11.1808 29.3165 11.2478 29.2248L12.5632 27.4133C9.01146 26.4967 7.19706 24.9386 7.09338 24.8458C6.95017 24.7194 6.86303 24.5412 6.85115 24.3506C6.83927 24.1599 6.90361 23.9723 7.03002 23.8291C7.15643 23.6859 7.33456 23.5988 7.52522 23.5869C7.71588 23.575 7.90345 23.6394 8.04666 23.7658C8.08842 23.8054 11.4299 26.64 17.9999 26.64C24.5807 26.64 27.9223 23.7938 27.9561 23.7658C28.0998 23.6403 28.2874 23.5769 28.4777 23.5896C28.668 23.6023 28.8456 23.69 28.9713 23.8334C29.0335 23.9042 29.0812 23.9864 29.1117 24.0756C29.1421 24.1647 29.1546 24.259 29.1486 24.353C29.1426 24.447 29.1181 24.5389 29.0766 24.6235C29.035 24.708 28.9772 24.7836 28.9065 24.8458C28.8028 24.9386 26.9884 26.4967 23.4367 27.4133L24.7528 29.2248C24.8198 29.3164 24.9074 29.3909 25.0087 29.4422C25.1099 29.4935 25.2218 29.5202 25.3353 29.52H25.3569C26.6601 29.4775 32.3719 28.5156 34.4649 24.8371C34.5261 24.7277 34.5599 24.6067 34.5599 24.48C34.5599 17.3894 31.5251 9.18864 29.9699 7.7544V7.7544ZM13.3199 21.6C11.9275 21.6 10.7999 20.3112 10.7999 18.72C10.7999 17.1288 11.9275 15.84 13.3199 15.84C14.7124 15.84 15.8399 17.1288 15.8399 18.72C15.8399 20.3112 14.7124 21.6 13.3199 21.6ZM22.6799 21.6C21.2875 21.6 20.1599 20.3112 20.1599 18.72C20.1599 17.1288 21.2875 15.84 22.6799 15.84C24.0724 15.84 25.1999 17.1288 25.1999 18.72C25.1999 20.3112 24.0724 21.6 22.6799 21.6Z'/%3E%3C/svg%3E")
-    no-repeat;
-}
-
-/* Twitter icon */
-
-.navbar-item-twitter:hover {
-  opacity: 0.6;
-}
-.navbar-item-twitter:before {
-  content: '';
-  margin-top: 6px;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 335 276' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m302 70a195 195 0 0 1 -299 175 142 142 0 0 0 97 -30 70 70 0 0 1 -58 -47 70 70 0 0 0 31 -2 70 70 0 0 1 -57 -66 70 70 0 0 0 28 5 70 70 0 0 1 -18 -90 195 195 0 0 0 141 72 67 67 0 0 1 116 -62 117 117 0 0 0 43 -17 65 65 0 0 1 -31 38 117 117 0 0 0 39 -11 65 65 0 0 1 -32 35'/%3E%3C/svg%3E")
-    no-repeat;
-}
-html[data-theme='dark'] .navbar-item-twitter:before {
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 335 276' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='m302 70a195 195 0 0 1 -299 175 142 142 0 0 0 97 -30 70 70 0 0 1 -58 -47 70 70 0 0 0 31 -2 70 70 0 0 1 -57 -66 70 70 0 0 0 28 5 70 70 0 0 1 -18 -90 195 195 0 0 0 141 72 67 67 0 0 1 116 -62 117 117 0 0 0 43 -17 65 65 0 0 1 -31 38 117 117 0 0 0 39 -11 65 65 0 0 1 -32 35'/%3E%3C/svg%3E")
-    no-repeat;
-}
-
-.navbar-item-email-signup {
-    text-decoration: underline;
-}
-
-
-.navbar-item-github:hover {
-  opacity: 0.6;
-}
-.navbar-item-github:before {
-  content: '';
-  width: 24px;
-  height: 24px;
-  display: flex;
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-    no-repeat;
-}
-html[data-theme='dark'] .navbar-item-github:before {
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-    no-repeat;
-}
--- a/web/src/pages/index.css
+++ b/web/src/pages/index.css
@ -0,0 +1,62 @@
+
+html {
+  font-family: Inter;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  /*
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  */
+
+  /*
+  font-family: Inter;
+  */
+
+  /* Fading out dots */
+  /*
+  background: linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff 300px),
+              fixed 0 0 /20px 20px radial-gradient(#d1d1d1 1px,transparent 0),
+              fixed 10px 10px /20px 20px radial-gradient(#d1d1d1 1px,transparent 0)
+  */
+
+  /** Honeycomb pattern
+   *
+  background:
+    radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,
+    radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,
+    linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,
+    linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
+    linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
+    linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
+  background-size: 40px 60px;
+  */
+
+}
+
+div.twLandingPage {
+  background-color: #f5f5f5;
+}
+
+pre code {
+  line-height: 1.25rem;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+/*
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    color: white;
+    background: black;
+  }
+}
+*/
--- a/web/src/pages/index.js
+++ b/web/src/pages/index.js
@ -1,870 +1,60 @@
-import React, { useState, useEffect } from 'react';
-import clsx from 'clsx';
-import Layout from '@theme/Layout';
-import CodeBlock from '@theme/CodeBlock';
-import CodeBlockWithTitle from '../components/CodeBlockWithTitle'
-import EmailSignupForm from '../components/EmailSignupForm/index.js'
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import Head from '@docusaurus/Head';
-import styles from './styles.module.css';
-import Modal from 'react-modal';
+import React from 'react'
+import classNames from 'classnames'

-const features = [
-  {
-    title: 'Quick start',
-    //imageUrl: 'img/undraw_docusaurus_mountain.svg',
-    description: (
-      <>
-        No more endless configuration files. Create a production-ready web app
-        with just a few lines of code - we will set you up with all the best defaults.
-      </>
-    ),
-  },
-  {
-    title: 'Speed & Power',
-    //imageUrl: 'img/undraw_docusaurus_tree.svg',
-    description: (
-      <>
-        Move fast using Wasp's declarative language, but also
-        drop down to <code>js/html/css...</code> when you require more control.
-      </>
-    ),
-  },
-  {
-    title: 'No lock-in',
-    //imageUrl: 'img/undraw_docusaurus_react.svg',
-    description: (
-      <>
-        If Wasp becomes too limiting for you, simply eject and continue with the human-readable
-        source code following industry best-practices.
-      </>
-    ),
-  },
-];
+import Nav from '../components/Nav/index'
+import Hero from '../components/Hero'
+import Benefits from '../components/Benefits'
+import HowItWorks from '../components/HowItWorks'
+import ShowcaseGallery from '../components/ShowcaseGallery'
+import Newsletter from '../components/Newsletter'
+import Faq from '../components/Faq'
+import Footer from '../components/Footer'

-function Feature({imageUrl, title, description}) {
-  const imgUrl = useBaseUrl(imageUrl);
+import styles from './styles.module.css'
+import './index.css'
+import './preflight.css'
+
+
+const Background = () => {
  return (
-    <div className={clsx('col col--4', styles.feature)}>
-      {imgUrl && (
-        <div className="text--center">
-          <img className={styles.featureImage} src={imgUrl} alt={title} />
-        </div>
-      )}
-      <h2>{title}</h2>
-      <p>{description}</p>
-    </div>
-  );
-}
-
-function PageBreakWithLogo() {
-  return (
-    <section className={'section-lg'}>
-      <div className="container"
-           style={{ textAlign: 'center' }}>
-        <img className="logo" src="img/eqpar-separator.png"/>
-      </div>
-    </section>
-  )
-}
-
-function WaspLatestVersion() {
-  const [latestRelease, setLatestRelease] = useState(null)
-
-  useEffect(() => {
-    const fetchRelease = async () => {
-      const response = await fetch(
-        'https://api.github.com/repos/wasp-lang/wasp/releases'
-      )
-      console.log(response)
-      const releases = await response.json()
-      if (releases) {
-        setLatestRelease(releases[0])
-      }
-    }
-    fetchRelease()
-  }, [])
-
-  if (latestRelease) {
-    return (
-      <h4 className={styles.waspVersion}>
-        <a href={latestRelease.html_url}>
-          { latestRelease.name }
-        </a>
-      </h4>
-    )
-  } else {
-    return null
-  }
-}
-
-function ProductHuntBadge() {
-  return (
-    <a href="https://www.producthunt.com/posts/wasp-lang-alpha?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-wasp-lang-alpha" target="_blank">
-      <img 
-        src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=277135&theme=light&period=daily"
-        alt="Wasp-lang Alpha - Develop web apps in React & Node.js with no boilerplate | Product Hunt"
-        style={{width: '250px', height: '54px'}} width="250" height="54"
-      />
-  </a>
-  )
-}
-
-function HeroCodeExample() {
-  // NOTE: There is an image in static/img/hero-code-shot.png of this code,
-  //   used as the main image of the web app (specified via <meta>) when being
-  // parsed by external sites (Facebook, Twitter, Reddit, ...).
-  // Therefore, if this example changes, you should also update that image
-  // (just take a screenshot).
-
-  const createAppWaspCode =
-`app todoApp {
-  title: "ToDo App", /* visible in tab */
-
-  auth: { /* full-stack auth out-of-the-box */
-    userEntity: User,
-    externalAuthEntity: SocialLogin,
-    methods: {
-      usernameAndPassword: {},
-      google: {}
-    }
-  }
-}
-
-route RootRoute { path: "/", to: MainPage }
-page MainPage {
-  /* import your React code */
-  component: import Main from "@ext/Main.js"
-}
-`
-  return (
-    <CodeBlockWithTitle title="todoApp.wasp" language="css">
-      { createAppWaspCode }
-    </CodeBlockWithTitle>
-  )
-}
-
-function CodeExamples() {
-  const CodeExample = Object.freeze({
-    NEW_APP: 'Create a new app',
-    DEFINE_ENTITY: 'Define and query a data model',
-    ADD_AUTH: 'Add authentication'
-  })
-
-  const getButtonTextForCodeExample = (codeExample) => CodeExample[codeExample]
-
-  const [currentCodeExample, setCodeExample] = useState(CodeExample.NEW_APP)
-
-  function CurrentCodeExample() {
-    if (currentCodeExample === CodeExample.NEW_APP) {
-    const createAppWaspCode =
-`/* global app settings */
-app todoApp {
-  title: "ToDo App" /* browser tab title */
-}
-
-/* routing */
-route RootRoute { path: "/", to: MainPage }
-page MainPage {
-  component: import Main from "@ext/Main" /* import your React code */
-}
-`
-
-    const createAppMainComponentCode =
-`import React from 'react'
-
-export default () => <span> Hello World! </span>
-`
-      return (
-        <div className="codeExampleFiles">
-          <CodeBlockWithTitle title="todoApp.wasp" language="css">
-            { createAppWaspCode }
-          </CodeBlockWithTitle>
-
-          <CodeBlockWithTitle
-            title="ext/Main.js | External React code, imported above"
-            language="jsx">
-            { createAppMainComponentCode }
-          </CodeBlockWithTitle>
-
-          <div>
-            That's it, this is the whole app! Run <code>wasp start</code> and check it out
-            at <code>http://localhost:3000</code>!
-          </div>
-        </div>
-      )
-    } else if (currentCodeExample === CodeExample.ADD_AUTH) {
-    const exampleCode =
-`app todoApp {
-  /* ... */
-
-  /* full-stack auth out-of-the-box */
-  auth: {
-    userEntity: User,
-    methods: {
-      usernameAndPassword: {}
-    }
-    onAuthFailedRedirectTo: "/login"
-  }
-}
-
-/* ... */
-
-/* username & password required because of the auth method above */
-entity User {=psl
-    id          Int     @id @default(autoincrement())
-    username    String  @unique
-    password    String
-psl=}
-
-page MainPage {
-  authRequired: true, /* available only to logged in users */
-  component: import Main from "@ext/Main"
-}
-`
-
-      const mainUsingAuthCode =
-`import React from 'react'
-import Todo from './Todo.js'
-
-/* Because of authRequired property in todoApp.wasp, this page is
- * available only to logged in users and prop 'user' is automatically provided by wasp. */
-export default ({ user }) => {
-  return <Todo/>
-}
-`
-      return (
-        <div className="codeExampleFiles">
-          <CodeBlockWithTitle title="todoApp.wasp" language="css">
-            { exampleCode }
-          </CodeBlockWithTitle>
-          <CodeBlockWithTitle title="ext/Main.js | Checking if user is logged in" language="jsx">
-            { mainUsingAuthCode }
-          </CodeBlockWithTitle>
-
-          <div>
-            To learn more about authentication & authorization in Wasp, check
-            the <Link to={useBaseUrl('/docs/language/features#authentication--authorization')}>docs</Link>.
-          </div>
-        </div>
-      )
-    } else if (currentCodeExample === CodeExample.DEFINE_ENTITY) {
-      const defineEntityWaspCode =
-`/* ... */
-
-/* Data model is defined via Prisma Schema Language (PSL) */
-entity Task {=psl
-    id          Int     @id @default(autoincrement())
-    description String
-    isDone      Boolean @default(false)
-psl=}
-
-query getTasks {
-  fn: import { getTasks } from "@ext/queries.js", /* import Node.js function */
-  /* A list of entities this query uses - useful for automatic invalidation and refetching */
-  entities: [Task]
-}
-`
-      const getTasksQueryCode =
-`export const getTasks = async (args, context) => {
-  // Since we above declared this query is using Task, it is automatically injected in the
-  // context.
-  return context.entities.Task.findMany()
-}
-`
-      const todoUsingGetTasksCode =
-`import React from 'react'
-import { useQuery } from '@wasp/queries'
-import getTasks from '@wasp/queries/getTasks.js'
-
-export default () => {
-  // Standard useQuery syntax, Wasp provides a thin wrapper around it.
-  const { data: tasks } = useQuery(getTasks)
-  return <Tasks tasks={tasks}/>
-}
-`
-      return (
-        <div className="codeExampleFiles">
-          <CodeBlockWithTitle title="todoApp.wasp" language="css">
-            { defineEntityWaspCode }
-          </CodeBlockWithTitle>
-          <CodeBlockWithTitle
-            title="ext/queries.js | Node.js function imported in a query above"
-            language="jsx"
-          >
-            { getTasksQueryCode }
-          </CodeBlockWithTitle>
-          <CodeBlockWithTitle title="ext/Todo.js | Invoking query from React code" language="jsx">
-            { todoUsingGetTasksCode }
-          </CodeBlockWithTitle>
-
-          <div>
-            To learn more about working with data in Wasp, check
-            the <Link to={useBaseUrl('/docs/language/language/features#entity')}>docs</Link>.
-          </div>
-        </div>
-      )
-    } else {
-      console.log('this should never happen.')
-      return null
-    }
-  }
-
-  function Buttons() {
-
-    function Button({ codeExampleKey }) {
-      return (
-        <button
-          className={clsx('button',
-            'info', 
-            currentCodeExample === CodeExample[codeExampleKey] && 'is-active',
-            'button--secondary'
-          )}
-          onClick={() => setCodeExample(CodeExample[codeExampleKey])}
-        >
-          { getButtonTextForCodeExample(codeExampleKey) }
-        </button>
-      )
-    }
-
-    return (
-      Object.keys(CodeExample).map((k, idx) => <Button codeExampleKey={k} key={idx} />)
-    )
-  }
-
-  return (
-    <div className="row CodeExamples">
-      <div className="ButtonTabs col col--3">
-        <div>
-          <Buttons/>
-        </div>
-      </div>
-
-      <div className="col col--9">
-        <CurrentCodeExample/>
-      </div>
+    <div className='absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none'>
+      <span className={classNames(styles.leftLights, "opacity-100")} />
    </div>
  )
 }

-function WaspGhStarsCount() {
+const LightsTwo = () => (
+  <div className='absolute top-[1800px] lg:top-[1000px] left-0 w-full h-full overflow-hidden pointer-events-none'>
+    <span className={classNames(styles.lightsTwo, "opacity-100")} />
+  </div>
+)
+
+const Index = () => {
  return (
-    <iframe
-        src="https://ghbtns.com/github-btn.html?user=wasp-lang&repo=wasp&type=star&count=true&size=large" 
-        frameBorder="0"
-        scrolling="0"
-        width="160px" height="30px">
-    </iframe>
-  )
-}
+    <div className='twLandingPage'>
+      <Nav />
+      <div className='min-h-screen'>
+        <main>
+          <Background />
+          <div> {/* container */}

-function WaspDiscordBadge() {
-  return (
-    <a href="https://discord.gg/rzdnErX">
-      <img alt="discord" src="https://img.shields.io/discord/686873244791210014?label=chat%20@%20discord" height="29px" />
-    </a>
-  )
-}
+            <Hero />
+            <Benefits />

-function EmailCta() {
-  return (
-    <section className={clsx('section-lg', 'emailCtaTop')} id="signup-atf">
-      <div className="container">
+            <LightsTwo />

-        <div className={clsx('row', styles.responsiveCentered)}>
-          <div className="col col--10 col--offset-1">
-          </div>
-        </div>
-
-        <div className={clsx('row', styles.responsiveCentered)} style={{ paddingTop: '1rem' }}>
-          <div className="col col--8 col--offset-2">
-            <EmailSignupForm placeholder="Enter your email to receive updates"/>
-          </div>
-        </div>
+            <HowItWorks />
+            <ShowcaseGallery />
+            <Newsletter />
+            <Faq />

+          </div> {/* eof container */}
+        </main>
      </div>
-    </section>
+      <Footer />
+    </div>
+
  )
 }

-function EmailAndGithubCta() {
-  return (
-    <section className={'section-lg bg-diff'} id="signup">
-      <div className="container">
-
-        <div className={clsx('row', styles.responsiveCentered)}>
-          <div className="col col--10 col--offset-1">
-            <h2>Stay up to date</h2>
-            <h3>
-              <p>
-                Join our mailing list and be the first to know when we ship new features
-                and updates!
-              </p>
-            </h3>
-          </div>
-        </div>
-
-        <div className={clsx('row', styles.responsiveCentered)} style={{ paddingTop: '1rem' }}>
-          <div className="col col--8 col--offset-2">
-            <EmailSignupForm/>
-          </div>
-        </div>
-
-        <div className={clsx('row', styles.responsiveCentered, 'section-text')}>
-          <div className="col col--10 col--offset-1">
-            <h3>
-              <p>
-                Also, make sure to check
-                out <Link to={'https://github.com/wasp-lang/wasp'}>Wasp repo
-                on Github</Link> and express your support by
-                giving us a star!
-              </p>
-            </h3>
-          </div>
-        </div>
-
-        <div className={clsx('row', styles.responsiveCentered)} style={{ paddingTop: '1rem' }}>
-          <div className="col">
-            <WaspGhStarsCount />
-            <WaspDiscordBadge />
-          </div>
-        </div>
-
-      </div>
-    </section>
-  )
-}
-
-function SocialProofSection() {
-  return (
-    <section className={clsx('section-lg', 'bg-diff', styles.socialProofSection)}>
-      <div className="container">
-        <div className={clsx('row', styles.responsiveCentered)}>
-
-          <div className="col col--10 col--offset-1">
-            <div className={clsx(styles.socialProof)}>
-              <div className={clsx(styles.backedByYC)}>
-                <img className={clsx(styles.ycLogo)} src="img/ycombinator-logo.png" />
-                <span>backed by <strong>Y Combinator</strong></span>
-              </div>
-              <ProductHuntBadge />
-            </div>
-          </div>
-
-        </div> {/* End of row */}
-      </div>
-    </section>
-  )
-}
-
-function Home() {
-  const context = useDocusaurusContext();
-  const {siteConfig = {}} = context;
-
-  const [modalIsOpen, setModalIsOpen] = React.useState(false)
-
-  const todoTutorialUrl = useBaseUrl('docs/tutorials/todo-app');
-  const waspRwaDemoUrl = 'https://wasp-rwa.netlify.app';
-
-  const modalStyles = {
-    content : {
-      top                   : '40%',
-      left                  : '40%',
-      transform             : 'translate(-30%, -30%)',
-      paddingTop            : '4rem',
-      background            : 'var(--ifm-hero-background-color)',
-      /*
-      right                 : 'auto',
-      bottom                : 'auto',
-      marginRight           : '-50%',
-      */
-    }
-  };
-
-  function openModal() {
-    setModalIsOpen(true);
-  }
-
-  function closeModal() {
-    setModalIsOpen(false);
-  }
-
-  return (
-    <Layout
-      title={`${siteConfig.title}`}
-      description={siteConfig.tagline}
-    >
-      <Head>
-        <meta property="og:image" content={siteConfig.url + useBaseUrl('img/hero-code-shot.png')} />
-      </Head>
-
-      <header className={clsx('hero', styles.heroBanner)}>
-        <div className="container">
-
-          <div className="row hero-row">
-            <div className="col col--7">
-
-              <div className="hero-text-col">
-
-                <h2 className="hero-subtitle">{siteConfig.tagline}</h2>
-
-                <div className="hero-works-with">
-                  <h3 className="works-with-text">
-                    Describe high-level features with Wasp DSL and write the rest of your logic
-                    in React, Node.js and Prisma.
-                  </h3>
-                  <div className="hero-works-with-icons">
-                    <img src="img/react-logo.svg" />
-                    <img src="img/nodejs-logo.svg" />
-                    <img src="img/prisma-logo.svg" />
-                  </div>
-                </div>
-              </div>
-            </div> {/* End of col. */}
-
-            <div className="col col--5">
-              <HeroCodeExample/>
-
-            </div> {/* End of col. */}
-
-          </div> {/* End of row. */}
-
-          <div className={clsx('row', styles.responsiveCentered, styles.tryWaspRow)}>
-            <div className="col col--10 col--offset-1">
-
-              <div className={clsx(styles.tryWaspContainer)}>
-                <div className={clsx(styles.startCliCmd)}>
-                  <span><code>curl -sSL https://get.wasp-lang.dev/installer.sh | sh</code></span>
-                </div>
-
-                {/* TODO: Martin commented tihs out because both buttons started showing up on desktop after upgrading to newer docusaurus. This happens when built for deployment, not during serving for development. Instead, he replaced it with just one version of button, below, instead of having one button for mobile and one for desktop.
-                <div className={clsx(styles.startButtonAndVersion, styles.visibleOnDesktopOnly)}>
-                  <button
-                    className={clsx(
-                      'button button--primary button--huge',
-                      styles.heroButton,
-                    )}
-                    onClick={openModal}
-                  >
-                      Try Wasp in 5 minutes →
-                  </button>
-                </div>
-
-                <div className={clsx(styles.startButtonAndVersion, styles.visibleOnMobileOnly)}>
-                  <Link
-                    className={clsx(
-                      'button button--primary button--huge',
-                      styles.heroButton,
-                    )}
-                    to={useBaseUrl('/docs')}
-                  >
-                      Try Wasp in 5 minutes →
-                  </Link>
-                </div>
-                */}
-
-                <div className={clsx(styles.startButtonAndVersion)}>
-                  <Link
-                    className={clsx(
-                      'button button--primary button--huge',
-                      styles.heroButton,
-                    )}
-                    to={useBaseUrl('/docs')}
-                  >
-                    Try Wasp in 5 minutes →
-                  </Link>
-                </div>
-
-              </div>
-
-              <div className={clsx(styles.usingWindows)}>
-                Using Windows? Check the instructions <Link to={useBaseUrl("/docs/#2-installation")}>here</Link>.
-              </div>
-
-              <Modal
-                isOpen={modalIsOpen}
-                style={modalStyles}
-                onRequestClose={closeModal}
-                shouldCloseOnOverlayClick={true}
-              >
-                <div className="container">
-                  <div className={clsx('row')}>
-                    <div className="col col--10">
-
-
-                      <h2 className="modal-step-title">1. Open your terminal and run:</h2>
-                      <div className={clsx(styles.startCliCmd)} style={{ height: '40px' }}>
-                        <span><code>curl -sSL https://get.wasp-lang.dev/installer.sh | sh</code></span>
-                      </div>
-
-                      <h2 className="modal-step-title "style={{marginTop: '4rem'}}>2. Create a new project:</h2>
-                      <div className={clsx(styles.startCliCmd)} style={{ height: '40px' }}>
-                        <span><code>wasp new MyFirstApp</code></span>
-                      </div>
-
-                      <h2 className="modal-step-title" style={{marginTop: '4rem'}}>3. Run your first app:</h2>
-                      <div className={clsx(styles.startCliCmd)} style={{ height: '40px', marginRight: '10px' }}>
-                        <span><code>cd MyFirstApp && wasp start</code></span>
-                      </div>
-                      <span>
-                        That's it!
-                        Open <Link to='http://localhost:3000/'>http://localhost:3000</Link> and see how it looks like!
-                      </span>
-
-                      <div style={{marginTop: '4rem'}}>
-                        <span>
-                          You ran into problems or want more details? Refer to the <Link to={useBaseUrl('/docs')}>docs</Link>.
-                        </span>
-                      </div>
-
-                    </div>
-                  </div>
-                </div>
-
-
-              </Modal>
-
-
-              <div className={clsx('row', styles.responsiveCentered)} style={{ paddingTop: '1rem' }}>
-                <div className="col">
-                  <WaspGhStarsCount />
-                  <WaspDiscordBadge />
-                </div>
-              </div>
-
-            </div>
-          </div> {/* End of row. */}
-
-        </div>
-      </header>
-
-      <main>
-
-        {/* Social proof */}
-        <SocialProofSection />
-
-        {/* One-line explanation */}
-        <section className={'section-lg'}>
-          <div className="container">
-            <div className={clsx('row', styles.responsiveCentered)}>
-              <div className="col col--12">
-                <h3 className={'title'}>
-                  Wasp is an open source, declarative DSL for devs who want to <span className="title-strong">use modern web dev stack</span>
-                  &nbsp;
-                  <span style={{ whiteSpace: 'nowrap' }}>
-                    (React <img src="img/react-logo.png" height="25px" />,
-                    Node.js <img src="img/node-logo.png" height="25px" />,
-                    Prisma <img src="img/prisma-logo.png" height="25px" />,
-                    ...)
-                  </span>
-                  &nbsp;
-                  <span className="title-strong">without writing boilerplate</span>.
-                </h3>
-                <h3>
-                  <p>Frontend, backend and deployment - all unified with one concise language.</p>
-                  <p>Zero configuration, all best practices.</p>
-                </h3>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <PageBreakWithLogo/>
-
-        {/* Wasp compilation */}
-        <section className={'section-lg'} id="how-it-works">
-          <div className="container">
-
-            <div className={clsx('row', styles.responsiveCentered)}>
-              <div className="col col--10 col--offset-1">
-                <h2>How it works</h2>
-                <h3>
-                  <p>
-                    Given <code>.wasp</code> + <code>.js</code>, <code>.css</code>, <code>...</code> files as an input, Wasp compiler behind the scene&nbsp;
-                    <span className="title-strong">generates the full
-                    source code of your web app</span> - front-end, back-end and deployment.
-                  </p>
-                </h3>
-              </div>
-            </div>
-
-            <div className={clsx('row', styles.responsiveCentered)} style={{ paddingTop: '2rem' }}>
-              <div className="col">
-                <img
-                  className={'wasp-diagram'}
-                  src="img/wasp-compilation.png"
-                  alt="Wasp compilation"
-                />
-              </div>
-            </div>
-
-          </div>
-        </section>
-         
-        <PageBreakWithLogo/>
-
-        {/* Features */}
-        {features && features.length > 0 && (
-          <section className={clsx(styles.features, 'bg-diff')}>
-            <div className="container">
-              <div className="row">
-                {features.map((props, idx) => (
-                  <Feature key={idx} {...props} />
-                ))}
-              </div>
-            </div>
-          </section>
-        )}
-
-        <PageBreakWithLogo/>
-
-        {/* Quick to start, easy to scale */}
-        <section className={'section-lg'} id="fast-and-scalable">
-          <div className="container">
-            <div className={clsx('row', styles.responsiveCentered)}>
-              <div className="col col--10 col--offset-1">
-                <h2>Quick to start, easy to scale</h2>
-                <h3>
-                  <p>
-                    Wasp aims to be at least as flexible as the traditional web frameworks like Ruby on Rails.
-                    <br/>
-                    Start your project quickly with the best defaults and customize and scale it as it grows.
-                  </p>
-                </h3>
-                <h3>
-                  <p>As an example, we used Wasp to implement a copy of Medium:</p>
-                </h3>
-              </div>
-            </div> {/* End of row */}
-
-            <div className="row">
-              <div className="col col--10 col--offset-1">
-                <a href={waspRwaDemoUrl} target="_blank">
-                  <img
-                    className="rwa"
-                    src="img/rwa-screenshot.png"
-                    alt="RealWorldApp in Wasp"
-                  />
-                </a>
-              </div>
-            </div>
-
-            <div className={clsx('row', styles.responsiveCentered)}>
-              <div className="col col--10 col--offset-1">
-                <h3>You can try out the deployed app <a href={waspRwaDemoUrl}>here</a> or check out the source code <a href="https://github.com/wasp-lang/wasp/tree/main/examples/realworld">here</a>.</h3>
-              </div>
-            </div>
-
-          </div>
-        </section>
-
-        <PageBreakWithLogo/>
-
-        {/* What can Wasp do */}
-        <section className={'section-lg'} id="what-can-do">
-          <div className="container">
-
-            <div className={clsx(styles.featuresAndRoadmap, 'row', styles.responsiveCentered)}>
-              <div className="col col--10 col--offset-1">
-                <h2>Features & Roadmap</h2>
-              </div>
-            </div>
-
-            <div className={clsx('row')}>
-              <div className="col col--6">
-                <h3 className={styles.featureListTitle}>Alpha</h3>
-                <ul className={clsx(styles.featuresList, styles.featuresListDone)}>
-                  <li> full-stack auth (username & password, Google) </li>
-                  <li> pages & routing </li>
-                  <li> blurs the line between client & server - define your server actions and queries and call them directly in your client code (RPC)! </li>
-                  <li> smart caching of server actions and queries (automatic cache invalidation) </li>
-                  <li> entity (data model) definition with Prisma.io </li>
-                  <li> ACL on frontend </li>
-                  <li> importing NPM dependencies </li>
-                  <li> background and scheduled jobs </li>
-                </ul>
-              </div>
-              <div className="col col--6">
-                <h3 className={styles.featureListTitle}>Coming next</h3>
-                <ul className={clsx(styles.featuresList, styles.featuresListComing)}>
-                  <li> ACL on backend </li>
-                  <li> one-click deployment </li>
-                  <li> more auth methods (Facebook, LinkedIn, ...) </li>
-                  <li> tighter integration of entities with other features </li>
-                  <li> themes and layouts </li>
-                  <li> support for explicitly defined server API </li>
-                  <li> inline JS - ability to mix JS code with Wasp code! </li>
-                  <li> Typescript support </li>
-                  <li> server-side rendering </li>
-                  <li> Visual Editor </li>
-                  <li> support for different languages on backend </li>
-                  <li> richer wasp language with better tooling </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <PageBreakWithLogo/>
-
-        {/* The language */}
-        <section className={'section-lg'} id="the-language">
-          <div className="container">
-
-            <div className={clsx('row', styles.responsiveCentered)}>
-              <div className="col col--10 col--offset-1">
-                <h2>The Language</h2>
-                <h3>
-                  <p>
-                    Concepts such as <em>app</em>, <em>page</em>, <em>route</em>, <em>auth</em>&nbsp;
-                    etc. are baked into Wasp, providing the
-                    higher level of expressiveness.
-                  </p>
-                </h3>
-              </div>
-            </div>
-
-            <CodeExamples/>
-
-          </div>
-        </section>
-
-        {/* Take the tutorial */}
-        <section className={'section-lg'}>
-          <div className="container">
-
-            <div className={clsx('row', styles.responsiveCentered)}>
-              <div className="col col--10 col--offset-1">
-                <h2>Take the tutorial</h2>
-                <h3>
-                  <p>
-                    Take the <Link to={todoTutorialUrl}> Todo App tutorial </Link> and build a full-fledged Todo app in Wasp!
-                  </p>
-                </h3>
-              </div>
-            </div>
-
-            <div className={clsx('row', styles.responsiveCentered)} style={{ paddingTop: '2rem' }}>
-              <div className="col">
-                <img alt="How Todo App will work once it is done"
-                     src={useBaseUrl('img/todo-app-tutorial-intro.gif')}
-                     style={{ border: "1px solid black" }}
-                />
-              </div>
-            </div>
-
-          </div>
-        </section>
-
-      <div id="join-the-list">
-        <EmailAndGithubCta />
-      </div>
-
-      </main>
-    </Layout>
-  );
-}
-
-export default Home;
+export default Index
--- a/web/src/pages/preflight.css
+++ b/web/src/pages/preflight.css
@ -0,0 +1,367 @@
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+*/
+
+html {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+  font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
+  font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+.twLandingPage h1,
+.twLandingPage h2,
+.twLandingPage h3,
+.twLandingPage h4,
+.twLandingPage h5,
+.twLandingPage h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+.twLandingPage a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+.twLandingPage blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+.twLandingPage figure,
+.twLandingPage p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+.twLandingPage ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: theme('colors.gray.400', #9ca3af); /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+.twLandingPage img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden] {
+  display: none;
+}
--- a/web/src/pages/styles.module.css
+++ b/web/src/pages/styles.module.css
@ -1,221 +1,60 @@
-/* stylelint-disable docusaurus/copyright-header */
-
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.heroBanner {
-  padding: 4.5rem 0 0 0;
-  text-align: left;
+.sectionSkewed {
  position: relative;
-  overflow: hidden;
-
-  min-height: 70vh;
-}
-
-.startButtonAndVersion {
-  display: inline-flex;
-
-  flex-direction: column;
-
-  align-items: flex-start;
-  /*justify-content: flex-start;*/
-}
-
-.startCliCmd {
-  display: inline-flex;
-  background: #2a2d3e;
-  padding: 0.75rem 1rem;
-
-  align-items: center;
-  color: #bf9900;
-
-  height: 64px;
-
-  border-radius: var(--ifm-button-border-radius);
-}
-
-.startCliCmd code {
-  background: none;
-  //color: #bfc7d5;
-  color: #fff;
-  font-size: 1rem;
-
-  white-space: nowrap;
-}
-
-.startCliCmd > span::before {
-  content: "$ ";
-}
-
-.tryWaspRow {
-  margin-bottom: 0rem; /* 6 */
-}
-
-.tryWaspContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  margin-bottom: 0.5rem;
-}
-
-.usingWindows {
-  margin-bottom: 1rem;
-}
-
-.tryWaspContainer div:not(:last-child) {
-  margin-right: 1rem;
-}
-
-.socialProofSection {
-  padding: 3rem 0;
-}
-
-.socialProof {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.socialProof > *:not(:last-child) {
-  margin-right: 1.5rem;
-}
-
-.ycLogo {
-  max-width: 4rem;
-  margin-right: 0.8rem;
-}
-
-.backedByYC {
-  display: flex;
-  align-items: center
-}
-
-.waspVersion {
-  align-self: center;
-  text-decoration: underline;
-
-}
-
-.startButtonAndVersion > *:not(:first-child) {
-  margin-top: 0.8rem;
-}
-
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
+  height: 100%;
  width: 100%;
+  top: 0;
+  left: 0;
+  transform-origin: 100% 0;
+  transform: skewY(-2deg);
+  overflow: hidden;
 }

-.featureImage {
-  height: 200px;
-  width: 200px;
+.sectionSkewedContainer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
 }

-.featureListTitle {
-  font-weight: 600;
-  text-align: center;
+.leftLights::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  width: 1223px;
+  height: 912px;
+
+  width: 1200px;
+  height: 912px;
+
+  left: calc(50% - 1100px);
+  top: -10%;
+
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    rgba(255, 214, 0, 0.2) 0%, 
+    rgba(255, 168, 0, 0) 100%
+  );
+  will-change: filter;
+  mix-blend-mode: normal;
 }

-.featuresList {
-  list-style-type: none;
+.lightsTwo::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  width: 1223px;
+  height: 912px;
+
+  width: 1200px;
+  height: 912px;
+
+  left: calc(50%);
+  top: 0px;
+
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    rgba(255, 214, 0, 0.2) 0%, 
+    rgba(255, 168, 0, 0) 100%
+  );
+  will-change: filter;
+  mix-blend-mode: normal;
 }
-
-.featuresList li {
-  padding-left: 1rem;
-  text-indent: -0.2rem;
-}
-
-.featuresList li:not(:last-child) {
-  margin-bottom: 0.5rem;
-}
-
-.featuresListComing li::before {
-  margin-right: 0.5rem;
-  content: "⏳ ";
-}
-
-.featuresListDone li::before {
-  margin-right: 0.5rem;
-  content: "✅ ";
-}
-
-.responsiveCentered {
-  text-align: center;
-}
-
-.featuresAndRoadmap {
-  margin-bottom: 2rem;
-}
-
-.visibleOnMobileOnly {
-  display: none;
-}
-.visibleOnDesktopOnly {
-  display: block;
-}
-
-/* NOTE(matija): it is important that this element is last! That way it overrides
- * the properties from above, otherwise it would get overriden since the properties above
- * are general. */
-
-/* TODO(matija): there is probably a better way of doing this, I don't like being dependent on
- * the property order.*/
-@media screen and (max-width: 966px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-
-  .visibleOnMobileOnly {
-    display: block;
-  }
-  .visibleOnDesktopOnly {
-    display: none;
-  }
-
-  .tryWaspContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .tryWaspContainer > *:not(:last-child) {
-    margin-right: 0;
-    margin-bottom: 1rem;
-  }
-
-  .startButtonAndVersion {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .startButtonAndVersion > *:not(:first-child) {
-    /* NOTE(matija): this is here to counter margin-left from above, the general case. Terrible, I know. */  
-    margin-left: 0;
-    margin-top: 1rem;
-  }
-
-  .socialProof {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-  .socialProof > *:not(:last-child) {
-    margin-right: 0;
-    margin-bottom: 2rem;
-  }
-
-  .heroButton {
-    width: 100%;
-  }
-
-  .startCliCmd code {
-    font-size: 0.7rem;
-  }
-
-}
-/* style={{ width: '300px', height: '60px', lineHeight: '40px', fontSize: '25px', margin: '40px 0px 0px 70px' }} */
--- a/web/static/img/lp/nodejs-logo-gray.svg
+++ b/web/static/img/lp/nodejs-logo-gray.svg
@ -0,0 +1,6 @@
+<svg width="138" height="40" viewBox="0 0 138 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M126.684 14.3582C126.349 14.3582 126.023 14.4274 125.735 14.5907L116.604 19.8634C116.013 20.204 115.654 20.8468 115.654 21.5309V32.0573C115.654 32.7408 116.013 33.3829 116.604 33.7243L118.989 35.1008C120.147 35.6717 120.574 35.6628 121.102 35.6628C122.817 35.6628 123.796 34.622 123.796 32.8133V22.4225C123.796 22.2756 123.669 22.1706 123.525 22.1706H122.381C122.235 22.1706 122.11 22.2756 122.11 22.4225V32.8133C122.11 33.6149 121.275 34.4213 119.919 33.7437L117.438 32.2898C117.35 32.2421 117.283 32.1578 117.283 32.0573V21.5307C117.283 21.431 117.349 21.3294 117.438 21.2787L126.549 16.0257C126.59 16.0016 126.637 15.9889 126.685 15.9889C126.732 15.9889 126.779 16.0016 126.82 16.0257L135.932 21.279C136.018 21.3313 136.087 21.428 136.087 21.5312V32.0576C136.087 32.1581 136.036 32.261 135.951 32.3095L126.82 37.5628C126.742 37.6095 126.634 37.6095 126.549 37.5628L124.203 36.1672C124.168 36.1478 124.128 36.1377 124.087 36.1377C124.046 36.1377 124.006 36.1478 123.971 36.1672C123.323 36.5342 123.202 36.5767 122.594 36.7874C122.445 36.8397 122.218 36.9208 122.672 37.1754L125.735 38.9779C126.024 39.1445 126.351 39.2315 126.685 39.2301C127.018 39.2322 127.346 39.1452 127.635 38.9782L136.765 33.7245C137.356 33.381 137.715 32.7411 137.715 32.0576V21.5309C137.715 20.8471 137.356 20.2053 136.765 19.864L127.635 14.5912C127.348 14.4277 127.02 14.3584 126.685 14.3584L126.684 14.3582Z" fill="#2F2F2F" fill-opacity="0.5"/>
+<path d="M129.127 21.8796C126.527 21.8796 124.979 22.9862 124.979 24.8264C124.979 26.8223 126.516 27.3709 129.011 27.6177C131.997 27.91 132.229 28.3484 132.229 28.936C132.229 29.9553 131.417 30.3899 129.496 30.3899C127.083 30.3899 126.553 29.7874 126.375 28.5871C126.354 28.4583 126.255 28.3543 126.123 28.3543H124.94C124.795 28.3543 124.669 28.4799 124.669 28.6259C124.669 30.1625 125.505 31.9795 129.496 31.9795C132.385 31.9795 134.052 30.8455 134.052 28.8584C134.052 26.8889 132.706 26.36 129.903 25.9895C127.071 25.6147 126.801 25.4313 126.801 24.7682C126.801 24.2207 127.03 23.4884 129.127 23.4884C131.001 23.4884 131.694 23.8926 131.977 25.1559C132.002 25.2745 132.107 25.369 132.229 25.369H133.412C133.485 25.369 133.555 25.3243 133.606 25.272C133.655 25.2163 133.69 25.1535 133.683 25.0783C133.5 22.9029 132.049 21.8796 129.127 21.8796Z" fill="#2F2F2F" fill-opacity="0.5"/>
+<path d="M73.0059 0.555789C72.9038 0.555857 72.8036 0.582507 72.7149 0.633116C72.6269 0.68465 72.5537 0.758239 72.5027 0.846634C72.4518 0.935029 72.4247 1.03518 72.4242 1.13722V15.9672C72.4242 16.1127 72.3566 16.2431 72.2305 16.3161C72.1687 16.3521 72.0984 16.3711 72.0269 16.3711C71.9554 16.3711 71.8852 16.3521 71.8234 16.3161L69.4001 14.9205C69.2234 14.8182 69.0228 14.7643 68.8186 14.7643C68.6144 14.7643 68.4137 14.8182 68.237 14.9205L58.5636 20.5033C58.2021 20.7121 57.9822 21.1133 57.9822 21.5309V32.6969C57.9822 33.114 58.2023 33.4961 58.5636 33.7049L68.237 39.288C68.4137 39.3905 68.6143 39.4445 68.8186 39.4445C69.0228 39.4445 69.2235 39.3905 69.4001 39.288L79.0735 33.7049C79.2506 33.6029 79.3976 33.4561 79.4998 33.2791C79.6019 33.1021 79.6555 32.9013 79.6552 32.6969V4.8594C79.6549 4.65027 79.5992 4.44495 79.4936 4.26442C79.388 4.08388 79.2365 3.93459 79.0543 3.83179L73.2966 0.613717C73.2064 0.563333 73.1061 0.554442 73.0059 0.555789ZM10.7783 14.494C10.594 14.5012 10.4205 14.5336 10.2551 14.6295L0.581435 20.2126C0.404234 20.3144 0.257114 20.4613 0.154999 20.6383C0.0528854 20.8153 -0.000587913 21.0162 4.87546e-06 21.2206L0.0194039 36.206C0.0194039 36.4143 0.126907 36.608 0.310119 36.7098C0.397956 36.7626 0.498497 36.7905 0.600969 36.7905C0.703441 36.7905 0.803983 36.7626 0.891819 36.7098L6.62988 33.4144C6.99334 33.1983 7.23071 32.8228 7.23071 32.4062V25.408C7.23071 24.9904 7.45029 24.6073 7.81241 24.3998L10.2548 22.9848C10.4314 22.8821 10.6322 22.8285 10.8365 22.8296C11.0359 22.8296 11.2406 22.8794 11.4179 22.9848L13.8606 24.3998C14.0379 24.5015 14.1852 24.6484 14.2874 24.8255C14.3896 25.0026 14.443 25.2036 14.4423 25.408V32.406C14.4423 32.8225 14.6821 33.2008 15.0431 33.4142L20.7812 36.7098C20.869 36.7626 20.9695 36.7905 21.072 36.7905C21.1745 36.7905 21.275 36.7626 21.3629 36.7098C21.4513 36.6587 21.5247 36.5852 21.5758 36.4967C21.6268 36.4082 21.6538 36.3079 21.6538 36.2057L21.6727 21.2206C21.6739 21.0161 21.6206 20.815 21.5184 20.6379C21.4163 20.4608 21.2689 20.314 21.0913 20.2126L11.4179 14.6295C11.2544 14.5336 11.0803 14.5015 10.8947 14.494H10.7783ZM97.703 14.6295C97.5009 14.6295 97.3029 14.6807 97.1215 14.7847L87.4482 20.3678C87.271 20.4697 87.124 20.6166 87.0218 20.7936C86.9197 20.9706 86.8661 21.1714 86.8665 21.3757V32.5417C86.8665 32.9618 87.103 33.3422 87.4673 33.55L97.0633 39.0167C97.4176 39.2188 97.8503 39.2341 98.2071 39.0355L104.023 35.7983C104.207 35.696 104.332 35.5047 104.333 35.2945C104.334 35.1922 104.307 35.0914 104.256 35.0028C104.205 34.9141 104.131 34.8408 104.042 34.7904L94.3106 29.2073C94.1284 29.1033 94.0005 28.8928 94.0005 28.6838V25.1946C94.0005 24.9858 94.1298 24.7945 94.3106 24.6905L97.3347 22.9457C97.423 22.8946 97.5234 22.8676 97.6255 22.8676C97.7276 22.8676 97.828 22.8946 97.9164 22.9457L100.94 24.6905C101.029 24.7414 101.102 24.8148 101.153 24.9033C101.205 24.9918 101.231 25.0922 101.231 25.1944V27.9471C101.231 28.0493 101.258 28.1497 101.309 28.2382C101.36 28.3267 101.433 28.4001 101.522 28.451C101.703 28.5558 101.923 28.5561 102.103 28.451L107.9 25.0785C108.077 24.9762 108.223 24.8292 108.326 24.6523C108.428 24.4753 108.481 24.2746 108.482 24.0703V21.376C108.482 20.9597 108.261 20.5769 107.9 20.3678L98.2847 14.7847C98.1079 14.6824 97.9072 14.629 97.703 14.6297V14.6295ZM68.7796 22.9654C68.8303 22.9654 68.8896 22.9778 68.9348 23.0039L72.2499 24.9231C72.3399 24.9751 72.4051 25.0713 72.4051 25.175V29.0133C72.4051 29.1176 72.3404 29.2135 72.2499 29.2655L68.9348 31.1846C68.8905 31.2099 68.8404 31.2232 68.7895 31.2232C68.7385 31.2232 68.6884 31.2099 68.6441 31.1846L65.3293 29.2655C65.239 29.2132 65.1741 29.1176 65.1741 29.0133V25.175C65.1741 25.071 65.2393 24.9756 65.3293 24.9231L68.6441 23.0042C68.6849 22.9788 68.7319 22.9655 68.7799 22.9657V22.9654H68.7796Z" fill="#2F2F2F" fill-opacity="0.5"/>
+<path d="M39.837 14.5709C39.6354 14.5709 39.4361 14.6221 39.2555 14.7261L29.5822 20.2899C29.2203 20.4981 29.0005 20.9001 29.0005 21.3172V32.4832C29.0005 32.9008 29.2206 33.2823 29.5822 33.4914L39.2555 39.0743C39.4322 39.1769 39.6328 39.2309 39.8371 39.2309C40.0414 39.2309 40.242 39.1769 40.4187 39.0743L50.092 33.4914C50.2691 33.3894 50.4161 33.2425 50.5182 33.0654C50.6203 32.8884 50.6739 32.6876 50.6735 32.4832V21.3172C50.6735 20.8996 50.4536 20.4981 50.092 20.2899L40.4187 14.7261C40.2419 14.624 40.0412 14.5705 39.837 14.5709ZM97.6834 24.5353C97.6449 24.5353 97.602 24.5353 97.5673 24.5547L95.7063 25.6402C95.6716 25.6595 95.6426 25.6876 95.6221 25.7216C95.6017 25.7557 95.5906 25.7945 95.5899 25.8342V27.9665C95.5899 28.0468 95.6363 28.1203 95.7063 28.1605L97.5673 29.2266C97.637 29.267 97.7114 29.267 97.7804 29.2266L99.6413 28.1602C99.6759 28.1408 99.7048 28.1127 99.7252 28.0788C99.7456 28.0448 99.7568 28.0061 99.7577 27.9665V25.8339C99.7568 25.7943 99.7456 25.7556 99.7252 25.7216C99.7048 25.6876 99.6759 25.6596 99.6413 25.6402L97.7804 24.5544C97.7459 24.5342 97.7222 24.5355 97.6834 24.5355V24.5353Z" fill="#2F2F2F" fill-opacity="0.5"/>
+</svg>
--- a/web/static/img/lp/prisma-logo-gray.svg
+++ b/web/static/img/lp/prisma-logo-gray.svg
@ -0,0 +1,6 @@
+<svg width="114" height="46" viewBox="0 0 114 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M69.8179 30.5522H72.8172V19.5584H69.8179V30.5522ZM69.6904 16.7164C69.6904 15.7397 70.2345 15.2515 71.3227 15.2515C72.4106 15.2515 72.955 15.7397 72.955 16.7164C72.955 17.182 72.8189 17.5442 72.547 17.8032C72.2748 18.0622 71.8668 18.1914 71.3227 18.1914C70.2345 18.1914 69.6904 17.6997 69.6904 16.7164Z" fill="#2F2F2F" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.6831 24.2095C58.6504 23.39 59.1338 22.207 59.1338 20.6598C59.1338 19.1716 58.6799 18.0522 57.772 17.3015C56.864 16.5515 55.5383 16.1758 53.7942 16.1758H49.2021V30.5522H52.2504V25.4387H53.5584C55.3414 25.4387 56.7164 25.0293 57.6831 24.2095ZM53.2535 22.9411H52.2504V18.6737H53.6369C54.4695 18.6737 55.0806 18.8438 55.4709 19.1848C55.8608 19.5258 56.056 20.0536 56.056 20.7682C56.056 21.4758 55.8233 22.015 55.3577 22.3855C54.8921 22.756 54.191 22.9411 53.2535 22.9411Z" fill="#2F2F2F" fill-opacity="0.5"/>
+<path d="M68.2271 19.4403C67.9583 19.3813 67.6208 19.3518 67.2143 19.3518C66.5323 19.3518 65.9014 19.5403 65.3215 19.9171C64.7441 20.291 64.2691 20.8031 63.9396 21.407H63.7924L63.3497 19.5584H61.0781V30.5522H64.0774V24.957C64.0774 24.072 64.3444 23.3834 64.8785 22.8917C65.4132 22.4001 66.1587 22.1542 67.116 22.1542C67.4636 22.1542 67.7583 22.1872 68.0011 22.2525L68.2271 19.4403ZM82.2011 29.864C82.9848 29.2737 83.3764 28.4154 83.3764 27.2876C83.3764 26.7435 83.2817 26.2747 83.0914 25.8813C82.9014 25.4879 82.606 25.1407 82.2063 24.839C81.8066 24.5376 81.1771 24.2133 80.3181 23.8657C79.3546 23.4789 78.7303 23.1869 78.4452 22.9904C78.1601 22.7938 78.0171 22.5612 78.0171 22.2921C78.0171 21.8136 78.4598 21.5744 79.3448 21.5744C79.8428 21.5744 80.3313 21.6497 80.8098 21.8001C81.2882 21.9515 81.8032 22.1445 82.3539 22.3806L83.2584 20.2174C82.0063 19.6407 80.7181 19.3522 79.3938 19.3522C78.0039 19.3522 76.9309 19.6192 76.174 20.1535C75.416 20.6879 75.0375 21.4431 75.0375 22.4199C75.0375 22.9904 75.1278 23.4706 75.3084 23.8605C75.4882 24.2508 75.7768 24.5966 76.174 24.898C76.5698 25.1997 77.1917 25.5275 78.0368 25.8813C78.6268 26.1306 79.099 26.3484 79.4532 26.5352C79.807 26.7223 80.0563 26.8893 80.2007 27.0369C80.3448 27.1845 80.4167 27.3761 80.4167 27.6122C80.4167 28.2414 79.8726 28.556 78.7841 28.556C78.2532 28.556 77.6386 28.4675 76.9407 28.2907C76.242 28.1136 75.6146 27.8942 75.0573 27.6317V30.1098C75.5666 30.3249 76.0974 30.4847 76.6407 30.5866C77.2045 30.6949 77.8862 30.7491 78.6862 30.7491C80.2459 30.7491 81.4178 30.4539 82.2011 29.8636V29.864ZM95.2581 30.5522H92.2588V24.131C92.2588 23.3379 92.1258 22.7428 91.8608 22.3463C91.5949 21.9497 91.1772 21.7511 90.6067 21.7511C89.84 21.7511 89.2827 22.0331 88.9351 22.597C88.5876 23.1608 88.414 24.0883 88.414 25.3799V30.5522H85.4146V19.5584H87.706L88.1091 20.9647H88.2765C88.5712 20.4598 88.9976 20.0647 89.5546 19.7796C90.1119 19.4945 90.7511 19.3518 91.4723 19.3518C93.1178 19.3518 94.232 19.8897 94.8157 20.9647H95.081C95.3761 20.4532 95.8105 20.0567 96.3841 19.7747C96.9577 19.4928 97.6049 19.3518 98.3261 19.3518C99.5716 19.3518 100.514 19.6716 101.153 20.3105C101.792 20.9497 102.112 21.974 102.112 23.3834V30.5522H99.1029V24.131C99.1029 23.3379 98.9699 22.7428 98.7049 22.3463C98.439 21.9497 98.0213 21.7511 97.4508 21.7511C96.7168 21.7511 96.1678 22.0136 95.8036 22.5379C95.44 23.0626 95.2581 23.8949 95.2581 25.0355V30.5522Z" fill="#2F2F2F" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M111.144 29.0572L111.725 30.552H113.819V23.2259C113.819 21.9148 113.426 20.9381 112.639 20.2957C111.852 19.6533 110.722 19.3318 109.247 19.3318C107.706 19.3318 106.303 19.6631 105.038 20.3252L106.031 22.3509C107.217 21.8197 108.25 21.5544 109.129 21.5544C110.269 21.5544 110.84 22.1117 110.84 23.2259V23.7079L108.932 23.7669C107.287 23.8259 106.056 24.1325 105.239 24.6863C104.423 25.2405 104.015 26.1009 104.015 27.2676C104.015 28.3822 104.318 29.2409 104.925 29.844C105.531 30.4471 106.362 30.7485 107.418 30.7485C108.276 30.7485 108.973 30.6256 109.507 30.3798C110.041 30.1339 110.561 29.6933 111.066 29.0572H111.144ZM109.679 25.4975L110.84 25.4582V26.3627C110.84 27.0252 110.631 27.5561 110.215 27.9558C109.799 28.3558 109.243 28.5558 108.548 28.5558C107.578 28.5558 107.093 28.1329 107.093 27.2874C107.093 26.6971 107.306 26.2582 107.732 25.9697C108.158 25.6815 108.807 25.5238 109.679 25.4975ZM33.8912 36.0308L13.9332 41.9336C13.3234 42.1142 12.7391 41.5867 12.8672 40.9718L19.9971 6.82588C20.1304 6.18769 21.013 6.0863 21.2915 6.67762L34.4929 34.711C34.7419 35.2398 34.4579 35.8634 33.8912 36.0308ZM37.3138 34.6384L22.0283 2.17934V2.17865C21.8384 1.77895 21.5438 1.43809 21.1759 1.19222C20.808 0.946358 20.3803 0.804647 19.9384 0.782117C19.0082 0.72795 18.1748 1.17656 17.7047 1.94011L1.12687 28.7909C0.875024 29.1965 0.744005 29.6655 0.749171 30.1429C0.754336 30.6203 0.895473 31.0863 1.15604 31.4864L9.25953 44.0392C9.74252 44.7885 10.5793 45.2222 11.4491 45.2222C11.6956 45.2222 11.9436 45.1874 12.1873 45.1152L35.7096 38.1582C36.0637 38.0545 36.3914 37.876 36.6705 37.6347C36.9497 37.3934 37.1738 37.095 37.3277 36.7596C37.4796 36.4262 37.557 36.0637 37.5546 35.6973C37.5522 35.331 37.47 34.9695 37.3138 34.6381V34.6384Z" fill="#2F2F2F" fill-opacity="0.5"/>
+</svg>
--- a/web/static/img/lp/react-logo-gray.svg
+++ b/web/static/img/lp/react-logo-gray.svg
@ -0,0 +1,4 @@
+<svg width="57" height="50" viewBox="0 0 57 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56.3048 25.0057C56.3048 21.2863 51.6469 17.7615 44.5057 15.5756C46.1537 8.29709 45.4213 2.50629 42.194 0.652323C41.4501 0.217441 40.5803 0.0114443 39.6305 0.0114443V2.56352C40.1569 2.56352 40.5803 2.66651 40.9351 2.86107C42.4915 3.75372 43.1667 7.15267 42.6403 11.5244C42.5144 12.6001 42.3084 13.7331 42.0566 14.889C39.8136 14.3397 37.3645 13.9162 34.7895 13.6416C33.2446 11.5244 31.6424 9.60174 30.0287 7.91943C33.7595 4.45182 37.2615 2.55207 39.6419 2.55207V0C36.4947 0 32.3748 2.24308 28.2091 6.13413C24.0434 2.26596 19.9234 0.0457771 16.7763 0.0457771V2.59785C19.1452 2.59785 22.6586 4.48615 26.3894 7.93088C24.7872 9.61318 23.185 11.5244 21.663 13.6416C19.0766 13.9162 16.6275 14.3397 14.3844 14.9004C14.1212 13.756 13.9266 12.6459 13.7893 11.5816C13.2514 7.20989 13.9152 3.81094 15.4602 2.90684C15.8035 2.70085 16.2498 2.60929 16.7763 2.60929V0.0572213C15.8149 0.0572213 14.9452 0.263218 14.1899 0.6981C10.974 2.55207 10.253 8.33143 11.9124 15.5871C4.79411 17.7844 0.15918 21.2978 0.15918 25.0057C0.15918 28.7251 4.817 32.2499 11.9582 34.4358C10.3102 41.7144 11.0427 47.5051 14.27 49.3591C15.0138 49.794 15.8836 50 16.8449 50C19.9921 50 24.112 47.7569 28.2777 43.8659C32.4435 47.734 36.5634 49.9542 39.7106 49.9542C40.6719 49.9542 41.5416 49.7482 42.297 49.3133C45.5128 47.4594 46.2338 41.68 44.5744 34.4244C51.6698 32.2385 56.3048 28.7137 56.3048 25.0057ZM41.4043 17.3724C40.9809 18.8487 40.4544 20.3708 39.8593 21.8929C39.3901 20.9773 38.898 20.0618 38.3601 19.1463C37.8337 18.2307 37.2729 17.3381 36.7122 16.4683C38.3373 16.7086 39.9051 17.0062 41.4043 17.3724ZM36.1628 29.5605C35.2702 31.1055 34.3547 32.5704 33.4048 33.9323C31.6996 34.081 29.9715 34.1611 28.232 34.1611C26.5039 34.1611 24.7758 34.081 23.082 33.9437C22.1322 32.5818 21.2052 31.1284 20.3125 29.5949C19.4428 28.0957 18.6531 26.5736 17.9321 25.0401C18.6417 23.5065 19.4428 21.973 20.3011 20.4738C21.1937 18.9288 22.1093 17.464 23.0592 16.1021C24.7644 15.9533 26.4924 15.8732 28.232 15.8732C29.9601 15.8732 31.6881 15.9533 33.3819 16.0906C34.3318 17.4525 35.2587 18.9059 36.1514 20.4395C37.0212 21.9387 37.8108 23.4607 38.5318 24.9943C37.8108 26.5278 37.0212 28.0613 36.1628 29.5605ZM39.8593 28.0728C40.4773 29.6063 41.0038 31.1399 41.4387 32.6276C39.9395 32.9938 38.3601 33.3028 36.7236 33.5431C37.2844 32.6619 37.8452 31.7578 38.3716 30.8309C38.898 29.9153 39.3901 28.9883 39.8593 28.0728ZM28.2549 40.2838C27.1905 39.1852 26.1262 37.9606 25.0734 36.6217C26.1033 36.6674 27.1562 36.7018 28.2205 36.7018C29.2963 36.7018 30.3606 36.6789 31.402 36.6217C30.372 37.9606 29.3077 39.1852 28.2549 40.2838ZM19.7403 33.5431C18.1152 33.3028 16.5474 33.0053 15.0482 32.639C15.4716 31.1627 15.998 29.6407 16.5931 28.1186C17.0624 29.0341 17.5545 29.9496 18.0923 30.8652C18.6302 31.7807 19.1796 32.6734 19.7403 33.5431ZM28.1976 9.72763C29.262 10.8263 30.3263 12.0508 31.3791 13.3898C30.3492 13.344 29.2963 13.3097 28.232 13.3097C27.1562 13.3097 26.0919 13.3326 25.0505 13.3898C26.0804 12.0508 27.1448 10.8263 28.1976 9.72763ZM19.7289 16.4683C19.1681 17.3495 18.6073 18.2536 18.0809 19.1806C17.5545 20.0961 17.0624 21.0117 16.5931 21.9272C15.9752 20.3937 15.4487 18.8602 15.0138 17.3724C16.513 17.0176 18.0923 16.7086 19.7289 16.4683ZM9.37181 30.7965C5.32054 29.0684 2.69981 26.8025 2.69981 25.0057C2.69981 23.209 5.32054 20.9316 9.37181 19.2149C10.356 18.7915 11.4318 18.4138 12.5419 18.0591C13.1942 20.3021 14.0525 22.6368 15.1168 25.0286C14.064 27.409 13.2171 29.7322 12.5762 31.9638C11.4432 31.6091 10.3675 31.22 9.37181 30.7965ZM15.5288 47.1504C13.9724 46.2577 13.2972 42.8588 13.8236 38.4871C13.9495 37.4113 14.1555 36.2783 14.4073 35.1225C16.6504 35.6718 19.0994 36.0952 21.6744 36.3699C23.2194 38.4871 24.8216 40.4097 26.4352 42.092C22.7044 45.5596 19.2024 47.4594 16.822 47.4594C16.307 47.4479 15.8722 47.3449 15.5288 47.1504ZM42.6746 38.4298C43.2125 42.8016 42.5487 46.2005 41.0038 47.1046C40.6604 47.3106 40.2141 47.4022 39.6877 47.4022C37.3187 47.4022 33.8053 45.5139 30.0745 42.0691C31.6767 40.3868 33.2789 38.4756 34.801 36.3584C37.3874 36.0838 39.8365 35.6603 42.0795 35.0996C42.3428 36.2554 42.5487 37.3655 42.6746 38.4298ZM47.0807 30.7965C46.0965 31.22 45.0207 31.5976 43.9106 31.9524C43.2583 29.7093 42.4 27.3747 41.3357 24.9828C42.3885 22.6024 43.2354 20.2792 43.8763 18.0476C45.0093 18.4024 46.085 18.7915 47.0921 19.2149C51.1434 20.943 53.7641 23.209 53.7641 25.0057C53.7527 26.8025 51.1319 29.0799 47.0807 30.7965Z" fill="#2F2F2F" fill-opacity="0.5"/>
+<path d="M28.2203 30.2361C31.1087 30.2361 33.4503 27.8945 33.4503 25.006C33.4503 22.1176 31.1087 19.776 28.2203 19.776C25.3318 19.776 22.9902 22.1176 22.9902 25.006C22.9902 27.8945 25.3318 30.2361 28.2203 30.2361Z" fill="#2F2F2F" fill-opacity="0.5"/>
+</svg>
--- a/web/static/img/lp/showcase/amicus-landing.png
+++ b/web/static/img/lp/showcase/amicus-landing.png
--- a/web/static/img/lp/showcase/farnance-dashboard.png
+++ b/web/static/img/lp/showcase/farnance-dashboard.png
--- a/web/static/img/lp/showcase/grabbit-hero.png
+++ b/web/static/img/lp/showcase/grabbit-hero.png
--- a/web/static/img/lp/wasp-compilation-diagram.png
+++ b/web/static/img/lp/wasp-compilation-diagram.png
--- a/web/static/img/lp/wasp-logo.png
+++ b/web/static/img/lp/wasp-logo.png
--- a/web/static/img/lp/yc-logo.png
+++ b/web/static/img/lp/yc-logo.png
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  important: true,
+  corePlugins: {
+    preflight: false,
+  },
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter']
+      }
+    },
+  },
+  plugins: [],
+};