@@ -86,9 +86,57 @@ export const FirstBillingComponent = () => {
8686 [ ]
8787 ) ;
8888
89+ const JoinOver = ( ) => {
90+ return (
91+ < >
92+ < div className = "text-[46px] font-[600] leading-[110%] tablet:text-[36px] mobile:!text-[30px] whitespace-pre-line text-balance" >
93+ { t ( 'billing_join_over' , 'Join Over' ) } { ' ' }
94+ < span className = "text-[#FC69FF]" >
95+ { t ( 'billing_entrepreneurs_count' , '18,000+ Entrepreneurs' ) }
96+ </ span > { ' ' }
97+ { t ( 'billing_who_use' , 'who use' ) } { ' ' }
98+ { t (
99+ 'billing_postiz_grow_social' ,
100+ 'Postiz To Grow Their Social Presence'
101+ ) }
102+ </ div >
103+
104+ { ! ! user ?. allowTrial && (
105+ < div className = "flex mt-[32px] mb-[10px] gap-[15px] tablet:mt-[32px] tablet:mb-[32px] text-[16px] font-[500] mobile:flex-col" >
106+ < div className = "flex gap-[8px]" >
107+ < div >
108+ < CheckIconComponent />
109+ </ div >
110+ < div > { t ( 'billing_no_risk_trial' , '100% No-Risk Free Trial' ) } </ div >
111+ </ div >
112+ < div className = "flex-1 flex gap-[8px] justify-center mobile:justify-start" >
113+ < div >
114+ < CheckIconComponent />
115+ </ div >
116+ < div >
117+ { t (
118+ 'billing_pay_nothing_7_days' ,
119+ 'Pay NOTHING for the first 7-days'
120+ ) }
121+ </ div >
122+ </ div >
123+ < div className = "flex gap-[8px]" >
124+ < div >
125+ < CheckIconComponent />
126+ </ div >
127+ < div >
128+ { t ( 'billing_cancel_anytime' , 'Cancel anytime, hassle-free' ) }
129+ </ div >
130+ </ div >
131+ </ div >
132+ ) }
133+ </ >
134+ ) ;
135+ } ;
136+
89137 return (
90- < div className = "blurMe flex flex-1 flex-col bg-newBgColorInner pb-[60px]" >
91- < div className = "h-[92px] px-[80px] py-[20px] flex border-b border-newColColor" >
138+ < div className = "blurMe flex flex-1 flex-col bg-newBgColorInner pb-[60px] mobile:pb-[100px] " >
139+ < div className = "h-[92px] px-[80px] tablet:px-[32px] mobile:!px-[16px] py-[20px] flex border-b border-newColColor" >
92140 < div className = "flex-1 flex items-center text-textColor" >
93141 < LogoTextComponent />
94142 </ div >
@@ -106,53 +154,9 @@ export const FirstBillingComponent = () => {
106154 </ div >
107155 </ div >
108156 </ div >
109- < div className = "flex px-[80px] flex-1" >
110- < div className = "flex-1 py-[40px] flex flex-col pe-[40px]" >
111- < div className = "text-[36px] font-[600] leading-[110%] whitespace-pre-line" >
112- { t ( 'billing_join_over' , 'Join Over' ) } { ' ' }
113- < span className = "text-[#FC69FF]" >
114- { t ( 'billing_entrepreneurs_count' , '18,000+ Entrepreneurs' ) }
115- </ span > { ' ' }
116- { t ( 'billing_who_use' , 'who use' ) }
117- { '\n' }
118- { t (
119- 'billing_postiz_grow_social' ,
120- 'Postiz To Grow Their Social Presence'
121- ) }
122- </ div >
123-
124- { ! ! user ?. allowTrial && (
125- < div className = "flex mt-[34px] mb-[10px]" >
126- < div className = "flex gap-[8px]" >
127- < div >
128- < CheckIconComponent />
129- </ div >
130- < div >
131- { t ( 'billing_no_risk_trial' , '100% No-Risk Free Trial' ) }
132- </ div >
133- </ div >
134- < div className = "flex-1 flex gap-[8px] justify-center" >
135- < div >
136- < CheckIconComponent />
137- </ div >
138- < div >
139- { t (
140- 'billing_pay_nothing_7_days' ,
141- 'Pay NOTHING for the first 7-days'
142- ) }
143- </ div >
144- </ div >
145- < div className = "flex gap-[8px]" >
146- < div >
147- < CheckIconComponent />
148- </ div >
149- < div >
150- { t ( 'billing_cancel_anytime' , 'Cancel anytime, hassle-free' ) }
151- </ div >
152- </ div >
153- </ div >
154- ) }
155-
157+ < div className = "flex px-[80px] tablet:px-[32px] mobile:!px-[16px] flex-1 flex-row tablet:flex-none tablet:flex-col-reverse" >
158+ < div className = "flex-1 py-[40px] tablet:pt-[80px] flex flex-col pe-[40px] tablet:pe-0" >
159+ < div className = "block tablet:hidden" > < JoinOver /> </ div >
156160 { ! isLoading && data && stripe ? (
157161 < >
158162 < EmbeddedBilling stripe = { stripe } secret = { data . client_secret } />
@@ -162,16 +166,17 @@ export const FirstBillingComponent = () => {
162166 < LoadingComponent />
163167 ) }
164168 </ div >
165- < div className = "flex flex-col ps-[40px] border-l border-newColColor py-[40px]" >
169+ < div className = "flex flex-col ps-[40px] tablet:!ps-[0] border-l border-newColColor py-[40px] mobile:!pt-[24px] tablet:border-none tablet:pb-0 " >
166170 < div className = "top-[20px] sticky" >
167- < div className = "flex mb-[24px]" >
171+ < div className = "hidden tablet:block" > < JoinOver /> </ div >
172+ < div className = "flex mb-[24px] mobile:flex-col" >
168173 < div className = "flex-1 text-[24px] font-[700]" >
169174 { t ( 'billing_choose_plan' , 'Choose a Plan' ) }
170175 </ div >
171- < div className = "h-[44px] px-[6px] flex items-center justify-center gap-[12px] border border-newColColor rounded-[12px] select-none" >
176+ < div className = "h-[44px] px-[6px] mobile:px-0 flex items-center justify-center mobile:justify-start gap-[12px] border border-newColColor rounded-[12px] select-none" >
172177 < div
173178 className = { clsx (
174- 'h-[32px] rounded-[6px] text-[16px] px-[12px] flex justify-center items-center' ,
179+ 'h-[32px] mobile:flex-1 rounded-[6px] text-[16px] px-[12px] flex justify-center items-center' ,
175180 period === 'MONTHLY'
176181 ? 'bg-boxFocused text-textItemFocused'
177182 : 'cursor-pointer'
@@ -182,38 +187,38 @@ export const FirstBillingComponent = () => {
182187 </ div >
183188 < div
184189 className = { clsx (
185- 'gap-[10px] h-[32px] rounded-[6px] text-[16px] px-[12px] flex justify-center items-center' ,
190+ 'gap-[10px] h-[32px] mobile:flex-1 rounded-[6px] text-[16px] px-[12px] flex justify-center items-center' ,
186191 period === 'YEARLY'
187192 ? 'bg-boxFocused text-textItemFocused'
188193 : 'cursor-pointer'
189194 ) }
190195 onClick = { ( ) => setPeriod ( 'YEARLY' ) }
191196 >
192197 < div > { t ( 'billing_yearly' , 'Yearly' ) } </ div >
193- < div className = "bg-[#AA0FA4] text-[white] px-[8px] rounded-[4px]" >
198+ < div className = "bg-[#AA0FA4] text-[white] px-[8px] rounded-[4px] mobile:hidden " >
194199 { t ( 'billing_20_percent_off' , '20% Off' ) }
195200 </ div >
196201 </ div >
197202 </ div >
198203 </ div >
199- < div className = "grid grid-cols-2 gap-[8px]" >
204+ < div className = "grid grid-cols-2 gap-[8px] mobile:!grid-cols-2 tablet:grid-cols-4 " >
200205 { price . map (
201206 ( [ key , value ] ) => (
202207 < div
203208 onClick = { ( ) => setTier ( key ) }
204209 key = { key }
205210 className = { clsx (
206- 'cursor-pointer select-none w-[266px] h-[138px] p-[24px] rounded-[20px] flex flex-col' ,
211+ 'cursor-pointer select-none w-[266px] h-[138px] tablet:w-full tablet:h-[124px] p-[24px] tablet:p-[15px ] rounded-[20px] flex flex-col' ,
207212 key === tier
208- ? 'bg-[linear-gradient(138deg,#4C27E1_9.56%,#2F007B_76.16%)] text-white '
209- : 'border border-newColColor'
213+ ? 'border-[1.5px] border-[#618DFF] '
214+ : 'border-[1.5px] border-newColColor'
210215 ) }
211216 >
212- < div className = "text-[20px] font-[500]" >
217+ < div className = "text-[20px] mobile:text-[18px] font-[500]" >
213218 { capitalize ( key ) }
214219 </ div >
215- < div className = "text-[24px] font-[400]" >
216- < span className = "text-[44px] font-[600]" >
220+ < div className = "text-[24px] mobile:text-[18px] font-[400]" >
221+ < span className = "text-[44px] mobile:text-[30px] font-[600]" >
217222 $
218223 {
219224 value [
@@ -230,7 +235,7 @@ export const FirstBillingComponent = () => {
230235 [ ]
231236 ) }
232237 </ div >
233- < div className = "flex flex-col mt-[54px] gap-[24px]" >
238+ < div className = "flex flex-col mt-[54px] gap-[24px] tablet:mt-[40px] " >
234239 < div className = "text-[24px] font-[700]" >
235240 { t ( 'billing_features' , 'Features' ) }
236241 </ div >
@@ -321,7 +326,7 @@ export const BillingFeatures: FC<{ tier: string }> = ({ tier }) => {
321326 } ;
322327
323328 return (
324- < div className = "grid grid-cols-2 gap-y-[8px] gap-x-[32px]" >
329+ < div className = "grid grid-cols-2 mobile:grid-cols-1 gap-y-[8px] gap-x-[32px]" >
325330 { features . map ( ( feature ) => (
326331 < div key = { feature . key } className = "flex items-center gap-[8px]" >
327332 < div >
@@ -334,7 +339,7 @@ export const BillingFeatures: FC<{ tier: string }> = ({ tier }) => {
334339 >
335340 < path
336341 d = "M11.825 0H4.84167C1.80833 0 0 1.80833 0 4.84167V11.8167C0 14.8583 1.80833 16.6667 4.84167 16.6667H11.8167C14.85 16.6667 16.6583 14.8583 16.6583 11.825V4.84167C16.6667 1.80833 14.8583 0 11.825 0ZM12.3167 6.41667L7.59167 11.1417C7.475 11.2583 7.31667 11.325 7.15 11.325C6.98333 11.325 6.825 11.2583 6.70833 11.1417L4.35 8.78333C4.10833 8.54167 4.10833 8.14167 4.35 7.9C4.59167 7.65833 4.99167 7.65833 5.23333 7.9L7.15 9.81667L11.4333 5.53333C11.675 5.29167 12.075 5.29167 12.3167 5.53333C12.5583 5.775 12.5583 6.16667 12.3167 6.41667Z"
337- fill = "white "
342+ fill = "currentColor "
338343 />
339344 </ svg >
340345 </ div >
0 commit comments