improvement(landing): landing animation/styling improvements

Author: emir-karabeg

app/(landing)/landing.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import Image from 'next/image'
 import HeroWorkflowProvider from './hero-workflow'
 import WaitlistForm from './waitlist-form'
@@ -23,31 +25,34 @@ export default function Landing() {
 
       <section className="min-h-[100dvh] pt-[134px] md:pt-36 text-white relative">
         <div className="absolute inset-0 z-0">
-          <Image
-            src="/hero.png"
-            alt="Hero background"
-            fill
-            priority
-            loading="eager"
-            fetchPriority="high"
-            className="object-cover"
-            quality={100}
-          />
+          <video
+            autoPlay
+            muted
+            loop
+            playsInline
+            preload="auto"
+            className="h-full w-full object-cover"
+            poster="/hero.png"
+          >
+            <source src="/hero.webm" type="video/webm" media="all" />
+          </video>
         </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-6 relative z-10 px-4">
-          <h1 className="text-5xl md:text-7xl font-medium">
+          <h1 className="text-5xl md:text-7xl font-medium animate-fade-up [animation-delay:200ms] opacity-0 translate-y-[-10px]">
             build / deploy
             <br />
             agent workflows
           </h1>
 
-          <p className="text-[14.5px] md:text-xl text-muted-foreground max-w-3xl mx-auto">
+          <p className="text-[15px] md:text-xl text-muted-foreground max-w-3xl mx-auto animate-fade-up [animation-delay:400ms] opacity-0 translate-y-[-10px]">
             Launch agentic workflows with an open source, <br />
             user-friendly environment for devs and agents
           </p>
 
-          <WaitlistForm />
+          <div className="animate-fade-up [animation-delay:600ms] opacity-0 translate-y-[-10px]">
+            <WaitlistForm />
+          </div>
 
           <div className="mt-16 -mx-4">
             <HeroWorkflowProvider />

app/(landing)/waitlist-form.tsx

@@ -61,14 +61,14 @@ export default function WaitlistForm() {
         <Input
           type="email"
           placeholder="you@example.com"
-          className="flex-1 text-base bg-[#020817] border-white/20 focus:border-white/30 focus:ring-white/30 rounded-md h-12"
+          className="flex-1 text-sm md:text-md bg-[#020817] border-white/20 focus:border-white/30 focus:ring-white/30 rounded-md h-[50px]"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           disabled={isSubmitting}
         />
         <Button
           type="submit"
-          className={`rounded-md px-8 h-12 ${
+          className={`rounded-md px-8 h-[48px] ${
             status === 'success'
               ? 'bg-green-500 hover:bg-green-600'
               : status === 'error'

public/hero.webm

@@ -81,11 +81,22 @@ export default {
             transform: 'translateY(0)',
           },
         },
+        'fade-up': {
+          '0%': {
+            opacity: '0',
+            transform: 'translateY(10px)',
+          },
+          '100%': {
+            opacity: '1',
+            transform: 'translateY(0)',
+          },
+        },
       },
       animation: {
         'slide-down': 'slide-down 0.3s ease-out',
         'notification-slide': 'notification-slide 0.3s ease-out forwards',
         'notification-fade-out': 'notification-fade-out 0.2s ease-out forwards',
+        'fade-up': 'fade-up 0.5s ease-out forwards',
       },
     },
   },