public: custom homepage tracking

apps/public/src/app/layout.tsx

@@ -6,6 +6,7 @@ import { getRootMetadata } from '@/lib/metadata';
 import { cn } from '@/lib/utils';
 import './global.css';
 import { OpenPanelComponent } from '@openpanel/nextjs';
+import { ScrollTracker } from '@/components/scroll-tracker';
 
 const font = Geist({
   subsets: ['latin'],
@@ -39,6 +40,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         <RootProvider>
           <TooltipProvider>{children}</TooltipProvider>
         </RootProvider>
+        <ScrollTracker />
         {process.env.NEXT_PUBLIC_OP_CLIENT_ID && (
           <OpenPanelComponent
             clientId={process.env.NEXT_PUBLIC_OP_CLIENT_ID}

apps/public/src/components/feature-card-hover-track.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { useOpenPanel } from '@openpanel/nextjs';
+import { useRef } from 'react';
+
+interface FeatureCardHoverTrackProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+export function FeatureCardHoverTrack({
+  title,
+  children,
+}: FeatureCardHoverTrackProps) {
+  const { track } = useOpenPanel();
+  const hoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleMouseEnter = () => {
+    hoverTimerRef.current = setTimeout(() => {
+      track('feature_card_hover', { title });
+      hoverTimerRef.current = null;
+    }, 1500);
+  };
+
+  const handleMouseLeave = () => {
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = null;
+    }
+  };
+
+  return (
+    // Hover handlers for analytics only; no keyboard interaction needed
+    // biome-ignore lint/a11y/noNoninteractiveElementInteractions: analytics hover tracking
+    <div
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      role="group"
+    >
+      {children}
+    </div>
+  );
+}

apps/public/src/components/feature-card.tsx

@@ -1,6 +1,8 @@
+
 import type { LucideIcon } from 'lucide-react';
 import Link from 'next/link';
 import { cn } from '@/lib/utils';
+import { FeatureCardHoverTrack } from '@/components/feature-card-hover-track';
 
 interface FeatureCardProps {
   link?: {
@@ -64,6 +66,7 @@ export function FeatureCard({
 }: FeatureCardProps) {
   if (illustration) {
     return (
+      <FeatureCardHoverTrack title={title}>
         <FeatureCardContainer className={className}>
           {illustration}
           <div className="col gap-2" data-content>
@@ -80,10 +83,12 @@ export function FeatureCard({
             </Link>
           )}
         </FeatureCardContainer>
+      </FeatureCardHoverTrack>
     );
   }
 
   return (
+    <FeatureCardHoverTrack title={title}>
       <FeatureCardContainer className={className}>
         {Icon && <Icon className="size-6" />}
         <div className="col gap-2">
@@ -100,5 +105,6 @@ export function FeatureCard({
           </Link>
         )}
       </FeatureCardContainer>
+    </FeatureCardHoverTrack>
   );
 }

apps/public/src/components/scroll-tracker.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { useOpenPanel } from '@openpanel/nextjs';
+import { usePathname } from 'next/navigation';
+import { useEffect, useRef } from 'react';
+
+export function ScrollTracker() {
+  const { track } = useOpenPanel();
+  const pathname = usePathname();
+  const hasFired = useRef(false);
+
+  useEffect(() => {
+    hasFired.current = false;
+
+    const handleScroll = () => {
+      if (hasFired.current) {
+        return;
+      }
+
+      const scrollTop = window.scrollY;
+      const docHeight =
+        document.documentElement.scrollHeight - window.innerHeight;
+      const percent =
+        docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
+
+      if (percent >= 50) {
+        hasFired.current = true;
+        track('scroll_half_way', { percent: Math.round(percent) });
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [track, pathname]);
+
+  return null;
+}