ENG-8415: Add uses cases and templates link to landing (#1696)

Author: carlosabadia

pcweb/pages/gallery/apps.py

@@ -12,6 +12,7 @@
 from pcweb.constants import SCREENSHOT_BUCKET
 from pcweb.flexdown import xd2 as xd
 from pcweb.pages import docs
+from pcweb.pages.gallery.gallery import integrations_stack
 from pcweb.templates.gallery_app_page import gallery_app_page
 
 GALLERY_APP_SOURCES = [
@@ -187,10 +188,7 @@ def page(document, is_reflex_template: bool) -> rx.Component:
                                 "Integrations: ", class_name="text-slate-9 font-base"
                             ),
                             rx.el.div(
-                                *[
-                                    integration_image(integration)
-                                    for integration in meta.get("integrations", [])
-                                ],
+                                integrations_stack(meta.get("integrations", [])),
                                 class_name="flex flex-row gap-3.5 items-center",
                             ),
                             class_name="flex flex-row items-center gap-2 mt-2",

pcweb/pages/gallery/gallery.py

@@ -77,25 +77,36 @@ def app_dialog_with_trigger(
     )
 
 
-def integration_image(integration: str):
+def integration_image(integration: str, class_name: str = ""):
     integration_logo = integration.replace(" ", "_").lower()
-    return ui.tooltip(
-        trigger=ui.avatar.root(
-            ui.avatar.image(
-                src=rx.color_mode_cond(
-                    f"/integrations/light/{integration_logo}.svg",
-                    f"/integrations/dark/{integration_logo}.svg",
-                ),
-                unstyled=True,
-                class_name="size-full",
-            ),
-            ui.avatar.fallback(
-                unstyled=True,
+    return ui.avatar.root(
+        ui.avatar.image(
+            src=rx.color_mode_cond(
+                f"/integrations/light/{integration_logo}.svg",
+                f"/integrations/dark/{integration_logo}.svg",
             ),
             unstyled=True,
-            class_name="size-4.75 flex items-center justify-center",
+            class_name="size-full",
+        ),
+        ui.avatar.fallback(
+            unstyled=True,
+        ),
+        unstyled=True,
+        class_name=ui.cn("size-4 flex items-center justify-center", class_name),
+    )
+
+
+def integrations_stack(integrations: list[str]) -> rx.Component:
+    return rx.el.div(
+        rx.foreach(
+            integrations,
+            lambda integration: rx.el.div(
+                integration_image(integration, class_name="size-4"),
+                title=integration,
+                class_name="size-8 shrink-0 flex justify-center items-center rounded-full shadow-small border border-secondary-a5 bg-white-1 dark:bg-secondary-1",
+            ),
         ),
-        content=integration,
+        class_name="flex flex-row -space-x-2 flex-wrap gap-y-2",
     )
 
 
@@ -156,19 +167,17 @@ def extended_gallery_grid_item(
                     ),
                     rx.el.div(
                         rx.el.span(
-                            "App Integrations: ", class_name="text-slate-9 font-base"
+                            "App Integrations: ",
+                            class_name="text-slate-9 text-sm font-medium",
                         ),
                         rx.el.div(
-                            *[
-                                integration_image(integration)
-                                for integration in app_integrations
-                            ],
-                            class_name="flex flex-row gap-3.5 items-center",
+                            integrations_stack(app_integrations),
+                            class_name="flex flex-row gap-3.5 items-center flex-wrap",
                         ),
                         class_name="flex flex-row items-center gap-2 mt-2",
                     ),
                     class_name=(
-                        "flex flex-col w-full px-4 py-3 border-t border-m-slate-4 dark:border-m-slate-12 gap-4 relative pb-4",
+                        "flex flex-col w-full px-4 py-3 border-t border-m-slate-4 dark:border-m-slate-12 gap-2 relative pb-4",
                     ),
                 ),
                 class_name="flex flex-col w-full",

pcweb/pages/landing/views/use_cases.py

@@ -2,7 +2,9 @@
 import reflex_ui as ui
 from reflex.experimental.client_state import ClientStateVar
 
+from pcweb.components.icons.icons import get_icon
 from pcweb.components.numbers_pattern import numbers_pattern
+from pcweb.pages.gallery import gallery
 
 items = [
     ("Analytics", "Analytics01Icon"),
@@ -54,7 +56,7 @@ def pill_item(name: str, icon: str) -> rx.Component:
 def pills() -> rx.Component:
     return rx.el.div(
         *[pill_item(name, icon) for name, icon in items],
-        class_name="flex flex-row items-center justify-start border border-slate-4 rounded-lg shadow-small bg-white-1 divide-x divide-slate-4 h-8 mt-10 flex-nowrap overflow-x-auto max-lg:w-full lg:justify-center max-lg:overflow-y-hidden",
+        class_name="flex flex-row items-center justify-start border border-slate-4 rounded-lg shadow-small bg-white-1 divide-x divide-slate-4 h-8 mt-10 flex-nowrap overflow-x-auto max-lg:w-full lg:justify-center overflow-y-hidden",
     )
 
 
@@ -115,6 +117,29 @@ def app_card() -> rx.Component:
     )
 
 
+def bottom_link(link: str, url: str) -> rx.Component:
+    return rx.el.a(
+        rx.el.span(
+            link,
+            class_name="text-sm font-medium text-slate-12 underline-none hover:text-slate-12",
+        ),
+        get_icon(
+            "chevron_right",
+            class_name="size-4 text-slate-9 group-hover:text-slate-12 group-hover:translate-x-1 transition-all duration-300",
+        ),
+        to=url,
+        class_name="flex flex-row items-center gap-2 justify-between group h-[4rem] px-10 hover:bg-slate-2 transition-colors",
+    )
+
+
+def bottom_links() -> rx.Component:
+    return rx.el.div(
+        bottom_link("View all Use Cases", "/use-cases"),
+        bottom_link("View Templates", gallery.path),
+        class_name="grid grid-cols-2 w-full lg:border-b lg:border-x border-slate-3 max-w-[64.19rem] divide-x divide-slate-3",
+    )
+
+
 def use_cases_section() -> rx.Component:
     return rx.el.section(
         rx.el.div(
@@ -126,6 +151,7 @@ def use_cases_section() -> rx.Component:
                 class_name="max-w-[64.19rem] w-full lg:border-x border-slate-3 flex flex-col items-center mx-auto pt-20 pb-10 relative overflow-hidden",
             ),
             app_card(),
+            bottom_links(),
             class_name="relative max-w-[71.125rem] mx-auto flex flex-col items-center justify-center w-full",
         ),
         class_name="flex flex-col items-center mx-auto w-full max-w-[84.5rem]",