feat: waitlist supabase api

src/app/api/waitlist/route.ts

@@ -0,0 +1,58 @@
+import { NextResponse } from "next/server";
+import { getServiceSupabase } from "@/lib/supabase";
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+interface WaitlistPayload {
+  email?: string;
+  company_name?: string;
+  use_case?: string;
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = (await request.json()) as WaitlistPayload;
+
+    const email = body.email?.trim().toLowerCase();
+    if (!email || !EMAIL_REGEX.test(email)) {
+      return NextResponse.json(
+        { error: "A valid email address is required." },
+        { status: 400 }
+      );
+    }
+
+    const company_name = body.company_name?.trim() || null;
+    const use_case = body.use_case?.trim() || null;
+
+    const supabase = getServiceSupabase();
+
+    const { error } = await supabase
+      .from("waitlist")
+      .insert({ email, company_name, use_case });
+
+    if (error) {
+      if (error.code === "23505") {
+        return NextResponse.json(
+          { error: "This email is already on the waitlist." },
+          { status: 409 }
+        );
+      }
+
+      console.error("[api/waitlist] Supabase error:", error.message);
+      return NextResponse.json(
+        {
+          error: "Waitlist is temporarily unavailable. Please try again later.",
+        },
+        { status: 503 }
+      );
+    }
+
+    return NextResponse.json({ ok: true }, { status: 201 });
+  } catch (err) {
+    console.error("[api/waitlist] Unexpected error:", err);
+    return NextResponse.json(
+      { error: "Something went wrong. Please try again later." },
+      { status: 500 }
+    );
+  }
+}

src/features/how-it-works/HowItWorks.tsx

@@ -6,7 +6,7 @@ import { Globe, Link2, ShieldCheck, ChevronDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 const ease = [0.4, 0, 0.2, 1] as const; // smooth ease-out
-const OPEN_DELAY = 0.10; // mini delay before opening (seconds)
+const OPEN_DELAY = 0.1; // mini delay before opening (seconds)
 const OPEN_DURATION = 0.4; // slightly longer for smoother feel
 
 type Step = {
@@ -211,10 +211,7 @@ export default function HowItWorks() {
   const baseId = useId();
 
   return (
-    <section
-      aria-labelledby="how-it-works-heading"
-      className="relative w-full"
-    >
+    <section aria-labelledby="how-it-works-heading" className="relative w-full">
       {/* Section label */}
       <p
         id="how-it-works-label"

src/features/waitlist/WaitlistForm.tsx

@@ -13,16 +13,15 @@ import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
 import { ShineBorder } from "@/components/ui/shine-border";
 
-const FORMSPREE_ENDPOINT = "https://formspree.io/f/xyzndpdo";
-
-type Status = "idle" | "ok" | "error";
+type Status = "idle" | "ok" | "duplicate" | "error";
 
 export default function WaitlistForm() {
   const [email, setEmail] = useState("");
   const [company, setCompany] = useState("");
   const [message, setMessage] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [status, setStatus] = useState<Status>("idle");
+  const [errorMessage, setErrorMessage] = useState("");
 
   const [botField, setBotField] = useState("");
 
@@ -32,41 +31,53 @@ export default function WaitlistForm() {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setStatus("idle");
+    setErrorMessage("");
 
     if (botField) return;
 
     if (!validateEmail(email)) {
       setStatus("error");
+      setErrorMessage("Please check your email and try again.");
       return;
     }
 
     setIsSubmitting(true);
 
     try {
-      const res = await fetch(FORMSPREE_ENDPOINT, {
+      const res = await fetch("/api/waitlist", {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "application/json",
-        },
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           email,
-          company,
-          message,
-          _gotcha: botField,
-          _subject: "New waitlist signup · Acta",
-          page: typeof window !== "undefined" ? window.location.href : "",
+          company_name: company,
+          use_case: message,
         }),
       });
 
-      if (!res.ok) throw new Error("Submission failed");
+      if (res.status === 409) {
+        setStatus("duplicate");
+        return;
+      }
+
+      if (res.status === 400) {
+        setStatus("error");
+        setErrorMessage("Please check your email and try again.");
+        return;
+      }
+
+      if (!res.ok) {
+        setStatus("error");
+        setErrorMessage("Something went wrong. Please try again later.");
+        return;
+      }
 
       setEmail("");
       setCompany("");
       setMessage("");
       setStatus("ok");
     } catch {
       setStatus("error");
+      setErrorMessage("Something went wrong. Please try again later.");
     } finally {
       setIsSubmitting(false);
     }
@@ -141,11 +152,14 @@ export default function WaitlistForm() {
                 Thank you! We will contact you soon.
               </p>
             )}
-            {status === "error" && (
-              <p className="text-sm text-red-500 text-center">
-                Something went wrong. Please check your email and try again.
+            {status === "duplicate" && (
+              <p className="text-sm text-yellow-400 text-center">
+                This email is already on the waitlist.
               </p>
             )}
+            {status === "error" && (
+              <p className="text-sm text-red-500 text-center">{errorMessage}</p>
+            )}
           </form>
         </CardContent>
         <div className="pointer-events-none absolute inset-0 rounded-3xl shadow-[inset_0_0_60px_rgba(255,255,255,0.03)]" />

src/lib/supabase.ts

@@ -1,12 +1,19 @@
 import { createClient, type SupabaseClient } from "@supabase/supabase-js";
 
-const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
-const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
-const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+// Placeholders for build/CI when env vars are unset; API will return 503 on insert.
+// Not real credentials – Supabase calls will fail; avoids build errors when env is empty.
+const PLACEHOLDER_URL = "https://placeholder.supabase.co";
+const PLACEHOLDER_KEY = "placeholder-anon-key-not-a-secret";
+
+const supabaseUrl =
+  process.env.NEXT_PUBLIC_SUPABASE_URL?.trim() || PLACEHOLDER_URL;
+const supabaseAnonKey =
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY?.trim() || PLACEHOLDER_KEY;
+const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY?.trim();
 
 /**
  * Public (anon) Supabase client – safe to use in both client and server code.
- * Requires NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY in env.
+ * Uses placeholders when env vars are unset (build/CI); inserts will fail with 503.
  */
 export const supabase: SupabaseClient = createClient(
   supabaseUrl,