Enhance security and localization features across the application

- Added rehype-sanitize plugin to the markdown configuration for improved security against XSS attacks.
- Updated environment variables in the codebase to include new configurations for SMTP and monitoring.
- Implemented secure headers in server and Nginx configurations to bolster security.
- Refactored email handling to prevent spoofing by ensuring safe sender addresses.
- Improved localization by updating language persistence and button components for better user experience.
- Enhanced the uptime API and contact form with better error handling and logging practices.
- Updated dependencies in package.json and package-lock.json for better performance and security.

src/assets/images/topdesk-api-docs.png

@@ -0,0 +1,72 @@
+---
+// Create this file as: src/assets/images/topdesk-api-docs.png placeholder
+// You can replace this with an actual image file
+
+// For now, you can create a simple placeholder or use an existing image
+// The image import in the main file should be:
+// import TOPDeskImage from '~/assets/images/topdesk-api-docs.png';
+
+// If you want to create the image programmatically or use a placeholder,
+// you can create an SVG file instead:
+---
+
+<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#764ba2;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#f093fb;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Background -->
+  <rect width="800" height="600" fill="url(#grad1)"/>
+  
+  <!-- Grid pattern -->
+  <defs>
+    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
+    </pattern>
+  </defs>
+  <rect width="800" height="600" fill="url(#grid)"/>
+  
+  <!-- Main content area -->
+  <rect x="100" y="100" width="600" height="400" rx="20" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.2)" stroke-width="2"/>
+  
+  <!-- Header -->
+  <rect x="120" y="120" width="560" height="80" rx="10" fill="rgba(255,255,255,0.15)"/>
+  <text x="400" y="170" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="24" font-weight="bold">API Documentation</text>
+  
+  <!-- Content blocks -->
+  <rect x="140" y="220" width="160" height="100" rx="8" fill="rgba(255,255,255,0.1)"/>
+  <rect x="320" y="220" width="160" height="100" rx="8" fill="rgba(255,255,255,0.1)"/>
+  <rect x="500" y="220" width="160" height="100" rx="8" fill="rgba(255,255,255,0.1)"/>
+  
+  <!-- Content block icons -->
+  <circle cx="220" cy="250" r="15" fill="rgba(255,255,255,0.3)"/>
+  <circle cx="400" cy="250" r="15" fill="rgba(255,255,255,0.3)"/>
+  <circle cx="580" cy="250" r="15" fill="rgba(255,255,255,0.3)"/>
+  
+  <!-- Content lines -->
+  <rect x="150" y="280" width="140" height="4" rx="2" fill="rgba(255,255,255,0.4)"/>
+  <rect x="150" y="290" width="100" height="4" rx="2" fill="rgba(255,255,255,0.3)"/>
+  <rect x="150" y="300" width="120" height="4" rx="2" fill="rgba(255,255,255,0.3)"/>
+  
+  <rect x="330" y="280" width="140" height="4" rx="2" fill="rgba(255,255,255,0.4)"/>
+  <rect x="330" y="290" width="100" height="4" rx="2" fill="rgba(255,255,255,0.3)"/>
+  <rect x="330" y="300" width="120" height="4" rx="2" fill="rgba(255,255,255,0.3)"/>
+  
+  <rect x="510" y="280" width="140" height="4" rx="2" fill="rgba(255,255,255,0.4)"/>
+  <rect x="510" y="290" width="100" height="4" rx="2" fill="rgba(255,255,255,0.3)"/>
+  <rect x="510" y="300" width="120" height="4" rx="2" fill="rgba(255,255,255,0.3)"/>
+  
+  <!-- Footer -->
+  <rect x="120" y="420" width="560" height="60" rx="10" fill="rgba(255,255,255,0.1)"/>
+  <text x="400" y="455" text-anchor="middle" fill="rgba(255,255,255,0.8)" font-family="Arial, sans-serif" font-size="14">Technical Integration Guide</text>
+  
+  <!-- Floating elements -->
+  <circle cx="150" cy="150" r="8" fill="rgba(255,255,255,0.2)"/>
+  <circle cx="650" cy="180" r="12" fill="rgba(255,255,255,0.15)"/>
+  <circle cx="180" cy="450" r="6" fill="rgba(255,255,255,0.25)"/>
+  <circle cx="620" cy="420" r="10" fill="rgba(255,255,255,0.2)"/>
+</svg>