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

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

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