Redesign DemoSection with additional layout, content adjustments, and new demos

- Added User Dashboard demo with `UserCircle` icon and "NEW" badge.
- Introduced "View Complete Demo Tour" CTA linking to the Demo Tour page.
- Adjusted grid layout to support 4 columns for better spacing: `md:grid-cols-2 lg:grid-cols-4`.
- Enhanced Demo credentials modal with richer content outlining user and admin account capabilities.
- Adjusted navigation links: renamed "Components" to "Design System" and added Demo Tour link.
- Updated Demo Tour with leisurely paths, feature checklists, and new demo categories (user and admin flows).

frontend/src/components/dev/DevLayout.tsx

@@ -10,7 +10,7 @@
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { Code2, Palette, LayoutDashboard, Box, FileText, BookOpen, Home } from 'lucide-react';
+import { Code2, Palette, LayoutDashboard, Box, FileText, BookOpen, Home, ArrowLeft, Rocket } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { ThemeToggle } from '@/components/theme';
@@ -21,6 +21,12 @@ interface DevLayoutProps {
 }
 
 const navItems = [
+  {
+    title: 'Home',
+    href: '/',
+    icon: ArrowLeft,
+    exact: true,
+  },
   {
     title: 'Hub',
     href: '/dev',
@@ -52,6 +58,11 @@ const navItems = [
     href: '/dev/docs',
     icon: BookOpen,
   },
+  {
+    title: 'Live Demos',
+    href: '/demos',
+    icon: Rocket,
+  },
 ];
 
 export function DevLayout({ children }: DevLayoutProps) {