Update UI for projects

src/components/Dashboard/PersonalDashboard.tsx

@@ -258,7 +258,7 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
               icon={ConstructionEmoji}
               title="Build Projects"
               description="Practice what you learn"
-              href="/backend/projects"
+              href="/projects"
             />
             <DashboardCard
               icon={CheckEmoji}

src/components/Dashboard/ProgressStack.tsx

@@ -208,7 +208,7 @@ export function ProgressStack(props: ProgressStackProps) {
           emptyMessage={'No projects started'}
           emptyIcon={FolderKanban}
           emptyLinkText={'Explore Projects'}
-          emptyLinkHref={'/backend/projects'}
+          emptyLinkHref={'/projects'}
         >
           {projectsToShow.map((project) => {
             return (

src/components/FeatureAnnouncement.tsx

@@ -23,7 +23,7 @@ export function FeatureAnnouncement(props: FeatureAnnouncementProps) {
         </span>
         Projects are live on the{' '}
         <a
-          href={'/backend/projects'}
+          href={'/projects'}
           className="font-medium text-blue-500 underline underline-offset-2"
         >
           backend roadmap

src/components/NavigationDropdown.tsx

@@ -25,7 +25,7 @@ const links = [
     Icon: Waypoints,
   },
   {
-    link: '/backend/projects',
+    link: '/projects',
     label: 'Projects',
     description: 'Skill-up with real-world projects',
     Icon: FolderKanban,

src/components/Projects/ProjectsPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../lib/classname.ts';
-import { Filter, X } from 'lucide-react';
+import {Box, Filter, Group, X} from 'lucide-react';
 import {
   deleteUrlParam,
   getUrlParams,
@@ -13,12 +13,14 @@ import {
 } from '../../lib/project.ts';
 import { ProjectCard } from './ProjectCard.tsx';
 
+type ProjectGroup = {
+  id: string;
+  title: string;
+  projects: ProjectFileType[];
+};
+
 type ProjectsPageProps = {
-  roadmapsProjects: {
-    id: string;
-    title: string;
-    projects: ProjectFileType[];
-  }[];
+  roadmapsProjects: ProjectGroup[];
   userCounts: Record<string, number>;
 };
 
@@ -75,6 +77,10 @@ export function ProjectsPage(props: ProjectsPageProps) {
     [visibleProjects],
   );
 
+  const activeGroupDetail = roadmapsProjects.find(
+    (group) => group.id === activeGroup,
+  );
+
   return (
     <div className="border-t bg-gray-100">
       <button
@@ -133,7 +139,19 @@ export function ProjectsPage(props: ProjectsPageProps) {
             </div>
           </div>
         </div>
-        <div className="flex flex-grow flex-col gap-6 pb-20 pt-2 sm:pt-6">
+        <div className="flex flex-grow flex-col pb-20 pt-2 sm:pt-6">
+          <div className="mb-4 flex items-center justify-between text-sm text-gray-500">
+            <h3 className={'flex items-center'}>
+              <Box size={15} className="mr-1" strokeWidth={2} />
+              {activeGroupDetail
+                ? `Projects in ${activeGroupDetail?.title}`
+                : 'All Projects'}
+            </h3>
+            <p className="text-left">
+              Matches found ({sortedVisibleProjects.length})
+            </p>
+          </div>
+
           <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
             {sortedVisibleProjects.map((project) => (
               <ProjectCard