Redesign project page header

src/components/Projects/StatusStepper/ProjectStepper.tsx

@@ -82,7 +82,7 @@ export function ProjectStepper(props: ProjectStepperProps) {
     <div
       ref={stickyElRef}
       className={cn(
-        'sticky top-0 -mx-2 -mt-2 mb-5 overflow-hidden rounded-lg border bg-white transition-all',
+        'sticky top-0 my-5 overflow-hidden rounded-lg border bg-white transition-all',
         {
           '-mx-5 rounded-none border-x-0 border-t-0 bg-gray-50': isSticky,
         },
@@ -131,7 +131,7 @@ export function ProjectStepper(props: ProjectStepperProps) {
       )}
       <div
         className={cn(
-          'border-b bg-gray-100 px-4 py-2 text-sm text-gray-500 transition-colors',
+          'px-4 py-2 text-sm text-gray-500 transition-colors bg-gray-100',
           {
             'bg-purple-600 text-white': isSticky,
           },

src/pages/projects/[projectId]/index.astro

@@ -49,17 +49,9 @@ const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/maste
     <div class='container'>
       <ProjectTabs projectId={projectId} activeTab='details' />
 
-      <div class='mb-4 rounded-lg border bg-white p-5'>
-        <div class='relative -mx-2 -mt-2 mb-5 rounded-lg bg-gray-100/70 p-5'>
-          <div class='absolute right-2 top-2'>
-            <Badge variant='yellow' text={projectData.difficulty} />
-          </div>
-          <div class='mb-5'>
-            <h1 class='mb-1.5 text-3xl font-semibold'>{projectData.title}</h1>
-            <p class='text-gray-500'>{projectData.description}</p>
-          </div>
-
-          <div class='mt-4'>
+      <div class='mb-4 rounded-lg border bg-gradient-to-b from-gray-100 to-white to-10% p-5'>
+        <div class='relative'>
+          <div class='mb-4 flex items-center justify-between'>
             <div class='flex flex-row flex-wrap gap-1.5'>
               {
                 projectData.skills.map((skill) => (
@@ -67,6 +59,11 @@ const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/maste
                 ))
               }
             </div>
+            <Badge variant='yellow' text={projectData.difficulty} />
+          </div>
+          <div class="my-7">
+            <h1 class='mb-2 text-3xl font-semibold'>{projectData.title}</h1>
+            <p class='text-sm text-gray-500'>{projectData.description}</p>
           </div>
         </div>