Skip to content

Commit 23bf974

Browse files
authored
ENG-8415: Add uses cases and templates link to landing (#1696)
1 parent 840e574 commit 23bf974

File tree

3 files changed

+60
-27
lines changed

3 files changed

+60
-27
lines changed

pcweb/pages/gallery/apps.py

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
from pcweb.constants import SCREENSHOT_BUCKET
1313
from pcweb.flexdown import xd2 as xd
1414
from pcweb.pages import docs
15+
from pcweb.pages.gallery.gallery import integrations_stack
1516
from pcweb.templates.gallery_app_page import gallery_app_page
1617

1718
GALLERY_APP_SOURCES = [
@@ -187,10 +188,7 @@ def page(document, is_reflex_template: bool) -> rx.Component:
187188
"Integrations: ", class_name="text-slate-9 font-base"
188189
),
189190
rx.el.div(
190-
*[
191-
integration_image(integration)
192-
for integration in meta.get("integrations", [])
193-
],
191+
integrations_stack(meta.get("integrations", [])),
194192
class_name="flex flex-row gap-3.5 items-center",
195193
),
196194
class_name="flex flex-row items-center gap-2 mt-2",

pcweb/pages/gallery/gallery.py

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -77,25 +77,36 @@ def app_dialog_with_trigger(
7777
)
7878

7979

80-
def integration_image(integration: str):
80+
def integration_image(integration: str, class_name: str = ""):
8181
integration_logo = integration.replace(" ", "_").lower()
82-
return ui.tooltip(
83-
trigger=ui.avatar.root(
84-
ui.avatar.image(
85-
src=rx.color_mode_cond(
86-
f"/integrations/light/{integration_logo}.svg",
87-
f"/integrations/dark/{integration_logo}.svg",
88-
),
89-
unstyled=True,
90-
class_name="size-full",
91-
),
92-
ui.avatar.fallback(
93-
unstyled=True,
82+
return ui.avatar.root(
83+
ui.avatar.image(
84+
src=rx.color_mode_cond(
85+
f"/integrations/light/{integration_logo}.svg",
86+
f"/integrations/dark/{integration_logo}.svg",
9487
),
9588
unstyled=True,
96-
class_name="size-4.75 flex items-center justify-center",
89+
class_name="size-full",
90+
),
91+
ui.avatar.fallback(
92+
unstyled=True,
93+
),
94+
unstyled=True,
95+
class_name=ui.cn("size-4 flex items-center justify-center", class_name),
96+
)
97+
98+
99+
def integrations_stack(integrations: list[str]) -> rx.Component:
100+
return rx.el.div(
101+
rx.foreach(
102+
integrations,
103+
lambda integration: rx.el.div(
104+
integration_image(integration, class_name="size-4"),
105+
title=integration,
106+
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",
107+
),
97108
),
98-
content=integration,
109+
class_name="flex flex-row -space-x-2 flex-wrap gap-y-2",
99110
)
100111

101112

@@ -156,19 +167,17 @@ def extended_gallery_grid_item(
156167
),
157168
rx.el.div(
158169
rx.el.span(
159-
"App Integrations: ", class_name="text-slate-9 font-base"
170+
"App Integrations: ",
171+
class_name="text-slate-9 text-sm font-medium",
160172
),
161173
rx.el.div(
162-
*[
163-
integration_image(integration)
164-
for integration in app_integrations
165-
],
166-
class_name="flex flex-row gap-3.5 items-center",
174+
integrations_stack(app_integrations),
175+
class_name="flex flex-row gap-3.5 items-center flex-wrap",
167176
),
168177
class_name="flex flex-row items-center gap-2 mt-2",
169178
),
170179
class_name=(
171-
"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",
180+
"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",
172181
),
173182
),
174183
class_name="flex flex-col w-full",

pcweb/pages/landing/views/use_cases.py

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
import reflex_ui as ui
33
from reflex.experimental.client_state import ClientStateVar
44

5+
from pcweb.components.icons.icons import get_icon
56
from pcweb.components.numbers_pattern import numbers_pattern
7+
from pcweb.pages.gallery import gallery
68

79
items = [
810
("Analytics", "Analytics01Icon"),
@@ -54,7 +56,7 @@ def pill_item(name: str, icon: str) -> rx.Component:
5456
def pills() -> rx.Component:
5557
return rx.el.div(
5658
*[pill_item(name, icon) for name, icon in items],
57-
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",
59+
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",
5860
)
5961

6062

@@ -115,6 +117,29 @@ def app_card() -> rx.Component:
115117
)
116118

117119

120+
def bottom_link(link: str, url: str) -> rx.Component:
121+
return rx.el.a(
122+
rx.el.span(
123+
link,
124+
class_name="text-sm font-medium text-slate-12 underline-none hover:text-slate-12",
125+
),
126+
get_icon(
127+
"chevron_right",
128+
class_name="size-4 text-slate-9 group-hover:text-slate-12 group-hover:translate-x-1 transition-all duration-300",
129+
),
130+
to=url,
131+
class_name="flex flex-row items-center gap-2 justify-between group h-[4rem] px-10 hover:bg-slate-2 transition-colors",
132+
)
133+
134+
135+
def bottom_links() -> rx.Component:
136+
return rx.el.div(
137+
bottom_link("View all Use Cases", "/use-cases"),
138+
bottom_link("View Templates", gallery.path),
139+
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",
140+
)
141+
142+
118143
def use_cases_section() -> rx.Component:
119144
return rx.el.section(
120145
rx.el.div(
@@ -126,6 +151,7 @@ def use_cases_section() -> rx.Component:
126151
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",
127152
),
128153
app_card(),
154+
bottom_links(),
129155
class_name="relative max-w-[71.125rem] mx-auto flex flex-col items-center justify-center w-full",
130156
),
131157
class_name="flex flex-col items-center mx-auto w-full max-w-[84.5rem]",

0 commit comments

Comments
 (0)