use waitlist for now

Author: ComputelessComputer

apps/web/src/components/join-waitlist-button.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@hypr/utils";
+
+export function JoinWaitlistButton() {
+  return (
+    <a
+      href="https://tally.so/r/mJaRDY"
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn([
+        "group px-6 h-12 flex items-center justify-center text-base sm:text-lg",
+        "bg-linear-to-t from-stone-600 to-stone-500 text-white rounded-full",
+        "shadow-md hover:shadow-lg hover:scale-[102%] active:scale-[98%]",
+        "transition-all",
+      ])}
+    >
+      Join waitlist
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth="1.5"
+        stroke="currentColor"
+        className="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+        />
+      </svg>
+    </a>
+  );
+}

apps/web/src/routes/_view/index.tsx

@@ -6,6 +6,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { DownloadButton } from "@/components/download-button";
 import { GitHubOpenSource } from "@/components/github-open-source";
 import { GithubStars } from "@/components/github-stars";
+import { JoinWaitlistButton } from "@/components/join-waitlist-button";
 import { LogoCloud } from "@/components/logo-cloud";
 import { SocialCard } from "@/components/social-card";
 import { VideoModal } from "@/components/video-modal";
@@ -153,7 +154,7 @@ function Component() {
 
               {/* CTAs */}
               <div className="flex flex-col sm:flex-row gap-4 items-center">
-                <DownloadButton />
+                <JoinWaitlistButton />
                 <p className="text-neutral-500">
                   Free and{" "}
                   <a

apps/web/src/routes/_view/route.tsx

@@ -50,13 +50,14 @@ function Header() {
           </div>
           <nav className="flex items-center gap-6">
             <div className="flex gap-3">
-              <HeaderUser />
-              <Link
-                to="/downloads"
+              <a
+                href="https://tally.so/r/mJaRDY"
+                target="_blank"
+                rel="noopener noreferrer"
                 className="px-4 h-8 flex items-center text-sm bg-linear-to-t from-stone-600 to-stone-500 text-white rounded-full shadow-md hover:shadow-lg hover:scale-[102%] active:scale-[98%] transition-all"
               >
-                Download
-              </Link>
+                Join waitlist
+              </a>
             </div>
           </nav>
         </div>
@@ -65,31 +66,6 @@ function Header() {
   );
 }
 
-function HeaderUser() {
-  const { user } = Route.useLoaderData();
-
-  if (user) {
-    return (
-      <Link
-        to="/app/account"
-        className="px-3 h-8 flex items-center text-sm text-neutral-500 hover:text-neutral-800 transition-all hover:underline decoration-dotted"
-      >
-        Account
-      </Link>
-    );
-  }
-
-  return (
-    <Link
-      to="/auth"
-      search={{ flow: "web" }}
-      className="px-3 h-8 flex items-center text-sm text-neutral-500 hover:text-neutral-800 transition-all hover:underline decoration-dotted"
-    >
-      Get Started
-    </Link>
-  );
-}
-
 function Footer() {
   const currentYear = new Date().getFullYear();