feat(analytics): Add Firebase Analytics integration with page tracking

- Initialize Firebase Analytics with configuration and client-side setup
- Create GoogleAnalytics component to track page views on route changes
- Add analytics utility functions for tracking custom events (button clicks, form submissions, link clicks, searches)
- Integrate GoogleAnalytics component into home, not-found, and marketing layouts with Suspense boundary
- Add firebase dependency to package.json
- Enable automatic page view tracking with pathname and search parameters

app/(home)/layout.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { Suspense } from "react";
 import { ToastContainer, Zoom } from "react-toastify";
+import GoogleAnalytics from "../_components/GoogleAnalytics";
 import NavigationBar from "../_components/NavigationBar";
 import "../globals.css";
 const geistSans = Geist({
@@ -136,6 +137,10 @@ export default async function RootLayout({
           pauseOnHover
         />
 
+        <Suspense>
+          <GoogleAnalytics />
+        </Suspense>
+
         <div className="container px-4 m-auto flex-grow">{children}</div>
         <footer>
           <div className="relative z-10 container px-4 py-4 m-auto flex flex-col justify-center items-center ">

app/(not-found)/[...not-found]/layout.tsx

@@ -5,6 +5,8 @@ import Link from "next/link";
 import { ToastContainer, Zoom } from "react-toastify";
 
 import "../../globals.css";
+import { Suspense } from "react";
+import GoogleAnalytics from "@/app/_components/GoogleAnalytics";
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
@@ -126,6 +128,10 @@ export default async function RootLayout({
           pauseOnHover
         />
 
+        <Suspense>
+          <GoogleAnalytics />
+        </Suspense>
+
         <main className="container px-4 py-4 m-auto flex-grow">{children}</main>
         <footer className="relative h-full bg-[url('/footer-bg.svg')] bg-cover bg-no-repeat mt-20">
           <div className="relative z-10 container px-4 py-4 m-auto flex flex-col justify-center items-center">

app/_components/GoogleAnalytics.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { analytics } from "@/lib/firebase";
+import { logEvent } from "firebase/analytics";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+
+export default function GoogleAnalytics() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (analytics) {
+      const url =
+        pathname +
+        (searchParams?.toString() ? `?${searchParams.toString()}` : "");
+
+      logEvent(analytics, "page_view", {
+        page_path: url,
+        page_title: document.title,
+      });
+    }
+  }, [pathname, searchParams]);
+
+  return null;
+}

app/marketing/layout.tsx

@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import { ToastContainer, Zoom } from "react-toastify";
 import "../globals.css";
+import { Suspense } from "react";
+import GoogleAnalytics from "../_components/GoogleAnalytics";
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
@@ -43,6 +45,10 @@ export default async function RootLayout({
           pauseOnHover
         />
 
+        <Suspense>
+          <GoogleAnalytics />
+        </Suspense>
+
         {children}
       </body>
     </html>