diff --git a/pcweb/pages/about/__init__.py b/pcweb/pages/about/__init__.py index 78fefb3f0..6fe01bbbe 100644 --- a/pcweb/pages/about/__init__.py +++ b/pcweb/pages/about/__init__.py @@ -10,6 +10,7 @@ hiring, news, square_logo, + stats, team, ) from pcweb.templates.marketing_page import marketing_page @@ -35,6 +36,7 @@ def about_page() -> rx.Component: divider(), hiring(), team(), + stats(), news(), class_name="flex flex-col relative justify-center items-center w-full", ), diff --git a/pcweb/pages/about/views/__init__.py b/pcweb/pages/about/views/__init__.py index d3f3993d1..1fbbd1185 100644 --- a/pcweb/pages/about/views/__init__.py +++ b/pcweb/pages/about/views/__init__.py @@ -5,6 +5,7 @@ from .hiring import hiring from .news import news from .square_logo import square_logo +from .stats import stats from .team import team __all__ = [ @@ -15,5 +16,6 @@ "hiring", "news", "square_logo", + "stats", "team", ] diff --git a/pcweb/pages/about/views/cards.py b/pcweb/pages/about/views/cards.py index 3f8c48727..01ea423f9 100644 --- a/pcweb/pages/about/views/cards.py +++ b/pcweb/pages/about/views/cards.py @@ -1,7 +1,7 @@ import reflex as rx import reflex_ui as ui -from pcweb.constants import REFLEX_ASSETS_CDN +from pcweb.constants import GITHUB_URL, REFLEX_ASSETS_CDN def squares_rectangle_small() -> rx.Component: @@ -50,9 +50,15 @@ def cards() -> rx.Component: card( title="Core Values", description=rx.el.p( - rx.el.b( - "Open source is at the core of Reflex. ", - class_name="font-semibold text-m-slate-12 dark:text-m-slate-3", + rx.el.a( + rx.el.b( + "Open source is at the core of Reflex. ", + class_name="font-semibold text-m-slate-12 dark:text-m-slate-3", + ), + href=GITHUB_URL, + target="_blank", + rel="noopener noreferrer", + class_name="hover:underline", ), " We build in the open, listen to our community, and believe the best developer tools are shaped by the people who use them. ", rx.el.b( diff --git a/pcweb/pages/about/views/hero.py b/pcweb/pages/about/views/hero.py index 6d7096610..ae16f3abf 100644 --- a/pcweb/pages/about/views/hero.py +++ b/pcweb/pages/about/views/hero.py @@ -7,9 +7,16 @@ def hero() -> rx.Component: return rx.el.section( rx.el.div( - rx.el.p( - "About Reflex", - class_name="text-sm font-[525] text-primary-10 dark:text-m-slate-6", + rx.el.div( + ui.icon( + "Building02Icon", + class_name="text-m-slate-7 dark:text-m-slate-6 size-4", + ), + rx.el.p( + "About Reflex", + class_name="text-sm font-[525] text-m-slate-7 dark:text-m-slate-6", + ), + class_name="flex flex-row items-center gap-2 max-lg:justify-center", ), rx.el.h1( "The Operating System ", @@ -51,23 +58,49 @@ def hero() -> rx.Component: ), rx.el.div( rx.el.div( - rx.image( - src=f"{REFLEX_ASSETS_CDN}about/alek.avif", - alt="Alek", - custom_attrs={"fetchPriority": "high"}, - class_name="size-8 rounded-full pointer-events-none", + rx.el.a( + rx.image( + src=f"{REFLEX_ASSETS_CDN}about/alek.avif", + alt="Alek", + custom_attrs={"fetchPriority": "high"}, + class_name="size-8 rounded-full", + ), + href="https://www.linkedin.com/in/aleksanderpetuskey/", + target="_blank", + rel="noopener noreferrer", + aria_label="Alek Petuskey on LinkedIn", ), - rx.image( - src=f"{REFLEX_ASSETS_CDN}about/nikhil.avif", - alt="Nikhil", - custom_attrs={"fetchPriority": "high"}, - class_name="size-8 rounded-full pointer-events-none", + rx.el.a( + rx.image( + src=f"{REFLEX_ASSETS_CDN}about/nikhil.avif", + alt="Nikhil", + custom_attrs={"fetchPriority": "high"}, + class_name="size-8 rounded-full", + ), + href="https://www.linkedin.com/in/nrao95/", + target="_blank", + rel="noopener noreferrer", + aria_label="Nikhil Rao on LinkedIn", ), class_name="flex flex-row items-center -space-x-1", ), rx.el.div( rx.el.p( - "Alek Petuskey & Nikhil Rao", + rx.el.a( + "Alek Petuskey", + href="https://www.linkedin.com/in/aleksanderpetuskey/", + target="_blank", + rel="noopener noreferrer", + class_name="hover:underline", + ), + " & ", + rx.el.a( + "Nikhil Rao", + href="https://www.linkedin.com/in/nrao95/", + target="_blank", + rel="noopener noreferrer", + class_name="hover:underline", + ), class_name="text-sm font-semibold text-m-slate-12 dark:text-m-slate-3", ), rx.el.span( diff --git a/pcweb/pages/about/views/hiring.py b/pcweb/pages/about/views/hiring.py index f16e653a0..acf6523f4 100644 --- a/pcweb/pages/about/views/hiring.py +++ b/pcweb/pages/about/views/hiring.py @@ -1,4 +1,5 @@ import reflex as rx +import reflex_ui as ui from pcweb.components.marketing_button import button from pcweb.constants import JOBS_BOARD_URL @@ -8,9 +9,16 @@ def hiring() -> rx.Component: return rx.el.section( rx.el.div( rx.el.div( - rx.el.p( - "We're Hiring", - class_name="text-sm font-[525] text-primary-10 max-lg:text-center dark:text-m-slate-6", + rx.el.div( + ui.icon( + "Briefcase01Icon", + class_name="text-m-slate-7 dark:text-m-slate-6 size-4", + ), + rx.el.p( + "We're Hiring", + class_name="text-sm font-[525] text-m-slate-7 dark:text-m-slate-6", + ), + class_name="flex flex-row items-center gap-2 max-lg:justify-center", ), rx.el.div( rx.el.h1( @@ -39,7 +47,10 @@ def hiring() -> rx.Component: rx.el.div( class_name="absolute right-0 top-0 w-px h-full bg-gradient-to-b from-transparent to-current text-m-slate-4 dark:text-m-slate-10 from-[-20%] to-100%" ), - class_name="relative flex flex-col gap-6 lg:py-24 py-16", + rx.el.div( + class_name="absolute left-0 top-0 w-px h-full bg-gradient-to-b from-transparent to-current text-m-slate-4 dark:text-m-slate-10 from-[-20%] to-100%" + ), + class_name="relative flex flex-col gap-6 lg:py-24 py-16 lg:px-12", ), rx.el.div( class_name="absolute -bottom-px right-0 w-24 h-px bg-gradient-to-l from-transparent to-current text-m-slate-4 dark:text-m-slate-10" diff --git a/pcweb/pages/about/views/news.py b/pcweb/pages/about/views/news.py index 7f08e5417..2373e9c45 100644 --- a/pcweb/pages/about/views/news.py +++ b/pcweb/pages/about/views/news.py @@ -54,11 +54,11 @@ def news() -> rx.Component: rx.el.div( ui.icon( "NotificationSquareIcon", - class_name="text-primary-10 dark:text-m-slate-6", + class_name="text-m-slate-7 dark:text-m-slate-6", ), rx.el.h2( "What's New In Reflex", - class_name="text-primary-10 dark:text-m-slate-6 text-sm font-medium", + class_name="text-m-slate-7 dark:text-m-slate-6 text-sm font-medium", ), class_name="flex flex-row items-center gap-2", ), diff --git a/pcweb/pages/about/views/stats.py b/pcweb/pages/about/views/stats.py new file mode 100644 index 000000000..8aa92b0d9 --- /dev/null +++ b/pcweb/pages/about/views/stats.py @@ -0,0 +1,36 @@ +import reflex as rx +import reflex_ui as ui + +from pcweb.constants import GITHUB_STARS + + +def stat(icon: str, value: str, label: str) -> rx.Component: + return rx.el.div( + rx.el.p( + value, + class_name="text-m-slate-12 dark:text-m-slate-3 lg:text-3xl text-2xl font-[575] tracking-tight", + ), + rx.el.div( + ui.icon( + icon, + class_name="text-m-slate-7 dark:text-m-slate-6 size-4 shrink-0 transition-all duration-300 ease-out group-hover:scale-125 group-hover:rotate-[-8deg] group-hover:text-primary-10", + stroke_width=1.5, + ), + rx.el.p( + label, + class_name="text-sm font-[475] text-m-slate-7 dark:text-m-slate-6", + ), + class_name="flex flex-row items-center gap-2 justify-center", + ), + class_name="group flex flex-col items-center gap-1.5 px-6", + ) + + +def stats() -> rx.Component: + return rx.el.section( + stat("StarIcon", f"{GITHUB_STARS // 1000}K+", "GitHub Stars"), + stat("BrowserIcon", "1M+", "Apps Built"), + stat("Building03Icon", "30%", "of Fortune 500"), + stat("UserGroupIcon", "180+", "Contributors"), + class_name="flex flex-row flex-wrap justify-center items-center lg:gap-16 gap-x-8 gap-y-8 max-w-[69rem] mx-auto lg:pt-24 pt-16 max-lg:px-6", + ) diff --git a/pcweb/pages/about/views/team.py b/pcweb/pages/about/views/team.py index cc0e54bdc..742792a7d 100644 --- a/pcweb/pages/about/views/team.py +++ b/pcweb/pages/about/views/team.py @@ -32,5 +32,11 @@ def team() -> rx.Component: rx.el.div( class_name="absolute bottom-0 left-0 w-24 h-px bg-gradient-to-r from-transparent to-current text-m-slate-4 dark:text-m-slate-10" ), + rx.el.div( + class_name="absolute top-full lg:right-24 right-6 w-px h-24 bg-gradient-to-b from-current to-transparent text-m-slate-4 dark:text-m-slate-10" + ), + rx.el.div( + class_name="absolute top-full lg:left-24 left-6 w-px h-24 bg-gradient-to-b from-current to-transparent text-m-slate-4 dark:text-m-slate-10" + ), class_name="lg:px-24 px-6 max-w-(--layout-max-width) mx-auto relative", )