diff --git a/apps/frontend/src/components/billing/embedded.billing.tsx b/apps/frontend/src/components/billing/embedded.billing.tsx index ef46aa4d..713c57e8 100644 --- a/apps/frontend/src/components/billing/embedded.billing.tsx +++ b/apps/frontend/src/components/billing/embedded.billing.tsx @@ -53,7 +53,7 @@ export const EmbeddedBilling: FC<{ } return ( -
+
{ return ( <>
-

- {checkout.type === 'loading' ? '' : t('billing_billing_address', 'Billing Address')} +

+ {checkout.type === 'loading' + ? '' + : t('billing_billing_address', 'Billing Address')}

-

+

{checkout.type === 'loading' ? '' : t('billing_payment', 'Payment')}

{checkout.type === 'loading' ? null : ( -
-
{t('billing_powered_by_stripe', 'Secure payments processed by Stripe')}
- Stripe +
+
+ {t( + 'billing_powered_by_stripe', + 'Secure payments processed by' + )} +
+ + +
)}
@@ -153,29 +174,38 @@ const SubmitBar: FC<{ loading: boolean }> = ({ loading }) => { } return ( -
-
+
+
{checkout.checkout.recurring?.trial?.trialEnd ? (
{t('billing_your_7_day_trial_is', 'Your 7-day trial is')}{' '} - {t('billing_100_percent_free', '100% free')} {t('billing_ending', 'ending')}{' '} + + {t('billing_100_percent_free', '100% free')} + {' '} + {t('billing_ending', 'ending')}{' '} +
{dayjs( checkout.checkout.recurring?.trial?.trialEnd * 1000 ).format('MMMM D, YYYY')}{' '} —{' '} - {t('billing_cancel_anytime_short', 'Cancel anytime.')} + + {t('billing_cancel_anytime_short', 'Cancel anytime.')} +
) : null}
diff --git a/apps/frontend/src/components/billing/faq.component.tsx b/apps/frontend/src/components/billing/faq.component.tsx index c0150181..b5eac193 100644 --- a/apps/frontend/src/components/billing/faq.component.tsx +++ b/apps/frontend/src/components/billing/faq.component.tsx @@ -134,7 +134,7 @@ export const FAQComponent: FC = () => { const list = useFaqList(); return (
-

+

{t('frequently_asked_questions', 'Frequently Asked Questions')}

diff --git a/apps/frontend/src/components/billing/first.billing.component.tsx b/apps/frontend/src/components/billing/first.billing.component.tsx index dde72dea..a1bc4913 100644 --- a/apps/frontend/src/components/billing/first.billing.component.tsx +++ b/apps/frontend/src/components/billing/first.billing.component.tsx @@ -86,9 +86,57 @@ export const FirstBillingComponent = () => { [] ); + const JoinOver = () => { + return ( + <> +
+ {t('billing_join_over', 'Join Over')}{' '} + + {t('billing_entrepreneurs_count', '18,000+ Entrepreneurs')} + {' '} + {t('billing_who_use', 'who use')}{' '} + {t( + 'billing_postiz_grow_social', + 'Postiz To Grow Their Social Presence' + )} +
+ + {!!user?.allowTrial && ( +
+
+
+ +
+
{t('billing_no_risk_trial', '100% No-Risk Free Trial')}
+
+
+
+ +
+
+ {t( + 'billing_pay_nothing_7_days', + 'Pay NOTHING for the first 7-days' + )} +
+
+
+
+ +
+
+ {t('billing_cancel_anytime', 'Cancel anytime, hassle-free')} +
+
+
+ )} + + ); + }; + return ( -
-
+
+
@@ -106,53 +154,9 @@ export const FirstBillingComponent = () => {
-
-
-
- {t('billing_join_over', 'Join Over')}{' '} - - {t('billing_entrepreneurs_count', '18,000+ Entrepreneurs')} - {' '} - {t('billing_who_use', 'who use')} - {'\n'} - {t( - 'billing_postiz_grow_social', - 'Postiz To Grow Their Social Presence' - )} -
- - {!!user?.allowTrial && ( -
-
-
- -
-
- {t('billing_no_risk_trial', '100% No-Risk Free Trial')} -
-
-
-
- -
-
- {t( - 'billing_pay_nothing_7_days', - 'Pay NOTHING for the first 7-days' - )} -
-
-
-
- -
-
- {t('billing_cancel_anytime', 'Cancel anytime, hassle-free')} -
-
-
- )} - +
+
+
{!isLoading && data && stripe ? ( <> @@ -162,16 +166,17 @@ export const FirstBillingComponent = () => { )}
-
+
-
+
+
{t('billing_choose_plan', 'Choose a Plan')}
-
+
{
{ onClick={() => setPeriod('YEARLY')} >
{t('billing_yearly', 'Yearly')}
-
+
{t('billing_20_percent_off', '20% Off')}
-
+
{price.map( ([key, value]) => (
setTier(key)} key={key} className={clsx( - 'cursor-pointer select-none w-[266px] h-[138px] p-[24px] rounded-[20px] flex flex-col', + 'cursor-pointer select-none w-[266px] h-[138px] tablet:w-full tablet:h-[124px] p-[24px] tablet:p-[15px] rounded-[20px] flex flex-col', key === tier - ? 'bg-[linear-gradient(138deg,#4C27E1_9.56%,#2F007B_76.16%)] text-white' - : 'border border-newColColor' + ? 'border-[1.5px] border-[#618DFF]' + : 'border-[1.5px] border-newColColor' )} > -
+
{capitalize(key)}
-
- +
+ $ { value[ @@ -230,7 +235,7 @@ export const FirstBillingComponent = () => { [] )}
-
+
{t('billing_features', 'Features')}
@@ -321,7 +326,7 @@ export const BillingFeatures: FC<{ tier: string }> = ({ tier }) => { }; return ( -
+
{features.map((feature) => (
@@ -334,7 +339,7 @@ export const BillingFeatures: FC<{ tier: string }> = ({ tier }) => { >
diff --git a/apps/frontend/src/components/new-layout/layout.component.tsx b/apps/frontend/src/components/new-layout/layout.component.tsx index dcfc7d37..8272e535 100644 --- a/apps/frontend/src/components/new-layout/layout.component.tsx +++ b/apps/frontend/src/components/new-layout/layout.component.tsx @@ -41,7 +41,7 @@ import { AttachToFeedbackIcon } from '@gitroom/frontend/components/new-layout/se import { FirstBillingComponent } from '@gitroom/frontend/components/billing/first.billing.component'; const jakartaSans = Plus_Jakarta_Sans({ - weight: ['600', '500'], + weight: ['600', '500', '700'], style: ['normal', 'italic'], subsets: ['latin'], }); diff --git a/apps/frontend/src/components/ui/check.icon.component.tsx b/apps/frontend/src/components/ui/check.icon.component.tsx index 069d0bc4..fe259a03 100644 --- a/apps/frontend/src/components/ui/check.icon.component.tsx +++ b/apps/frontend/src/components/ui/check.icon.component.tsx @@ -9,7 +9,7 @@ export const CheckIconComponent = () => { > { />