feat(security): Add XSS protection with DOMPurify sanitization

- Add sanitize.ts utility module with sanitizeText(), sanitizeUrl(), and sanitizeHtml() functions
- Implement server-side HTML entity escaping and client-side DOMPurify sanitization
- Add comprehensive test suite for sanitization functions in lib/__tests__/sanitize.test.ts
- Secure marketing pages by sanitizing all CMS data (hero, features, challenges, advantages, footer)
- Secure inquiries form by sanitizing field labels, placeholders, and button text
- Add SECURITY.md documentation outlining XSS protection measures and best practices
- Add USAGE_EXAMPLES.md with detailed examples of sanitization function usage
- Add XSS_PROTECTION_SUMMARY.md with implementation overview
- Update package.json to include dompurify (^3.3.0) dependency
- Protects against common XSS attack vectors including script injection, event handlers, and malicious URLs

app/_inquires/form.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { sanitizeText } from "@/lib/sanitize";
 import api from "@/service/api";
 import { CmsContact } from "@/types/TCms";
 import { useState } from "react";
@@ -82,7 +83,8 @@ const InquiresForm = ({
   ];
 
   const fields = contactData?.fields || defaultFields;
-  const submitText = contactData?.submit_button_text || buttonText || "Submit";
+  const submitText =
+    sanitizeText(contactData?.submit_button_text) || buttonText || "Submit";
 
   return (
     <form
@@ -100,8 +102,8 @@ const InquiresForm = ({
           <InputGroup
             key={field.name}
             id={field.name}
-            label={field.label}
-            placeholder={field.placeholder}
+            label={sanitizeText(field.label)}
+            placeholder={sanitizeText(field.placeholder)}
             register={register}
             type={inputType}
             error={errors[field.name]?.message}

app/_inquires/page.tsx

@@ -1,3 +1,4 @@
+import { sanitizeText } from "@/lib/sanitize";
 import { CmsContact } from "@/types/TCms";
 import InquiresForm from "./form";
 
@@ -6,10 +7,10 @@ const Inquires = ({ contactData }: { contactData?: CmsContact }) => {
     <div className="flex flex-col items-center mt-16 px-8 ">
       <div className="lg:w-2/3 m-auto flex flex-col gap-4 mb-12">
         <h2 className="font-bold text-4xl">
-          {contactData?.title || "Unlock Your Growth Potential"}
+          {sanitizeText(contactData?.title) || "Unlock Your Growth Potential"}
         </h2>
         <p className="font-normal text-[16px] text-gray-600">
-          {contactData?.description ||
+          {sanitizeText(contactData?.description) ||
             "Register for early access and a free consultation. Let's start winning together."}
         </p>
       </div>