perf: lazy load Remotion and PostHog to reduce initial bundle by ~355 KB

- Remotion Player + compositions (SchemaDemo, DashboardDemo, EcommerceDemo)
  replaced with React.lazy wrappers in routes/index.tsx — now split into
  separate chunks loaded only when the landing page sections are visible
- posthog-js static import replaced with a dynamic load() wrapper in
  lib/posthog.ts; all exported functions remain fire-and-forget with the
  same API signature
- subscription/index.tsx updated to use new setPeopleProperties() helper
  instead of the raw posthog instance

Initial chunk: 1,082 KB → 727 KB (-33%), gzip 324 KB → 212 KB

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/src/lib/posthog.ts

@@ -1,24 +1,39 @@
-import posthog from "posthog-js";
+// PostHog — lazily loaded so it doesn't land in the initial bundle.
+// All exported functions are fire-and-forget; analytics loss on failure is acceptable.
 
-let initialized = false;
+type PostHog = import("posthog-js").PostHog;
 
-export function initPostHog() {
-  const key = import.meta.env.VITE_POSTHOG_KEY;
-  if (!key || initialized) return;
+let _ph: PostHog | null = null;
+let _loadPromise: Promise<PostHog> | null = null;
+let _initialized = false;
 
-  posthog.init(key, {
-    api_host: "https://eu.i.posthog.com",
-    person_profiles: "identified_only",
-    capture_pageview: false,
-    capture_pageleave: false,
-    autocapture: false,
-    session_recording: {
-      maskAllInputs: false,
-      maskInputOptions: { password: true },
-    },
+function load(): Promise<PostHog> {
+  if (_ph) return Promise.resolve(_ph);
+  if (_loadPromise) return _loadPromise;
+  _loadPromise = import("posthog-js").then((m) => {
+    _ph = m.default;
+    return _ph;
   });
+  return _loadPromise;
+}
 
-  initialized = true;
+export function initPostHog(): void {
+  const key = import.meta.env.VITE_POSTHOG_KEY;
+  if (!key || _initialized) return;
+  _initialized = true;
+  load().then((ph) => {
+    ph.init(key, {
+      api_host: "https://eu.i.posthog.com",
+      person_profiles: "identified_only",
+      capture_pageview: false,
+      capture_pageleave: false,
+      autocapture: false,
+      session_recording: {
+        maskAllInputs: false,
+        maskInputOptions: { password: true },
+      },
+    });
+  });
 }
 
 export function identifyUser(user: {
@@ -26,26 +41,30 @@ export function identifyUser(user: {
   email: string;
   name: string;
   role: string;
-}) {
-  posthog.identify(user.id, {
-    email: user.email,
-    name: user.name,
-    role: user.role,
+}): void {
+  load().then((ph) => {
+    ph.identify(user.id, {
+      email: user.email,
+      name: user.name,
+      role: user.role,
+    });
   });
 }
 
-export function resetUser() {
-  posthog.reset();
+export function resetUser(): void {
+  load().then((ph) => ph.reset());
 }
 
-export function capture(event: string, properties?: Record<string, unknown>) {
-  posthog.capture(event, properties);
+export function capture(event: string, properties?: Record<string, unknown>): void {
+  load().then((ph) => ph.capture(event, properties));
 }
 
-export function capturePageView(path: string) {
-  posthog.capture("$pageview", {
-    $current_url: window.location.origin + path,
-  });
+export function capturePageView(path: string): void {
+  load().then((ph) =>
+    ph.capture("$pageview", { $current_url: window.location.origin + path }),
+  );
 }
 
-export { posthog };
+export function setPeopleProperties(properties: Record<string, unknown>): void {
+  load().then((ph) => ph.people?.set(properties));
+}