Update about page

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",
         ),

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",
 ]

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(

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(

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"

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",
             ),

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",
+    )

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",
     )