Add interactive demo components and feature sections to homepage

- Introduced `DemoSection`, showcasing live feature demos with interactive cards and test credentials for admin and auth flows.
- Added `FeatureGrid` with dynamic animations, highlighting major application features like RBAC, documentation, and deployment readiness.
- Built reusable `FeatureCard` for feature details, including icons, descriptions, and CTAs.
- Implemented `TechStackSection` to display modern tools and technologies used in the stack with tooltips.
- Updated dependencies: added `framer-motion`, `lucide-react`, and `react-syntax-highlighter`.

frontend/src/components/home/DemoSection.tsx

@@ -0,0 +1,97 @@
+/**
+ * Demo Section
+ * Interactive demo cards showing live features with demo credentials
+ */
+
+'use client';
+
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { Play, Layers, ShieldCheck } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+const demos = [
+  {
+    icon: Layers,
+    title: 'Component Showcase',
+    description:
+      'Browse the complete design system, UI components, and interactive examples built with shadcn/ui and TailwindCSS',
+    href: '/dev',
+    cta: 'View Components',
+    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',
+    href: '/login',
+    credentials: 'demo@example.com / Demo123!',
+    cta: 'Try Auth Demo',
+    variant: 'default' as const,
+  },
+  {
+    icon: Play,
+    title: 'Admin Dashboard',
+    description:
+      'Experience the admin panel with user management, real-time analytics charts, bulk operations, and session monitoring',
+    href: '/admin',
+    credentials: 'admin@example.com / Admin123!',
+    cta: 'Launch Admin',
+    variant: 'outline' as const,
+  },
+];
+
+export function DemoSection() {
+  return (
+    <section className="container mx-auto px-6 py-16 md:py-24 bg-muted/30">
+      <motion.div
+        className="text-center mb-12"
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, margin: '-100px' }}
+        transition={{ duration: 0.6 }}
+      >
+        <h2 className="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
+        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+          Explore the template&apos;s capabilities with live demos. Login with demo credentials to test features.
+        </p>
+      </motion.div>
+
+      <div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
+        {demos.map((demo, index) => (
+          <motion.div
+            key={demo.title}
+            className="rounded-lg border bg-card p-6 hover:shadow-lg transition-shadow"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-100px' }}
+            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" />
+            </div>
+
+            <h3 className="text-xl font-semibold mb-2">{demo.title}</h3>
+            <p className="text-muted-foreground mb-4 leading-relaxed">
+              {demo.description}
+            </p>
+
+            {demo.credentials && (
+              <div className="mb-4 p-3 rounded-md bg-muted font-mono text-xs border">
+                <div className="text-muted-foreground mb-1">Demo Credentials:</div>
+                <div className="text-foreground">{demo.credentials}</div>
+              </div>
+            )}
+
+            <Button asChild className="w-full" variant={demo.variant}>
+              <Link href={demo.href}>{demo.cta} →</Link>
+            </Button>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}