feat: add Microsoft Clarity script for enhanced user analytics (#785)

* feat: add Microsoft Clarity script for enhanced user analytics

* Update src/pages/_app.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: jeromehardaway

src/pages/_app.tsx

@@ -1,5 +1,6 @@
 import { ElementType, useEffect } from "react";
 import { useRouter } from "next/router";
+import Script from "next/script";
 import type { AppProps } from "next/app";
 import { SessionProvider } from "next-auth/react";
 import type { Session } from "next-auth";
@@ -48,6 +49,23 @@ const MyApp = ({ Component, pageProps }: CustomAppProps): JSX.Element => {
         <SessionProvider session={pageProps.session}>
             <UIProvider>
                 <UserProvider>
+                    {/* Microsoft Clarity Script */}
+                    {process.env.NODE_ENV === 'production' && (
+                        <Script
+                            id="ms-clarity"
+                            strategy="afterInteractive"
+                            dangerouslySetInnerHTML={{
+                                __html: `
+                                    (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", "s7t77s4iva");
+                                `,
+                            }}
+                        />
+                    )}
+
                     <Layout {...layoutProps}>
                         <SEO />
                         <Component {...pageProps} />