diff --git a/frontend/app/waitlist/components/WaitlistForm.tsx b/frontend/app/waitlist/components/WaitlistForm.tsx new file mode 100644 index 00000000..1ed2289a --- /dev/null +++ b/frontend/app/waitlist/components/WaitlistForm.tsx @@ -0,0 +1,159 @@ +"use client"; + +import { useState, FormEvent } from "react"; +import { Button, Input } from "@/components/ui"; +import { CheckCircle2 } from "lucide-react"; + +export default function WaitlistForm() { + const [email, setEmail] = useState(""); + const [name, setName] = useState(""); + const [status, setStatus] = useState< + "idle" | "loading" | "success" | "error" + >("idle"); + const [errorMessage, setErrorMessage] = useState(""); + + const validateEmail = (email: string): boolean => { + const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return re.test(email); + }; + + const handleSubmit = async (e: FormEvent) => { + e.preventDefault(); + + if (!name.trim()) { + setStatus("error"); + setErrorMessage("Please enter your name"); + return; + } + + if (!validateEmail(email)) { + setStatus("error"); + setErrorMessage("Please enter a valid email address"); + return; + } + + setStatus("loading"); + setErrorMessage(""); + + // Simulate API call - replace with actual endpoint + try { + await new Promise((resolve) => setTimeout(resolve, 1500)); + setStatus("success"); + setName(""); + setEmail(""); + // eslint-disable-next-line + } catch (_) { + setStatus("error"); + setErrorMessage("Something went wrong. Please try again."); + } + }; + + return ( +
+ {/* Background Pattern */} + + + {/* Main Content */} +
+ {/* Heading */} +

+ Join the Waitlist +

+ + {/* Early Access Message */} +
+

+ PrediFi is currently in early access and coming soon! +

+

+ Be among the first to experience decentralized prediction markets. + Join our waitlist to get early access and stay updated on our launch. +

+
+ + {/* Form Card */} +
+ {status !== "success" ? ( +
+
+
+ setName(e.target.value)} + placeholder="Enter your full name" + disabled={status === "loading"} + className="bg-[#001518] border-[#EBFDFF33] text-white placeholder:text-[#B3CECB] focus-visible:ring-[#37B7C3]" + /> + setEmail(e.target.value)} + placeholder="Enter your email address" + disabled={status === "loading"} + className="bg-[#001518] border-[#EBFDFF33] text-white placeholder:text-[#B3CECB] focus-visible:ring-[#37B7C3]" + /> +
+ + {status === "error" && ( +
+

+ {errorMessage} +

+
+ )} + + +
+
+ ) : ( +
+
+ +
+
+

+ You're on the list! +

+

+ Thank you for joining the waitlist. We'll notify you when + PrediFi launches so you can be among the first to start predicting! +

+
+
+ )} +
+ + {/* Additional Info */} +
+

+ By joining the waitlist, you'll receive updates about our launch, + early access opportunities, and exclusive features. +

+
+
+
+ ); +} diff --git a/frontend/app/waitlist/page.tsx b/frontend/app/waitlist/page.tsx new file mode 100644 index 00000000..fc6208ee --- /dev/null +++ b/frontend/app/waitlist/page.tsx @@ -0,0 +1,17 @@ +import Navbar from "../(marketing)/components/NavBar"; +import Footer from "../(marketing)/components/Footer"; +import WaitlistForm from "./components/WaitlistForm"; + +export default function WaitlistPage() { + return ( +
+ + +
+ +
+ +
+ ); +}