salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

signup form

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-25 13:10:56 +00:00
parent 4248fd0969
commit 90e6e96b2b
1 changed files with 24 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/components/auth/SignUpFormUnified.tsx
View File

@@ -576,8 +576,8 @@ export default function SignUpFormUnified({
</div> </div>
</div> </div>
{/* Plan Cards - 2 columns, wider cards, no buttons */} {/* Plan Cards - Single column, stacked vertically */}
<div className="grid gap-5 grid-cols-1 xl:grid-cols-2"> <div className="grid gap-4 grid-cols-1 w-full px-4">
{plans.map((plan) => { {plans.map((plan) => {
const displayPrice = getDisplayPrice(plan); const displayPrice = getDisplayPrice(plan);
const features = extractFeatures(plan); const features = extractFeatures(plan);
@@ -589,7 +589,7 @@ export default function SignUpFormUnified({
<div <div
key={plan.id} key={plan.id}
onClick={() => onPlanSelect(plan)} onClick={() => onPlanSelect(plan)}
className={`relative rounded-2xl p-6 cursor-pointer transition-all duration-300 border-2 ${ className={`relative rounded-2xl p-5 cursor-pointer transition-all duration-300 border-2 ${
isSelected isSelected
? 'border-brand-500 bg-white dark:bg-gray-800 shadow-2xl ring-4 ring-brand-500/20' ? 'border-brand-500 bg-white dark:bg-gray-800 shadow-2xl ring-4 ring-brand-500/20'
: isPopular : isPopular
@@ -611,37 +611,38 @@ export default function SignUpFormUnified({
</div> </div>
</div> </div>
)} )}
<div className="mb-5">
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{plan.name}</h3> {/* Header: Plan name, price, and features in horizontal layout */}
<div className="flex items-baseline gap-1"> <div className="flex items-center gap-6">
<span className="text-4xl font-bold text-gray-900 dark:text-white"> {/* Plan Name & Price */}
{isFree ? 'Free' : `$${displayPrice.toFixed(2)}`} <div className="flex-shrink-0" style={{ minWidth: '200px' }}>
</span> <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-1">{plan.name}</h3>
<div className="h-5 flex items-center"> <div className="flex items-baseline gap-1">
<span className="text-3xl font-bold text-gray-900 dark:text-white">
{isFree ? 'Free' : `$${displayPrice.toFixed(2)}`}
</span>
{!isFree && ( {!isFree && (
<span className="text-gray-500 dark:text-gray-400 text-sm"> <span className="text-gray-500 dark:text-gray-400 text-sm">
{billingPeriod === 'annually' ? '/year' : '/month'} {billingPeriod === 'annually' ? '/year' : '/month'}
</span> </span>
)} )}
</div> </div>
</div>
<div className="h-5">
{billingPeriod === 'annually' && !isFree && ( {billingPeriod === 'annually' && !isFree && (
<p className="text-gray-500 dark:text-gray-400 text-xs"> <p className="text-gray-500 dark:text-gray-400 text-xs mt-0.5">
${(displayPrice / 12).toFixed(2)}/month billed annually ${(displayPrice / 12).toFixed(2)}/month billed annually
</p> </p>
)} )}
</div> </div>
</div>
{/* Features - 2 columns */}
{/* Features - All features in 2 columns */} <div className="flex-1 grid grid-cols-2 gap-x-6 gap-y-2.5">
<div className="grid grid-cols-2 gap-x-3 gap-y-2.5"> {features.map((feature, idx) => (
{features.map((feature, idx) => ( <div key={idx} className="flex items-center gap-2">
<div key={idx} className="flex items-start gap-2"> <CheckCircle className="w-4 h-4 text-green-500 dark:text-green-400 flex-shrink-0" />
<CheckCircle className="w-4 h-4 text-green-500 dark:text-green-400 flex-shrink-0 mt-0.5" /> <span className="text-sm text-gray-700 dark:text-gray-300 leading-tight">{feature}</span>
<span className="text-sm text-gray-700 dark:text-gray-300 leading-tight">{feature}</span> </div>
</div> ))}
))} </div>
</div> </div>
</div> </div>
); );