[DEV-868] Hosting landing page

pcweb/components/docpage/navbar/navbar.py

@@ -323,6 +323,9 @@ def new_component_section() -> rx.Component:
                     "none",
                 ),
             ),
+            nav_menu.item(
+                link_item("Hosting", "/hosting", "hosting"),
+            ),
             nav_menu.item(
                 link_item("Pricing", "/pricing", "pricing"),
             ),

pcweb/components/icons/icons.py

@@ -379,6 +379,21 @@
 </svg>
 """
 
+infinity = """<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.2513 8.33333C6.44279 8.33333 5.83464 8.95891 5.83464 10C5.83464 11.0411 6.44279 11.6667 7.2513 11.6667C7.34849 11.6667 7.52139 11.6185 7.7736 11.4352C8.0177 11.2578 8.26749 11.0034 8.50089 10.7201C8.71072 10.4654 8.89122 10.2072 9.02605 10C8.89122 9.79275 8.71072 9.53458 8.50089 9.27991C8.26749 8.99658 8.0177 8.74216 7.7736 8.56475C7.52139 8.3815 7.34849 8.33333 7.2513 8.33333ZM10.9766 10C11.1114 10.2072 11.2919 10.4654 11.5017 10.7201C11.7351 11.0034 11.9849 11.2578 12.229 11.4352C12.4812 11.6185 12.6541 11.6667 12.7513 11.6667C13.5598 11.6667 14.168 11.0411 14.168 10C14.168 8.95891 13.5598 8.33333 12.7513 8.33333C12.6541 8.33333 12.4812 8.3815 12.229 8.56475C11.9849 8.74216 11.7351 8.99658 11.5017 9.27991C11.2919 9.53458 11.1114 9.79275 10.9766 10ZM10.0013 11.5092C9.93372 11.5981 9.86222 11.6888 9.78722 11.7799C9.50572 12.1216 9.1543 12.4922 8.75339 12.7835C8.36047 13.069 7.84447 13.3333 7.2513 13.3333C5.29839 13.3333 4.16797 11.7203 4.16797 10C4.16797 8.27963 5.29839 6.66666 7.2513 6.66666C7.84447 6.66666 8.36047 6.93101 8.75339 7.21648C9.1543 7.50785 9.50572 7.87843 9.78722 8.22011C9.86222 8.31117 9.93372 8.40191 10.0013 8.49083C10.0689 8.40191 10.1404 8.31117 10.2154 8.22011C10.4969 7.87843 10.8483 7.50785 11.2492 7.21648C11.6421 6.93101 12.1581 6.66666 12.7513 6.66666C14.7042 6.66666 15.8346 8.27963 15.8346 10C15.8346 11.7203 14.7042 13.3333 12.7513 13.3333C12.1581 13.3333 11.6421 13.069 11.2492 12.7835C10.8483 12.4922 10.4969 12.1216 10.2154 11.7799C10.1404 11.6888 10.0689 11.5981 10.0013 11.5092Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.05615 1.99164C6.10678 2.44908 5.777 2.86097 5.31956 2.91161C4.25414 3.02954 3.7164 3.27651 3.33173 3.7094C2.97236 4.11383 2.74461 4.68377 2.62324 5.69967C2.5001 6.73044 2.4987 8.08905 2.4987 10C2.4987 11.9109 2.5001 13.2696 2.62324 14.3003C2.74461 15.3162 2.97236 15.8862 3.33173 16.2906C3.71639 16.7235 4.25414 16.9704 5.31956 17.0884C5.777 17.139 6.10678 17.5509 6.05615 18.0083C6.00551 18.4658 5.59363 18.7956 5.13619 18.7449C3.88577 18.6065 2.86468 18.2742 2.08587 17.3977C1.40181 16.6278 1.10784 15.6657 0.968348 14.498C0.832006 13.3568 0.832018 11.8985 0.832032 10.056V9.944C0.832018 8.10153 0.832006 6.64319 0.968348 5.50196C1.10784 4.33435 1.40181 3.37217 2.08587 2.60234C2.86468 1.72587 3.88577 1.39347 5.13618 1.25506C5.59363 1.20442 6.00551 1.5342 6.05615 1.99164ZM13.9413 1.99164C13.9919 1.5342 14.4038 1.20442 14.8612 1.25506C16.1116 1.39347 17.1327 1.72587 17.9115 2.60234C18.5956 3.37217 18.8895 4.33435 19.029 5.50196C19.1654 6.64318 19.1654 8.10152 19.1654 9.944V10.056C19.1654 11.8985 19.1654 13.3568 19.029 14.498C18.8895 15.6657 18.5956 16.6278 17.9115 17.3977C17.1327 18.2742 16.1116 18.6065 14.8612 18.7449C14.4038 18.7956 13.9919 18.4658 13.9413 18.0083C13.8906 17.5509 14.2204 17.139 14.6779 17.0884C15.7433 16.9704 16.281 16.7235 16.6657 16.2906C17.025 15.8862 17.2528 15.3162 17.3741 14.3003C17.4973 13.2696 17.4987 11.9109 17.4987 10C17.4987 8.08905 17.4973 6.73044 17.3741 5.69967C17.2528 4.68377 17.025 4.11383 16.6657 3.7094C16.281 3.27651 15.7433 3.02954 14.6779 2.91161C14.2204 2.86097 13.8906 2.44908 13.9413 1.99164Z" fill="currentColor"/>
+</svg>
+"""
+
+analytics = """<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9473 1.5874C11.8754 1.46271 11.6366 1.46173 11.159 1.45978C10.8054 1.45833 10.4348 1.45833 10.0464 1.45833H9.95103C8.12546 1.45833 6.69157 1.45832 5.57205 1.60883C4.42484 1.76307 3.51462 2.0856 2.79946 2.80076C2.0843 3.51593 1.76176 4.42614 1.60752 5.57335C1.45701 6.69287 1.45702 8.12678 1.45703 9.95233V10.0477C1.45702 11.8733 1.45701 13.3072 1.60752 14.4267C1.76176 15.5738 2.0843 16.4841 2.79946 17.1993C3.51462 17.9144 4.42484 18.2369 5.57205 18.3912C6.69157 18.5417 8.12548 18.5417 9.95103 18.5417H10.0464C11.8719 18.5417 13.3059 18.5417 14.4254 18.3912C15.5725 18.2369 16.4828 17.9144 17.1979 17.1993C17.9131 16.4841 18.2356 15.5738 18.3899 14.4267C18.5404 13.3072 18.5404 11.8733 18.5404 10.0477V9.95233C18.5404 9.564 18.5404 9.19333 18.5389 8.83967C18.5369 8.362 18.5359 8.12322 18.4113 8.05144C18.2866 7.97967 18.0557 8.1125 17.5939 8.37817C16.9524 8.74725 16.2085 8.95833 15.4154 8.95833C12.9991 8.95833 11.0404 6.99958 11.0404 4.58333C11.0404 3.79013 11.2514 3.04623 11.6205 2.40473C11.8862 1.94297 12.019 1.71208 11.9473 1.5874ZM10.6237 7.91667C10.6237 7.57149 10.3439 7.29167 9.9987 7.29167C9.65353 7.29167 9.3737 7.57149 9.3737 7.91667V14.5833C9.3737 14.9285 9.65353 15.2083 9.9987 15.2083C10.3439 15.2083 10.6237 14.9285 10.6237 14.5833V7.91667ZM14.7904 11.25C14.7904 10.9048 14.5105 10.625 14.1654 10.625C13.8202 10.625 13.5404 10.9048 13.5404 11.25V14.5833C13.5404 14.9285 13.8202 15.2083 14.1654 15.2083C14.5105 15.2083 14.7904 14.9285 14.7904 14.5833V11.25ZM6.45703 12.0833C6.45703 11.7382 6.17721 11.4583 5.83203 11.4583C5.48686 11.4583 5.20703 11.7382 5.20703 12.0833V14.5833C5.20703 14.9285 5.48686 15.2083 5.83203 15.2083C6.17721 15.2083 6.45703 14.9285 6.45703 14.5833V12.0833Z" fill="currentColor"/>
+  <path d="M12.293 4.58333C12.293 2.85744 13.6921 1.45833 15.418 1.45833C17.1439 1.45833 18.543 2.85744 18.543 4.58333C18.543 6.30923 17.1439 7.70833 15.418 7.70833C13.6921 7.70833 12.293 6.30923 12.293 4.58333Z" fill="currentColor"/>
+</svg>"""
+
+globe = """<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.04297 10.0004C6.04297 10.6487 6.08043 11.2743 6.14752 11.875H1.2395C1.11073 11.2703 1.04297 10.6431 1.04297 10C1.04297 9.35691 1.11073 8.72966 1.2395 8.125H6.14761C6.08046 8.72591 6.04297 9.35183 6.04297 10.0004ZM6.33433 6.875H1.60311C2.68989 3.95554 5.25544 1.7558 8.38922 1.18633C8.24849 1.47236 8.10167 1.78253 7.95314 2.0963L7.95255 2.09756C7.892 2.22548 7.83117 2.354 7.77034 2.48171C7.21606 3.64571 6.66043 5.13304 6.33433 6.875ZM7.6078 6.875H12.3948C12.0878 5.35751 11.5964 4.05373 11.1037 3.01913C11.0296 2.86365 10.9556 2.70647 10.8823 2.55071C10.6123 1.97738 10.3513 1.42314 10.1311 1.04258C10.0879 1.04197 10.0446 1.04166 10.0013 1.04166C9.95797 1.04166 9.91472 1.04197 9.87155 1.04258C9.6513 1.42311 9.3903 1.97731 9.12039 2.55059C9.04705 2.70636 8.97297 2.86365 8.89889 3.01913C8.40622 4.05373 7.91481 5.35751 7.6078 6.875ZM12.5966 8.125H7.40604C7.33371 8.72408 7.29297 9.35016 7.29297 10.0004C7.29297 10.6504 7.33367 11.2762 7.40594 11.875H12.5966C12.669 11.2762 12.7096 10.6504 12.7096 10.0004C12.7096 9.35016 12.6689 8.72408 12.5966 8.125ZM13.6683 6.875C13.3422 5.13304 12.7866 3.64571 12.2322 2.48171C12.1713 2.35378 12.1104 2.22506 12.0497 2.09693C11.9012 1.78316 11.7541 1.47236 11.6134 1.18633C14.7471 1.7558 17.3127 3.95554 18.3995 6.875H13.6683ZM18.7631 8.125H13.855C13.9221 8.72591 13.9596 9.35183 13.9596 10.0004C13.9596 10.6487 13.9222 11.2743 13.8551 11.875H18.7631C18.8919 11.2703 18.9596 10.6431 18.9596 10C18.9596 9.35691 18.8919 8.72966 18.7631 8.125ZM8.89889 16.9817C8.40614 15.9469 7.91463 14.6428 7.60763 13.125H12.395C12.088 14.6428 11.5965 15.9469 11.1037 16.9817C11.0305 17.1355 10.9572 17.291 10.8846 17.4451C10.6138 18.02 10.352 18.5759 10.1311 18.9574C10.0879 18.958 10.0446 18.9583 10.0013 18.9583C9.95797 18.9583 9.91472 18.958 9.87155 18.9574C9.65064 18.5759 9.3888 18.02 9.11797 17.4451L9.11755 17.4441C9.04505 17.2903 8.97205 17.1352 8.89889 16.9817ZM13.6685 13.125H18.3995C17.3127 16.0444 14.7473 18.2441 11.6136 18.8137C11.7552 18.526 11.903 18.2139 12.0524 17.8982C12.1121 17.772 12.1722 17.6452 12.2322 17.5192C12.7866 16.3549 13.3424 14.8673 13.6685 13.125ZM1.60311 13.125H6.33417C6.66024 14.8673 7.21597 16.3549 7.77034 17.5192C7.83038 17.6452 7.89042 17.772 7.95019 17.8982C8.09964 18.2139 8.24739 18.526 8.38897 18.8137C5.25531 18.2441 2.68986 16.0444 1.60311 13.125Z" fill="currentColor"/>
+</svg>"""
+
 ICONS = {
     # Socials
     "github": github,
@@ -427,6 +442,9 @@
     "python": python,
     "package": package,
     "document_code": document_code,
+    "infinity": infinity,
+    "analytics": analytics,
+    "globe": globe,
 }
 
 LiteralIcon = Literal[
@@ -474,7 +492,10 @@
     "forum",
     "python",
     "package",
-    "document_code"
+    "document_code",
+    "infinity",
+    "analytics",
+    "globe",
 ]
 
 

pcweb/components/icons/patterns.py

@@ -1,6 +1,6 @@
 import reflex as rx
 from pcweb.components.icons.icons import get_icon
-
+from pcweb.components.hosting_banner import HostingBannerState
 
 def create_pattern(
     pattern: str,
@@ -13,6 +13,7 @@ def create_pattern(
         + class_name,
     )
 
+
 def default_patterns() -> rx.Component:
     return [
         # Left
@@ -39,6 +40,7 @@ def default_patterns() -> rx.Component:
         ),
     ]
 
+
 def index_patterns() -> rx.Component:
     return [
         rx.box(
@@ -55,3 +57,21 @@ def index_patterns() -> rx.Component:
             class_name="bg-[radial-gradient(50%_50%_at_50%_50%,_var(--glow)_0%,_rgba(21,_22,_24,_0.00)_100%)] w-[56.125rem] h-[11.625rem] rounded-[56.125rem] overflow-hidden pointer-events-none shrink-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[-1] mt-[65.75rem] absolute top-0"
         ),
     ]
+
+
+def hosting_patterns() -> rx.Component:
+    return [
+        rx.image(
+            src=rx.color_mode_cond(
+                light="/hosting/light/hosting_patterns.svg",
+                dark="/hosting/dark/hosting_patterns.svg",
+            ),
+            alt="Reflex Hosting Patterns",
+            class_name="desktop-only absolute top-0 z-[-1] w-[1028px] h-[478px] pointer-events-none shrink-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+            + rx.cond(
+                HostingBannerState.show_banner,
+                " lg:mt-[24rem] mt-[3.5rem]",
+                " lg:mt-[19rem] mt-[8.5rem]",
+            ),
+        )
+    ]

pcweb/components/new_button.py

@@ -0,0 +1,92 @@
+from typing import Any, Dict, Literal, Optional
+
+import reflex as rx
+
+LiteralButtonVariant = Literal[
+    "primary", "secondary", "transparent", "destructive", "outline"
+]
+LiteralButtonSize = Literal["sm", "md", "lg", "xl", "icon-sm", "icon-md", "icon-lg", "icon-xl"]
+
+DEFAULT_CLASS_NAME = "text-sm cursor-pointer inline-flex items-center justify-center relative transition-bg shrink-0 font-sans disabled:cursor-not-allowed disabled:border disabled:border-slate-5 disabled:!bg-slate-3 disabled:!text-slate-8 transition-bg"
+
+
+def get_variant_bg_cn(variant: str) -> str:
+    """Get the background color class name for a button variant.
+
+    Args:
+        variant (str): The variant of the button.
+
+    Returns:
+        str: The background color class name.
+
+    """
+    return f"enabled:bg-gradient-to-b from-[--{variant}-9] to-[--{variant}-10] dark:to-[--{variant}-9] hover:to-[--{variant}-9] dark:hover:to-[--{variant}-10] disabled:hover:bg-[--{variant}-9]"
+
+
+BUTTON_STYLES: Dict[str, Dict[str, Dict[str, str]]] = {
+    "size": {
+        "xs": "px-1.5 h-7 rounded-md gap-1.5",
+        "sm": "px-2 h-8 rounded-lg gap-2",
+        "md": "px-2.5 h-9 rounded-[10px] gap-2.5",
+        "lg": "px-3 h-10 rounded-xl gap-3",
+        "xl": "px-3.5 h-12 rounded-[14px] gap-3.5 !text-base text-nowrap",
+        "icon-xs": "size-7 rounded-md",
+        "icon-sm": "size-8 rounded-lg",
+        "icon-md": "size-9 rounded-[10px]",
+        "icon-lg": "size-10 rounded-md",
+        "icon-xl": "size-12 rounded-[14px]",
+    },
+    "variant": {
+        "primary": lambda: f"{get_variant_bg_cn('violet')} text-[#FCFCFD] font-semibold",
+        "secondary": "bg-slate-4 hover:bg-slate-5 text-slate-11 font-semibold",
+        "transparent": "bg-transparent hover:bg-slate-3 text-slate-9 font-medium",
+        "destructive": lambda: f"{get_variant_bg_cn('red')} text-[#FCFCFD] font-semibold",
+        "outline": "bg-slate-1 hover:bg-slate-3 text-slate-9 font-medium border border-slate-5",
+    },
+}
+
+
+def button(
+    text: str = "",
+    variant: LiteralButtonVariant = "primary",
+    size: LiteralButtonSize = "sm",
+    style: Dict[str, Any] = None,
+    class_name: str = "",
+    icon: Optional[rx.Component] = None,
+    **props,
+) -> rx.Component:
+    """Create a button component.
+
+    Args:
+        text (str): The text to display on the button.
+        variant (LiteralButtonVariant, optional): The button variant. Defaults to "primary".
+        size (LiteralButtonSize, optional): The button size. Defaults to "sm".
+        style (Dict[str, Any], optional): Additional styles to apply to the button. Defaults to {}.
+        class_name (str, optional): Additional CSS classes to apply to the button. Defaults to "".
+        icon (Optional[rx.Component], optional): An optional icon component to display before the text. Defaults to None.
+        **props: Additional props to pass to the button element.
+
+    Returns:
+        rx.Component: A button component with the specified properties.
+
+    """
+    if style is None:
+        style = {}
+    variant_class = BUTTON_STYLES["variant"][variant]
+    variant_class = variant_class() if callable(variant_class) else variant_class
+
+    classes = [
+        DEFAULT_CLASS_NAME,
+        BUTTON_STYLES["size"][size],
+        variant_class,
+        class_name,
+    ]
+
+    content = [icon, text] if icon else [text]
+
+    return rx.el.button(
+        *content,
+        style=style,
+        class_name=" ".join(filter(None, classes)),
+        **props,
+    )

pcweb/constants.py

@@ -30,7 +30,7 @@
 GALLERY_FORM_URL = "https://docs.google.com/forms/d/e/1FAIpQLSfB30hXB09CZ_H0Zi684w1y1zQSScyT3Qhd1mOUrAAIq9dj3Q/viewform?usp=sf_link"
 NPMJS_URL = "https://www.npmjs.com/"
 SPLINE_URL = "https://github.com/splinetool/react-spline"
-HOSTING_URL = "https://cloud.staging.reflexcorp.run"
+HOSTING_URL = "https://cloud.reflexcorp.run"
 
 # Install urls.
 BUN_URL = "https://bun.sh"

pcweb/pages/__init__.py

@@ -11,9 +11,11 @@
 from .customers.landing import customers
 from .customers.data.customers import customers_routes
 from .gallery.apps import gallery_apps_routes
-from .hosting_countdown.hosting_countdown import hosting_countdown
+# from .hosting_countdown.hosting_countdown import hosting_countdown
 from .pricing.pricing import pricing
 from .sales import sales
+from .hosting.hosting import hosting_landing
+
 routes = [
     *[r for r in locals().values() if isinstance(r, Route) and r.add_as_page],
     *blog_routes,

pcweb/pages/hosting/hosting.py

@@ -0,0 +1,40 @@
+import reflex as rx
+
+from .views.hero import hero
+from .views.preview import preview
+from .views.deploy_animation import deploy_animation
+from .views.pricing_cards import pricing_cards
+from .views.templates import templates
+from .views.features import features
+from pcweb.pages.index.views.companies import companies
+from pcweb.components.icons.patterns import hosting_patterns
+from pcweb.components.docpage.navbar import navbar
+from pcweb.pages.index.views.get_started import get_started
+from pcweb.pages.index.views.footer_index import footer_index
+from pcweb.components.webpage.badge import badge
+from pcweb.pages.index.index_colors import index_colors
+from pcweb.meta.meta import meta_tags
+
+
+@rx.page(route="/hosting", title="Reflex · Hosting", meta=meta_tags)
+def hosting_landing() -> rx.Component:
+    """Get the main Reflex landing page."""
+    return rx.box(
+        index_colors(),
+        *hosting_patterns(),
+        navbar(),
+        rx.el.main(
+            hero(),
+            preview(),
+            # companies(),
+            deploy_animation(),
+            features(),
+            pricing_cards(),
+            templates(),
+            get_started(),
+            class_name="flex flex-col w-full justify-center items-center",
+        ),
+        footer_index(),
+        badge(),
+        class_name="flex flex-col w-full max-w-[94.5rem] justify-center items-center mx-auto px-4 lg:px-5 relative overflow-hidden",
+    )