Update empty project page

src/components/Projects/EmptySolutions.tsx

@@ -9,20 +9,19 @@ export function EmptySolutions(props: EmptySolutionsProps) {
 
   return (
     <div className="flex min-h-[250px] flex-col items-center justify-center rounded-xl px-5 py-3 sm:px-0 sm:py-20">
-      <Blocks className="mb-4 h-8 w-8 opacity-10 sm:h-14 sm:w-14" />
+      <Blocks className="mb-4 opacity-10 h-14 w-14" />
       <h2 className="mb-1 text-lg font-semibold sm:text-xl">
-        No Solutions Found
+        No solutions submitted yet
       </h2>
-      <p className="mb-3 text-balance text-center text-xs text-gray-800 sm:text-sm">
+      <p className="mb-3 text-balance text-center text-xs text-gray-400 sm:text-sm">
-        No solutions submitted yet. Be the first one to submit a solution.
+        Be the first to submit a solution for this project
       </p>
       <div className="flex flex-col items-center gap-1 sm:flex-row sm:gap-1.5">
         <a
           href={`/projects/${projectId}`}
           className="flex w-full items-center gap-1.5 rounded-md bg-gray-900 px-3 py-1.5 text-xs text-white sm:w-auto sm:text-sm"
         >
-          <CodeXml className="h-4 w-4" />
+          View Project Details
-          Start project
         </a>
       </div>
     </div>

src/components/Projects/ProjectTabs.tsx

@@ -1,4 +1,5 @@
 import { cn } from '../../lib/classname';
+import { Blocks, BoxSelect, StickyNote, Text } from 'lucide-react';
 
 export const allowedProjectTabs = ['details', 'solutions'] as const;
 export type AllowedProjectTab = (typeof allowedProjectTabs)[number];
@@ -12,8 +13,8 @@ export function ProjectTabs(props: ProjectTabsProps) {
   const { activeTab, projectId } = props;
 
   const tabs = [
-    { name: 'Project Details', value: 'details' },
+    { name: 'Project Details', value: 'details', icon: Text },
-    { name: 'Community Solutions', value: 'solutions' },
+    { name: 'Community Solutions', value: 'solutions', icon: Blocks },
   ];
 
   return (
@@ -21,20 +22,20 @@ export function ProjectTabs(props: ProjectTabsProps) {
       {tabs.map((tab) => {
         const isActive = tab.value === activeTab;
 
-        const href =
-          tab.value === 'details'
-            ? `/projects/${projectId}`
-            : `/projects/${projectId}/${tab.value}`;
-
         return (
           <a
             key={tab.value}
-            href={href}
+            href={
-            className={cn(
+              tab.value === 'details'
-              'relative p-2',
+                ? `/projects/${projectId}`
-              isActive ? 'font-medium' : 'opacity-50',
+                : `/projects/${projectId}/${tab.value}`
-            )}
+            }
+            className={cn('relative flex items-center gap-1 p-2', {
+              'font-medium text-black': isActive,
+              'opacity-50 hover:opacity-90': !isActive,
+            })}
           >
+            {tab.icon && <tab.icon className="mr-1 inline-block h-4 w-4" />}
             {tab.name}
             {isActive && (
               <span className="absolute bottom-0 left-0 right-0 h-0.5 translate-y-1/2 bg-black"></span>

src/components/Projects/StartProjectModal.tsx

@@ -94,7 +94,7 @@ export function StartProjectModal(props: StartProjectModalProps) {
       <p className="-mx-4 -mt-4 flex items-center bg-yellow-200 px-3 py-2 text-sm text-yellow-900">
         <CheckIcon additionalClasses="mr-1.5 w-[15px] text-yellow-800 h-[15px]" />
         <span className="mr-1.5 font-normal">Project started</span>{' '}
-        <span className="font-bold">{formattedStartedAt}</span>
+        <span className="font-semibold">{formattedStartedAt}</span>
       </p>
       <h2 className="mb-0.5 mt-5 text-2xl font-semibold text-gray-800">
         Start Building

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

@@ -49,7 +49,7 @@ const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/maste
     <div class='container'>
       <ProjectTabs projectId={projectId} activeTab='details' />
 
-      <div class='mb-3 rounded-lg border bg-white p-5'>
+      <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} />

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

@@ -49,13 +49,13 @@ 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'>
+      <div class='overflow-hidden rounded-lg border bg-white p-5 mb-4'>
         <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>
+            <h1 class='mb-1.5 text-3xl font-semibold'>{projectData.title} Solutions</h1>
             <p class='text-gray-500'>{projectData.description}</p>
           </div>