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

singup for, styling

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-17 05:55:52 +00:00
parent 501a269450
commit 839260a7db
4 changed files with 4136 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/components/auth/SignInForm.tsx
View File

@@ -113,58 +113,6 @@ export default function SignInForm() {
</p> </p>
</div> </div>
<div> <div>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-5">
<Button variant="outline" tone="neutral" size="md" className="gap-3">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.7511 10.1944C18.7511 9.47495 18.6915 8.94995 18.5626 8.40552H10.1797V11.6527H15.1003C15.0011 12.4597 14.4654 13.675 13.2749 14.4916L13.2582 14.6003L15.9087 16.6126L16.0924 16.6305C17.7788 15.1041 18.7511 12.8583 18.7511 10.1944Z"
fill="#4285F4"
/>
<path
d="M10.1788 18.75C12.5895 18.75 14.6133 17.9722 16.0915 16.6305L13.274 14.4916C12.5201 15.0068 11.5081 15.3666 10.1788 15.3666C7.81773 15.3666 5.81379 13.8402 5.09944 11.7305L4.99473 11.7392L2.23868 13.8295L2.20264 13.9277C3.67087 16.786 6.68674 18.75 10.1788 18.75Z"
fill="#34A853"
/>
<path
d="M5.10014 11.7305C4.91165 11.186 4.80257 10.6027 4.80257 9.99992C4.80257 9.3971 4.91165 8.81379 5.09022 8.26935L5.08523 8.1534L2.29464 6.02954L2.20333 6.0721C1.5982 7.25823 1.25098 8.5902 1.25098 9.99992C1.25098 11.4096 1.5982 12.7415 2.20333 13.9277L5.10014 11.7305Z"
fill="#FBBC05"
/>
<path
d="M10.1789 4.63331C11.8554 4.63331 12.9864 5.34303 13.6312 5.93612L16.1511 3.525C14.6035 2.11528 12.5895 1.25 10.1789 1.25C6.68676 1.25 3.67088 3.21387 2.20264 6.07218L5.08953 8.26943C5.81381 6.15972 7.81776 4.63331 10.1789 4.63331Z"
fill="#EB4335"
/>
</svg>
Sign in with Google
</Button>
<Button variant="outline" tone="neutral" size="md" className="gap-3">
<svg
width="21"
className="fill-current"
height="20"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M15.6705 1.875H18.4272L12.4047 8.75833L19.4897 18.125H13.9422L9.59717 12.4442L4.62554 18.125H1.86721L8.30887 10.7625L1.51221 1.875H7.20054L11.128 7.0675L15.6705 1.875ZM14.703 16.475H16.2305L6.37054 3.43833H4.73137L14.703 16.475Z" />
</svg>
Sign in with X
</Button>
</div>
<div className="relative py-3 sm:py-5">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-200 dark:border-gray-800"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="p-2 text-gray-400 bg-white dark:bg-gray-900 sm:px-5 sm:py-2">
Or
</span>
</div>
</div>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="space-y-6"> <div className="space-y-6">
{/* Logout Reason Display */} {/* Logout Reason Display */}

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

@@ -33,6 +33,7 @@ interface Plan {
max_ahrefs_queries: number; max_ahrefs_queries: number;
included_credits: number; included_credits: number;
features: string[]; features: string[];
annual_discount_percent?: number;
} }
interface Country { interface Country {
@@ -56,6 +57,7 @@ export default function SignUpFormUnified({
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [isChecked, setIsChecked] = useState(false); const [isChecked, setIsChecked] = useState(false);
const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'annually'>('monthly'); const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'annually'>('monthly');
const [annualDiscountPercent, setAnnualDiscountPercent] = useState(15);
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
firstName: '', firstName: '',
@@ -85,6 +87,16 @@ export default function SignUpFormUnified({
} }
}, [selectedPlan]); }, [selectedPlan]);
// Load annual discount percent from plans
useEffect(() => {
if (plans.length > 0) {
const planWithDiscount = plans.find(p => p.annual_discount_percent && p.annual_discount_percent > 0);
if (planWithDiscount && planWithDiscount.annual_discount_percent) {
setAnnualDiscountPercent(planWithDiscount.annual_discount_percent);
}
}
}, [plans]);
// Load countries from backend and detect user's country // Load countries from backend and detect user's country
useEffect(() => { useEffect(() => {
const loadCountriesAndDetect = async () => { const loadCountriesAndDetect = async () => {
@@ -254,7 +266,8 @@ export default function SignUpFormUnified({
const getDisplayPrice = (plan: Plan): number => { const getDisplayPrice = (plan: Plan): number => {
const monthlyPrice = typeof plan.price === 'number' ? plan.price : parseFloat(String(plan.price || 0)); const monthlyPrice = typeof plan.price === 'number' ? plan.price : parseFloat(String(plan.price || 0));
if (billingPeriod === 'annually') { if (billingPeriod === 'annually') {
return monthlyPrice * 12 * 0.85; // 15% discount const discountMultiplier = 1 - (annualDiscountPercent / 100);
return monthlyPrice * 12 * discountMultiplier;
} }
return monthlyPrice; return monthlyPrice;
}; };
@@ -263,7 +276,7 @@ export default function SignUpFormUnified({
<div className="flex flex-col lg:w-1/2 w-full"> <div className="flex flex-col lg:w-1/2 w-full">
{/* Mobile Pricing Toggle */} {/* Mobile Pricing Toggle */}
<div className="lg:hidden bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 p-4"> <div className="lg:hidden bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 p-4">
<div className="flex flex-col items-center gap-3"> <div className="flex items-center justify-center gap-3">
<div className="relative inline-flex p-1 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-sm"> <div className="relative inline-flex p-1 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-sm">
<span <span
className={`absolute top-1/2 left-1 flex h-9 w-28 -translate-y-1/2 rounded-md bg-gradient-to-br from-brand-500 to-brand-600 shadow-md transition-all duration-300 ease-out ${ className={`absolute top-1/2 left-1 flex h-9 w-28 -translate-y-1/2 rounded-md bg-gradient-to-br from-brand-500 to-brand-600 shadow-md transition-all duration-300 ease-out ${
@@ -276,7 +289,7 @@ export default function SignUpFormUnified({
size="sm" size="sm"
onClick={() => setBillingPeriod('monthly')} onClick={() => setBillingPeriod('monthly')}
className={`relative flex h-9 w-28 items-center justify-center text-sm font-semibold transition-all duration-200 rounded-md ${ 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' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' billingPeriod === 'monthly' ? 'text-white hover:text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
}`} }`}
> >
Monthly Monthly
@@ -287,37 +300,25 @@ export default function SignUpFormUnified({
size="sm" size="sm"
onClick={() => setBillingPeriod('annually')} onClick={() => setBillingPeriod('annually')}
className={`relative flex h-9 w-28 items-center justify-center text-sm font-semibold transition-all duration-200 rounded-md ${ 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' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' billingPeriod === 'annually' ? 'text-white hover:text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
}`} }`}
> >
Annually Annually
</Button> </Button>
</div> </div>
<div className="h-6 flex items-center justify-center"> <span className={`inline-flex items-center gap-1.5 text-xs text-success-600 dark:text-success-400 font-semibold bg-success-50 dark:bg-success-900/20 px-2 py-1 rounded-full transition-opacity duration-200 ${
<span className={`inline-flex items-center gap-1.5 text-xs text-success-600 dark:text-success-400 font-semibold bg-success-50 dark:bg-success-900/20 px-2 py-1 rounded-full transition-opacity duration-200 ${ billingPeriod === 'annually' ? 'opacity-100' : 'opacity-0'
billingPeriod === 'annually' ? 'opacity-100' : 'opacity-0' }`}>
}`}> <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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" />
<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>
</svg> Save {annualDiscountPercent}%
Save 15% </span>
</span>
</div>
</div> </div>
</div> </div>
<div className="flex-1 overflow-y-auto no-scrollbar flex items-center"> <div className="flex-1 overflow-y-auto no-scrollbar flex items-center">
<div className={`w-full mx-auto p-6 sm:p-8 ${ <div className="w-full mx-auto p-6 sm:p-8 max-w-2xl">
isPaidPlan ? 'max-w-2xl' : 'max-w-md'
}`}>
<Link
to="/"
className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 mb-6"
>
<ChevronLeftIcon className="size-5" />
Back to dashboard
</Link>
<div className="mb-6"> <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> <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"> <p className="text-sm text-gray-500 dark:text-gray-400">
@@ -486,9 +487,9 @@ export default function SignUpFormUnified({
{typeof document !== 'undefined' && {typeof document !== 'undefined' &&
document.getElementById('signup-pricing-plans') && document.getElementById('signup-pricing-plans') &&
ReactDOM.createPortal( ReactDOM.createPortal(
<div className="space-y-8"> <div className="space-y-6">
{/* Billing Toggle - Improved UI */} {/* Billing Toggle - Centered with inline discount */}
<div className="text-center space-y-3"> <div className="flex items-center justify-center gap-3">
<div className="relative inline-flex p-1 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-sm"> <div className="relative inline-flex p-1 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-sm">
<span <span
className={`absolute top-1/2 left-1 flex h-11 w-32 -translate-y-1/2 rounded-lg bg-gradient-to-br from-brand-500 to-brand-600 shadow-md transition-all duration-300 ease-out ${ className={`absolute top-1/2 left-1 flex h-11 w-32 -translate-y-1/2 rounded-lg bg-gradient-to-br from-brand-500 to-brand-600 shadow-md transition-all duration-300 ease-out ${
@@ -501,7 +502,7 @@ export default function SignUpFormUnified({
size="sm" size="sm"
onClick={() => setBillingPeriod('monthly')} onClick={() => setBillingPeriod('monthly')}
className={`relative flex h-11 w-32 items-center justify-center text-base font-semibold transition-all duration-200 rounded-lg ${ 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' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' billingPeriod === 'monthly' ? 'text-white hover:text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
}`} }`}
> >
Monthly Monthly
@@ -512,26 +513,24 @@ export default function SignUpFormUnified({
size="sm" size="sm"
onClick={() => setBillingPeriod('annually')} onClick={() => setBillingPeriod('annually')}
className={`relative flex h-11 w-32 items-center justify-center text-base font-semibold transition-all duration-200 rounded-lg ${ 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' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' billingPeriod === 'annually' ? 'text-white hover:text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
}`} }`}
> >
Annually Annually
</Button> </Button>
</div> </div>
<div className="h-7 flex items-center justify-center"> <p className={`inline-flex items-center gap-1.5 text-success-600 dark:text-success-400 text-sm font-semibold bg-success-50 dark:bg-success-900/20 px-3 py-1.5 rounded-full transition-opacity duration-200 ${
<p className={`inline-flex items-center gap-1.5 text-success-600 dark:text-success-400 text-sm font-semibold bg-success-50 dark:bg-success-900/20 px-3 py-1.5 rounded-full transition-opacity duration-200 ${ billingPeriod === 'annually' ? 'opacity-100' : 'opacity-0'
billingPeriod === 'annually' ? 'opacity-100' : 'opacity-0' }`}>
}`}> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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" />
<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>
</svg> Save {annualDiscountPercent}%
Save 15% with annual billing </p>
</p>
</div>
</div> </div>
{/* Plan Cards - Single column, stacked vertically */} {/* Plan Cards - Single column, stacked vertically */}
<div className="grid gap-4 grid-cols-1 w-full px-4"> <div className="grid gap-4 grid-cols-1 w-full max-w-[840px] mx-auto">
{plans.map((plan) => { {plans.map((plan) => {
const displayPrice = getDisplayPrice(plan); const displayPrice = getDisplayPrice(plan);
const features = extractFeatures(plan); const features = extractFeatures(plan);
@@ -543,12 +542,12 @@ export default function SignUpFormUnified({
<div <div
key={plan.id} key={plan.id}
onClick={() => onPlanSelect(plan)} onClick={() => onPlanSelect(plan)}
className={`relative rounded-2xl p-5 cursor-pointer transition-all duration-300 border-2 ${ className={`relative rounded-2xl p-5 cursor-pointer transition-all duration-300 ${
isSelected isSelected
? 'border-brand-500 bg-white dark:bg-gray-800 shadow-2xl ring-4 ring-brand-500/20' ? 'border-[3px] border-success-500 bg-white dark:bg-gray-800 shadow-2xl ring-4 ring-success-500/20'
: isPopular : isPopular
? 'border-brand-200 dark:border-brand-800 bg-white dark:bg-gray-800/50 hover:shadow-xl' ? 'border-2 border-brand-200 dark:border-brand-800 bg-white dark:bg-gray-800/50 hover:shadow-xl'
: 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/50 hover:shadow-lg' : 'border-2 border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/50 hover:shadow-lg'
}`} }`}
> >
{isPopular && !isSelected && ( {isPopular && !isSelected && (

32
frontend/src/pages/AuthPages/SignUp.tsx
View File

@@ -78,8 +78,8 @@ export default function SignUp() {
title="Sign Up - IGNY8" title="Sign Up - IGNY8"
description="Create your IGNY8 account and start building topical authority with AI-powered content" description="Create your IGNY8 account and start building topical authority with AI-powered content"
/> />
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800"> <div className="min-h-screen bg-white dark:bg-gray-900">
<div className="flex min-h-screen"> <div className="flex h-screen overflow-hidden">
{/* Left Side - Signup Form */} {/* Left Side - Signup Form */}
<SignUpFormUnified <SignUpFormUnified
plans={plans} plans={plans}
@@ -89,17 +89,33 @@ export default function SignUp() {
/> />
{/* Right Side - Pricing Plans */} {/* Right Side - Pricing Plans */}
<div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-brand-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 p-8 xl:p-12 items-start justify-center relative"> <div className="hidden lg:flex lg:w-1/2 bg-brand-950 dark:bg-white/5 p-8 xl:p-12 items-center justify-center relative">
{/* Logo - Top Right */} {/* GridShape Background */}
<Link to="/" className="absolute top-6 right-6"> <div className="absolute inset-0 flex items-center justify-center">
<div className="relative flex items-center justify-center z-1 w-full h-full">
<div className="absolute inset-0">
<svg className="w-full h-full opacity-40" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="0.5"/>
</pattern>
</defs>
<rect width="100" height="100" fill="url(#grid)" />
</svg>
</div>
</div>
</div>
{/* Logo - Top Right - Smaller */}
<Link to="/" className="absolute top-6 right-6 z-10">
<img <img
src="/images/logo/IGNY8_LIGHT_LOGO.png" src="/images/logo/IGNY8_DARK_LOGO.png"
alt="IGNY8" alt="IGNY8"
className="h-12 w-auto" className="h-8 w-auto"
/> />
</Link> </Link>
<div className="w-full max-w-2xl mt-20"> <div className="w-full max-w-[840px] relative z-10">
{/* Pricing Plans Component Will Load Here */} {/* Pricing Plans Component Will Load Here */}
<div id="signup-pricing-plans" className="w-full"> <div id="signup-pricing-plans" className="w-full">

4068
last-session.md Normal file
View File

File diff suppressed because it is too large Load Diff