feat(web): add "Nasıl çalışır" 3-step band to pricing page

Cold visitors landing straight on /pricing had no product context. Added a
compact 3-step band between the credibility strip and FAQ: enter the chassis
number -> see the parts (OEM codes, diagrams, compatible parts) -> pick the
right part by comparing prices. Grounded in the actual product, no ordering
claims.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/src/messages/en.json

@@ -443,6 +443,15 @@
     "yearlySave": "· 2 months free",
     "getStarted": "Start Free",
     "pageTitle": "Pricing — Sase.tr | Chassis Search Plans",
+    "how": {
+      "title": "How it works",
+      "s1t": "Enter the chassis number",
+      "s1d": "Paste the 17-digit VIN / chassis number.",
+      "s2t": "See the parts",
+      "s2d": "OEM codes, diagrams and compatible parts appear in seconds.",
+      "s3t": "Pick the right part",
+      "s3d": "Compare prices and find the right part in one go — no wrong orders."
+    },
     "faq": {
       "title": "Frequently asked questions",
       "q1": "How does the free trial work?",

apps/web/src/messages/tr.json

@@ -443,6 +443,15 @@
     "yearlySave": "· 2 ay bedava",
     "getStarted": "Ücretsiz Başla",
     "pageTitle": "Fiyatlandırma — Sase.tr | Şase Sorgulama Planları",
+    "how": {
+      "title": "Nasıl çalışır",
+      "s1t": "Şase numarasını gir",
+      "s1d": "17 haneli VIN/şase numarasını yapıştır.",
+      "s2t": "Parçaları gör",
+      "s2d": "Saniyeler içinde OEM kodları, şemalar ve uyumlu parçalar listelensin.",
+      "s3t": "Doğru parçayı seç",
+      "s3d": "Fiyatları karşılaştır, doğru parçayı tek seferde bul — yanlış sipariş yok."
+    },
     "faq": {
       "title": "Sık sorulan sorular",
       "q1": "Ücretsiz deneme nasıl çalışır?",

apps/web/src/routes/__tests__/pricing-how.test.tsx

@@ -0,0 +1,30 @@
+/**
+ * Tests the pricing "Nasıl çalışır" 3-step band that gives cold visitors
+ * product context (enter VIN -> see parts -> pick the right part).
+ */
+
+import { render } from "@testing-library/react";
+import { vi } from "vitest";
+
+vi.mock("@/lib/i18n", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    locale: "tr",
+    setLocale: vi.fn(),
+  }),
+}));
+
+import { PricingHowItWorks } from "@/routes/pricing";
+
+describe("PricingHowItWorks", () => {
+  test("renders the title and all three numbered steps", () => {
+    const { container } = render(<PricingHowItWorks />);
+    const text = container.textContent ?? "";
+    expect(text).toContain("pricing.how.title");
+    for (let i = 1; i <= 3; i++) {
+      expect(text).toContain(`pricing.how.s${i}t`);
+      expect(text).toContain(`pricing.how.s${i}d`);
+      expect(text).toContain(String(i)); // numbered badge
+    }
+  });
+});

apps/web/src/routes/pricing.tsx

@@ -144,12 +144,37 @@ function PricingPage() {
           <CredibilityStrip />
         </div>
 
+        <PricingHowItWorks />
+
         <PricingFaq />
       </main>
     </div>
   );
 }
 
+export function PricingHowItWorks() {
+  const { t } = useTranslation();
+  const steps = [1, 2, 3] as const;
+  return (
+    <section className="mx-auto mt-20 max-w-5xl">
+      <h2 className="text-center text-2xl font-bold">{t("pricing.how.title")}</h2>
+      <div className="mt-8 grid gap-6 sm:grid-cols-3">
+        {steps.map((i) => (
+          <div key={i} className="rounded-2xl border border-border bg-muted/20 p-6 text-center">
+            <div className="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-primary font-bold text-primary-foreground">
+              {i}
+            </div>
+            <h3 className="mt-4 font-semibold">{t(`pricing.how.s${i}t`)}</h3>
+            <p className="mt-2 text-sm leading-6 text-muted-foreground">
+              {t(`pricing.how.s${i}d`)}
+            </p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
 export function PricingFaq() {
   const { t } = useTranslation();
   const ids = [1, 2, 3, 4, 5, 6] as const;