@@ -102,40 +102,58 @@ const formatPrice = (price: number | string) => {
102
102
<div class =" grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-10 md:gap-6 lg:gap-10" >
103
103
{ tiers .map ((tier ) => (
104
104
<div class = " bg-white text-black rounded-2xl p-6 pb-20 relative not-prose z-0" >
105
- <div class = " h-[160px] " >
105
+ <div >
106
106
<Title level = { 3 } className = " mt-0 !mb-2" >
107
107
{ tier .title }
108
108
</Title >
109
109
110
- <div class = " mt-4" >
111
- <div class = " font-bold text-lg" >Education: <span class = " text-xl" >{ formatPrice (tier .educationPrice )} </span ></div >
112
- <div class = " font-bold text-lg" >Personal: <span class = " text-xl" >{ formatPrice (tier .personalPrice )} </span >
110
+ <div class = " mt-4 space-y-2" >
111
+ <div >
112
+ <div class = " font-bold text-lg" >
113
+ Education:
114
+ <span class = " text-xl ml-1" >{ formatPrice (tier .educationPrice )} </span >
115
+ </div >
116
+ </div >
117
+
118
+ <div >
119
+ <div class = " font-bold text-lg" >
120
+ Personal:
121
+ <span class = " text-xl ml-1" >{ formatPrice (tier .personalPrice )} </span >
122
+ </div >
113
123
{ tier .latePersonalPrice && (
114
- <span class = " text-sm font-normal ml-2 " >(Late: { formatPrice (tier .latePersonalPrice )} )</span >
124
+ <div class = " text-sm font-normal ml-1 " >(Late personal : { formatPrice (tier .latePersonalPrice )} )</div >
115
125
)}
116
126
</div >
117
- <div class = " font-bold text-lg" >Business: <span class = " text-xl" >{ formatPrice (tier .businessPrice )} (+ VAT)</span >
127
+
128
+ <div >
129
+ <div class = " font-bold text-lg" >
130
+ Business:
131
+ <span class = " text-xl ml-1" >{ formatPrice (tier .businessPrice )} (+ VAT)</span >
132
+ </div >
118
133
{ tier .lateBusinessPrice && (
119
- <span class = " text-sm font-normal ml-2 " >(Late: { formatPrice (tier .lateBusinessPrice )} + VAT)</span >
134
+ <div class = " text-sm font-normal ml-1 " >(Late business : { formatPrice (tier .lateBusinessPrice )} + VAT)</div >
120
135
)}
121
136
</div >
122
137
</div >
123
138
</div >
124
139
125
- <p class = " font-bold text-base" >This ticket includes:</p >
126
- <ul class = " text-base list-none pl-0" >
127
- { tier .features .map ((feature ) => (
128
- <li class = " flex items-start" >
129
- <span class = " flex-shrink-0 w-6" >
130
- { feature .icon ? feature .icon : " ✔️" }
131
- </span >
132
- <span set :html = { feature .text } ></span >
133
- </li >
134
- ))}
135
- </ul >
140
+ <div class = " mt-6" >
141
+ <p class = " font-bold text-base" >This ticket includes:</p >
142
+ <ul class = " text-base list-none pl-0" >
143
+ { tier .features .map ((feature ) => (
144
+ <li class = " flex items-start" >
145
+ <span class = " flex-shrink-0 w-6" >
146
+ { feature .icon ? feature .icon : " ✔️" }
147
+ </span >
148
+ <span set :html = { feature .text } ></span >
149
+ </li >
150
+ ))}
151
+ </ul >
152
+ </div >
136
153
</div >
137
154
))}
138
155
</div >
156
+ </div >
139
157
140
158
<style is:global >
141
159
.ticket-tiers-container {
0 commit comments