|
54 | 54 | const base = 'card p-2 md:p-8 flex flex-col items-center relative w-full hover:bg-opacity-90'; |
55 | 55 | </script> |
56 | 56 |
|
57 | | -<div class="card p-2 md:p-8 flex flex-col gap-2 md:gap-8"> |
58 | | - <div class="flex flex-col md:grid md:grid-cols-2 gap-2 md:gap-8"> |
| 57 | +<div class="flex flex-col gap-2 p-2 card md:p-8 md:gap-8"> |
| 58 | + <div class="flex flex-col gap-2 md:grid md:grid-cols-2 md:gap-8"> |
59 | 59 | <button |
60 | 60 | class={`${base} ${monthly ? 'variant-filled-primary' : 'variant-soft-primary'}`} |
61 | 61 | on:click={() => onSelect(true)} |
62 | 62 | > |
63 | 63 | {#if monthly} |
64 | | - <div class="absolute top-0 right-0 mr-2 mt-2"> |
| 64 | + <div class="absolute top-0 right-0 mt-2 mr-2"> |
65 | 65 | <Icon src={CheckCircle} theme="solid" class="w-8" /> |
66 | 66 | </div> |
67 | 67 | {/if} |
68 | | - <span class="font-medium text-xl">Monthly</span> |
| 68 | + <span class="text-xl font-medium">Monthly</span> |
69 | 69 | <div class="flex flex-row items-end justify-center mt-2"> |
70 | | - <span class="text-5xl font-bold">$5</span> |
| 70 | + <span class="text-5xl font-bold">$29</span> |
71 | 71 | <div class="mt-5"> |
72 | | - <span class="text-surface-50-900-token font-medium text-xl">/mo</span> |
| 72 | + <span class="text-xl font-medium text-surface-50-900-token">/mo</span> |
73 | 73 | </div> |
74 | 74 | </div> |
75 | 75 | <div class="mb-6"> |
76 | | - <span class="font-medium text-xs">Just $0.17 per day</span> |
| 76 | + <span class="text-xs font-medium">Just $0.79 per day</span> |
77 | 77 | </div> |
78 | 78 | <KcPrimary /> |
79 | 79 | </button> |
|
82 | 82 | on:click={() => onSelect(false)} |
83 | 83 | > |
84 | 84 | {#if !monthly} |
85 | | - <div class="absolute top-0 right-0 mr-2 mt-2"> |
| 85 | + <div class="absolute top-0 right-0 mt-2 mr-2"> |
86 | 86 | <Icon src={CheckCircle} theme="solid" class="w-8" /> |
87 | 87 | </div> |
88 | 88 | {/if} |
89 | | - <span class="font-medium text-xl">Annual</span> |
| 89 | + <span class="text-xl font-medium">Annual</span> |
90 | 90 | <div class="flex flex-row items-end justify-center mt-2"> |
91 | | - <span class="text-5xl font-bold">$48</span> |
| 91 | + <span class="text-5xl font-bold">$199</span> |
92 | 92 | <div class="mt-5"> |
93 | | - <span class="text-surface-50-900-token font-medium text-xl">/year</span> |
| 93 | + <span class="text-xl font-medium text-surface-50-900-token">/year</span> |
94 | 94 | </div> |
95 | 95 | </div> |
96 | 96 | <div class="mb-6"> |
97 | | - <span class="font-medium text-xs">Save $12 compared to monthly</span> |
| 97 | + <span class="text-xs font-medium">Save $149 compared to monthly</span> |
98 | 98 | </div> |
99 | 99 | <AjPrimary /> |
100 | 100 | </button> |
101 | 101 | </div> |
102 | 102 | <div> |
103 | | - <div class="card variant-filled-primary p-2 md:p-8"> |
| 103 | + <div class="p-2 card variant-filled-primary md:p-8"> |
104 | 104 | <h2>Pro</h2> |
105 | 105 | <ul class="text-left text-md md:text-lg"> |
106 | | - <li class="my-2 flex flex-row gap-1 items-center"> |
| 106 | + <li class="flex flex-row items-center gap-1 my-2"> |
107 | 107 | <Icon src={RocketLaunch} theme="solid" class="w-8" /> |
108 | 108 | Watch all PRO courses |
109 | 109 | </li> |
110 | | - <li class="my-2 flex flex-row gap-1 items-center"> |
| 110 | + <li class="flex flex-row items-center gap-1 my-2"> |
111 | 111 | <Icon src={RocketLaunch} theme="solid" class="w-8" /> |
112 | 112 | Join PRO office hours |
113 | 113 | </li> |
114 | | - <li class="my-2 flex flex-row gap-1 items-center"> |
| 114 | + <li class="flex flex-row items-center gap-1 my-2"> |
115 | 115 | <Icon src={RocketLaunch} theme="solid" class="w-8" /> |
116 | 116 | Read all PRO posts |
117 | 117 | </li> |
118 | | - <li class="my-2 flex flex-row gap-1 items-center"> |
| 118 | + <li class="flex flex-row items-center gap-1 my-2"> |
119 | 119 | <Icon src={PaintBrush} theme="solid" class="w-8" /> |
120 | 120 | Pro Picked Custom Theme |
121 | 121 | </li> |
|
124 | 124 | </div> |
125 | 125 |
|
126 | 126 | {#if redirecting} |
127 | | - <button class="btn variant-filled-surface flex self-end gap-2"> |
| 127 | + <button class="flex self-end gap-2 btn variant-filled-surface"> |
128 | 128 | Redirecting |
129 | 129 | <ProgressRadial |
130 | 130 | stroke={100} |
|
135 | 135 | </button> |
136 | 136 | {:else} |
137 | 137 | <button |
138 | | - class="btn variant-filled-surface flex self-end gap-2" |
| 138 | + class="flex self-end gap-2 btn variant-filled-surface" |
139 | 139 | on:click|once={() => onSubscribe($modalStore[0].meta?.products, $modalStore[0].meta?.uid)} |
140 | 140 | > |
141 | 141 | Continue |
|
0 commit comments