hero updates

Author: carlosabadia

pcweb/pages/framework/components/hero.py

@@ -39,8 +39,7 @@ def hero() -> rx.Component:
                     variant="muted",
                     class_name="!px-[1.125ren] !py-2 !h-12 !font-semibold !text-[1.125rem] !leading-[1.625rem] !tracking-[-0.01688rem] transition-bg rounded-[0.875rem]",
                 ),
-                href=REFLEX_DEV_WEB_LANDING_FORM_URL_GET_DEMO,
-                is_external=True,
+                href="/pricing",
                 underline="none",
             ),
             class_name="flex flex-row items-center gap-4",

pcweb/pages/landing/views/hero.py

@@ -1,7 +1,9 @@
 import reflex as rx
 from reflex.experimental import ClientStateVar
 
-from .video_demo import video_demo
+from pcweb.components.new_button import button
+
+from .video_demo import video_demo, watch_preview
 
 textarea_x_pos = ClientStateVar.create(var_name="textarea_x_pos", default=0)
 textarea_y_pos = ClientStateVar.create(var_name="textarea_y_pos", default=0)
@@ -72,12 +74,12 @@ def hero() -> rx.Component:
             class_name="absolute top-[232px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover z-[1] pointer-events-none w-[31rem] h-[20.875rem] hidden lg:block bg-transparent mix-blend-overlay",
         ),
         # Small gradient
-        rx.box(
-            class_name="z-[-1] blur-[16px] absolute rounded-[64.25rem] bg-[radial-gradient(50%_50%_at_50%_50%,_light-dark(#D4CAFE,#4329AC)_0%,_rgba(21,_22,_24,_0)_100%)] w-[37rem] lg:h-[9.5rem] h-[6.5rem] overflow-hidden pointer-events-none shrink-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 lg:top-[21.5rem] top-[25.5rem] saturate-[1.25] lg:-mx-0 -mx-8 opacity-80 md:opacity-100 max-lg:opacity-50"
-        ),
+        # rx.box(
+        #     class_name="z-[-1] blur-[16px] absolute rounded-[64.25rem] bg-[radial-gradient(50%_50%_at_50%_50%,_light-dark(#D4CAFE,#4329AC)_0%,_rgba(21,_22,_24,_0)_100%)] w-[37rem] lg:h-[9.5rem] h-[6.5rem] overflow-hidden pointer-events-none shrink-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 lg:top-[21.5rem] top-[25.5rem] saturate-[1.25] lg:-mx-0 -mx-8 opacity-80 md:opacity-100 max-lg:opacity-50"
+        # ),
         # Big gradient
         rx.box(
-            class_name="z-[-1] blur-[28px] absolute rounded-[64.25rem] bg-[radial-gradient(50%_50%_at_50%_50%,_light-dark(#D4CAFE,#4329AC)_0%,_rgba(21,_22,_24,_0)_100%)] w-[60rem] lg:h-[17.5rem] h-[18.5rem] overflow-hidden pointer-events-none shrink-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 top-[28.25rem] saturate-[1.5] lg:-mx-0 -mx-8 opacity-80 md:opacity-100"
+            class_name="z-[-1] blur-[28px] absolute rounded-[64.25rem] bg-[radial-gradient(50%_50%_at_50%_50%,_light-dark(#D4CAFE,#4329AC)_0%,_rgba(21,_22,_24,_0)_100%)] w-[40rem] lg:h-[10.25rem] h-[18.5rem] overflow-hidden pointer-events-none shrink-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 top-[28.25rem] saturate-[1.5] lg:-mx-0 -mx-8 opacity-80 md:opacity-100 max-lg:hidden"
         ),
         # New Ellipse gradient
         rx.box(
@@ -90,8 +92,20 @@ def hero() -> rx.Component:
         ),
         rx.el.h2(
             "A unified platform to build and deploy all in Python.",
-            class_name="max-w-full w-full text-lg lg:text-xl text-center text-slate-9 -mt-2 font-medium mx-auto text-balance word-wrap break-words md:whitespace-pre z-[1]",
+            class_name="max-w-full w-full text-lg lg:text-xl text-center text-slate-9 font-medium mx-auto text-balance word-wrap break-words md:whitespace-pre z-[1]",
+        ),
+        rx.box(
+            rx.link(
+                button(
+                    "Get Early Access",
+                    size="xl",
+                    class_name="w-fit flex flex-row-reverse",
+                    icon=rx.icon("chevron-right", size=16),
+                ),
+                href="/pricing",
+            ),
+            watch_preview(),
+            class_name="flex flex-row gap-4 items-center z-[10] mt-2",
         ),
-        hero_box(),
-        class_name="flex flex-col justify-center items-center gap-4 mx-auto w-full max-w-[64.19rem] lg:border-x border-slate-3 pb-[6.31rem] pt-28 lg:pt-[9.65rem] relative lg:overflow-hidden overflow-visible z-[1] bg-transparent lg:bg-slate-1 lg:px-4",
+        class_name="flex flex-col justify-center items-center gap-4 mx-auto w-full max-w-[64.19rem] lg:border-x border-slate-3 pb-[6.31rem] pt-28 lg:pt-[10rem] relative lg:overflow-hidden overflow-visible z-[1] bg-transparent lg:bg-slate-1 lg:px-4",
     )

pcweb/pages/landing/views/video_demo.py

@@ -66,3 +66,29 @@ def video_demo() -> rx.Component:
         ),
         class_name="h-full overflow-hidden grid grid-cols-1 lg:grid-cols-2 gap-12 relative isolate items-center",
     )
+
+
+def watch_preview() -> rx.Component:
+    return dialog(
+        trigger=button(
+            "Watch Preview",
+            variant="secondary",
+            size="xl",
+            class_name="w-fit flex flex-row-reverse",
+            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",
+    )