Skip to content

ENG-8741: Web improvements #1740

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Kastier1 merged 5 commits into from
Jan 30, 2026
Merged

ENG-8741: Web improvements #1740

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ff2ecf0
web improvements
carlosabadia Jan 28, 2026
c29873a
update fonts
carlosabadia Jan 28, 2026
5325ddc
more updates
carlosabadia Jan 28, 2026
6d97dad
more updates
carlosabadia Jan 28, 2026
8c44a49
minor updates
carlosabadia Jan 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions assets/fonts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: local('Instrument Sans'),
url("/fonts/instrument-sans.woff2") format("woff2");
}

@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: local('JetBrains Mono'),
url("/fonts/jetbrains-mono.woff2") format("woff2");
}
Binary file added assets/fonts/instrument-sans.woff2
View file
Open in desktop
Binary file not shown.
Binary file added assets/fonts/jetbrains-mono.woff2
View file
Open in desktop
Binary file not shown.
Binary file modified assets/landing/ai_bento/light/bento1.avif
View file
Open in desktop
Binary file not shown.
Binary file modified assets/landing/ai_bento/light/bento2.avif
View file
Open in desktop
Binary file not shown.
Binary file modified assets/landing/ai_bento/light/bento3.avif
View file
Open in desktop
Binary file not shown.
Binary file modified assets/landing/ai_bento/light/bento4.avif
View file
Open in desktop
Binary file not shown.
Binary file modified assets/landing/ai_bento/light/bento5.avif
View file
Open in desktop
Binary file not shown.
Binary file added assets/landing/app_build/user.avif
View file
Open in desktop
Binary file not shown.
Binary file removed assets/landing/app_build/user.webp
View file
Open in desktop
Binary file not shown.
Binary file modified assets/landing/products/light/product_ai.avif
View file
Open in desktop
Binary file not shown.
Binary file modified assets/landing/products/light/product_framework.avif
View file
Open in desktop
Binary file not shown.
3 changes: 2 additions & 1 deletion pcweb/components/docpage/navbar/buttons/discord.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@ def discord() -> rx.Component:
return ui.link(
render_=ui.button(
get_icon(icon="discord_navbar", class_name="shrink-0 text-secondary-11"),
custom_attrs={"aria-label": "Discord link"},
custom_attrs={"aria-label": "Join Reflex Discord community"},
size="icon-sm",
variant="outline",
class_name="text-secondary-11",
),
to=DISCORD_URL,
custom_attrs={"aria-label": "Join Reflex Discord community"},
)
7 changes: 6 additions & 1 deletion pcweb/components/docpage/navbar/buttons/github.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,15 @@ def github() -> rx.Component:
render_=ui.button(
get_icon(icon="github_navbar", class_name="shrink-0 text-secondary-11"),
f"{GITHUB_STARS // 1000}K",
custom_attrs={"aria-label": "Github link"},
custom_attrs={
"aria-label": f"View Reflex on GitHub - {GITHUB_STARS // 1000}K stars"
},
size="sm",
variant="outline",
class_name="text-secondary-11",
),
to=GITHUB_URL,
custom_attrs={
"aria-label": f"View Reflex on GitHub - {GITHUB_STARS // 1000}K stars"
},
)
7 changes: 7 additions & 0 deletions pcweb/components/docpage/navbar/buttons/sidebar.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,18 @@ def social_menu_item(
url="/",
border: bool = False,
) -> rx.Component:
aria_labels = {
"github": "Visit Reflex on GitHub",
"twitter": "Follow Reflex on X",
"discord": "Join Reflex Discord community",
}
return rx.link(
get_icon(icon=icon, class_name="!text-slate-9"),
class_name="flex justify-center items-center gap-2 hover:bg-slate-3 px-4 py-[0.875rem] w-full h-[47px] transition-bg overflow-hidden"
+ (" border-slate-4 border-x border-solid border-y-0" if border else ""),
href=url,
is_external=True,
custom_attrs={"aria-label": aria_labels.get(icon, f"Visit {icon}")},
)


Expand Down Expand Up @@ -90,6 +96,7 @@ def navbar_sidebar_drawer(trigger) -> rx.Component:
),
on_click=toggle_color_mode,
class_name="flex flex-row justify-center items-center px-3 py-0.5 w-full h-[47px]",
custom_attrs={"aria-label": "Toggle color mode"},
),
class_name="flex flex-col items-center bg-slate-1 w-full h-full",
),
Expand Down
46 changes: 27 additions & 19 deletions pcweb/components/docpage/navbar/navbar.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -678,15 +678,14 @@ def new_component_section() -> rx.Component:
class_name="flex flex-row gap-x-0 items-center",
unstyled=True,
),
custom_attrs={"role": "menuitem"},
),
ui.navigation_menu.list(
ui.navigation_menu.item(
new_menu_trigger("Product", active_str="products"),
products_section(),
class_name="cursor-pointer",
unstyled=True,
),
class_name="xl:flex hidden flex-row items-center gap-0 lg:gap-5 2xl:gap-7 m-0 h-full list-none",
ui.navigation_menu.item(
new_menu_trigger("Product", active_str="products"),
products_section(),
class_name="cursor-pointer",
unstyled=True,
custom_attrs={"role": "menuitem"},
),
ui.navigation_menu.item(
new_menu_trigger("Docs"),
Expand All @@ -700,38 +699,44 @@ def new_component_section() -> rx.Component:
),
class_name="cursor-pointer",
unstyled=True,
custom_attrs={"role": "menuitem"},
),
ui.navigation_menu.item(
new_menu_trigger("Resources"),
new_resource_section(),
class_name="cursor-pointer",
unstyled=True,
custom_attrs={"role": "menuitem"},
),
ui.navigation_menu.item(
new_menu_trigger("Solutions", active_str="use-cases"),
solutions_section(),
class_name="cursor-pointer",
unstyled=True,
custom_attrs={"role": "menuitem"},
),
ui.navigation_menu.item(
ui.navigation_menu.item(
render_=link_item(
"Pricing",
"/pricing",
"pricing",
),
unstyled=True,
link_item(
"Pricing",
"/pricing",
"pricing",
),
class_name="xl:flex hidden",
class_name="cursor-pointer",
custom_attrs={"role": "menuitem"},
aria_label="Pricing",
unstyled=True,
),
class_name="flex flex-row items-center gap-0 lg:gap-5 2xl:gap-7 m-0 h-full list-none",
custom_attrs={"role": "menubar"},
),
ui.navigation_menu.list(
ui.navigation_menu.item(search_bar()),
ui.navigation_menu.item(github()),
ui.navigation_menu.item(discord(), class_name="xl:flex hidden"),
ui.navigation_menu.item(search_bar(), custom_attrs={"role": "menuitem"}),
ui.navigation_menu.item(github(), custom_attrs={"role": "menuitem"}),
ui.navigation_menu.item(
discord(),
class_name="xl:flex hidden",
custom_attrs={"role": "menuitem"},
),
ui.navigation_menu.item(
rx.link(
ui.button(
Expand All @@ -745,6 +750,7 @@ def new_component_section() -> rx.Component:
href=f"{REFLEX_CLOUD_URL.strip('/')}/?redirect_url={REFLEX_BUILD_URL}",
),
class_name="desktop-only",
custom_attrs={"role": "menuitem"},
),
ui.navigation_menu.item(
demo_form_dialog(
Expand All @@ -757,11 +763,13 @@ def new_component_section() -> rx.Component:
),
unstyled=True,
class_name="xl:flex hidden",
custom_attrs={"role": "menuitem"},
),
ui.navigation_menu.item(
navbar_sidebar_button(),
class_name="xl:hidden flex",
unstyled=True,
custom_attrs={"role": "menuitem"},
),
class_name="flex flex-row gap-2 m-0 h-full list-none items-center",
custom_attrs={"role": "menubar"},
Expand Down
3 changes: 2 additions & 1 deletion pcweb/components/docpage/sidebar/sidebar.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,6 +332,7 @@ def sidebar_category(name: str, url: str, icon: str, index: int):
to=url,
on_click=rx.prevent_default,
class_name="inset-0 absolute z-[-1]",
aria_label=f"Navigate to {name}",
),
class_name="w-full text-slate-9 hover:!text-slate-9 relative",
on_click=[SidebarState.set_sidebar_index(index), rx.redirect(url)],
Expand All @@ -353,7 +354,7 @@ def create_sidebar_section(
index = index.to(list)
return rx.el.li(
rx.link(
rx.el.h5(
rx.el.h2(
section_title,
class_name="font-smbold text-[0.875rem] text-slate-12 hover:text-violet-9 leading-5 tracking-[-0.01313rem] transition-color",
),
Expand Down
28 changes: 15 additions & 13 deletions pcweb/pages/blog/blog.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ def first_post_card(meta: dict, path: str) -> rx.Component:
rx.box(
rx.image(
src=meta["image"],
loading="lazy",
loading="eager",
custom_attrs={"fetchPriority": "high"},
alt="Image preview for blog post: " + str(meta["title"]),
class_name="group-hover:scale-105 w-full h-full transition-transform duration-150 ease-out object-left object-cover",
),
Expand All @@ -29,27 +30,27 @@ def first_post_card(meta: dict, path: str) -> rx.Component:
rx.moment(
str(meta["date"]),
format="MMM DD, YYYY",
class_name="font-normal text-slate-9 text-sm",
class_name="font-normal text-secondary-11 text-sm",
),
class_name="flex flex-col gap-1 p-[0.625rem_0.75rem_0rem_0.75rem] w-full",
),
rx.box(
rx.text(
meta["description"],
class_name="line-clamp-2 font-base text-slate-11",
class_name="line-clamp-2 font-base text-secondary-11",
),
rx.box(
rx.text(
meta["author"],
class_name="font-small text-slate-9 truncate overflow-hidden text-ellipsis max-w-[50%] min-w-0 flex-shrink",
class_name="font-small text-secondary-11 truncate overflow-hidden text-ellipsis max-w-[50%] min-w-0 flex-shrink",
),
rx.el.button(
rx.text(
"Read more",
class_name="font-small text-slate-9",
class_name="font-small text-secondary-11",
),
get_icon(icon="new_tab", class_name="p-[5px]"),
class_name="flex items-center border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-small pl-[5px] border rounded-md w-auto max-w-full text-slate-9 transition-bg cursor-pointer overflow-hidden flex-shrink-0",
class_name="flex items-center border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-small pl-[5px] border rounded-md w-auto max-w-full text-secondary-11 transition-bg cursor-pointer overflow-hidden flex-shrink-0",
),
class_name="flex flex-row justify-between items-center gap-1 min-w-0 w-full h-auto",
),
Expand All @@ -69,42 +70,43 @@ def card_content(meta: dict, path: str) -> rx.Component:
rx.box(
rx.image(
src=meta["image"],
loading="lazy",
loading="eager",
custom_attrs={"fetchPriority": "high"},
alt="Image preview for blog post: " + str(meta["title"]),
class_name="group-hover:scale-105 w-full h-full transition-transform duration-150 ease-out object-left object-cover",
),
class_name="relative flex-shrink-0 border-slate-5 border-b border-solid w-full h-[13.5rem] overflow-hidden",
),
rx.box(
rx.box(
rx.el.h4(
rx.el.span(
meta["title"],
class_name="font-smbold text-slate-12",
),
rx.moment(
str(meta["date"]),
format="MMM DD, YYYY",
class_name="font-normal text-slate-9 text-xs",
class_name="font-normal text-secondary-11 text-xs",
),
class_name="flex flex-col gap-1 p-[0.625rem_0.75rem_0rem_0.75rem] w-full",
),
rx.box(
rx.text(
meta["description"],
class_name="line-clamp-2 font-small text-slate-11",
class_name="line-clamp-2 font-small text-secondary-11",
),
rx.box(
rx.text(
meta["author"],
class_name="font-small text-slate-9 truncate overflow-hidden text-ellipsis max-w-[50%] min-w-0 flex-shrink",
class_name="font-small text-secondary-11 truncate overflow-hidden text-ellipsis max-w-[50%] min-w-0 flex-shrink",
),
rx.el.button(
rx.text(
"Read more",
class_name="font-small text-slate-9",
class_name="font-small text-secondary-11",
),
get_icon(icon="new_tab", class_name="p-[5px]"),
class_name="flex items-center border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-small pl-[5px] border rounded-md w-auto max-w-full text-slate-9 transition-bg cursor-pointer overflow-hidden",
class_name="flex items-center border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-small pl-[5px] border rounded-md w-auto max-w-full text-secondary-11 transition-bg cursor-pointer overflow-hidden",
),
class_name="flex flex-row justify-between items-center gap-1 w-full h-auto",
),
Expand Down
7 changes: 4 additions & 3 deletions pcweb/pages/blog/page.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ def page(document, route) -> rx.Component:
rx.box(
get_icon("arrow_right", class_name="rotate-180"),
"Back to Blog",
class_name="box-border flex justify-center items-center gap-2 border-slate-5 bg-slate-1 hover:bg-slate-3 -mb-4 px-3 py-0.5 border rounded-full font-small text-slate-9 transition-bg cursor-pointer",
class_name="box-border flex justify-center items-center gap-2 border-slate-5 bg-slate-1 hover:bg-slate-3 -mb-4 px-3 py-0.5 border rounded-full font-small text-secondary-11 transition-bg cursor-pointer",
),
underline="none",
href="/blog",
Expand All @@ -84,14 +84,15 @@ def page(document, route) -> rx.Component:
str(meta["date"]),
format="MMM DD, YYYY",
),
class_name="flex items-center gap-2 !font-normal font-small text-nowrap text-slate-9",
class_name="flex items-center gap-2 !font-normal font-small text-nowrap text-secondary-11",
),
class_name="section-header",
),
rx.image(
src=f"{meta['image']}",
alt=f"Image for blog post: {meta['title']}",
loading="lazy",
loading="eager",
custom_attrs={"fetchPriority": "high"},
class_name="rounded-[1.125rem] w-auto object-contain max-w-full max-h-[40rem]",
),
rx.box(
Expand Down
8 changes: 4 additions & 4 deletions pcweb/pages/landing/views/app_build.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ def user_profile():
return rx.el.div(
rx.el.div(
rx.image(
src="/landing/app_build/user.webp",
src="/landing/app_build/user.avif",
loading="lazy",
alt="User profile image",
class_name="object-cover pointer-events-none",
Expand Down Expand Up @@ -316,14 +316,14 @@ def graph_overview():
rx.el.div(
rx.el.span(class_name="size-4 rounded-sm bg-violet-8"),
"Peak Performance",
class_name="flex flex-row items-center gap-2 text-xs font-medium text-slate-10",
class_name="flex flex-row items-center gap-2 text-xs font-medium text-secondary-11",
),
rx.el.div(
rx.el.span(
class_name="size-4 rounded-sm bg-violet-4 dark:bg-[#151618]"
),
"Capacity Per Day",
class_name="flex flex-row items-center gap-2 text-xs font-medium text-slate-10",
class_name="flex flex-row items-center gap-2 text-xs font-medium text-secondary-11",
),
class_name="flex flex-row items-center gap-4",
),
Expand All @@ -333,7 +333,7 @@ def graph_overview():
"24 June ",
rx.el.span(" - ", class_name="text-slate-8 ml-0.5"),
" Today",
class_name="text-slate-10 dark:text-secondary-11 text-sm font-medium rounded-lg px-3.5 h-8 border border-slate-4 dark:border-[#1C2024] bg-white-1 flex items-center",
class_name="text-secondary-11 text-sm font-medium rounded-lg px-3.5 h-8 border border-slate-4 dark:border-[#1C2024] bg-white-1 flex items-center",
),
class_name="flex flex-row justify-between items-baseline w-full",
),
Expand Down
11 changes: 9 additions & 2 deletions pcweb/pages/landing/views/hero.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,7 @@ def prompt_box() -> rx.Component:
type="button",
variant="ghost",
on_click=show_default_prompt.set_value(False),
class_name="rounded-[10px] font-semibold text-slate-10 dark:text-secondary-11",
class_name="rounded-[10px] font-semibold text-secondary-11",
),
on_drop=SubmitPromptState.handle_upload(
rx.upload_files(
Expand All @@ -310,7 +310,6 @@ def prompt_box() -> rx.Component:
max_size=MAX_FILE_SIZE_BYTES,
multiple=True,
id="upload-image-button",
aria_label="Upload images",
),
ui.button(
"Build with AI",
Expand All @@ -331,6 +330,14 @@ def prompt_box() -> rx.Component:
if (window.innerWidth < 1024) {{
{show_default_prompt.set}(false);
}}
const uploadContainer = document.getElementById('upload-image-button');
if (uploadContainer) {{
const fileInput = uploadContainer.querySelector('input[type="file"]');
if (fileInput) {{
fileInput.setAttribute('aria-label', 'Upload images for AI builder');
fileInput.setAttribute('title', 'Upload images');
}}
}}
"""
),
on_submit=SubmitPromptState.redirect_to_ai_builder,
Expand Down
Loading