diff --git a/pcweb/pages/gallery/apps.py b/pcweb/pages/gallery/apps.py index e2b4b33d7..41f9444a9 100644 --- a/pcweb/pages/gallery/apps.py +++ b/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", diff --git a/pcweb/pages/gallery/gallery.py b/pcweb/pages/gallery/gallery.py index d6741f945..3f82c35d2 100644 --- a/pcweb/pages/gallery/gallery.py +++ b/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", diff --git a/pcweb/pages/landing/views/use_cases.py b/pcweb/pages/landing/views/use_cases.py index a491d152b..ee00cdfae 100644 --- a/pcweb/pages/landing/views/use_cases.py +++ b/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]",