dasdas

frontend/src/pages/AuthPages/AuthPageLayout.tsx

@@ -3,10 +3,22 @@ import GridShape from "../../components/common/GridShape";
 import { Link } from "react-router-dom";
 import ThemeTogglerTwo from "../../components/common/ThemeTogglerTwo";
 
+interface PlanPreview {
+  name?: string;
+  price?: number | string;
+  billing_cycle?: string;
+  included_credits?: number;
+  max_sites?: number;
+  max_users?: number;
+  features?: string[];
+}
+
 export default function AuthLayout({
   children,
+  plan,
 }: {
   children: React.ReactNode;
+  plan?: PlanPreview | null;
 }) {
   return (
     <div className="relative p-6 bg-white z-1 dark:bg-gray-900 sm:p-0">
@@ -16,18 +28,52 @@ export default function AuthLayout({
           <div className="relative flex items-center justify-center z-1">
             {/* <!-- ===== Common Grid Shape Start ===== --> */}
             <GridShape />
-            <div className="flex flex-col items-center max-w-xs">
-              <Link to="/" className="block mb-4">
-                <img
-                  width={231}
-                  height={48}
-                  src="/images/logo/auth-logo.svg"
-                  alt="Logo"
-                />
-              </Link>
-              <p className="text-center text-gray-400 dark:text-white/60">
-                Free and Open-Source Tailwind CSS Admin Dashboard Template
-              </p>
+            <div className="flex flex-col items-center max-w-sm w-full gap-6 px-4">
+              <div className="flex flex-col items-center">
+                <Link to="/" className="block mb-4">
+                  <img
+                    width={231}
+                    height={48}
+                    src="/images/logo/auth-logo.svg"
+                    alt="Logo"
+                  />
+                </Link>
+                <p className="text-center text-gray-400 dark:text-white/60">
+                  Free and Open-Source Tailwind CSS Admin Dashboard Template
+                </p>
+              </div>
+              {plan && (
+                <div className="w-full rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm p-5 text-white shadow-lg">
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="text-lg font-semibold">{plan.name}</div>
+                    {plan.price !== undefined && (
+                      <div className="text-sm font-medium">
+                        ${Number(plan.price).toFixed(2)}
+                        {plan.billing_cycle ? `/ ${plan.billing_cycle}` : ""}
+                      </div>
+                    )}
+                  </div>
+                  <div className="text-xs text-white/80 space-y-1">
+                    {plan.included_credits !== undefined && (
+                      <div>Credits: {plan.included_credits}</div>
+                    )}
+                    {(plan.max_sites !== undefined || plan.max_users !== undefined) && (
+                      <div>
+                        {plan.max_sites !== undefined ? `Sites: ${plan.max_sites}` : ""}
+                        {plan.max_sites !== undefined && plan.max_users !== undefined ? " • " : ""}
+                        {plan.max_users !== undefined ? `Users: ${plan.max_users}` : ""}
+                      </div>
+                    )}
+                  </div>
+                  {Array.isArray(plan.features) && plan.features.length > 0 && (
+                    <ul className="mt-3 space-y-1 text-xs text-white/85 list-disc list-inside">
+                      {plan.features.slice(0, 7).map((f) => (
+                        <li key={f}>{f}</li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              )}
             </div>
           </div>
         </div>

frontend/src/pages/AuthPages/SignUp.tsx

@@ -1,16 +1,50 @@
+import { useEffect, useMemo, useState } from "react";
 import PageMeta from "../../components/common/PageMeta";
 import AuthLayout from "./AuthPageLayout";
 import SignUpForm from "../../components/auth/SignUpForm";
 
 export default function SignUp() {
+  const planSlug = useMemo(() => {
+    const params = new URLSearchParams(window.location.search);
+    return params.get("plan") || "";
+  }, []);
+
+  const [planDetails, setPlanDetails] = useState<any | null>(null);
+  const [planLoading, setPlanLoading] = useState(false);
+
+  useEffect(() => {
+    const fetchPlans = async () => {
+      if (!planSlug) return;
+      setPlanLoading(true);
+      try {
+        const API_BASE_URL = import.meta.env.VITE_BACKEND_URL || "https://api.igny8.com/api";
+        const res = await fetch(`${API_BASE_URL}/v1/auth/plans/`);
+        const data = await res.json();
+        const plans = data?.results || [];
+        const plan = plans.find((p: any) => p.slug === planSlug);
+        if (plan) {
+          const features = Array.isArray(plan.features)
+            ? plan.features.map((f: string) => f.charAt(0).toUpperCase() + f.slice(1))
+            : [];
+          setPlanDetails({ ...plan, features });
+        }
+      } catch (e) {
+        // ignore; SignUpForm will handle lack of plan data gracefully
+      } finally {
+        setPlanLoading(false);
+      }
+    };
+    fetchPlans();
+  }, [planSlug]);
+
   return (
     <>
       <PageMeta
         title="React.js SignUp Dashboard | TailAdmin - Next.js Admin Dashboard Template"
         description="This is React.js SignUp Tables Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
       />
-      <AuthLayout>
-        <SignUpForm />
+      <AuthLayout plan={planDetails}>
+        <SignUpForm planDetails={planDetails} planLoading={planLoading} />
       </AuthLayout>
     </>
   );