add template

2024-08-26 14:14:34 +02:00
parent 4e4541f3e5
commit ad132b5bdf
56 changed files with 6854 additions and 1 deletions
--- 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;