hero: cleanup and fix button to redirect

This commit is contained in:
Maze Winther 2025-07-20 21:48:47 +02:00
parent 07e068b658
commit 4896dce268
1 changed files with 11 additions and 99 deletions

View File

@ -2,104 +2,15 @@
import { motion } from "motion/react";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { SponsorButton } from "../ui/sponsor-button";
import { VercelIcon } from "../icons";
import { ArrowRight } from "lucide-react";
import { useState, useEffect } from "react";
import { toast } from "sonner";
import Image from "next/image";
import { Handlebars } from "./handlebars";
import Link from "next/link";
export function Hero() {
const [email, setEmail] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
const [csrfToken, setCsrfToken] = useState<string | null>(null);
useEffect(() => {
let isMounted = true;
fetch("/api/waitlist/token", {
credentials: "include",
})
.then((res) => res.json())
.then((data) => {
if (isMounted && data.token) {
setCsrfToken(data.token);
}
})
.catch((err) => {
console.error("Failed to fetch CSRF token:", err);
if (isMounted) {
toast.error("Security initialization failed", {
description: "Please refresh the page to continue.",
});
}
});
}, []);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!email.trim()) {
toast.error("Email required", {
description: "Please enter your email address.",
});
return;
}
if (!csrfToken) {
toast.error("Security error", {
description: "Please refresh the page and try again.",
});
return;
}
setIsSubmitting(true);
try {
const response = await fetch("/api/waitlist", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRF-Token": csrfToken,
},
credentials: "include",
body: JSON.stringify({ email: email.trim() }),
});
const data = (await response.json()) as { error: string };
if (response.ok) {
toast.success("Welcome to the waitlist! 🎉", {
description: "You'll be notified when we launch.",
});
setEmail("");
fetch("/api/waitlist/token", { credentials: "include" })
.then((res) => res.json())
.then((data) => {
if (data.token) setCsrfToken(data.token);
})
.catch((err) => {
console.error("Failed to refresh CSRF token:", err);
});
} else {
toast.error("Oops!", {
description:
(data as { error: string }).error ||
"Something went wrong. Please try again.",
});
}
} catch (error) {
toast.error("Network error", {
description: "Please check your connection and try again.",
});
} finally {
setIsSubmitting(false);
}
};
return (
<div className="min-h-[calc(100vh-4.5rem)] supports-[height:100dvh]:min-h-[calc(100dvh-4.5rem)] flex flex-col justify-between items-center text-center px-4">
<Image
@ -153,15 +64,16 @@ export function Hero() {
animate={{ opacity: 1 }}
transition={{ delay: 0.6, duration: 0.8 }}
>
<Button
type="submit"
size="lg"
className="px-6 h-11 text-base bg-foreground"
disabled={isSubmitting || !csrfToken}
>
Try early beta
<ArrowRight className="relative z-10 ml-0.5 h-4 w-4 inline-block" />
</Button>
<Link href="/projects">
<Button
type="submit"
size="lg"
className="px-6 h-11 text-base bg-foreground"
>
Try early beta
<ArrowRight className="relative z-10 ml-0.5 h-4 w-4 inline-block" />
</Button>
</Link>
</motion.div>
</motion.div>
</div>