updating bug-fixes

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@emailjs/browser": "^4.4.1",
     "@tanstack/react-query": "^5.59.17",
+    "@vercel/analytics": "^1.4.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
@@ -25,6 +26,7 @@
     "react-firebase-hooks": "^5.1.1",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
+    "recharts": "^2.15.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
   },

src/app/about/page.tsx

@@ -35,7 +35,7 @@ export default function AboutPage() {
         </div>
         <div className="mx-auto grid max-w-7xl grid-cols-1 gap-20 px-6 md:grid-cols-2">
           <div className="space-y-4 text-left">
-            <h1 className="font-Michroma text-3xl font-bold sm:text-4xl">
+            <h1 className="text-3xl font-bold sm:text-4xl">
               About Us
             </h1>
             <p className="text-balance pt-1 text-lg leading-relaxed">

src/app/client-layout.tsx

@@ -8,6 +8,7 @@ import { QueryClientProvider } from "@tanstack/react-query";
 import { queryClient } from "@/lib/react-query/queryClient";
 import { useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
+import { trackPageView } from "@/lib/firebase/analytics";
 
 export default function ClientLayout({
   children,
@@ -22,13 +23,16 @@ export default function ClientLayout({
   const isAdminRoute = pathname?.startsWith("/dashboard");
 
   useEffect(() => {
-      if(isAdminRoute) {
-        document.body.style.backgroundColor = "#fff"
-      }
-      else {
-        document.body.style.backgroundColor = "#080d14"
-      }
-  },[isAdminRoute])
+    if (isAdminRoute) {
+      document.body.style.backgroundColor = "#fff";
+    } else {
+      document.body.style.backgroundColor = "#080d14";
+    }
+  }, [isAdminRoute]);
+
+  useEffect(() => {
+    trackPageView(pathname);
+  }, [pathname]);
 
   return (
     <QueryClientProvider client={queryClient}>

src/app/dashboard/analytics/page.tsx

@@ -0,0 +1,124 @@
+"use client";
+import { useEffect, useState } from "react";
+import {
+  collection,
+  query,
+  orderBy,
+  getDocs,
+  where,
+  Timestamp,
+  deleteDoc,
+} from "firebase/firestore";
+import { db } from "@/lib/firebase/firebase";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+
+interface PageViewData {
+  date: string;
+  views: number;
+}
+
+// AnalyticsDashboard.tsx
+interface WeeklyViewData {
+  weekLabel: string;
+  views: number;
+}
+
+export default function AnalyticsDashboard() {
+  const [weeklyData, setWeeklyData] = useState<WeeklyViewData[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchWeeklyViews = async () => {
+      const yearAgo = new Date();
+      yearAgo.setFullYear(yearAgo.getFullYear() - 1);
+
+      const q = query(
+        collection(db, "weeklyViews"),
+        where("timestamp", ">=", yearAgo),
+        orderBy("timestamp", "asc"),
+      );
+
+      const snapshot = await getDocs(q);
+      const viewsByWeek: { [key: string]: number } = {};
+
+      // Get unique week-year combinations
+      snapshot.forEach((doc) => {
+        const data = doc.data();
+        const key = `${data.year}-${data.weekNumber}`;
+        viewsByWeek[key] = (viewsByWeek[key] || 0) + 1;
+      });
+
+      // Sort by year and week
+      const formattedData = Object.entries(viewsByWeek)
+        .map(([key, views]) => {
+          const [year, week] = key.split("-");
+          return {
+            weekLabel: `W${week}-${year}`,
+            views,
+            sortKey: `${year}${week.padStart(2, "0")}`,
+          };
+        })
+        .sort((a, b) => a.sortKey.localeCompare(b.sortKey))
+        .map(({ weekLabel, views }) => ({ weekLabel, views }));
+
+      setWeeklyData(formattedData);
+      setLoading(false);
+    };
+
+    fetchWeeklyViews();
+  }, []);
+
+  if (loading)
+    return (
+      <div className="flex h-96 items-center justify-center">Loading...</div>
+    );
+
+  const totalViews = weeklyData.reduce((sum, week) => sum + week.views, 0);
+  const avgViews = Math.round(totalViews / weeklyData.length);
+
+  return (
+    <div className="space-y-8">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <div className="rounded-lg border border-gray-200 bg-white p-6">
+          <h3 className="text-lg font-semibold">Total Views (in past year)</h3>
+          <p className="mt-2 text-2xl font-bold">{totalViews}</p>
+        </div>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-6">
+          <h3 className="text-lg font-semibold">Average Weekly Views</h3>
+          <p className="mt-2 text-2xl font-bold">{avgViews}</p>
+        </div>
+      </div>
+
+      <div className="rounded-lg border border-gray-200 bg-white p-6">
+        <h3 className="mb-4 text-lg font-semibold">Weekly Page Views</h3>
+        <div className="h-96">
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart data={weeklyData}>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="weekLabel" />
+              <YAxis />
+              <Tooltip />
+              <Legend />
+              <Line
+                type="monotone"
+                dataKey="views"
+                stroke="#8884d8"
+                name="Views"
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/dashboard/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FaCalendarAlt, FaBoxOpen } from "react-icons/fa";
+import { FaCalendarAlt, FaBoxOpen, FaChartLine } from "react-icons/fa";
 import { BsPcDisplay } from "react-icons/bs";
 import Link from "next/link";
 import ProtectedRoute from "@/components/admin/auth/ProtectedRoute";
@@ -15,7 +15,7 @@ export default function Dashboard() {
           <SignOutButton />
         </div>
         <hr className="my-4 border-gray-200" />
-        <ul className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8 pb-12">
+        <ul className="grid grid-cols-1 gap-4 pb-12 sm:gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
           <Link
             href="/dashboard/events"
             className="flex flex-col items-center gap-4 rounded-md border border-gray-200 bg-[#fafafa] p-4 transition-all hover:bg-gray-200 sm:gap-6 sm:p-6"
@@ -52,6 +52,18 @@ export default function Dashboard() {
               Create, Update, and Delete club inventory.
             </p>
           </Link>
+          <Link
+            href="/dashboard/analytics"
+            className="flex flex-col items-center gap-4 rounded-md border border-gray-200 bg-[#fafafa] p-4 transition-all hover:bg-gray-200 sm:gap-6 sm:p-6"
+          >
+            <p className="text-xl sm:text-2xl">Analytics</p>
+            <span className="text-6xl text-blue-500 sm:text-[120px]">
+              <FaChartLine />
+            </span>
+            <p className="text-center text-sm sm:text-base">
+              View website analytics and metrics.
+            </p>
+          </Link>
         </ul>
       </div>
     </ProtectedRoute>

src/app/globals.css

@@ -1,4 +1,5 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Michroma&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -15,7 +16,7 @@ textarea {
 }
 
 body {
-  font-family: "Inter", sans-serif;
+  font-family: "Space Grotesk", serif !important;
   background-color: #ffffff;
   overflow-x: hidden;
 }
@@ -73,4 +74,27 @@ body {
 .grad {
   background: linear-gradient(0deg, #4255f922, #080d14);
   filter: blur(20px);
+}
+
+
+/*  monospace font - will update later */
+
+.m {
+  font-family: "Space Mono", serif; 
+}
+
+/* fade background of hero */
+
+
+.hero-btn:hover {
+  /* Apply a full (all-around) shadow with #79C7FD */
+  box-shadow: 0 0 20px 5px rgba(121, 199, 253, 0.7);
+}
+
+.hero-fade {
+  background: linear-gradient(180deg,#080d1400 0%, #080d14 100%);
+}
+
+.about-fade {
+    background: linear-gradient(0deg,#080d1400 0%, #080d14 100%);
 }

src/app/page.tsx

@@ -1,15 +1,18 @@
 "use client";
 import Footer from "@/components/Footer";
+import About from "@/components/landing/About";
+import Events from "@/components/landing/Events";
+import Faq from "@/components/landing/Faq";
 import Hero from "@/components/landing/Hero";
-import Landing from "@/components/landing/Landing";
+
 
 const Website = () => {
   return (
-    <div className="min-h-screen w-full bg-[#080d14]">
-      {/* Applied a noise bg to the page for added depth */}
-      <div className="noise-bg" />
+    <div className="min-h-screen w-full bg-[#080d14] text-white">
       <Hero />
-      <Landing />
+      <About/>
+      <Events/>
+      <Faq/>
       <Footer />
     </div>
   );

src/components/Footer.tsx

@@ -81,15 +81,15 @@ export default function Footer() {
             rights reserved.
           </p>
         </div>
-        <div className="footer-clip-path flex h-full min-h-80 flex-col items-center justify-center gap-1 bg-white px-20 pt-20 lg:col-span-2">
-          <p className="max-w-[417px] text-2xl font-bold sm:text-4xl">
+        <div className="footer-clip-path flex h-full min-h-80 flex-col items-center justify-center bg-white text-black px-16 sm:px-20 pt-20 lg:col-span-2">
+          <p className="max-w-[417px] text-2xl font-bold sm:text-4xl flex flex-col-reverse sm:flex-row items-center gap-2">
             Gator User Design{" "}
             <Image
               src={"/iconography/gud-color.png"}
               width={80}
               height={80}
               alt=""
-              className="ml-2 inline h-14 w-14 sm:h-20 sm:w-20"
+              className="h-14 w-14 sm:h-20 sm:w-20"
             />{" "}
           </p>
           <div className="flex w-full max-w-[416px] items-start justify-center sm:justify-start">

src/components/MemberCounts/SocialStats.tsx

@@ -54,7 +54,7 @@ const StatCard: React.FC<StatCardProps> = ({
         </div>
         <div>
           <p className="text-sm font-medium text-gray-300">{label}</p>
-          <p className="font-['Michroma'] text-xl font-bold text-white">
+          <p className="text-xl font-bold text-white">
             {isLoading
               ? "Loading..."
               : error