feat: add line clamp utility and integrate RecentTaskTimeline component

- Added a new CSS utility for line clamping to `globals.css` for better text overflow handling.
- Integrated `WelcomeSection` into `HomePageClient` for enhanced user experience.
- Replaced `TaskCard` with `RecentTaskTimeline` in `RecentTasks` for improved task visualization.
- Updated `ui/index.ts` to export `RecentTaskTimeline` and showcased it in `CardsSection` and `FeedbackSection`.

src/components/ui-showcase/sections/CardsSection.tsx

@@ -9,6 +9,7 @@ import { MetricCard } from '@/components/ui/MetricCard';
 import { AchievementCard } from '@/components/ui/AchievementCard';
 import { ChallengeCard } from '@/components/ui/ChallengeCard';
 import { SkeletonCard } from '@/components/ui/SkeletonCard';
+import { RecentTaskTimeline } from '@/components/ui/RecentTaskTimeline';
 import { AchievementData } from '@/components/ui/AchievementCard';
 import { ChallengeData } from '@/components/ui/ChallengeCard';
 
@@ -224,6 +225,54 @@ export function CardsSection() {
             />
           </div>
         </div>
+
+        {/* Recent Task Timeline */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-medium text-[var(--foreground)]">Recent Task Timeline</h3>
+          <div className="space-y-1">
+            <RecentTaskTimeline
+              title="Implement user authentication"
+              description="Add login and registration functionality with JWT tokens"
+              status="in_progress"
+              priority="high"
+              tags={['auth', 'security', 'backend']}
+              dueDate={new Date(Date.now() + 3 * 86400000)}
+              source="jira"
+              jiraKey="PROJ-123"
+              updatedAt={new Date(Date.now() - 2 * 3600000)}
+            />
+            <RecentTaskTimeline
+              title="Design new dashboard"
+              description="Create a modern dashboard interface with analytics"
+              status="todo"
+              priority="medium"
+              tags={['design', 'ui', 'frontend']}
+              dueDate={new Date(Date.now() + 7 * 86400000)}
+              source="manual"
+              updatedAt={new Date(Date.now() - 1 * 86400000)}
+            />
+            <RecentTaskTimeline
+              title="Fix critical bug in payment system"
+              description="Resolve issue with payment processing"
+              status="done"
+              priority="high"
+              tags={['bug', 'payment', 'critical']}
+              completedAt={new Date(Date.now() - 1 * 3600000)}
+              source="tfs"
+              tfsPullRequestId={456}
+            />
+            <RecentTaskTimeline
+              title="Update documentation"
+              description="Update API documentation for new endpoints"
+              status="in_progress"
+              priority="low"
+              tags={['docs', 'api']}
+              source="reminders"
+              updatedAt={new Date(Date.now() - 30 * 60000)}
+            />
+          </div>
+        </div>
+
         {/* Skeleton Cards */}
         <div className="space-y-4">
           <h3 className="text-lg font-medium text-[var(--foreground)]">Skeleton Cards</h3>

src/components/ui-showcase/sections/FeedbackSection.tsx

@@ -66,9 +66,10 @@ export function FeedbackSection() {
         <div className="space-y-4">
           <h3 className="text-lg font-medium text-[var(--foreground)]">Alert Banner</h3>
           <AlertBanner
+            title="Alertes importantes"
             items={alertItems}
-            onDismiss={(id) => console.log('Dismiss alert:', id)}
-            onAction={(id, action) => console.log('Alert action:', id, action)}
+            variant="warning"
+            onItemClick={(item) => console.log('Alert clicked:', item)}
           />
         </div>