mirror of
https://github.com/kennethnym/aris.git
synced 2026-03-20 09:01:19 +00:00
Compare commits
20 Commits
e6ca1763ef
...
feat/waitl
| Author | SHA1 | Date | |
|---|---|---|---|
|
fa24744cdd
|
|||
|
93b147830c
|
|||
|
2b40c28e25
|
|||
|
61d5b9e6bb
|
|||
|
fae8507197
|
|||
|
441e631ca8
|
|||
|
85eefc1c7e
|
|||
|
42e40da3db
|
|||
|
74c052393a
|
|||
|
85726fe886
|
|||
|
2dd654106a
|
|||
|
272a05d96a
|
|||
|
82d9c77859
|
|||
|
cfa483c533
|
|||
|
8ea9a926c8
|
|||
|
a58bd8c37e
|
|||
|
bd7055af29
|
|||
|
dd868ec362
|
|||
|
c87543fffb
|
|||
|
2364f0c86b
|
5
apps/waitlist-website/.dockerignore
Normal file
5
apps/waitlist-website/.dockerignore
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
.react-router
|
||||||
|
build
|
||||||
|
node_modules
|
||||||
|
.env
|
||||||
|
README.md
|
||||||
7
apps/waitlist-website/.gitignore
vendored
Normal file
7
apps/waitlist-website/.gitignore
vendored
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
.DS_Store
|
||||||
|
.env
|
||||||
|
/node_modules/
|
||||||
|
|
||||||
|
# React Router
|
||||||
|
/.react-router/
|
||||||
|
/build/
|
||||||
22
apps/waitlist-website/Dockerfile
Normal file
22
apps/waitlist-website/Dockerfile
Normal file
@@ -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"]
|
||||||
87
apps/waitlist-website/README.md
Normal file
87
apps/waitlist-website/README.md
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
# Welcome to React Router!
|
||||||
|
|
||||||
|
A modern, production-ready template for building full-stack React applications using React Router.
|
||||||
|
|
||||||
|
[](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.
|
||||||
51
apps/waitlist-website/app/app.css
Normal file
51
apps/waitlist-website/app/app.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
117
apps/waitlist-website/app/chat/chat-box.tsx
Normal file
117
apps/waitlist-website/app/chat/chat-box.tsx
Normal file
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
66
apps/waitlist-website/app/chat/message.ts
Normal file
66
apps/waitlist-website/app/chat/message.ts
Normal file
@@ -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?`,
|
||||||
|
}
|
||||||
|
}
|
||||||
23
apps/waitlist-website/app/chat/use-fake-streaming.ts
Normal file
23
apps/waitlist-website/app/chat/use-fake-streaming.ts
Normal file
@@ -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])
|
||||||
|
}
|
||||||
168
apps/waitlist-website/app/components/animated-logo.tsx
Normal file
168
apps/waitlist-website/app/components/animated-logo.tsx
Normal file
@@ -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}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
35
apps/waitlist-website/app/components/progressive-blur.tsx
Normal file
35
apps/waitlist-website/app/components/progressive-blur.tsx
Normal file
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
27
apps/waitlist-website/app/hooks/use-color-scheme.ts
Normal file
27
apps/waitlist-website/app/hooks/use-color-scheme.ts
Normal file
@@ -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
|
||||||
|
}
|
||||||
1
apps/waitlist-website/app/lottie/clicked-dark.json
Normal file
1
apps/waitlist-website/app/lottie/clicked-dark.json
Normal file
@@ -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}
|
||||||
1
apps/waitlist-website/app/lottie/clicked-light.json
Normal file
1
apps/waitlist-website/app/lottie/clicked-light.json
Normal file
@@ -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}
|
||||||
1
apps/waitlist-website/app/lottie/loading-dark.json
Normal file
1
apps/waitlist-website/app/lottie/loading-dark.json
Normal file
@@ -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}
|
||||||
1
apps/waitlist-website/app/lottie/loading-light.json
Normal file
1
apps/waitlist-website/app/lottie/loading-light.json
Normal file
@@ -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}
|
||||||
1
apps/waitlist-website/app/lottie/start-loading-dark.json
Normal file
1
apps/waitlist-website/app/lottie/start-loading-dark.json
Normal file
@@ -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}
|
||||||
@@ -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}
|
||||||
88
apps/waitlist-website/app/root.tsx
Normal file
88
apps/waitlist-website/app/root.tsx
Normal file
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
6
apps/waitlist-website/app/routes.ts
Normal file
6
apps/waitlist-website/app/routes.ts
Normal file
@@ -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
|
||||||
395
apps/waitlist-website/app/routes/home.tsx
Normal file
395
apps/waitlist-website/app/routes/home.tsx
Normal file
@@ -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)
|
||||||
|
}
|
||||||
246
apps/waitlist-website/app/routes/privacy-policy.tsx
Normal file
246
apps/waitlist-website/app/routes/privacy-policy.tsx
Normal file
@@ -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)**
|
||||||
|
`
|
||||||
22
apps/waitlist-website/fly.toml
Normal file
22
apps/waitlist-website/fly.toml
Normal file
@@ -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
|
||||||
37
apps/waitlist-website/package.json
Normal file
37
apps/waitlist-website/package.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
apps/waitlist-website/public/favicon-dark.svg
Normal file
1
apps/waitlist-website/public/favicon-dark.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
1
apps/waitlist-website/public/favicon-light.svg
Normal file
1
apps/waitlist-website/public/favicon-light.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
apps/waitlist-website/public/favicon.ico
Normal file
BIN
apps/waitlist-website/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
4
apps/waitlist-website/public/robots.txt
Normal file
4
apps/waitlist-website/public/robots.txt
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
|
||||||
|
Sitemap: https://ael.is/sitemap.xml
|
||||||
9
apps/waitlist-website/public/sitemap.xml
Normal file
9
apps/waitlist-website/public/sitemap.xml
Normal file
@@ -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>
|
||||||
BIN
apps/waitlist-website/public/social-media-preview.png
Normal file
BIN
apps/waitlist-website/public/social-media-preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
7
apps/waitlist-website/react-router.config.ts
Normal file
7
apps/waitlist-website/react-router.config.ts
Normal file
@@ -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
|
||||||
22
apps/waitlist-website/tsconfig.json
Normal file
22
apps/waitlist-website/tsconfig.json
Normal file
@@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
11
apps/waitlist-website/vite.config.ts
Normal file
11
apps/waitlist-website/vite.config.ts
Normal file
@@ -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"],
|
||||||
|
},
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user