free and trial plans fixes and styling of sigini and signup forms
This commit is contained in:
@@ -60,8 +60,8 @@ export default function SignUpFormEnhanced({ planDetails: planDetailsProp, planL
|
||||
const { register, loading } = useAuthStore();
|
||||
|
||||
const planSlug = new URLSearchParams(window.location.search).get('plan') || '';
|
||||
const paidPlans = ['starter', 'growth', 'scale'];
|
||||
const isPaidPlan = planSlug && paidPlans.includes(planSlug);
|
||||
// Determine if plan is paid based on price, not hardcoded slug
|
||||
const isPaidPlan = planDetails && parseFloat(String(planDetails.price || 0)) > 0;
|
||||
const totalSteps = isPaidPlan ? 3 : 1;
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -289,7 +289,7 @@ export default function SignUpFormUnified({
|
||||
size="sm"
|
||||
onClick={() => setBillingPeriod('monthly')}
|
||||
className={`relative flex h-9 w-28 items-center justify-center text-sm font-semibold transition-all duration-200 rounded-md ${
|
||||
billingPeriod === 'monthly' ? 'text-white hover:text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
|
||||
billingPeriod === 'monthly' ? 'text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:bg-gray-100 dark:hover:text-gray-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
Monthly
|
||||
@@ -300,7 +300,7 @@ export default function SignUpFormUnified({
|
||||
size="sm"
|
||||
onClick={() => setBillingPeriod('annually')}
|
||||
className={`relative flex h-9 w-28 items-center justify-center text-sm font-semibold transition-all duration-200 rounded-md ${
|
||||
billingPeriod === 'annually' ? 'text-white hover:text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
|
||||
billingPeriod === 'annually' ? 'text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:bg-gray-100 dark:hover:text-gray-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
Annually
|
||||
@@ -312,13 +312,13 @@ export default function SignUpFormUnified({
|
||||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Save {annualDiscountPercent}%
|
||||
Save up to {annualDiscountPercent}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto no-scrollbar flex items-center">
|
||||
<div className="w-full mx-auto p-6 sm:p-8 max-w-2xl">
|
||||
<div className="w-full mx-auto p-6 sm:p-8 max-w-[572px]">
|
||||
<div className="mb-6">
|
||||
<h1 className="mb-2 font-semibold text-gray-800 dark:text-white text-2xl">Sign Up for {selectedPlan?.name || 'IGNY8'}</h1>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
@@ -502,7 +502,7 @@ export default function SignUpFormUnified({
|
||||
size="sm"
|
||||
onClick={() => setBillingPeriod('monthly')}
|
||||
className={`relative flex h-11 w-32 items-center justify-center text-base font-semibold transition-all duration-200 rounded-lg ${
|
||||
billingPeriod === 'monthly' ? 'text-white hover:text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
|
||||
billingPeriod === 'monthly' ? 'text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:bg-gray-100 dark:hover:text-gray-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
Monthly
|
||||
@@ -513,7 +513,7 @@ export default function SignUpFormUnified({
|
||||
size="sm"
|
||||
onClick={() => setBillingPeriod('annually')}
|
||||
className={`relative flex h-11 w-32 items-center justify-center text-base font-semibold transition-all duration-200 rounded-lg ${
|
||||
billingPeriod === 'annually' ? 'text-white hover:text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
|
||||
billingPeriod === 'annually' ? 'text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:bg-gray-100 dark:hover:text-gray-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
Annually
|
||||
@@ -525,12 +525,12 @@ export default function SignUpFormUnified({
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Save {annualDiscountPercent}%
|
||||
Save up to {annualDiscountPercent}%
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Plan Cards - Single column, stacked vertically */}
|
||||
<div className="grid gap-4 grid-cols-1 w-full max-w-[840px] mx-auto">
|
||||
<div className="grid gap-4 grid-cols-1 w-full max-w-[640px] mx-auto">
|
||||
{plans.map((plan) => {
|
||||
const displayPrice = getDisplayPrice(plan);
|
||||
const features = extractFeatures(plan);
|
||||
|
||||
Reference in New Issue
Block a user