singup for, styling

2026-01-17 05:55:52 +00:00
parent 501a269450
commit 839260a7db
4 changed files with 4136 additions and 105 deletions
--- a/frontend/src/components/auth/SignUpFormUnified.tsx
+++ b/frontend/src/components/auth/SignUpFormUnified.tsx
@@ -33,6 +33,7 @@ interface Plan {
  max_ahrefs_queries: number;
  included_credits: number;
  features: string[];
+  annual_discount_percent?: number;
 }

 interface Country {
@@ -56,6 +57,7 @@ export default function SignUpFormUnified({
  const [showPassword, setShowPassword] = useState(false);
  const [isChecked, setIsChecked] = useState(false);
  const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'annually'>('monthly');
+  const [annualDiscountPercent, setAnnualDiscountPercent] = useState(15);

  const [formData, setFormData] = useState({
    firstName: '',
@@ -85,6 +87,16 @@ export default function SignUpFormUnified({
    }
  }, [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
  useEffect(() => {
    const loadCountriesAndDetect = async () => {
@@ -254,7 +266,8 @@ export default function SignUpFormUnified({
  const getDisplayPrice = (plan: Plan): number => {
    const monthlyPrice = typeof plan.price === 'number' ? plan.price : parseFloat(String(plan.price || 0));
    if (billingPeriod === 'annually') {
-      return monthlyPrice * 12 * 0.85; // 15% discount
+      const discountMultiplier = 1 - (annualDiscountPercent / 100);
+      return monthlyPrice * 12 * discountMultiplier;
    }
    return monthlyPrice;
  };
@@ -263,7 +276,7 @@ export default function SignUpFormUnified({
    <div className="flex flex-col lg:w-1/2 w-full">
      {/* 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="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">
            <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 ${
@@ -276,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' : '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
@@ -287,37 +300,25 @@ 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' : '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
            </Button>
          </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 ${
-              billingPeriod === 'annually' ? 'opacity-100' : 'opacity-0'
-            }`}>
-              <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 15%
-            </span>
-          </div>
+          <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'
+          }`}>
+            <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}%
+          </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 ${
-          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="w-full mx-auto p-6 sm:p-8 max-w-2xl">
          <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">
@@ -486,9 +487,9 @@ export default function SignUpFormUnified({
        {typeof document !== 'undefined' &&
          document.getElementById('signup-pricing-plans') &&
          ReactDOM.createPortal(
-            <div className="space-y-8">
-              {/* Billing Toggle - Improved UI */}
-              <div className="text-center space-y-3">
+            <div className="space-y-6">
+              {/* Billing Toggle - Centered with inline discount */}
+              <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">
                  <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 ${
@@ -501,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' : '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
@@ -512,26 +513,24 @@ 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' : '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
                  </Button>
                </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 ${
-                    billingPeriod === 'annually' ? 'opacity-100' : 'opacity-0'
-                  }`}>
-                    <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 15% with annual billing
-                  </p>
-                </div>
+                <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'
+                }`}>
+                  <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}%
+                </p>
              </div>

              {/* 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) => {
                  const displayPrice = getDisplayPrice(plan);
                  const features = extractFeatures(plan);
@@ -543,12 +542,12 @@ export default function SignUpFormUnified({
                    <div
                      key={plan.id}
                      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
-                          ? '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
-                          ? '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-brand-200 dark:border-brand-800 bg-white dark:bg-gray-800/50 hover:shadow-xl'
+                          : 'border-2 border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/50 hover:shadow-lg'
                      }`}
                    >
                      {isPopular && !isSelected && (