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/FeatureCard.tsx

@@ -0,0 +1,63 @@
+/**
+ * Feature Card
+ * Reusable feature card component with icon, title, description, and CTA link
+ */
+
+'use client';
+
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { ArrowRight, LucideIcon } from 'lucide-react';
+
+interface FeatureCardProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  highlight: string;
+  ctaText: string;
+  ctaHref: string;
+}
+
+export function FeatureCard({
+  icon: Icon,
+  title,
+  description,
+  highlight,
+  ctaText,
+  ctaHref,
+}: FeatureCardProps) {
+  return (
+    <motion.div
+      className="group relative rounded-lg border bg-card p-6 hover:shadow-lg transition-all"
+      whileHover={{ y: -4 }}
+      transition={{ duration: 0.2 }}
+    >
+      {/* Icon with Gradient Background */}
+      <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">
+        <Icon className="h-6 w-6 text-primary-foreground" aria-hidden="true" />
+      </div>
+
+      {/* Title */}
+      <h3 className="text-xl font-semibold mb-2">{title}</h3>
+
+      {/* Highlight Badge */}
+      <div className="mb-3">
+        <span className="inline-block rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
+          {highlight}
+        </span>
+      </div>
+
+      {/* Description */}
+      <p className="text-muted-foreground mb-4 leading-relaxed">{description}</p>
+
+      {/* CTA Link */}
+      <Link
+        href={ctaHref}
+        className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline group-hover:gap-2 transition-all"
+      >
+        {ctaText}
+        <ArrowRight className="h-4 w-4" aria-hidden="true" />
+      </Link>
+    </motion.div>
+  );
+}