free and trial plans fixes and styling of sigini and signup forms

This commit is contained in:
IGNY8 VPS (Salman)
2026-01-17 06:12:47 +00:00
parent 839260a7db
commit 491ddc5fbb
7 changed files with 51 additions and 44 deletions

View File

@@ -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(() => {

View File

@@ -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);