reflex-web/pcweb/pages/about/views/cards.py at 6ca2d2fcc88e9a5f41c2e23cc28f0e3a4de110f7 · reflex-dev/reflex-web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import reflex as rx
import reflex_ui as ui

from pcweb.constants import GITHUB_URL, REFLEX_ASSETS_CDN


def squares_rectangle_small() -> rx.Component:
    return rx.image(
        src=f"{REFLEX_ASSETS_CDN}common/{rx.color_mode_cond('light', 'dark')}/squares_rectangle_small.svg",
        alt="Squares Rectangle Small",
        class_name="pointer-events-none",
    )


def card(title: str, description: rx.Component, icon: str) -> rx.Component:
    return rx.el.div(
        rx.el.div(
            squares_rectangle_small(),
            class_name="absolute top-1 left-4.5",
        ),
        ui.icon(
            icon,
            class_name="text-m-slate-12 dark:text-m-slate-3 size-10 mb-8",
            stroke_width=1,
        ),
        rx.el.h2(
            title,
            class_name="text-m-slate-12 dark:text-m-slate-3 text-2xl font-semibold mb-4",
        ),
        description,
        class_name="flex flex-col rounded-xl shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_12px_24px_0_rgba(0,0,0,0.08),0_1px_1px_0_rgba(0,0,0,0.01),0_4px_8px_0_rgba(0,0,0,0.03),0_0_0_1px_#FFF_inset] lg:px-12 lg:pt-16 lg:pb-12 px-10 pt-14 pb-10 relative isolate backdrop-blur-[6px] bg-white/96 dark:bg-m-slate-11 dark:shadow-none dark:border-t dark:border-m-slate-9",
    )


def cards() -> rx.Component:
    return rx.el.section(
        card(
            title="How It Started",
            description=rx.el.p(
                "Reflex began as a simple idea: ",
                rx.el.b(
                    " building web apps in Python should feel effortless. ",
                    class_name="font-semibold text-m-slate-12 dark:text-m-slate-3",
                ),
                " What started as an internal experiment quickly grew into a community-driven framework powering over a million applications.",
                class_name="text-m-slate-7 dark:text-m-slate-6 text-base font-medium",
            ),
            icon="Plant04Icon",
        ),
        card(
            title="Core Values",
            description=rx.el.p(
                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(
                    "Transparency, collaboration, and craft ",
                    class_name="font-semibold text-m-slate-12 dark:text-m-slate-3",
                ),
                " come first.",
                class_name="text-m-slate-11 dark:text-m-slate-6 text-base font-medium",
            ),
            icon="OpenSourceIcon",
        ),
        class_name="grid grid-cols-1 lg:grid-cols-2 gap-10 max-w-[69rem] w-full mx-auto lg:pb-36 pb-24 max-lg:px-6",
    )