Skip to content

Commit 5308919

Browse files
simonhampsimonhamp
committed
Extract component and set new prices
1 parent c80f611 commit 5308919

File tree

4 files changed

+263
-530
lines changed

4 files changed

+263
-530
lines changed

‎resources/views/components/pricing-plan-features.blade.php‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
@props([
2+
'features' => [
3+
'apps' => 1,
4+
'keys' => 1,
5+
],
6+
])
7+
8+
{{-- Features --}}
9+
<div
10+
class="space-y-3 text-sm"
11+
aria-label="{{ $planName }} plan features"
12+
>
13+
<div class="flex items-center gap-2">
14+
<x-icons.desktop-computer
15+
class="size-5 shrink-0"
16+
aria-hidden="true"
17+
/>
18+
<div class="text-zinc-500">
19+
Build
20+
<span class="font-medium text-black dark:text-white">
21+
unlimited
22+
</span>
23+
apps
24+
</div>
25+
</div>
26+
<div class="flex items-center gap-2">
27+
<x-icons.upload-box
28+
class="size-5 shrink-0"
29+
aria-hidden="true"
30+
/>
31+
<div class="text-zinc-500">
32+
Release
33+
<span class="font-medium text-black dark:text-white">
34+
{{ $features['apps'] }}
35+
</span>
36+
production apps
37+
</div>
38+
</div>
39+
<div class="flex items-center gap-2">
40+
<x-icons.user-single
41+
class="size-5 shrink-0"
42+
aria-hidden="true"
43+
/>
44+
<div class="text-zinc-500">
45+
<span class="font-medium text-black dark:text-white">
46+
{{ $features['keys'] }}
47+
</span>
48+
developer seats (keys)
49+
</div>
50+
</div>
51+
</div>
52+
53+
{{-- Divider - Decorative --}}
54+
<div
55+
class="my-5 h-px w-full rounded-full bg-black/15"
56+
aria-hidden="true"
57+
></div>
58+
59+
{{-- Perks --}}
60+
<div
61+
class="space-y-2.5 text-sm"
62+
aria-label="{{ $planName }} plan perks"
63+
>
64+
<div class="flex items-center gap-2">
65+
<div
66+
class="grid size-7 shrink-0 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
67+
aria-hidden="true"
68+
>
69+
<x-icons.checkmark class="size-5 shrink-0" />
70+
</div>
71+
<div class="font-medium">One year of package updates</div>
72+
</div>
73+
<div class="flex items-center gap-2">
74+
<div
75+
class="grid size-7 shrink-0 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
76+
aria-hidden="true"
77+
>
78+
<x-icons.checkmark class="size-5 shrink-0" />
79+
</div>
80+
<div class="font-medium">Community support via Discord</div>
81+
</div>
82+
<div class="flex items-center gap-2">
83+
<div
84+
class="grid size-7 shrink-0 place-items-center rounded-xl {{ $features['discord'] ?? false ? 'bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black' : 'bg-zinc-200 dark:bg-gray-700/50' }}"
85+
aria-hidden="true"
86+
>
87+
@if($features['discord'] ?? false)
88+
<x-icons.checkmark class="size-5 shrink-0" />
89+
@else
90+
<x-icons.xmark class="size-2.5 shrink-0 dark:opacity-70" />
91+
@endif
92+
</div>
93+
<div class="{{ $features['discord'] ?? false ? 'font-medium' : '' }}">Access Private Discord channels</div>
94+
</div>
95+
<div class="flex items-center gap-2">
96+
<div
97+
class="grid size-7 shrink-0 place-items-center rounded-xl {{ $features['github'] ?? false ? 'bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black' : 'bg-zinc-200 dark:bg-gray-700/50' }}"
98+
aria-hidden="true"
99+
>
100+
@if($features['github'] ?? false)
101+
<x-icons.checkmark class="size-5 shrink-0" />
102+
@else
103+
<x-icons.xmark class="size-2.5 shrink-0 dark:opacity-70" />
104+
@endif
105+
</div>
106+
<div class="{{ $features['github'] ?? false ? 'font-medium' : '' }}">Direct repo access on GitHub</div>
107+
</div>
108+
<div class="flex items-center gap-2">
109+
<div
110+
class="grid size-7 shrink-0 place-items-center rounded-xl {{ $features['priority'] ?? false ? 'bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black' : 'bg-zinc-200 dark:bg-gray-700/50' }}"
111+
aria-hidden="true"
112+
>
113+
@if($features['priority'] ?? false)
114+
<x-icons.checkmark class="size-5 shrink-0" />
115+
@else
116+
<x-icons.xmark class="size-2.5 shrink-0 dark:opacity-70" />
117+
@endif
118+
</div>
119+
<div class="{{ $features['priority'] ?? false ? 'font-medium' : '' }}">Help decide feature priority</div>
120+
</div>
121+
<div class="flex items-center gap-2">
122+
<div
123+
class="grid size-7 shrink-0 place-items-center rounded-xl {{ $features['support'] ?? false ? 'bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black' : 'bg-zinc-200 dark:bg-gray-700/50' }}"
124+
aria-hidden="true"
125+
>
126+
@if($features['support'] ?? false)
127+
<x-icons.checkmark class="size-5 shrink-0" />
128+
@else
129+
<x-icons.xmark class="size-2.5 shrink-0 dark:opacity-70" />
130+
@endif
131+
</div>
132+
<div class="{{ $features['support'] ?? false ? 'font-medium' : '' }}">Business hours email support (GMT)</div>
133+
</div>
134+
</div>

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<div
2+
class="relative h-full rounded-2xl bg-gray-100 p-7 opacity-0 {{ $popular ?? false ? 'ring-1 ring-black dark:bg-black/50 dark:ring-white/20' : 'dark:bg-mirage' }}"
3+
aria-labelledby="teams-plan-heading"
4+
>
5+
@if($popular ?? false)
6+
{{-- Popular badge --}}
7+
<div
8+
class="absolute -top-5 -right-3 rounded-xl bg-linear-to-tr from-[#6886FF] to-[#B8C1FF] px-5 py-2 text-sm text-white dark:from-gray-900 dark:to-black dark:ring-1 dark:ring-white/10"
9+
aria-label="Most popular plan"
10+
>
11+
Most Popular
12+
</div>
13+
@endif
14+
15+
{{-- Plan Name --}}
16+
<h3
17+
id="teams-plan-heading"
18+
class="text-3xl font-semibold"
19+
>
20+
<span class="rounded-full bg-zinc-300 dark:bg-zinc-600 px-4">
21+
{{ $name }}
22+
</span>
23+
</h3>
24+
25+
{{-- Price --}}
26+
<div
27+
class="flex items-start gap-1.5 pt-5"
28+
aria-label="Price: ${{ number_format($discounted ? $discountedPrice : $price) }} per year"
29+
>
30+
31+
<div>
32+
@if($discounted)
33+
<span class="text-2xl font-semibold text-zinc-500">
34+
Was ${{ number_format($price) }}
35+
</span>
36+
@endif
37+
<div class="text-5xl font-semibold">
38+
${{ number_format($discounted ? $discountedPrice : $price) }}
39+
</div>
40+
</div>
41+
<div class="self-end pb-1.5 text-zinc-500">per year</div>
42+
</div>
43+
44+
@auth
45+
<button
46+
type="button"
47+
wire:click="createCheckoutSession('{{ $id }}')"
48+
class="my-5 block w-full rounded-2xl bg-zinc-200 py-4 text-center text-sm font-medium transition duration-200 ease-in-out hover:bg-zinc-800 hover:text-white dark:bg-slate-700/30 dark:hover:bg-slate-700/40"
49+
aria-label="Get started with {{ $name }} plan"
50+
>
51+
Get started
52+
</button>
53+
@else
54+
<button
55+
type="button"
56+
@if($discounted)
57+
wire:click="handlePurchaseRequest({ plan: '{{ $id }}' })"
58+
@else
59+
@click="$dispatch('open-purchase-modal', { plan: '{{ $id }}' })"
60+
@endif
61+
class="my-5 block w-full rounded-2xl bg-zinc-200 py-4 text-center text-sm font-medium transition duration-200 ease-in-out hover:bg-zinc-800 hover:text-white dark:bg-slate-700/30 dark:hover:bg-slate-700/40"
62+
aria-label="Get started with {{ $name }} plan"
63+
>
64+
Get started
65+
</button>
66+
@endauth
67+
68+
<x-pricing-plan-features :$features :plan-name="$name" />
69+
</div>

0 commit comments

Comments
 (0)