feat(frontend): add card-to-iban interface

frontend/app/app.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const config = useRuntimeConfig()
+</script>
+
+<template>
+  <div class="min-h-dvh">
+    <header class="border-border bg-surface h-14 border-b shadow-[0_1px_2px_rgba(0,0,0,.03)]">
+      <div class="mx-auto flex h-full w-full max-w-[1120px] items-center px-4 sm:px-6 lg:px-8">
+        <BrandLogo />
+      </div>
+    </header>
+
+    <main class="mx-auto w-full max-w-[760px] px-4 py-10 sm:px-6 sm:py-14">
+      <section aria-labelledby="page-title">
+        <p class="text-brand mb-2 text-sm font-bold">سرویس تبدیل کارت به شبا</p>
+        <h1 id="page-title" class="text-foreground text-2xl leading-[1.5] font-extrabold sm:text-3xl">
+          شماره شبا را سریع و مطمئن پیدا کنید
+        </h1>
+        <p class="text-muted mt-3 max-w-[620px] text-sm leading-8 sm:text-[15px]">
+          استعلام مستقیماً از سرویس زرین‌هاب انجام می‌شود. شماره کامل کارت در گزارش‌ها یا پاسخ عمومی نگهداری نمی‌شود.
+        </p>
+      </section>
+
+      <div class="mt-7 sm:mt-8">
+        <CardConverter :api-base-url="config.public.apiBaseUrl" />
+      </div>
+
+      <p class="text-muted mt-5 flex items-start gap-2 text-xs leading-6">
+        <svg viewBox="0 0 24 24" class="mt-0.5 size-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />
+          <path d="m9 12 2 2 4-4" />
+        </svg>
+        برای حفاظت از اطلاعات بانکی، فقط نسخه پوشیده‌شده شماره کارت در سوابق فنی ثبت می‌شود.
+      </p>
+    </main>
+  </div>
+</template>