From 2070281332cb02521b444d4ecc0a148029bef5df Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Sun, 16 Feb 2025 23:30:53 -0800
Subject: [PATCH] fix(landing): submit UI

---
 app/(landing)/hero-workflow.tsx |  4 ++--
 app/(landing)/landing.tsx       |  8 +++----
 app/(landing)/waitlist-form.tsx | 38 ++++++++++++++++++---------------
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/app/(landing)/hero-workflow.tsx b/app/(landing)/hero-workflow.tsx
index 45e3902580..3e34dcf1ef 100644
--- a/app/(landing)/hero-workflow.tsx
+++ b/app/(landing)/hero-workflow.tsx
@@ -108,7 +108,7 @@ export function HeroWorkflow() {
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
 
   return (
-    <div className="w-full h-[300px] md:h-[420px]">
+    <div className="w-full h-[260px] md:h-[340px]">
       <style jsx global>{`
         .animated-edge {
           animation: dashdraw 7s linear infinite;
@@ -136,7 +136,7 @@ export function HeroWorkflow() {
         connectionLineType={ConnectionLineType.SmoothStep}
         connectionLineStyle={{ stroke: '#94a3b8', strokeWidth: 2 }}
         fitView
-        minZoom={1.3}
+        minZoom={0.8}
         maxZoom={1.3}
         defaultViewport={{ x: 0, y: 0, zoom: 1 }}
         proOptions={{ hideAttribution: true }}
diff --git a/app/(landing)/landing.tsx b/app/(landing)/landing.tsx
index 14ee9d4429..828c0f7f98 100644
--- a/app/(landing)/landing.tsx
+++ b/app/(landing)/landing.tsx
@@ -21,7 +21,7 @@ export default function Landing() {
         </div>
       </nav>
 
-      <section className="min-h-[100dvh] pt-28 text-white relative">
+      <section className="min-h-[100dvh] pt-36 text-white relative">
         <div className="absolute inset-0 z-0">
           <Image
             src="/hero.png"
@@ -35,8 +35,8 @@ export default function Landing() {
           />
         </div>
         <div className="absolute inset-0 z-0 bg-gradient-to-b from-[#020817]/80 to-[#020817]/40" />
-        <div className="max-w-6xl mx-auto text-center space-y-4 relative z-10 px-4">
-          <h1 className="text-4xl md:text-7xl font-medium tracking-tight">
+        <div className="max-w-6xl mx-auto text-center space-y-6 relative z-10 px-4">
+          <h1 className="text-5xl md:text-7xl font-medium">
             dev first agent
             <br />
             workflow builder
@@ -50,7 +50,7 @@ export default function Landing() {
 
           <WaitlistForm />
 
-          <div className="mt-10 -mx-4">
+          <div className="mt-16 -mx-4">
             <HeroWorkflowProvider />
           </div>
         </div>
diff --git a/app/(landing)/waitlist-form.tsx b/app/(landing)/waitlist-form.tsx
index ba830277c4..401835e753 100644
--- a/app/(landing)/waitlist-form.tsx
+++ b/app/(landing)/waitlist-form.tsx
@@ -10,11 +10,11 @@ const emailSchema = z.string().email('Please enter a valid email')
 export default function WaitlistForm() {
   const [email, setEmail] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
-  const [message, setMessage] = useState('')
+  const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle')
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    setMessage('')
+    setStatus('idle')
 
     try {
       // Validate email
@@ -32,23 +32,26 @@ export default function WaitlistForm() {
       const data = await response.json()
 
       if (!response.ok) {
-        setMessage(data.message || 'Failed to join waitlist')
+        setStatus('error')
         return
       }
 
-      setMessage('Thanks for joining our waitlist!')
+      setStatus('success')
       setEmail('')
     } catch (error) {
-      if (error instanceof z.ZodError) {
-        setMessage('Please enter a valid email')
-      } else {
-        setMessage(error instanceof Error ? error.message : 'Something went wrong')
-      }
+      setStatus('error')
     } finally {
       setIsSubmitting(false)
     }
   }
 
+  const getButtonText = () => {
+    if (isSubmitting) return 'Joining...'
+    if (status === 'success') return 'Success'
+    if (status === 'error') return 'Try again'
+    return 'Join waitlist'
+  }
+
   return (
     <form
       onSubmit={handleSubmit}
@@ -58,24 +61,25 @@ export default function WaitlistForm() {
         <Input
           type="email"
           placeholder="you@example.com"
-          className="flex-1 text-lg bg-[#020817] border-white/20 focus:border-white/30 focus:ring-white/30 rounded-md h-12"
+          className="flex-1 text-base bg-[#020817] border-white/20 focus:border-white/30 focus:ring-white/30 rounded-md h-12"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           disabled={isSubmitting}
         />
         <Button
           type="submit"
-          className="bg-white text-black hover:bg-gray-100 rounded-md px-8 h-12"
+          className={`rounded-md px-8 h-12 ${
+            status === 'success'
+              ? 'bg-green-500 hover:bg-green-600'
+              : status === 'error'
+                ? 'bg-red-500 hover:bg-red-600'
+                : 'bg-white text-black hover:bg-gray-100'
+          }`}
           disabled={isSubmitting}
         >
-          {isSubmitting ? 'Joining...' : 'Join waitlist'}
+          {getButtonText()}
         </Button>
       </div>
-      {message && (
-        <p className={`text-sm ${message.includes('Thanks') ? 'text-green-400' : 'text-red-400'}`}>
-          {message}
-        </p>
-      )}
     </form>
   )
 }