Update video

pcweb/components/docpage/navbar/navbar.py

@@ -553,7 +553,7 @@ def new_component_section() -> rx.Component:
                         "Book a Demo",
                         size="sm",
                         variant="primary",
-                        class_name="font-semibold whitespace-nowrap",
+                        class_name="font-semibold whitespace-nowrap max-xl:hidden",
                     ),
                 ),
                 unstyled=True,

pcweb/constants.py

@@ -44,6 +44,7 @@
 ENTERPRISE_DOCS_URL = "https://enterprise.reflex.dev"
 DATABRICKS_NOTION_URL = "https://reflex-dev.notion.site/reflex-x-databricks"
 DEMO_VIDEO_URL = "https://www.youtube.com/watch?v=lO-N_IRaWhQ"
+LAUNCH_VIDEO_URL = "https://www.youtube.com/watch?v=Hy3uhBVRdtk"
 
 # Install urls.
 BUN_URL = "https://bun.sh"
@@ -102,6 +103,7 @@
 
 # Pricing
 PRO_TIERS_TABLE = {
+    "Pro 25": {"price": 25, "credits": 500},
     "Pro 50": {"price": 50, "credits": 1000},
     "Pro 100": {"price": 100, "credits": 2000},
     "Pro 250": {"price": 250, "credits": 5000},

pcweb/pages/landing/views/social_marquee.py

@@ -21,60 +21,65 @@ class Social:
     name: str
     role: str
     text: str | rx.Component
+    url: str | None = None
+    avatar: str | None = None
 
 
 SOCIALS_1 = [
     Social(
         name="vishnudeva",
-        role="Reddit User",
+        role="Hacker News",
         text=get_normal_text(
             "Been a lurker on Hacker News for years but I created an account just so I could say how excited I am! Love the effort you're putting into ",
             get_highlight("Reflex"),
             ". Streamlit felt really painful to use whenever you want to do anything slightly out of the main path.",
         ),
+        url="https://news.ycombinator.com/item?id=35140025",
     ),
     Social(
-        name="vikinghckr",
-        role="Reddit User",
+        name="Alex",
+        role="OpenSea Co-founder",
         text=get_normal_text(
-            "I'm not exaggerating but this might just be the highest impact library I've seen. As a backend developer who has lots of great project ideas but bail at the thought of having to use JavaScript and HTML, ",
+            "Have been playing with ",
             get_highlight("Reflex"),
-            " is a godsend!",
+            " since Jan and realized I should just say, from a fellow YC member: love the architecture decisions you guys are making! ❤️",
         ),
+        avatar="/landing/social/alex_opensea.webp",
     ),
     Social(
-        name="Alex",
-        role="OpenSea Co-founder",
+        name="Andrew",
+        role="Discord",
         text=get_normal_text(
-            "Have been playing with ",
+            "I've recently started using ",
             get_highlight("Reflex"),
-            " since Jan and realized I should just say, from a fellow YC member: love the architecture decisions you guys are making! ❤️",
+            " and love it. My developer productivity is through the roof. Built a full-stack web app with stripe integration, firebase user authentication all built and looking quite nice and all done in about 2 nights of work.",
         ),
     ),
 ]
 
 SOCIALS_2 = [
     Social(
         name="PoshoDev",
-        role="Discord User",
+        role="Discord",
         text=get_normal_text(
             "I'm experimenting with ",
             get_highlight("Reflex"),
             " for the first time and I have to say that I really love the experience so far. Not needing to create frontend and backend individually for small web projects is a huge advantage. 😊",
         ),
     ),
     Social(
-        name="Andrew",
-        role="Discord User",
+        name="vikinghckr",
+        role="Hacker News",
         text=get_normal_text(
-            "I've recently started using ",
+            "I'm not exaggerating but this might just be the highest impact library I've seen. As a backend developer who has lots of great project ideas but bail at the thought of having to use JavaScript and HTML, ",
             get_highlight("Reflex"),
-            " and love it. My developer productivity is through the roof. Built a full-stack web app with stripe integration, firebase user authentication all built and looking quite nice and all done in about 2 nights of work.",
+            " is a godsend!",
         ),
+        url="https://news.ycombinator.com/item?id=35140025",
     ),
     Social(
         name="Chaumy",
-        role="Discord User",
+        role="Discord",
         text=get_normal_text(
             "Finally managed to work through the docs - ",
             get_highlight("Reflex"),
@@ -91,6 +96,11 @@ def social_card(social: Social) -> rx.Component:
             ui.gradient_profile(
                 seed=social.name,
                 class_name="size-9 rounded-full",
+            )
+            if not social.avatar
+            else rx.image(
+                src=social.avatar,
+                class_name="size-9 rounded-full",
             ),
             rx.el.div(
                 rx.el.span(
@@ -103,15 +113,19 @@ def social_card(social: Social) -> rx.Component:
             ),
             class_name="flex flex-row gap-4 mt-auto",
         ),
-        # rx.el.a(
-        #     to=social.url,
-        #     target="_blank",
-        #     class_name="absolute inset-0",
-        # ),
-        # ui.icon(
-        #     "ArrowUpRight01Icon",
-        #     class_name="group-hover:opacity-100 opacity-0 scale-50 group-hover:scale-100 transition-all duration-100 absolute bottom-4 right-4 size-5 text-primary-11 origin-bottom-left ease-in-out",
-        # ),
+        rx.fragment(
+            rx.el.a(
+                to=social.url,
+                target="_blank",
+                class_name="absolute inset-0",
+            ),
+            ui.icon(
+                "ArrowUpRight01Icon",
+                class_name="group-hover:opacity-100 opacity-0 scale-50 group-hover:scale-100 transition-all duration-100 absolute bottom-4 right-4 size-5 text-primary-11 origin-bottom-left ease-in-out",
+            ),
+        )
+        if social.url
+        else None,
         class_name="flex flex-col gap-4 bg-slate-1 hover:bg-slate-2 transition-colors relative w-[22.5rem] h-[15rem] flex-shrink-0 p-6 group border-slate-4 py-10",
     )
 

pcweb/pages/landing/views/social_stats.py

@@ -7,8 +7,8 @@
 
 def stat(icon: str, text: str) -> rx.Component:
     return rx.el.section(
-        get_icon(icon, class_name="text-primary-9"),
-        rx.el.span(text, class_name="font-medium text-sm text-slate-12"),
+        get_icon(icon, class_name="text-primary-9 [&_svg]:!size-5"),
+        rx.el.span(text, class_name="font-medium text-lg text-slate-12"),
         class_name="flex flex-row items-center gap-2",
     )
 

pcweb/pages/landing/views/video.py

@@ -2,7 +2,7 @@
 import reflex_ui as ui
 
 from pcweb.components.dialog import dialog
-from pcweb.constants import DEMO_VIDEO_URL, REFLEX_BUILD_URL
+from pcweb.constants import LAUNCH_VIDEO_URL, REFLEX_BUILD_URL
 
 
 def video_demo() -> rx.Component:
@@ -14,12 +14,8 @@ def video_demo() -> rx.Component:
                     class_name="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 scale-100 z-[2] group-hover:scale-110 transition-transform duration-300 backdrop rounded-full bg-slate-10 size-10 flex items-center justify-center",
                 ),
                 rx.image(
-                    "/landing/video/dark/video_demo_dark.webp",
-                    class_name="object-cover size-full dark:block hidden scale-110",
-                ),
-                rx.image(
-                    "/landing/video/light/video_demo_light.webp",
-                    class_name="object-cover size-full dark:hidden block scale-110",
+                    "/landing/video/preview_video.webp",
+                    class_name="object-cover size-full scale-110",
                 ),
                 rx.el.span(
                     class_name="inset-0 size-full absolute z-[1] bg-[#00000008] backdrop-blur-[0.1px] rounded-lg",
@@ -32,7 +28,7 @@ def video_demo() -> rx.Component:
                     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(
-                    src=DEMO_VIDEO_URL,
+                    src=LAUNCH_VIDEO_URL,
                     playing=True,
                     controls=False,
                     class_name="size-full z-[1]",

pcweb/pages/pricing/plan_cards.py

@@ -24,7 +24,7 @@ class SelectedTier(TypedDict):
 
 
 class ProTierState(rx.State):
-    credits: rx.Field[int] = rx.field(default=PRO_TIERS_TABLE["Pro 50"]["credits"])
+    credits: rx.Field[int] = rx.field(default=PRO_TIERS_TABLE["Pro 25"]["credits"])
 
     @rx.event
     def redirect_to_billing(self, yearly: bool = False):
@@ -42,7 +42,7 @@ def selected_tier(self) -> SelectedTier:
         for tier_name, tier_data in PRO_TIERS_TABLE.items():
             if tier_data["credits"] == self.credits:
                 return SelectedTier(tier=tier_name, price=tier_data["price"])
-        return SelectedTier(tier="Pro 50", price=PRO_TIERS_TABLE["Pro 50"]["price"])
+        return SelectedTier(tier="Pro 25", price=PRO_TIERS_TABLE["Pro 25"]["price"])
 
 
 class Feature(NamedTuple):