Skip to content

Commit c36d8c9

Browse files
carlosabadiacarlosabadia
committed
common views
1 parent 71ffeec commit c36d8c9

19 files changed

+335
-302
lines changed

‎pcweb/pages/use_cases/common/features_1.py‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import reflex as rx
2+
3+
from pcweb.components.icons import get_icon
4+
5+
6+
def feature_card(icon: str, title: str, description: str) -> rx.Component:
7+
return rx.el.div(
8+
get_icon(icon, class_name="text-m-violet-9 dark:text-m-violet-10 shrink-0"),
9+
rx.el.span(title, class_name="font-semibold text-slate-12 text-lg mt-2"),
10+
rx.el.p(
11+
description,
12+
class_name="text-m-slate-11 dark:text-m-slate-9 text-sm font-medium",
13+
),
14+
class_name="flex flex-col items-start gap-2 p-10 lg:border-r border-b border-slate-3",
15+
)

‎pcweb/pages/use_cases/common/features_2.py‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import reflex as rx
2+
3+
from pcweb.components.icons import get_icon
4+
5+
6+
def feature_card(icon: str, stat: str, title: str, description: str) -> rx.Component:
7+
return rx.el.div(
8+
get_icon(icon, class_name="text-m-violet-9 dark:text-m-violet-10 shrink-0"),
9+
rx.el.span(
10+
stat,
11+
class_name="font-semibold text-m-violet-9 dark:text-m-violet-10 text-sm mt-4",
12+
),
13+
rx.el.span(title, class_name="font-semibold text-slate-12 text-lg mt-4"),
14+
rx.el.p(
15+
description,
16+
class_name="text-m-slate-11 dark:text-m-slate-9 text-sm font-medium mt-2",
17+
),
18+
class_name="flex flex-col items-start p-10",
19+
)

‎pcweb/pages/use_cases/common/final_section.py‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import reflex as rx
2+
import reflex_ui as ui
3+
from reflex_ui.blocks.calcom import get_cal_attrs
4+
5+
from pcweb.constants import REFLEX_BUILD_URL
6+
from pcweb.pages.pricing.plan_cards import radial_circle
7+
8+
9+
def right_content(h1: str, description: str) -> rx.Component:
10+
return rx.el.div(
11+
rx.el.h2(
12+
h1,
13+
class_name="text-slate-12 text-2xl font-semibold",
14+
),
15+
rx.el.p(
16+
description,
17+
class_name="text-m-slate-11 dark:text-m-slate-9 text-sm font-medium mt-2",
18+
),
19+
ui.link(
20+
render_=ui.button(
21+
"Go to the builder",
22+
size="lg",
23+
variant="outline",
24+
class_name="w-fit font-semibold lg:mt-auto mt-8 text-m-slate-11 dark:text-m-slate-9 border-m-slate-5 dark:border-m-slate-12",
25+
),
26+
to=REFLEX_BUILD_URL,
27+
target="_blank",
28+
),
29+
class_name="flex flex-col lg:p-20 p-8 h-full",
30+
)
31+
32+
33+
def left_content(h1: str, description: str) -> rx.Component:
34+
return rx.el.div(
35+
radial_circle(class_name="dark:opacity-50"),
36+
rx.el.h2(
37+
h1,
38+
class_name="text-slate-12 lg:text-3xl text-2xl font-semibold",
39+
),
40+
rx.el.p(
41+
description,
42+
class_name="text-m-slate-11 dark:text-m-slate-9 text-sm font-medium",
43+
),
44+
ui.button(
45+
ui.icon("Calendar04Icon"),
46+
"Schedule a demo",
47+
size="lg",
48+
custom_attrs=get_cal_attrs(),
49+
class_name="w-fit font-semibold mt-4",
50+
),
51+
class_name="flex flex-col gap-4 items-start justify-center lg:py-20 py-8 lg:pl-20 pl-8 lg:pr-[7.5rem] pr-8 relative overflow-hidden min-h-fit",
52+
)

‎pcweb/pages/use_cases/common/hero.py‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import reflex as rx
2+
import reflex_ui as ui
3+
from reflex_ui.blocks.calcom import get_cal_attrs
4+
5+
from pcweb.components.numbers_pattern import numbers_pattern
6+
7+
8+
def left_content(
9+
h1: str, h1_accent: str, h2: str, button_1: str, button_2: str
10+
) -> rx.Component:
11+
return rx.el.div(
12+
rx.el.h1(
13+
h1,
14+
rx.el.span(
15+
h1_accent,
16+
class_name="text-m-violet-11",
17+
),
18+
class_name="text-slate-12 lg:text-5xl text-3xl font-semibold",
19+
),
20+
rx.el.h2(
21+
h2,
22+
class_name="text-m-slate-11 dark:text-slate-9 text-base font-medium",
23+
),
24+
rx.el.div(
25+
ui.button(
26+
button_1,
27+
size="lg",
28+
class_name="font-semibold",
29+
custom_attrs=get_cal_attrs(),
30+
),
31+
ui.button(
32+
button_2,
33+
size="lg",
34+
variant="outline",
35+
class_name="font-semibold text-m-slate-11 dark:text-slate-9 border-m-slate-5 dark:border-m-slate-12",
36+
custom_attrs=get_cal_attrs(),
37+
),
38+
class_name="flex lg:flex-row flex-col items-center max-lg:justify-center gap-4 mt-2",
39+
),
40+
class_name="flex flex-col gap-6 max-lg:items-center max-lg:justify-center max-lg:text-center",
41+
)
42+
43+
44+
def feature_row(icon: str, title: str) -> rx.Component:
45+
return rx.el.div(
46+
ui.icon(
47+
icon,
48+
class_name="size-5 text-m-violet-11 dark:text-m-violet-10 shrink-0",
49+
stroke_width=1.5,
50+
),
51+
rx.el.span(title, class_name="font-medium text-slate-12 text-sm"),
52+
class_name="flex flex-row items-start gap-2.5",
53+
)
54+
55+
56+
def right_content(features: list[tuple[str, str]]) -> rx.Component:
57+
return rx.el.div(
58+
rx.el.span(
59+
"Why Reflex?",
60+
class_name="font-semibold text-slate-12 text-base",
61+
),
62+
rx.el.div(
63+
*[feature_row(icon, title) for icon, title in features],
64+
class_name="flex flex-col gap-4",
65+
),
66+
class_name="shadow-large rounded-xl border-m-slate-4 border p-8 bg-white-1 dark:bg-m-slate-14 dark:border-m-slate-12 flex flex-col gap-6 max-w-[24.25rem] w-full shrink-0",
67+
)
68+
69+
70+
def hero() -> rx.Component:
71+
return rx.el.section(
72+
numbers_pattern(
73+
side="right",
74+
class_name="lg:top-[65px] top-[45px] lg:h-[calc(100%-65px)] h-[calc(100%-45px)] max-lg:hidden",
75+
),
76+
rx.el.div(
77+
left_content(),
78+
right_content(),
79+
class_name="flex lg:flex-row flex-col lg:gap-20 gap-10 max-lg:items-center max-lg:justify-center max-lg:text-center",
80+
),
81+
class_name="flex flex-col justify-center items-center gap-4 mx-auto w-full max-w-[64.19rem] lg:border-x border-slate-3 pb-[3rem] pt-32 lg:pt-[11.5rem] lg:pb-[7.5rem] relative lg:overflow-hidden overflow-hidden z-[1] lg:px-10",
82+
)

‎pcweb/pages/use_cases/common/quote.py‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import reflex as rx
2+
3+
4+
def quote_card(
5+
h1: str, h2: str, description: str, quote: str, name: str
6+
) -> rx.Component:
7+
return rx.el.div(
8+
rx.el.div(
9+
rx.el.div(
10+
rx.el.h1(h1, class_name="text-slate-12 text-2xl font-semibold"),
11+
rx.el.h2(
12+
h2,
13+
class_name="text-m-violet-11 dark:text-m-violet-10 text-2xl font-semibold",
14+
),
15+
class_name="flex flex-col",
16+
),
17+
rx.el.p(
18+
description,
19+
class_name="text-m-slate-11 dark:text-m-slate-9 text-sm font-medium",
20+
),
21+
class_name="flex flex-col gap-6 border-b border-m-slate-4 dark:border-m-slate-12 p-10",
22+
),
23+
rx.el.div(
24+
rx.el.p(quote, class_name="text-slate-12 text-lg font-semibold"),
25+
rx.el.p(
26+
name,
27+
class_name="text-m-slate-11 dark:text-m-slate-9 text-base font-medium",
28+
),
29+
class_name="flex flex-col gap-2 p-10",
30+
),
31+
class_name="flex flex-col border border-m-slate-4 dark:border-m-slate-12 shadow-small rounded-[1.125rem] bg-white-1 dark:bg-m-slate-14",
32+
)

‎pcweb/pages/use_cases/common/social_proof.py‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import reflex as rx
2+
import reflex_ui as ui
3+
4+
5+
def first_card(title: str) -> rx.Component:
6+
return rx.el.div(
7+
ui.icon(
8+
"CheckmarkBadge02Icon",
9+
class_name="text-m-slate-11 dark:text-m-slate-9 shrink-0",
10+
),
11+
rx.el.span(
12+
title,
13+
class_name="text-m-slate-11 dark:text-m-slate-9 text-sm font-medium text-nowrap",
14+
),
15+
class_name="flex flex-row gap-2.5 items-center max-lg:justify-center lg:col-span-2 px-10 h-full max-lg:h-[10.75rem] max-lg:w-full",
16+
)
17+
18+
19+
def social_proof_card(image: str) -> rx.Component:
20+
return rx.el.div(
21+
rx.image(
22+
src=rx.color_mode_cond(
23+
f"/companies/light/{image}.svg", f"/companies/dark/{image}.svg"
24+
),
25+
loading="lazy",
26+
alt=f"{image} logo",
27+
),
28+
class_name="flex justify-center items-center lg:size-[10.75rem] max-lg:h-[10.75rem] max-lg:w-full",
29+
)
30+
31+
32+
def social_proof(title: str, images: list[str]) -> rx.Component:
33+
return rx.el.div(
34+
first_card(title),
35+
*[social_proof_card(image) for image in images],
36+
class_name="grid lg:grid-cols-6 grid-cols-1 justify-center items-center mx-auto w-full max-w-[64.19rem] lg:border-x border-slate-3 lg:divide-x divide-slate-3 lg:border-t max-lg:divide-y",
37+
)

‎pcweb/pages/use_cases/common/stats.py‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import reflex as rx
2+
3+
4+
def stat_card(stat: str, title: str, description: str) -> rx.Component:
5+
return rx.el.div(
6+
rx.el.span(
7+
stat,
8+
class_name="font-semibold text-m-violet-9 dark:text-m-violet-10 text-3xl",
9+
),
10+
rx.el.span(title, class_name="font-semibold text-slate-12 text-sm"),
11+
rx.el.p(
12+
description,
13+
class_name="text-m-slate-11 dark:text-m-slate-9 text-sm font-medium",
14+
),
15+
class_name="flex flex-col items-start p-10 gap-2",
16+
)

‎pcweb/pages/use_cases/common/text_section.py‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import reflex as rx
2+
3+
from pcweb.components.numbers_pattern import numbers_pattern
4+
5+
6+
def content(header: str, description: str | None = None) -> rx.Component:
7+
return rx.el.div(
8+
rx.el.h2(
9+
header,
10+
class_name="max-w-full w-full lg:text-3xl text-2xl text-center text-slate-12 font-semibold",
11+
),
12+
rx.el.p(
13+
description,
14+
class_name="text-m-slate-11 dark:text-slate-9 text-sm font-medium text-center",
15+
)
16+
if description
17+
else None,
18+
class_name="flex flex-col gap-4 items-center mx-auto w-full relative overflow-hidden max-w-[26.5rem] text-center",
19+
)
20+
21+
22+
def text_section(header: str, description: str) -> rx.Component:
23+
return rx.el.section(
24+
numbers_pattern(side="left", reverse=True, class_name="left-0 top-0"),
25+
numbers_pattern(side="right", reverse=True, class_name="right-0 top-0"),
26+
content(header, description),
27+
class_name="flex flex-col items-center mx-auto w-full max-w-[64.19rem] lg:border-x border-slate-3 relative overflow-hidden py-20 border-t",
28+
)

‎pcweb/pages/use_cases/finance/views/features_1.py‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,6 @@
11
import reflex as rx
22

3-
from pcweb.components.icons import get_icon
4-
5-
6-
def feature_card(icon: str, title: str, description: str) -> rx.Component:
7-
return rx.el.div(
8-
get_icon(icon, class_name="text-m-violet-9 dark:text-m-violet-10 shrink-0"),
9-
rx.el.span(title, class_name="font-semibold text-slate-12 text-lg mt-2"),
10-
rx.el.p(
11-
description,
12-
class_name="text-m-slate-11 dark:text-m-slate-9 text-sm font-medium",
13-
),
14-
class_name="flex flex-col items-start gap-2 p-10 lg:border-r border-b border-slate-3",
15-
)
3+
from pcweb.pages.use_cases.common.features_1 import feature_card
164

175

186
def features_1() -> rx.Component:

‎pcweb/pages/use_cases/finance/views/features_2.py‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,6 @@
11
import reflex as rx
22

3-
from pcweb.components.icons import get_icon
4-
5-
6-
def feature_card(icon: str, stat: str, title: str, description: str) -> rx.Component:
7-
return rx.el.div(
8-
get_icon(icon, class_name="text-m-violet-9 dark:text-m-violet-10 shrink-0"),
9-
rx.el.span(
10-
stat,
11-
class_name="font-semibold text-m-violet-9 dark:text-m-violet-10 text-sm mt-4",
12-
),
13-
rx.el.span(title, class_name="font-semibold text-slate-12 text-lg mt-4"),
14-
rx.el.p(
15-
description,
16-
class_name="text-m-slate-11 dark:text-m-slate-9 text-sm font-medium mt-2",
17-
),
18-
class_name="flex flex-col items-start p-10",
19-
)
3+
from pcweb.pages.use_cases.common.features_2 import feature_card
204

215

226
def features_2() -> rx.Component:

0 commit comments

Comments
 (0)