Clarity

src/components/CookieBanner.tsx

@@ -67,7 +67,7 @@ export default function CookieBanner() {
                       <svg className="w-3.5 h-3.5 text-primary-600 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
                         <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                       </svg>
-                      <span className="text-gray-700"><strong>Analytics:</strong> PostHog & Google Analytics</span>
+                      <span className="text-gray-700"><strong>Analytics:</strong> PostHog, Microsoft Clarity & Google Analytics</span>
                     </div>
                   </div>
                 </div>

src/components/analytics/MicrosoftClarity.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Script from 'next/script';
+
+export default function MicrosoftClarity() {
+    const [consented, setConsented] = useState(false);
+    const projectId = process.env.NEXT_PUBLIC_CLARITY_PROJECT_ID;
+
+    useEffect(() => {
+        // Check consent (same gate as PostHog / Facebook Pixel)
+        const cookieConsent = localStorage.getItem('cookieConsent');
+        if (cookieConsent === 'accepted') setConsented(true);
+    }, []);
+
+    if (!projectId || !consented) return null;
+
+    return (
+        <Script id="ms-clarity" strategy="afterInteractive">
+            {`(function(c,l,a,r,i,t,y){
+                c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+                t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+                y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+            })(window, document, "clarity", "script", "${projectId}");`}
+        </Script>
+    );
+}