refactor: Modfied the size of Containers in Networkcard,Findtalent and Network pages

frontend/src/components/Jobskeleton.jsx

@@ -5,7 +5,7 @@ const Jobskeleton= ({ content,position,title,organization}) => {
 
   return(
     <div>
-      <div role="status" className="p-4 m-4 xl:mb-4 xl:ml-8 xl:mr-8 xl:p-6  border border-gray-200 rounded shadow md:p-6 dark:border-gray-700">
+      <div role="status" className="p-4 mx-[17rem] my-[0.7rem] border border-gray-200 rounded shadow md:p-6 dark:border-gray-700">
 
           <div className="flex font-bold w-auto flex-col">
                 <div className="h-auto aleo-semibold text-2xl p-2 w-60 text-start ">

frontend/src/components/NetworkCard.jsx

@@ -23,7 +23,7 @@ const NetworkCard = ({name,domain}) => {
        }, []);
 
 return (
-    <div className="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
+    <div className="w-3/12 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
         <div className="flex justify-end px-4 pt-4">
             <button
                 id="dropdownButton"

frontend/src/pages/Findtalent.jsx

@@ -116,7 +116,7 @@ const FindTalent = () => {
 
 
   return (
-    <div className="container my-5 mx-auto py-5 px-4 lg:px-8 flex flex-col lg:flex-row">
+    <div className="container my-5 mx-auto px-4 lg:px-8 flex flex-col lg:flex-row">
       <aside className="w-max lg:w-1/6 bg-white p-6 rounded-lg shadow-md mb-6 lg:mb-0 lg:mr-6 fixed lg:h-[calc(100vh-5rem)] overflow-y-auto">
         <h2 className="text-lg font-semibold mb-4 text-gray-800">Filters</h2>
         <div className="mb-4">
@@ -144,7 +144,7 @@ const FindTalent = () => {
       </aside>
 
       <main className="w-full lg:w-fit ml-[25%]">
-        <div className="bg-white p-6 rounded-lg shadow-md mb-8 fixed w-[calc(75%-8.5rem)] z-10">
+        <div className="bg-white p-6 rounded-lg shadow-md mb-8 fixed w-[calc(75%-13rem)] z-10">
           <div className="flex flex-col md:flex-row gap-4 items-start md:items-center mb-4">
             <div className="relative w-full md:w-1/2">
               <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
@@ -179,7 +179,7 @@ const FindTalent = () => {
           </div>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-[15%] pt-calc(6rem+1.5rem)] pr-[4.9rem]">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-[15%] pt-calc(6rem+1.5rem)] pr-20">
           {filteredCandidates.map((candidate) => (
             <div key={candidate.id} className="bg-white rounded-lg shadow-xl overflow-hidden hover:shadow-lg transition duration-300 flex flex-col">
               <div className="p-6 flex flex-col h-full">

frontend/src/pages/Network.jsx

@@ -11,22 +11,21 @@ const Network = () => {
     { name: "Jane Doe", domain: "Backend developer" },
     { name: "John Smith", domain: "Fullstack developer" },
     { name: "Jane Smith", domain: "Data scientist" },
-    { name: "John Doe", domain: "Frontend developer" }
+    { name: "John Doe", domain: "Frontend developer" },
+
   ];
 
   return (
     <>
 
-      <div className="container flex gap-7 flex-wrap justify-around">
-        <div className="w-full mb-6">
-        </div>
+      <div className="container mx-16 px-16 flex gap-5 flex-wrap justify-evenly">
+
         {networkData.map((person, index) => (
           <NetworkCard
             key={index}
             name={person.name}
             domain={person.domain}
-            className="w-full md:w-1/2 lg:w-1/3 p-4"
-          />
+            className="w-full md:w-1/2 lg:w-1/4 p-4"/>
         ))}
       </div>