skelton design change

src/components/common/Skeleton.jsx

@@ -52,10 +52,6 @@ export const SkeletonText = ({
   height = 12,
   className = "",
 }) => {
-  useEffect(() => {
-    injectSkeletonStyles();
-  }, []);
-
   return (
     <div className={className} style={{ display: "grid", gap }}>
       {Array.from({ length: lines }).map((_, idx) => (
@@ -69,4 +65,44 @@ export const SkeletonText = ({
   );
 };
 
+export const SkeletonPage = ({ className = "" }) => {
+  return (
+    <div className={className} style={{ width: "100%", padding: "20px" }}>
+      {/* Header */}
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "24px" }}>
+        <Skeleton width="150px" height={40} />
+        <div style={{ display: "flex", gap: "16px" }}>
+          <Skeleton width="80px" height={36} />
+          <Skeleton width="80px" height={36} />
+          <Skeleton width="80px" height={36} />
+        </div>
+      </div>
+
+      {/* Banner */}
+      <div style={{ marginBottom: "32px" }}>
+        <Skeleton width="100%" height={250} rounded={12} />
+      </div>
+
+      {/* 4 Cards */}
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "24px", marginBottom: "40px" }}>
+        {Array.from({ length: 4 }).map((_, idx) => (
+          <div key={idx} style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+            <Skeleton width="100%" height={180} rounded={8} />
+            <Skeleton width="80%" height={20} />
+            <Skeleton width="60%" height={20} />
+          </div>
+        ))}
+      </div>
+
+      {/* Footer */}
+      <div style={{ borderTop: "1px solid #e5e7eb", paddingTop: "32px", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "24px" }}>
+        <SkeletonText lines={3} />
+        <SkeletonText lines={3} />
+        <SkeletonText lines={3} />
+        <SkeletonText lines={3} />
+      </div>
+    </div>
+  );
+};
+
 export default Skeleton;

src/feature/EducationalDetailsForm.jsx

@@ -225,7 +225,7 @@ const EducationalDetailsForm = ({
             {/* Occupation */}
             <div className="flex flex-col gap-4">
               <label className="text-gray-900 text-[15px]">
-                Occupation{requiredMark}
+                Occupation
               </label>
               <FormControl
                 fullWidth
@@ -269,7 +269,7 @@ const EducationalDetailsForm = ({
             {/* Company / Organization Name */}
             <div className="flex flex-col gap-4">
               <label className="text-gray-900 text-[15px]">
-                Company / Organization Name{requiredMark}
+                Company / Organization Name
               </label>
               <TextField
                 fullWidth
@@ -287,7 +287,7 @@ const EducationalDetailsForm = ({
             {/* Employee Type */}
             <div className="flex flex-col gap-4">
               <label className="text-gray-900 text-[15px]">
-                Employee Type{requiredMark}
+                Employee Type
               </label>
               <FormControl
                 fullWidth
@@ -333,7 +333,7 @@ const EducationalDetailsForm = ({
             {/* Annual Income */}
             <div className="flex flex-col gap-4">
               <label className="text-gray-900 text-[15px]">
-                Annual Income{requiredMark}
+                Annual Income
               </label>
               <FormControl
                 fullWidth

src/feature/PersonalDetailsForm.jsx

@@ -674,7 +674,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
 
           {/* Height */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">Height</label>
+            <label className="text-gray-900 text-[15px]">Height{requiredMark}</label>
             <TextField
               fullWidth
               name="height"

src/feature/ProfilePreviewPage.jsx

@@ -120,7 +120,7 @@ const ProfilePreviewPage = () => {
             <Edit2 size={20} />
           </IconButton>
         }
-        sx={{ padding: "15px 15px", background: "#f5fbff" }}
+        sx={{ padding: "15px 15px", background: "#ffff" }}
       />
       <Divider />
 

src/feature/StepperForm.jsx

@@ -589,6 +589,7 @@ useEffect(()=>{
         "mobileNumber",
         "gender",
         "dob",
+        "height",
         "maritalStatus",
         "profileFor",
         "caste",
@@ -638,10 +639,8 @@ useEffect(()=>{
       const required = [
         "qualification",
         "fieldOfStudy",
-        "occupation",
+       
-        "organization",
+       
-        "employeeType",
-        "income",
       ];
       required.forEach((field) => {
         if (!educationalDetails[field]) {

src/routes/AppRoutes.jsx

@@ -3,18 +3,10 @@ import { Route, Routes } from 'react-router-dom';
 import UserRoutes from './UserRoutes';
 import PublicRoutes from './PublicRoutes';
 import ScrollToTop from '../components/common/ScrollToTop';
-import Skeleton from "../components/common/Skeleton";
+import { SkeletonPage } from "../components/common/Skeleton";
 
 const RouteFallback = () => (
-  <div className="min-h-[60vh] flex items-center justify-center px-6">
+  <SkeletonPage />
-    <div className="w-full max-w-3xl space-y-4">
-      <Skeleton height={32} rounded={12} />
-      <Skeleton height={220} rounded={16} />
-      <Skeleton height={16} />
-      <Skeleton height={16} width="80%" />
-      <Skeleton height={16} width="60%" />
-    </div>
-  </div>
 );
 
 const AppRoutes = () => {