WaitlistForm.tsx (3143B)
1 import { RoundedContainerWithGradientBorder } from "@/components/ui/RoundedContainerWithGradientBorder"; 2 import { useIntl } from "react-intl"; 3 import { CheckCircle, Frown, Mail, Sparkles } from "lucide-react"; 4 import { Button } from "@/components/ui/Button"; 5 import Link from "next/link"; 6 import Image from "next/image"; 7 import { Input } from "@/components/ui/Input" 8 import { Label } from "@/components/ui/Label" 9 import { useState } from "react"; 10 import { MeshGradient5 } from "@/components/effects/MeshGradient.5"; 11 import { MeshGradient4 } from "@/components/effects/MeshGradient.4"; 12 import { cn } from "@/lib/utils"; 13 import { motion } from "framer-motion"; 14 import { NOTEDECK_WAITLIST_URL } from "@/lib/constants"; 15 16 export function NotedeckWaitlistForm({ className }: { className?: string }) { 17 const intl = useIntl() 18 19 return (<> 20 <div className={cn("bg-black overflow-hidden relative", className)}> 21 <div className="container mx-auto px-6 pb-24 pt-48"> 22 <div className="flex flex-col items-center justify-center mt-32 lg:mt-16"> 23 <div className="relative mb-24 flex flex-col items-center justify-center"> 24 <div className="absolute pointer-events-none"> 25 <MeshGradient4 /> 26 </div> 27 <motion.h2 className="mb-1 md:mb-4 text-4xl md:text-5xl lg:text-6xl text-center text-transparent bg-clip-text bg-gradient-to-r from-white from-5% to-[#E0A4D3] to-100% font-semibold pb-4 whitespace-pre-line leading-relaxed"> 28 {intl.formatMessage({ id: "notedeck.waitlist.headline", defaultMessage: "Coming soon!" })} 29 </motion.h2> 30 <motion.label htmlFor="contact" className="text-xl text-center max-w-2xl mb-12 text-transparent bg-clip-text bg-gradient-to-br from-white from-5% to-[#8DEBF8] to-100% whitespace-pre-line leading-loose"> 31 {(intl.locale != "ja" || process.env.FORCE_LOAD_ALL_JA_SECTIONS) && (<> 32 {intl.formatMessage({ id: "notedeck.waitlist.subheadline", defaultMessage: "Sign up for our waitlist and be the first to know when notedeck is ready" })} 33 </>)} 34 </motion.label> 35 <motion.div 36 className="flex flex-col items-center md:items-center gap-y-4 gap-x-6" 37 style={{ opacity: 0 }} 38 animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }} 39 > 40 <Link href={NOTEDECK_WAITLIST_URL} className="w-full md:w-auto"> 41 <Button variant="default" className="w-full"> 42 {intl.formatMessage({ id: "notedeck.hero.signup-for-the-waitlist", defaultMessage: "Sign up for the waitlist" })} 43 </Button> 44 </Link> 45 </motion.div> 46 </div> 47 </div> 48 </div> 49 </div> 50 </>) 51 }