@defer {
  <div class="w-full min-h-[60svh] p-4 md:p-6">
    <section class="mx-auto max-w-3xl overflow-hidden rounded-2xl border border-surface-200 bg-white">
      <div class="bg-gradient-to-l from-emerald-50 via-teal-50 to-cyan-50 p-5 md:p-7">
        <p class="mb-2 inline-flex items-center rounded-full bg-white px-3 py-1 text-xs font-semibold text-emerald-700">
          {{ brandingInfo.title }}
        </p>
        <span class="block mb-4 text-xl font-bold text-surface-900 md:text-3xl">{{ brandingInfo.fullTitle }}</span>
        <p class="mt-3 max-w-2xl text-sm leading-7 text-surface-700 md:text-base">
          این نسخه برای استفاده روزانه روی دستگاه های PSP بهینه شده است تا عملیات ثبت و صدور صورتحساب‌‌های مالیاتی با
          سرعت بالاتر، پایداری بیشتر و تجربه کاربری ساده تر انجام شود.
        </p>
      </div>

      <div class="grid gap-3 p-4 md:grid-cols-3 md:gap-4 md:p-6">
        <!-- <article class="rounded-xl border border-surface-200 bg-surface-50 p-4">
        <h2 class="mb-2 text-sm font-bold text-surface-900">پایداری در وب ویو</h2>
        <p class="text-sm leading-6 text-surface-700">
          رفتار رابط کاربری برای محیط WebView تنظیم شده تا روی سخت افزارهای ضعیف تر هم اجرای روان تری داشته باشد.
        </p>
      </article> -->

        <article class="rounded-xl border border-surface-200 bg-surface-50 p-4">
          <span class="block mb-4 text-xl font-bold text-surface-900">تمرکز بر سرعت عملیات</span>
          <p class="text-sm leading-6 text-surface-700">
            مسیرهای کلیدی مانند انتخاب کالا، ورود مقادیر و ثبت نهایی برای کاهش تاخیر و افزایش سرعت کاربر بهینه شده اند.
          </p>
        </article>

        <article class="rounded-xl border border-surface-200 bg-surface-50 p-4">
          <span class="block mb-4 text-xl font-bold text-surface-900">سازگار با سناریوهای فروش</span>
          <p class="text-sm leading-6 text-surface-700">
            طراحی این نسخه بر مبنای سناریوهای واقعی فروشگاه انجام شده تا اپراتور با کمترین کلیک فرآیند را تکمیل کند.
          </p>
        </article>
      </div>

      <!-- <div class="mx-4 mb-4 rounded-xl border border-surface-200 bg-surface-50 p-4 md:mx-6">
      <div class="flex flex-wrap items-center justify-between gap-3">
        <div class="text-sm text-surface-700">
          نسخه برنامه:
          <span class="font-semibold text-surface-900">{{ appVersion() }}</span>
        </div>
        <button
          pButton
          type="button"
          [outlined]="!hasUpdate()"
          [disabled]="isCheckingUpdate()"
          (click)="onUpdateCtaClick()"
        >
          {{ updateCtaLabel() }}
        </button>
      </div>
    </div> -->

      <div class="border-t border-surface-200 bg-surface-50 px-4 py-4 md:px-6">
        <p class="text-xs leading-6 text-surface-600 md:text-sm">
          در صورت نیاز به راهنمایی بیشتر، به صفحه‌ی راهنمای استفاده مراجعه کنید یا با پشتیبانی تماس بگیرید.
        </p>
      </div>
    </section>
  </div>
}