Skip to content

Commit 1ee67ec

Browse files
zcesurzcesur
committed
style: update pricing layout and improve responsiveness
- Adjusted heading size for better visual hierarchy. - Modified padding and margin for improved spacing in pricing cards. - Enhanced flexbox layout for better alignment and responsiveness across different screen sizes. - Updated feature list presentation for consistency and clarity.
1 parent c981fe5 commit 1ee67ec

File tree

1 file changed

+51
-35
lines changed

1 file changed

+51
-35
lines changed

‎lib/algora_web/live/pricing_live.ex‎

Lines changed: 51 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,9 @@ defmodule AlgoraWeb.PricingLive do
4747
<section class="bg-background pb-16 sm:pb-24">
4848
<div class="mx-auto px-6 lg:px-8">
4949
<div class="relative z-10 pb-4 xl:py-16">
50-
<div class="mx-auto max-w-7xl text-center px-6 lg:px-8">
50+
<div class="mx-auto max-w-7xl sm:text-center">
5151
<div class="mx-auto max-w-3xl space-y-2 lg:max-w-none">
52-
<h1 class="text-3xl sm:text-4xl font-bold text-popover-foreground">
52+
<h1 class="text-2xl sm:text-4xl font-bold text-popover-foreground">
5353
Simple, transparent pricing
5454
</h1>
5555
<p class="text-sm sm:text-lg text-muted-foreground">
@@ -59,7 +59,7 @@ defmodule AlgoraWeb.PricingLive do
5959
</div>
6060
</div>
6161
62-
<div class="mx-auto lg:max-w-[95rem] mb-8">
62+
<div class="mx-auto lg:max-w-[95rem] mb-8 mt-8">
6363
<div class="flex items-start gap-4">
6464
<div class="flex-1">
6565
<h2 class="text-2xl font-semibold text-foreground mb-2">
@@ -181,11 +181,11 @@ defmodule AlgoraWeb.PricingLive do
181181
class="group border ring-1 ring-transparent hover:ring-emerald-400 rounded-xl overflow-hidden"
182182
>
183183
<div class={[
184-
"bg-card/75 flex justify-between rounded-xl border-l-4 border-emerald-400 group-hover:border-emerald-300 group-hover:border-l-8 transition-all cursor-pointer",
184+
"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-emerald-400 group-hover:border-emerald-300 group-hover:sm:border-l-8 transition-all cursor-pointer",
185185
@plan.popular && "border-foreground-muted !border-2 !rounded-xl xl:-my-8",
186-
"divide-x divide-default"
186+
"divide-y sm:divide-y-0 sm:divide-x sm:divide-default"
187187
]}>
188-
<div class="flex-1 px-8 pt-6 xl:px-4 2xl:px-8 pr-0">
188+
<div class="flex-1 p-4 sm:px-6">
189189
<div class="flex items-center gap-2">
190190
<div class="flex items-center gap-2 pb-2">
191191
<h3 class="flex items-center gap-4 text-2xl font-semibold text-foreground">
@@ -201,7 +201,7 @@ defmodule AlgoraWeb.PricingLive do
201201
<p class="text-foreground-light mb-4 text-sm 2xl:pr-4">
202202
{@plan.description}
203203
</p>
204-
<div class="flex items-center justify-between pb-8 lg:pb-10">
204+
<div class="flex items-center justify-between">
205205
<div class="border-default flex items-baseline text-5xl font-normal text-foreground lg:text-4xl xl:text-4xl">
206206
<div class="flex flex-col gap-1 w-full">
207207
<%= case @plan.id do %>
@@ -240,15 +240,15 @@ defmodule AlgoraWeb.PricingLive do
240240
</div>
241241
</div>
242242
</div>
243-
<div class="flex-1 border-l my-auto border-default px-4 2xl:px-8 pl-0">
243+
<div class="flex-1 p-4 sm:px-6">
244244
<ul class="border-default text-sm text-foreground-lighter flex-1">
245245
<%= for feature <- @plan.features do %>
246246
<li class="flex flex-col py-2 first:mt-0">
247-
<div class="flex items-center">
247+
<div class="flex items-start">
248248
<div class="flex w-7">
249249
<.icon name="tabler-check" class="size-5 text-emerald-400" />
250250
</div>
251-
<span class="text-sm xl:text-base mb-0 text-foreground">
251+
<span class="text-sm xl:text-base mb-0 text-foreground truncate">
252252
{Phoenix.HTML.raw(feature.name)}
253253
</span>
254254
</div>
@@ -266,13 +266,13 @@ defmodule AlgoraWeb.PricingLive do
266266

267267
defp pricing_card2(assigns) do
268268
~H"""
269-
<div class="group border ring-1 ring-transparent rounded-xl overflow-hidden">
269+
<div class="group border ring-1 ring-transparent hover:ring-purple-400 rounded-xl overflow-hidden">
270270
<div class={[
271-
"bg-card/75 flex justify-between rounded-xl border-l-4 border-purple-400 transition-all",
271+
"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 group-hover:border-purple-300 group-hover:sm:border-l-8 transition-all cursor-pointer",
272272
@plan.popular && "border-foreground-muted !border-2 !rounded-xl xl:-my-8",
273-
"divide-x divide-default"
273+
"divide-y sm:divide-y-0 sm:divide-x sm:divide-default"
274274
]}>
275-
<div class="w-1/3 px-8 py-8 xl:px-4 2xl:px-8">
275+
<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">
276276
<div class="flex items-center gap-2">
277277
<div class="flex items-center gap-2 pb-2">
278278
<h3 class="flex items-center gap-4 text-2xl font-semibold text-foreground">
@@ -285,10 +285,10 @@ defmodule AlgoraWeb.PricingLive do
285285
<% end %>
286286
</div>
287287
</div>
288-
<p class="text-foreground-light mb-4 text-sm 2xl:pr-4">
288+
<p class="text-foreground-light text-sm pt-2 2xl:pr-4">
289289
{@plan.description}
290290
</p>
291-
<div class="pt-4 flex gap-2">
291+
<div class="flex gap-2 pt-4">
292292
<.button
293293
navigate={@plan.cta_url}
294294
variant="purple"
@@ -299,30 +299,46 @@ defmodule AlgoraWeb.PricingLive do
299299
</.button>
300300
</div>
301301
</div>
302-
<div class="w-2/3 my-auto">
303-
<ul class="py-8 border-default text-base text-foreground-lighter flex-1 grid grid-cols-3 gap-4 divide-x divide-default">
304-
<li class="py-2 flex flex-col items-center justify-center">
305-
<div class="flex items-center justify-center size-16 bg-purple-400/10 drop-shadow-[0_1px_5px_#c084fc80] rounded-full">
306-
<.icon name="tabler-world" class="size-8 text-purple-400" />
307-
</div>
308-
<div class="pt-4 text-3xl font-semibold font-display">Publish</div>
309-
<div class="pt-2 text-lg font-medium text-muted-foreground">
310-
Bounties and contracts on Algora
302+
<div class="sm:w-1/2 xl:w-2/3 p-4 pt-8 sm:pt-4 sm:px-6">
303+
<ul class="border-default text-base text-foreground-lighter flex-1 grid xl:grid-cols-3 gap-4 xl:divide-x xl:divide-default">
304+
<li class="py-2 flex flex-col xl:items-center xl:justify-center">
305+
<div class="flex items-center xl:flex-col gap-4">
306+
<div class="shrink-0 flex items-center justify-center size-16 bg-purple-400/10 drop-shadow-[0_1px_5px_#c084fc80] rounded-full">
307+
<.icon name="tabler-world" class="size-8 text-purple-400" />
308+
</div>
309+
<div class="flex flex-col xl:items-center xl:justify-center xl:gap-2">
310+
<div class="text-2xl xl:text-3xl font-semibold font-display">Publish</div>
311+
<div class="text-base xl:text-lg font-medium text-muted-foreground">
312+
Bounties and contracts <span class="hidden 2xl:inline">on Algora</span>
313+
</div>
314+
</div>
311315
</div>
312316
</li>
313-
<li class="py-2 flex flex-col items-center justify-center">
314-
<div class="flex items-center justify-center size-16 bg-purple-400/10 drop-shadow-[0_1px_5px_#c084fc80] rounded-full">
315-
<.icon name="tabler-bolt" class="size-8 text-purple-400" />
317+
<li class="py-2 flex flex-col xl:items-center xl:justify-center">
318+
<div class="flex items-center xl:flex-col gap-4">
319+
<div class="shrink-0 flex items-center justify-center size-16 bg-purple-400/10 drop-shadow-[0_1px_5px_#c084fc80] rounded-full">
320+
<.icon name="tabler-bolt" class="size-8 text-purple-400" />
321+
</div>
322+
<div class="flex flex-col xl:items-center xl:justify-center xl:gap-2">
323+
<div class="text-2xl xl:text-3xl font-semibold font-display">Match</div>
324+
<div class="text-base xl:text-lg font-medium text-muted-foreground">
325+
Proven Algora experts
326+
</div>
327+
</div>
316328
</div>
317-
<div class="pt-4 text-3xl font-semibold font-display">Match</div>
318-
<div class="pt-2 text-lg font-medium text-muted-foreground">Proven Algora experts</div>
319329
</li>
320-
<li class="py-2 flex flex-col items-center justify-center">
321-
<div class="flex items-center justify-center size-16 bg-purple-400/10 drop-shadow-[0_1px_5px_#c084fc80] rounded-full">
322-
<.icon name="tabler-briefcase" class="size-8 text-purple-400" />
330+
<li class="py-2 flex flex-col xl:items-center xl:justify-center">
331+
<div class="flex items-center xl:flex-col gap-4">
332+
<div class="shrink-0 flex items-center justify-center size-16 bg-purple-400/10 drop-shadow-[0_1px_5px_#c084fc80] rounded-full">
333+
<.icon name="tabler-briefcase" class="size-8 text-purple-400" />
334+
</div>
335+
<div class="flex flex-col xl:items-center xl:justify-center xl:gap-2">
336+
<div class="text-2xl xl:text-3xl font-semibold font-display">Hire</div>
337+
<div class="text-base xl:text-lg font-medium text-muted-foreground">
338+
Top 1% OSS engineers
339+
</div>
340+
</div>
323341
</div>
324-
<div class="pt-4 text-3xl font-semibold font-display">Hire</div>
325-
<div class="pt-2 text-lg font-medium text-muted-foreground">Top 1% OSS engineers</div>
326342
</li>
327343
</ul>
328344
</div>

0 commit comments

Comments
 (0)