add template

2024-08-26 14:14:34 +02:00 · 2024-08-26 14:14:34 +02:00 · ad132b5bdf
commit ad132b5bdf
parent 4e4541f3e5
56 changed files with 6854 additions and 1 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -0,0 +1,100 @@
+# Changelog
+
+## 2024-06-21
+
+- Bump Headless UI dependency to v2.1
+
+## 2024-06-18
+
+- Update `prettier` and `prettier-plugin-tailwindcss` dependencies
+
+## 2024-05-31
+
+- Fix `npm audit` warnings
+
+## 2024-05-07
+
+- Bump Headless UI dependency to v2.0
+
+## 2024-01-17
+
+- Fix `sharp` dependency issues ([#1549](https://github.com/tailwindlabs/tailwindui-issues/issues/1549))
+
+## 2024-01-10
+
+- Update Tailwind CSS, Next.js, Prettier, TypeScript, ESLint, and other dependencies
+
+## 2023-09-07
+
+- Added TypeScript version of template
+
+## 2023-08-15
+
+- Bump Next.js dependency
+
+## 2023-07-31
+
+- Port template to Next.js app router
+
+## 2023-07-18
+
+- Add 404 page
+- Sort imports
+
+## 2023-05-16
+
+- Bump Next.js dependency
+
+## 2023-04-11
+
+- Bump Next.js dependency
+
+## 2023-03-29
+
+- Bump Tailwind CSS and Prettier dependencies
+- Sort classes
+
+## 2023-03-22
+
+- Bump Headless UI dependency
+
+## 2023-02-02
+
+- Bump Headless UI dependency
+
+## 2022-11-04
+
+- Bump Tailwind CSS and Next.js dependencies
+- Add missing `@next/mdx` dependency
+
+## 2022-09-27
+
+- Update Headless UI, Next.js, and Autoprefixer dependencies
+
+## 2022-09-09
+
+- Update Next.js dependency
+
+## 2022-09-07
+
+- Update Headless UI dependency
+
+## 2022-09-01
+
+- Update Tailwind CSS, Next.js, Headless UI, ESLint, and other dependencies
+
+## 2022-08-16
+
+- Enable experimental Next.js `scrollRestoration` flag
+
+## 2022-07-25
+
+- Update Next.js and React dependencies
+
+## 2022-07-06
+
+- Replace `next/image` with `next/future/image`
+
+## 2022-06-23
+
+- Initial release
--- a/LICENSE.md
+++ b/LICENSE.md
@ -0,0 +1,129 @@
+# Tailwind UI License
+
+## Personal License
+
+Tailwind Labs Inc. grants you an on-going, non-exclusive license to use the Components and Templates.
+
+The license grants permission to **one individual** (the Licensee) to access and use the Components and Templates.
+
+You **can**:
+
+- Use the Components and Templates to create unlimited End Products.
+- Modify the Components and Templates to create derivative components and templates. Those components and templates are subject to this license.
+- Use the Components and Templates to create unlimited End Products for unlimited Clients.
+- Use the Components and Templates to create End Products where the End Product is sold to End Users.
+- Use the Components and Templates to create End Products that are open source and freely available to End Users.
+
+You **cannot**:
+
+- Use the Components and Templates to create End Products that are designed to allow an End User to build their own End Products using the Components and Templates or derivatives of the Components and Templates.
+- Re-distribute the Components and Templates or derivatives of the Components and Templates separately from an End Product, neither in code or as design assets.
+- Share your access to the Components and Templates with any other individuals.
+- Use the Components and Templates to produce anything that may be deemed by Tailwind Labs Inc, in their sole and absolute discretion, to be competitive or in conflict with the business of Tailwind Labs Inc.
+
+### Example usage
+
+Examples of usage **allowed** by the license:
+
+- Creating a personal website by yourself.
+- Creating a website or web application for a client that will be owned by that client.
+- Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
+- Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
+- Creating a web application where the primary purpose is clearly not to simply re-distribute the components (like a conference organization app that uses the components for its UI for example) that is free and open source, where the source code is publicly available.
+
+Examples of usage **not allowed** by the license:
+
+- Creating a repository of your favorite Tailwind UI components or templates (or derivatives based on Tailwind UI components or templates) and publishing it publicly.
+- Creating a React or Vue version of Tailwind UI and making it available either for sale or for free.
+- Create a Figma or Sketch UI kit based on the Tailwind UI component designs.
+- Creating a "website builder" project where end users can build their own websites using components or templates included with or derived from Tailwind UI.
+- Creating a theme, template, or project starter kit using the components or templates and making it available either for sale or for free.
+- Creating an admin panel tool (like [Laravel Nova](https://nova.laravel.com/) or [ActiveAdmin](https://activeadmin.info/)) that is made available either for sale or for free.
+
+In simple terms, use Tailwind UI for anything you like as long as it doesn't compete with Tailwind UI.
+
+### Personal License Definitions
+
+Licensee is the individual who has purchased a Personal License.
+
+Components and Templates are the source code and design assets made available to the Licensee after purchasing a Tailwind UI license.
+
+End Product is any artifact produced that incorporates the Components or Templates or derivatives of the Components or Templates.
+
+End User is a user of an End Product.
+
+Client is an individual or entity receiving custom professional services directly from the Licensee, produced specifically for that individual or entity. Customers of software-as-a-service products are not considered clients for the purpose of this document.
+
+## Team License
+
+Tailwind Labs Inc. grants you an on-going, non-exclusive license to use the Components and Templates.
+
+The license grants permission for **up to 25 Employees and Contractors of the Licensee** to access and use the Components and Templates.
+
+You **can**:
+
+- Use the Components and Templates to create unlimited End Products.
+- Modify the Components and Templates to create derivative components and templates. Those components and templates are subject to this license.
+- Use the Components and Templates to create unlimited End Products for unlimited Clients.
+- Use the Components and Templates to create End Products where the End Product is sold to End Users.
+- Use the Components and Templates to create End Products that are open source and freely available to End Users.
+
+You **cannot**:
+
+- Use the Components or Templates to create End Products that are designed to allow an End User to build their own End Products using the Components or Templates or derivatives of the Components or Templates.
+- Re-distribute the Components or Templates or derivatives of the Components or Templates separately from an End Product.
+- Use the Components or Templates to create End Products that are the property of any individual or entity other than the Licensee or Clients of the Licensee.
+- Use the Components or Templates to produce anything that may be deemed by Tailwind Labs Inc, in their sole and absolute discretion, to be competitive or in conflict with the business of Tailwind Labs Inc.
+
+### Example usage
+
+Examples of usage **allowed** by the license:
+
+- Creating a website for your company.
+- Creating a website or web application for a client that will be owned by that client.
+- Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
+- Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
+- Creating a web application where the primary purpose is clearly not to simply re-distribute the components or templates (like a conference organization app that uses the components or a template for its UI for example) that is free and open source, where the source code is publicly available.
+
+Examples of use **not allowed** by the license:
+
+- Creating a repository of your favorite Tailwind UI components or template (or derivatives based on Tailwind UI components or templates) and publishing it publicly.
+- Creating a React or Vue version of Tailwind UI and making it available either for sale or for free.
+- Creating a "website builder" project where end users can build their own websites using components or templates included with or derived from Tailwind UI.
+- Creating a theme or template using the components or templates and making it available either for sale or for free.
+- Creating an admin panel tool (like [Laravel Nova](https://nova.laravel.com/) or [ActiveAdmin](https://activeadmin.info/)) that is made available either for sale or for free.
+- Creating any End Product that is not the sole property of either your company or a client of your company. For example your employees/contractors can't use your company Tailwind UI license to build their own websites or side projects.
+
+### Team License Definitions
+
+Licensee is the business entity who has purchased a Team License.
+
+Components and Templates are the source code and design assets made available to the Licensee after purchasing a Tailwind UI license.
+
+End Product is any artifact produced that incorporates the Components or Templates or derivatives of the Components or Templates.
+
+End User is a user of an End Product.
+
+Employee is a full-time or part-time employee of the Licensee.
+
+Contractor is an individual or business entity contracted to perform services for the Licensee.
+
+Client is an individual or entity receiving custom professional services directly from the Licensee, produced specifically for that individual or entity. Customers of software-as-a-service products are not considered clients for the purpose of this document.
+
+## Enforcement
+
+If you are found to be in violation of the license, access to your Tailwind UI account will be terminated, and a refund may be issued at our discretion. When license violation is blatant and malicious (such as intentionally redistributing the Components or Templates through private warez channels), no refund will be issued.
+
+The copyright of the Components and Templates is owned by Tailwind Labs Inc. You are granted only the permissions described in this license; all other rights are reserved. Tailwind Labs Inc. reserves the right to pursue legal remedies for any unauthorized use of the Components or Templates outside the scope of this license.
+
+## Liability
+
+Tailwind Labs Inc.’s liability to you for costs, damages, or other losses arising from your use of the Components or Templates — including third-party claims against you — is limited to a refund of your license fee. Tailwind Labs Inc. may not be held liable for any consequential damages related to your use of the Components or Templates.
+
+This Agreement is governed by the laws of the Province of Ontario and the applicable laws of Canada. Legal proceedings related to this Agreement may only be brought in the courts of Ontario. You agree to service of process at the e-mail address on your original order.
+
+## Questions?
+
+Unsure which license you need, or unsure if your use case is covered by our licenses?
+
+Email us at [support@tailwindui.com](mailto:support@tailwindui.com) with your questions.
--- a/README.md
+++ b/README.md
@ -1 +1,35 @@
-Ourverse 
+Ourverse 
+
+Keynote is a [Tailwind UI](https://tailwindui.com) site template built using [Tailwind CSS](https://tailwindcss.com) and [Next.js](https://nextjs.org).
+
+## Getting started
+
+To get started with this template, first install the npm dependencies:
+
+```bash
+npm install
+```
+
+Next, run the development server:
+
+```bash
+npm run dev
+```
+
+Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
+
+## Customizing
+
+You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
+
+## License
+
+This site template is a commercial product and is licensed under the [Tailwind UI license](https://tailwindui.com/license).
+
+## Learn more
+
+To learn more about the technologies used in this site template, see the following resources:
+
+- [Tailwind CSS](https://tailwindcss.com/docs) - the official Tailwind CSS documentation
+- [Next.js](https://nextjs.org/docs) - the official Next.js documentation
+- [Headless UI](https://headlessui.dev) - the official Headless UI documentation
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
--- a/next.config.js
+++ b/next.config.js
@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,29 @@
+{
+  "name": "tailwindui-keynote",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "browserslist": "defaults, not ie <= 11",
+  "dependencies": {
+    "@headlessui/react": "^2.1.0",
+    "@headlessui/tailwindcss": "^0.2.0",
+    "autoprefixer": "^10.4.12",
+    "clsx": "^2.1.0",
+    "next": "^14.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.4.1"
+  },
+  "devDependencies": {
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.0.4",
+    "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "sharp": "0.33.1"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/prettier.config.js
+++ b/prettier.config.js
@ -0,0 +1,6 @@
+/** @type {import('prettier').Options} */
+module.exports = {
+  singleQuote: true,
+  semi: false,
+  plugins: ['prettier-plugin-tailwindcss'],
+}
--- a/src/app/(main)/layout.jsx
+++ b/src/app/(main)/layout.jsx
@ -0,0 +1,5 @@
+import { Layout } from '@/components/Layout'
+
+export default function MainLayout({ children }) {
+  return <Layout>{children}</Layout>
+}
--- a/src/app/(main)/page.jsx
+++ b/src/app/(main)/page.jsx
@ -0,0 +1,17 @@
+import { Hero } from '@/components/Hero'
+import { Newsletter } from '@/components/Newsletter'
+import { Schedule } from '@/components/Schedule'
+import { Speakers } from '@/components/Speakers'
+import { Sponsors } from '@/components/Sponsors'
+
+export default function Home() {
+  return (
+    <>
+      <Hero />
+      <Speakers />
+      <Schedule />
+      <Sponsors />
+      <Newsletter />
+    </>
+  )
+}
--- a/src/app/favicon.ico
+++ b/src/app/favicon.ico
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@ -0,0 +1,43 @@
+import { DM_Sans, Inter } from 'next/font/google'
+import clsx from 'clsx'
+
+import '@/styles/tailwind.css'
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+})
+
+const dmSans = DM_Sans({
+  subsets: ['latin'],
+  weight: ['400', '500', '700'],
+  display: 'swap',
+  variable: '--font-dm-sans',
+})
+
+export const metadata = {
+  title: {
+    template: '%s - DeceptiConf',
+    default: 'DeceptiConf - A community-driven design conference',
+  },
+  description:
+    'At DeceptiConf you’ll learn about the latest dark patterns being developed to trick even the smartest visitors, and you’ll learn how to deploy them without ever being detected.',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html
+      lang="en"
+      className={clsx(
+        'h-full bg-white antialiased',
+        inter.variable,
+        dmSans.variable,
+      )}
+    >
+      <body className="flex min-h-full">
+        <div className="flex w-full flex-col">{children}</div>
+      </body>
+    </html>
+  )
+}
--- a/src/app/not-found.jsx
+++ b/src/app/not-found.jsx
@ -0,0 +1,28 @@
+import { BackgroundImage } from '@/components/BackgroundImage'
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import { Layout } from '@/components/Layout'
+
+export default function NotFound() {
+  return (
+    <Layout showFooter={false}>
+      <div className="relative flex h-full items-center py-20 sm:py-36">
+        <BackgroundImage className="-top-36 bottom-0" />
+        <Container className="relative flex w-full flex-col items-center">
+          <p className="font-display text-2xl tracking-tight text-blue-900">
+            404
+          </p>
+          <h1 className="mt-4 font-display text-4xl font-medium tracking-tighter text-blue-600 sm:text-5xl">
+            Page not found
+          </h1>
+          <p className="mt-4 text-lg tracking-tight text-blue-900">
+            Sorry, we couldn’t find the page you’re looking for.
+          </p>
+          <Button href="/" className="mt-8">
+            Go back home
+          </Button>
+        </Container>
+      </div>
+    </Layout>
+  )
+}
--- a/src/components/BackgroundImage.jsx
+++ b/src/components/BackgroundImage.jsx
@ -0,0 +1,33 @@
+import Image from 'next/image'
+import clsx from 'clsx'
+
+import backgroundImage from '@/images/background.jpg'
+
+export function BackgroundImage({ className, position = 'left' }) {
+  return (
+    <div
+      className={clsx(
+        'absolute inset-0 overflow-hidden bg-indigo-50',
+        className,
+      )}
+    >
+      <Image
+        className={clsx(
+          'absolute top-0',
+          position === 'left' &&
+            'left-0 translate-x-[-55%] translate-y-[-10%] -scale-x-100 sm:left-1/2 sm:translate-x-[-98%] sm:translate-y-[-6%] lg:translate-x-[-106%] xl:translate-x-[-122%]',
+          position === 'right' &&
+            'left-full -translate-x-1/2 sm:left-1/2 sm:translate-x-[-20%] sm:translate-y-[-15%] md:translate-x-0 lg:translate-x-[5%] lg:translate-y-[4%] xl:translate-x-[27%] xl:translate-y-[-8%]',
+        )}
+        src={backgroundImage}
+        alt=""
+        width={918}
+        height={1495}
+        priority
+        unoptimized
+      />
+      <div className="absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-white" />
+      <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-white" />
+    </div>
+  )
+}
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@ -0,0 +1,15 @@
+import Link from 'next/link'
+import clsx from 'clsx'
+
+export function Button({ className, ...props }) {
+  className = clsx(
+    'inline-flex justify-center rounded-2xl bg-blue-600 p-4 text-base font-semibold text-white hover:bg-blue-500 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:text-white/70',
+    className,
+  )
+
+  return typeof props.href === 'undefined' ? (
+    <button className={className} {...props} />
+  ) : (
+    <Link className={className} {...props} />
+  )
+}
--- a/src/components/Container.jsx
+++ b/src/components/Container.jsx
@ -0,0 +1,10 @@
+import clsx from 'clsx'
+
+export function Container({ className, ...props }) {
+  return (
+    <div
+      className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
+      {...props}
+    />
+  )
+}
--- a/src/components/DiamondIcon.jsx
+++ b/src/components/DiamondIcon.jsx
@ -0,0 +1,7 @@
+export function DiamondIcon(props) {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 6 6" {...props}>
+      <path d="M3 0L6 3L3 6L0 3Z" strokeWidth={2} strokeLinejoin="round" />
+    </svg>
+  )
+}
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@ -0,0 +1,16 @@
+import { Container } from '@/components/Container'
+import { Logo } from '@/components/Logo'
+
+export function Footer() {
+  return (
+    <footer className="flex-none py-16">
+      <Container className="flex flex-col items-center justify-between md:flex-row">
+        <Logo className="h-12 w-auto text-slate-900" />
+        <p className="mt-6 text-base text-slate-500 md:mt-0">
+          Copyright &copy; {new Date().getFullYear()} DeceptiConf, LLC. All
+          rights reserved.
+        </p>
+      </Container>
+    </footer>
+  )
+}
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@ -0,0 +1,29 @@
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import { DiamondIcon } from '@/components/DiamondIcon'
+import { Logo } from '@/components/Logo'
+
+export function Header() {
+  return (
+    <header className="relative z-50 flex-none lg:pt-11">
+      <Container className="flex flex-wrap items-center justify-center sm:justify-between lg:flex-nowrap">
+        <div className="mt-10 lg:mt-0 lg:grow lg:basis-0">
+          <Logo className="h-12 w-auto text-slate-900" />
+        </div>
+        <div className="order-first -mx-4 flex flex-auto basis-full overflow-x-auto whitespace-nowrap border-b border-blue-600/10 py-4 font-mono text-sm text-blue-600 sm:-mx-6 lg:order-none lg:mx-0 lg:basis-auto lg:border-0 lg:py-0">
+          <div className="mx-auto flex items-center gap-4 px-4">
+            <p>
+              <time dateTime="2022-04-04">04</time>-
+              <time dateTime="2022-04-06">06 of April, 2022</time>
+            </p>
+            <DiamondIcon className="h-1.5 w-1.5 overflow-visible fill-current stroke-current" />
+            <p>Los Angeles, CA</p>
+          </div>
+        </div>
+        <div className="hidden sm:mt-10 sm:flex lg:mt-0 lg:grow lg:basis-0 lg:justify-end">
+          <Button href="#">Get your tickets</Button>
+        </div>
+      </Container>
+    </header>
+  )
+}
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@ -0,0 +1,50 @@
+import { BackgroundImage } from '@/components/BackgroundImage'
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+
+export function Hero() {
+  return (
+    <div className="relative py-20 sm:pb-24 sm:pt-36">
+      <BackgroundImage className="-bottom-14 -top-36" />
+      <Container className="relative">
+        <div className="mx-auto max-w-2xl lg:max-w-4xl lg:px-12">
+          <h1 className="font-display text-5xl font-bold tracking-tighter text-blue-600 sm:text-7xl">
+            <span className="sr-only">DeceptiConf - </span>A design conference
+            for the dark side.
+          </h1>
+          <div className="mt-6 space-y-6 font-display text-2xl tracking-tight text-blue-900">
+            <p>
+              The next generation of web users are tech-savvy and suspicious.
+              They know how to use dev tools, they can detect a phishing scam
+              from a mile away, and they certainly aren’t accepting any checks
+              from Western Union.
+            </p>
+            <p>
+              At DeceptiConf you’ll learn about the latest dark patterns being
+              developed to trick even the smartest visitors, and you’ll learn
+              how to deploy them without ever being detected.
+            </p>
+          </div>
+          <Button href="#" className="mt-10 w-full sm:hidden">
+            Get your tickets
+          </Button>
+          <dl className="mt-10 grid grid-cols-2 gap-x-10 gap-y-6 sm:mt-16 sm:gap-x-16 sm:gap-y-10 sm:text-center lg:auto-cols-auto lg:grid-flow-col lg:grid-cols-none lg:justify-start lg:text-left">
+            {[
+              ['Speakers', '18'],
+              ['People Attending', '2,091'],
+              ['Venue', 'Staples Center'],
+              ['Location', 'Los Angeles'],
+            ].map(([name, value]) => (
+              <div key={name}>
+                <dt className="font-mono text-sm text-blue-600">{name}</dt>
+                <dd className="mt-0.5 text-2xl font-semibold tracking-tight text-blue-900">
+                  {value}
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </Container>
+    </div>
+  )
+}
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@ -0,0 +1,12 @@
+import { Footer } from '@/components/Footer'
+import { Header } from '@/components/Header'
+
+export function Layout({ children, showFooter = true }) {
+  return (
+    <>
+      <Header />
+      <main className="flex-auto">{children}</main>
+      {showFooter && <Footer />}
+    </>
+  )
+}
--- a/src/components/Logo.jsx
+++ b/src/components/Logo.jsx
@ -0,0 +1,22 @@
+export function Logo(props) {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 183 48" {...props}>
+      <path
+        fill="#3B82F6"
+        fillRule="evenodd"
+        d="M1.172 21.172a4 4 0 000 5.656l20 20a4 4 0 105.656-5.656l-20-20a4 4 0 00-5.656 0z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#93C5FD"
+        fillRule="evenodd"
+        d="M26.828 6.828a4 4 0 10-5.656-5.656l-19 19A3.987 3.987 0 015 19a3.98 3.98 0 012.827 1.172L10.657 23 26.828 6.828z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#0F172A"
+        d="M52 32V15.2h5.736c1.968 0 3.584.352 4.848 1.056 1.28.688 2.224 1.664 2.832 2.928.624 1.248.936 2.72.936 4.416 0 1.696-.312 3.176-.936 4.44-.608 1.248-1.552 2.224-2.832 2.928-1.264.688-2.88 1.032-4.848 1.032H52zm3.072-2.64h2.52c1.408 0 2.52-.224 3.336-.672a3.958 3.958 0 001.752-1.968c.352-.864.528-1.904.528-3.12 0-1.2-.176-2.232-.528-3.096a3.944 3.944 0 00-1.752-1.992c-.816-.464-1.928-.696-3.336-.696h-2.52V29.36zm18.263 2.928c-1.2 0-2.264-.256-3.192-.768a5.559 5.559 0 01-2.184-2.16c-.529-.928-.793-2-.793-3.216 0-1.232.257-2.328.769-3.288a5.687 5.687 0 012.16-2.232c.927-.544 2.016-.816 3.264-.816 1.168 0 2.2.256 3.096.768a5.407 5.407 0 012.088 2.112c.511.88.767 1.864.767 2.952 0 .176-.008.36-.023.552 0 .192-.009.392-.025.6h-9.047c.063.928.383 1.656.96 2.184.591.528 1.303.792 2.136.792.623 0 1.143-.136 1.56-.408.431-.288.752-.656.96-1.104h3.12a5.68 5.68 0 01-1.128 2.064 5.423 5.423 0 01-1.92 1.44c-.753.352-1.609.528-2.569.528zm.024-9.984a3.23 3.23 0 00-1.992.648c-.577.416-.945 1.056-1.105 1.92h5.928c-.047-.784-.335-1.408-.864-1.872-.527-.464-1.183-.696-1.967-.696zm12.927 9.984c-1.216 0-2.288-.264-3.216-.792a5.851 5.851 0 01-2.208-2.208c-.528-.944-.792-2.024-.792-3.24 0-1.216.264-2.296.792-3.24A5.851 5.851 0 0183.07 20.6c.928-.528 2-.792 3.216-.792 1.52 0 2.8.4 3.84 1.2 1.04.784 1.704 1.872 1.992 3.264h-3.24a2.299 2.299 0 00-.96-1.344c-.464-.336-1.016-.504-1.656-.504-.848 0-1.568.32-2.16.96-.592.64-.888 1.528-.888 2.664 0 1.136.296 2.024.888 2.664.592.64 1.312.96 2.16.96.64 0 1.192-.16 1.656-.48.48-.32.8-.776.96-1.368h3.24c-.288 1.344-.952 2.424-1.992 3.24-1.04.816-2.32 1.224-3.84 1.224zm12.903 0c-1.2 0-2.264-.256-3.192-.768a5.559 5.559 0 01-2.184-2.16c-.528-.928-.792-2-.792-3.216 0-1.232.256-2.328.768-3.288a5.687 5.687 0 012.16-2.232c.928-.544 2.016-.816 3.264-.816 1.168 0 2.2.256 3.096.768a5.407 5.407 0 012.088 2.112c.512.88.768 1.864.768 2.952 0 .176-.008.36-.024.552 0 .192-.008.392-.024.6h-9.048c.064.928.384 1.656.96 2.184.592.528 1.304.792 2.136.792.624 0 1.144-.136 1.56-.408.432-.288.752-.656.96-1.104h3.12a5.68 5.68 0 01-1.128 2.064 5.423 5.423 0 01-1.92 1.44c-.752.352-1.608.528-2.568.528zm.024-9.984a3.23 3.23 0 00-1.992.648c-.576.416-.944 1.056-1.104 1.92h5.928c-.048-.784-.336-1.408-.864-1.872-.528-.464-1.184-.696-1.968-.696zm7.096 14.976V20.096h2.736l.336 1.704c.384-.528.888-.992 1.512-1.392.64-.4 1.464-.6 2.472-.6 1.12 0 2.12.272 3 .816a5.846 5.846 0 012.088 2.232c.512.944.768 2.016.768 3.216 0 1.2-.256 2.272-.768 3.216a5.894 5.894 0 01-2.088 2.208c-.88.528-1.88.792-3 .792-.896 0-1.68-.168-2.352-.504a4.24 4.24 0 01-1.632-1.416v6.912h-3.072zm6.408-7.68c.976 0 1.784-.328 2.424-.984.64-.656.96-1.504.96-2.544s-.32-1.896-.96-2.568c-.64-.672-1.448-1.008-2.424-1.008-.992 0-1.808.336-2.448 1.008-.624.656-.936 1.504-.936 2.544s.312 1.896.936 2.568c.64.656 1.456.984 2.448.984zM125.36 32c-1.248 0-2.248-.304-3-.912-.752-.608-1.128-1.688-1.128-3.24v-5.184h-2.04v-2.568h2.04l.36-3.192h2.712v3.192h3.216v2.568h-3.216v5.208c0 .576.12.976.36 1.2.256.208.688.312 1.296.312h1.488V32h-2.088zm5.014-13.752c-.56 0-1.024-.168-1.392-.504-.352-.336-.528-.76-.528-1.272s.176-.928.528-1.248c.368-.336.832-.504 1.392-.504.56 0 1.016.168 1.368.504.368.32.552.736.552 1.248s-.184.936-.552 1.272c-.352.336-.808.504-1.368.504zM128.838 32V20.096h3.072V32h-3.072zm12.518.288c-1.696 0-3.152-.36-4.368-1.08a7.383 7.383 0 01-2.808-3.048c-.656-1.312-.984-2.824-.984-4.536 0-1.712.328-3.224.984-4.536.656-1.312 1.592-2.336 2.808-3.072 1.216-.736 2.672-1.104 4.368-1.104 2.016 0 3.664.504 4.944 1.512 1.296.992 2.104 2.392 2.424 4.2h-3.384c-.208-.912-.656-1.624-1.344-2.136-.672-.528-1.568-.792-2.688-.792-1.552 0-2.768.528-3.648 1.584-.88 1.056-1.32 2.504-1.32 4.344 0 1.84.44 3.288 1.32 4.344.88 1.04 2.096 1.56 3.648 1.56 1.12 0 2.016-.24 2.688-.72.688-.496 1.136-1.176 1.344-2.04h3.384c-.32 1.728-1.128 3.08-2.424 4.056-1.28.976-2.928 1.464-4.944 1.464zm14.287 0c-1.152 0-2.192-.264-3.12-.792a5.957 5.957 0 01-2.184-2.184c-.528-.944-.792-2.032-.792-3.264 0-1.232.272-2.312.816-3.24a5.905 5.905 0 012.184-2.208c.928-.528 1.968-.792 3.12-.792 1.136 0 2.16.264 3.072.792a5.68 5.68 0 012.184 2.208c.544.928.816 2.008.816 3.24 0 1.232-.272 2.32-.816 3.264a5.727 5.727 0 01-2.184 2.184c-.928.528-1.96.792-3.096.792zm0-2.664c.8 0 1.496-.296 2.088-.888.592-.608.888-1.504.888-2.688 0-1.184-.296-2.072-.888-2.664-.592-.608-1.28-.912-2.064-.912-.816 0-1.52.304-2.112.912-.576.592-.864 1.48-.864 2.664 0 1.184.288 2.08.864 2.688.592.592 1.288.888 2.088.888zM163.046 32V20.096h2.712l.24 2.016a4.21 4.21 0 011.584-1.68c.704-.416 1.528-.624 2.472-.624 1.472 0 2.616.464 3.432 1.392.816.928 1.224 2.288 1.224 4.08V32h-3.072v-6.432c0-1.024-.208-1.808-.624-2.352-.416-.544-1.064-.816-1.944-.816-.864 0-1.576.304-2.136.912-.544.608-.816 1.456-.816 2.544V32h-3.072zm13.714 0v-9.336h-1.632v-2.568h1.632v-1.392c0-1.44.36-2.464 1.08-3.072.736-.608 1.728-.912 2.976-.912h1.32v2.616h-.84c-.528 0-.904.104-1.128.312-.224.208-.336.56-.336 1.056v1.392h2.568v2.568h-2.568V32h-3.072z"
+      />
+    </svg>
+  )
+}
--- a/src/components/Newsletter.jsx
+++ b/src/components/Newsletter.jsx
@ -0,0 +1,70 @@
+import Image from 'next/image'
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import backgroundImage from '@/images/background-newsletter.jpg'
+
+function ArrowRightIcon(props) {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24" {...props}>
+      <path
+        d="m14 7 5 5-5 5M19 12H5"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function Newsletter() {
+  return (
+    <section id="newsletter" aria-label="Newsletter">
+      <Container>
+        <div className="relative -mx-4 overflow-hidden bg-indigo-50 px-4 py-20 sm:-mx-6 sm:px-6 md:mx-0 md:rounded-5xl md:px-16 xl:px-24 xl:py-36">
+          <Image
+            className="absolute left-1/2 top-0 translate-x-[-10%] translate-y-[-45%] lg:translate-x-[-32%]"
+            src={backgroundImage}
+            alt=""
+            width={919}
+            height={1351}
+            unoptimized
+          />
+          <div className="relative mx-auto grid max-w-2xl grid-cols-1 gap-x-32 gap-y-14 xl:max-w-none xl:grid-cols-2">
+            <div>
+              <p className="font-display text-4xl font-medium tracking-tighter text-blue-900 sm:text-5xl">
+                Stay up to date
+              </p>
+              <p className="mt-4 text-lg tracking-tight text-blue-900">
+                Get updates on all of our events and be the first to get
+                notified when tickets go on sale.
+              </p>
+            </div>
+            <form>
+              <h3 className="text-lg font-semibold tracking-tight text-blue-900">
+                Sign up to our newsletter <span aria-hidden="true">&darr;</span>
+              </h3>
+              <div className="mt-5 flex rounded-3xl bg-white py-2.5 pr-2.5 shadow-xl shadow-blue-900/5 focus-within:ring-2 focus-within:ring-blue-900">
+                <input
+                  type="email"
+                  required
+                  placeholder="Email address"
+                  aria-label="Email address"
+                  className="-my-2.5 flex-auto bg-transparent pl-6 pr-2.5 text-base text-slate-900 placeholder:text-slate-400 focus:outline-none"
+                />
+                <Button type="submit">
+                  <span className="sr-only sm:not-sr-only">Sign up today</span>
+                  <span className="sm:hidden">
+                    <ArrowRightIcon className="h-6 w-6" />
+                  </span>
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/components/Schedule.jsx
+++ b/src/components/Schedule.jsx
@ -0,0 +1,319 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import clsx from 'clsx'
+
+import { BackgroundImage } from '@/components/BackgroundImage'
+import { Container } from '@/components/Container'
+
+const schedule = [
+  {
+    date: 'April 4',
+    dateTime: '2022-04-04',
+    summary:
+      'The first day of the conference is focused on dark patterns for ecommerce.',
+    timeSlots: [
+      {
+        name: 'Steven McHail',
+        description: 'Not so one-time payments',
+        start: '9:00AM',
+        end: '10:00AM',
+      },
+      {
+        name: 'Jaquelin Isch',
+        description: 'The finer print',
+        start: '10:00AM',
+        end: '11:00AM',
+      },
+      {
+        name: 'Dianne Guilianelli',
+        description: 'Post-purchase blackmail',
+        start: '11:00AM',
+        end: '12:00PM',
+      },
+      {
+        name: 'Lunch',
+        description: null,
+        start: '12:00PM',
+        end: '1:00PM',
+      },
+      {
+        name: 'Ronni Cantadore',
+        description: 'Buy or die',
+        start: '1:00PM',
+        end: '2:00PM',
+      },
+      {
+        name: 'Erhart Cockrin',
+        description: 'In-person cancellation',
+        start: '2:00PM',
+        end: '3:00PM',
+      },
+      {
+        name: 'Parker Johnson',
+        description: 'The pay/cancel switcheroo',
+        start: '3:00PM',
+        end: '4:00PM',
+      },
+    ],
+  },
+  {
+    date: 'April 5',
+    dateTime: '2022-04-05',
+    summary:
+      'Next we spend the day talking about deceiving people with technology.',
+    timeSlots: [
+      {
+        name: 'Damaris Kimura',
+        description: 'The invisible card reader',
+        start: '9:00AM',
+        end: '10:00AM',
+      },
+      {
+        name: 'Ibrahim Frasch',
+        description: 'Stealing fingerprints',
+        start: '10:00AM',
+        end: '11:00AM',
+      },
+      {
+        name: 'Cathlene Burrage',
+        description: 'Voting machines',
+        start: '11:00AM',
+        end: '12:00PM',
+      },
+      {
+        name: 'Lunch',
+        description: null,
+        start: '12:00PM',
+        end: '1:00PM',
+      },
+      {
+        name: 'Rinaldo Beynon',
+        description: 'Blackhat SEO that works',
+        start: '1:00PM',
+        end: '2:00PM',
+      },
+      {
+        name: 'Waylon Hyden',
+        description: 'Turning your audience into a botnet',
+        start: '2:00PM',
+        end: '3:00PM',
+      },
+      {
+        name: 'Giordano Sagucio',
+        description: 'Fly phishing',
+        start: '3:00PM',
+        end: '4:00PM',
+      },
+    ],
+  },
+  {
+    date: 'April 6',
+    dateTime: '2022-04-06',
+    summary:
+      'We close out the event previewing new techniques that are still in development.',
+    timeSlots: [
+      {
+        name: 'Andrew Greene',
+        description: 'Neuralink dark patterns',
+        start: '9:00AM',
+        end: '10:00AM',
+      },
+      {
+        name: 'Heather Terry',
+        description: 'DALL-E for passports',
+        start: '10:00AM',
+        end: '11:00AM',
+      },
+      {
+        name: 'Piers Wilkins',
+        description: 'Quantum password cracking',
+        start: '11:00AM',
+        end: '12:00PM',
+      },
+      {
+        name: 'Lunch',
+        description: null,
+        start: '12:00PM',
+        end: '1:00PM',
+      },
+      {
+        name: 'Gordon Sanderson',
+        description: 'SkyNet is coming',
+        start: '1:00PM',
+        end: '2:00PM',
+      },
+      {
+        name: 'Kimberly Parsons',
+        description: 'Dark patterns for the metaverse',
+        start: '2:00PM',
+        end: '3:00PM',
+      },
+      {
+        name: 'Richard Astley',
+        description: 'Knowing the game and playing it',
+        start: '3:00PM',
+        end: '4:00PM',
+      },
+    ],
+  },
+]
+
+function ScheduleTabbed() {
+  let [tabOrientation, setTabOrientation] = useState('horizontal')
+
+  useEffect(() => {
+    let smMediaQuery = window.matchMedia('(min-width: 640px)')
+
+    function onMediaQueryChange({ matches }) {
+      setTabOrientation(matches ? 'vertical' : 'horizontal')
+    }
+
+    onMediaQueryChange(smMediaQuery)
+    smMediaQuery.addEventListener('change', onMediaQueryChange)
+
+    return () => {
+      smMediaQuery.removeEventListener('change', onMediaQueryChange)
+    }
+  }, [])
+
+  return (
+    <TabGroup
+      className="mx-auto grid max-w-2xl grid-cols-1 gap-y-6 sm:grid-cols-2 lg:hidden"
+      vertical={tabOrientation === 'vertical'}
+    >
+      <TabList className="-mx-4 flex gap-x-4 gap-y-10 overflow-x-auto pb-4 pl-4 sm:mx-0 sm:flex-col sm:pb-0 sm:pl-0 sm:pr-8">
+        {({ selectedIndex }) => (
+          <>
+            {schedule.map((day, dayIndex) => (
+              <div
+                key={day.dateTime}
+                className={clsx(
+                  'relative w-3/4 flex-none pr-4 sm:w-auto sm:pr-0',
+                  dayIndex !== selectedIndex && 'opacity-70',
+                )}
+              >
+                <DaySummary
+                  day={{
+                    ...day,
+                    date: (
+                      <Tab className="ui-not-focus-visible:outline-none">
+                        <span className="absolute inset-0" />
+                        {day.date}
+                      </Tab>
+                    ),
+                  }}
+                />
+              </div>
+            ))}
+          </>
+        )}
+      </TabList>
+      <TabPanels>
+        {schedule.map((day) => (
+          <TabPanel
+            key={day.dateTime}
+            className="ui-not-focus-visible:outline-none"
+          >
+            <TimeSlots day={day} />
+          </TabPanel>
+        ))}
+      </TabPanels>
+    </TabGroup>
+  )
+}
+
+function DaySummary({ day }) {
+  return (
+    <>
+      <h3 className="text-2xl font-semibold tracking-tight text-blue-900">
+        <time dateTime={day.dateTime}>{day.date}</time>
+      </h3>
+      <p className="mt-1.5 text-base tracking-tight text-blue-900">
+        {day.summary}
+      </p>
+    </>
+  )
+}
+
+function TimeSlots({ day, className }) {
+  return (
+    <ol
+      role="list"
+      className={clsx(
+        className,
+        'space-y-8 bg-white/60 px-10 py-14 text-center shadow-xl shadow-blue-900/5 backdrop-blur',
+      )}
+    >
+      {day.timeSlots.map((timeSlot, timeSlotIndex) => (
+        <li
+          key={timeSlot.start}
+          aria-label={`${timeSlot.name} talking about ${timeSlot.description} at ${timeSlot.start} - ${timeSlot.end} PST`}
+        >
+          {timeSlotIndex > 0 && (
+            <div className="mx-auto mb-8 h-px w-48 bg-indigo-500/10" />
+          )}
+          <h4 className="text-lg font-semibold tracking-tight text-blue-900">
+            {timeSlot.name}
+          </h4>
+          {timeSlot.description && (
+            <p className="mt-1 tracking-tight text-blue-900">
+              {timeSlot.description}
+            </p>
+          )}
+          <p className="mt-1 font-mono text-sm text-slate-500">
+            <time dateTime={`${day.dateTime}T${timeSlot.start}-08:00`}>
+              {timeSlot.start}
+            </time>{' '}
+            -{' '}
+            <time dateTime={`${day.dateTime}T${timeSlot.end}-08:00`}>
+              {timeSlot.end}
+            </time>{' '}
+            PST
+          </p>
+        </li>
+      ))}
+    </ol>
+  )
+}
+
+function ScheduleStatic() {
+  return (
+    <div className="hidden lg:grid lg:grid-cols-3 lg:gap-x-8">
+      {schedule.map((day) => (
+        <section key={day.dateTime}>
+          <DaySummary day={day} />
+          <TimeSlots day={day} className="mt-10" />
+        </section>
+      ))}
+    </div>
+  )
+}
+
+export function Schedule() {
+  return (
+    <section id="schedule" aria-label="Schedule" className="py-20 sm:py-32">
+      <Container className="relative z-10">
+        <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-4xl lg:pr-24">
+          <h2 className="font-display text-4xl font-medium tracking-tighter text-blue-600 sm:text-5xl">
+            Our three day schedule is jam-packed with brilliant, creative, evil
+            geniuses.
+          </h2>
+          <p className="mt-4 font-display text-2xl tracking-tight text-blue-900">
+            The worst people in our industry giving the best talks you’ve ever
+            seen. Nothing will be recorded and every attendee has to sign an NDA
+            to watch the talks.
+          </p>
+        </div>
+      </Container>
+      <div className="relative mt-14 sm:mt-24">
+        <BackgroundImage position="right" className="-bottom-32 -top-40" />
+        <Container className="relative">
+          <ScheduleTabbed />
+          <ScheduleStatic />
+        </Container>
+      </div>
+    </section>
+  )
+}
--- a/src/components/Speakers.jsx
+++ b/src/components/Speakers.jsx
@ -0,0 +1,294 @@
+'use client'
+
+import { useEffect, useId, useState } from 'react'
+import Image from 'next/image'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import clsx from 'clsx'
+
+import { Container } from '@/components/Container'
+import { DiamondIcon } from '@/components/DiamondIcon'
+import andrewGreeneImage from '@/images/avatars/andrew-greene.jpg'
+import cathleneBurrageImage from '@/images/avatars/cathlene-burrage.jpg'
+import damarisKimuraImage from '@/images/avatars/damaris-kimura.jpg'
+import dianneGuilianelliImage from '@/images/avatars/dianne-guilianelli.jpg'
+import erhartCockrinImage from '@/images/avatars/erhart-cockrin.jpg'
+import giordanoSagucioImage from '@/images/avatars/giordano-sagucio.jpg'
+import gordonSandersonImage from '@/images/avatars/gordon-sanderson.jpg'
+import heatherTerryImage from '@/images/avatars/heather-terry.jpg'
+import ibrahimFraschImage from '@/images/avatars/ibrahim-frasch.jpg'
+import jaquelinIschImage from '@/images/avatars/jaquelin-isch.jpg'
+import kimberlyParsonsImage from '@/images/avatars/kimberly-parsons.jpg'
+import parkerJohnsonImage from '@/images/avatars/parker-johnson.jpg'
+import piersWilkinsImage from '@/images/avatars/piers-wilkins.jpg'
+import richardAstley from '@/images/avatars/richard-astley.jpg'
+import rinaldoBeynonImage from '@/images/avatars/rinaldo-beynon.jpg'
+import ronniCantadoreImage from '@/images/avatars/ronni-cantadore.jpg'
+import stevenMchailImage from '@/images/avatars/steven-mchail.jpg'
+import waylonHydenImage from '@/images/avatars/waylon-hyden.jpg'
+
+const days = [
+  {
+    name: 'Opening Day',
+    date: 'April 4',
+    dateTime: '2022-04-04',
+    speakers: [
+      {
+        name: 'Steven McHail',
+        role: 'Designer at Globex Corporation',
+        image: stevenMchailImage,
+      },
+      {
+        name: 'Jaquelin Isch',
+        role: 'UX Design at InGen',
+        image: jaquelinIschImage,
+      },
+      {
+        name: 'Dianne Guilianelli',
+        role: 'General Manager at Initech',
+        image: dianneGuilianelliImage,
+      },
+      {
+        name: 'Ronni Cantadore',
+        role: 'Design Engineer at Weyland-Yutani',
+        image: ronniCantadoreImage,
+      },
+      {
+        name: 'Erhart Cockrin',
+        role: 'Product Lead at Cyberdyne Systems',
+        image: erhartCockrinImage,
+      },
+      {
+        name: 'Parker Johnson',
+        role: 'UI Designer at MomCorp',
+        image: parkerJohnsonImage,
+      },
+    ],
+  },
+  {
+    name: 'Speakers & Workshops',
+    date: 'April 5',
+    dateTime: '2022-04-05',
+    speakers: [
+      {
+        name: 'Damaris Kimura',
+        role: 'Senior Engineer at OCP',
+        image: damarisKimuraImage,
+      },
+      {
+        name: 'Ibrahim Frasch',
+        role: 'Programmer at Umbrella Corp',
+        image: ibrahimFraschImage,
+      },
+      {
+        name: 'Cathlene Burrage',
+        role: 'Frontend Developer at Buy n Large',
+        image: cathleneBurrageImage,
+      },
+      {
+        name: 'Rinaldo Beynon',
+        role: 'Data Scientist at Rekall',
+        image: rinaldoBeynonImage,
+      },
+      {
+        name: 'Waylon Hyden',
+        role: 'DevOps at RDA Corporation',
+        image: waylonHydenImage,
+      },
+      {
+        name: 'Giordano Sagucio',
+        role: 'Game Developer at Soylent Corp',
+        image: giordanoSagucioImage,
+      },
+    ],
+  },
+  {
+    name: 'Interviews',
+    date: 'April 6',
+    dateTime: '2022-04-06',
+    speakers: [
+      {
+        name: 'Andrew Greene',
+        role: 'Frontend Developer at Ultratech',
+        image: andrewGreeneImage,
+      },
+      {
+        name: 'Heather Terry',
+        role: 'Backend Developer at Xanatos Enterprises',
+        image: heatherTerryImage,
+      },
+      {
+        name: 'Piers Wilkins',
+        role: 'Full stack Developer at BiffCo',
+        image: piersWilkinsImage,
+      },
+      {
+        name: 'Gordon Sanderson',
+        role: 'Mobile Developer at Cobra Industries',
+        image: gordonSandersonImage,
+      },
+      {
+        name: 'Kimberly Parsons',
+        role: 'Game Developer at Tyrell Corporation',
+        image: kimberlyParsonsImage,
+      },
+      {
+        name: 'Richard Astley',
+        role: 'CEO at Roll Out',
+        image: richardAstley,
+      },
+    ],
+  },
+]
+
+function ImageClipPaths({ id, ...props }) {
+  return (
+    <svg aria-hidden="true" width={0} height={0} {...props}>
+      <defs>
+        <clipPath id={`${id}-0`} clipPathUnits="objectBoundingBox">
+          <path d="M0,0 h0.729 v0.129 h0.121 l-0.016,0.032 C0.815,0.198,0.843,0.243,0.885,0.243 H1 v0.757 H0.271 v-0.086 l-0.121,0.057 v-0.214 c0,-0.032,-0.026,-0.057,-0.057,-0.057 H0 V0" />
+        </clipPath>
+        <clipPath id={`${id}-1`} clipPathUnits="objectBoundingBox">
+          <path d="M1,1 H0.271 v-0.129 H0.15 l0.016,-0.032 C0.185,0.802,0.157,0.757,0.115,0.757 H0 V0 h0.729 v0.086 l0.121,-0.057 v0.214 c0,0.032,0.026,0.057,0.057,0.057 h0.093 v0.7" />
+        </clipPath>
+        <clipPath id={`${id}-2`} clipPathUnits="objectBoundingBox">
+          <path d="M1,0 H0.271 v0.129 H0.15 l0.016,0.032 C0.185,0.198,0.157,0.243,0.115,0.243 H0 v0.757 h0.729 v-0.086 l0.121,0.057 v-0.214 c0,-0.032,0.026,-0.057,0.057,-0.057 h0.093 V0" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export function Speakers() {
+  let id = useId()
+  let [tabOrientation, setTabOrientation] = useState('horizontal')
+
+  useEffect(() => {
+    let lgMediaQuery = window.matchMedia('(min-width: 1024px)')
+
+    function onMediaQueryChange({ matches }) {
+      setTabOrientation(matches ? 'vertical' : 'horizontal')
+    }
+
+    onMediaQueryChange(lgMediaQuery)
+    lgMediaQuery.addEventListener('change', onMediaQueryChange)
+
+    return () => {
+      lgMediaQuery.removeEventListener('change', onMediaQueryChange)
+    }
+  }, [])
+
+  return (
+    <section
+      id="speakers"
+      aria-labelledby="speakers-title"
+      className="py-20 sm:py-32"
+    >
+      <ImageClipPaths id={id} />
+      <Container>
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <h2
+            id="speakers-title"
+            className="font-display text-4xl font-medium tracking-tighter text-blue-600 sm:text-5xl"
+          >
+            Speakers
+          </h2>
+          <p className="mt-4 font-display text-2xl tracking-tight text-blue-900">
+            Learn from the experts on the cutting-edge of deception at the most
+            sinister companies.
+          </p>
+        </div>
+        <TabGroup
+          className="mt-14 grid grid-cols-1 items-start gap-x-8 gap-y-8 sm:mt-16 sm:gap-y-16 lg:mt-24 lg:grid-cols-4"
+          vertical={tabOrientation === 'vertical'}
+        >
+          <div className="relative -mx-4 flex overflow-x-auto pb-4 sm:mx-0 sm:block sm:overflow-visible sm:pb-0">
+            <div className="absolute bottom-0 left-0.5 top-2 hidden w-px bg-slate-200 lg:block" />
+            <TabList className="grid auto-cols-auto grid-flow-col justify-start gap-x-8 gap-y-10 whitespace-nowrap px-4 sm:mx-auto sm:max-w-2xl sm:grid-cols-3 sm:px-0 sm:text-center lg:grid-flow-row lg:grid-cols-1 lg:text-left">
+              {({ selectedIndex }) => (
+                <>
+                  {days.map((day, dayIndex) => (
+                    <div key={day.dateTime} className="relative lg:pl-8">
+                      <DiamondIcon
+                        className={clsx(
+                          'absolute left-[-0.5px] top-[0.5625rem] hidden h-1.5 w-1.5 overflow-visible lg:block',
+                          dayIndex === selectedIndex
+                            ? 'fill-blue-600 stroke-blue-600'
+                            : 'fill-transparent stroke-slate-400',
+                        )}
+                      />
+                      <div className="relative">
+                        <div
+                          className={clsx(
+                            'font-mono text-sm',
+                            dayIndex === selectedIndex
+                              ? 'text-blue-600'
+                              : 'text-slate-500',
+                          )}
+                        >
+                          <Tab className="ui-not-focus-visible:outline-none">
+                            <span className="absolute inset-0" />
+                            {day.name}
+                          </Tab>
+                        </div>
+                        <time
+                          dateTime={day.dateTime}
+                          className="mt-1.5 block text-2xl font-semibold tracking-tight text-blue-900"
+                        >
+                          {day.date}
+                        </time>
+                      </div>
+                    </div>
+                  ))}
+                </>
+              )}
+            </TabList>
+          </div>
+          <TabPanels className="lg:col-span-3">
+            {days.map((day) => (
+              <TabPanel
+                key={day.dateTime}
+                className="grid grid-cols-1 gap-x-8 gap-y-10 ui-not-focus-visible:outline-none sm:grid-cols-2 sm:gap-y-16 md:grid-cols-3"
+                unmount={false}
+              >
+                {day.speakers.map((speaker, speakerIndex) => (
+                  <div key={speakerIndex}>
+                    <div className="group relative h-[17.5rem] transform overflow-hidden rounded-4xl">
+                      <div
+                        className={clsx(
+                          'absolute bottom-6 left-0 right-4 top-0 rounded-4xl border transition duration-300 group-hover:scale-95 xl:right-6',
+                          [
+                            'border-blue-300',
+                            'border-indigo-300',
+                            'border-sky-300',
+                          ][speakerIndex % 3],
+                        )}
+                      />
+                      <div
+                        className="absolute inset-0 bg-indigo-50"
+                        style={{ clipPath: `url(#${id}-${speakerIndex % 3})` }}
+                      >
+                        <Image
+                          className="absolute inset-0 h-full w-full object-cover transition duration-300 group-hover:scale-110"
+                          src={speaker.image}
+                          alt=""
+                          priority
+                          sizes="(min-width: 1280px) 17.5rem, (min-width: 1024px) 25vw, (min-width: 768px) 33vw, (min-width: 640px) 50vw, 100vw"
+                        />
+                      </div>
+                    </div>
+                    <h3 className="mt-8 font-display text-xl font-bold tracking-tight text-slate-900">
+                      {speaker.name}
+                    </h3>
+                    <p className="mt-1 text-base tracking-tight text-slate-500">
+                      {speaker.role}
+                    </p>
+                  </div>
+                ))}
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </TabGroup>
+      </Container>
+    </section>
+  )
+}
--- a/src/components/Sponsors.jsx
+++ b/src/components/Sponsors.jsx
@ -0,0 +1,40 @@
+import Image from 'next/image'
+
+import { Container } from '@/components/Container'
+import logoLaravel from '@/images/logos/laravel.svg'
+import logoMirage from '@/images/logos/mirage.svg'
+import logoStatamic from '@/images/logos/statamic.svg'
+import logoStaticKit from '@/images/logos/statickit.svg'
+import logoTransistor from '@/images/logos/transistor.svg'
+import logoTuple from '@/images/logos/tuple.svg'
+
+const sponsors = [
+  { name: 'Transistor', logo: logoTransistor },
+  { name: 'Tuple', logo: logoTuple },
+  { name: 'StaticKit', logo: logoStaticKit },
+  { name: 'Mirage', logo: logoMirage },
+  { name: 'Laravel', logo: logoLaravel },
+  { name: 'Statamic', logo: logoStatamic },
+]
+
+export function Sponsors() {
+  return (
+    <section id="sponsors" aria-label="Sponsors" className="py-20 sm:py-32">
+      <Container>
+        <h2 className="mx-auto max-w-2xl text-center font-display text-4xl font-medium tracking-tighter text-blue-900 sm:text-5xl">
+          Current sponsorships for our workshops and speakers.
+        </h2>
+        <div className="mx-auto mt-20 grid max-w-max grid-cols-1 place-content-center gap-x-32 gap-y-12 sm:grid-cols-3 md:gap-x-16 lg:gap-x-32">
+          {sponsors.map((sponsor) => (
+            <div
+              key={sponsor.name}
+              className="flex items-center justify-center"
+            >
+              <Image src={sponsor.logo} alt={sponsor.name} unoptimized />
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/images/avatars/andrew-greene.jpg
+++ b/src/images/avatars/andrew-greene.jpg
--- a/src/images/avatars/cathlene-burrage.jpg
+++ b/src/images/avatars/cathlene-burrage.jpg
--- a/src/images/avatars/damaris-kimura.jpg
+++ b/src/images/avatars/damaris-kimura.jpg
--- a/src/images/avatars/dianne-guilianelli.jpg
+++ b/src/images/avatars/dianne-guilianelli.jpg
--- a/src/images/avatars/erhart-cockrin.jpg
+++ b/src/images/avatars/erhart-cockrin.jpg
--- a/src/images/avatars/giordano-sagucio.jpg
+++ b/src/images/avatars/giordano-sagucio.jpg
--- a/src/images/avatars/gordon-sanderson.jpg
+++ b/src/images/avatars/gordon-sanderson.jpg
--- a/src/images/avatars/heather-terry.jpg
+++ b/src/images/avatars/heather-terry.jpg
--- a/src/images/avatars/ibrahim-frasch.jpg
+++ b/src/images/avatars/ibrahim-frasch.jpg
--- a/src/images/avatars/jaquelin-isch.jpg
+++ b/src/images/avatars/jaquelin-isch.jpg
--- a/src/images/avatars/jasmine-slater.jpg
+++ b/src/images/avatars/jasmine-slater.jpg
--- a/src/images/avatars/kimberly-parsons.jpg
+++ b/src/images/avatars/kimberly-parsons.jpg
--- a/src/images/avatars/parker-johnson.jpg
+++ b/src/images/avatars/parker-johnson.jpg
--- a/src/images/avatars/piers-wilkins.jpg
+++ b/src/images/avatars/piers-wilkins.jpg
--- a/src/images/avatars/richard-astley.jpg
+++ b/src/images/avatars/richard-astley.jpg
--- a/src/images/avatars/rinaldo-beynon.jpg
+++ b/src/images/avatars/rinaldo-beynon.jpg
--- a/src/images/avatars/ronni-cantadore.jpg
+++ b/src/images/avatars/ronni-cantadore.jpg
--- a/src/images/avatars/steven-mchail.jpg
+++ b/src/images/avatars/steven-mchail.jpg
--- a/src/images/avatars/waylon-hyden.jpg
+++ b/src/images/avatars/waylon-hyden.jpg
--- a/src/images/background-newsletter.jpg
+++ b/src/images/background-newsletter.jpg
--- a/src/images/background.jpg
+++ b/src/images/background.jpg
--- a/src/images/logos/laravel.svg
+++ b/src/images/logos/laravel.svg
@ -0,0 +1,18 @@
+<svg width="136" height="48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#a)" fill="#64748B">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M38.455 13.018c.004.01.01.02.012.03a.658.658 0 0 1 .022.164v8.586a.627.627 0 0 1-.311.543l-7.138 4.15v8.223a.627.627 0 0 1-.312.543l-14.899 8.66a.533.533 0 0 1-.108.044c-.014.006-.027.014-.042.018a.612.612 0 0 1-.318 0 .164.164 0 0 1-.028-.01l-.02-.01c-.035-.013-.07-.024-.103-.043L.311 35.257A.628.628 0 0 1 0 34.714V8.956a.68.68 0 0 1 .021-.163c.006-.019.016-.035.022-.053l.02-.053a.328.328 0 0 1 .02-.044c.012-.02.029-.037.043-.056.018-.025.033-.05.055-.073.018-.018.04-.03.06-.047.023-.018.044-.038.069-.053l7.45-4.33a.616.616 0 0 1 .62 0l7.45 4.33c.025.015.046.035.069.053l.021.016c.014.01.028.02.04.031a.345.345 0 0 1 .04.051l.015.022c.013.02.03.035.042.056.017.03.028.064.04.097l.01.022.012.03a.644.644 0 0 1 .021.164v16.088l6.208-3.608v-8.224a.64.64 0 0 1 .022-.163c.005-.019.015-.035.021-.053l.007-.02a.279.279 0 0 1 .076-.133c.018-.025.034-.05.055-.073.01-.01.02-.017.03-.025.01-.007.021-.014.03-.022l.036-.03a.26.26 0 0 1 .033-.023l7.45-4.33a.616.616 0 0 1 .62 0l7.45 4.33c.026.015.046.036.069.053l.022.016c.013.01.027.02.038.031a.327.327 0 0 1 .04.052l.016.021.016.02c.01.012.019.023.026.036a.522.522 0 0 1 .034.08l.006.017.01.022ZM9.322 30.453l6.196 3.54 13.652-7.867-6.201-3.605-13.647 7.932Zm20.476-5.409v-7.14l-6.208-3.607v7.14l6.207 3.607h.001Zm6.826-11.83-6.206-3.608-6.205 3.607 6.205 3.606 6.206-3.606Zm-27.933.434v15.726l6.208-3.609V10.04L8.69 13.648h.001Zm5.584-4.692L8.07 5.35 1.864 8.956l6.206 3.607 6.205-3.607ZM7.449 13.65l-6.208-3.61v24.31L14.9 42.29v-7.21l-7.135-4.076h-.002L7.759 31c-.025-.015-.045-.035-.067-.053a.277.277 0 0 1-.059-.045l-.002-.002c-.013-.013-.024-.029-.035-.044a.567.567 0 0 0-.016-.022l-.03-.038a.201.201 0 0 1-.016-.023l-.001-.002a.259.259 0 0 1-.023-.054l-.01-.024-.015-.033a.237.237 0 0 1-.014-.038.374.374 0 0 1-.01-.068l-.003-.025a.48.48 0 0 0-.004-.026c-.002-.014-.005-.029-.005-.044V13.65v.001Zm8.691 21.43v7.21l13.657-7.937V27.21L16.14 35.08v.001Zm14.9-10.037 6.208-3.608v-7.14l-6.208 3.61v7.14-.002Z" />
+    <path d="M132.739 13.214H136V34.36h-3.261V13.214Zm-84.346 0h3.441V31.25h6.463v3.11h-9.904V13.216Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M68.576 20.525c.808.403 1.43.956 1.87 1.66v-1.902h3.261V34.36h-3.261v-1.903c-.439.705-1.062 1.259-1.87 1.66-.808.404-1.62.605-2.44.605-1.057 0-2.024-.196-2.902-.59a6.79 6.79 0 0 1-2.26-1.615 7.525 7.525 0 0 1-1.465-2.356 7.669 7.669 0 0 1-.524-2.84c0-.986.174-1.928.524-2.824a7.496 7.496 0 0 1 1.466-2.371 6.8 6.8 0 0 1 2.26-1.616c.877-.393 1.844-.59 2.902-.59.818 0 1.63.202 2.439.605Zm.733 9.938c.367-.416.651-.898.838-1.42.2-.552.302-1.134.3-1.721 0-.605-.1-1.18-.3-1.722a4.373 4.373 0 0 0-.838-1.42 4.056 4.056 0 0 0-1.302-.967 3.893 3.893 0 0 0-1.69-.362c-.62 0-1.178.12-1.677.362a4.105 4.105 0 0 0-1.286.967c-.36.403-.634.876-.823 1.42a5.182 5.182 0 0 0-.284 1.722c0 .604.094 1.178.284 1.72a4.17 4.17 0 0 0 .823 1.42c.36.404.788.726 1.286.968.524.247 1.097.37 1.676.362.618 0 1.182-.12 1.691-.362.495-.231.938-.56 1.302-.967Zm27.649-8.277c-.44-.705-1.063-1.258-1.87-1.661-.808-.403-1.62-.604-2.44-.604-1.057 0-2.024.196-2.902.589a6.8 6.8 0 0 0-2.26 1.616 7.492 7.492 0 0 0-1.465 2.37c-.35.901-.528 1.86-.524 2.826 0 1.007.174 1.953.524 2.84.338.869.836 1.668 1.466 2.355a6.79 6.79 0 0 0 2.26 1.616c.877.393 1.844.59 2.902.59.818 0 1.63-.202 2.439-.605.808-.402 1.43-.956 1.87-1.66v1.902h3.261V20.283h-3.261v1.903Zm-.3 6.857a4.368 4.368 0 0 1-.838 1.42 4.043 4.043 0 0 1-1.301.967 3.89 3.89 0 0 1-1.69.362c-.619 0-1.178-.12-1.677-.362a4.094 4.094 0 0 1-2.109-2.387 5.182 5.182 0 0 1-.285-1.721c0-.605.095-1.18.285-1.722a4.148 4.148 0 0 1 .823-1.42c.36-.404.798-.733 1.286-.967a3.794 3.794 0 0 1 1.676-.362c.618 0 1.182.12 1.69.362.51.242.943.565 1.302.967.36.403.639.876.839 1.42.198.543.299 1.117.299 1.722 0 .604-.1 1.178-.3 1.72Z" />
+    <path
+      d="M76.281 34.36h3.262V23.523h5.596v-3.24H76.28V34.36h.001Zm32.916-3.297 4.099-10.78h3.304l-5.354 14.077h-4.099l-5.353-14.077h3.303l4.1 10.78Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M123.714 19.92c-3.994 0-7.156 3.315-7.156 7.4 0 4.52 3.06 7.402 7.574 7.402 2.526 0 4.139-.975 6.109-3.098l-2.203-1.721c-.002 0-1.664 2.204-4.145 2.204-2.884 0-4.099-2.348-4.099-3.562h10.821c.568-4.65-2.46-8.624-6.901-8.624Zm-3.911 6.178c.025-.27.401-3.562 3.885-3.562s3.907 3.29 3.931 3.562h-7.816Z" />
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h136v48H0z" />
+    </clipPath>
+  </defs>
+</svg>
--- a/src/images/logos/mirage.svg
+++ b/src/images/logos/mirage.svg
@ -0,0 +1,17 @@
+<svg width="138" height="48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#a)" fill="#64748B">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M30.316 5c3.984 0 7.213 3.256 7.213 7.273a7.272 7.272 0 0 1-4.771 6.845l5.814 10.462h3.98c.613 0 1.11.5 1.11 1.118 0 .618-.497 1.118-1.11 1.118H1.11c-.612 0-1.109-.5-1.109-1.118 0-.618.497-1.118 1.11-1.118h3.98l10.353-18.562a1.106 1.106 0 0 1 1.896-.063l5.948 9.189 1.85-2.809a7.28 7.28 0 0 1-2.035-5.062c0-4.017 3.23-7.273 7.214-7.273h-.001Zm-5.709 17.183 4.788 7.397h6.634l-7.457-13.418-3.965 6.021Zm2.14 7.397L16.48 13.72 7.635 29.58H26.747Zm8.702-17.307a5.172 5.172 0 0 1-3.728 4.98l-2.101-3.781a1.106 1.106 0 0 0-1.892-.072l-1.402 2.13a5.18 5.18 0 0 1-1.144-3.257c0-2.859 2.299-5.176 5.134-5.176 2.835 0 5.133 2.317 5.133 5.176Z" />
+    <path
+      d="M9.62 35.173c-.611 0-1.107.5-1.107 1.117s.496 1.116 1.107 1.116h24.42c.612 0 1.108-.5 1.108-1.116 0-.617-.496-1.117-1.107-1.117H9.62Zm8.513 5.59c-.613 0-1.11.5-1.11 1.119 0 .617.497 1.118 1.11 1.118h7.396c.612 0 1.109-.5 1.109-1.118 0-.618-.497-1.12-1.11-1.12h-7.395Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M120.027 21.871c-.982-1.25-2.453-1.923-4.347-1.923-2.984 0-6.049 2.528-6.049 6.786 0 4.258 3.065 6.786 6.049 6.786 1.894 0 3.365-.66 4.347-1.923v1.058c0 2.445-1.472 3.93-4.142 3.93-1.594 0-3.107-.524-4.428-1.334l-1.036 2.432c1.376.99 3.515 1.525 5.464 1.525 4.36 0 7.003-2.54 7.003-6.677v-12.24h-2.861v1.58Zm-7.467 4.863c0-2.225 1.444-4.08 3.855-4.08 2.303 0 3.857 1.773 3.857 4.08 0 2.308-1.554 4.08-3.857 4.08-2.411 0-3.855-1.867-3.855-4.08Zm-8.219-4.849c-.899-1.168-2.248-1.937-4.101-1.937-3.65 0-6.526 2.898-6.526 6.923s2.875 6.924 6.526 6.924c1.854 0 3.202-.755 4.101-1.923v1.58h2.848v-13.16h-2.848v1.593Zm-7.698 4.986c0-2.307 1.486-4.217 3.938-4.217 2.357 0 3.938 1.813 3.938 4.217s-1.581 4.218-3.938 4.218c-2.452 0-3.938-1.91-3.938-4.218ZM138 26.858c-.013-4.107-2.52-6.91-6.172-6.91-3.842 0-6.499 2.803-6.499 6.924 0 4.176 2.766 6.924 6.676 6.924 1.976 0 3.774-.48 5.368-1.854l-1.417-2.048c-1.076.865-2.466 1.388-3.774 1.388-1.853 0-3.501-.99-3.883-3.353h9.647c.027-.329.054-.7.054-1.07Zm-9.687-1.113c.3-1.923 1.43-3.242 3.46-3.242 1.813 0 2.998 1.195 3.311 3.242h-6.771Z" />
+    <path
+      d="m64.333 27.957-5.546-13.738H54.06v19.233h3.08V17.777L62.71 31.57h3.243l5.573-13.944v15.826h3.08V14.219h-4.729l-5.545 13.738h.001Zm16.871 5.495v-13.16h-2.86v13.16h2.86Zm12.182-13.133c-.654-.261-1.322-.37-2.194-.37-1.594 0-2.93.576-3.788 1.826V20.29h-2.82v13.16h2.848v-7.24c0-2.238 1.294-3.53 3.106-3.53.695 0 1.567.165 2.166.48l.682-2.842Zm-11.61-4.575c0-1.14-.886-2.033-2.017-2.033-1.13 0-1.99.893-1.99 2.033s.86 2.006 1.99 2.006c1.131 0 2.017-.866 2.017-2.006Z" />
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h138v48H0z" />
+    </clipPath>
+  </defs>
+</svg>
--- a/src/images/logos/statamic.svg
+++ b/src/images/logos/statamic.svg
--- a/src/images/logos/statickit.svg
+++ b/src/images/logos/statickit.svg
@ -0,0 +1,5 @@
+<svg width="127" height="48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="m3.31 28.903 14.75-15.816L14.749 10 0 25.816l3.31 3.087ZM5.792 39 20.54 23.184l-3.31-3.087L2.482 35.913 5.792 39Zm31.261-18.216a3.87 3.87 0 0 0-1.441-1.115c-.594-.276-1.166-.414-1.718-.414-.284 0-.572.025-.864.075a2.23 2.23 0 0 0-.79.289c-.234.142-.43.326-.59.551-.158.226-.237.514-.237.865 0 .3.062.552.188.752.125.2.309.376.551.527.242.15.53.288.865.413.334.126.71.255 1.128.389.602.2 1.229.422 1.88.664a7.03 7.03 0 0 1 1.78.965 5.07 5.07 0 0 1 1.329 1.492c.35.593.526 1.333.526 2.219 0 1.019-.188 1.9-.564 2.644a5.274 5.274 0 0 1-1.516 1.843 6.499 6.499 0 0 1-2.181 1.078 9.17 9.17 0 0 1-2.532.35c-1.27 0-2.499-.22-3.685-.663-1.187-.443-2.173-1.074-2.959-1.893l2.808-2.858c.435.535 1.007.982 1.717 1.341.71.36 1.417.54 2.119.54.317 0 .626-.034.927-.101.301-.067.564-.176.79-.326.225-.15.405-.351.539-.602.134-.25.2-.551.2-.902 0-.334-.083-.619-.25-.853a2.45 2.45 0 0 0-.715-.639 5.76 5.76 0 0 0-1.153-.526c-.46-.159-.982-.33-1.567-.514a14.963 14.963 0 0 1-1.667-.652 5.58 5.58 0 0 1-1.454-.965 4.471 4.471 0 0 1-1.028-1.43c-.259-.559-.388-1.24-.388-2.042 0-.986.2-1.83.601-2.532.39-.689.93-1.28 1.58-1.73a6.786 6.786 0 0 1 2.206-.99c.81-.208 1.645-.314 2.482-.314 1.002 0 2.026.184 3.07.552 1.045.368 1.96.91 2.746 1.63l-2.733 2.882Zm9.677 3.736v4.763c0 .585.113 1.023.338 1.316.226.292.631.439 1.216.439.2 0 .414-.017.64-.05.194-.025.383-.075.563-.15l.05 3.007c-.283.1-.643.188-1.077.264a7.63 7.63 0 0 1-1.304.112c-.836 0-1.538-.104-2.106-.313-.568-.209-1.023-.51-1.366-.902a3.54 3.54 0 0 1-.74-1.404 6.804 6.804 0 0 1-.225-1.818V24.52h-2.006v-3.084h1.98v-3.284h4.037v3.284h2.933v3.084H46.73Zm12.234 3.96h-.527c-.451 0-.906.021-1.366.063-.46.042-.87.122-1.228.238a2.27 2.27 0 0 0-.89.514c-.234.226-.351.523-.351.89 0 .234.054.435.163.602.108.167.246.3.413.401.167.1.36.171.577.213a3.3 3.3 0 0 0 .627.063c.835 0 1.474-.23 1.917-.69.443-.46.665-1.082.665-1.867v-.427Zm-7.546-5.34a7.2 7.2 0 0 1 2.57-1.579 8.805 8.805 0 0 1 2.995-.526c1.053 0 1.943.13 2.67.389.727.259 1.316.66 1.767 1.203.452.543.782 1.228.99 2.056.21.827.314 1.809.314 2.945v6.293h-3.76v-1.329h-.076c-.317.518-.798.92-1.441 1.203a5.125 5.125 0 0 1-2.093.426 6.403 6.403 0 0 1-1.555-.2 4.554 4.554 0 0 1-1.466-.652 3.53 3.53 0 0 1-1.09-1.203c-.285-.502-.427-1.12-.427-1.855 0-.903.247-1.63.74-2.181.493-.552 1.128-.978 1.905-1.279.777-.3 1.642-.501 2.595-.601.952-.1 1.88-.151 2.782-.151v-.2c0-.619-.217-1.074-.651-1.367-.435-.292-.97-.439-1.605-.439a3.99 3.99 0 0 0-1.692.377 5.4 5.4 0 0 0-1.392.902l-2.08-2.231v-.001Zm18.688 1.38v4.763c0 .585.112 1.023.338 1.316.225.292.63.439 1.216.439.2 0 .413-.017.639-.05.226-.034.414-.084.564-.15l.05 3.007a6.88 6.88 0 0 1-1.078.264c-.43.075-.866.112-1.303.112-.836 0-1.538-.104-2.106-.313-.568-.209-1.024-.51-1.366-.902a3.537 3.537 0 0 1-.74-1.404 6.808 6.808 0 0 1-.226-1.818V24.52H64.09v-3.084h1.98v-3.284h4.037v3.284h2.933v3.084H70.106Zm9.325-7.07c0 .318-.063.614-.188.89-.12.268-.29.51-.501.715a2.44 2.44 0 0 1-1.667.652c-.669 0-1.229-.222-1.68-.665a2.15 2.15 0 0 1-.677-1.592c0-.3.059-.589.176-.865.117-.275.284-.514.501-.714.217-.2.468-.364.752-.489s.593-.188.928-.188a2.445 2.445 0 0 1 1.667.652c.209.2.376.439.501.714.126.276.188.573.188.89ZM75.02 33.92V21.437h4.111v12.485H75.02v-.002Zm15.273-8.448a2.496 2.496 0 0 0-.953-.727 2.92 2.92 0 0 0-1.228-.275c-.435 0-.828.087-1.179.263a2.86 2.86 0 0 0-.902.702c-.25.292-.447.63-.59 1.015-.143.393-.215.81-.212 1.228 0 .435.067.844.2 1.229a3 3 0 0 0 .59 1.015c.258.293.568.522.927.69.36.167.765.25 1.216.25.418 0 .831-.08 1.24-.238.41-.159.74-.389.99-.69l2.282 2.783c-.518.502-1.186.894-2.005 1.178-.84.288-1.72.432-2.608.427a8.229 8.229 0 0 1-2.757-.452 6.361 6.361 0 0 1-2.219-1.316 6.18 6.18 0 0 1-1.479-2.093c-.36-.819-.539-1.746-.539-2.783 0-1.02.18-1.938.54-2.757a6.181 6.181 0 0 1 1.478-2.093 6.519 6.519 0 0 1 2.219-1.33 7.951 7.951 0 0 1 5.352.001c.41.142.786.317 1.128.526.343.21.64.439.89.69l-2.381 2.757Zm15.091 8.449-6.593-8.173h-.05v8.173h-4.212V16.17h4.212v7.22h.075l6.343-7.22h5.364l-7.646 8.173 8.098 9.577h-5.591v.001Zm11.206-16.47c0 .317-.062.613-.188.89-.12.268-.29.51-.501.714a2.445 2.445 0 0 1-1.667.652c-.669 0-1.229-.222-1.68-.665a2.152 2.152 0 0 1-.677-1.592c0-.3.059-.589.176-.865.117-.275.284-.514.501-.714.217-.2.468-.364.752-.489s.593-.188.928-.188a2.445 2.445 0 0 1 1.667.652c.209.2.376.439.501.714.126.276.188.573.188.89v.001Zm-4.412 16.47V21.436h4.111v12.485h-4.111Zm11.833-9.401v4.763c0 .585.112 1.023.338 1.316.226.292.631.439 1.216.439.2 0 .414-.017.639-.05.194-.024.384-.075.564-.15l.05 3.007a6.88 6.88 0 0 1-1.078.264c-.43.075-.866.112-1.303.112-.836 0-1.538-.104-2.106-.313-.568-.209-1.024-.51-1.366-.902a3.535 3.535 0 0 1-.74-1.404 6.84 6.84 0 0 1-.225-1.818V24.52h-2.006v-3.084h1.981v-3.284h4.036v3.284h2.933v3.084h-2.933Z"
+    fill="#64748B" />
+</svg>
--- a/src/images/logos/transistor.svg
+++ b/src/images/logos/transistor.svg
@ -0,0 +1,13 @@
+<svg width="158" height="48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#a)" fill="#64748B">
+    <path
+      d="M55.423 18.178v-2.491H66.38v2.491h-4.076v13.875H59.47V18.178h-4.047Zm18.098 4.577a7.526 7.526 0 0 0-1.33-.116c-1.82 0-2.89 1.188-2.89 3.592v5.793h-2.69v-11.47h2.631v1.622h.058c.52-.985 1.677-2 3.21-2 .433 0 .722.03 1.011.059v2.52Zm12.866 9.269h-2.602v-1.448h-.058c-.78.985-2.024 1.883-3.932 1.883-2.573 0-5.493-2.057-5.493-6.17 0-3.65 2.573-6.083 5.695-6.083 1.908 0 3.065 1.013 3.76 1.911h.057v-1.564h2.602v11.471h-.03.001Zm-5.898-1.94c1.763 0 3.411-1.536 3.411-3.738 0-2.317-1.503-3.852-3.382-3.852-2.37 0-3.499 1.912-3.499 3.795 0 1.911 1.1 3.794 3.47 3.794v.001Zm9.021-9.531h2.66v1.449h.057c.896-1.304 2.226-1.825 3.498-1.825 2.371 0 4.453 1.564 4.453 5.243v6.604h-2.69v-6.46c0-1.97-.924-3.012-2.457-3.012-1.677 0-2.833 1.188-2.833 3.418v6.083H89.51v-11.5h.001Zm18.792 2.955c-.116-.84-.752-1.39-1.533-1.39-.925 0-1.445.579-1.445 1.216 0 .695.347 1.188 2.341 1.854 2.458.782 3.325 2.057 3.325 3.679 0 2.114-1.59 3.592-4.221 3.592-2.746 0-4.105-1.507-4.308-3.65h2.487c.115.956.694 1.68 1.879 1.68 1.012 0 1.59-.637 1.59-1.42 0-.868-.491-1.419-2.399-2.056-2.14-.695-3.239-1.767-3.239-3.563 0-1.883 1.475-3.273 3.903-3.273 2.458 0 3.759 1.448 4.048 3.33h-2.428v.001Zm5.03-8.227h2.978v2.723h-2.978v-2.723Zm.145 5.272h2.688v11.5h-2.688v-11.5Zm10.986 2.955c-.116-.84-.752-1.39-1.533-1.39-.925 0-1.445.579-1.445 1.216 0 .695.347 1.188 2.342 1.854 2.457.782 3.324 2.057 3.324 3.679 0 2.114-1.59 3.592-4.221 3.592-2.746 0-4.105-1.507-4.307-3.65h2.486c.116.956.694 1.68 1.879 1.68 1.012 0 1.59-.637 1.59-1.42 0-.868-.491-1.419-2.399-2.056-2.14-.695-3.238-1.767-3.238-3.563 0-1.883 1.474-3.273 3.903-3.273 2.457 0 3.758 1.448 4.047 3.33h-2.428v.001Zm3.845-2.955h1.445v-3.678h2.689v3.678h2.862v2.26h-2.891v5.127c0 1.564.492 1.999 1.59 1.999.463 0 .983-.087 1.388-.203v2.172c-.607.174-1.359.261-2.024.261-2.862 0-3.614-1.738-3.614-4.084v-5.272h-1.445v-2.26Zm14.311-.376c3.585 0 6.129 2.636 6.129 6.112 0 3.389-2.573 6.17-6.129 6.17-3.498 0-6.129-2.694-6.129-6.17 0-3.563 2.66-6.112 6.129-6.112Zm0 9.877c2.024 0 3.411-1.622 3.411-3.765 0-2.028-1.301-3.737-3.411-3.737-2.053 0-3.412 1.593-3.412 3.737 0 2.201 1.562 3.765 3.412 3.765Zm14.052-7.415c-1.822 0-2.891 1.188-2.891 3.592v5.793h-2.689v-11.47h2.631v1.622h.058c.52-.985 1.676-2 3.209-2 .433 0 .722.03 1.012.059v2.52a7.525 7.525 0 0 0-1.33-.116ZM20.816 37.731a1.39 1.39 0 0 1-1.388-1.39V11.37a1.389 1.389 0 0 1 2.369-.982c.26.26.406.614.406.982v24.97c0 .753-.636 1.39-1.387 1.39v.001Zm-5.783-12.484h-6.65a1.39 1.39 0 0 1-1.387-1.39c0-.783.607-1.391 1.388-1.391h6.65a1.39 1.39 0 1 1 0 2.78v.001Zm18.243 0h-6.678a1.39 1.39 0 0 1-1.388-1.39c0-.783.607-1.391 1.388-1.391h6.65a1.39 1.39 0 0 1 1.387 1.39c0 .782-.607 1.39-1.359 1.39v.001Z" />
+    <path
+      d="M20.816 44.712C9.338 44.712 0 35.356 0 23.856 0 12.356 9.338 3 20.816 3s20.816 9.356 20.816 20.856c0 11.5-9.338 20.856-20.816 20.856Zm0-38.931c-9.945 0-18.04 8.11-18.04 18.075s8.095 18.075 18.04 18.075c9.946 0 18.04-8.11 18.04-18.075S30.763 5.781 20.817 5.781h-.001Z" />
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h158v48H0z" />
+    </clipPath>
+  </defs>
+</svg>
--- a/src/images/logos/tuple.svg
+++ b/src/images/logos/tuple.svg
@ -0,0 +1,13 @@
+<svg width="105" height="48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M18 4 0 10v19.5l6 2V37l18 6V11.5l-6 2V4ZM8 32.167 18 35.5V15.608l4-1.333v25.95L8 35.56v-3.393Z" fill="#64748B" />
+  <path
+    d="M42.9 20.45V31h4.446V20.45h3.53v-3.392H39.39v3.393h3.51Zm10.205 4.798c0 3.978 2.3 6.006 6.376 6.006 3.9 0 6.396-1.853 6.396-6.045v-8.15H61.43v7.994c0 1.833-.39 2.73-1.95 2.73-1.58 0-1.97-.897-1.97-2.71v-8.015h-4.406v8.19Z"
+    fill="#64748B" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M68.965 31V17.058h5.558c4.017 0 5.733 1.794 5.733 4.777v.078c0 2.906-1.93 4.544-5.538 4.544h-1.346V31h-4.407Zm5.323-7.507h-.916v-3.14h.936c1.15 0 1.755.43 1.755 1.502v.078c0 1.033-.605 1.56-1.775 1.56Z"
+    fill="#64748B" />
+  <path
+    d="M82.563 31V17.058h4.427v10.53h5.07V31h-9.497Zm11.999-13.942V31h10.218v-3.393h-5.811v-2.086h4.368v-3.1h-4.368v-1.97h5.499v-3.393h-9.906Z"
+    fill="#64748B" />
+</svg>
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,37 @@
+const headlessuiPlugin = require('@headlessui/tailwindcss')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    fontSize: {
+      xs: ['0.75rem', { lineHeight: '1rem' }],
+      sm: ['0.875rem', { lineHeight: '1.5rem' }],
+      base: ['1rem', { lineHeight: '1.5rem' }],
+      lg: ['1.125rem', { lineHeight: '2rem' }],
+      xl: ['1.25rem', { lineHeight: '2rem' }],
+      '2xl': ['1.5rem', { lineHeight: '2.5rem' }],
+      '3xl': ['2rem', { lineHeight: '2.5rem' }],
+      '4xl': ['2.5rem', { lineHeight: '3rem' }],
+      '5xl': ['3rem', { lineHeight: '3.5rem' }],
+      '6xl': ['4rem', { lineHeight: '1' }],
+      '7xl': ['5rem', { lineHeight: '1' }],
+      '8xl': ['6rem', { lineHeight: '1' }],
+      '9xl': ['8rem', { lineHeight: '1' }],
+    },
+    extend: {
+      borderRadius: {
+        '4xl': '2rem',
+        '5xl': '2.5rem',
+      },
+      fontFamily: {
+        sans: 'var(--font-inter)',
+        display: 'var(--font-dm-sans)',
+      },
+      maxWidth: {
+        '2xl': '40rem',
+      },
+    },
+  },
+  plugins: [headlessuiPlugin],
+}