hosting preview images (#1126)

* hosting preview images

* update hero patterns

pcweb/components/hosting_banner.py

@@ -33,7 +33,7 @@ def hosting_banner() -> rx.Component:
                         class_name="text-slate-12 font-semibold text-sm z-[1]",
                     ),
                     rx.el.button(
-                        "Launching Soon",
+                        "Join Now",
                         class_name="text-slate-11 h-[1.5rem] rounded-md bg-slate-4 px-1.5 text-sm font-semibold z-[1] items-center justify-center shrink-0",
                     ),
                     class_name="flex items-center gap-4",

pcweb/meta/meta.py

@@ -34,6 +34,39 @@
     {"name": "twitter:creator", "content": "@getreflex"},
 ]
 
+hosting_meta_tags = [
+    # HTML Meta Tags
+    {"name": "application-name", "content": "Reflex"},
+    {
+        "name": "keywords",
+        "content": "reflex, python, web apps, framework, open source, frontend, backend, full stack",
+    },
+    {
+        "name": "description",
+        "content": "The open-source framework to build and deploy web apps using Python.",
+    },
+    # Facebook Meta Tags
+    {"property": "og:url", "content": "https://reflex.dev/"},
+    {"property": "og:type", "content": "website"},
+    {"property": "og:title", "content": "Reflex · Web apps in Pure Python"},
+    {
+        "property": "og:description",
+        "content": "The open-source framework to build and deploy web apps using Python.",
+    },
+    {"property": "og:image", "content": "/previews/hosting_preview.png"},
+    # Twitter Meta Tags
+    {"name": "twitter:card", "content": "summary_large_image"},
+    {"property": "twitter:domain", "content": "reflex.dev"},
+    {"property": "twitter:url", "content": "https://reflex.dev/"},
+    {"name": "twitter:title", "content": "Reflex · Web apps in Pure Python"},
+    {
+        "name": "twitter:description",
+        "content": "The open-source framework to build and deploy web apps using Python.",
+    },
+    {"name": "twitter:image", "content": "/previews/hosting_preview.png"},
+    {"name": "twitter:creator", "content": "@getreflex"},
+]
+
 
 def favicons_links() -> list[rx.Component]:
     return [

pcweb/pages/hosting/hosting.py

@@ -13,10 +13,10 @@
 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
+from pcweb.meta.meta import hosting_meta_tags
 
 
-@rx.page(route="/hosting", title="Reflex · Hosting", meta=meta_tags)
+@rx.page(route="/hosting", title="Reflex · Hosting", meta=hosting_meta_tags)
 def hosting_landing() -> rx.Component:
     """Get the main Reflex landing page."""
     return rx.box(

pcweb/pages/hosting_countdown/hosting_countdown.py

@@ -8,9 +8,10 @@
 from pcweb.pages.hosting_countdown.timer import timer
 from pcweb.pages.hosting_countdown.animated_box import animated_box
 from pcweb.pages.hosting_countdown.waitlist import waitlist
+from pcweb.meta.meta import hosting_meta_tags
 
 
-@rx.page(route="/launch", title="Reflex · Launch")
+@rx.page(route="/launch", title="Reflex · Launch", meta=hosting_meta_tags)
 def hosting_countdown() -> rx.Component:
     """Get the Hosting landing page."""
     return rx.box(

pcweb/pages/pricing/pricing.py

@@ -8,9 +8,10 @@
 from pcweb.views.bottom_section.get_started import get_started
 from pcweb.pages.pricing.faq import faq
 from pcweb.pages.pricing.calculator import calculator_section
+from pcweb.meta.meta import hosting_meta_tags
 
 
-@rx.page(route="/pricing", title="Reflex · Pricing")
+@rx.page(route="/pricing", title="Reflex · Pricing", meta=hosting_meta_tags)
 def pricing() -> rx.Component:
     """Get the Pricing landing page."""
     from pcweb.components.docpage.navbar import navbar