Add Analytics Hooks

app/about/components/ValueBarItem.tsx

@@ -1,3 +1,7 @@
+"use client";
+
+import { useTimeTracker } from "@/app/hooks/timeTracker";
+
 const values = [
   "Innovative",
   "Inclusive",
@@ -9,8 +13,10 @@ const values = [
 ];
 
 export default function ValueBarItem() {
+  const sectionRef = useTimeTracker("value_bar");
+
   return (
-    <div className="w-full bg-[#A8B9AC] py-6 mt-12 overflow-hidden">
+    <div ref={sectionRef} className="w-full bg-[#A8B9AC] py-6 mt-12 overflow-hidden">
       {/* <div className="flex overflow-x-auto whitespace-nowrap px-6 md:px-10 gap-8 md:justify-between items-center max-w-screen-2xl mx-auto no-scrollbar"> */}
       <div className="flex w-max animate-infinite-scroll">
         <div className="flex items-center gap-16 px-8">

app/about/page.tsx

@@ -1,7 +1,12 @@
+"use client";
+
 import AboutSection from "./sections/AboutSection";
 import MeetTheTeam from "./sections/MeetTheTeam";
+import useTrackPage from "../hooks/TrackPage";
 
 export default function Page() {
+    useTrackPage({ page: "about" });
+
     return (
         <main className="min-h-screen bg-[#FDFCF7]">
             <AboutSection />

app/about/sections/AboutSection.tsx

@@ -1,10 +1,15 @@
+"use client";
+
 import MediaItem from "../components/MediaItem";
 import ContentItem from "../components/ContentItem";
 import ValueBarItem from "../components/ValueBarItem";
+import { useTimeTracker } from "@/app/hooks/timeTracker";
 
 export default function AboutSection() {
+    const sectionRef = useTimeTracker("about_section");
+
     return (
-        <section className="w-full pt-36">
+        <section ref={sectionRef} className="w-full pt-36">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-start max-w-screen-2xl mx-auto px-12 mb-20">
                 <MediaItem />
                 <ContentItem />

app/blog/page.tsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react';
 import Updates from './Updates';
 import Announcement from './Announcement';
 import Media from './Media';
+import useTrackPage from '../hooks/TrackPage';
 
 type BlogPageEntry = {
     slug: string;
@@ -43,6 +44,7 @@ async function fetchBlogPages(): Promise<BlogPageEntry[]> {
 }
 
 export default function BlogPage() {
+    useTrackPage({ page: "blog" });
     const [updates, setUpdates] = useState<BlogPageEntry[]>([]);
     const [index, setIndex] = useState(0);
     const [loading, setLoading] = useState(true);

app/contact/components/GeneralSupport.tsx

@@ -1,10 +1,13 @@
 "use client";
 
 import React from "react";
+import { useTrackHover } from "@/app/hooks/trackHover";
 
 export default function GeneralSupport() {
+    const { onMouseEnter, onMouseLeave } = useTrackHover("general_support");
+
     return (
-        <div className="flex items-center justify-center group w-[100vw] max-w-[1152px] h-[218px] hover:h-[316px] rounded-[3rem] overflow-hidden text-white transition-all duration-1000 bg-[linear-gradient(90deg,#363A42_0%,#8994A8_100%)] hover:bg-[linear-gradient(90deg,#8CDFA8_25%,#34543F_100%)]">
+        <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} className="flex items-center justify-center group w-[100vw] max-w-[1152px] h-[218px] hover:h-[316px] rounded-[3rem] overflow-hidden text-white transition-all duration-1000 bg-[linear-gradient(90deg,#363A42_0%,#8994A8_100%)] hover:bg-[linear-gradient(90deg,#8CDFA8_25%,#34543F_100%)]">
             <div className="flex flex-col items-center text-center text-[clamp(1.2rem,4vw,5rem)] group-hover:w-[479px]">
                 GENERAL SUPPORT
             </div>

app/contact/components/PressInquiries.tsx

@@ -1,10 +1,13 @@
 "use client";
 
 import React from "react";
+import { useTrackHover } from "@/app/hooks/trackHover";
 
 export default function PressInquiries() {
+    const { onMouseEnter, onMouseLeave } = useTrackHover("press_inquiries");
+
     return (
-        <div className="flex items-center justify-center group w-[100vw] max-w-[1152px] h-[218px] hover:h-[316px] rounded-[3rem] overflow-hidden text-white transition-all duration-1000 bg-[linear-gradient(90deg,#363A42_0%,#8994A8_100%)] hover:bg-[linear-gradient(90deg,#FF7958,#691F0D_100%)]">
+        <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} className="flex items-center justify-center group w-[100vw] max-w-[1152px] h-[218px] hover:h-[316px] rounded-[3rem] overflow-hidden text-white transition-all duration-1000 bg-[linear-gradient(90deg,#363A42_0%,#8994A8_100%)] hover:bg-[linear-gradient(90deg,#FF7958,#691F0D_100%)]">
             <div className="flex flex-col items-center text-center text-[clamp(1.2rem,4vw,5rem)] group-hover:w-[479px]">
                 PRESS INQUIRIES
             </div>

app/contact/components/VendorInquiries.tsx

@@ -1,10 +1,13 @@
 "use client";
 
 import React from "react";
+import { useTrackHover } from "@/app/hooks/trackHover";
 
 export default function VendorInquiries() {
+    const { onMouseEnter, onMouseLeave } = useTrackHover("vendor_inquiries");
+
     return (
-        <div className="flex items-center justify-center group w-[100vw] max-w-[1152px] h-[218px] hover:h-[316px] rounded-[3rem] overflow-hidden text-white transition-all duration-1000 bg-[linear-gradient(90deg,#363A42_0%,#8994A8_100%)] hover:bg-[linear-gradient(90deg,#FF9775_0%,#B42C00_100%)]">
+        <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} className="flex items-center justify-center group w-[100vw] max-w-[1152px] h-[218px] hover:h-[316px] rounded-[3rem] overflow-hidden text-white transition-all duration-1000 bg-[linear-gradient(90deg,#363A42_0%,#8994A8_100%)] hover:bg-[linear-gradient(90deg,#FF9775_0%,#B42C00_100%)]">
             <div className="flex flex-col items-center text-center text-[clamp(1.2rem,4vw,5rem)] group-hover:w-[479px]">
                 VENDOR INQUIRIES
             </div>

app/contact/page.tsx

@@ -3,9 +3,11 @@
 import GeneralSupport from "./components/GeneralSupport";
 import PressInquiries from "./components/PressInquiries";
 import VendorInquiries from "./components/VendorInquiries";
+import useTrackPage from "../hooks/TrackPage";
 
 
 export default function ContactPage() {
+  useTrackPage({ page: "contact" });
   return (
     <div className="flex flex-col items-center">
         <div className="pt-28">

app/homepage/components/features.tsx

@@ -1,3 +1,7 @@
+"use client";
+
+import { useTimeTracker } from "@/app/hooks/timeTracker";
+
 const Feature = ({
   text,
   image,
@@ -7,8 +11,11 @@ const Feature = ({
   image: string;
   link: string;
 }) => {
+  const sectionRef = useTimeTracker(`feature_${link}`);
+
   return (
     <div
+      ref={sectionRef}
       className="
         w-full
         h-[calc(994/1512*100vw)]

app/homepage/components/previewSection.tsx

@@ -1,6 +1,13 @@
+"use client";
+
+import { useTimeTracker } from "@/app/hooks/timeTracker";
+
 const PreviewSection = () => {
+  const sectionRef = useTimeTracker("preview_section");
+
   return (
     <section
+      ref={sectionRef}
       className="
         relative
         w-full

app/homepage/components/title.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useTimeTracker } from "@/app/hooks/timeTracker";
 
 const Title = () => {
+  const sectionRef = useTimeTracker("hero_title");
   const fullText = "Walk The Runway";
   const [displayText, setDisplayText] = useState("");
 
@@ -18,6 +20,7 @@ const Title = () => {
 
   return (
     <section
+      ref={sectionRef}
       className="
         w-full
         h-[calc(878/1512*100vw)]

app/learn-more/LearnMoreCard.tsx

@@ -1,5 +1,6 @@
 'use client';
 import React, { useState } from 'react';
+import { useTrackHover } from '@/app/hooks/trackHover';
 
 interface LearnMoreProps {
   className?: string;
@@ -15,9 +16,12 @@ const LearnMoreCard: React.FC<LearnMoreProps> = ({
   morePoints = [],
 }) => {
   const [expanded, setExpanded] = useState(false);
+  const { onMouseEnter, onMouseLeave } = useTrackHover(`learn_more_card_${title}`);
 
   return (
     <div
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
       className={`relative bg-[#612414] h-[471px] w-full rounded-xl p-6 text-white transition-transform duration-300 hover:scale-[1.05] ${className}`}
     >
 

app/learn-more/page.tsx

@@ -1,8 +1,10 @@
 'use client'
 import { useState, useEffect } from 'react';
 import LearnMoreCard from './LearnMoreCard';
+import useTrackPage from '../hooks/TrackPage';
 
 export default function LearnMorePage(){
+    useTrackPage({ page: "learn-more" });
     return(
         <main className="min-h-screen bg-[#FDFCF7] text-base pt-36">
             <div className="px-4 md:px-8 lg:px-16 py-12 space-y-12">

app/page.tsx

@@ -1,8 +1,12 @@
+"use client";
+
 import Feature from "./homepage/components/features";
 import Title from "./homepage/components/title";
 import PreviewSection from "./homepage/components/previewSection";
+import useTrackPage from "./hooks/TrackPage";
 
 export default function HomePage() {
+  useTrackPage({ page: "home" });
   return (
     <main className="bg-white flex flex-col">
       <Title />