Merge pull request 'dev' (#113) from dev into main

Reviewed-on: #113

apps/web/src/messages/en.json

@@ -696,6 +696,9 @@
     "inputPlaceholder": "Enter VIN (17 characters)",
     "counter": "{count}/17 characters",
     "tryExample": "Try an example VIN →",
+    "activationCardTitle": "Try it now with a sample vehicle",
+    "activationCardHint": "No VIN to hand? See the parts catalog, diagrams and OEM codes in seconds with a sample vehicle.",
+    "activationCardCta": "Decode a sample vehicle",
     "submit": "Decode VIN",
     "errorTitle": "Couldn't decode VIN",
     "errorSubscriptionPrefix": "You have no active subscription. To access vehicle data,",
@@ -789,6 +792,12 @@
       "socialProofLabel": "500+ Businesses Trust Us",
       "title": "Find the Right Part Instantly",
       "subtitle": "Cross-referenced OEM codes from multiple catalogs, always up to date. Enter a VIN and ship the right part the first time.",
+      "lossPillA": "Wrong-part returns cost you thousands every month",
+      "titleA": "End Wrong-Part Returns for Good",
+      "subtitleA": "Enter the customer vehicle's VIN and find the correct OEM part the first time with cross-catalog verification. No returns, no losses — trusted by 500+ businesses. Try it free.",
+      "lossPillB": "Start looking up VINs free — no card required",
+      "titleB": "Find the Customer's Correct Part in Seconds",
+      "subtitleB": "Enter the 17-digit VIN and reach the right OEM codes, part diagrams and prices in seconds. 27 brands, unlimited lookups. Start free — no credit card.",
       "vinPlaceholder": "Example: WVWZZZ1JZ3W597935",
       "searchCta": "Search",
       "decoding": "Decoding...",

apps/web/src/messages/tr.json

@@ -696,6 +696,9 @@
     "inputPlaceholder": "Şase numarasını girin (17 karakter)",
     "counter": "{count}/17 karakter",
     "tryExample": "Örnek şase deneyin →",
+    "activationCardTitle": "Örnek bir araçla hemen dene",
+    "activationCardHint": "Sorgulayacak şase elinde yoksa, örnek bir araçla parça kataloğunu, şemaları ve OEM kodlarını saniyeler içinde gör.",
+    "activationCardCta": "Örnek araçla sorgula",
     "submit": "Şase Çöz",
     "errorTitle": "Şase çözümlenemedi",
     "errorSubscriptionPrefix": "Aktif aboneliğiniz yok. Araç verilerine erişmek için",
@@ -789,6 +792,12 @@
       "socialProofLabel": "500+ İşletme Güveniyor",
       "title": "Doğru Parçayı Anında Bulun",
       "subtitle": "Birden fazla katalogda çapraz sorgulama ile her zaman en güncel OEM kodları. Şase numarasını girin, doğru parçayı ilk seferde gönderin.",
+      "lossPillA": "Yanlış parça iadeleri ayda binlerce TL kaybettiriyor",
+      "titleA": "Yanlış Parça İadelerine Son Verin",
+      "subtitleA": "Müşteri aracının şasesini girin; çapraz katalog doğrulamasıyla doğru OEM parçasını ilk seferde bulun. İade yok, kayıp yok — 500+ işletme güveniyor. Ücretsiz deneyin.",
+      "lossPillB": "Şase sorgulamaya ücretsiz başlayın — kart gerekmez",
+      "titleB": "Müşteri Aracının Doğru Parçasını Saniyede Bulun",
+      "subtitleB": "17 haneli şaseyi girin; doğru OEM kodlarına, parça şemalarına ve fiyatlara saniyeler içinde ulaşın. 27 marka, sınırsız sorgu. Ücretsiz başlayın, kredi kartı istemiyoruz.",
       "vinPlaceholder": "Örnek: WVWZZZ1JZ3W597935",
       "searchCta": "Ara",
       "decoding": "Çözülüyor...",

apps/web/src/routes/__tests__/dashboard-search.test.tsx

@@ -3,6 +3,7 @@ import { vi } from "vitest";
 
 vi.mock("@/lib/posthog", () => ({
   capture: vi.fn(),
+  subscribeFeatureFlag: vi.fn(() => () => {}),
 }));
 
 vi.mock("@/lib/api-client", () => ({

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

@@ -12,6 +12,7 @@ import { vi } from "vitest";
 // Mock the PostHog capture function
 vi.mock("@/lib/posthog", () => ({
   capture: vi.fn(),
+  subscribeFeatureFlag: vi.fn(() => () => {}),
 }));
 
 // Mock the API client used for VIN decode

apps/web/src/routes/dashboard/search.tsx

@@ -5,7 +5,7 @@ import { ApiError, api } from "@/lib/api-client";
 import { startAction } from "@/lib/faro";
 import { useTranslation } from "@/lib/i18n";
 import { KEYS_6, KEYS_17 } from "@/lib/keys";
-import { capture } from "@/lib/posthog";
+import { capture, subscribeFeatureFlag } from "@/lib/posthog";
 import { toast } from "@/lib/toast";
 import { Badge, Button, Input, Label, Separator } from "@sase/ui";
 import { useQuery } from "@tanstack/react-query";
@@ -17,6 +17,9 @@ import { useCallback, useEffect, useRef, useState } from "react";
 
 const VIN_REGEX = /^[A-HJ-NPR-Z0-9]{17}$/;
 
+// Sample VW Golf used by the "try example" affordance + the activation experiment.
+const EXAMPLE_VIN = "WVWZZZ1JZ3W597935";
+
 interface VehicleHistoryItem {
   id: string;
   vin: string;
@@ -160,6 +163,21 @@ function SearchPage() {
     queryFn: () => api.get<VehicleHistoryItem[]>("/vehicles/history?limit=6"),
   });
 
+  // ─── Activation experiment: exp-activation-guided-decode ───────────────────
+  // A prominent one-click "decode a sample vehicle" card vs the tiny fill-only
+  // "try example" link — does it lift the first-decode (activation) rate?
+  // Exposure is scoped to UNACTIVATED users (empty history): reading the flag only
+  // for them keeps power-user decodes out of the metric. undefined → control.
+  const isUnactivated = history !== undefined && history.length === 0;
+  const [activationVariant, setActivationVariant] = useState<string | boolean | undefined>(
+    undefined,
+  );
+  useEffect(() => {
+    if (!isUnactivated) return;
+    return subscribeFeatureFlag("exp-activation-guided-decode", setActivationVariant);
+  }, [isUnactivated]);
+  const showGuidedDecode = isUnactivated && activationVariant === "guided";
+
   // ─── Ctrl+K shortcut ───────────────────────────────────────────────────────
   useEffect(() => {
     function handleKeyDown(e: KeyboardEvent) {
@@ -478,7 +496,7 @@ function SearchPage() {
   }
 
   function fillExampleVin() {
-    setVin("WVWZZZ1JZ3W597935");
+    setVin(EXAMPLE_VIN);
     inputRef.current?.focus();
   }
 
@@ -661,6 +679,29 @@ function SearchPage() {
         </form>
       </div>
 
+      {/* ─── Activation experiment (exp-activation-guided-decode): 1-click first decode ── */}
+      {showGuidedDecode && (
+        <div className="flex flex-col gap-3 rounded-2xl border border-brand/30 bg-brand/5 p-5 sm:flex-row sm:items-center sm:justify-between sm:p-6">
+          <div className="min-w-0">
+            <p className="font-[family-name:var(--font-display)] text-base font-bold">
+              {t("search.activationCardTitle")}
+            </p>
+            <p className="mt-1 text-sm text-muted-foreground">{t("search.activationCardHint")}</p>
+          </div>
+          <Button
+            type="button"
+            onClick={() => {
+              capture("activation_example_decode_clicked", { vin: EXAMPLE_VIN });
+              autoDecode(EXAMPLE_VIN);
+            }}
+            className="h-11 shrink-0 rounded-xl"
+          >
+            <Car className="mr-2 size-4" />
+            {t("search.activationCardCta")}
+          </Button>
+        </div>
+      )}
+
       {/* ─── SECTION 2: Live Preview Card ───────────────────────────────── */}
       {previewLoading && (
         <div className="flex items-center justify-center gap-3 rounded-2xl border border-border bg-background p-6">

apps/web/src/routes/index.tsx

@@ -158,6 +158,7 @@ const RemotionEcommercePlayer = lazy(() =>
   ),
 );
 import { useAuth } from "@/hooks/use-auth";
+import { useFeatureFlag } from "@/hooks/use-feature-flag";
 import { usePageMeta } from "@/hooks/use-page-meta";
 import { ApiError, api } from "@/lib/api-client";
 import { useTranslation } from "@/lib/i18n";
@@ -253,6 +254,10 @@ export const Route = createFileRoute("/")({
 
 export function HomePage() {
   const { t } = useTranslation();
+  // Landing-copy A/B/n (exp-landing-copy): SAME design, CRO copy variants for the
+  // hero pill/title/subtitle. undefined → control. Primary metric: user_signed_up.
+  const landingCopy = useFeatureFlag("exp-landing-copy");
+  const copyV = landingCopy === "variant_a" ? "A" : landingCopy === "variant_b" ? "B" : "";
 
   usePageMeta({
     title: t("landing.meta.title"),
@@ -887,7 +892,7 @@ export function HomePage() {
                 <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-destructive/60 opacity-75" />
                 <span className="relative inline-flex size-2 rounded-full bg-destructive" />
               </span>
-              {t("landing.hero.lossPill")}
+              {t(`landing.hero.lossPill${copyV}`)}
             </div>
 
             {/* Social proof badge */}
@@ -922,11 +927,11 @@ export function HomePage() {
             </div>
 
             <h1 className="mt-6 font-[family-name:var(--font-display)] text-4xl font-bold leading-[1.1] tracking-tight sm:text-5xl lg:text-7xl">
-              {t("landing.hero.title")}
+              {t(`landing.hero.title${copyV}`)}
             </h1>
 
             <p className="mx-auto mt-6 max-w-2xl text-base text-muted-foreground sm:text-lg">
-              {t("landing.hero.subtitle")}
+              {t(`landing.hero.subtitle${copyV}`)}
             </p>
 
             {/* VIN Input */}