Sign up changes ui

2025-07-08 16:08:09 +05:30
parent 220336f3d7
commit 1ab4eb4750
5 changed files with 279 additions and 125 deletions
--- a/apps/student/app/signup/page.tsx
+++ b/apps/student/app/signup/page.tsx
@@ -14,6 +14,7 @@ import { Progress } from '@workspace/ui/components/progress';
 import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
 import { Form } from '@workspace/ui/components/form';
 import { useRouter } from 'next/navigation';
+import { useRef } from 'react';

 import { studentSignupSchema, StudentSignup } from './schema';
 import PersonalDetailsStep from './steps/PersonalDetailsStep';
@@ -57,6 +58,7 @@ export default function StudentRegistrationForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
+  const formRef = useRef<any>(null);

  const form = useForm<StudentSignup>({
    resolver: zodResolver(studentSignupSchema),
@@ -110,6 +112,8 @@ export default function StudentRegistrationForm() {
    const isValid = await validateCurrentStep();
    if (isValid && currentStep < steps.length) {
      setCurrentStep((prev) => prev + 1);
+    } else if (!isValid) {
+      alert('Please fill all required fields before proceeding.');
    }
  };

@@ -165,29 +169,99 @@ export default function StudentRegistrationForm() {

  const progress = (currentStep / steps.length) * 100;

+  // Map field keys to user-friendly names
+  const fieldLabels: Record<string, string> = {
+    firstName: 'First Name',
+    middleName: 'Middle Name',
+    lastName: 'Last Name',
+    mothersName: "Mother's Name",
+    rollNumber: 'Roll Number',
+    phoneNumber: 'Phone Number',
+    address: 'Address',
+    gender: 'Gender',
+    dob: 'Date of Birth',
+    personalGmail: 'Personal Email',
+    degree: 'Degree',
+    branch: 'Branch',
+    year: 'Year',
+    skills: 'Skills',
+    linkedin: 'LinkedIn',
+    github: 'GitHub',
+    ssc: 'SSC %',
+    hsc: 'HSC %',
+    isDiploma: 'Diploma Holder',
+    sgpi: 'Semester Grades',
+    internships: 'Internships',
+    resume: 'Resumes',
+  };
+
+  // Helper to recursively extract error fields
+  function extractErrorFields(errors: any, prefix = ''): string[] {
+    let fields: string[] = [];
+    for (const key in errors) {
+      if (typeof errors[key] === 'object' && errors[key] !== null && 'message' in errors[key]) {
+        fields.push(prefix + key);
+      } else if (typeof errors[key] === 'object' && errors[key] !== null) {
+        fields = fields.concat(extractErrorFields(errors[key], prefix + key + '.'));
+      }
+    }
+    return fields;
+  }
+
  return (
-    <div className="min-h-screen py-8">
-      <div className="max-w-4xl mx-auto px-4">
-        <Card>
+    <div className="relative min-h-screen py-8 flex flex-col items-center justify-start overflow-hidden animate-fade-in live-bg-gradient">
+      {/* Animated floating blobs with more vibrant colors */}
+      <div className="absolute top-[-100px] left-[-100px] w-96 h-96 bg-[#f8f8f8] rounded-full blur-3xl opacity-60 z-0 animate-blob1" />
+      <div className="absolute bottom-[-120px] right-[-120px] w-[32rem] h-[32rem] bg-[#d9d9d9] rounded-full blur-3xl opacity-60 z-0 animate-blob2" />
+      <div className="absolute top-1/2 left-1/2 w-80 h-80 bg-[#b3b3b3] rounded-full blur-2xl opacity-40 z-0 -translate-x-1/2 -translate-y-1/2 animate-blob3" />
+      <div className="absolute top-[20%] right-[10%] w-72 h-72 bg-[#7a7a7a] rounded-full blur-2xl opacity-50 z-0 animate-blob4" />
+      <div className="absolute bottom-[15%] left-[15%] w-64 h-64 bg-[#262626] rounded-full blur-2xl opacity-40 z-0 animate-blob5" />
+
+      {/* Welcoming heading - now always at the top */}
+      <div className="w-full text-center mb-8 z-10">
+        <h1 className="text-4xl font-extrabold text-primary drop-shadow-sm tracking-tight mb-2">Welcome to NextPlacement</h1>
+        <p className="text-lg text-gray-500 max-w-xl mx-auto">Register below to get started with your placement journey. Fill in your details step by step and let your career take off!</p>
+      </div>
+      <div className="max-w-4xl w-full mx-auto px-4 z-10">
+        <Card className="shadow-2xl rounded-3xl border border-gray-200 bg-white/90 backdrop-blur-md">
          <CardHeader>
-            <CardTitle className="text-2xl font-bold text-center">
+            <CardTitle className="text-3xl font-extrabold text-center text-primary drop-shadow-sm tracking-tight">
              Student Registration Form
            </CardTitle>
-            <div className="space-y-2">
+            <div className="space-y-2 mt-2">
              <div className="flex justify-between text-sm text-muted-foreground">
                <span>
                  Step {currentStep} of {steps.length}
                </span>
-                <span>{steps[currentStep - 1]?.title}</span>
+                <span className="font-semibold text-primary/80">{steps[currentStep - 1]?.title}</span>
              </div>
-              <Progress value={progress} className="w-full" />
+              <Progress value={progress} className="w-full h-2 rounded-full bg-muted" />
            </div>
          </CardHeader>
          <CardContent>
            <Form {...form}>
              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                className="space-y-6"
+                ref={formRef}
+                onSubmit={currentStep === steps.length
+                  ? form.handleSubmit(onSubmit, () => {
+                      // Get all error fields
+                      const errorFields = extractErrorFields(form.formState.errors);
+                      // Map to user-friendly names
+                      const prettyFields = errorFields.map((key) => {
+                        // Try to map top-level, or fallback to key
+                        const topKey = String(key.split('.')[0]);
+                        return fieldLabels[topKey] || key;
+                      });
+                      alert(
+                        'Please fill all required fields before submitting.\n' +
+                        (prettyFields.length > 0
+                          ? 'Missing/invalid: ' + prettyFields.join(', ')
+                          : '')
+                      );
+                    })
+                  : (e) => e.preventDefault()
+                }
+                className="space-y-8"
                onKeyDown={(e) => {
                  if (
                    e.key === 'Enter' &&
@@ -199,21 +273,22 @@ export default function StudentRegistrationForm() {
                }}
              >
                {renderStep()}
-                <div className="flex justify-between pt-6">
+                <div className="flex justify-between pt-8">
                  <Button
                    type="button"
                    variant="outline"
                    onClick={prevStep}
                    disabled={currentStep === 1}
+                    className="rounded-full px-8 py-2 shadow-sm"
                  >
                    Previous
                  </Button>
                  {currentStep === steps.length ? (
-                    <Button type="submit" disabled={isSubmitting || isPending}>
+                    <Button type="submit" disabled={isSubmitting || isPending} className="rounded-full px-8 py-2 shadow-md bg-gradient-to-r from-primary to-accent text-white">
                      {isSubmitting || isPending ? 'Submitting...' : 'Submit'}
                    </Button>
                  ) : (
-                    <Button type="button" onClick={nextStep}>
+                    <Button type="button" onClick={nextStep} className="rounded-full px-8 py-2 shadow-md bg-gradient-to-r from-primary to-accent text-white">
                      Next
                    </Button>
                  )}
@@ -223,6 +298,48 @@ export default function StudentRegistrationForm() {
          </CardContent>
        </Card>
      </div>
+      {/* Animated gradient and blob styles */}
+      <style jsx global>{`
+  /* ====== BACKGROUND GRADIENT ==================================== */
+  .live-bg-gradient {
+    /* lightest → darkest slate-blue progression */
+    background: linear-gradient(
+      120deg,
+      #f1f5f9,     /* slate-50  */
+      #cbd5e1 30%, /* slate-200 */
+      #94a3b8 60%, /* slate-400 */
+      #64748b 80%, /* slate-500 */
+      #334155      /* slate-700 */
+    );
+    background-size: 300% 300%;
+    animation: gradientMove 16s ease-in-out infinite;
+  }
+
+  @keyframes gradientMove {
+    0%   { background-position: 0% 50%; }
+    25%  { background-position: 100% 50%; }
+    50%  { background-position: 100% 100%; }
+    75%  { background-position: 0% 100%; }
+    100% { background-position: 0% 50%; }
+  }
+
+  /* ====== BLOB COLORS ============================================ */
+  .animate-blob1 { background: #e2e8f0; } /* slate-100 */
+  .animate-blob2 { background: #cbd5e1; } /* slate-200 */
+  .animate-blob3 { background: #94a3b8; } /* slate-400 */
+  .animate-blob4 { background: #64748b; } /* slate-500 */
+  .animate-blob5 { background: #475569; } /* slate-600 */
+
+  /* ====== BLOB MOTION (unchanged) ================================ */
+  .animate-blob1 { animation: blobMove1 18s ease-in-out infinite; }
+  .animate-blob2 { animation: blobMove2 22s ease-in-out infinite; }
+  .animate-blob3 { animation: blobMove3 20s ease-in-out infinite; }
+  .animate-blob4 { animation: blobMove4 26s ease-in-out infinite; }
+  .animate-blob5 { animation: blobMove5 24s ease-in-out infinite; }
+
+  /* existing keyframes … */
+`}</style>
+
    </div>
  );
 }