work on classmate-directory page

app/components/ClassmateTutorSection.tsx

@@ -1,20 +1,18 @@
 export default function Index() {
     return (
         <div className='relative flex flex-col justify-center items-center shadow-lg w-full rounded-[10px] py-8 overflow-hidden' style={{ background: 'transparent' }}>
-            <div className='absolute top-0 left-0 w-full h-1/2' style={{ backgroundImage: `url('../../assets/tutor.png')`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(8px)' }}></div>
+            <div className='absolute top-0 left-0 w-full h-2/5' style={{ backgroundImage: `url('../../assets/tutor.png')`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(8px)' }}></div>
-            <div className='absolute bottom-0 left-0 w-full h-1/2' style={{background: 'linear-gradient(101.74deg, #4276C5 0.01%, #26529D 100.18%)'}}></div>
+            <div className='absolute bottom-0 left-0 w-full h-3/5' style={{background: 'linear-gradient(101.74deg, #4276C5 0.01%, #26529D 100.18%)'}}></div>
             <br /><br />
-            <img className='w-[60px] h-[60px] border-[4px] border-[#FFF] rounded-full z-10' src={`../../assets/tutor.png`} alt="Tutor" />
+            <img className='w-[115px] h-[115px] border-[5px] border-[#3362AF] rounded-full z-10' src={`../../assets/tutor.png`} alt="Tutor" />
             <p className='z-10 text-[30px] font-[700] text-[#FFF]'>Sarah Anderson</p>
             <p className='z-10 '>
                 <span className="text-[14px] font-[700] text-[#EF7A0C]">TUTOR </span>
                 <span className="text-[#FFF]"> | </span>
                 <span className="text-[14px] font-[600] text-[#FFF]">Graduate Program</span>
             </p>
-            <hr className="z-10" />
+            <div className="z-10 border-b-[1px] border-[#B8B8B8] w-full my-3"></div>
-            {/* <p className="z-10">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id a cum maxime iste dicta minus vitae harum saepe, assumenda esse sit autem qui quis deserunt adipisci omnis veniam incidunt? Placeat.</p> */}
+            <p className="z-10 text-[12px] font-[600] text-[#fff] text-center">Early Childhood Educator | 3 YRS of Experience</p>
         </div>
     );
 }
-
-

app/components/TopPerformers.tsx

@@ -52,6 +52,141 @@ let performersData = [
         rank: "6",
         program: "Graduate Program",
         avatar: "avatar6.png"
+    },
+    {
+        id: "7",
+        name: "Alice",
+        score: "33/50",
+        points: "980",
+        rank: "7",
+        program: "Graduate Program",
+        avatar: "avatar1.png"
+    },
+    {
+        id: "8",
+        name: "Bob",
+        score: "32/50",
+        points: "978",
+        rank: "8",
+        program: "Graduate Program",
+        avatar: "avatar2.png"
+    },
+    {
+        id: "9",
+        name: "Charlie",
+        score: "30/50",
+        points: "975",
+        rank: "9",
+        program: "Graduate Program",
+        avatar: "avatar3.png"
+    },
+    {
+        id: "10",
+        name: "Diana",
+        score: "28/50",
+        points: "972",
+        rank: "10",
+        program: "Graduate Program",
+        avatar: "avatar4.png"
+    },
+    {
+        id: "11",
+        name: "Edward",
+        score: "27/50",
+        points: "970",
+        rank: "11",
+        program: "Graduate Program",
+        avatar: "avatar5.png"
+    },
+    {
+        id: "12",
+        name: "Fiona",
+        score: "26/50",
+        points: "968",
+        rank: "12",
+        program: "Graduate Program",
+        avatar: "avatar6.png"
+    },
+    {
+        id: "13",
+        name: "George",
+        score: "25/50",
+        points: "965",
+        rank: "13",
+        program: "Graduate Program",
+        avatar: "avatar1.png"
+    },
+    {
+        id: "14",
+        name: "Hannah",
+        score: "23/50",
+        points: "962",
+        rank: "14",
+        program: "Graduate Program",
+        avatar: "avatar2.png"
+    },
+    {
+        id: "15",
+        name: "Ian",
+        score: "22/50",
+        points: "960",
+        rank: "15",
+        program: "Graduate Program",
+        avatar: "avatar3.png"
+    },
+    {
+        id: "16",
+        name: "Julia",
+        score: "20/50",
+        points: "957",
+        rank: "16",
+        program: "Graduate Program",
+        avatar: "avatar4.png"
+    },
+    {
+        id: "17",
+        name: "Kyle",
+        score: "19/50",
+        points: "955",
+        rank: "17",
+        program: "Graduate Program",
+        avatar: "avatar5.png"
+    },
+    {
+        id: "18",
+        name: "Laura",
+        score: "18/50",
+        points: "953",
+        rank: "18",
+        program: "Graduate Program",
+        avatar: "avatar6.png"
+    },
+    {
+        id: "19",
+        name: "Michael",
+        score: "17/50",
+        points: "950",
+        rank: "19",
+        program: "Graduate Program",
+        avatar: "avatar1.png"
+    },
+    {
+        id: "20",
+        name: "Nancy",
+        score: "16/50",
+        points: "947",
+        rank: "20",
+        program: "Graduate Program",
+        avatar: "avatar2.png"
+    },
+    {
+        id: "21",
+        name: "Oliver",
+        score: "15/50",
+        points: "945",
+        rank: "21",
+        program: "Graduate Program",
+        avatar: "avatar3.png"
     }
 ];
 

app/routes/classmate-directory.tsx

@@ -194,7 +194,7 @@ const App: React.FC = () => {
                     <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
                         <div className='container mx-auto flex flex-row justify-between pr-8'>
                             <div className='inline-flex justify-center place-items-center'>
-                                <Breadcrumb separator=">" items={[{title: <a href="">Administration</a>,},{title: 'Class Directory',},]}/> 
+                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="">Administration</a>,},{title: 'Class Directory',},]}/> 
                             </div>
                             <div>
                                 <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
@@ -221,18 +221,20 @@ const App: React.FC = () => {
                     </div>
 
                     {/* Place Content from here */}
-                    <section className=''>
+                    <section className='container mx-auto'>
-                        <div className='grid grid-cols-1 md:grid-cols-7'>
+                        <div className='grid grid-cols-1 xl:grid-cols-7'>
-                            <div className='md:col-span-5 border-r-[1px] border-r-[#CFCFCF]'>
+                            <div className='xl:col-span-5 border-r-[1px] border-r-[#CFCFCF]'>
                                 <ClassMates />
                             </div>
-                            <div className='md:col-span-2 p-4'>
+                            <div className='xl:col-span-2 p-4'>
                                 <div>
                                     <ClassmateTutorSection />
                                 </div>
+                                <div className='border-[1px] border-r-[#CFCFCF] mt-6'>
                                     <TopPerformers />
                                 </div>
                             </div>
+                        </div>
                     </section>
 
                 </Content>