Sign up changes ui

apps/student/app/(main)/profile/page.tsx

@@ -257,7 +257,7 @@ export default function ProfilePage() {
       if (result.success) {
         setStudent((prev: Record<string, any> | null) => ({ ...(prev || {}), resumes: editingResumes }));
         setEditingSection(null);
-      } else {
+      } else if ('error' in result) {
         setError(result.error || 'Failed to update resumes');
       }
     } catch (err) {

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>
   );
 }

apps/student/app/signup/steps/AdditionalDetailsStep.tsx

@@ -11,21 +11,34 @@ import {
 } from '@workspace/ui/components/form';
 import { Input } from '@workspace/ui/components/input';
 import { Textarea } from '@workspace/ui/components/textarea';
+import { useState, useEffect } from 'react';
 
 export default function AdditionalDetailsStep({ form }: { form: any }) {
-  return (
-    <div className="space-y-4">
-      <h3 className="text-lg font-semibold">Additional Details</h3>
+  // For skills field bug fix: keep a local string state
+  const [skillsInput, setSkillsInput] = useState(
+    Array.isArray(form.getValues('skills')) ? form.getValues('skills').join(', ') : form.getValues('skills') || ''
+  );
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+  // Keep local state in sync if form value changes externally
+  useEffect(() => {
+    const formSkills = form.getValues('skills');
+    const asString = Array.isArray(formSkills) ? formSkills.join(', ') : formSkills || '';
+    setSkillsInput(asString);
+  }, [form.watch('skills')]);
+
+  return (
+    <div className="space-y-8">
+      <h3 className="text-2xl font-bold mb-4 text-primary">Additional Details</h3>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
         <FormField
           control={form.control}
           name="linkedin"
           render={({ field }) => (
-            <FormItem>
-              <FormLabel>LinkedIn Profile</FormLabel>
+            <FormItem className="bg-white border border-gray-200 rounded-2xl shadow-lg p-6 flex flex-col gap-2">
+              <FormLabel className="font-semibold">LinkedIn Profile</FormLabel>
               <FormControl>
-                <Input type="url" placeholder="https://linkedin.com/in/yourprofile" {...field} />
+                <Input type="url" placeholder="https://linkedin.com/in/yourprofile" {...field} className="focus:ring-2 focus:ring-primary/40" />
               </FormControl>
               <FormDescription>Optional</FormDescription>
               <FormMessage />
@@ -37,10 +50,10 @@ export default function AdditionalDetailsStep({ form }: { form: any }) {
           control={form.control}
           name="github"
           render={({ field }) => (
-            <FormItem>
-              <FormLabel>GitHub Profile</FormLabel>
+            <FormItem className="bg-white border border-gray-200 rounded-2xl shadow-lg p-6 flex flex-col gap-2">
+              <FormLabel className="font-semibold">GitHub Profile</FormLabel>
               <FormControl>
-                <Input type="url" placeholder="https://github.com/yourusername" {...field} />
+                <Input type="url" placeholder="https://github.com/yourusername" {...field} className="focus:ring-2 focus:ring-primary/40" />
               </FormControl>
               <FormDescription>Optional</FormDescription>
               <FormMessage />
@@ -53,21 +66,18 @@ export default function AdditionalDetailsStep({ form }: { form: any }) {
         control={form.control}
         name="skills"
         render={({ field }) => (
-          <FormItem>
-            <FormLabel>Skills</FormLabel>
+          <FormItem className="bg-white border border-gray-200 rounded-2xl shadow-lg p-6 flex flex-col gap-2">
+            <FormLabel className="font-semibold">Skills</FormLabel>
             <FormControl>
               <Textarea
                 placeholder="JavaScript, React, Node.js, Python"
-                className="resize-none"
-                value={
-                  field.value
-                    ? Array.isArray(field.value)
-                      ? field.value.join(', ')
-                      : field.value
-                    : ''
-                }
-                onChange={(e) => {
+                className="resize-none focus:ring-2 focus:ring-primary/40"
+                value={skillsInput}
+                onChange={e => setSkillsInput(e.target.value)}
+                onBlur={e => {
+                  // On blur, update the form value as an array
                   const value = e.target.value;
+                  setSkillsInput(value);
                   const skills = value
                     .split(',')
                     .map((s) => s.trim())

apps/student/app/signup/steps/InternshipStep.tsx

@@ -9,6 +9,7 @@ import { Textarea } from '@workspace/ui/components/textarea';
 import { Separator } from '@workspace/ui/components/separator';
 import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@workspace/ui/components/form';
 import { useForm } from 'react-hook-form';
+import { Briefcase, MapPin, CalendarDays, X } from 'lucide-react';
 
 export default function InternshipStep({ form }: { form: any }) {
   const [modalOpen, setModalOpen] = useState(false);
@@ -35,27 +36,32 @@ export default function InternshipStep({ form }: { form: any }) {
   };
 
   return (
-    <div className="space-y-6">
-      <div className="flex justify-between items-center">
-        <h3 className="text-lg font-semibold">Internships</h3>
-        <Button variant="outline" onClick={() => setModalOpen(true)}>
-          Add Internship
+    <div className="space-y-10">
+      <div className="flex justify-between items-center mb-2">
+        <h3 className="text-2xl font-bold text-primary">Internships</h3>
+        <Button
+          variant="default"
+          className="rounded-full px-6 py-2 text-base font-semibold shadow-md hover:scale-105 transition-transform"
+          onClick={() => setModalOpen(true)}
+        >
+          + Add Internship
         </Button>
       </div>
 
       {/* Custom Modal */}
       {modalOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-          <div className="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative">
+        <div className="fixed inset-0 z-50 flex items-center justify-center pointer-events-none">
+          <div className="bg-white rounded-3xl shadow-2xl w-full max-w-xl p-8 relative border border-gray-200 pointer-events-auto">
             <button
-              className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
+              className="absolute top-4 right-4 text-gray-400 hover:text-primary rounded-full p-2 transition-colors focus:outline-none focus:ring-2 focus:ring-primary"
               onClick={() => setModalOpen(false)}
               aria-label="Close"
+              type="button"
             >
-              ×
+              <X size={24} />
             </button>
-            <h2 className="text-xl font-bold mb-4">Add Internship Details</h2>
-            <div className="grid grid-cols-1 gap-4">
+            <h2 className="text-2xl font-bold mb-6 text-center text-primary">Add Internship Details</h2>
+            <div className="grid grid-cols-1 gap-5">
               <FormField
                 control={modalForm.control}
                 name="title"
@@ -63,7 +69,7 @@ export default function InternshipStep({ form }: { form: any }) {
                   <FormItem>
                     <FormLabel>Title</FormLabel>
                     <FormControl>
-                      <Input {...field} placeholder="e.g. SDE Intern" />
+                      <Input {...field} placeholder="e.g. SDE Intern" className="focus:ring-2 focus:ring-primary/40" />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -76,7 +82,7 @@ export default function InternshipStep({ form }: { form: any }) {
                   <FormItem>
                     <FormLabel>Company</FormLabel>
                     <FormControl>
-                      <Input {...field} placeholder="e.g. Google" />
+                      <Input {...field} placeholder="e.g. Google" className="focus:ring-2 focus:ring-primary/40" />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -89,7 +95,7 @@ export default function InternshipStep({ form }: { form: any }) {
                   <FormItem>
                     <FormLabel>Description</FormLabel>
                     <FormControl>
-                      <Textarea {...field} placeholder="Describe your work..." />
+                      <Textarea {...field} placeholder="Describe your work..." className="focus:ring-2 focus:ring-primary/40" />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -102,7 +108,7 @@ export default function InternshipStep({ form }: { form: any }) {
                   <FormItem>
                     <FormLabel>Location</FormLabel>
                     <FormControl>
-                      <Input {...field} placeholder="Remote / Mumbai" />
+                      <Input {...field} placeholder="Remote / Mumbai" className="focus:ring-2 focus:ring-primary/40" />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -116,7 +122,7 @@ export default function InternshipStep({ form }: { form: any }) {
                     <FormItem>
                       <FormLabel>Start Date</FormLabel>
                       <FormControl>
-                        <Input type="date" {...field} />
+                        <Input type="date" {...field} className="focus:ring-2 focus:ring-primary/40" />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -129,7 +135,7 @@ export default function InternshipStep({ form }: { form: any }) {
                     <FormItem>
                       <FormLabel>End Date</FormLabel>
                       <FormControl>
-                        <Input type="date" {...field} />
+                        <Input type="date" {...field} className="focus:ring-2 focus:ring-primary/40" />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -137,11 +143,13 @@ export default function InternshipStep({ form }: { form: any }) {
                 />
               </div>
             </div>
-            <div className="flex justify-end mt-6 gap-2">
-              <Button variant="outline" onClick={() => setModalOpen(false)}>
+            <div className="flex justify-end mt-8 gap-3">
+              <Button variant="outline" onClick={() => setModalOpen(false)} className="rounded-full px-5">
                 Cancel
               </Button>
-              <Button onClick={addInternship}>Add</Button>
+              <Button onClick={addInternship} className="rounded-full px-5">
+                Add
+              </Button>
             </div>
           </div>
         </div>
@@ -149,25 +157,32 @@ export default function InternshipStep({ form }: { form: any }) {
 
       <Separator />
 
-      <div className="space-y-4">
+      <div className="bg-white/80 border border-gray-200 rounded-2xl shadow-lg p-6 space-y-6 min-h-[120px]">
         {internships.length === 0 && (
-          <p className="text-sm text-muted-foreground">No internships added yet.</p>
+          <p className="text-base text-muted-foreground text-center">No internships added yet.</p>
         )}
 
         {internships.map((intern: any, idx: number) => (
-          <Card key={idx} className="bg-muted">
-            <CardHeader>
-              <CardTitle className="text-base font-semibold">
-                {intern.title} at {intern.company}
+          <Card key={idx} className="bg-white border border-gray-100 rounded-xl shadow flex flex-col md:flex-row items-start md:items-center gap-4 p-4">
+            <div className="flex flex-col flex-1 gap-1">
+              <CardHeader className="p-0 mb-1">
+                <CardTitle className="text-lg font-semibold flex items-center gap-2">
+                  <Briefcase size={18} className="text-primary" />
+                  {intern.title} <span className="text-gray-500 font-normal">@ {intern.company}</span>
                 </CardTitle>
               </CardHeader>
-            <CardContent className="space-y-1 text-sm">
-              <p>{intern.location}</p>
-              <p>
-                {intern.startDate} to {intern.endDate}
-              </p>
-              <p>{intern.description}</p>
+              <CardContent className="p-0 space-y-1 text-sm">
+                <div className="flex items-center gap-2 text-gray-600">
+                  <MapPin size={16} />
+                  <span>{intern.location}</span>
+                </div>
+                <div className="flex items-center gap-2 text-gray-600">
+                  <CalendarDays size={16} />
+                  <span>{intern.startDate} to {intern.endDate}</span>
+                </div>
+                <div className="text-gray-700 mt-1">{intern.description}</div>
               </CardContent>
+            </div>
           </Card>
         ))}
       </div>

apps/student/app/signup/steps/SemesterGradesStep.tsx

@@ -10,20 +10,27 @@ import { Separator } from '@workspace/ui/components/separator';
 export default function SemesterGradesStep({ form }: { form: any }) {
   const sems = Array.from({ length: 8 }, (_, i) => i + 1);
 
+  // Watch all KT values for all semesters
+  const ktValues = form.watch('sgpi') || [];
+
   return (
-    <div className="space-y-6">
-      <h3 className="text-lg font-semibold">Semester Grades</h3>
+    <div className="space-y-8">
+      <h3 className="text-2xl font-bold mb-4 text-primary">Semester Grades</h3>
 
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
         {sems.map((sem) => (
-        <div key={sem} className="border p-4 rounded-md shadow-sm">
-          <h4 className="font-medium text-md mb-2">Semester {sem}</h4>
+          <div
+            key={sem}
+            className="bg-white border border-gray-200 rounded-2xl shadow-lg p-6 transition-transform hover:scale-[1.01] flex flex-col gap-4"
+          >
+            <h4 className="font-semibold text-lg mb-2 text-primary/80">Semester {sem}</h4>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="flex flex-col gap-4 md:flex-row md:items-center md:gap-6">
               <FormField
                 control={form.control}
                 name={`sgpi.${sem - 1}.sgpi`}
                 render={({ field }) => (
-                <FormItem>
+                  <FormItem className="flex-1 min-w-[120px]">
                     <FormLabel>SGPI *</FormLabel>
                     <FormControl>
                       <Input
@@ -35,6 +42,7 @@ export default function SemesterGradesStep({ form }: { form: any }) {
                           const val = e.target.value;
                           field.onChange(val === '' ? '' : Number(val));
                         }}
+                        className="focus:ring-2 focus:ring-primary/40"
                       />
                     </FormControl>
                     <FormMessage />
@@ -46,7 +54,7 @@ export default function SemesterGradesStep({ form }: { form: any }) {
                 control={form.control}
                 name={`sgpi.${sem - 1}.kt`}
                 render={({ field }) => (
-                <FormItem className="flex items-center space-x-2">
+                  <FormItem className="flex flex-row items-center space-x-2 min-w-[100px]">
                     <FormControl>
                       <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                     </FormControl>
@@ -55,11 +63,13 @@ export default function SemesterGradesStep({ form }: { form: any }) {
                 )}
               />
 
+              {/* Only show KT Dead if KT is checked */}
+              {ktValues[sem - 1]?.kt && (
                 <FormField
                   control={form.control}
                   name={`sgpi.${sem - 1}.ktDead`}
                   render={({ field }) => (
-                <FormItem className="flex items-center space-x-2">
+                    <FormItem className="flex flex-row items-center space-x-2 min-w-[120px]">
                       <FormControl>
                         <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                       </FormControl>
@@ -67,12 +77,14 @@ export default function SemesterGradesStep({ form }: { form: any }) {
                     </FormItem>
                   )}
                 />
+              )}
             </div>
           </div>
         ))}
+      </div>
 
       <Separator />
-      <p className="text-sm text-muted-foreground">Note: First 4 semesters are mandatory.</p>
+      <p className="text-sm text-muted-foreground mt-2">Note: First 4 semesters are mandatory.</p>
     </div>
   );
 }