feat: add description categories homepage

Author: thedaviddias

app/_components/sections/overview-grid.tsx

@@ -17,9 +17,14 @@ export const OverviewGrid = async ({ lang }: { lang: string }) => {
     <div className="space-y-10 my-10">
       {categories.map((category) => (
         <div key={category.name}>
-          <h2 className="text-2xl font-bold mb-5 text-foreground">
-            {category.name}
-          </h2>
+          <div className="mb-5">
+            <h2 className="text-2xl font-bold text-foreground">
+              {category.name}
+            </h2>
+            <p className="mt-2 text-muted-foreground text-sm">
+              {category.description}
+            </p>
+          </div>
           <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
             {category.patterns.map((pattern) => (
               <PatternWrapper key={pattern.title} pattern={pattern} />

app/_constants/patterns.ts

@@ -3,19 +3,23 @@ import { Pattern } from "../_utils/get-pattern-categories"
 export const PATTERNS_MAP = {
   'content-management': {
     name: 'Content Management',
-    path: 'content-management'
+    path: 'content-management',
+    description: 'Organize and present content effectively with patterns for layout, structure, and information hierarchy.'
   },
   navigation: {
     name: 'Layout & Navigation',
-    path: 'navigation'
+    path: 'navigation',
+    description: 'Guide users through your application with intuitive navigation patterns and clear layout structures.'
   },
   'user-feedback': {
     name: 'User Feedback',
-    path: 'user-feedback'
+    path: 'user-feedback',
+    description: 'Keep users informed and engaged with responsive feedback mechanisms and clear status indicators.'
   },
   forms: {
     name: 'Input & Forms',
-    path: 'forms'
+    path: 'forms',
+    description: 'Create user-friendly forms and input interfaces that streamline data collection and user interaction.'
   },
 } as const
 

app/_utils/get-pattern-categories.ts

@@ -13,6 +13,7 @@ export type PatternStatus = 'complete' | 'draft' | 'coming-soon'
 export type PatternCategory = {
   name: string
   path: string
+  description: string
   patterns: Pattern[]
 }
 
@@ -48,6 +49,7 @@ export async function getPatternCategories(locale: string): Promise<PatternCateg
       return {
         name: category.name,
         path: category.path,
+        description: category.description,
         patterns: pages.map(page => {
           const iconName = page.frontMatter?.icon
           const status = (page.frontMatter?.status as PatternStatus) || 'coming-soon'

app/_utils/get-patterns.ts

@@ -6,6 +6,7 @@ export async function getPatterns(lang: string): Promise<PatternCategory[]> {
   return categories.map(category => ({
     name: category.name,
     path: category.path,
+    description: category.description,
     patterns: category.patterns.sort((a, b) => a.title.localeCompare(b.title))
   }))
 }