From 85726fe88695cfb7b1d8da982094496421a33cae Mon Sep 17 00:00:00 2001
From: kenneth <kenneth@nym.sh>
Date: Sun, 8 Mar 2026 02:31:26 +0000
Subject: [PATCH] feat(waitlist): add footer with bottom progressive blur

Co-authored-by: Ona <no-reply@ona.com>
---
 .../app/components/progressive-blur.tsx       | 23 ++++++++++++++++++-
 apps/waitlist-website/app/routes/home.tsx     |  4 ++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/apps/waitlist-website/app/components/progressive-blur.tsx b/apps/waitlist-website/app/components/progressive-blur.tsx
index fa78f39..64db1ee 100644
--- a/apps/waitlist-website/app/components/progressive-blur.tsx
+++ b/apps/waitlist-website/app/components/progressive-blur.tsx
@@ -1,4 +1,25 @@
-export function ProgressiveBlur({ className }: { className?: string }) {
+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%)]" />
diff --git a/apps/waitlist-website/app/routes/home.tsx b/apps/waitlist-website/app/routes/home.tsx
index ac8caf5..a84396f 100644
--- a/apps/waitlist-website/app/routes/home.tsx
+++ b/apps/waitlist-website/app/routes/home.tsx
@@ -1,6 +1,6 @@
 import { AnimatePresence, motion } from "motion/react"
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react"
-import { useFetcher } from "react-router"
+import { Link, useFetcher } from "react-router"
 import { Resend } from "resend"
 import { Streamdown } from "streamdown"
 
@@ -159,7 +159,7 @@ export default function Home() {
 					<motion.div
 						ref={chatBoxRef}
 						key="test"
-						className="w-full max-w-2xl absolute bottom-8 px-6 md:px-0 flex justify-center"
+						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 }}