Upload folder using huggingface_hub

Frontend/src/App.jsx

@@ -47,6 +47,14 @@ import Notifications from "./user/pages/Notifications";
 import Help from "./user/pages/Help";
 import DocsPortal from "./docs/pages/DocsPortal";
 
+// New Showcase Pages
+import ApiReference from "./pages/ApiReference";
+import Changelog from "./pages/Changelog";
+import StatusPage from "./pages/StatusPage";
+import AboutUs from "./pages/AboutUs";
+import Careers from "./pages/Careers";
+import CookiePolicy from "./pages/legal/CookiePolicy";
+
 // NEW Admin Pages (Refactored)
 import AdminDashboard from "./admin/pages/AdminDashboard";
 import AdminTickets from "./admin/pages/AdminTickets";
@@ -112,6 +120,12 @@ function TitleUpdater() {
     else if (path === '/profile') title = 'User Profile';
     else if (path === '/notifications') title = 'Notifications';
     else if (path === '/docs') title = 'Documentation';
+    else if (path === '/api-reference') title = 'API Reference';
+    else if (path === '/changelog') title = 'Changelog';
+    else if (path === '/status') title = 'Status';
+    else if (path === '/about') title = 'About Us';
+    else if (path === '/careers') title = 'Careers';
+    else if (path === '/cookie-policy') title = 'Cookie Policy';
     // Public / Lobby Routes
     else if (path === '/login') title = 'Login';
     else if (path === '/signup') title = 'Create Account';
@@ -228,6 +242,12 @@ function App() {
         <Route path="/not-approved" element={<NotApproved />} />
         <Route path="/contact-sales" element={<ContactSales />} />
         <Route path="/docs" element={<DocsPortal />} />
+        <Route path="/api-reference" element={<ApiReference />} />
+        <Route path="/changelog" element={<Changelog />} />
+        <Route path="/status" element={<StatusPage />} />
+        <Route path="/about" element={<AboutUs />} />
+        <Route path="/careers" element={<Careers />} />
+        <Route path="/cookie-policy" element={<CookiePolicy />} />
 
         {/* Feature Pages */}
         <Route path="/features/categorization" element={<AutoCategorizationFeature />} />

Frontend/src/pages/AboutUs.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ShieldCheck, Heart, Sparkles, ArrowLeft, Target, Award } from 'lucide-react';
+import { Card } from '../components/ui/card';
+
+export default function AboutUs() {
+    const navigate = useNavigate();
+
+    return (
+        <div className="min-h-screen bg-[#f6f8f7] pb-20">
+            {/* Header */}
+            <header className="w-full bg-white border-b border-gray-200 sticky top-0 z-50">
+                <div className="max-w-[1100px] mx-auto px-4 md:px-6 h-16 flex items-center justify-between">
+                    <div className="flex items-center gap-3 cursor-pointer" onClick={() => navigate('/')}>
+                        <img src="/favicon.png" alt="HELPDESK.AI Logo" className="w-7 h-7 object-contain" />
+                        <div className="flex items-baseline gap-2">
+                            <h1 className="text-xl font-black tracking-tighter text-gray-900 italic">HELPDESK.AI</h1>
+                            <span className="px-2 py-0.5 text-[10px] font-black bg-emerald-100 text-emerald-800 rounded-md uppercase tracking-wider">About</span>
+                        </div>
+                    </div>
+                    <button 
+                        onClick={() => navigate('/')}
+                        className="flex items-center gap-2 text-xs font-bold text-gray-600 hover:text-emerald-600 transition-colors bg-gray-50 hover:bg-emerald-50 px-3.5 py-2 rounded-xl border border-gray-200"
+                    >
+                        <ArrowLeft size={14} /> Back to Home
+                    </button>
+                </div>
+            </header>
+
+            <div className="max-w-[800px] mx-auto px-4 md:px-6 mt-12 space-y-12">
+                <div className="space-y-4">
+                    <div className="inline-flex items-center gap-2 px-3 py-1 bg-emerald-500/10 border border-emerald-500/20 rounded-full text-emerald-700 text-xs font-bold">
+                        <Heart size={14} /> Our Mission
+                    </div>
+                    <h1 className="text-4xl font-black text-slate-900 tracking-tight">Pioneering Intelligent Triage</h1>
+                    <p className="text-slate-600 text-base leading-relaxed">
+                        At HELPDESK.AI, we strive to build local machine learning workflows that eliminate manual ticket tagging, priority guessing, and routing bottlenecks for modern Indian businesses.
+                    </p>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <Card className="p-6 rounded-[2rem] border border-slate-200 bg-white space-y-3">
+                        <div className="w-8 h-8 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center">
+                            <Target size={16} />
+                        </div>
+                        <h4 className="font-extrabold text-slate-800 text-sm">Self-Healing Backups</h4>
+                        <p className="text-xs text-slate-500 leading-relaxed font-semibold">
+                            By backing up offline sentence embeddings with fast Gemini failover pipelines, we achieve 100% platform availability under tight network margins.
+                        </p>
+                    </Card>
+
+                    <Card className="p-6 rounded-[2rem] border border-slate-200 bg-white space-y-3">
+                        <div className="w-8 h-8 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center">
+                            <Award size={16} />
+                        </div>
+                        <h4 className="font-extrabold text-slate-800 text-sm">100% Indian Data Sovereignty</h4>
+                        <p className="text-xs text-slate-500 leading-relaxed font-semibold">
+                            All ticket summaries, OCR attachments, and database timelines remain securely locked under regional cloud networks.
+                        </p>
+                    </Card>
+                </div>
+            </div>
+        </div>
+    );
+}

Frontend/src/pages/ApiReference.jsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Terminal, Shield, Cpu, Key, ArrowLeft, Check, Copy } from 'lucide-react';
+import { Card } from '../components/ui/card';
+
+export default function ApiReference() {
+    const navigate = useNavigate();
+    const [copied, setCopied] = React.useState(null);
+
+    const handleCopy = (text, key) => {
+        navigator.clipboard.writeText(text);
+        setCopied(key);
+        setTimeout(() => setCopied(null), 2000);
+    };
+
+    return (
+        <div className="min-h-screen bg-[#f6f8f7] pb-20">
+            {/* Header */}
+            <header className="w-full bg-white border-b border-gray-200 sticky top-0 z-50">
+                <div className="max-w-[1100px] mx-auto px-4 md:px-6 h-16 flex items-center justify-between">
+                    <div className="flex items-center gap-3 cursor-pointer" onClick={() => navigate('/')}>
+                        <img src="/favicon.png" alt="HELPDESK.AI Logo" className="w-7 h-7 object-contain" />
+                        <div className="flex items-baseline gap-2">
+                            <h1 className="text-xl font-black tracking-tighter text-gray-900 italic">HELPDESK.AI</h1>
+                            <span className="px-2 py-0.5 text-[10px] font-black bg-blue-100 text-blue-800 rounded-md uppercase tracking-wider">API</span>
+                        </div>
+                    </div>
+                    <button 
+                        onClick={() => navigate('/')}
+                        className="flex items-center gap-2 text-xs font-bold text-gray-600 hover:text-emerald-600 transition-colors bg-gray-50 hover:bg-emerald-50 px-3.5 py-2 rounded-xl border border-gray-200"
+                    >
+                        <ArrowLeft size={14} /> Back to Home
+                    </button>
+                </div>
+            </header>
+
+            <div className="max-w-[900px] mx-auto px-4 md:px-6 mt-12 space-y-12">
+                <div className="space-y-4">
+                    <div className="inline-flex items-center gap-2 px-3 py-1 bg-blue-500/10 border border-blue-500/20 rounded-full text-blue-700 text-xs font-bold">
+                        <Terminal size={14} /> Developer API Reference v1
+                    </div>
+                    <h1 className="text-4xl font-black text-slate-900 tracking-tight">Integrate Automation Workflows</h1>
+                    <p className="text-slate-600 text-base leading-relaxed">
+                        Connect your existing CRM, Slack bots, or internal tools directly to the HELPDESK.AI triage engine. Classify incoming tickets and generate timelines instantly.
+                    </p>
+                </div>
+
+                {/* Authentication Card */}
+                <Card className="p-8 rounded-[2rem] border border-slate-200/80 bg-white space-y-6 shadow-sm">
+                    <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-600">
+                            <Key size={20} />
+                        </div>
+                        <div>
+                            <h3 className="font-extrabold text-slate-900 text-lg">Authentication</h3>
+                            <p className="text-xs text-slate-500 font-medium">Secure request header formats</p>
+                        </div>
+                    </div>
+                    <p className="text-slate-600 text-sm leading-relaxed">
+                        All incoming API calls must contain a valid Bearer Token in the authorization header. Generate your API key inside the Admin Dashboard Settings panel.
+                    </p>
+                    <div className="bg-slate-950 p-4 rounded-xl font-mono text-xs text-slate-300 border border-slate-900 relative">
+                        <span className="absolute top-2 right-2 text-[10px] uppercase font-bold text-slate-500">Headers</span>
+                        Authorization: Bearer hk_live_xxxxxxxxxxxxxxxxxxxxxxxx
+                    </div>
+                </Card>
+
+                {/* Endpoint Section */}
+                <div className="space-y-6">
+                    <h2 className="text-2xl font-black text-slate-900 tracking-tight">Endpoint Catalog</h2>
+
+                    {/* Create Ticket Endpoint */}
+                    <Card className="p-8 rounded-[2rem] border border-slate-200/80 bg-white space-y-6 shadow-sm">
+                        <div className="flex items-center justify-between flex-wrap gap-2">
+                            <div className="flex items-center gap-3">
+                                <span className="bg-emerald-600 text-white font-black text-xs px-2.5 py-1 rounded-lg">POST</span>
+                                <code className="text-sm font-extrabold text-slate-800">/api/v1/tickets/classify</code>
+                            </div>
+                            <span className="text-xs font-semibold text-slate-400">Classify & Save Incident</span>
+                        </div>
+
+                        <p className="text-slate-600 text-sm leading-relaxed">
+                            Sends raw issue strings or base64 files for immediate NLP categorizing, priority detection, and routing.
+                        </p>
+
+                        <div className="space-y-3">
+                            <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest block">Request Body (JSON)</span>
+                            <div className="relative">
+                                <pre className="bg-slate-950 p-5 rounded-2xl font-mono text-xs text-emerald-400 overflow-x-auto border border-slate-900 select-text">
+{`{
+  "text": "VPN connecting error 789 on router downstairs",
+  "meta": {
+    "source": "Slack Integration",
+    "reporter_email": "user@company.com"
+  }
+}`}
+                                </pre>
+                                <button 
+                                    onClick={() => handleCopy(`{\n  "text": "VPN connecting error 789 on router downstairs",\n  "meta": {\n    "source": "Slack Integration",\n    "reporter_email": "user@company.com"\n  }\n}`, 'req')}
+                                    className="absolute top-3 right-3 text-slate-500 hover:text-white p-2 bg-slate-900 border border-slate-800 rounded-lg hover:bg-slate-800 transition-colors"
+                                >
+                                    {copied === 'req' ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
+                                </button>
+                            </div>
+                        </div>
+
+                        <div className="space-y-3">
+                            <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest block">Response payload (JSON)</span>
+                            <pre className="bg-slate-950 p-5 rounded-2xl font-mono text-xs text-slate-300 overflow-x-auto border border-slate-900">
+{`{
+  "status": "success",
+  "ticket_id": "7cc6e8ef-b5d9-4615-a349-1d629154e7c6",
+  "classification": {
+    "category": "Network",
+    "priority": "High",
+    "assigned_team": "Network Ops",
+    "confidence": 0.96
+  }
+}`}
+                            </pre>
+                        </div>
+                    </Card>
+                </div>
+            </div>
+        </div>
+    );
+}

Frontend/src/pages/Careers.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Briefcase, ArrowLeft, ArrowRight, Star } from 'lucide-react';
+import { Card } from '../components/ui/card';
+
+export default function Careers() {
+    const navigate = useNavigate();
+
+    const jobs = [
+        { title: 'Senior NLP Architect', location: 'Bengaluru / Remote', type: 'Full-Time', scale: '₹24L - ₹32L' },
+        { title: 'Lead Full-Stack Engineer (React / Node)', location: 'Mumbai / Hybrid', type: 'Full-Time', scale: '₹18L - ₹26L' },
+        { title: 'AI Support Specialist (Tier 2 Override Ops)', location: 'Bengaluru', type: 'Full-Time', scale: '₹8L - ₹12L' }
+    ];
+
+    return (
+        <div className="min-h-screen bg-[#f6f8f7] pb-20">
+            {/* Header */}
+            <header className="w-full bg-white border-b border-gray-200 sticky top-0 z-50">
+                <div className="max-w-[1100px] mx-auto px-4 md:px-6 h-16 flex items-center justify-between">
+                    <div className="flex items-center gap-3 cursor-pointer" onClick={() => navigate('/')}>
+                        <img src="/favicon.png" alt="HELPDESK.AI Logo" className="w-7 h-7 object-contain" />
+                        <div className="flex items-baseline gap-2">
+                            <h1 className="text-xl font-black tracking-tighter text-gray-900 italic">HELPDESK.AI</h1>
+                            <span className="px-2 py-0.5 text-[10px] font-black bg-blue-100 text-blue-800 rounded-md uppercase tracking-wider">Careers</span>
+                        </div>
+                    </div>
+                    <button 
+                        onClick={() => navigate('/')}
+                        className="flex items-center gap-2 text-xs font-bold text-gray-600 hover:text-emerald-600 transition-colors bg-gray-50 hover:bg-emerald-50 px-3.5 py-2 rounded-xl border border-gray-200"
+                    >
+                        <ArrowLeft size={14} /> Back to Home
+                    </button>
+                </div>
+            </header>
+
+            <div className="max-w-[800px] mx-auto px-4 md:px-6 mt-12 space-y-12">
+                <div className="space-y-4">
+                    <div className="inline-flex items-center gap-2 px-3 py-1 bg-blue-500/10 border border-blue-500/20 rounded-full text-blue-700 text-xs font-bold">
+                        <Briefcase size={14} /> Open Positions
+                    </div>
+                    <h1 className="text-4xl font-black text-slate-900 tracking-tight">Shape the Future of IT Triage</h1>
+                    <p className="text-slate-600 text-base leading-relaxed">
+                        Join our engineering-first team. We build self-healing pipelines, Tesseract OCR integrations, and dynamic telemetry mapping products.
+                    </p>
+                </div>
+
+                <div className="space-y-4">
+                    {jobs.map((job, idx) => (
+                        <Card key={idx} className="p-6 rounded-[1.5rem] border border-slate-200/80 bg-white flex items-center justify-between shadow-sm flex-wrap gap-4 hover:border-emerald-300 transition-all cursor-pointer">
+                            <div className="space-y-1">
+                                <h4 className="font-extrabold text-slate-900 text-sm">{job.title}</h4>
+                                <p className="text-xs text-slate-400 font-semibold">{job.location} · {job.type}</p>
+                            </div>
+                            <div className="flex items-center gap-4">
+                                <span className="text-xs font-bold text-emerald-700">{job.scale}</span>
+                                <button className="p-2 bg-gray-50 hover:bg-emerald-50 rounded-lg border border-gray-100 hover:border-emerald-100 text-slate-500 hover:text-emerald-700 transition-colors">
+                                    <ArrowRight size={16} />
+                                </button>
+                            </div>
+                        </Card>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}

Frontend/src/pages/Changelog.jsx

@@ -1,297 +1,116 @@
-import React from "react";
-import {
-  Rocket,
-  Sparkles,
-  Bug,
-  ShieldCheck,
-  CalendarDays,
-  GitCommitHorizontal,
-} from "lucide-react";
-
-import { motion } from "framer-motion";
-
-const releases = [
-  {
-    version: "v2.1.0",
-    date: "May 20, 2026",
-    type: "Major Release",
-    status: "Live",
-    features: [
-      "Introduced AI-powered smart ticket routing engine",
-      "Added enterprise analytics dashboard with live metrics",
-      "Integrated multilingual support for global organizations",
-    ],
-    enhancements: [
-      "Improved dashboard loading performance by 35%",
-      "Enhanced accessibility contrast and readability",
-      "Optimized backend request caching for faster responses",
-    ],
-    fixes: [
-      "Fixed session timeout issue after inactivity",
-      "Resolved notification synchronization bug",
-      "Fixed mobile sidebar overlap on smaller devices",
-    ],
-  },
-
-  {
-    version: "v2.0.2",
-    date: "May 10, 2026",
-    type: "Patch Update",
-    status: "Stable",
-    features: [
-      "Added bulk export functionality for support tickets",
-      "Introduced advanced ticket filtering system",
-    ],
-    enhancements: [
-      "Improved authentication flow security",
-      "Optimized API request handling",
-    ],
-    fixes: [
-      "Resolved login redirect issue",
-      "Fixed navbar responsiveness on tablets",
-    ],
-  },
-
-  {
-    version: "v2.0.0",
-    date: "April 28, 2026",
-    type: "Platform Launch",
-    status: "Released",
-    features: [
-      "Official launch of HelpDesk.AI platform",
-      "AI-based issue auto-categorization system",
-      "Role-based admin management implementation",
-    ],
-    enhancements: [
-      "Modernized UI architecture using Tailwind CSS",
-      "Improved dark mode consistency",
-    ],
-    fixes: [
-      "Initial stability improvements",
-      "Security hardening patches",
-    ],
-  },
-];
-
-const FadeIn = {
-  hidden: {
-    opacity: 0,
-    y: 40,
-  },
-  visible: {
-    opacity: 1,
-    y: 0,
-  },
-};
-
-const Section = ({
-  title,
-  icon,
-  items,
-  glow,
-}) => {
-  return (
-    <div className="mb-8">
-
-      <div className="flex items-center gap-3 mb-4">
-        <div
-          className={`p-2 rounded-xl ${glow}`}
-        >
-          {icon}
-        </div>
-
-        <h3 className="text-2xl font-semibold text-white">
-          {title}
-        </h3>
-      </div>
-
-      <div className="space-y-3">
-        {items.map((item, index) => (
-          <motion.div
-            key={index}
-            whileHover={{ x: 6 }}
-            className="flex gap-3 text-gray-300 leading-relaxed"
-          >
-            <span className="text-green-400 mt-1">
-              •
-            </span>
-
-            <p>{item}</p>
-          </motion.div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-const Changelog = () => {
-  return (
-    <div className="min-h-screen bg-[#021510] overflow-hidden text-white relative">
-
-      {/* Background Glow Effects */}
-      <div className="absolute top-0 left-0 w-[400px] h-[400px] bg-green-500/10 blur-[120px]" />
-
-      <div className="absolute bottom-0 right-0 w-[400px] h-[400px] bg-emerald-400/10 blur-[120px]" />
-
-      {/* Hero Section */}
-      <section className="relative z-10 px-6 pt-24 pb-16">
-
-        <motion.div
-          initial="hidden"
-          animate="visible"
-          variants={FadeIn}
-          transition={{ duration: 0.7 }}
-          className="max-w-6xl mx-auto text-center"
-        >
-
-          {/* Badge */}
-          <div className="inline-flex items-center gap-2 bg-green-500/10 border border-green-500/20 px-5 py-2 rounded-full text-green-400 mb-8 backdrop-blur-md">
-
-            <GitCommitHorizontal size={16} />
-
-            <span className="text-sm font-medium tracking-wide">
-              PRODUCT RELEASE NOTES
-            </span>
-          </div>
-
-          {/* Heading */}
-          <h1 className="text-5xl md:text-7xl font-bold mb-6 tracking-tight">
-
-            Platform
-            <span className="text-green-400">
-              {" "}Changelog
-            </span>
-          </h1>
-
-          {/* Description */}
-          <p className="text-gray-400 text-lg md:text-xl max-w-3xl mx-auto leading-relaxed">
-
-            Stay updated with the latest platform improvements,
-            AI enhancements, security patches, and feature
-            releases across HelpDesk.AI.
-          </p>
-
-        </motion.div>
-      </section>
-
-      {/* Timeline */}
-      <section className="relative z-10 px-6 pb-24">
-
-        <div className="max-w-5xl mx-auto relative">
-
-          {/* Vertical Line */}
-          <div className="absolute left-4 top-0 w-[2px] h-full bg-gradient-to-b from-green-500/70 via-green-500/20 to-transparent" />
-
-          {/* Release Cards */}
-          <div className="space-y-16">
-
-            {releases.map((release, index) => (
-              <motion.div
-                key={index}
-                initial="hidden"
-                whileInView="visible"
-                viewport={{ once: true }}
-                variants={FadeIn}
-                transition={{
-                  duration: 0.6,
-                  delay: index * 0.1,
-                }}
-                className="relative pl-14"
-              >
-
-                {/* Timeline Dot */}
-                <div className="absolute left-0 top-8">
-
-                  <div className="w-8 h-8 rounded-full bg-green-500 border-4 border-[#021510] shadow-[0_0_25px_rgba(34,197,94,0.8)]" />
-
-                </div>
-
-                {/* Card */}
-                <motion.div
-                  whileHover={{
-                    scale: 1.01,
-                  }}
-                  transition={{
-                    duration: 0.3,
-                  }}
-                  className="relative bg-white/5 border border-white/10 backdrop-blur-xl rounded-3xl p-8 md:p-10 shadow-2xl overflow-hidden"
-                >
-
-                  {/* Gradient Overlay */}
-                  <div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-transparent pointer-events-none" />
-
-                  {/* Header */}
-                  <div className="relative flex flex-wrap items-center justify-between gap-4 mb-10">
-
-                    <div className="flex items-center gap-4 flex-wrap">
-
-                      {/* Version */}
-                      <div className="bg-green-500 text-black font-bold px-5 py-2 rounded-full text-sm shadow-lg">
-                        {release.version}
-                      </div>
-
-                      {/* Type */}
-                      <div className="bg-white/10 border border-white/10 text-gray-300 px-4 py-2 rounded-full text-sm">
-                        {release.type}
-                      </div>
-
-                      {/* Status */}
-                      <div className="flex items-center gap-2 text-green-400 text-sm">
-
-                        <ShieldCheck size={16} />
-
-                        {release.status}
-                      </div>
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Calendar, GitCommit, ArrowLeft, Heart, Zap, Sparkles } from 'lucide-react';
+import { Card } from '../components/ui/card';
+
+export default function Changelog() {
+    const navigate = useNavigate();
+
+    const changes = [
+        {
+            version: 'v1.2.0',
+            date: 'May 2026',
+            badge: 'Latest Release',
+            highlight: 'Standalone Docs Portal & Dynamic Search',
+            items: [
+                'Created complete standalone Docs Portal (/docs) outside authenticated routing grids.',
+                'Integrated interactive on-screen endpoint payload simulation and terminal output logs.',
+                'Resolved jsconfig compiler issues by deprecating outdated ignoreDeprecations keys.',
+                'Optimized responsive layout transitions across both mobile drawer and desktop headers.'
+            ]
+        },
+        {
+            version: 'v1.1.0',
+            date: 'April 2026',
+            badge: 'Update',
+            highlight: 'Local Tesseract.js OCR and Siri Voice Recognition',
+            items: [
+                'Added client-side webkitSpeechRecognition API dictation assistant with live amplitude waveforms.',
+                'Implemented offline image OCR with local Tesseract.js engine parsing image attachment telemetry.',
+                'Connected Supabase tables to log AI entities scanned directly from ticket descriptions.',
+                'Enacted dynamic SLA fallback computations based on category routing priorities.'
+            ]
+        },
+        {
+            version: 'v1.0.0',
+            date: 'March 2026',
+            badge: 'Major Release',
+            highlight: 'Core AI Routing Engine Deployment',
+            items: [
+                'Launched main multi-tenant portal with full dashboard telemetry, tracking, and company lobbies.',
+                'Connected Gemini API fallback interfaces to self-heal local database load degradation issues.',
+                'Created admin console enabling support agents to claim, claim-override, or resolve tickets live.'
+            ]
+        }
+    ];
+
+    return (
+        <div className="min-h-screen bg-[#f6f8f7] pb-20">
+            {/* Header */}
+            <header className="w-full bg-white border-b border-gray-200 sticky top-0 z-50">
+                <div className="max-w-[1100px] mx-auto px-4 md:px-6 h-16 flex items-center justify-between">
+                    <div className="flex items-center gap-3 cursor-pointer" onClick={() => navigate('/')}>
+                        <img src="/favicon.png" alt="HELPDESK.AI Logo" className="w-7 h-7 object-contain" />
+                        <div className="flex items-baseline gap-2">
+                            <h1 className="text-xl font-black tracking-tighter text-gray-900 italic">HELPDESK.AI</h1>
+                            <span className="px-2 py-0.5 text-[10px] font-black bg-indigo-100 text-indigo-800 rounded-md uppercase tracking-wider">Changelog</span>
+                        </div>
                     </div>
+                    <button 
+                        onClick={() => navigate('/')}
+                        className="flex items-center gap-2 text-xs font-bold text-gray-600 hover:text-emerald-600 transition-colors bg-gray-50 hover:bg-emerald-50 px-3.5 py-2 rounded-xl border border-gray-200"
+                    >
+                        <ArrowLeft size={14} /> Back to Home
+                    </button>
+                </div>
+            </header>
 
-                    {/* Date */}
-                    <div className="flex items-center gap-2 text-gray-400">
-
-                      <CalendarDays size={18} />
-
-                      <span>{release.date}</span>
+            <div className="max-w-[800px] mx-auto px-4 md:px-6 mt-12 space-y-12">
+                <div className="space-y-4">
+                    <div className="inline-flex items-center gap-2 px-3 py-1 bg-indigo-500/10 border border-indigo-500/20 rounded-full text-indigo-700 text-xs font-bold">
+                        <Sparkles size={14} /> System Changelog
                     </div>
-                  </div>
-
-                  {/* Sections */}
-                  <div className="relative">
-
-                    <Section
-                      title="New Features"
-                      glow="bg-green-500/20"
-                      icon={
-                        <Rocket className="text-green-400" />
-                      }
-                      items={release.features}
-                    />
-
-                    <Section
-                      title="Enhancements"
-                      glow="bg-blue-500/20"
-                      icon={
-                        <Sparkles className="text-blue-400" />
-                      }
-                      items={release.enhancements}
-                    />
-
-                    <Section
-                      title="Bug Fixes"
-                      glow="bg-red-500/20"
-                      icon={
-                        <Bug className="text-red-400" />
-                      }
-                      items={release.fixes}
-                    />
+                    <h1 className="text-4xl font-black text-slate-900 tracking-tight">Product Updates & Features</h1>
+                    <p className="text-slate-600 text-base leading-relaxed">
+                        Stay informed about system features, framework optimizations, and local AI training models introduced into HELPDESK.AI.
+                    </p>
+                </div>
 
-                  </div>
-                </motion.div>
-              </motion.div>
-            ))}
-          </div>
+                {/* Timeline */}
+                <div className="relative border-l border-slate-200 pl-6 ml-4 space-y-12">
+                    {changes.map((change, idx) => (
+                        <div key={change.version} className="relative">
+                            {/* Dot icon */}
+                            <span className="absolute -left-[35px] top-1.5 w-6 h-6 rounded-full bg-indigo-50 border border-indigo-300 flex items-center justify-center text-indigo-600">
+                                <GitCommit size={14} />
+                            </span>
+
+                            <div className="space-y-4">
+                                <div className="flex items-center gap-3 flex-wrap">
+                                    <span className="text-xl font-extrabold text-slate-900">{change.version}</span>
+                                    <span className="text-xs font-bold text-slate-400 flex items-center gap-1">
+                                        <Calendar size={12} /> {change.date}
+                                    </span>
+                                    <span className="px-2 py-0.5 rounded bg-emerald-50 border border-emerald-100 text-[10px] font-black text-emerald-800 uppercase tracking-widest">
+                                        {change.badge}
+                                    </span>
+                                </div>
+
+                                <Card className="p-6 rounded-[2rem] border border-slate-100 shadow-sm bg-white space-y-4">
+                                    <h4 className="font-extrabold text-slate-800 text-sm flex items-center gap-2">
+                                        <Zap size={14} className="text-indigo-500" /> {change.highlight}
+                                    </h4>
+                                    <ul className="list-disc pl-5 text-xs text-slate-600 space-y-2 leading-relaxed">
+                                        {change.items.map((item, itemIdx) => (
+                                            <li key={itemIdx}>{item}</li>
+                                        ))}
+                                    </ul>
+                                </Card>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
         </div>
-      </section>
-    </div>
-  );
-};
-
-export default Changelog;
+    );
+}

Frontend/src/pages/LandingPage.jsx

@@ -862,17 +862,17 @@ export default function LandingPage() {
                             {
                                 heading: 'Resources',
                                 links: [
-                                    { label: 'Documentation', href: '#' },
-                                    { label: 'API Reference', href: '#' },
-                                    { label: 'Changelog', href: '#' },
-                                    { label: 'Status Page', href: '#' },
+                                    { label: 'Documentation', href: '/docs' },
+                                    { label: 'API Reference', href: '/api-reference' },
+                                    { label: 'Changelog', href: '/changelog' },
+                                    { label: 'Status Page', href: '/status' },
                                 ]
                             },
                             {
                                 heading: 'Company',
                                 links: [
-                                    { label: 'About Us', href: '#' },
-                                    { label: 'Careers', href: '#' },
+                                    { label: 'About Us', href: '/about' },
+                                    { label: 'Careers', href: '/careers' },
                                     { label: 'Privacy Policy', href: '/privacy' },
                                     { label: 'Terms of Service', href: '/terms' },
                                 ]
@@ -883,7 +883,7 @@ export default function LandingPage() {
                                     { label: 'Security Overview', href: '/security' },
                                     { label: 'Privacy Policy', href: '/privacy' },
                                     { label: 'Terms of Service', href: '/terms' },
-                                    { label: 'Cookie Policy', href: '#' },
+                                    { label: 'Cookie Policy', href: '/cookie-policy' },
                                 ]
                             },
                         ].map(({ heading, links }) => (

Frontend/src/pages/StatusPage.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Activity, CheckCircle, AlertTriangle, ArrowLeft, RefreshCw } from 'lucide-react';
+import { Card } from '../components/ui/card';
+
+export default function StatusPage() {
+    const navigate = useNavigate();
+    const [isRefreshing, setIsRefreshing] = React.useState(false);
+
+    const handleRefresh = () => {
+        setIsRefreshing(true);
+        setTimeout(() => setIsRefreshing(false), 1000);
+    };
+
+    const services = [
+        { name: 'AI Triage Engine (NER & Categorization)', status: 'Operational', desc: 'Active pipeline & Gemini Model backup failovers' },
+        { name: 'Supabase Data Gateway', status: 'Operational', desc: 'Secure database endpoints & real-time socket connections' },
+        { name: 'Speech Dictation Interface', status: 'Operational', desc: 'Local Web Speech Recognition browser framework compatibility' },
+        { name: 'Client-Side OCR Telemetry', status: 'Operational', desc: 'Tesseract.js script injection & parallel image worker processes' },
+        { name: 'Stripe Payment Processor Integration', status: 'Operational', desc: 'Live billing checkout links & dynamic upgrade callbacks' }
+    ];
+
+    return (
+        <div className="min-h-screen bg-[#f6f8f7] pb-20">
+            {/* Header */}
+            <header className="w-full bg-white border-b border-gray-200 sticky top-0 z-50">
+                <div className="max-w-[1100px] mx-auto px-4 md:px-6 h-16 flex items-center justify-between">
+                    <div className="flex items-center gap-3 cursor-pointer" onClick={() => navigate('/')}>
+                        <img src="/favicon.png" alt="HELPDESK.AI Logo" className="w-7 h-7 object-contain" />
+                        <div className="flex items-baseline gap-2">
+                            <h1 className="text-xl font-black tracking-tighter text-gray-900 italic">HELPDESK.AI</h1>
+                            <span className="px-2 py-0.5 text-[10px] font-black bg-emerald-100 text-emerald-800 rounded-md uppercase tracking-wider">Status</span>
+                        </div>
+                    </div>
+                    <button 
+                        onClick={() => navigate('/')}
+                        className="flex items-center gap-2 text-xs font-bold text-gray-600 hover:text-emerald-600 transition-colors bg-gray-50 hover:bg-emerald-50 px-3.5 py-2 rounded-xl border border-gray-200"
+                    >
+                        <ArrowLeft size={14} /> Back to Home
+                    </button>
+                </div>
+            </header>
+
+            <div className="max-w-[800px] mx-auto px-4 md:px-6 mt-12 space-y-10">
+                {/* Hero Banner */}
+                <div className="bg-emerald-950 text-white rounded-[2rem] p-8 md:p-10 shadow-2xl relative overflow-hidden flex flex-col md:flex-row md:items-center justify-between gap-6">
+                    <div className="absolute -right-10 -top-10 w-44 h-44 bg-emerald-500/10 rounded-full blur-3xl" />
+                    
+                    <div className="space-y-3 z-10">
+                        <div className="inline-flex items-center gap-2 px-3 py-1 bg-emerald-500/20 rounded-full border border-emerald-500/30">
+                            <div className="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-ping" />
+                            <span className="text-[10px] font-black uppercase tracking-widest text-emerald-300">Live Status Radar</span>
+                        </div>
+                        <h2 className="text-3xl font-black italic tracking-tight">All Systems Operational</h2>
+                        <p className="text-slate-300 text-xs font-semibold">100% of microservices running successfully within target parameters.</p>
+                    </div>
+
+                    <button 
+                        onClick={handleRefresh}
+                        disabled={isRefreshing}
+                        className="self-start md:self-auto px-4 py-2.5 rounded-xl bg-white/10 hover:bg-white/20 font-bold text-xs uppercase tracking-wider flex items-center gap-1.5 border border-white/15 transition-all active:scale-95 disabled:opacity-50"
+                    >
+                        <RefreshCw size={14} className={isRefreshing ? 'animate-spin' : ''} /> {isRefreshing ? 'Checking...' : 'Refresh Status'}
+                    </button>
+                </div>
+
+                {/* Service Cards */}
+                <div className="space-y-4">
+                    <h3 className="text-xs font-black text-slate-400 uppercase tracking-widest">Active Services</h3>
+                    <div className="space-y-3">
+                        {services.map((service, idx) => (
+                            <Card key={idx} className="p-6 rounded-[1.5rem] border border-slate-200/80 bg-white flex items-center justify-between shadow-sm flex-wrap gap-4">
+                                <div className="space-y-1">
+                                    <h4 className="font-extrabold text-slate-900 text-sm">{service.name}</h4>
+                                    <p className="text-xs text-slate-400 font-semibold">{service.desc}</p>
+                                </div>
+                                <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-50 border border-emerald-100 text-emerald-700 text-[10px] font-black uppercase tracking-widest">
+                                    <CheckCircle size={10} /> {service.status}
+                                </span>
+                            </Card>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

Frontend/src/pages/legal/CookiePolicy.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ShieldAlert, ArrowLeft } from 'lucide-react';
+import { Card } from '../../components/ui/card';
+
+export default function CookiePolicy() {
+    const navigate = useNavigate();
+
+    return (
+        <div className="min-h-screen bg-[#f6f8f7] pb-20">
+            {/* Header */}
+            <header className="w-full bg-white border-b border-gray-200 sticky top-0 z-50">
+                <div className="max-w-[1100px] mx-auto px-4 md:px-6 h-16 flex items-center justify-between">
+                    <div className="flex items-center gap-3 cursor-pointer" onClick={() => navigate('/')}>
+                        <img src="/favicon.png" alt="HELPDESK.AI Logo" className="w-7 h-7 object-contain" />
+                        <div className="flex items-baseline gap-2">
+                            <h1 className="text-xl font-black tracking-tighter text-gray-900 italic">HELPDESK.AI</h1>
+                            <span className="px-2 py-0.5 text-[10px] font-black bg-slate-100 text-slate-800 rounded-md uppercase tracking-wider">Legal</span>
+                        </div>
+                    </div>
+                    <button 
+                        onClick={() => navigate('/')}
+                        className="flex items-center gap-2 text-xs font-bold text-gray-600 hover:text-emerald-600 transition-colors bg-gray-50 hover:bg-emerald-50 px-3.5 py-2 rounded-xl border border-gray-200"
+                    >
+                        <ArrowLeft size={14} /> Back to Home
+                    </button>
+                </div>
+            </header>
+
+            <div className="max-w-[800px] mx-auto px-4 md:px-6 mt-12 space-y-8">
+                <div className="space-y-4">
+                    <div className="inline-flex items-center gap-2 px-3 py-1 bg-slate-500/10 border border-slate-500/20 rounded-full text-slate-700 text-xs font-bold">
+                        <ShieldAlert size={14} /> Compliance Guide
+                    </div>
+                    <h1 className="text-4xl font-black text-slate-900 tracking-tight">Cookie Policy</h1>
+                    <p className="text-slate-400 text-xs font-semibold">Last Updated: May 2026</p>
+                </div>
+
+                <Card className="p-8 rounded-[2rem] border border-slate-200 bg-white space-y-6 shadow-sm text-sm text-slate-600 leading-relaxed font-medium">
+                    <h3 className="text-lg font-black text-slate-800 tracking-tight">1. Why We Use Cookies</h3>
+                    <p>
+                        HELPDESK.AI uses secure, essential first-party cookies to manage active user sessions, retain user preferences, and authenticate client tokens accessing our Supabase data gateway.
+                    </p>
+                    
+                    <h3 className="text-lg font-black text-slate-800 tracking-tight">2. Third-Party Trackers</h3>
+                    <p>
+                        We do not run external tracking scripts or advertising scripts. Stripe cookies are injected solely during active checkouts to maintain secure payment processing integrity.
+                    </p>
+
+                    <h3 className="text-lg font-black text-slate-800 tracking-tight">3. Managing Preferences</h3>
+                    <p>
+                        You can clean, block, or disable active cookies via your browser's security panel settings at any time.
+                    </p>
+                </Card>
+            </div>
+        </div>
+    );
+}