OPS-1160: OPS-1181: New templates page (#1784)

* init

* updates

* updates

* add integrations

* change sidebar

* updates

* final touches

* update shadows

* update test

* add some padding

* just on the left actually

* updates

* bump

Author: carlosabadia

assets/tailwind-theme.css

@@ -163,9 +163,66 @@
     --font-instrument-sans: 'Instrument Sans', sans-serif;
     --font-source-code-pro: 'Source Code Pro', monospace;
     --font-jetbrains: "JetBrains Mono", monospace;
+    /* Shadow (light) */
+    --shadow-small-adaptive: 0px 2px 5px 0px rgba(28, 32, 36, 0.03);
+    --shadow-medium-adaptive: 0px 4px 8px 0px rgba(28, 32, 36, 0.04);
+    --shadow-large-adaptive:
+        0px 24px 12px 0px rgba(28, 32, 36, 0.02),
+        0px 8px 8px 0px rgba(28, 32, 36, 0.02),
+        0px 2px 6px 0px rgba(28, 32, 36, 0.02);
+    --shadow-large-negative-adaptive:
+        0px -24px 12px 0px rgba(28, 32, 36, 0.02),
+        0px -8px 8px 0px rgba(28, 32, 36, 0.02),
+        0px -2px 6px 0px rgba(28, 32, 36, 0.02);
+    --shadow-large-negative-primary-adaptive:
+        0px -32px 48px 0px color-mix(in srgb, var(--primary-9) 8%, transparent),
+        0px -16px 32px 0px color-mix(in srgb, var(--primary-9) 10%, transparent),
+        0px -8px 24px 0px color-mix(in srgb, var(--primary-9) 12%, transparent),
+        0px -2px 16px 0px color-mix(in srgb, var(--primary-9) 14%, transparent);
+    --shadow-x-large-adaptive:
+        0 0 0 1px rgba(0, 0, 0, 0.04),
+        0 4px 8px 0 rgba(0, 0, 0, 0.02),
+        0 1px 1px 0 rgba(0, 0, 0, 0.01),
+        0 4px 8px 0 rgba(0, 0, 0, 0.03),
+        0 0 0 1px #fff inset;
+    --shadow-inner-adaptive: 0 6px 16px 0 rgba(0, 0, 0, 0.04) inset;
+    --shadow-button-outline-adaptive:
+        0 -1px 0 0 rgba(0, 0, 0, 0.08) inset,
+        0 0 0 1px rgba(0, 0, 0, 0.08) inset,
+        0 1px 2px 0 rgba(0, 0, 0, 0.02),
+        0 1px 4px 0 rgba(0, 0, 0, 0.02);
+    --shadow-card-xs-no-left-adaptive:
+        0 -1px 0 0 rgba(0, 0, 0, 0.16) inset,
+        0 1px 0 0 rgba(0, 0, 0, 0.08) inset,
+        -1px 0 0 0 rgba(0, 0, 0, 0.08) inset,
+        0 1px 2px 0 rgba(0, 0, 0, 0.02),
+        0 1px 4px 0 rgba(0, 0, 0, 0.02);
+    --shadow-card-small-adaptive:
+        0 0 0 1px rgba(0, 0, 0, 0.04),
+        0 4px 8px 0 rgba(0, 0, 0, 0.04),
+        0 1px 1px 0 rgba(0, 0, 0, 0.01),
+        0 2px 4px 0 rgba(0, 0, 0, 0.03);
     color-scheme: light dark;
 }
 
+.dark {
+    /* Shadow (dark) */
+    --shadow-small-adaptive: none;
+    --shadow-medium-adaptive: none;
+    --shadow-large-adaptive: none;
+    --shadow-large-negative-adaptive: none;
+    --shadow-large-negative-primary-adaptive:
+        0px -32px 48px 0px color-mix(in srgb, var(--primary-9) 4%, transparent),
+        0px -16px 32px 0px color-mix(in srgb, var(--primary-9) 8%, transparent),
+        0px -8px 24px 0px color-mix(in srgb, var(--primary-9) 12%, transparent),
+        0px -2px 16px 0px color-mix(in srgb, var(--primary-9) 16%, transparent);
+    --shadow-x-large-adaptive: none;
+    --shadow-inner-adaptive: none;
+    --shadow-button-outline-adaptive: none;
+    --shadow-card-xs-no-left-adaptive: none;
+    --shadow-card-small-adaptive: none;
+}
+
 @theme {
     /* Custom Palette */
     --color-white-1: var(--c-white-1);
@@ -1104,20 +1161,23 @@
     --font-mono: var(--font-jetbrains);
     /* Shadow */
     --shadow-none: none;
-    --shadow-small: 0px 2px 5px 0px light-dark(rgba(28, 32, 36, 0.03), rgba(0, 0, 0, 0));
-    --shadow-medium: 0px 4px 8px 0px light-dark(rgba(28, 32, 36, 0.04), rgba(0, 0, 0, 0));
-    --shadow-large:
-        0px 24px 12px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0)),
-        0px 8px 8px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0)),
-        0px 2px 6px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0));
-    --shadow-large-negative:
-        0px -24px 12px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0)),
-        0px -8px 8px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0)),
-        0px -2px 6px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0));
+    --shadow-small: var(--shadow-small-adaptive);
+    --shadow-medium: var(--shadow-medium-adaptive);
+    --shadow-large: var(--shadow-large-adaptive);
+    --shadow-large-negative: var(--shadow-large-negative-adaptive);
+    --shadow-large-negative-primary: var(--shadow-large-negative-primary-adaptive);
+    --shadow-x-large: var(--shadow-x-large-adaptive);
+    --shadow-inner: var(--shadow-inner-adaptive);
     --shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.04),
         0 4px 8px 0 rgba(0, 0, 0, 0.07),
         0 1px 1px 0 rgba(0, 0, 0, 0.01),
         0 0 0 1px #FFF inset;
+    --shadow-button-bordered:
+        0 0 0 1px var(--primary-9) inset,
+        0 2px 0 0 rgba(255, 255, 255, 0.22) inset;
+    --shadow-button-outline: var(--shadow-button-outline-adaptive);
+    --shadow-card-xs-no-left: var(--shadow-card-xs-no-left-adaptive);
+    --shadow-card-small: var(--shadow-card-small-adaptive);
     --shadow-card-dark: 0 0 0 1px var(--m-slate-9, #2A3037);
     --text-xs: 0.8125rem;
     --text-xs--line-height: 1.25rem;

pcweb/constants.py

@@ -14,6 +14,10 @@
     "REFLEX_DEV_WEB_GENERAL_FORM_FEEDBACK_WEBHOOK_URL"
 )
 
+REPLICATE_FLUX_SCHNELL_PREDICTIONS_URL: str = (
+    "https://api.replicate.com/v1/models/black-forest-labs/flux-schnell/predictions"
+)
+
 # pcweb urls.
 REFLEX_URL = "https://reflex.dev/"
 REFLEX_DOCS_URL = "https://reflex.dev/docs/getting-started/introduction/"

pcweb/pages/__init__.py

@@ -13,7 +13,6 @@
 from .errors import errors as errors
 from .faq import faq as faq
 from .framework.framework import framework as framework
-from .gallery import gallery as gallery
 from .gallery.apps import gallery_apps_routes
 from .hosting.hosting import hosting_landing as hosting_landing
 from .landing.landing import landing as landing
@@ -32,6 +31,8 @@
 from .pricing.pricing import pricing as pricing
 from .sales import sales as sales
 from .security.security import security_page as security_page
+from .templates import templates_landing as templates_landing
+from .templates.template_details import template_details as template_details
 from .to_be_booked import to_be_booked as to_be_booked
 from .use_cases.consulting import consulting_use_case_page as consulting_use_case_page
 from .use_cases.finance import finance_use_case_page as finance_use_case_page

pcweb/pages/framework/demos/image_gen/image_gen.py

@@ -1,8 +1,46 @@
+import os
+
+import aiohttp
 import reflex as rx
-import replicate
 
 from pcweb.components.button import button
 from pcweb.components.icons import get_icon
+from pcweb.constants import REPLICATE_FLUX_SCHNELL_PREDICTIONS_URL
+from pcweb.utils.http import default_client
+
+_REPLICATE_WAIT_SEC = 5
+
+_FLUX_SCHNELL_INPUT_DEFAULTS: dict[str, str | int | bool] = {
+    "go_fast": True,
+    "num_inference_steps": 3,
+    "num_outputs": 1,
+    "aspect_ratio": "1:1",
+    "output_format": "webp",
+    "output_quality": 80,
+}
+
+
+async def _run_flux_schnell(prompt: str) -> str:
+    token = os.environ.get("REPLICATE_API_TOKEN")
+
+    session = default_client()
+    timeout = aiohttp.ClientTimeout(total=_REPLICATE_WAIT_SEC)
+    async with session.post(
+        REPLICATE_FLUX_SCHNELL_PREDICTIONS_URL,
+        json={"input": {"prompt": prompt, **_FLUX_SCHNELL_INPUT_DEFAULTS}},
+        headers={
+            "Authorization": f"Token {token}",
+            "Prefer": f"wait={_REPLICATE_WAIT_SEC}",
+        },
+        timeout=timeout,
+    ) as resp:
+        resp.raise_for_status()
+        prediction = await resp.json()
+
+    output = prediction.get("output")
+    if not output:
+        raise RuntimeError("Replicate returned no output")
+    return str(output[0] if isinstance(output, list) else output)
 
 
 class ImageGenState(rx.State):
@@ -20,15 +58,11 @@ async def get_image(self, form_data):
         async with self:
             self.processing = True
             yield
-        input = {"prompt": prompt}
 
         try:
-            output = await replicate.async_run(
-                "black-forest-labs/flux-schnell",
-                input=input,
-            )
+            image_url = await _run_flux_schnell(prompt)
             async with self:
-                self.image_url = str(output[0])
+                self.image_url = image_url
         except Exception:
             async with self:
                 self.image_url = ""
@@ -106,7 +140,15 @@ def get_image(self, form_data):
         self.processing = True
         yield
 
-        input = {"prompt": prompt}
+        input = {
+            "prompt": prompt,
+            "go_fast": True,
+            "num_inference_steps": 3,
+            "num_outputs": 1,
+            "aspect_ratio": "1:1",
+            "output_format": "webp",
+            "output_quality": 80,
+        }
         output = replicate.run(
             "black-forest-labs/flux-schnell",
             input=input,

pcweb/pages/framework/views/footer_index.py

@@ -59,7 +59,7 @@ def logo() -> rx.Component:
             class_name="shrink-0 hidden dark:block",
         ),
         to="/",
-        class_name="block shrink-0 mr-[7rem]",
+        class_name="block shrink-0 mr-[7rem] md:hidden xl:block",
     )
 
 
@@ -199,7 +199,7 @@ def newsletter() -> rx.Component:
 
 
 @rx.memo
-def footer_index() -> rx.Component:
+def footer_index(class_name: str = "", grid_class_name: str = "") -> rx.Component:
     return rx.el.footer(
         rx.el.div(
             logo(),
@@ -235,7 +235,10 @@ def footer_index() -> rx.Component:
                 rx.el.div(
                     class_name="absolute -top-24 -right-px w-px h-24 bg-gradient-to-b from-transparent to-current text-m-slate-4 dark:text-m-slate-10 max-lg:hidden"
                 ),
-                class_name="grid grid-cols-1 lg:grid-cols-3 gap-12 w-full lg:pr-12 pb-8 lg:border-r border-m-slate-4 dark:border-m-slate-10 ml-auto relative",
+                class_name=ui.cn(
+                    "grid grid-cols-1 lg:grid-cols-3 gap-12 w-full lg:pr-12 pb-8 lg:border-r border-m-slate-4 dark:border-m-slate-10 xl:ml-auto relative",
+                    grid_class_name,
+                ),
             ),
             rx.el.div(
                 newsletter(),
@@ -259,5 +262,8 @@ def footer_index() -> rx.Component:
             ),
             class_name="flex flex-row items-center justify-between py-6 gap-4 w-full border-t border-m-slate-4 dark:border-m-slate-10 relative",
         ),
-        class_name="flex flex-col max-w-(--docs-layout-max-width) justify-center items-center w-full mx-auto mt-24 max-lg:px-4 overflow-hidden",
+        class_name=ui.cn(
+            "flex flex-col max-w-(--docs-layout-max-width) justify-center items-center w-full mx-auto mt-24 max-lg:px-4 overflow-hidden",
+            class_name,
+        ),
     )

pcweb/pages/templates/__init__.py

@@ -0,0 +1,36 @@
+import reflex as rx
+
+from pcweb.meta.meta import create_meta_tags
+from pcweb.pages.framework.views.footer_index import footer_index
+from pcweb.pages.templates.templates_state import TemplatesState
+from pcweb.pages.templates.views import templates_grid, templates_sidebar
+from pcweb.templates.secondary_page import secondary_page
+
+
+@secondary_page(
+    path="/templates",
+    title="Reflex Templates - Python Dashboards & Tools",
+    description="Reflex templates: dashboards, chatbots, data tools, and AI apps. Start from a template and customize in Python.",
+    meta=create_meta_tags(
+        title="Reflex Templates - Python Dashboards & Tools",
+        description="Reflex templates: dashboards, chatbots, data tools, and AI apps. Start from a template and customize in Python.",
+        image="/previews/index_preview.webp",
+    ),
+    on_load=TemplatesState.load_templates,
+)
+def templates_landing() -> rx.Component:
+    return rx.el.div(
+        rx.el.div(
+            templates_sidebar(),
+            rx.el.div(
+                templates_grid(),
+                footer_index(
+                    class_name="max-w-[109rem] px-4 xl:px-14",
+                    grid_class_name="w-fit [&>div]:min-w-[9rem]",
+                ),
+                class_name="flex flex-col flex-1 min-w-0",
+            ),
+            class_name="flex flex-row w-full max-w-[108rem] mx-auto min-h-screen",
+        ),
+        class_name="flex flex-col w-full relative overflow-x-clip",
+    )

pcweb/pages/templates/template_details/__init__.py

@@ -0,0 +1,54 @@
+import reflex as rx
+
+from pcweb.pages.framework.views.footer_index import footer_index
+from pcweb.pages.templates.template_details.views import (
+    about,
+    faq,
+    header,
+    others,
+    sidebar,
+    sidebar_mobile,
+    social,
+)
+from pcweb.pages.templates.templates_state import TemplatesState
+from pcweb.templates.secondary_page import secondary_page
+
+
+@secondary_page(
+    path="/templates/[template_name]/[template_id]",
+    title="Template Details",
+    description="Template Details",
+    image="/previews/index_preview.webp",
+    on_load=TemplatesState.load_template_details,
+)
+def template_details():
+    return rx.el.div(
+        rx.cond(
+            TemplatesState.faq_jsonld,
+            rx.el.script(TemplatesState.faq_jsonld, type="application/ld+json"),
+        ),
+        rx.cond(
+            TemplatesState.active_template,
+            rx.el.div(
+                rx.el.div(
+                    header(),
+                    sidebar_mobile(),
+                    rx.cond(TemplatesState.active_template.about, about()),
+                    rx.cond(TemplatesState.active_template.quotes, social()),
+                    rx.cond(TemplatesState.active_template.faq, faq()),
+                    others(),
+                    class_name="flex-1 flex flex-col divide-y divide-secondary-4 xl:border-r border-secondary-4 pl-4 pr-4 md:pr-0 md:pl-6 3xl:px-0",
+                ),
+                sidebar(),
+                class_name="flex flex-row w-full max-w-[108rem] mx-auto min-h-screen",
+            ),
+        ),
+        rx.el.hr(
+            class_name="h-[1px] w-full bg-m-slate-4 dark:bg-m-slate-10",
+        ),
+        footer_index(
+            class_name="max-w-[109rem]",
+            grid_class_name="w-fit [&>div]:min-w-[9rem]",
+        ),
+        class_name="flex flex-col w-full relative",
+    )

pcweb/pages/templates/template_details/views/__init__.py

@@ -0,0 +1,16 @@
+from .about import about
+from .faq import faq
+from .header import header
+from .others import others
+from .sidebar import sidebar, sidebar_mobile
+from .social import social
+
+__all__ = [
+    "about",
+    "faq",
+    "header",
+    "others",
+    "sidebar",
+    "sidebar_mobile",
+    "social",
+]

pcweb/pages/templates/template_details/views/about.py

@@ -0,0 +1,17 @@
+import reflex as rx
+
+from pcweb.pages.templates.templates_state import TemplatesState
+
+
+def about():
+    return rx.el.div(
+        rx.el.h2(
+            "About This Template",
+            class_name="text-2xl font-[575] text-secondary-12",
+        ),
+        rx.el.p(
+            TemplatesState.active_template.about,
+            class_name="text-sm text-secondary-11 font-[475]",
+        ),
+        class_name="xl:pr-16 xl:py-16 py-6 flex flex-col gap-6 w-full",
+    )