Merge branch 'main' into feature/optimize-timeline-ruler

1 files changed, 40 insertions, 7 deletions

diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx
index b1910dc5..6e6a45cb 100644
--- a/apps/web/src/components/landing/hero.tsx
+++ b/apps/web/src/components/landing/hero.tsx
@@ -84,7 +84,9 @@ export function Hero() {
           });
       } else {
         toast.error("Oops!", {
-          description: (data as { error: string }).error || "Something went wrong. Please try again.",
+          description:
+            (data as { error: string }).error ||
+            "Something went wrong. Please try again.",
         });
       }
     } catch (error) {
@@ -98,7 +100,13 @@ export function Hero() {
 
   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 className="absolute top-0 left-0 -z-50 size-full object-cover" src="/landing-page-bg.png" height={1903.5} width={1269} alt="landing-page.bg" />
+      <Image
+        className="absolute top-0 left-0 -z-50 size-full object-cover"
+        src="/landing-page-bg.png"
+        height={1903.5}
+        width={1269}
+        alt="landing-page.bg"
+      />
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
@@ -121,11 +129,20 @@ export function Hero() {
           animate={{ opacity: 1 }}
           transition={{ delay: 0.4, duration: 0.8 }}
         >
-          A simple but powerful video editor that gets the job done. Works on any platform.
+          A simple but powerful video editor that gets the job done. Works on
+          any platform.
         </motion.p>
 
-        <motion.div className="mt-12 flex gap-8 justify-center" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.6, duration: 0.8 }}>
-          <form onSubmit={handleSubmit} className="flex gap-3 w-full max-w-lg flex-col sm:flex-row">
+        <motion.div
+          className="mt-12 flex gap-8 justify-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.6, duration: 0.8 }}
+        >
+          <form
+            onSubmit={handleSubmit}
+            className="flex gap-3 w-full max-w-lg flex-col sm:flex-row"
+          >
             <div className="relative w-full">
               <Input
                 type="email"
@@ -137,12 +154,28 @@ export function Hero() {
                 required
               />
             </div>
-            <Button type="submit" size="lg" className="px-6 h-11 text-base !bg-foreground" disabled={isSubmitting || !csrfToken}>
-              <span className="relative z-10">{isSubmitting ? "Joining..." : "Join waitlist"}</span>
+            <Button
+              type="submit"
+              size="lg"
+              className="px-6 h-11 text-base !bg-foreground"
+              disabled={isSubmitting || !csrfToken}
+            >
+              <span className="relative z-10">
+                {isSubmitting ? "Joining..." : "Join waitlist"}
+              </span>
               <ArrowRight className="relative z-10 ml-0.5 h-4 w-4 inline-block" />
             </Button>
           </form>
         </motion.div>
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.8, duration: 0.6 }}
+            className="mt-8 inline-flex items-center gap-2 text-sm text-muted-foreground justify-center"
+          >
+            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+            <span>50k+ people already joined</span>
+          </motion.div>
       </motion.div>
     </div>
   );