From 976f2ae7577e800d8efcf9023b81cee83023239e Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Fri, 4 Sep 2026 00:24:18 +0700
Subject: [PATCH] Webapp auth pages: video update

---
 .../src/components/auth/auth-showcase.tsx     | 31 +++++++------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/frontend/apps/artcraft-webapp/src/components/auth/auth-showcase.tsx b/frontend/apps/artcraft-webapp/src/components/auth/auth-showcase.tsx
index 9335fe28e..96031e6bd 100644
--- a/frontend/apps/artcraft-webapp/src/components/auth/auth-showcase.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/auth/auth-showcase.tsx
@@ -1,25 +1,18 @@
 const FEATURED_VIDEO_URL =
-  "https://player.vimeo.com/video/1169289718?background=1&autoplay=1&loop=1&muted=1";
+  "https://frontend-cdn.fakeyou.com/videos/knight-video.mp4";
 
 export const AuthShowcase = () => {
   return (
-    <div
-      className="absolute inset-2 overflow-hidden bg-black rounded-2xl"
-      style={{ containerType: "size" }}
-    >
-      {/* Vimeo background embed (no controls) scaled to cover the pane. The
-          iframe is forced to 16:9 and sized to the larger cover dimension via
-          container-query units, then centered so the overflow crops evenly. */}
-      <iframe
+    <div className="absolute inset-2 overflow-hidden bg-black rounded-2xl">
+      {/* Muted background video (no controls) cropped to cover the pane */}
+      <video
         src={FEATURED_VIDEO_URL}
-        title="Cheap Seedance 2.0"
-        allow="autoplay; fullscreen; picture-in-picture"
-        allowFullScreen
-        className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
-        style={{
-          width: "max(100cqw, calc(100cqh * 16 / 9))",
-          height: "max(100cqh, calc(100cqw * 9 / 16))",
-        }}
+        autoPlay
+        muted
+        loop
+        playsInline
+        preload="auto"
+        className="pointer-events-none absolute inset-0 h-full w-full object-cover"
       />
 
       {/* Legibility gradient behind the caption */}
@@ -34,10 +27,10 @@ export const AuthShowcase = () => {
           One of the cheapest
         </p>
         <h2 className="text-2xl font-bold leading-tight">
-          Seedance 2.0 Video Generation
+          Seedance 2.5 Video Generation
         </h2>
         <p className="mt-1 max-w-sm text-sm text-white/70">
-          Generate jaw-dropping AI videos with Seedance 2.0.
+          Generate jaw-dropping AI videos with Seedance 2.5.
         </p>
       </div>
     </div>