Solutions listing page

src/components/Projects/ListProjectSolutions.tsx

@@ -236,7 +236,7 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
   ) : null;
 
   return (
-    <section className="-mx-2">
+    <section>
       {leavingRoadmapModal}
 
       <Pagination
@@ -253,7 +253,7 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
         }}
       />
 
-      <div className="my-4 flex flex-col divide-y divide-gray-100">
+      <div className="flex flex-col divide-y divide-gray-100">
         {solutions?.data.map((solution, counter) => {
           const isVisited = alreadyVisitedSolutions[solution._id!];
           const avatar = solution.user.avatar || '';
@@ -261,7 +261,7 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
           return (
             <div
               key={solution._id}
-              className="group flex items-center justify-between py-1 text-sm text-gray-500"
+              className="group flex items-center justify-between py-2 text-sm text-gray-500"
             >
               <div className="flex items-center gap-1.5">
                 <img

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

@@ -49,26 +49,14 @@ const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/maste
     <div class='container'>
       <ProjectTabs projectId={projectId} activeTab='solutions' />
 
-      <div class='overflow-hidden rounded-lg border bg-white p-5 mb-4'>
+      <div class='mb-4 overflow-hidden 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='relative mb-5'>
-          <div class='absolute right-2 top-2'>
+          <h1 class='mb-1 text-xl font-semibold'>
-            <Badge variant='yellow' text={projectData.difficulty} />
+            {projectData.title} Solutions
-          </div>
+          </h1>
-          <div class='mb-5'>
+          <p class='text-sm text-gray-500'>{projectData.description}</p>
-            <h1 class='mb-1.5 text-3xl font-semibold'>{projectData.title} Solutions</h1>
-            <p class='text-gray-500'>{projectData.description}</p>
-          </div>
-
-          <div class='mt-4'>
-            <div class='flex flex-row flex-wrap gap-1.5'>
-              {
-                projectData.skills.map((skill) => (
-                  <Badge variant='green' text={skill} />
-                ))
-              }
-            </div>
-          </div>
         </div>
+
         <ListProjectSolutions projectId={projectId} client:load />
       </div>
     </div>