feat(backend): bypass auth in development

Use mockAuthSessionMiddleware with a fully populated dev
user when NODE_ENV is not production. Auth handlers are
only registered in production.

Co-authored-by: Ona <no-reply@ona.com>

apps/aelis-backend/src/auth/session-middleware.ts

@@ -61,7 +61,7 @@ export async function getSessionFromHeaders(
 }
 
 /**
- * Test-only middleware that injects a fake user and session.
+ * Dev/test middleware that injects a fake user and session.
  * Pass userId to simulate an authenticated request, or omit to get 401.
  */
 export function mockAuthSessionMiddleware(userId?: string): AuthSessionMiddleware {
@@ -69,8 +69,34 @@ export function mockAuthSessionMiddleware(userId?: string): AuthSessionMiddlewar
 		if (!userId) {
 			return c.json({ error: "Unauthorized" }, 401)
 		}
-		c.set("user", { id: userId } as AuthUser)
-		c.set("session", { id: "mock-session" } as AuthSession)
+
+		const now = new Date()
+		const expiresAt = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000)
+
+		const user: AuthUser = {
+			id: "k7Gx2mPqRvNwYs9TdLfA4bHcJeUo1iZn",
+			name: "Dev User",
+			email: "dev@aelis.local",
+			emailVerified: true,
+			image: null,
+			createdAt: now,
+			updatedAt: now,
+		}
+
+		const session: AuthSession = {
+			id: "Wt3FvBpXaQrMhD8sKjE6LcYn0gUz5iRo",
+			userId: "k7Gx2mPqRvNwYs9TdLfA4bHcJeUo1iZn",
+			token: "Vb9CxNfRm2KwQs7TjPeA5dLhYg0UoZi4",
+			expiresAt,
+			ipAddress: "127.0.0.1",
+			userAgent: "aelis-dev",
+			createdAt: now,
+			updatedAt: now,
+		}
+
+		c.set("user", user)
+		c.set("session", session)
+
 		await next()
 	}
 }

apps/aelis-backend/src/server.ts

@@ -2,7 +2,7 @@ import { LocationSource } from "@aelis/source-location"
 import { Hono } from "hono"
 
 import { registerAuthHandlers } from "./auth/http.ts"
-import { requireSession } from "./auth/session-middleware.ts"
+import { mockAuthSessionMiddleware, requireSession } from "./auth/session-middleware.ts"
 import { createFeedEnhancer } from "./enhancement/enhance-feed.ts"
 import { createLlmClient } from "./enhancement/llm-client.ts"
 import { registerFeedHttpHandlers } from "./feed/http.ts"
@@ -43,10 +43,16 @@ function main() {
 
 	app.get("/health", (c) => c.json({ status: "ok" }))
 
-	registerAuthHandlers(app)
+	const isDev = process.env.NODE_ENV !== "production"
+	const authSessionMiddleware = isDev ? mockAuthSessionMiddleware("dev-user") : requireSession
+
+	if (!isDev) {
+		registerAuthHandlers(app)
+	}
+
 	registerFeedHttpHandlers(app, {
 		sessionManager,
-		authSessionMiddleware: requireSession,
+		authSessionMiddleware,
 	})
 	registerLocationHttpHandlers(app, { sessionManager })
 

apps/waitlist-website/.dockerignore

@@ -0,0 +1,5 @@
+.react-router
+build
+node_modules
+.env
+README.md

apps/waitlist-website/.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+.env
+/node_modules/
+
+# React Router
+/.react-router/
+/build/

apps/waitlist-website/Dockerfile

@@ -0,0 +1,22 @@
+FROM oven/bun:1 AS development-dependencies-env
+COPY . /app
+WORKDIR /app
+RUN bun install
+
+FROM oven/bun:1 AS production-dependencies-env
+COPY ./package.json /app/
+WORKDIR /app
+RUN bun install --production
+
+FROM oven/bun:1 AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN bun run build
+
+FROM node:20-alpine
+COPY ./package.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["npm", "run", "start"]

apps/waitlist-website/README.md

@@ -0,0 +1,87 @@
+# Welcome to React Router!
+
+A modern, production-ready template for building full-stack React applications using React Router.
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
+
+## Features
+
+- 🚀 Server-side rendering
+- ⚡️ Hot Module Replacement (HMR)
+- 📦 Asset bundling and optimization
+- 🔄 Data loading and mutations
+- 🔒 TypeScript by default
+- 🎉 TailwindCSS for styling
+- 📖 [React Router docs](https://reactrouter.com/)
+
+## Getting Started
+
+### Installation
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+### Development
+
+Start the development server with HMR:
+
+```bash
+npm run dev
+```
+
+Your application will be available at `http://localhost:5173`.
+
+## Building for Production
+
+Create a production build:
+
+```bash
+npm run build
+```
+
+## Deployment
+
+### Docker Deployment
+
+To build and run using Docker:
+
+```bash
+docker build -t my-app .
+
+# Run the container
+docker run -p 3000:3000 my-app
+```
+
+The containerized application can be deployed to any platform that supports Docker, including:
+
+- AWS ECS
+- Google Cloud Run
+- Azure Container Apps
+- Digital Ocean App Platform
+- Fly.io
+- Railway
+
+### DIY Deployment
+
+If you're familiar with deploying Node applications, the built-in app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+```
+├── package.json
+├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
+├── build/
+│   ├── client/    # Static assets
+│   └── server/    # Server-side code
+```
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
+
+---
+
+Built with ❤️ using React Router.

apps/waitlist-website/app/app.css

@@ -0,0 +1,51 @@
+@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");
+@import "tailwindcss";
+
+@source "../node_modules/streamdown/dist/*.js";
+
+@theme {
+	--font-sans:
+		"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+		"Segoe UI Symbol", "Noto Color Emoji";
+	--font-serif: "Source Serif 4", ui-serif, serif;
+}
+
+:root,
+html,
+body {
+	@apply w-full h-full;
+}
+
+@keyframes popover-in {
+	from {
+		opacity: 0;
+		transform: scale(0.95) translateY(4px);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1) translateY(0);
+	}
+}
+
+@keyframes popover-out {
+	from {
+		opacity: 1;
+		transform: scale(1) translateY(0);
+	}
+	to {
+		opacity: 0;
+		transform: scale(0.95) translateY(4px);
+	}
+}
+
+html,
+body {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+
+	@apply bg-stone-50 dark:bg-stone-900 text-stone-900 dark:text-stone-200 selection:bg-teal-600 dark:selection:bg-teal-500 selection:text-stone-50 dark:selection:text-stone-900;
+
+	@media (prefers-color-scheme: dark) {
+		color-scheme: dark;
+	}
+}

apps/waitlist-website/app/chat/chat-box.tsx

@@ -0,0 +1,117 @@
+import clsx from "clsx"
+import { ArrowUpIcon, FileIcon, ImageIcon, PlusIcon, XIcon } from "lucide-react"
+import { motion, useAnimate } from "motion/react"
+import { useEffect, useRef, useState } from "react"
+import { Button, Menu, MenuItem, MenuTrigger, Popover } from "react-aria-components"
+
+export function ChatBox({
+	className,
+	validate,
+	onSubmit,
+}: {
+	className?: string
+	validate?: (value: string) => boolean
+	onSubmit: (email: string) => void
+	disabled?: boolean
+}) {
+	const [scope, animate] = useAnimate()
+	const [shouldShowInvalid, setShouldShowInvalid] = useState(false)
+	const clearInvalidStateTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+	useEffect(
+		() => () => {
+			if (clearInvalidStateTimeout.current) {
+				clearTimeout(clearInvalidStateTimeout.current)
+			}
+		},
+		[],
+	)
+
+	function showInvalidState() {
+		animate(scope.current, { x: [0, -6, 6, -4, 4, -2, 2, 0] }, { duration: 0.4, ease: "easeOut" })
+		if (clearInvalidStateTimeout.current) {
+			clearTimeout(clearInvalidStateTimeout.current)
+		}
+		setShouldShowInvalid(true)
+		clearInvalidStateTimeout.current = setTimeout(() => {
+			setShouldShowInvalid(false)
+		}, 500)
+	}
+
+	const onFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault()
+		const formData = new FormData(e.currentTarget)
+		const email = formData.get("liame")
+		if (typeof email === "string") {
+			const trimmed = email.trim()
+			if (trimmed.length === 0) {
+				showInvalidState()
+			} else if (validate && !validate(trimmed)) {
+				showInvalidState()
+			} else {
+				onSubmit(trimmed)
+				e.currentTarget.reset()
+			}
+		}
+	}
+
+	return (
+		<motion.form
+			ref={scope}
+			onSubmit={onFormSubmit}
+			className={`min-h-20 px-3 pt-2 pb-1.5 flex flex-col justify-between rounded-lg bg-stone-100 dark:bg-stone-800 border border-stone-200 dark:border-stone-700 ${className ?? ""} shadow-xs hover:shadow-sm`}
+		>
+			<input
+				name="liame"
+				className="w-full bg-transparent outline-none focus:outline-none ring-0 focus:ring-0"
+			/>
+			<div className="w-full flex justify-between">
+				<MenuTrigger>
+					<Button className="bg-transparent hover:bg-stone-200 dark:hover:bg-stone-700 active:bg-stone-300 dark:active:bg-stone-600 data-[pressed]:bg-stone-200 dark:data-[pressed]:bg-stone-700 rounded-full flex items-center justify-center p-1 -ml-1.5 active:inset-shadow-sm outline-none transition-transform duration-200 data-[pressed]:rotate-45">
+						<PlusIcon size={16} />
+					</Button>
+					<Popover
+						offset={4}
+						className="origin-bottom-left rounded-lg border border-stone-200 dark:border-stone-700 bg-stone-100 dark:bg-stone-800 shadow-lg p-1 min-w-40 outline-none data-[entering]:animate-[popover-in_150ms_ease-out] data-[exiting]:animate-[popover-out_100ms_ease-in]"
+						placement="top start"
+					>
+						<AttachmentMenu />
+					</Popover>
+				</MenuTrigger>
+				<button
+					type="submit"
+					disabled={shouldShowInvalid}
+					className={clsx(
+						"transition-all rounded-full flex items-center justify-center p-1 -mr-1.5 active:scale-95",
+						shouldShowInvalid
+							? "bg-red-400 hover:bg-red-300 text-stone-200 dark:text-stone-700"
+							: "bg-teal-600 hover:bg-teal-500 active:bg-teal-600 text-stone-200",
+					)}
+				>
+					{shouldShowInvalid ? <XIcon size={16} /> : <ArrowUpIcon size={16} />}
+				</button>
+			</div>
+		</motion.form>
+	)
+}
+
+function AttachmentMenu() {
+	return (
+		<Menu className="outline-none">
+			<MenuItem
+				className="flex items-center gap-2 px-2 py-1 rounded-md cursor-default outline-none hover:bg-stone-200 dark:hover:bg-stone-700 focus:bg-stone-200 dark:focus:bg-stone-700"
+				onAction={() => {}}
+			>
+				<ImageIcon size={14} />
+				Photos
+			</MenuItem>
+			<MenuItem
+				className="flex items-center gap-2 px-2 py-1 rounded-md cursor-default outline-none hover:bg-stone-200 dark:hover:bg-stone-700 focus:bg-stone-200 dark:focus:bg-stone-700"
+				onAction={() => {}}
+			>
+				<FileIcon size={14} />
+				Files
+			</MenuItem>
+		</Menu>
+	)
+}

apps/waitlist-website/app/chat/message.ts

@@ -0,0 +1,66 @@
+export interface UserMessage {
+	role: "user"
+	message: string
+	bubbleLayoutId?: string
+}
+
+export interface SystemMessage {
+	role: "system"
+	message: string
+}
+
+export type Message = UserMessage | SystemMessage
+
+function timeOfDay() {
+	const hours = new Date().getHours()
+	if (hours >= 5 && hours < 12) {
+		return "morning"
+	} else if (hours >= 12 && hours < 18) {
+		return "afternoon"
+	} else if (hours >= 18 && hours < 22) {
+		return "evening"
+	}
+	return "night"
+}
+
+export const INITIAL_MESSAGES: Message[] = [
+	{
+		role: "user",
+		message: "Who are you?",
+	},
+	{
+		role: "system",
+		message: `Hey! I'm **Aelis** — your personal assistant that brings you the right thing, at the right time, in the right place.
+
+- Jubilee line down? I've already found you an alternative route.
+- Dinner reservation at 8? I'll have the restaurant, directions, and the menu ready before you head out.
+
+I learn your routines, anticipate what's next, and surface what matters before you even think to look for it.
+
+I'm not ready yet — [@kennethnym](https://x.com/kennethnym) is still building me. **Drop your email below** and I'll let you know when I'm available.`,
+	},
+]
+
+export function waitListJoinedMessage(email: string): SystemMessage {
+	return {
+		role: "system",
+		message: `Thanks for joining the waitlist! I've sent you a confirmation email.
+I'll send an email to **${email}** when I'm ready.
+
+Have a good ${timeOfDay()}!`,
+	}
+}
+
+export function duplicateEmailMessage(): SystemMessage {
+	return {
+		role: "system",
+		message: `I appreciate your excitement! You are already on the waitlist. When I am ready, I will reach out again. Have a good ${timeOfDay()} :)`,
+	}
+}
+
+export function troubleMessage(): SystemMessage {
+	return {
+		role: "system",
+		message: `I apologize, but I am having trouble adding you to the waitlist. Could you refresh the page and try again please in a moment?`,
+	}
+}

apps/waitlist-website/app/chat/use-fake-streaming.ts

@@ -0,0 +1,23 @@
+import { useEffect, useMemo, useState } from "react"
+
+export function useFakeStreaming(fullContent: string) {
+	const [currentContent, setCurrentContent] = useState("")
+	const [isStreaming, setIsStreaming] = useState(true)
+
+	useEffect(() => {
+		const words = fullContent.split(" ")
+
+		let i = 0
+		const id = setInterval(() => {
+			if (i > words.length) {
+				setIsStreaming(false)
+				clearInterval(id)
+			} else {
+				setCurrentContent(words.slice(0, i).join(" ") + " ")
+				i++
+			}
+		}, 20)
+	}, [fullContent])
+
+	return useMemo(() => ({ currentContent, isStreaming }), [currentContent, isStreaming])
+}

apps/waitlist-website/app/components/animated-logo.tsx

@@ -0,0 +1,168 @@
+import Lottie, { type LottieRef } from "lottie-react"
+import { useEffect, useRef, useState } from "react"
+
+import { useColorScheme } from "~/hooks/use-color-scheme"
+import clickedAnimationDark from "~/lottie/clicked-dark.json"
+import clickedAnimationLight from "~/lottie/clicked-light.json"
+import loadingAnimationDark from "~/lottie/loading-dark.json"
+import loadingAnimationLight from "~/lottie/loading-light.json"
+import startLoadingAnimationDark from "~/lottie/start-loading-dark.json"
+import startLoadingAnimationLight from "~/lottie/start-loading-light.json"
+
+export const AnimatedLogoState = {
+	Idle: "idle",
+	Loading: "loading",
+} as const
+export type AnimatedLogoState = (typeof AnimatedLogoState)[keyof typeof AnimatedLogoState]
+
+interface AnimatedLogoProps {
+	state: AnimatedLogoState
+	className?: string
+}
+
+interface Animation {
+	loop: boolean
+	reverse: boolean
+	sticky: boolean
+	data: unknown
+}
+
+export function AnimatedLogo({ state, className }: AnimatedLogoProps) {
+	const colorScheme = useColorScheme()
+	const [animationQueue, setAnimationQueue] = useState<Animation[]>([])
+	const lottieRef: LottieRef = useRef(null)
+
+	let currentAnimation: Animation
+	let isIdle = false
+	if (animationQueue.length === 0) {
+		isIdle = true
+		currentAnimation = {
+			loop: false,
+			reverse: false,
+			sticky: false,
+			data: colorScheme === "dark" ? startLoadingAnimationDark : startLoadingAnimationLight,
+		}
+	} else {
+		isIdle = false
+		currentAnimation = animationQueue[0]
+	}
+
+	useEffect(() => {
+		if (state === AnimatedLogoState.Loading) {
+			setAnimationQueue((queue) => [
+				...queue,
+				{
+					loop: false,
+					reverse: false,
+					sticky: false,
+					data: colorScheme === "dark" ? startLoadingAnimationDark : startLoadingAnimationLight,
+				},
+				{
+					loop: true,
+					reverse: false,
+					sticky: false,
+					data: colorScheme === "dark" ? loadingAnimationDark : loadingAnimationLight,
+				},
+			])
+		} else if (state === AnimatedLogoState.Idle) {
+			setAnimationQueue((queue) => {
+				const last = queue.at(-1)
+				if (!last) {
+					return []
+				}
+				if (
+					last.loop &&
+					(last.data === loadingAnimationDark || last.data === loadingAnimationLight)
+				) {
+					return [
+						...queue,
+						{
+							loop: false,
+							sticky: false,
+							reverse: false,
+							data: colorScheme === "dark" ? loadingAnimationDark : loadingAnimationLight,
+						},
+						{
+							loop: false,
+							sticky: false,
+							reverse: true,
+							data: colorScheme === "dark" ? startLoadingAnimationDark : startLoadingAnimationLight,
+						},
+					]
+				}
+				return []
+			})
+		}
+	}, [state])
+
+	useEffect(() => {
+		if (!lottieRef.current) {
+			return
+		}
+		if (currentAnimation.reverse) {
+			const frames = lottieRef.current.getDuration(true)
+			if (frames) {
+				lottieRef.current.setDirection(-1)
+				lottieRef.current.goToAndPlay(frames - 1, true)
+			}
+		} else if (!isIdle) {
+			lottieRef.current.setDirection(1)
+			lottieRef.current.play()
+		}
+	}, [currentAnimation])
+
+	function onComplete() {
+		if (animationQueue.length > 0 && !animationQueue[0].sticky) {
+			setAnimationQueue((queue) => queue.slice(1))
+		}
+	}
+
+	function onLoopComplete() {
+		const current = animationQueue[0]
+		const next = animationQueue[1]
+		if (current && next && current.data === next.data && current.loop && !next.loop) {
+			setAnimationQueue((queue) => queue.slice(2))
+		}
+	}
+
+	function onMouseDown() {
+		if (state === AnimatedLogoState.Idle) {
+			setAnimationQueue([
+				{
+					loop: false,
+					sticky: true,
+					reverse: false,
+					data: colorScheme === "dark" ? clickedAnimationDark : clickedAnimationLight,
+				},
+			])
+		}
+	}
+
+	function onMouseUp() {
+		if (state === AnimatedLogoState.Idle) {
+			setAnimationQueue((queue) => [
+				{
+					loop: false,
+					sticky: false,
+					reverse: true,
+					data: colorScheme === "dark" ? clickedAnimationDark : clickedAnimationLight,
+				},
+			])
+		}
+	}
+
+	return (
+		<Lottie
+			lottieRef={lottieRef}
+			autoplay={false}
+			loop={currentAnimation.loop}
+			className={className}
+			animationData={currentAnimation.data}
+			onComplete={onComplete}
+			onLoopComplete={onLoopComplete}
+			onMouseDown={onMouseDown}
+			onMouseUp={onMouseUp}
+			onMouseLeave={onMouseUp}
+		/>
+	)
+}

apps/waitlist-website/app/components/progressive-blur.tsx

@@ -0,0 +1,35 @@
+export function ProgressiveBlur({
+	className,
+	direction = "down",
+}: {
+	className?: string
+	direction?: "down" | "up"
+}) {
+	if (direction === "up") {
+		return (
+			<div className={`pointer-events-none ${className ?? ""}`}>
+				<div className="absolute inset-0 backdrop-blur-[1px] [mask:linear-gradient(rgba(0,0,0,0)_0%,rgba(0,0,0,1)_10%,rgba(0,0,0,1)_20%,rgba(0,0,0,0)_30%)]" />
+				<div className="absolute inset-0 backdrop-blur-[2px] [mask:linear-gradient(rgba(0,0,0,0)_10%,rgba(0,0,0,1)_20%,rgba(0,0,0,1)_40%,rgba(0,0,0,0)_50%)]" />
+				<div className="absolute inset-0 backdrop-blur-[4px] [mask:linear-gradient(rgba(0,0,0,0)_20%,rgba(0,0,0,1)_30%,rgba(0,0,0,1)_50%,rgba(0,0,0,0)_60%)]" />
+				<div className="absolute inset-0 backdrop-blur-[8px] [mask:linear-gradient(rgba(0,0,0,0)_30%,rgba(0,0,0,1)_40%,rgba(0,0,0,1)_60%,rgba(0,0,0,0)_70%)]" />
+				<div className="absolute inset-0 backdrop-blur-[16px] [mask:linear-gradient(rgba(0,0,0,0)_40%,rgba(0,0,0,1)_50%,rgba(0,0,0,1)_70%,rgba(0,0,0,0)_80%)]" />
+				<div className="absolute inset-0 backdrop-blur-[32px] [mask:linear-gradient(rgba(0,0,0,0)_50%,rgba(0,0,0,1)_60%,rgba(0,0,0,1)_80%,rgba(0,0,0,0)_90%)]" />
+				<div className="absolute inset-0 backdrop-blur-[64px] [mask:linear-gradient(rgba(0,0,0,0)_70%,rgba(0,0,0,1)_80%,rgba(0,0,0,1)_100%)]" />
+				<div className="absolute inset-0 bg-linear-to-t from-stone-50 dark:from-stone-900 to-transparent" />
+			</div>
+		)
+	}
+
+	return (
+		<div className={`pointer-events-none ${className ?? ""}`}>
+			<div className="absolute inset-0 backdrop-blur-[64px] [mask:linear-gradient(rgba(0,0,0,1)_0%,rgba(0,0,0,1)_20%,rgba(0,0,0,0)_30%)]" />
+			<div className="absolute inset-0 backdrop-blur-[32px] [mask:linear-gradient(rgba(0,0,0,0)_10%,rgba(0,0,0,1)_20%,rgba(0,0,0,1)_40%,rgba(0,0,0,0)_50%)]" />
+			<div className="absolute inset-0 backdrop-blur-[16px] [mask:linear-gradient(rgba(0,0,0,0)_20%,rgba(0,0,0,1)_30%,rgba(0,0,0,1)_50%,rgba(0,0,0,0)_60%)]" />
+			<div className="absolute inset-0 backdrop-blur-[8px] [mask:linear-gradient(rgba(0,0,0,0)_30%,rgba(0,0,0,1)_40%,rgba(0,0,0,1)_60%,rgba(0,0,0,0)_70%)]" />
+			<div className="absolute inset-0 backdrop-blur-[4px] [mask:linear-gradient(rgba(0,0,0,0)_40%,rgba(0,0,0,1)_50%,rgba(0,0,0,1)_70%,rgba(0,0,0,0)_80%)]" />
+			<div className="absolute inset-0 backdrop-blur-[2px] [mask:linear-gradient(rgba(0,0,0,0)_50%,rgba(0,0,0,1)_60%,rgba(0,0,0,1)_80%,rgba(0,0,0,0)_90%)]" />
+			<div className="absolute inset-0 backdrop-blur-[1px] [mask:linear-gradient(rgba(0,0,0,0)_70%,rgba(0,0,0,1)_80%,rgba(0,0,0,1)_90%,rgba(0,0,0,0)_100%)]" />
+			<div className="absolute inset-0 bg-linear-to-b from-stone-50 dark:from-stone-900 to-transparent" />
+		</div>
+	)
+}

apps/waitlist-website/app/hooks/use-color-scheme.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react"
+
+export const ColorScheme = {
+	Light: "light",
+	Dark: "dark",
+} as const
+export type ColorScheme = (typeof ColorScheme)[keyof typeof ColorScheme]
+
+export function useColorScheme(): ColorScheme {
+	const [scheme, setScheme] = useState<ColorScheme>(() => {
+		if (typeof window === "undefined") return ColorScheme.Light
+		return window.matchMedia("(prefers-color-scheme: dark)").matches
+			? ColorScheme.Dark
+			: ColorScheme.Light
+	})
+
+	useEffect(() => {
+		const mql = window.matchMedia("(prefers-color-scheme: dark)")
+		const handler = (e: MediaQueryListEvent) => {
+			setScheme(e.matches ? ColorScheme.Dark : ColorScheme.Light)
+		}
+		mql.addEventListener("change", handler)
+		return () => mql.removeEventListener("change", handler)
+	}, [])
+
+	return scheme
+}

apps/waitlist-website/app/lottie/clicked-dark.json

@@ -0,0 +1 @@
+{"fr":60,"h":400,"ip":0,"layers":[{"ind":3,"ty":4,"parent":2,"ks":{},"ip":0,"op":7,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,53]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,122]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":0,"k":[160,53]},"s":{"a":0,"k":[320,106]}},{"ty":"st","c":{"a":0,"k":[0.906,0.898,0.894]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":2,"ty":3,"parent":1,"ks":{"a":{"a":0,"k":[160,53]},"p":{"a":0,"k":[200.5,200]},"r":{"a":1,"k":[{"t":0,"s":[-30],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":6,"s":[-10],"h":1}]}},"ip":0,"op":7,"st":0},{"ind":5,"ty":4,"parent":4,"ks":{},"ip":0,"op":7,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,53]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,122]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":0,"k":[160,53]},"s":{"a":0,"k":[320,106]}},{"ty":"st","c":{"a":0,"k":[0.906,0.898,0.894]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":4,"ty":3,"parent":1,"ks":{"a":{"a":0,"k":[160,53]},"p":{"a":0,"k":[200.594,200.176]},"r":{"a":1,"k":[{"t":0,"s":[30],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":6,"s":[10],"h":1}]}},"ip":0,"op":7,"st":0},{"ind":1,"ty":3,"parent":0,"ks":{},"ip":0,"op":7,"st":0},{"ind":0,"ty":3,"ks":{},"ip":0,"op":7,"st":0}],"meta":{"g":"https://jitter.video"},"op":6,"v":"5.7.4","w":400}

apps/waitlist-website/app/lottie/clicked-light.json

@@ -0,0 +1 @@
+{"fr":60,"h":400,"ip":0,"layers":[{"ind":3,"ty":4,"parent":2,"ks":{},"ip":0,"op":7,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,53]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,122]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":0,"k":[160,53]},"s":{"a":0,"k":[320,106]}},{"ty":"st","c":{"a":0,"k":[0.11,0.098,0.09]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":2,"ty":3,"parent":1,"ks":{"a":{"a":0,"k":[160,53]},"p":{"a":0,"k":[200.5,200]},"r":{"a":1,"k":[{"t":0,"s":[-30],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":6,"s":[-10],"h":1}]}},"ip":0,"op":7,"st":0},{"ind":5,"ty":4,"parent":4,"ks":{},"ip":0,"op":7,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,53]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,122]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":0,"k":[160,53]},"s":{"a":0,"k":[320,106]}},{"ty":"st","c":{"a":0,"k":[0.11,0.098,0.09]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":4,"ty":3,"parent":1,"ks":{"a":{"a":0,"k":[160,53]},"p":{"a":0,"k":[200.594,200.176]},"r":{"a":1,"k":[{"t":0,"s":[30],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":6,"s":[10],"h":1}]}},"ip":0,"op":7,"st":0},{"ind":1,"ty":3,"parent":0,"ks":{},"ip":0,"op":7,"st":0},{"ind":0,"ty":3,"ks":{},"ip":0,"op":7,"st":0}],"meta":{"g":"https://jitter.video"},"op":6,"v":"5.7.4","w":400}

apps/waitlist-website/app/lottie/loading-dark.json

@@ -0,0 +1 @@
+{"fr":60,"h":400,"ip":0,"layers":[{"ind":3,"ty":4,"parent":2,"ks":{},"ip":0,"op":61,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,26.75]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,174.5]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":1,"k":[{"t":0,"s":[160,0.5],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":8.4,"s":[160,0.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[160,53],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":37.8,"s":[160,53],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[160,0.5],"h":1}]},"s":{"a":1,"k":[{"t":0,"s":[320,1],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":8.4,"s":[320,1],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[320,106],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":37.8,"s":[320,106],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[320,1],"h":1}]}},{"ty":"st","c":{"a":0,"k":[0.906,0.898,0.894]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":2,"ty":3,"parent":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[160,0.5],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":8.4,"s":[160,0.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[160,53],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":37.8,"s":[160,53],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[160,0.5],"h":1}]},"p":{"a":0,"k":[200,200.014]},"r":{"a":1,"k":[{"t":0,"s":[-90],"h":1},{"t":8.4,"s":[-90],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":30,"s":[0],"h":1},{"t":37.8,"s":[0],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":60,"s":[90],"h":1}]}},"ip":0,"op":61,"st":0},{"ind":5,"ty":4,"parent":4,"ks":{},"ip":0,"op":61,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,26.75]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,174.5]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":1,"k":[{"t":0,"s":[160,0.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[160,53],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[160,0.5],"h":1}]},"s":{"a":1,"k":[{"t":0,"s":[320,1],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[320,106],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[320,1],"h":1}]}},{"ty":"st","c":{"a":0,"k":[0.906,0.898,0.894]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":4,"ty":3,"parent":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[160,0.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[160,53],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[160,0.5],"h":1}]},"p":{"a":0,"k":[200.094,200.19]},"r":{"a":1,"k":[{"t":0,"s":[-90],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":30,"s":[0],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":60,"s":[90],"h":1}]}},"ip":0,"op":61,"st":0},{"ind":1,"ty":3,"parent":0,"ks":{},"ip":0,"op":61,"st":0},{"ind":0,"ty":3,"ks":{},"ip":0,"op":61,"st":0}],"meta":{"g":"https://jitter.video"},"op":60,"v":"5.7.4","w":400}

apps/waitlist-website/app/lottie/loading-light.json

@@ -0,0 +1 @@
+{"fr":60,"h":400,"ip":0,"layers":[{"ind":3,"ty":4,"parent":2,"ks":{},"ip":0,"op":61,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,26.75]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,174.5]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":1,"k":[{"t":0,"s":[160,0.5],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":8.4,"s":[160,0.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[160,53],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":37.8,"s":[160,53],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[160,0.5],"h":1}]},"s":{"a":1,"k":[{"t":0,"s":[320,1],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":8.4,"s":[320,1],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[320,106],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":37.8,"s":[320,106],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[320,1],"h":1}]}},{"ty":"st","c":{"a":0,"k":[0.11,0.098,0.09]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":2,"ty":3,"parent":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[160,0.5],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":8.4,"s":[160,0.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[160,53],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":37.8,"s":[160,53],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[160,0.5],"h":1}]},"p":{"a":0,"k":[200,200.014]},"r":{"a":1,"k":[{"t":0,"s":[-90],"h":1},{"t":8.4,"s":[-90],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":30,"s":[0],"h":1},{"t":37.8,"s":[0],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":60,"s":[90],"h":1}]}},"ip":0,"op":61,"st":0},{"ind":5,"ty":4,"parent":4,"ks":{},"ip":0,"op":61,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,26.75]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,174.5]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":1,"k":[{"t":0,"s":[160,0.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[160,53],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[160,0.5],"h":1}]},"s":{"a":1,"k":[{"t":0,"s":[320,1],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[320,106],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[320,1],"h":1}]}},{"ty":"st","c":{"a":0,"k":[0.11,0.098,0.09]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":4,"ty":3,"parent":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[160,0.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":30,"s":[160,53],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":60,"s":[160,0.5],"h":1}]},"p":{"a":0,"k":[200.094,200.19]},"r":{"a":1,"k":[{"t":0,"s":[-90],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":30,"s":[0],"i":{"x":0,"y":1},"o":{"x":0.5,"y":0}},{"t":60,"s":[90],"h":1}]}},"ip":0,"op":61,"st":0},{"ind":1,"ty":3,"parent":0,"ks":{},"ip":0,"op":61,"st":0},{"ind":0,"ty":3,"ks":{},"ip":0,"op":61,"st":0}],"meta":{"g":"https://jitter.video"},"op":60,"v":"5.7.4","w":400}

apps/waitlist-website/app/lottie/start-loading-dark.json

@@ -0,0 +1 @@
+{"fr":60,"h":400,"ip":0,"layers":[{"ind":3,"ty":4,"parent":2,"ks":{},"ip":0,"op":31,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,26.75]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,174.5]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":1,"k":[{"t":0,"s":[160,53],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":5.28,"s":[160,53],"i":{"x":[1,0.001],"y":[1,0.998]},"o":{"x":[0,0.349],"y":[0,0]}},{"t":30,"s":[160,0.5],"h":1}]},"s":{"a":1,"k":[{"t":0,"s":[320,106],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":5.28,"s":[320,106],"i":{"x":[1,0.001],"y":[1,0.998]},"o":{"x":[0,0.349],"y":[0,0]}},{"t":30,"s":[320,1],"h":1}]}},{"ty":"st","c":{"a":0,"k":[0.906,0.898,0.894]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":2,"ty":3,"parent":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[160,53],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":5.28,"s":[160,53],"i":{"x":[1,0.001],"y":[1,0.998]},"o":{"x":[0,0.349],"y":[0,0]}},{"t":30,"s":[160,0.5],"h":1}]},"p":{"a":0,"k":[200.5,200]},"r":{"a":1,"k":[{"t":0,"s":[-30],"h":1},{"t":5.28,"s":[-30],"i":{"x":0.001,"y":0.998},"o":{"x":0.349,"y":0}},{"t":30,"s":[-90],"h":1}]}},"ip":0,"op":31,"st":0},{"ind":5,"ty":4,"parent":4,"ks":{},"ip":0,"op":31,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,26.75]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,174.5]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":1,"k":[{"t":0,"s":[160,53],"i":{"x":[1,0],"y":[1,0.999]},"o":{"x":[0,0.348],"y":[0,0]}},{"t":30,"s":[160,0.5],"h":1}]},"s":{"a":1,"k":[{"t":0,"s":[320,106],"i":{"x":[1,0],"y":[1,0.999]},"o":{"x":[0,0.348],"y":[0,0]}},{"t":30,"s":[320,1],"h":1}]}},{"ty":"st","c":{"a":0,"k":[0.906,0.898,0.894]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":4,"ty":3,"parent":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[160,53],"i":{"x":[1,0],"y":[1,0.999]},"o":{"x":[0,0.348],"y":[0,0]}},{"t":30,"s":[160,0.5],"h":1}]},"p":{"a":0,"k":[200.594,200.176]},"r":{"a":1,"k":[{"t":0,"s":[30],"i":{"x":0,"y":0.999},"o":{"x":0.348,"y":0}},{"t":30,"s":[90],"h":1}]}},"ip":0,"op":31,"st":0},{"ind":1,"ty":3,"parent":0,"ks":{},"ip":0,"op":31,"st":0},{"ind":0,"ty":3,"ks":{},"ip":0,"op":31,"st":0}],"meta":{"g":"https://jitter.video"},"op":30,"v":"5.7.4","w":400}

apps/waitlist-website/app/lottie/start-loading-light.json

@@ -0,0 +1 @@
+{"fr":60,"h":400,"ip":0,"layers":[{"ind":3,"ty":4,"parent":2,"ks":{},"ip":0,"op":31,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,26.75]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,174.5]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":1,"k":[{"t":0,"s":[160,53],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":5.28,"s":[160,53],"i":{"x":[1,0.001],"y":[1,0.998]},"o":{"x":[0,0.349],"y":[0,0]}},{"t":30,"s":[160,0.5],"h":1}]},"s":{"a":1,"k":[{"t":0,"s":[320,106],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":5.28,"s":[320,106],"i":{"x":[1,0.001],"y":[1,0.998]},"o":{"x":[0,0.349],"y":[0,0]}},{"t":30,"s":[320,1],"h":1}]}},{"ty":"st","c":{"a":0,"k":[0.11,0.098,0.09]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":2,"ty":3,"parent":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[160,53],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":5.28,"s":[160,53],"i":{"x":[1,0.001],"y":[1,0.998]},"o":{"x":[0,0.349],"y":[0,0]}},{"t":30,"s":[160,0.5],"h":1}]},"p":{"a":0,"k":[200.5,200]},"r":{"a":1,"k":[{"t":0,"s":[-30],"h":1},{"t":5.28,"s":[-30],"i":{"x":0.001,"y":0.998},"o":{"x":0.349,"y":0}},{"t":30,"s":[-90],"h":1}]}},"ip":0,"op":31,"st":0},{"ind":5,"ty":4,"parent":4,"ks":{},"ip":0,"op":31,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[160,26.75]},"r":{"a":0,"k":0},"s":{"a":0,"k":[336,174.5]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"gr","it":[{"ty":"el","p":{"a":1,"k":[{"t":0,"s":[160,53],"i":{"x":[1,0],"y":[1,0.999]},"o":{"x":[0,0.348],"y":[0,0]}},{"t":30,"s":[160,0.5],"h":1}]},"s":{"a":1,"k":[{"t":0,"s":[320,106],"i":{"x":[1,0],"y":[1,0.999]},"o":{"x":[0,0.348],"y":[0,0]}},{"t":30,"s":[320,1],"h":1}]}},{"ty":"st","c":{"a":0,"k":[0.11,0.098,0.09]},"lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":16}},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ind":4,"ty":3,"parent":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[160,53],"i":{"x":[1,0],"y":[1,0.999]},"o":{"x":[0,0.348],"y":[0,0]}},{"t":30,"s":[160,0.5],"h":1}]},"p":{"a":0,"k":[200.594,200.176]},"r":{"a":1,"k":[{"t":0,"s":[30],"i":{"x":0,"y":0.999},"o":{"x":0.348,"y":0}},{"t":30,"s":[90],"h":1}]}},"ip":0,"op":31,"st":0},{"ind":1,"ty":3,"parent":0,"ks":{},"ip":0,"op":31,"st":0},{"ind":0,"ty":3,"ks":{},"ip":0,"op":31,"st":0}],"meta":{"g":"https://jitter.video"},"op":30,"v":"5.7.4","w":400}

apps/waitlist-website/app/root.tsx

@@ -0,0 +1,88 @@
+import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router"
+
+import type { Route } from "./+types/root"
+
+import "./app.css"
+import "streamdown/styles.css"
+
+export const links: Route.LinksFunction = () => [
+	{ rel: "preconnect", href: "https://fonts.googleapis.com" },
+	{
+		rel: "preconnect",
+		href: "https://fonts.gstatic.com",
+		crossOrigin: "anonymous",
+	},
+	{
+		rel: "stylesheet",
+		href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+	},
+	{
+		rel: "icon",
+		href: "/favicon-light.svg",
+		type: "image/svg+xml",
+		media: "(prefers-color-scheme: light)",
+	},
+	{
+		rel: "icon",
+		href: "/favicon-dark.svg",
+		type: "image/svg+xml",
+		media: "(prefers-color-scheme: dark)",
+	},
+	{
+		rel: "icon",
+		href: "/favicon.ico",
+		sizes: "any",
+	},
+]
+
+export function Layout({ children }: { children: React.ReactNode }) {
+	return (
+		<html lang="en">
+			<head>
+				<meta charSet="utf-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<Meta />
+				<Links />
+			</head>
+			<body>
+				{children}
+				<ScrollRestoration />
+				<Scripts />
+			</body>
+		</html>
+	)
+}
+
+export default function App() {
+	return <Outlet />
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+	let message = "Oops!"
+	let details = "An unexpected error occurred."
+	let stack: string | undefined
+
+	if (isRouteErrorResponse(error)) {
+		message = error.status === 404 ? "404" : "Error"
+		details =
+			error.status === 404 ? "The requested page could not be found." : error.statusText || details
+	} else if (import.meta.env.DEV && error && error instanceof Error) {
+		details = error.message
+		stack = error.stack
+	}
+
+	return (
+		<main className="flex flex-col items-center justify-center w-full h-full gap-4">
+			<h1 className="text-6xl font-semibold">{message}</h1>
+			<p className="text-stone-600 dark:text-stone-400">{details}</p>
+			<a href="/" className="mt-4 text-sm underline opacity-50 hover:opacity-75">
+				Back to home
+			</a>
+			{stack && (
+				<pre className="mt-8 w-full max-w-2xl p-4 overflow-x-auto text-xs bg-stone-100 dark:bg-stone-800 rounded-lg">
+					<code>{stack}</code>
+				</pre>
+			)}
+		</main>
+	)
+}

apps/waitlist-website/app/routes.ts

@@ -0,0 +1,6 @@
+import { type RouteConfig, index, route } from "@react-router/dev/routes"
+
+export default [
+	index("routes/home.tsx"),
+	route("privacy", "routes/privacy-policy.tsx"),
+] satisfies RouteConfig

apps/waitlist-website/app/routes/home.tsx

@@ -0,0 +1,395 @@
+import { AnimatePresence, motion } from "motion/react"
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react"
+import { Link, useFetcher } from "react-router"
+import { Resend } from "resend"
+import { Streamdown } from "streamdown"
+
+import { ChatBox } from "~/chat/chat-box"
+import {
+	duplicateEmailMessage,
+	INITIAL_MESSAGES,
+	troubleMessage,
+	waitListJoinedMessage,
+	type Message,
+	type SystemMessage,
+	type UserMessage,
+} from "~/chat/message"
+import { useFakeStreaming } from "~/chat/use-fake-streaming"
+import {
+	AnimatedLogo,
+	AnimatedLogoState,
+	AnimatedLogoState as TAnimatedLogoState,
+} from "~/components/animated-logo"
+import { ProgressiveBlur } from "~/components/progressive-blur"
+
+import type { Route } from "./+types/home"
+
+const PAGE_TITLE = "Aelis - Next Generation AI Assistant"
+const PAGE_DESCRIPTION =
+	"Meet Aelis, a personal assistant that stays one step ahead of your day. Join the waitlist now."
+
+export function meta({}: Route.MetaArgs) {
+	return [
+		{ title: PAGE_TITLE },
+		{
+			name: "description",
+			content: PAGE_DESCRIPTION,
+		},
+		{ property: "og:title", content: PAGE_TITLE },
+		{ property: "og:description", content: PAGE_DESCRIPTION },
+		{ property: "og:image", content: "https://ael.is/social-media-preview.png" },
+		{ property: "og:url", content: "https://ael.is" },
+		{ property: "og:type", content: "website" },
+		{ name: "twitter:card", content: "summary_large_image" },
+		{ name: "twitter:title", content: PAGE_TITLE },
+		{ name: "twitter:description", content: PAGE_DESCRIPTION },
+		{ name: "twitter:image", content: "https://ael.is/social-media-preview.png" },
+	]
+}
+
+const FormError = {
+	Duplicate: "duplicate",
+	Resend: "resend",
+} as const
+
+export async function action({ request }: Route.ActionArgs) {
+	const formData = await request.formData()
+	const email = formData.get("email")
+
+	if (typeof email !== "string" || !isValidEmail(email)) {
+		return { error: "Invalid email" }
+	}
+
+	const resend = new Resend(process.env.RESEND_API_KEY)
+
+	const segmentId = "b80fb036-74a1-4f7d-bca5-2c035b696071"
+
+	const dup = await resend.contacts.get({
+		email,
+	})
+	if (dup.data) {
+		return { error: FormError.Duplicate }
+	}
+
+	const res = await resend.contacts.create({
+		email,
+		segments: [{ id: segmentId }],
+	})
+
+	if (res.error) {
+		console.log("Error adding contact to Resend:", res.error)
+		return { error: FormError.Resend, message: res.error.message }
+	}
+
+	await new Promise((resolve) => setTimeout(resolve, 1000))
+
+	const emailRes = await resend.emails.send({
+		from: "Aelis <no-reply@ael.is>",
+		to: email,
+		template: {
+			id: "waitlist-confirmation",
+		},
+	})
+
+	if (emailRes.error) {
+		// swallow the error since the user is already added to the waitlist, but log it for debugging
+		console.log("Error sending confirmation email:", emailRes.error)
+	}
+
+	return { email }
+}
+
+export default function Home() {
+	const [messages, setMessages] = useState<Message[]>(INITIAL_MESSAGES)
+	const [emailSent, setEmailSent] = useState("")
+	const [isAnimatingSend, setIsAnimatingSend] = useState(false)
+	const [logoState, setLogoState] = useState<TAnimatedLogoState>(AnimatedLogoState.Idle)
+	const chatBoxRef = useRef<HTMLDivElement>(null)
+	const fetcher = useFetcher()
+
+	useEffect(() => {
+		if (fetcher.data?.email && !isAnimatingSend) {
+			setMessages((messages) => [...messages, waitListJoinedMessage(fetcher.data.email)])
+		} else if (fetcher.data?.error) {
+			if (!isAnimatingSend) {
+				let errorMessage: SystemMessage
+				switch (fetcher.data.error) {
+					case FormError.Duplicate:
+						errorMessage = duplicateEmailMessage()
+						break
+					default: {
+						console.error(fetcher.data.error)
+						errorMessage = troubleMessage()
+						break
+					}
+				}
+				setMessages((messages) => [...messages, errorMessage])
+			}
+		}
+	}, [fetcher.data?.email, fetcher.data?.error, isAnimatingSend])
+
+	const insertEmailMessage = (email: string) => {
+		setEmailSent(email)
+		setIsAnimatingSend(true)
+		setLogoState(AnimatedLogoState.Loading)
+		setMessages((messages) => [
+			...messages,
+			{
+				role: "user",
+				message: email,
+				bubbleLayoutId: "test",
+			},
+		])
+
+		fetcher.submit({ email }, { method: "post" })
+	}
+
+	let chatBox: React.ReactNode
+	if (emailSent && isAnimatingSend) {
+		const chatBoxRect = chatBoxRef.current?.getBoundingClientRect()
+		const mainRect = chatBoxRef.current?.offsetParent?.getBoundingClientRect()
+		chatBox = (
+			<MorphingChatBox
+				chatBoxWidth={chatBoxRef.current?.offsetWidth ?? 0}
+				chatBoxHeight={chatBoxRef.current?.offsetHeight ?? 0}
+				chatBoxLeft={(chatBoxRect?.left ?? 0) - (mainRect?.left ?? 0)}
+				chatBoxTop={(chatBoxRect?.top ?? 0) - (mainRect?.top ?? 0)}
+				onAnimationEnd={() => {
+					setIsAnimatingSend(false)
+				}}
+			>
+				{emailSent}
+			</MorphingChatBox>
+		)
+	} else if (!emailSent) {
+		chatBox = (
+			<AnimatePresence>
+				{logoState === AnimatedLogoState.Idle && !emailSent && (
+					<motion.div
+						ref={chatBoxRef}
+						key="test"
+						className="w-full max-w-2xl absolute bottom-12 px-6 md:px-0 flex justify-center z-20"
+						initial={{ y: 100, opacity: 0 }}
+						animate={{ y: 0, opacity: 1 }}
+						transition={{ type: "spring", stiffness: 300, damping: 30, mass: 1.5 }}
+					>
+						<ChatBox
+							className="w-full max-w-2xl"
+							validate={isValidEmail}
+							disabled={fetcher.state === "submitting" || fetcher.state === "loading"}
+							onSubmit={insertEmailMessage}
+						/>
+					</motion.div>
+				)}
+			</AnimatePresence>
+		)
+	} else {
+		chatBox = null
+	}
+
+	return (
+		<main className="relative w-full h-full flex flex-col items-center justify-start gap-4 overflow-hidden">
+			<ProgressiveBlur className="absolute top-0 left-0 right-0 h-24 z-10" />
+			<AnimatedLogo
+				className="absolute top-4 md:top-8 size-10 z-20 cursor-pointer"
+				state={logoState}
+			/>
+			<MessageList
+				messages={messages}
+				showLastMessage={!isAnimatingSend}
+				onMessageStreamStart={() => {
+					setLogoState(AnimatedLogoState.Loading)
+				}}
+				onMessageStreamEnd={() => {
+					setLogoState(AnimatedLogoState.Idle)
+				}}
+			/>
+			{chatBox}
+			<ProgressiveBlur
+				direction="up"
+				className="absolute bottom-0 left-0 right-0 h-24 z-10 pointer-events-none"
+			/>
+			<footer className="absolute bottom-4 z-20">
+				<Link to="/privacy" className="text-xs opacity-50 underline">
+					Privacy policy
+				</Link>
+			</footer>
+		</main>
+	)
+}
+
+function MorphingChatBox({
+	chatBoxWidth,
+	chatBoxHeight,
+	chatBoxLeft,
+	chatBoxTop,
+	onAnimationEnd,
+	children,
+}: React.PropsWithChildren<{
+	chatBoxWidth: number
+	chatBoxHeight: number
+	chatBoxLeft: number
+	chatBoxTop: number
+	onAnimationEnd: () => void
+}>) {
+	const [targetWidth, setTargetWidth] = useState(-1)
+	const [targetHeight, setTargetHeight] = useState(-1)
+	const [targetCoords, setTargetCoords] = useState([0, 0])
+
+	useLayoutEffect(() => {
+		const bubble = document.getElementById("test")
+		if (bubble) {
+			const mainRect = bubble.closest("main")?.getBoundingClientRect()
+			const rect = bubble.getBoundingClientRect()
+			setTargetWidth(bubble.offsetWidth)
+			setTargetHeight(bubble.offsetHeight)
+			setTargetCoords([rect.left - (mainRect?.left ?? 0), rect.top - (mainRect?.top ?? 0)])
+		}
+	}, [])
+
+	if (targetWidth < 0 || targetHeight < 0) {
+		return null
+	}
+
+	return (
+		<motion.div
+			className="absolute rounded-lg bg-stone-100 dark:bg-stone-800 px-4 py-2 border border-stone-200 dark:border-stone-700"
+			initial={{
+				width: chatBoxWidth,
+				height: chatBoxHeight,
+				borderRadius: 8,
+				left: chatBoxLeft,
+				top: chatBoxTop,
+			}}
+			animate={{
+				width: targetWidth,
+				height: targetHeight,
+				borderTopLeftRadius: 100,
+				borderTopRightRadius: 100,
+				borderBottomRightRadius: 24,
+				borderBottomLeftRadius: 100,
+				left: targetCoords[0],
+				top: targetCoords[1],
+			}}
+			transition={{
+				left: { duration: 0.45, ease: [0.05, 0.8, 0.3, 1] },
+				top: { duration: 0.45, ease: [0.3, 0, 0.2, 1] },
+				width: { duration: 0.45, ease: [0.05, 0.8, 0.3, 1] },
+				height: { duration: 0.45, ease: [0.05, 0.8, 0.3, 1] },
+			}}
+			onAnimationComplete={onAnimationEnd}
+		>
+			{children}
+		</motion.div>
+	)
+}
+
+function MessageList({
+	messages,
+	showLastMessage,
+	onMessageStreamStart,
+	onMessageStreamEnd,
+}: {
+	messages: Message[]
+	showLastMessage: boolean
+	onMessageStreamStart: () => void
+	onMessageStreamEnd: () => void
+}) {
+	return (
+		<ul className="w-full flex flex-col gap-8 overflow-auto px-6 pt-20 md:px-0 md:pt-24 pb-34">
+			{messages.map((message, index) => (
+				<li
+					key={index}
+					className={`flex justify-center ${index === messages.length - 1 && !showLastMessage ? "invisible" : ""}`}
+				>
+					<MessageContent
+						message={message}
+						onMessageStreamStart={onMessageStreamStart}
+						onMessageStreamEnd={onMessageStreamEnd}
+					/>
+				</li>
+			))}
+		</ul>
+	)
+}
+
+function MessageContent({
+	message,
+	onMessageStreamStart,
+	onMessageStreamEnd,
+}: {
+	message: Message
+	onMessageStreamStart: () => void
+	onMessageStreamEnd: () => void
+}) {
+	switch (message.role) {
+		case "user":
+			return <UserMessageBubble message={message} />
+		case "system":
+			return (
+				<SystemMessageBubble
+					message={message}
+					onStreamStart={onMessageStreamStart}
+					onStreamEnd={onMessageStreamEnd}
+				/>
+			)
+	}
+}
+
+function UserMessageBubble({ message }: { message: UserMessage }) {
+	return (
+		<div className="w-full max-w-2xl flex justify-end">
+			<div
+				id={message.bubbleLayoutId}
+				className="rounded-[100px_100px_24px_100px] bg-stone-100 dark:bg-stone-800 border border-stone-200 dark:border-stone-700 px-4 py-2"
+			>
+				{message.message}
+			</div>
+		</div>
+	)
+}
+
+function SystemMessageBubble({
+	message,
+	onStreamStart,
+	onStreamEnd,
+}: {
+	message: SystemMessage
+	onStreamStart: () => void
+	onStreamEnd: () => void
+}) {
+	const { currentContent, isStreaming } = useFakeStreaming(message.message)
+	const ref = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		ref.current?.scrollIntoView({ behavior: "smooth", block: "end" })
+	}, [currentContent])
+
+	useEffect(() => {
+		if (isStreaming) {
+			onStreamStart()
+		} else {
+			onStreamEnd()
+		}
+	}, [isStreaming])
+
+	return (
+		<div ref={ref} className="w-full max-w-2xl flex justify-start font-serif text-lg scroll-mb-34">
+			<Streamdown
+				animated={{ animation: "slideUp" }}
+				isAnimating={isStreaming}
+				linkSafety={{ enabled: false }}
+				components={{
+					// @ts-expect-error
+					a: ({ className, ...props }) => <a className={`underline ${className}`} {...props} />,
+				}}
+			>
+				{currentContent}
+			</Streamdown>
+		</div>
+	)
+}
+
+function isValidEmail(value: string): boolean {
+	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
+}

apps/waitlist-website/app/routes/privacy-policy.tsx

@@ -0,0 +1,246 @@
+import { Link } from "react-router"
+import { Streamdown } from "streamdown"
+
+import { AnimatedLogo, AnimatedLogoState } from "~/components/animated-logo"
+
+import type { Route } from "./+types/privacy-policy"
+
+export function meta({}: Route.MetaArgs) {
+	return [
+		{ title: "Privacy Policy — Aelis" },
+		{ name: "description", content: "Aelis privacy policy" },
+	]
+}
+
+export default function PrivacyPolicy() {
+	return (
+		<main className="relative max-w-2xl mx-auto px-6 py-16">
+			<Link to="/" className="block w-fit mb-8">
+				<AnimatedLogo className="size-10 pointer-events-none" state={AnimatedLogoState.Idle} />
+			</Link>
+			<Streamdown
+				isAnimating={false}
+				linkSafety={{ enabled: false }}
+				components={{
+					a: ({ className, ...props }) => <a className={`underline ${className}`} {...props} />,
+				}}
+			>
+				{POLICY}
+			</Streamdown>
+			<footer className="mt-16 pt-8 border-t border-stone-200 dark:border-stone-700">
+				<Link to="/" className="text-sm opacity-50 hover:opacity-75 underline">
+					Back to home
+				</Link>
+			</footer>
+		</main>
+	)
+}
+
+const POLICY = `# Privacy Policy
+
+**Last updated:** March 5, 2026
+
+This Privacy Policy describes how **Aelis** ("we", "us", or "our") collects, uses, and protects your personal information when you visit **https://ael.is** or interact with our services.
+
+If you do not agree with this Privacy Policy, please do not use the website.
+
+For any questions, contact: **[kenneth@nym.sh](mailto:kenneth@nym.sh)**
+
+---
+
+## 1. Information We Collect
+
+### Personal Information You Provide
+
+**In Short:** We collect personal information that you provide to us.
+
+We collect personal information that you voluntarily provide when you express interest in our services, contact us, or sign up for the waitlist.
+
+We collect your email address when you sign up for the waitlist so we can notify you when the product launches or provide related updates.
+
+### Personal Information Provided by You
+
+The personal information we collect may include:
+
+* email addresses
+
+You are responsible for ensuring the personal information you provide is accurate and up to date.
+
+### Sensitive Information
+
+We **do not collect or process sensitive personal information**.
+
+### Information From Third Parties
+
+We **do not collect personal information from third parties**.
+
+---
+
+## 2. How We Use Your Information
+
+We process your information for the following purposes:
+
+* To operate and maintain our services
+* To communicate with you about product updates and launch announcements
+* To send administrative information such as policy updates
+* To prevent fraud or abuse
+* To comply with legal obligations
+* To protect someone’s safety when necessary
+
+We only process personal information when we have a valid legal reason to do so.
+
+---
+
+## 3. Legal Bases for Processing (EU / UK)
+
+If you are located in the European Economic Area (EEA) or the United Kingdom, we rely on the following legal bases to process personal information:
+
+### Consent
+
+You have given permission for us to process your personal information for a specific purpose.
+
+### Contract
+
+Processing is necessary to provide services you requested.
+
+### Legal Obligations
+
+Processing is required to comply with applicable laws.
+
+### Vital Interests
+
+Processing is necessary to protect someone's safety.
+
+You may withdraw consent at any time by contacting us.
+
+---
+
+## 4. When and With Whom We Share Personal Information
+
+We may share your personal information in limited situations.
+
+### Service Providers
+
+We may share information with trusted service providers that help us operate our website or manage communications.
+
+### Business Transfers
+
+We may transfer information during negotiations of a merger, sale of assets, financing, or acquisition of our business.
+
+We **do not sell your personal information**.
+
+---
+
+## 5. How Long We Keep Your Information
+
+We retain personal information only as long as necessary to:
+
+* provide services
+* comply with legal obligations
+* resolve disputes
+* enforce agreements
+
+When we no longer need personal information, we delete or anonymize it where possible.
+
+---
+
+## 6. How We Keep Your Information Safe
+
+We implement reasonable technical and organizational safeguards designed to protect personal information.
+
+However, no electronic transmission or storage system is completely secure. We cannot guarantee absolute security.
+
+---
+
+## 7. Information From Minors
+
+Our services are **not intended for individuals under 18 years old**.
+
+We do not knowingly collect personal information from children. If we discover that we have collected such information, we will delete it.
+
+If you believe a child has provided personal information, contact **[kenneth@nym.sh](mailto:kenneth@nym.sh)**.
+
+---
+
+## 8. Your Privacy Rights
+
+Depending on your location, you may have rights regarding your personal information, including:
+
+* the right to access your data
+* the right to correct inaccurate data
+* the right to delete your data
+* the right to restrict processing
+* the right to data portability
+* the right to object to processing
+* the right to withdraw consent
+
+To exercise these rights, submit a request:
+
+https://app.termly.io/dsar/b8633d03-406f-4133-b16e-ded63e893997
+
+Or contact us at **[kenneth@nym.sh](mailto:kenneth@nym.sh)**.
+
+---
+
+## 9. Do Not Track (DNT)
+
+Many browsers include a **Do Not Track (DNT)** feature.
+
+Because there is currently no consistent standard for responding to DNT signals, we do not respond to them.
+
+---
+
+## 10. Global Privacy Control
+
+We recognize **Global Privacy Control (GPC)** signals.
+
+If your browser sends a GPC signal, we treat it as a request to opt out of the sale or sharing of personal information where applicable.
+
+More information: https://globalprivacycontrol.org
+
+---
+
+## 11. Privacy Rights in Other Regions
+
+Additional privacy rights may apply depending on your location, including:
+
+* European Economic Area (EEA)
+* United Kingdom
+* Switzerland
+* Canada
+* United States
+* Australia
+* New Zealand
+
+If you believe we are processing your personal information unlawfully, you may contact your local data protection authority.
+
+---
+
+## 12. Updates to This Privacy Policy
+
+We may update this Privacy Policy from time to time.
+
+When we do, we will update the **Last updated** date at the top of this document.
+
+We encourage users to review this Privacy Policy regularly.
+
+---
+
+## 13. Contact Information
+
+If you have questions or comments about this Privacy Policy, you may contact us:
+
+**Aelis**
+
+Email: **[kenneth@nym.sh](mailto:kenneth@nym.sh)**
+
+---
+
+## 14. Request Access, Update, or Deletion
+
+Depending on applicable law, you may request access to, correction of, or deletion of your personal information.
+
+Email:
+
+**[kenneth@nym.sh](mailto:kenneth@nym.sh)**
+`

apps/waitlist-website/fly.toml

@@ -0,0 +1,22 @@
+# fly.toml app configuration file generated for aelis-waitlist-website on 2026-03-08T01:11:12Z
+#
+# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
+#
+
+app = 'aelis-waitlist-website'
+primary_region = 'lhr'
+
+[build]
+
+[http_service]
+  internal_port = 3000
+  force_https = true
+  auto_stop_machines = 'stop'
+  auto_start_machines = true
+  min_machines_running = 0
+  processes = ['app']
+
+[[vm]]
+  memory = '1gb'
+  cpus = 1
+  memory_mb = 1024

apps/waitlist-website/package.json

@@ -0,0 +1,37 @@
+{
+	"name": "waitlist-website",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "react-router build",
+		"dev": "react-router dev",
+		"start": "react-router-serve ./build/server/index.js",
+		"typecheck": "react-router typegen && tsc"
+	},
+	"dependencies": {
+		"@react-router/node": "7.12.0",
+		"@react-router/serve": "7.12.0",
+		"clsx": "^2.1.1",
+		"isbot": "^5.1.31",
+		"lottie-react": "^2.4.1",
+		"lucide-react": "^0.577.0",
+		"motion": "^12.35.0",
+		"react": "^19.2.4",
+		"react-aria-components": "^1.16.0",
+		"react-dom": "^19.2.4",
+		"react-router": "7.12.0",
+		"resend": "^6.9.3",
+		"streamdown": "^2.4.0"
+	},
+	"devDependencies": {
+		"@react-router/dev": "7.12.0",
+		"@tailwindcss/vite": "^4.1.13",
+		"@types/node": "^22",
+		"@types/react": "^19.2.7",
+		"@types/react-dom": "^19.2.3",
+		"tailwindcss": "^4.1.13",
+		"typescript": "^5.9.2",
+		"vite": "^7.1.7",
+		"vite-tsconfig-paths": "^5.1.4"
+	}
+}

apps/waitlist-website/public/favicon-dark.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1667 1667" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><rect id="dark" x="0" y="0" width="1666.67" height="1666.67" style="fill:none;"/><path d="M943.75,642.086c318.648,183.972 527.874,419.028 466.934,524.581c-60.941,105.552 -369.119,41.885 -687.767,-142.086c-318.649,-183.972 -527.875,-419.029 -466.934,-524.581c60.941,-105.552 369.119,-41.886 687.767,142.086Z" style="fill:none;stroke:#e7e5e4;stroke-width:62.5px;"/><path d="M722.917,642.086c318.648,-183.972 626.826,-247.638 687.767,-142.086c60.94,105.552 -148.286,340.609 -466.934,524.581c-318.648,183.971 -626.826,247.638 -687.767,142.086c-60.941,-105.553 148.285,-340.609 466.934,-524.581Z" style="fill:none;stroke:#e7e5e4;stroke-width:62.5px;"/></svg>

apps/waitlist-website/public/favicon-light.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1667 1667" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><rect id="light" x="0" y="0" width="1666.67" height="1666.67" style="fill:none;"/><g id="light1" serif:id="light"><path d="M943.75,642.086c318.648,183.972 527.874,419.028 466.934,524.581c-60.941,105.552 -369.119,41.885 -687.767,-142.086c-318.649,-183.972 -527.875,-419.029 -466.934,-524.581c60.941,-105.552 369.119,-41.886 687.767,142.086Z" style="fill:none;stroke:#1c1917;stroke-width:62.5px;"/><path d="M722.917,642.086c318.648,-183.972 626.826,-247.638 687.767,-142.086c60.94,105.552 -148.286,340.609 -466.934,524.581c-318.648,183.971 -626.826,247.638 -687.767,142.086c-60.941,-105.553 148.285,-340.609 466.934,-524.581Z" style="fill:none;stroke:#1c1917;stroke-width:62.5px;"/></g></svg>

apps/waitlist-website/public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://ael.is/sitemap.xml

apps/waitlist-website/public/sitemap.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+	<url>
+		<loc>https://ael.is/</loc>
+	</url>
+	<url>
+		<loc>https://ael.is/privacy</loc>
+	</url>
+</urlset>

apps/waitlist-website/react-router.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from "@react-router/dev/config"
+
+export default {
+	// Config options...
+	// Server-side render by default, to enable SPA mode set this to `false`
+	ssr: true,
+} satisfies Config

apps/waitlist-website/tsconfig.json

@@ -0,0 +1,22 @@
+{
+	"include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*"],
+	"compilerOptions": {
+		"lib": ["DOM", "DOM.Iterable", "ES2022"],
+		"types": ["node", "vite/client"],
+		"target": "ES2022",
+		"module": "ES2022",
+		"moduleResolution": "bundler",
+		"jsx": "react-jsx",
+		"rootDirs": [".", "./.react-router/types"],
+		"baseUrl": ".",
+		"paths": {
+			"~/*": ["./app/*"]
+		},
+		"esModuleInterop": true,
+		"verbatimModuleSyntax": true,
+		"noEmit": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"strict": true
+	}
+}

apps/waitlist-website/vite.config.ts

@@ -0,0 +1,11 @@
+import { reactRouter } from "@react-router/dev/vite"
+import tailwindcss from "@tailwindcss/vite"
+import { defineConfig } from "vite"
+import tsconfigPaths from "vite-tsconfig-paths"
+
+export default defineConfig({
+	plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+	ssr: {
+		noExternal: ["lottie-react"],
+	},
+})