feat(index): add TwentyCard credit promo section and integrate portal link

- Introduced a new promotional section for TwentyCard credit on the landing page, featuring details about the service and a button to access the TwentyCard portal.
- Updated the Index.razor.cs file to retrieve the portal URL from configuration and implemented the logic to open the portal in a new tab.
- Enhanced site.css with styling specific to the TwentyCard promo box.

These changes enhance user engagement by promoting the TwentyCard credit option and providing easy access to its portal.

src/FrontOffice.Main/Pages/Index.razor

@@ -93,6 +93,42 @@
     </section>
 }
 
+@* ═══════════════════════════════════════════════
+   1c. TWENTYCARD CREDIT — promo box
+   ═══════════════════════════════════════════════ *@
+<section class="py-4" style="background:var(--mud-palette-surface);">
+    <MudContainer MaxWidth="MaxWidth.Medium">
+        <MudPaper Elevation="0" Class="landing-twentycard-box rounded-xl pa-4 pa-md-5 fade-in-up">
+            <MudStack Row="true" Spacing="3" AlignItems="AlignItems.Start" Class="flex-wrap">
+                <MudAvatar Color="Color.Info" Variant="Variant.Filled" Size="Size.Large" Class="rounded-lg" Style="min-width:56px;">
+                    <MudIcon Icon="@Icons.Material.Filled.AccountBalance" />
+                </MudAvatar>
+                <MudStack Spacing="2" Style="flex:1; min-width:220px;">
+                    <MudText Typo="Typo.h6">تأمین اعتبار ۲۰کارت</MudText>
+                    <MudText Typo="Typo.body2" Class="mud-text-secondary">
+                        با تأمین اعتبار از طریق ۲۰کارت می‌توانید بدون پرداخت نقدی کامل، هزینه خرید پکیج و محصولات در کارا بازار را پوشش دهید.
+                        فرایند درخواست و تأیید اعتبار در پنل ۲۰کارت انجام می‌شود و پس از آن پرداخت از همان مسیر در دسترس است.
+                        این روش برای کسانی مناسب است که می‌خواهند سریع‌تر وارد مسیر عضویت و خرید شوند.
+                    </MudText>
+                    <MudText Typo="Typo.body2">
+                        بعد از دریافت وام، می‌توانید در کارا بازار از باشگاه مشتریان استفاده کنید و با فروش و دعوت، توسعه سرمایه داشته باشید.
+                    </MudText>
+                    <div class="mt-1">
+                        <MudButton Variant="Variant.Filled"
+                                   Color="Color.Info"
+                                   Class="rounded-pill"
+                                   StartIcon="@Icons.Material.Filled.OpenInNew"
+                                   Disabled="@string.IsNullOrWhiteSpace(_twentyCardPortalUrl)"
+                                   OnClick="OpenTwentyCardPortal">
+                            ورود به سایت ۲۰کارت
+                        </MudButton>
+                    </div>
+                </MudStack>
+            </MudStack>
+        </MudPaper>
+    </MudContainer>
+</section>
+
 @* ═══════════════════════════════════════════════
    2. HOW IT WORKS — 3 numbered steps
    ═══════════════════════════════════════════════ *@

src/FrontOffice.Main/Pages/Index.razor.cs

@@ -1,5 +1,6 @@
 using FrontOffice.Main.Utilities;
 using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Configuration;
 using Microsoft.JSInterop;
 using MudBlazor;
 
@@ -16,8 +17,10 @@ public partial class Index : IDisposable
     [Inject] private DiscountCartService DiscountCart { get; set; } = default!;
     [Inject] private GuestActionGate GuestGate { get; set; } = default!;
     [Inject] private VATService VAT { get; set; } = default!;
+    [Inject] private IConfiguration Configuration { get; set; } = default!;
 
     private bool _isAuthenticated;
+    private string _twentyCardPortalUrl = string.Empty;
 
     // ── CMS page data ──
     private PageSettingsDto? _pageData;
@@ -49,6 +52,7 @@ public partial class Index : IDisposable
     {
         MainService.OnChangeHandler += OnStateChanged;
         _isAuthenticated = await AuthService.IsAuthenticatedAsync();
+        _twentyCardPortalUrl = Configuration["TwentyCard:CreditPortalUrl"] ?? string.Empty;
 
         // Load landing page settings from CMS
         try
@@ -298,6 +302,12 @@ public partial class Index : IDisposable
         Navigation.NavigateTo(RouteConstants.Registration.Wizard);
     }
 
+    private async Task OpenTwentyCardPortal()
+    {
+        if (string.IsNullOrWhiteSpace(_twentyCardPortalUrl)) return;
+        await JS.InvokeVoidAsync("open", _twentyCardPortalUrl, "_blank");
+    }
+
     private void NavigateToPost(string slug)
     {
         Navigation.NavigateTo($"/blog/{slug}");

src/FrontOffice.Main/wwwroot/css/site.css

@@ -1617,6 +1617,12 @@ html, body {
     overflow: hidden;
 }
 
+/* ── Landing TwentyCard credit promo ── */
+.landing-twentycard-box {
+    background: var(--ds-info-soft);
+    border: 1px solid rgba(59, 130, 246, 0.22);
+}
+
 /* ── Register Wizard Unified ── */
 .wizard-section {
     min-height: 80vh;