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/app/demos/page.tsx

@@ -0,0 +1,373 @@
+/**
+ * Demo Tour Page
+ * Comprehensive guide to all template features and demos
+ */
+
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import {
+  Palette,
+  ShieldCheck,
+  UserCircle,
+  Play,
+  CheckCircle2,
+  ArrowRight,
+  Home,
+  LogIn,
+  Settings,
+  Users,
+  Lock,
+  Activity,
+  UserCog,
+  BarChart3,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+
+export const metadata: Metadata = {
+  title: 'Demo Tour | FastNext Template',
+  description: 'Try all features with demo credentials - comprehensive guide to the FastNext template',
+};
+
+const demoCategories = [
+  {
+    icon: Palette,
+    title: 'Design System Hub',
+    description: 'Browse components, layouts, spacing, and forms with live examples',
+    href: '/dev',
+    features: ['All UI components', 'Layout patterns', 'Spacing philosophy', 'Form implementations'],
+    credentials: null,
+  },
+  {
+    icon: ShieldCheck,
+    title: 'Authentication System',
+    description: 'Test login, registration, password reset, and session management',
+    href: '/login',
+    features: ['Login & logout', 'Registration', 'Password reset', 'Session tokens'],
+    credentials: {
+      email: 'demo@example.com',
+      password: 'Demo123!',
+      role: 'Regular User',
+    },
+  },
+  {
+    icon: UserCircle,
+    title: 'User Features',
+    description: 'Experience user settings, profile management, and session monitoring',
+    href: '/settings',
+    features: ['Profile editing', 'Password changes', 'Active sessions', 'Preferences'],
+    credentials: {
+      email: 'demo@example.com',
+      password: 'Demo123!',
+      role: 'Regular User',
+    },
+  },
+  {
+    icon: Play,
+    title: 'Admin Dashboard',
+    description: 'Explore admin panel with user management and analytics',
+    href: '/admin',
+    features: ['User management', 'Analytics charts', 'Bulk operations', 'Organization control'],
+    credentials: {
+      email: 'admin@example.com',
+      password: 'Admin123!',
+      role: 'Admin',
+    },
+  },
+];
+
+const explorationPaths = [
+  {
+    title: 'Quick Tour (5 min)',
+    steps: [
+      { icon: Home, text: 'Browse Design System components', href: '/dev' },
+      { icon: LogIn, text: 'Test login flow', href: '/login' },
+      { icon: Settings, text: 'View user settings', href: '/settings' },
+    ],
+  },
+  {
+    title: 'Full Experience (15 min)',
+    steps: [
+      { icon: Palette, text: 'Explore all design system pages', href: '/dev' },
+      { icon: ShieldCheck, text: 'Try complete auth flow', href: '/login' },
+      { icon: UserCog, text: 'Update profile and password', href: '/settings/profile' },
+      { icon: Activity, text: 'Check active sessions', href: '/settings/sessions' },
+      { icon: Users, text: 'Login as admin and manage users', href: '/admin/users' },
+      { icon: BarChart3, text: 'View analytics dashboard', href: '/admin' },
+    ],
+  },
+];
+
+const checklist = [
+  { label: 'Browse design system components', completed: false },
+  { label: 'Test login/logout flow', completed: false },
+  { label: 'Register a new account', completed: false },
+  { label: 'Reset password', completed: false },
+  { label: 'Update user profile', completed: false },
+  { label: 'Change password', completed: false },
+  { label: 'View active sessions', completed: false },
+  { label: 'Login as admin', completed: false },
+  { label: 'Manage users (admin)', completed: false },
+  { label: 'View analytics (admin)', completed: false },
+  { label: 'Perform bulk operations (admin)', completed: false },
+  { label: 'Explore organizations (admin)', completed: false },
+];
+
+export default function DemoTourPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto px-4">
+          <div className="flex h-14 items-center justify-between">
+            <div className="flex items-center gap-4">
+              <Button asChild variant="ghost" size="sm">
+                <Link href="/" className="gap-2">
+                  <Home className="h-4 w-4" />
+                  Home
+                </Link>
+              </Button>
+              <Separator orientation="vertical" className="h-6" />
+              <h1 className="text-lg font-semibold">Demo Tour</h1>
+            </div>
+            <Button asChild variant="default" size="sm">
+              <Link href="/login">Start Exploring →</Link>
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="container mx-auto px-4 py-12">
+        <div className="space-y-12 max-w-6xl mx-auto">
+          {/* Hero Section */}
+          <section className="text-center space-y-4">
+            <Badge variant="secondary" className="mb-2">
+              Interactive Demo
+            </Badge>
+            <h2 className="text-4xl font-bold tracking-tight">Explore All Features</h2>
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+              Try everything with our pre-configured demo accounts. All changes are safe to test and
+              reset automatically.
+            </p>
+          </section>
+
+          <Separator />
+
+          {/* Quick Start Guide */}
+          <section className="space-y-6">
+            <div className="text-center">
+              <h3 className="text-2xl font-semibold mb-2">Quick Start Guide</h3>
+              <p className="text-muted-foreground">Follow these simple steps to get started</p>
+            </div>
+
+            <div className="grid md:grid-cols-3 gap-6">
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center gap-3 mb-2">
+                    <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary text-primary-foreground font-bold">
+                      1
+                    </div>
+                    <CardTitle className="text-lg">Choose a Demo</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent className="text-sm text-muted-foreground">
+                  Browse the demo categories below and pick what interests you most
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center gap-3 mb-2">
+                    <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary text-primary-foreground font-bold">
+                      2
+                    </div>
+                    <CardTitle className="text-lg">Use Credentials</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent className="text-sm text-muted-foreground">
+                  Copy the demo credentials and login to explore authenticated features
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center gap-3 mb-2">
+                    <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary text-primary-foreground font-bold">
+                      3
+                    </div>
+                    <CardTitle className="text-lg">Explore Freely</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent className="text-sm text-muted-foreground">
+                  Test all features - everything resets automatically, so experiment away!
+                </CardContent>
+              </Card>
+            </div>
+          </section>
+
+          <Separator />
+
+          {/* Demo Categories */}
+          <section className="space-y-6">
+            <div className="text-center">
+              <h3 className="text-2xl font-semibold mb-2">Demo Categories</h3>
+              <p className="text-muted-foreground">Explore different areas of the template</p>
+            </div>
+
+            <div className="grid md:grid-cols-2 gap-6">
+              {demoCategories.map((category) => {
+                const Icon = category.icon;
+                return (
+                  <Card key={category.title} className="relative">
+                    <CardHeader>
+                      <div className="flex items-start justify-between mb-2">
+                        <div className="rounded-lg bg-primary/10 p-2">
+                          <Icon className="h-6 w-6 text-primary" />
+                        </div>
+                        {category.credentials && (
+                          <Badge variant="outline" className="text-xs">
+                            Login Required
+                          </Badge>
+                        )}
+                      </div>
+                      <CardTitle>{category.title}</CardTitle>
+                      <CardDescription>{category.description}</CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                      {/* Features List */}
+                      <div className="space-y-2">
+                        {category.features.map((feature) => (
+                          <div key={feature} className="flex items-center gap-2 text-sm">
+                            <CheckCircle2 className="h-4 w-4 text-primary flex-shrink-0" />
+                            <span className="text-muted-foreground">{feature}</span>
+                          </div>
+                        ))}
+                      </div>
+
+                      {/* Credentials */}
+                      {category.credentials && (
+                        <div className="rounded-md bg-muted p-3 space-y-1">
+                          <p className="text-xs font-semibold text-muted-foreground">
+                            {category.credentials.role} Credentials:
+                          </p>
+                          <p className="font-mono text-sm">{category.credentials.email}</p>
+                          <p className="font-mono text-sm">{category.credentials.password}</p>
+                        </div>
+                      )}
+
+                      {/* CTA */}
+                      <Button asChild className="w-full gap-2">
+                        <Link href={category.href}>
+                          {category.credentials ? 'Try Now' : 'Explore'} <ArrowRight className="h-4 w-4" />
+                        </Link>
+                      </Button>
+                    </CardContent>
+                  </Card>
+                );
+              })}
+            </div>
+          </section>
+
+          <Separator />
+
+          {/* Suggested Exploration Paths */}
+          <section className="space-y-6">
+            <div className="text-center">
+              <h3 className="text-2xl font-semibold mb-2">Suggested Exploration Paths</h3>
+              <p className="text-muted-foreground">Choose your adventure based on available time</p>
+            </div>
+
+            <div className="grid md:grid-cols-2 gap-6">
+              {explorationPaths.map((path) => (
+                <Card key={path.title}>
+                  <CardHeader>
+                    <CardTitle>{path.title}</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-3">
+                      {path.steps.map((step, index) => {
+                        const StepIcon = step.icon;
+                        return (
+                          <Link
+                            key={index}
+                            href={step.href}
+                            className="flex items-center gap-3 p-2 rounded-lg hover:bg-accent transition-colors group"
+                          >
+                            <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary/10 text-primary text-xs font-bold">
+                              {index + 1}
+                            </div>
+                            <StepIcon className="h-4 w-4 text-muted-foreground" />
+                            <span className="text-sm flex-1 group-hover:text-primary transition-colors">
+                              {step.text}
+                            </span>
+                            <ArrowRight className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
+                          </Link>
+                        );
+                      })}
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </section>
+
+          <Separator />
+
+          {/* What to Try Checklist */}
+          <section className="space-y-6">
+            <div className="text-center">
+              <h3 className="text-2xl font-semibold mb-2">What to Try</h3>
+              <p className="text-muted-foreground">
+                Complete checklist of features to explore (for your reference)
+              </p>
+            </div>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Feature Checklist</CardTitle>
+                <CardDescription>
+                  Try these features to experience the full power of the template
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="grid sm:grid-cols-2 gap-3">
+                  {checklist.map((item, index) => (
+                    <div key={index} className="flex items-center gap-3 text-sm">
+                      <div className="flex-shrink-0 w-5 h-5 rounded border border-muted-foreground/30 flex items-center justify-center">
+                        {item.completed && <CheckCircle2 className="h-4 w-4 text-primary" />}
+                      </div>
+                      <span className={item.completed ? 'text-muted-foreground line-through' : ''}>
+                        {item.label}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </section>
+
+          {/* CTA Section */}
+          <section className="text-center space-y-6 py-8">
+            <div className="space-y-2">
+              <h3 className="text-2xl font-semibold">Ready to Start?</h3>
+              <p className="text-muted-foreground">
+                Pick a demo category above or jump right into the action
+              </p>
+            </div>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button asChild size="lg">
+                <Link href="/login">Try Authentication Flow →</Link>
+              </Button>
+              <Button asChild variant="outline" size="lg">
+                <Link href="/dev">Browse Design System</Link>
+              </Button>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  );
+}

frontend/src/app/dev/page.tsx

@@ -13,8 +13,8 @@ import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 
 export const metadata: Metadata = {
-  title: 'Design System Hub | Dev',
-  description: 'Interactive demonstrations and documentation for the FastNext design system',
+  title: 'Design System Hub | FastNext Template',
+  description: 'Interactive design system demonstrations with live examples - explore components, layouts, spacing, and forms built with shadcn/ui and Tailwind CSS',
 };
 
 const demoPages = [

frontend/src/app/page.tsx

@@ -7,6 +7,7 @@
 'use client';
 
 import { useState } from 'react';
+import Link from 'next/link';
 import { Header } from '@/components/home/Header';
 import { HeroSection } from '@/components/home/HeroSection';
 import { ContextSection } from '@/components/home/ContextSection';
@@ -69,30 +70,23 @@ export default function Home() {
               © {new Date().getFullYear()} FastNext Template. MIT Licensed.
             </div>
             <div className="flex items-center gap-6 text-sm text-muted-foreground">
+              <Link href="/demos" className="hover:text-foreground transition-colors">
+                Demo Tour
+              </Link>
+              <Link href="/dev" className="hover:text-foreground transition-colors">
+                Design System
+              </Link>
               <a
-                href="https://github.com/your-org/fast-next-template"
+                href="https://github.com"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="hover:text-foreground transition-colors"
               >
                 GitHub
               </a>
-              <a
-                href="https://github.com/your-org/fast-next-template#documentation"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="hover:text-foreground transition-colors"
-              >
+              <Link href="/dev/docs" className="hover:text-foreground transition-colors">
                 Documentation
-              </a>
-              <a
-                href="https://github.com/your-org/fast-next-template/issues"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="hover:text-foreground transition-colors"
-              >
-                Report Issue
-              </a>
+              </Link>
             </div>
           </div>
         </div>

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' },
   ];