chore(website): added captures for apply

apps/website/src/app/(marketing)/_components/apply-button.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import posthog from "posthog-js";
+
+import { Button } from "@amaxa/ui/button";
+
+export function ApplyButton() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  function handleClick() {
+    let url = window.origin + pathname;
+    if (searchParams.toString()) {
+      url = url + `?${searchParams.toString()}`;
+    }
+    posthog.capture("apply_button_clicked", {
+      current_url: url,
+    });
+    router.push("https://airtable.com/appPR9mkslbn3U8YZ/shrHHUtRzK4DqKt3F");
+  }
+
+  return (
+    <a>
+      <Button className="h-12 px-5" onClick={handleClick}>
+        Apply now
+      </Button>
+    </a>
+  );
+}

apps/website/src/app/(marketing)/_components/header.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { Menu } from "lucide-react";
 
 import { MobileNav } from "~/components/mobile-nav";
+import { ApplyButton } from "./apply-button";
 import NavigationSection from "./nav";
 
 export const Header = () => {
@@ -70,11 +71,7 @@ export const Header = () => {
       )}
       <NavigationSection />
       <div className="hidden gap-4 md:flex  md:flex-row">
-        <Link href={"/apply"} passHref>
-          <button className="rounded-xl border border-primary bg-primary px-4 py-2 text-sm text-white transition duration-200 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0)]">
-            Apply now
-          </button>
-        </Link>
+        <ApplyButton />
       </div>
     </div>
   );

apps/website/src/app/(marketing)/_components/hero.tsx

@@ -6,6 +6,8 @@ import { motion } from "framer-motion";
 
 import { Button } from "@amaxa/ui/button";
 
+import { ApplyButton } from "./apply-button";
+
 export default function Hero() {
   return (
     <motion.section className="relative flex flex-row  items-center gap-20 md:min-h-[375px]">
@@ -31,9 +33,7 @@ export default function Hero() {
               </Button>
             </Link>
 
-            <a href="/apply">
-              <Button className="h-12 px-5">Apply Now</Button>
-            </a>
+            <ApplyButton />
           </div>
         </div>
         <p className="mt-8 font-mono text-xs text-[#707070]">

apps/website/src/app/(marketing)/_components/new-hero.tsx

@@ -5,6 +5,8 @@ import { cn } from "@amaxa/ui";
 import { Badge } from "@amaxa/ui/badge";
 import { Button } from "@amaxa/ui/button";
 
+import { ApplyButton } from "./apply-button";
+
 export function Hero() {
   return (
     <div className="my-10 flex w-full flex-col justify-center gap-1 px-3 py-4 text-center md:my-20 md:p-6">
@@ -46,9 +48,7 @@ export function Hero() {
               </Button>
             </Link>
 
-            <a href="/apply">
-              <Button className="h-12 px-5">Apply Now</Button>
-            </a>
+            <ApplyButton />
           </div>
         </div>
       </div>

apps/website/src/app/(marketing)/about-us/_components/program-info.tsx

@@ -16,6 +16,8 @@ import {
   Users,
 } from "lucide-react";
 
+import { ApplyButton } from "../../_components/apply-button";
+
 const InfoCard = ({
   icon: Icon,
   title,
@@ -175,12 +177,7 @@ export default function ProgramInfo() {
         animate={{ opacity: 1 }}
         transition={{ delay: 0.7, duration: 0.5 }}
       >
-        <Link
-          href="/apply"
-          className="inline-flex items-center rounded-full border border-transparent bg-primary px-6 py-3 text-lg font-medium text-white shadow-sm transition-all duration-200 hover:scale-105 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-        >
-          Apply Now <ArrowRight className="ml-2 h-5 w-5" />
-        </Link>
+        <ApplyButton />
       </motion.div>
     </div>
   );

apps/website/src/app/_analytics/capture.tsx

@@ -16,7 +16,7 @@ export default function PostHogPageView() {
       if (searchParams.toString()) {
         url = url + `?${searchParams.toString()}`;
       }
-      posthog.capture("$pageview", {
+      posthog.capture("user_apply", {
         $current_url: url,
       });
     }

apps/website/src/app/provides/posthog.tsx

@@ -13,6 +13,7 @@ if (typeof window !== "undefined") {
     capture_pageleave: true, // Enable pageleave capture
   });
 }
+
 export function CSPostHogProvider({ children }: { children: React.ReactNode }) {
   return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
 }

apps/website/src/components/platform-hero.tsx

@@ -8,6 +8,7 @@ import { useInView } from "framer-motion";
 
 import { Button } from "@amaxa/ui/button";
 
+import { ApplyButton } from "~/app/(marketing)/_components/apply-button";
 import { TextShimmer } from "./text-shimmer";
 
 export default function PlatformHero() {
@@ -33,9 +34,7 @@ export default function PlatformHero() {
         amplify
         <br className="hidden md:block" /> what you can achive.
       </p>
-      <Link href="/apply">
-        <Button>Apply Now!</Button>
-      </Link>
+      <ApplyButton />
       <div
         ref={ref}
         className="animate-fade-up relative mt-[8rem] opacity-0 [--animation-delay:400ms] [perspective:2000px] after:absolute after:inset-0 after:z-50 after:[background:linear-gradient(to_top,hsl(var(--background))_30%,transparent)]"