feat(web): Enhance landing page with analytics and improvements

Add PostHog analytics, improve download button, and
optimize routing for join waitlist and Discord links.
Implement Zendesk script and remove unused components.

Author: ComputelessComputer

apps/web/.env.sample

@@ -14,3 +14,8 @@ STRIPE_SECRET_KEY=""
 STRIPE_WEBHOOK_SECRET=""
 
 VITE_STRIPE_PUBLISHABLE_KEY=""
+
+VITE_POSTHOG_API_KEY=""
+VITE_POSTHOG_HOST="https://us.i.posthog.com"
+
+LOOPS_KEY=""

apps/web/package.json

@@ -17,6 +17,7 @@
     "@nangohq/frontend": "^0.69.7",
     "@nangohq/node": "^0.69.7",
     "@netlify/vite-plugin-tanstack-start": "^1.1.8",
+    "@posthog/react": "^1.3.0",
     "@sentry/tanstackstart-react": "^10.22.0",
     "@stripe/stripe-js": "^8.2.0",
     "@supabase/ssr": "^0.7.0",
@@ -37,6 +38,7 @@
     "exa-js": "^1.10.2",
     "lucide-react": "^0.544.0",
     "postgres": "^3.4.7",
+    "posthog-js": "^1.284.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "rehype-autolink-headings": "^7.1.0",

apps/web/src/components/download-button.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@hypr/utils";
 
+import { Icon } from "@iconify-icon/react";
 import { Link } from "@tanstack/react-router";
 
 export function DownloadButton() {
@@ -13,21 +14,8 @@ export function DownloadButton() {
         "transition-all",
       ])}
     >
-      Download now
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth="1.5"
-        stroke="currentColor"
-        className="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-        />
-      </svg>
+      <Icon icon="mdi:apple" className="text-xl mr-2" />
+      Download for Mac
     </Link>
   );
 }

apps/web/src/components/github-open-source.tsx

@@ -141,7 +141,10 @@ export function GitHubOpenSource() {
 
   return (
     <section className="border-t border-neutral-100">
-      <div className="border-b border-neutral-100 bg-neutral-50 h-4" />
+      <div
+        className="border-b border-neutral-100 bg-neutral-50 h-4"
+        style={{ backgroundImage: "url(/patterns/slash.svg)" }}
+      />
       <div className="px-4 py-8">
         <div className="lg:hidden max-w-4xl mx-auto">
           <OpenSourceButton showStars={true} starCount={STARS_COUNT} />
@@ -277,7 +280,10 @@ export function GitHubOpenSource() {
           </div>
         </div>
       </div>
-      <div className="border-t border-neutral-100 bg-neutral-50 h-4" />
+      <div
+        className="border-t border-neutral-100 bg-neutral-50 h-4"
+        style={{ backgroundImage: "url(/patterns/slash.svg)" }}
+      />
     </section>
   );
 }

apps/web/src/components/join-waitlist-button.tsx

@@ -3,7 +3,7 @@ import { cn } from "@hypr/utils";
 export function JoinWaitlistButton() {
   return (
     <a
-      href="https://tally.so/r/mJaRDY"
+      href="/join-waitlist"
       target="_blank"
       rel="noopener noreferrer"
       className={cn([

apps/web/src/components/logo-cloud.tsx

@@ -46,7 +46,7 @@ export function LogoCloud() {
       />
 
       <LogoCard
-        className="border-r border-b border-neutral-100"
+        className="md:border-r border-b border-neutral-100"
         logo={{
           src: "/icons/meta.svg",
           alt: "Meta Logo",

apps/web/src/components/social-card.tsx

@@ -54,8 +54,10 @@ export function SocialCard({
   return (
     <div
       className={cn(
-        "block border border-neutral-100 bg-white p-6 transition-all duration-200 text-left hover:bg-neutral-50",
-        className,
+        [
+          "block border border-neutral-100 bg-white p-6 transition-all duration-200 text-left hover:bg-neutral-50",
+          className,
+        ],
       )}
     >
       <div className="space-y-4 text-left">

apps/web/src/components/video-modal.tsx

@@ -58,20 +58,16 @@ export function VideoModal({ playbackId, isOpen, onClose }: VideoModalProps) {
         className="relative w-full max-w-6xl aspect-video"
         onClick={(e) => e.stopPropagation()}
       >
-        {/* Close button */}
         <button
           onClick={onClose}
           className={cn(
-            "absolute -top-12 right-0 p-2",
-            "text-white hover:text-neutral-300",
-            "transition-colors duration-200",
+            ["absolute -top-12 right-0 p-2", "text-white hover:text-neutral-300", "transition-colors duration-200"],
           )}
           aria-label="Close video"
         >
           <Icon icon="mdi:close" className="text-3xl" />
         </button>
 
-        {/* Video */}
         <MuxPlayer
           ref={playerRef}
           playbackId={playbackId}

apps/web/src/hooks/use-platform.ts

@@ -43,24 +43,28 @@ export function getHeroCTA(platform: Platform): {
   buttonLabel: string;
   showInput: boolean;
   inputPlaceholder: string;
+  subtext: string;
 } {
   if (platform === "mac") {
     return {
       buttonLabel: "Download",
       showInput: false,
       inputPlaceholder: "",
+      subtext: "Free and open-source",
     };
   } else if (platform === "mobile") {
     return {
       buttonLabel: "Remind me",
       showInput: true,
       inputPlaceholder: "Enter your email",
+      subtext: "Get an email reminder that you can check later",
     };
   }
-  // windows, linux, unknown
+
   return {
     buttonLabel: "Join",
     showInput: true,
     inputPlaceholder: "Enter your email",
+    subtext: "Join the waitlist and get notified as soon as the app is released",
   };
 }

apps/web/src/hooks/use-posthog.ts

@@ -0,0 +1,45 @@
+import { usePostHog } from "@posthog/react";
+import { useCallback } from "react";
+
+export { usePostHog };
+
+/**
+ * Hook for type-safe PostHog event tracking
+ */
+export function useAnalytics() {
+  const posthog = usePostHog();
+
+  const track = useCallback(
+    (eventName: string, properties?: Record<string, any>) => {
+      if (!posthog) {
+        return;
+      }
+      posthog.capture(eventName, properties);
+    },
+    [posthog],
+  );
+
+  const identify = useCallback(
+    (userId: string, properties?: Record<string, any>) => {
+      if (!posthog) {
+        return;
+      }
+      posthog.identify(userId, properties);
+    },
+    [posthog],
+  );
+
+  const reset = useCallback(() => {
+    if (!posthog) {
+      return;
+    }
+    posthog.reset();
+  }, [posthog]);
+
+  return {
+    track,
+    identify,
+    reset,
+    posthog,
+  };
+}