Skip to content

Commit bd83475

Browse files
LineIndentLineIndent
authored
[HOS-676] affiliates page (#1340)
* affiliates page * more ui stuff * more ui * ui * merge main * import fix --------- Co-authored-by: pourhakimi <[email protected]>
1 parent 76ac445 commit bd83475

File tree

6 files changed

+258
-26
lines changed

6 files changed

+258
-26
lines changed

‎pcweb/components/docpage/navbar/navbar.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,7 @@ def new_resource_section():
265265
_company_items = [
266266
{"label": "Newsletter", "url": "#newsletter", "icon": "mails"},
267267
{"label": "Blog", "url": "/blog", "icon": "library-big"},
268+
{"label": "Affiliates", "url": "/affiliates", "icon": "network"},
268269
]
269270

270271
_open_source_items = [

‎pcweb/pages/__init__.py‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
11
from pcweb.route import Route
2-
2+
from .affiliates import affiliates as affiliates
33
from .blog import blog_routes
44
from .changelog import changelog as changelog
5+
from .customers.data.customers import customers_routes
6+
from .customers.data.customers import customers_routes
7+
from .customers.landing import customers as customers
8+
from .customers.landing import customers as customers
59
from .docs import doc_routes
10+
from .errors import errors as errors
11+
from .errors import errors as errors
612
from .faq import faq as faq
713
from .framework.framework import framework as framework
8-
from .page404 import page404 as page404
9-
from .errors import errors as errors
1014
from .gallery import gallery as gallery
11-
from .customers.landing import customers as customers
12-
from .customers.data.customers import customers_routes
15+
from .gallery import gallery as gallery
1316
from .gallery.apps import gallery_apps_routes
17+
from .gallery.apps import gallery_apps_routes
18+
from .hosting.hosting import hosting_landing as hosting_landing
19+
from .hosting.hosting import hosting_landing as hosting_landing
20+
from .landing.landing import landing as landing
21+
from .page404 import page404 as page404
22+
from .page404 import page404 as page404
23+
from .pricing.pricing import pricing as pricing
24+
1425
# from .hosting_countdown.hosting_countdown import hosting_countdown as hosting_countdown
1526
from .pricing.pricing import pricing as pricing
1627
from .sales import sales as sales
17-
from .hosting.hosting import hosting_landing as hosting_landing
18-
from .landing.landing import landing as landing
28+
from .sales import sales as sales
1929

2030
routes = [
2131
*[r for r in locals().values() if isinstance(r, Route) and r.add_as_page],

‎pcweb/pages/affiliates/__init__.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
from .affiliates import affiliates as affiliates

‎pcweb/pages/affiliates/affiliates.py‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
import reflex as rx
2+
3+
from pcweb.components.button import button
4+
from pcweb.components.docpage.navbar import navbar
5+
from pcweb.components.webpage.badge import badge
6+
from pcweb.pages.framework.index_colors import index_colors
7+
from pcweb.pages.framework.views.footer_index import footer_index
8+
from pcweb.pages.hosting.views.features import grid
9+
10+
numbers = {
11+
"1": """
12+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
13+
<path d="M10.5 8.5L12.5 7V17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
14+
<path d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
15+
</svg>
16+
""",
17+
"2": """
18+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none" class="text-purple-10">
19+
<path d="M9 10C9 8.34315 10.3431 7 12 7C13.6569 7 15 8.34315 15 10C15 12.0786 12.1196 13.9172 10.3503 14.8505C9.54685 15.2743 9 16.0917 9 17H15" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
20+
<path d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
21+
</svg>
22+
23+
""",
24+
"3": """
25+
26+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
27+
<path d="M12.5 12H11.5M12.5 12C13.8807 12 15 10.8807 15 9.5C15 8.11929 13.8807 7 12.5 7H11.5C10.1193 7 9 8.11929 9 9.5M12.5 12C13.8807 12 15 13.1193 15 14.5C15 15.8807 13.8807 17 12.5 17H11.5C10.1193 17 9 15.8807 9 14.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
28+
<path d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
29+
</svg>
30+
""",
31+
"4": """
32+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
33+
<path d="M15 7V12.5M15 12.5V17M15 12.5H9.43601C9.19521 12.5 9 12.3048 9 12.064C9 12.0216 9.00619 11.9794 9.01839 11.9387L10.5 7" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
34+
<path d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
35+
</svg>
36+
37+
""",
38+
}
39+
40+
41+
def affiliates_title():
42+
return rx.box(
43+
rx.heading(
44+
"Reflex Affiliate Program",
45+
class_name="gradient-heading font-x-large lg:font-xxx-large text-start text-transparent lg:text-center",
46+
),
47+
rx.text(
48+
"Become a Reflex partner in under 5 minutes and start earning 50% of your referrals’ subscription revenue for their first six months—join today!",
49+
class_name="font-md text-balance text-slate-9",
50+
),
51+
class_name="section-header",
52+
)
53+
54+
55+
def feature_card(icon: str, title: str, description: str) -> rx.Component:
56+
return rx.box(
57+
rx.box(
58+
rx.box(
59+
rx.icon(tag=icon, class_name="!text-slate-12 !size-5"),
60+
rx.text(title, class_name="text-slate-12 text-base font-medium"),
61+
class_name="flex flex-row gap-2 items-center",
62+
),
63+
rx.text(
64+
description, class_name="text-slate-9 font-medium text-sm text-start"
65+
),
66+
class_name="flex flex-col gap-2 w-[22rem] h-[9rem] px-1 lg:px-8 py-6",
67+
),
68+
class_name="border-slate-3 border-b box-border",
69+
)
70+
71+
72+
def step_box(step_number: str) -> rx.Component:
73+
"""Helper function to create a step number box with consistent styling."""
74+
return rx.box(
75+
rx.box(
76+
# rx.text(
77+
# f"Step {step_number}",
78+
# class_name="text-md text-center text-slate-10",
79+
# ),
80+
# rx.html(
81+
# numbers[step_number],
82+
# filter=rx.color_mode_cond("", "invert(0.85)"),
83+
# ),
84+
color=rx.color("accent", 5),
85+
class_name="w-full h-[5rem] flex items-center justify-center p-3 col-start-2 row-span-full row-start-1 bg-[size:10px_10px] bg-fixed bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,_transparent_0,_transparent_50%)]",
86+
),
87+
display=["none" if i <= 3 else "flex" for i in range(6)],
88+
color=rx.color("accent", 4),
89+
class_name="w-full h-[5rem] flex items-center justify-center py-3 col-start-2 row-span-full row-start-1 bg-[size:10px_10px] bg-fixed bg-[image:repeating-linear-gradient(-315deg,currentColor_0,currentColor_1px,_transparent_0,_transparent_50%)]",
90+
)
91+
92+
93+
def spacer() -> rx.Component:
94+
"""Helper function to create a consistent height spacer."""
95+
return rx.box(class_name="h-[4rem]")
96+
97+
98+
def features() -> rx.Component:
99+
return rx.el.section(
100+
grid(),
101+
rx.box(
102+
rx.box(
103+
feature_card(
104+
"frame",
105+
"Submit Your Application",
106+
"Provide your basic info to get a unique affiliate link.",
107+
),
108+
feature_card(
109+
"audio-lines",
110+
"Track Your Referrals",
111+
"Log in to your Affiliate Dashboard to see clicks, sign‑ups, and revenue data.",
112+
),
113+
spacer(),
114+
class_name="flex flex-col pt-8 lg:border-r border-slate-3",
115+
),
116+
rx.box(
117+
# Right column with steps 1 and 3
118+
spacer(),
119+
feature_card(
120+
"share-2",
121+
"Share Reflex",
122+
"Post your link anywhere—blog posts, social media, email newsletters, even your YouTube channel.",
123+
),
124+
feature_card(
125+
"dollar-sign",
126+
"Get Paid",
127+
"We'll send you 50% of each referred user's subscription revenue for their first six months.",
128+
),
129+
class_name="flex flex-col",
130+
),
131+
class_name="flex lg:flex-row flex-col justify-center items-center",
132+
),
133+
rx.link(
134+
button("Become a Partner", variant="primary", size="xl"),
135+
href="https://cal.com/forms/09dc3703-39fc-42ec-b03b-8ee32de7590f",
136+
is_external=True,
137+
class_name="p-3 border border-slate-3 rounded-[1.375rem] border-solid lg:mt-0 mt-4",
138+
),
139+
class_name="flex flex-col justify-center items-center max-w-[64.19rem] lg:border-x border-slate-3 w-full mx-auto lg:pb-[5.5rem] pb-4 relative overflow-hidden pt-10",
140+
)
141+
142+
143+
def features_small_screen():
144+
return rx.box(
145+
rx.box(
146+
rx.box(
147+
feature_card(
148+
"frame",
149+
"Submit Your Application",
150+
"Provide your basic info to get a unique affiliate link.",
151+
),
152+
class_name="flex flex-col",
153+
),
154+
rx.box(
155+
feature_card(
156+
"share-2",
157+
"Share Reflex",
158+
"Post your link anywhere—blog posts, social media, email newsletters, even your YouTube channel.",
159+
),
160+
class_name="flex flex-col",
161+
),
162+
rx.box(
163+
feature_card(
164+
"audio-lines",
165+
"Track Your Referrals",
166+
"Log in to your Affiliate Dashboard to see clicks, sign‑ups, and revenue data.",
167+
),
168+
class_name="flex flex-col",
169+
),
170+
rx.box(
171+
feature_card(
172+
"dollar-sign",
173+
"Get Paid",
174+
"We'll send you 50% of each referred user's subscription revenue for their first six months.",
175+
),
176+
class_name="flex flex-col",
177+
),
178+
class_name="grid grid-cols-1 md:grid-cols-2 gap-4",
179+
),
180+
rx.box(
181+
rx.link(
182+
button("Become a Partner", variant="primary", size="xl"),
183+
href="https://cal.com/forms/09dc3703-39fc-42ec-b03b-8ee32de7590f",
184+
is_external=True,
185+
class_name="p-3 border border-slate-3 rounded-[1.375rem] border-solid lg:mt-0 mt-4",
186+
),
187+
class_name="flex items-center justify-center",
188+
),
189+
class_name="flex flex-col justify-center",
190+
)
191+
192+
193+
@rx.page(route="/affiliates", title="Affiliates · Reflex")
194+
def affiliates() -> rx.Component:
195+
return rx.box(
196+
index_colors(),
197+
navbar(),
198+
rx.el.section(
199+
affiliates_title(),
200+
rx.box(
201+
features(),
202+
class_name="hidden lg:block", # Hide by default, show on lg screens and up
203+
),
204+
rx.box(
205+
features_small_screen(),
206+
class_name="block lg:hidden", # Show by default, hide on lg screens and up
207+
),
208+
id="affiliates",
209+
class_name="section-content",
210+
),
211+
footer_index(),
212+
badge(),
213+
class_name="flex flex-col w-full max-w-[94.5rem] justify-center items-center mx-auto px-4 lg:px-5 relative overflow-hidden",
214+
)

‎pcweb/pages/framework/views/footer_index.py‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
from datetime import datetime
2+
23
import reflex as rx
3-
from pcweb.components.icons import get_icon
4+
from reflex.style import color_mode, set_color_mode
5+
46
from pcweb.components.button import button
5-
from pcweb.pages.gallery import gallery
6-
from pcweb.pages.docs import getting_started, hosting
7-
from pcweb.pages.docs.library import library
8-
from pcweb.pages.changelog import changelog
9-
from pcweb.pages.blog import blogs
10-
from pcweb.pages.faq import faq
11-
from pcweb.pages.errors import errors
12-
from pcweb.signup import IndexState
7+
from pcweb.components.icons import get_icon
8+
from pcweb.components.icons.hugeicons import hi
139
from pcweb.constants import (
1410
ROADMAP_URL,
1511
GITHUB_URL,
@@ -18,8 +14,14 @@
1814
FORUM_URL,
1915
LINKEDIN_URL,
2016
)
21-
from pcweb.components.icons.hugeicons import hi
22-
from reflex.style import color_mode, set_color_mode
17+
from pcweb.pages.blog import blogs
18+
from pcweb.pages.changelog import changelog
19+
from pcweb.pages.docs import getting_started, hosting
20+
from pcweb.pages.docs.library import library
21+
from pcweb.pages.errors import errors
22+
from pcweb.pages.faq import faq
23+
from pcweb.pages.gallery import gallery
24+
from pcweb.signup import IndexState
2325

2426

2527
def tab_item(mode: str, icon: str) -> rx.Component:
@@ -177,6 +179,7 @@ def footer_index() -> rx.Component:
177179
footer_link("Common Errors", errors.path),
178180
footer_link("Roadmap", ROADMAP_URL),
179181
footer_link("Forum", FORUM_URL),
182+
footer_link("Affiliates", "/affiliates"),
180183
rx.box(class_name="grow"),
181184
dark_mode_toggle(),
182185
],

‎pcweb/views/footer.py‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
11
from datetime import datetime
2+
23
import reflex as rx
4+
35
from pcweb.components.icons.icons import get_icon
4-
from pcweb.pages.gallery import gallery
5-
from pcweb.pages.docs import getting_started, hosting
6-
from pcweb.pages.docs.library import library
7-
from pcweb.pages.changelog import changelog
8-
from pcweb.pages.blog import blogs
9-
from pcweb.pages.faq import faq
10-
from pcweb.pages.errors import errors
11-
from pcweb.signup import IndexState
126
from pcweb.constants import (
137
ROADMAP_URL,
148
GITHUB_URL,
@@ -17,6 +11,14 @@
1711
FORUM_URL,
1812
LINKEDIN_URL,
1913
)
14+
from pcweb.pages.blog import blogs
15+
from pcweb.pages.changelog import changelog
16+
from pcweb.pages.docs import getting_started, hosting
17+
from pcweb.pages.docs.library import library
18+
from pcweb.pages.errors import errors
19+
from pcweb.pages.faq import faq
20+
from pcweb.pages.gallery import gallery
21+
from pcweb.signup import IndexState
2022

2123

2224
def footer_link(text: str, href: str) -> rx.Component:
@@ -168,6 +170,7 @@ def footer() -> rx.Component:
168170
footer_link("Common Errors", errors.path),
169171
footer_link("Roadmap", ROADMAP_URL),
170172
footer_link("Forum", FORUM_URL),
173+
footer_link("Affiliates", "/affiliates"),
171174
rx.box(class_name="grow"),
172175
dark_mode_toggle(),
173176
],

0 commit comments

Comments
 (0)