Skip to content

Commit ea75d9e

Browse files
zcesurzcesur
committed
feat: update pricing page
1 parent 9ea4668 commit ea75d9e

File tree

1 file changed

+225
-110
lines changed

1 file changed

+225
-110
lines changed

‎lib/algora_web/live/pricing_live.ex‎

Lines changed: 225 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,234 @@ defmodule AlgoraWeb.PricingLive do
7373
</div>
7474
</div>
7575
</div>
76-
7776
<div class="mx-auto grid grid-cols-1 gap-4 lg:gap-8 lg:max-w-[95rem] lg:grid-cols-2">
7877
<%= for plan <- @plans1 do %>
7978
<.pricing_card1 plan={plan} plans={@plans1} />
8079
<% end %>
8180
</div>
81+
82+
<div class="mx-auto lg:max-w-[95rem] mb-8 mt-8 lg:mt-16">
83+
<div class="flex items-start gap-4">
84+
<div class="flex-1">
85+
<h2 class="text-2xl font-semibold text-foreground mb-2">
86+
<div class="flex items-center gap-2">
87+
<.icon name="tabler-users" class="h-6 w-6 text-purple-400" /> Matching & Hiring
88+
</div>
89+
</h2>
90+
<p class="text-base text-foreground-light">
91+
Find and hire top 1% OSS engineers with confidence
92+
</p>
93+
</div>
94+
</div>
95+
</div>
96+
<div class="mx-auto grid grid-cols-1 gap-4 lg:gap-8 lg:max-w-[95rem] lg:grid-cols-2">
97+
<.link
98+
href={AlgoraWeb.Constants.get(:calendar_url)}
99+
class="group border ring-1 ring-transparent hover:ring-purple-400 rounded-xl overflow-hidden"
100+
>
101+
<div class="bg-card/75 flex flex-col h-full p-4 rounded-xl border-t-4 sm:border-t-0 sm:border-l-4 border-purple-400 group-hover:border-purple-300 group-hover:sm:border-l-8 transition-all cursor-pointer divide-y sm:divide-y-0">
102+
<div class="p-4 sm:px-6 group-hover:sm:-ml-[4px] transition-all">
103+
<div class="mb-4 flex flex-col sm:flex-row sm:justify-between gap-4">
104+
<h3 class="flex items-center gap-4 text-2xl font-semibold text-foreground">
105+
Talent Matching
106+
</h3>
107+
<.button variant="purple" size="lg" class="font-display text-lg mr-auto sm:mr-0">
108+
Contact us
109+
</.button>
110+
</div>
111+
<p class="text-foreground-light text-sm sm:text-base 2xl:pr-4">
112+
Connect with top engineers for your project
113+
</p>
114+
</div>
115+
<div class="p-4 sm:pt-2 sm:px-6 group-hover:sm:-ml-[4px] transition-all">
116+
<ul class="border-default text-sm text-foreground-lighter flex-1 space-y-3">
117+
<li class="flex flex-col">
118+
<div class="flex items-start">
119+
<div class="flex w-7 shrink-0">
120+
<.icon name="tabler-check" class="size-5 text-purple-400" />
121+
</div>
122+
<span class="text-sm xl:text-base mb-0 text-foreground">
123+
Match based on tech stack, location and granular GitHub OSS contribution data
124+
</span>
125+
</div>
126+
</li>
127+
<li class="flex flex-col">
128+
<div class="flex items-start">
129+
<div class="flex w-7 shrink-0">
130+
<.icon name="tabler-check" class="size-5 text-purple-400" />
131+
</div>
132+
<span class="text-sm xl:text-base mb-0 text-foreground">
133+
Open source: GitHub issue hypermatch
134+
</span>
135+
</div>
136+
</li>
137+
<li class="flex flex-col">
138+
<div class="flex items-start">
139+
<div class="flex w-7 shrink-0">
140+
<.icon name="tabler-check" class="size-5 text-purple-400" />
141+
</div>
142+
<span class="text-sm xl:text-base mb-0 text-foreground">
143+
Closed source: Project spec hypermatch
144+
</span>
145+
</div>
146+
</li>
147+
</ul>
148+
</div>
149+
</div>
150+
</.link>
151+
152+
<.link
153+
href={AlgoraWeb.Constants.get(:calendar_url)}
154+
class="group border ring-1 ring-transparent hover:ring-purple-400 rounded-xl overflow-hidden"
155+
>
156+
<div class="bg-card/75 flex flex-col h-full p-4 rounded-xl border-t-4 sm:border-t-0 sm:border-l-4 border-purple-400 group-hover:border-purple-300 group-hover:sm:border-l-8 transition-all cursor-pointer divide-y sm:divide-y-0">
157+
<div class="p-4 sm:px-6 group-hover:sm:-ml-[4px] transition-all">
158+
<div class="mb-4 flex flex-col sm:flex-row sm:justify-between gap-4">
159+
<h3 class="flex items-center gap-4 text-2xl font-semibold text-foreground">
160+
Hiring Platform
161+
</h3>
162+
<.button variant="purple" size="lg" class="font-display text-lg mr-auto sm:mr-0">
163+
Contact us
164+
</.button>
165+
</div>
166+
<p class="text-foreground-light text-sm sm:text-base 2xl:pr-4">
167+
End-to-end hiring with 0% placement fees
168+
</p>
169+
</div>
170+
<div class="p-4 sm:pt-2 sm:px-6 group-hover:sm:-ml-[4px] transition-all">
171+
<ul class="border-default text-sm text-foreground-lighter flex-1 space-y-3">
172+
<li class="flex flex-col">
173+
<div class="flex items-start">
174+
<div class="flex w-7 shrink-0">
175+
<.icon name="tabler-check" class="size-5 text-purple-400" />
176+
</div>
177+
<span class="text-sm xl:text-base mb-0 text-foreground">
178+
Job board that highlights applicant's OSS contributions
179+
</span>
180+
</div>
181+
</li>
182+
<li class="flex flex-col">
183+
<div class="flex items-start">
184+
<div class="flex w-7 shrink-0">
185+
<.icon name="tabler-check" class="size-5 text-purple-400" />
186+
</div>
187+
<span class="text-sm xl:text-base mb-0 text-foreground">
188+
Embed 1-click apply on careers page
189+
</span>
190+
</div>
191+
</li>
192+
<li class="flex flex-col">
193+
<div class="flex items-start">
194+
<div class="flex w-7 shrink-0">
195+
<.icon name="tabler-check" class="size-5 text-purple-400" />
196+
</div>
197+
<span class="text-sm xl:text-base mb-0 text-foreground">
198+
Automatically screen & rank candidates
199+
</span>
200+
</div>
201+
</li>
202+
<li class="flex flex-col">
203+
<div class="flex items-start">
204+
<div class="flex w-7 shrink-0">
205+
<.icon name="tabler-check" class="size-5 text-purple-400" />
206+
</div>
207+
<span class="text-sm xl:text-base mb-0 text-foreground">
208+
Schedule interviews and chat in-app
209+
</span>
210+
</div>
211+
</li>
212+
<li class="flex flex-col">
213+
<div class="flex items-start">
214+
<div class="flex w-7 shrink-0">
215+
<.icon name="tabler-check" class="size-5 text-purple-400" />
216+
</div>
217+
<span class="text-sm xl:text-base mb-0 text-foreground">
218+
Trial with bounties and contract-to-hire
219+
</span>
220+
</div>
221+
</li>
222+
<li class="flex flex-col">
223+
<div class="flex items-start">
224+
<div class="flex w-7 shrink-0">
225+
<.icon name="tabler-check" class="size-5 text-purple-400" />
226+
</div>
227+
<span class="text-sm xl:text-base mb-0 text-foreground">
228+
Engage top matches and stand out
229+
</span>
230+
</div>
231+
</li>
232+
<li class="flex flex-col">
233+
<div class="flex items-start">
234+
<div class="flex w-7 shrink-0">
235+
<.icon name="tabler-check" class="size-5 text-purple-400" />
236+
</div>
237+
<span class="text-sm xl:text-base mb-0 text-foreground">
238+
Publish jobs on Algora platform
239+
</span>
240+
</div>
241+
</li>
242+
<li class="flex flex-col">
243+
<div class="flex items-start">
244+
<div class="flex w-7 shrink-0">
245+
<.icon name="tabler-check" class="size-5 text-purple-400" />
246+
</div>
247+
<span class="text-sm xl:text-base mb-0 text-foreground">
248+
0% placement fees
249+
</span>
250+
</div>
251+
</li>
252+
<li class="flex flex-col">
253+
<div class="flex items-start">
254+
<div class="flex w-7 shrink-0">
255+
<.icon name="tabler-check" class="size-5 text-purple-400" />
256+
</div>
257+
<span class="text-sm xl:text-base mb-0 text-foreground">
258+
Recruiting partner option available
259+
</span>
260+
</div>
261+
</li>
262+
</ul>
263+
</div>
264+
</div>
265+
</.link>
266+
</div>
267+
268+
<div class="mx-auto lg:max-w-[95rem] mt-8 text-center">
269+
<div class="bg-card/75 rounded-xl p-6 border">
270+
<h3 class="text-xl font-semibold text-foreground mb-4">
271+
Why Choose Algora for Hiring?
272+
</h3>
273+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
274+
<div>
275+
<div class="mb-2 mx-auto flex items-center justify-center h-12 w-12 bg-purple-400/10 rounded-full">
276+
<.icon name="tabler-filter" class="h-8 w-8 text-purple-400" />
277+
</div>
278+
<h4 class="font-semibold text-foreground mb-1">High Signal</h4>
279+
<p class="text-sm text-foreground-light">
280+
Access pre-vetted developers with proven OSS track records
281+
</p>
282+
</div>
283+
<div>
284+
<div class="mb-2 mx-auto flex items-center justify-center h-12 w-12 bg-purple-400/10 rounded-full">
285+
<.icon name="tabler-clock" class="h-8 w-8 text-purple-400" />
286+
</div>
287+
<h4 class="font-semibold text-foreground mb-1">Save Time & Money</h4>
288+
<p class="text-sm text-foreground-light">
289+
0% placement fees and efficient matching process
290+
</p>
291+
</div>
292+
<div>
293+
<div class="mb-2 mx-auto flex items-center justify-center h-12 w-12 bg-purple-400/10 rounded-full">
294+
<.icon name="tabler-shield-check" class="h-8 w-8 text-purple-400" />
295+
</div>
296+
<h4 class="font-semibold text-foreground mb-1">Reduce Risk</h4>
297+
<p class="text-sm text-foreground-light">
298+
Trial with bounties before committing to full-time hires
299+
</p>
300+
</div>
301+
</div>
302+
</div>
303+
</div>
82304
</div>
83305
</section>
84306
@@ -146,7 +368,6 @@ defmodule AlgoraWeb.PricingLive do
146368
screenshot?: not is_nil(params["screenshot"]),
147369
page_title: "Pricing",
148370
plans1: get_plans1(),
149-
plans2: get_plans2(),
150371
faq_items: get_faq_items(),
151372
active_faq: nil
152373
)
@@ -165,7 +386,7 @@ defmodule AlgoraWeb.PricingLive do
165386
@plan.popular && "border-foreground-muted !border-2 !rounded-xl xl:-my-8",
166387
"divide-y sm:divide-y-0 sm:divide-x sm:divide-default"
167388
]}>
168-
<div class="flex-1 p-4 sm:px-6">
389+
<div class="flex-1 p-4 sm:px-6 group-hover:sm:-ml-[4px] transition-all">
169390
<div class="flex items-center gap-2">
170391
<div class="flex items-center gap-2 pb-2">
171392
<h3 class="flex items-center gap-4 text-2xl font-semibold text-foreground">
@@ -207,14 +428,6 @@ defmodule AlgoraWeb.PricingLive do
207428
</p>
208429
</div>
209430
</div>
210-
<% "grow-your-team" -> %>
211-
<div class="flex justify-between">
212-
<div class="flex items-end">
213-
<p class="font-display text-4xl">
214-
Custom
215-
</p>
216-
</div>
217-
</div>
218431
<% end %>
219432
</div>
220433
</div>
@@ -225,7 +438,7 @@ defmodule AlgoraWeb.PricingLive do
225438
<%= for feature <- @plan.features do %>
226439
<li class="flex flex-col py-2 first:mt-0">
227440
<div class="flex items-start">
228-
<div class="flex w-7">
441+
<div class="flex w-7 shrink-0">
229442
<.icon name="tabler-check" class="size-5 text-emerald-400" />
230443
</div>
231444
<span class="text-sm xl:text-base mb-0 text-foreground truncate">
@@ -244,89 +457,6 @@ defmodule AlgoraWeb.PricingLive do
244457
"""
245458
end
246459

247-
def pricing_card2(assigns) do
248-
~H"""
249-
<div class="border ring-1 ring-transparent rounded-xl overflow-hidden">
250-
<div class={[
251-
"bg-card/75 flex flex-col h-full p-4 sm:flex-row sm:justify-between rounded-xl border-t-4 sm:border-t-0 sm:border-l-4 border-purple-400",
252-
@plan.popular && "border-foreground-muted !border-2 !rounded-xl xl:-my-8",
253-
"divide-y sm:divide-y-0 sm:divide-x sm:divide-default"
254-
]}>
255-
<div class="sm:w-1/2 xl:w-1/3 p-4 pb-8 sm:pb-4 sm:px-6 flex flex-col justify-center">
256-
<div class="flex items-center gap-2">
257-
<div class="flex items-center gap-2 pb-2">
258-
<h3 class="flex items-center gap-4 text-2xl font-semibold text-foreground">
259-
{@plan.name}
260-
</h3>
261-
<%= if @plan.popular do %>
262-
<span class="bg-foreground-light text-[13px] rounded-md px-2 py-0.5 leading-4 text-background">
263-
Most Popular
264-
</span>
265-
<% end %>
266-
</div>
267-
</div>
268-
<p class="text-foreground-light text-sm pt-2 2xl:pr-4">
269-
{@plan.description}
270-
</p>
271-
<div class="flex gap-2 pt-4">
272-
<.button
273-
navigate={@plan.cta_url}
274-
variant="purple"
275-
size="xl"
276-
class="drop-shadow-[0_1px_5px_#c084fc80]"
277-
>
278-
{@plan.cta_text}
279-
</.button>
280-
</div>
281-
</div>
282-
<div class="sm:w-1/2 xl:w-2/3 p-4 pt-8 sm:pt-4 sm:px-6">
283-
<ul class="border-default text-base text-foreground-lighter flex-1 grid grid-cols-1 xl:grid-cols-3 gap-4 xl:divide-x xl:divide-default">
284-
<li class="py-2 flex flex-col xl:items-center xl:justify-center">
285-
<div class="flex items-center xl:flex-col gap-4">
286-
<div class="shrink-0 flex items-center justify-center size-16 bg-purple-400/10 drop-shadow-[0_1px_5px_#c084fc80] rounded-full">
287-
<.icon name="tabler-world" class="size-8 text-purple-400" />
288-
</div>
289-
<div class="flex flex-col xl:items-center xl:justify-center xl:gap-2">
290-
<div class="text-2xl xl:text-3xl font-semibold font-display">Publish</div>
291-
<div class="text-sm sm:text-base xl:text-lg font-medium text-muted-foreground">
292-
Bounties and contracts <span class="hidden 2xl:inline">on Algora</span>
293-
</div>
294-
</div>
295-
</div>
296-
</li>
297-
<li class="py-2 flex flex-col xl:items-center xl:justify-center">
298-
<div class="flex items-center xl:flex-col gap-4">
299-
<div class="shrink-0 flex items-center justify-center size-16 bg-purple-400/10 drop-shadow-[0_1px_5px_#c084fc80] rounded-full">
300-
<.icon name="tabler-bolt" class="size-8 text-purple-400" />
301-
</div>
302-
<div class="flex flex-col xl:items-center xl:justify-center xl:gap-2">
303-
<div class="text-2xl xl:text-3xl font-semibold font-display">Match</div>
304-
<div class="text-sm sm:text-base xl:text-lg font-medium text-muted-foreground">
305-
Proven Algora experts
306-
</div>
307-
</div>
308-
</div>
309-
</li>
310-
<li class="py-2 flex flex-col xl:items-center xl:justify-center">
311-
<div class="flex items-center xl:flex-col gap-4">
312-
<div class="shrink-0 flex items-center justify-center size-16 bg-purple-400/10 drop-shadow-[0_1px_5px_#c084fc80] rounded-full">
313-
<.icon name="tabler-briefcase" class="size-8 text-purple-400" />
314-
</div>
315-
<div class="flex flex-col xl:items-center xl:justify-center xl:gap-2">
316-
<div class="text-2xl xl:text-3xl font-semibold font-display">Hire</div>
317-
<div class="text-sm sm:text-base xl:text-lg font-medium text-muted-foreground">
318-
Top 1% OSS engineers
319-
</div>
320-
</div>
321-
</div>
322-
</li>
323-
</ul>
324-
</div>
325-
</div>
326-
</div>
327-
"""
328-
end
329-
330460
def get_plans1 do
331461
[
332462
%Plan{
@@ -360,21 +490,6 @@ defmodule AlgoraWeb.PricingLive do
360490
]
361491
end
362492

363-
def get_plans2 do
364-
[
365-
%Plan{
366-
id: "grow-your-team",
367-
name: "Growing your team?",
368-
description: "You're in the right place.",
369-
price: "Custom",
370-
cta_text: "Contact us",
371-
cta_url: AlgoraWeb.Constants.get(:calendar_url),
372-
popular: false,
373-
features: []
374-
}
375-
]
376-
end
377-
378493
defp get_faq_items do
379494
[
380495
%FaqItem{

0 commit comments

Comments
 (0)