changed join waitlist page

apps/web/src/routes/join-waitlist.tsx

@@ -1,9 +1,94 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createFileRoute, Link } from "@tanstack/react-router";
+
+import { cn } from "@hypr/utils";
 
 export const Route = createFileRoute("/join-waitlist")({
-  beforeLoad: () => {
-    throw redirect({
-      href: "https://tally.so/r/mJaRDY",
-    });
-  },
+  component: Component,
 });
+
+function Component() {
+  return (
+    <Container>
+      <Header />
+      <BookingButton />
+    </Container>
+  );
+}
+
+function Container({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      className={cn([
+        "flex items-center justify-center min-h-screen p-4",
+        "bg-linear-to-b from-stone-50 via-stone-100/50 to-stone-50",
+      ])}
+    >
+      <div className="max-w-2xl w-full mx-auto">
+        <div
+          className="border border-neutral-200 p-4 rounded-sm"
+          style={{
+            backgroundImage:
+              "url(https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/texture/white-leather.png)",
+          }}
+        >
+          <div
+            className="bg-stone-50 border border-neutral-200 rounded-sm p-8 sm:p-12"
+            style={{
+              backgroundImage:
+                "url(https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/texture/paper.png)",
+            }}
+          >
+            {children}
+          </div>
+        </div>
+        <div className="mt-6 text-center">
+          <Link
+            to="/"
+            className="text-sm text-stone-600 hover:text-stone-900 transition-colors"
+          >
+            Back to home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <>
+      <h1 className="font-serif text-3xl sm:text-4xl font-medium text-stone-900 mb-4 text-center">
+        Quick chat with founders
+      </h1>
+      <p className="text-lg text-stone-600 mb-8 text-center">
+        Hop on a 20 minute chat and get early access to{" "}
+        <Link
+          to="/pricing"
+          className="underline decoration-dotted hover:text-stone-800"
+        >
+          Pro
+        </Link>
+      </p>
+    </>
+  );
+}
+
+function BookingButton() {
+  return (
+    <div className="flex justify-center">
+      <Link to="/founders" target="_blank" rel="noopener noreferrer">
+        <button
+          className={cn([
+            "group px-6 h-12 text-base sm:text-lg cursor-pointer",
+            "bg-linear-to-t from-stone-600 to-stone-500 text-white rounded-full",
+            "hover:scale-[102%] active:scale-[98%]",
+            "transition-all",
+            "flex items-center justify-center",
+          ])}
+        >
+          Book a 20-min chat
+        </button>
+      </Link>
+    </div>
+  );
+}