Skip to content

Commit ad242c0

Browse files
HassanZahirniaHassanZahirnia
committed
✨ Improve pricing warning gap with its text
1 parent 0299917 commit ad242c0

File tree

1 file changed

+91
-105
lines changed

1 file changed

+91
-105
lines changed

‎resources/views/components/mobile-pricing.blade.php

Lines changed: 91 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,22 @@ class="mx-auto mt-24 max-w-6xl px-5"
77
<h2
88
id="pricing-heading"
99
x-init="
10-
() => {
11-
motion.inView($el, (element) => {
12-
motion.animate(
13-
$el,
14-
{
15-
opacity: [0, 1],
16-
x: [-10, 0],
17-
},
18-
{
19-
duration: 0.7,
20-
ease: motion.easeOut,
21-
},
22-
)
23-
})
24-
}
25-
"
10+
() => {
11+
motion.inView($el, (element) => {
12+
motion.animate(
13+
$el,
14+
{
15+
opacity: [0, 1],
16+
x: [-10, 0],
17+
},
18+
{
19+
duration: 0.7,
20+
ease: motion.easeOut,
21+
},
22+
)
23+
})
24+
}
25+
"
2626
class="text-3xl font-semibold opacity-0"
2727
>
2828
Purchase a license
@@ -31,48 +31,48 @@ class="text-3xl font-semibold opacity-0"
3131
{{-- Section Description --}}
3232
<p
3333
x-init="
34-
() => {
35-
motion.inView($el, (element) => {
36-
motion.animate(
37-
$el,
38-
{
39-
opacity: [0, 1],
40-
x: [10, 0],
41-
},
42-
{
43-
duration: 0.7,
44-
ease: motion.easeOut,
45-
},
46-
)
47-
})
48-
}
49-
"
50-
class="mx-auto max-w-xl pt-2 text-base/relaxed text-gray-600 opacity-0"
51-
>
52-
Start your journey to become a mobile developer
53-
</p>
54-
</header>
55-
56-
{{-- Pricing Plans --}}
57-
<div
58-
x-init="
5934
() => {
6035
motion.inView($el, (element) => {
6136
motion.animate(
62-
Array.from($el.children),
37+
$el,
6338
{
64-
y: [10, 0],
6539
opacity: [0, 1],
40+
x: [10, 0],
6641
},
6742
{
6843
duration: 0.7,
69-
ease: motion.circOut,
70-
delay: motion.stagger(0.1),
44+
ease: motion.easeOut,
7145
},
7246
)
7347
})
7448
}
7549
"
50+
class="mx-auto max-w-xl pt-2 text-base/relaxed text-gray-600 opacity-0"
51+
>
52+
Start your journey to become a mobile developer
53+
</p>
54+
</header>
55+
56+
{{-- Pricing Plans --}}
57+
<div
58+
x-init="
59+
() => {
60+
motion.inView($el, (element) => {
61+
motion.animate(
62+
Array.from($el.children),
63+
{
64+
y: [10, 0],
65+
opacity: [0, 1],
66+
},
67+
{
68+
duration: 0.7,
69+
ease: motion.circOut,
70+
delay: motion.stagger(0.1),
71+
},
72+
)
73+
})
74+
}
75+
"
7676
class="mt-10 grid grid-cols-[repeat(auto-fill,minmax(19rem,1fr))] items-start gap-x-6 gap-y-8"
7777
aria-label="Pricing plans"
7878
>
@@ -102,7 +102,7 @@ class="flex items-start gap-1.5 pt-5"
102102

103103
{{-- Warning --}}
104104
<div
105-
class="flex items-center gap-3 pt-3 text-sm"
105+
class="flex items-center gap-2 pt-3 text-sm"
106106
aria-label="Price warning"
107107
>
108108
<x-icons.warning
@@ -112,8 +112,8 @@ class="size-5 shrink-0"
112112
<p class="text-zinc-500">
113113
Increases to
114114
<span class="font-medium text-black dark:text-white">
115-
$100
116-
</span>
115+
$100
116+
</span>
117117
after the EAP.
118118
</p>
119119
</div>
@@ -139,11 +139,9 @@ class="size-5 shrink-0"
139139
/>
140140
<div class="text-zinc-500">
141141
Build
142-
<span
143-
class="font-medium text-black dark:text-white"
144-
>
145-
unlimited
146-
</span>
142+
<span class="font-medium text-black dark:text-white">
143+
unlimited
144+
</span>
147145
apps
148146
</div>
149147
</div>
@@ -154,11 +152,9 @@ class="size-5 shrink-0"
154152
/>
155153
<div class="text-zinc-500">
156154
Release
157-
<span
158-
class="font-medium text-black dark:text-white"
159-
>
160-
1
161-
</span>
155+
<span class="font-medium text-black dark:text-white">
156+
1
157+
</span>
162158
production app
163159
</div>
164160
</div>
@@ -168,11 +164,9 @@ class="size-5 shrink-0"
168164
aria-hidden="true"
169165
/>
170166
<div class="text-zinc-500">
171-
<span
172-
class="font-medium text-black dark:text-white"
173-
>
174-
1
175-
</span>
167+
<span class="font-medium text-black dark:text-white">
168+
1
169+
</span>
176170
developer seat
177171
</div>
178172
</div>
@@ -205,7 +199,9 @@ class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe]
205199
>
206200
<x-icons.checkmark class="size-5 shrink-0" />
207201
</div>
208-
<div class="font-medium">Your name in NativePHP's history</div>
202+
<div class="font-medium">
203+
Your name in NativePHP's history
204+
</div>
209205
</div>
210206
<div class="flex items-center gap-2">
211207
<div
@@ -269,7 +265,7 @@ class="flex items-start gap-1.5 pt-5"
269265

270266
{{-- Warning --}}
271267
<div
272-
class="flex items-center gap-3 pt-3 text-sm"
268+
class="flex items-center gap-2 pt-3 text-sm"
273269
aria-label="Price warning"
274270
>
275271
<x-icons.warning
@@ -279,8 +275,8 @@ class="size-5 shrink-0"
279275
<p class="text-zinc-500">
280276
Increases to
281277
<span class="font-medium text-black dark:text-white">
282-
$750
283-
</span>
278+
$750
279+
</span>
284280
after the EAP.
285281
</p>
286282
</div>
@@ -306,11 +302,9 @@ class="size-5 shrink-0"
306302
/>
307303
<div class="text-zinc-500">
308304
Build
309-
<span
310-
class="font-medium text-black dark:text-white"
311-
>
312-
unlimited
313-
</span>
305+
<span class="font-medium text-black dark:text-white">
306+
unlimited
307+
</span>
314308
apps
315309
</div>
316310
</div>
@@ -321,11 +315,9 @@ class="size-5 shrink-0"
321315
/>
322316
<div class="text-zinc-500">
323317
Release
324-
<span
325-
class="font-medium text-black dark:text-white"
326-
>
327-
10
328-
</span>
318+
<span class="font-medium text-black dark:text-white">
319+
10
320+
</span>
329321
production apps
330322
</div>
331323
</div>
@@ -335,11 +327,9 @@ class="size-5 shrink-0"
335327
aria-hidden="true"
336328
/>
337329
<div class="text-zinc-500">
338-
<span
339-
class="font-medium text-black dark:text-white"
340-
>
341-
10
342-
</span>
330+
<span class="font-medium text-black dark:text-white">
331+
10
332+
</span>
343333
developer seats
344334
</div>
345335
</div>
@@ -372,7 +362,9 @@ class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe]
372362
>
373363
<x-icons.checkmark class="size-5 shrink-0" />
374364
</div>
375-
<div class="font-medium">Your name in NativePHP's history</div>
365+
<div class="font-medium">
366+
Your name in NativePHP's history
367+
</div>
376368
</div>
377369
<div class="flex items-center gap-2">
378370
<div
@@ -444,7 +436,7 @@ class="flex items-start gap-1.5 pt-5"
444436

445437
{{-- Warning --}}
446438
<div
447-
class="flex items-center gap-3 pt-3 text-sm"
439+
class="flex items-center gap-2 pt-3 text-sm"
448440
aria-label="Price warning"
449441
>
450442
<x-icons.warning
@@ -454,8 +446,8 @@ class="size-5 shrink-0"
454446
<p class="text-zinc-500">
455447
Increases to
456448
<span class="font-medium text-black dark:text-white">
457-
$2,500
458-
</span>
449+
$2,500
450+
</span>
459451
after the EAP.
460452
</p>
461453
</div>
@@ -481,11 +473,9 @@ class="size-5 shrink-0"
481473
/>
482474
<div class="text-zinc-500">
483475
Build
484-
<span
485-
class="font-medium text-black dark:text-white"
486-
>
487-
unlimited
488-
</span>
476+
<span class="font-medium text-black dark:text-white">
477+
unlimited
478+
</span>
489479
apps
490480
</div>
491481
</div>
@@ -496,11 +486,9 @@ class="size-5 shrink-0"
496486
/>
497487
<div class="text-zinc-500">
498488
Release
499-
<span
500-
class="font-medium text-black dark:text-white"
501-
>
502-
unlimited
503-
</span>
489+
<span class="font-medium text-black dark:text-white">
490+
unlimited
491+
</span>
504492
production apps
505493
</div>
506494
</div>
@@ -510,11 +498,9 @@ class="size-5 shrink-0"
510498
aria-hidden="true"
511499
/>
512500
<div class="text-zinc-500">
513-
<span
514-
class="font-medium text-black dark:text-white"
515-
>
516-
Unlimited
517-
</span>
501+
<span class="font-medium text-black dark:text-white">
502+
Unlimited
503+
</span>
518504
developer seats
519505
</div>
520506
</div>
@@ -538,7 +524,9 @@ class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe]
538524
>
539525
<x-icons.checkmark class="size-5 shrink-0" />
540526
</div>
541-
<div class="font-medium">Exclusive access to private Discord channels</div>
527+
<div class="font-medium">
528+
Exclusive access to private Discord channels
529+
</div>
542530
</div>
543531
<div class="flex items-center gap-2">
544532
<div
@@ -565,9 +553,7 @@ class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe]
565553
>
566554
<x-icons.checkmark class="size-5 shrink-0" />
567555
</div>
568-
<div class="font-medium">
569-
Business hours support (GMT)
570-
</div>
556+
<div class="font-medium">Business hours support (GMT)</div>
571557
</div>
572558
<div class="flex items-center gap-2">
573559
<div

0 commit comments

Comments
 (0)