feat(FN-278): add yearly_toggle_clicked PostHog events and 4-col skeleton grid

- Track yearly_toggle_clicked PostHog event on billing period toggle (monthly/yearly)
- Update skeleton grid from 2-col to 4-col layout with additional skeleton cards
- Add regression tests verifying analytics tracking and skeleton grid rendering

Fusion-Task-Id: FN-278

apps/web/src/routes/dashboard/subscription/__tests__/index.test.tsx

@@ -410,6 +410,17 @@ describe("rendering", () => {
       renderPage({ isLoading: true });
       expect(screen.queryByText("subscription.plans.brand1.name")).not.toBeInTheDocument();
     });
+
+    it("FN-278: renders 4 skeleton cards in a 4-column grid matching plan comparison layout", () => {
+      renderPage({ isLoading: true });
+      // The skeleton grid should have lg:grid-cols-4 class
+      const grid = document.querySelector(".grid.gap-4");
+      expect(grid).toBeInTheDocument();
+      expect(grid?.className).toContain("lg:grid-cols-4");
+      // Should contain exactly 4 skeleton cards
+      const skeletonCards = grid?.querySelectorAll(".animate-pulse");
+      expect(skeletonCards?.length).toBe(4);
+    });
   });
 });
 
@@ -664,6 +675,21 @@ describe("trust and i18n", () => {
       fireEvent.click(screen.getByText("subscription.startTrial"));
       expect(mockCapture).toHaveBeenCalledWith("trial_started");
     });
+
+    it("FN-278: fires yearly_toggle_clicked event when switching to yearly billing", () => {
+      renderPage();
+      fireEvent.click(screen.getByRole("button", { name: "common.yearly" }));
+      expect(mockCapture).toHaveBeenCalledWith("yearly_toggle_clicked", { period: "yearly" });
+    });
+
+    it("FN-278: fires yearly_toggle_clicked event when switching to monthly billing", () => {
+      renderPage();
+      // Switch to yearly first so we can test switching back to monthly
+      fireEvent.click(screen.getByRole("button", { name: "common.yearly" }));
+      mockCapture.mockClear();
+      fireEvent.click(screen.getByRole("button", { name: "common.monthly" }));
+      expect(mockCapture).toHaveBeenCalledWith("yearly_toggle_clicked", { period: "monthly" });
+    });
   });
 
   describe("i18n key usage (P0-9)", () => {

apps/web/src/routes/dashboard/subscription/index.test.tsx

@@ -306,6 +306,37 @@ describe("P0-1 / P0-2 — Plan card rendering", () => {
     const allBrandsFeature = screen.getAllByText(/tüm marka/i);
     expect(allBrandsFeature.length).toBeGreaterThanOrEqual(1);
   });
+
+  test("FN-278: yearly_toggle_clicked PostHog event fires when switching to yearly", async () => {
+    apiGet.mockResolvedValue(fixtures.noSub);
+    renderWithProviders(<SubscriptionPage />);
+    await waitFor(() => expect(screen.getAllByText("1 Marka").length).toBeGreaterThanOrEqual(1));
+
+    await act(async () => {
+      screen.getByText("Yıllık").click();
+    });
+
+    expect(capture).toHaveBeenCalledWith("yearly_toggle_clicked", { period: "yearly" });
+  });
+
+  test("FN-278: yearly_toggle_clicked PostHog event fires when switching to monthly", async () => {
+    apiGet.mockResolvedValue(fixtures.noSub);
+    renderWithProviders(<SubscriptionPage />);
+    await waitFor(() => expect(screen.getAllByText("1 Marka").length).toBeGreaterThanOrEqual(1));
+
+    // Switch to yearly first
+    await act(async () => {
+      screen.getByText("Yıllık").click();
+    });
+    vi.clearAllMocks();
+
+    // Switch back to monthly
+    await act(async () => {
+      screen.getByText("Aylık").click();
+    });
+
+    expect(capture).toHaveBeenCalledWith("yearly_toggle_clicked", { period: "monthly" });
+  });
 });
 
 // ═══════════════════════════════════════════════════════════════════════════════

apps/web/src/routes/dashboard/subscription/index.tsx

@@ -397,7 +397,9 @@ export function SubscriptionPage() {
     return (
       <div className="mx-auto max-w-5xl space-y-4">
         <Skeleton className="h-8 w-48" />
-        <div className="grid gap-4 md:grid-cols-2">
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <Skeleton className="h-48 w-full" />
+          <Skeleton className="h-48 w-full" />
           <Skeleton className="h-48 w-full" />
           <Skeleton className="h-48 w-full" />
         </div>
@@ -864,7 +866,10 @@ export function SubscriptionPage() {
           variant={billingPeriod === "monthly" ? "default" : "outline"}
           size="sm"
           data-faro-user-action-name="billing-monthly"
-          onClick={() => setBillingPeriod("monthly")}
+          onClick={() => {
+            setBillingPeriod("monthly");
+            capture("yearly_toggle_clicked", { period: "monthly" });
+          }}
         >
           {t("common.monthly")}
         </Button>
@@ -872,7 +877,10 @@ export function SubscriptionPage() {
           variant={billingPeriod === "yearly" ? "default" : "outline"}
           size="sm"
           data-faro-user-action-name="billing-yearly"
-          onClick={() => setBillingPeriod("yearly")}
+          onClick={() => {
+            setBillingPeriod("yearly");
+            capture("yearly_toggle_clicked", { period: "yearly" });
+          }}
         >
           {t("common.yearly")}
         </Button>