refactor(web): share CredibilityStrip across pricing + subscription

Extracted CredibilityStrip out of the subscription route module into
@/components/credibility-strip so the public pricing page can reuse it
without pulling in the heavy dashboard/Stripe/Remotion bundle. Subscription
now imports it (dropping the now-unused Boxes/Hash/Layers/Zap icons); pricing
renders it below the plan cards to justify price with real product facts
(50+ marka, 1M+ parça, OEM, saniyede sonuç, KVKK·SSL). Test import updated.

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

apps/web/src/routes/dashboard/subscription/__tests__/credibility-strip.test.tsx

@@ -15,7 +15,7 @@ vi.mock("@/lib/i18n", () => ({
   }),
 }));
 
-import { CredibilityStrip } from "@/routes/dashboard/subscription/index";
+import { CredibilityStrip } from "@/components/credibility-strip";
 
 describe("CredibilityStrip", () => {
   test("renders all five product-fact items", () => {

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

@@ -1,3 +1,4 @@
+import { CredibilityStrip } from "@/components/credibility-strip";
 import { StripeCheckoutButton } from "@/components/payment/stripe-checkout-button";
 import { CarBrandLogo } from "@/components/ui/car-brand-logo";
 import { api } from "@/lib/api-client";
@@ -30,22 +31,18 @@ import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import {
   AlertTriangle,
   ArrowRight,
-  Boxes,
   Check,
   CheckCircle2,
   Clock,
   CreditCard,
   Crown,
-  Hash,
   Info,
-  Layers,
   Loader2,
   Minus,
   Pencil,
   ShieldCheck,
   Sparkles,
   X,
-  Zap,
 } from "lucide-react";
 import { Suspense, lazy, useEffect, useMemo, useRef, useState } from "react";
 
@@ -957,29 +954,6 @@ function StepCard({
   );
 }
 
-export function CredibilityStrip() {
-  const { t } = useTranslation();
-  const items = [
-    { icon: Layers, key: "brands" },
-    { icon: Boxes, key: "parts" },
-    { icon: Hash, key: "oem" },
-    { icon: Zap, key: "speed" },
-    { icon: ShieldCheck, key: "security" },
-  ] as const;
-  return (
-    <div className="grid grid-cols-2 gap-x-4 gap-y-3 rounded-2xl border border-border bg-muted/20 px-5 py-4 sm:grid-cols-3 lg:grid-cols-5">
-      {items.map(({ icon: Icon, key }) => (
-        <div key={key} className="flex items-center gap-2 text-sm">
-          <Icon className="h-4 w-4 shrink-0 text-primary" />
-          <span className="font-medium leading-5 text-foreground/85">
-            {t(`subscription.credibility.${key}`)}
-          </span>
-        </div>
-      ))}
-    </div>
-  );
-}
-
 export function PlanHelperHint() {
   const { t } = useTranslation();
   return (

apps/web/src/routes/pricing.tsx

@@ -1,3 +1,4 @@
+import { CredibilityStrip } from "@/components/credibility-strip";
 import { SiteHeader } from "@/components/site-header";
 import { usePageMeta } from "@/hooks/use-page-meta";
 import { useTranslation } from "@/lib/i18n";
@@ -138,6 +139,10 @@ function PricingPage() {
             </Card>
           ))}
         </div>
+
+        <div className="mx-auto mt-12 max-w-5xl">
+          <CredibilityStrip />
+        </div>
       </main>
     </div>
   );