Update recommendation

src/components/Dashboard/DashboardPage.tsx

@@ -64,6 +64,7 @@ export function DashboardPage(props: DashboardPageProps) {
           {isLoading && (
             <>
               <DashboardTabSkeleton />
+              <DashboardTabSkeleton />
             </>
           )}
 
@@ -96,7 +97,7 @@ export function DashboardPage(props: DashboardPageProps) {
                 label="+ Create Team"
                 isActive={false}
                 href="/team/new"
-                className="border bg-transparent border-dashed text-gray-500 border-gray-300 text-sm px-3 hover:border-gray-600 hover:text-black"
+                className="border bg-transparent border-dashed text-gray-500 border-gray-300 text-sm px-3 hover:border-gray-600 hover:text-black text-[13px]"
               />
             </>
           )}
@@ -117,6 +118,6 @@ export function DashboardPage(props: DashboardPageProps) {
 
 function DashboardTabSkeleton() {
   return (
-    <div className="h-[30px] w-[120px] animate-pulse rounded-md border bg-white"></div>
+    <div className="h-[30px] w-[114px] animate-pulse rounded-md border bg-white"></div>
   );
 }

src/components/Dashboard/PersonalDashboard.tsx

@@ -182,7 +182,7 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
 
   const recommendedRoadmapIds = new Set(
     relatedRoadmapIds.length === 0
-      ? ['frontend', 'backend', 'devops', 'ai-data-scientist', 'full-stack']
+      ? ['frontend', 'backend', 'devops', 'ai-data-scientist', 'full-stack', 'api-design']
       : relatedRoadmapIds,
   );
 
@@ -242,21 +242,21 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
 
             <DashboardCard
               icon={BookEmoji}
-              title="Learn a new Skill"
-              description="Visit our Roadmaps"
+              title="Visit Roadmaps"
+              description="Learn new skills"
               href="/roadmaps"
             />
 
             <DashboardCard
               icon={ConstructionEmoji}
-              title="Practice your skills"
-              description="Visit Projects"
+              title="Build Projects"
+              description="Practice what you learn"
               href="/backend/projects"
             />
             <DashboardCard
               icon={CheckEmoji}
-              title="Do things right way"
-              description="Visit Best Practices"
+              title="Best Practices"
+              description="Do things right way"
               href="/best-practices"
             />
           </>

src/components/Dashboard/RecommendedRoadmaps.tsx

@@ -1,5 +1,6 @@
 import type { BuiltInRoadmap } from './PersonalDashboard';
 import { ArrowUpRight } from 'lucide-react';
+import { MarkFavorite } from '../FeaturedItems/MarkFavorite.tsx';
 
 type RecommendedRoadmapsProps = {
   roadmaps: BuiltInRoadmap[];
@@ -11,23 +12,23 @@ export function RecommendedRoadmaps(props: RecommendedRoadmapsProps) {
 
   return (
     <>
-      <div className="mb-3 mt-8 flex items-center justify-between gap-2">
+      <div className="mb-2 mt-8 flex items-center justify-between gap-2">
         <h2 className="text-xs uppercase text-gray-400">
           Recommended Roadmaps
         </h2>
 
         <a
           href="/roadmaps"
-          className="flex items-center gap-1 text-xs text-gray-500"
+          className="flex items-center gap-1 rounded-full bg-gray-500 px-2 py-0.5 text-xs font-medium text-white transition-colors hover:bg-black"
         >
-          <ArrowUpRight size={12} />
+          <ArrowUpRight size={12} strokeWidth={2.5} />
           All Roadmaps
         </a>
       </div>
 
       {isLoading ? (
         <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2 md:grid-cols-3">
-          {Array.from({ length: 12 }).map((_, index) => (
+          {Array.from({ length: 9 }).map((_, index) => (
             <RecommendedCardSkeleton key={index} />
           ))}
         </div>
@@ -38,6 +39,10 @@ export function RecommendedRoadmaps(props: RecommendedRoadmapsProps) {
           ))}
         </div>
       )}
+
+      <div className="mt-6 text-sm text-gray-500">
+        Need some help getting started? Check out our{' '}<a href="/get-started" className="text-blue-600 underline">Getting Started Guide</a>.
+      </div>
     </>
   );
 }
@@ -53,18 +58,16 @@ export function RecommendedRoadmapCard(props: RecommendedRoadmapCardProps) {
   return (
     <a
       href={url}
-      className="group relative flex flex-col rounded-md border bg-white px-3 py-2 text-left shadow-sm transition-all hover:border-gray-300 hover:bg-gray-50"
+      className="font-regular text-base group relative block rounded-lg border border-gray-200 bg-white px-2.5 py-2 text-black no-underline hover:border-gray-400 hover:bg-gray-50"
     >
-      <span className="truncate">{title}</span>
-      <span className="mt-1 text-sm text-gray-400">{description}</span>
-
-      <ArrowUpRight className="absolute right-2 top-2 h-4 w-4 text-gray-300 transition-colors group-hover:text-gray-500" />
+      <MarkFavorite className={'opacity-30'} resourceType={'roadmap'} resourceId={roadmap.id} />
+      {title}
     </a>
   );
 }
 
 function RecommendedCardSkeleton() {
   return (
-    <div className="h-[86px] w-full animate-pulse rounded-md bg-gray-200" />
+    <div className="h-[42px] w-full animate-pulse rounded-md bg-gray-200" />
   );
 }