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) {

frontend/src/components/home/DemoCredentialsModal.tsx

@@ -86,9 +86,15 @@ export function DemoCredentialsModal({ open, onClose }: DemoCredentialsModalProp
                 <span className="text-foreground">Demo123!</span>
               </p>
             </div>
-            <p className="text-xs text-muted-foreground">
-              Access settings, organizations, and user features
-            </p>
+            <div className="space-y-1">
+              <p className="text-xs font-semibold text-muted-foreground">What you can access:</p>
+              <ul className="text-xs text-muted-foreground space-y-0.5 list-disc list-inside">
+                <li>User settings & profile</li>
+                <li>Password management</li>
+                <li>Active sessions</li>
+                <li>Personal preferences</li>
+              </ul>
+            </div>
           </div>
 
           {/* Admin User Credentials */}
@@ -120,21 +126,39 @@ export function DemoCredentialsModal({ open, onClose }: DemoCredentialsModalProp
                 <span className="text-foreground">Admin123!</span>
               </p>
             </div>
-            <p className="text-xs text-muted-foreground">
-              Full admin panel access: user management, analytics, bulk operations
-            </p>
+            <div className="space-y-1">
+              <p className="text-xs font-semibold text-muted-foreground">What you can access:</p>
+              <ul className="text-xs text-muted-foreground space-y-0.5 list-disc list-inside">
+                <li>Full admin dashboard</li>
+                <li>User management</li>
+                <li>Analytics & charts</li>
+                <li>Bulk operations</li>
+              </ul>
+            </div>
           </div>
         </div>
 
-        <DialogFooter className="flex flex-col sm:flex-row gap-2">
-          <Button variant="outline" onClick={onClose} className="w-full sm:w-auto">
-            Close
-          </Button>
-          <Button asChild className="w-full sm:w-auto">
-            <Link href="/login" onClick={onClose}>
-              Go to Login →
-            </Link>
-          </Button>
+        <DialogFooter>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 w-full">
+            <Button asChild variant="default" className="w-full">
+              <Link href="/login" onClick={onClose}>
+                Login as User
+              </Link>
+            </Button>
+            <Button asChild variant="default" className="w-full">
+              <Link href="/login" onClick={onClose}>
+                Login as Admin
+              </Link>
+            </Button>
+            <Button asChild variant="outline" className="w-full">
+              <Link href="/demos" onClick={onClose}>
+                View Demo Tour
+              </Link>
+            </Button>
+            <Button variant="secondary" onClick={onClose} className="w-full">
+              Close
+            </Button>
+          </div>
         </DialogFooter>
       </DialogContent>
     </Dialog>

frontend/src/components/home/DemoSection.tsx

@@ -7,37 +7,49 @@
 
 import Link from 'next/link';
 import { motion } from 'framer-motion';
-import { Play, Layers, ShieldCheck } from 'lucide-react';
+import { Play, Layers, ShieldCheck, UserCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
 
 const demos = [
   {
     icon: Layers,
-    title: 'Component Showcase',
+    title: 'Design System Hub',
     description:
-      'Browse the complete design system, UI components, and interactive examples built with shadcn/ui and TailwindCSS',
+      'Browse components, layouts, spacing, and forms with live examples built with shadcn/ui and TailwindCSS',
     href: '/dev',
-    cta: 'View Components',
+    cta: 'Explore Design System',
     variant: 'outline' as const,
   },
   {
     icon: ShieldCheck,
     title: 'Authentication Flow',
     description:
-      'Test the complete auth flow: login, session management, password reset. Full security implementation with JWT and refresh tokens',
+      'Test login, registration, password reset, and session management with complete JWT security implementation',
     href: '/login',
     credentials: 'demo@example.com / Demo123!',
-    cta: 'Try Auth Demo',
+    cta: 'Try Auth Flow',
     variant: 'default' as const,
   },
+  {
+    icon: UserCircle,
+    title: 'User Dashboard',
+    description:
+      'Experience user settings, profile management, password changes, and active sessions monitoring',
+    href: '/settings',
+    credentials: 'demo@example.com / Demo123!',
+    cta: 'View User Features',
+    variant: 'outline' as const,
+    isNew: true,
+  },
   {
     icon: Play,
     title: 'Admin Dashboard',
     description:
-      'Experience the admin panel with user management, real-time analytics charts, bulk operations, and session monitoring',
+      'Explore admin panel with user management, real-time analytics charts, bulk operations, and session monitoring',
     href: '/admin',
     credentials: 'admin@example.com / Admin123!',
-    cta: 'Launch Admin',
+    cta: 'Launch Admin Panel',
     variant: 'outline' as const,
   },
 ];
@@ -59,7 +71,7 @@ export function DemoSection() {
         </p>
       </motion.div>
 
-      <div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
+      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
         {demos.map((demo, index) => (
           <motion.div
             key={demo.title}
@@ -70,9 +82,16 @@ export function DemoSection() {
             transition={{ duration: 0.5, delay: index * 0.1 }}
             whileHover={{ y: -4 }}
           >
-            {/* Icon */}
-            <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary/60">
-              <demo.icon className="h-6 w-6 text-primary-foreground" aria-hidden="true" />
+            {/* Icon and Badge */}
+            <div className="flex items-start justify-between mb-4">
+              <div className="inline-flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary/60">
+                <demo.icon className="h-6 w-6 text-primary-foreground" aria-hidden="true" />
+              </div>
+              {demo.isNew && (
+                <Badge variant="default" className="text-xs">
+                  NEW
+                </Badge>
+              )}
             </div>
 
             <h3 className="text-xl font-semibold mb-2">{demo.title}</h3>
@@ -91,6 +110,21 @@ export function DemoSection() {
           </motion.div>
         ))}
       </div>
+
+      {/* See All Demos CTA */}
+      <motion.div
+        className="text-center mt-12"
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, margin: '-100px' }}
+        transition={{ duration: 0.6, delay: 0.4 }}
+      >
+        <Button asChild variant="outline" size="lg" className="gap-2">
+          <Link href="/demos">
+            View Complete Demo Tour →
+          </Link>
+        </Button>
+      </motion.div>
     </section>
   );
 }

frontend/src/components/home/Header.tsx

@@ -19,7 +19,8 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   const navLinks = [
-    { href: '/dev', label: 'Components' },
+    { href: '/', label: 'Home' },
+    { href: '/dev', label: 'Design System' },
     { href: '/admin', label: 'Admin Demo' },
   ];