preview btn change (#1628)

* preview btn change

* .png -> .webp

* light + dark preview images

Author: LineIndent

assets/landing/video/dark/video_demo_dark.webp

@@ -10,15 +10,13 @@
 from pcweb.pages.landing.views.products import products
 from pcweb.pages.landing.views.security import security
 from pcweb.pages.landing.views.start_building import start_building
-from pcweb.pages.landing.views.video_demo import video_demo
 from pcweb.templates.mainpage import mainpage
 
 
 @mainpage(path="/", title="Reflex · Web apps in Pure Python", meta=meta_tags)
 def landing() -> rx.Component:
     return rx.box(
         hero(),
-        # video_demo(),
         products(),
         companies(),
         ai_section(),

assets/landing/video/light/video_demo_light.webp

@@ -6,17 +6,28 @@
 from pcweb.constants import DEMO_VIDEO_URL
 
 
+def icon_svg() -> rx.Component:
+    return rx.html(
+        """<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 16 16" fill="none">
+            <rect width="16" height="16" rx="2" fill="#6E56CF"/>
+            <path d="M10 9V13H12V9H10Z" fill="white"/>
+            <path d="M4 3V13H6V9H10V7H6V5H10V7H12V3H4Z" fill="white"/>
+        </svg>""",
+        class_name="flex justify-center items-center",
+    )
+
+
 def video_demo() -> rx.Component:
     return rx.el.section(
         rx.box(
             rx.el.span(
-                "Get one month free",
-                class_name="rounded-full border border-slate-6 text-slate-11 text-xs px-2 py-0.5 w-fit font-medium -mb-1.5",
-            ),
-            rx.el.span(
-                rx.el.span(
-                    "Reflex Build ",
-                    class_name="inline text-slate-12 font-semibold text-2xl",
+                rx.box(
+                    icon_svg(),
+                    rx.el.span(
+                        "Reflex Build ",
+                        class_name="inline text-slate-12 font-semibold text-2xl",
+                    ),
+                    class_name="flex flex-row items-center gap-x-2 justify-center lg:justify-start"
                 ),
                 rx.el.span(
                     "The first AI agent to build internal Python enterprise apps.",
@@ -37,15 +48,15 @@ def video_demo() -> rx.Component:
                     class_name="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 scale-110 z-[2] group-hover:scale-125 transition-transform duration-300 backdrop",
                 ),
                 rx.image(
-                    "/landing/video/dark/video_placeholder.webp",
+                    "/landing/video/dark/video_demo_dark.webp",
                     class_name="object-cover size-full dark:block hidden scale-110",
                 ),
                 rx.image(
-                    "/landing/video/light/video_placeholder.webp",
+                    "/landing/video/light/video_demo_light.webp",
                     class_name="object-cover size-full dark:hidden block scale-110",
                 ),
                 rx.el.span(
-                    class_name="inset-0 size-full absolute z-[1] bg-[#0000001f] backdrop-blur-[1.5px] rounded-lg",
+                    class_name="inset-0 size-full absolute z-[1] dark:bg-[#0000001f] backdrop-blur-[0.1px] rounded-lg",
                 ),
                 class_name="aspect-video rounded-lg overflow-hidden cursor-pointer relative isolate group border border-slate-4",
             ),
@@ -64,31 +75,9 @@ def video_demo() -> rx.Component:
             ),
             class_name="!max-w-[70rem] !p-0 !bg-transparent overflow-hidden",
         ),
-        class_name="h-full overflow-hidden grid grid-cols-1 lg:grid-cols-2 gap-12 relative isolate items-center",
+        class_name="h-full overflow-hidden grid grid-cols-1 lg:grid-cols-2 gap-12 relative isolate items-center md:px-8 py-4 mt-10 scale-90",
     )
 
 
 def watch_preview() -> rx.Component:
-    return dialog(
-        trigger=button(
-            "Watch Preview",
-            variant="secondary",
-            size="xl",
-            class_name="w-fit flex flex-row-reverse gap-2 mt-10 -mb-10",
-            icon=rx.icon("chevron-right", size=16),
-        ),
-        content=rx.box(
-            rx.image(
-                "/logo.jpg",
-                class_name="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 z-[-1] rounded-md",
-            ),
-            rx.video(
-                url=DEMO_VIDEO_URL,
-                playing=True,
-                controls=False,
-                class_name="size-full z-[1]",
-            ),
-            class_name="relative isolate aspect-video bg-slate-1 rounded-2xl overflow-hidden",
-        ),
-        class_name="!max-w-[70rem] !p-0 !bg-transparent overflow-hidden",
-    )
+    return video_demo()