masoodafar-web
454d27f37e
Build and Deploy to Kubernetes / build-and-deploy (push) Has been cancelled
- Introduced a "How It Works" section with a three-step guide to enhance user onboarding. - Added a "Features" section showcasing six key features with icons to highlight the platform's benefits. - Implemented a "Stats" section displaying counter cards for key metrics, improving the overall presentation of information on the landing page. These changes enhance the user experience by providing clear and engaging content that guides users through the platform's offerings.
517 lines
30 KiB
Plaintext
517 lines
30 KiB
Plaintext
@attribute [Route(RouteConstants.Main.MainPage)]
|
|
@inject IJSRuntime JS
|
|
|
|
<PageTitle>صفحه اصلی | کارا بازار سلامت</PageTitle>
|
|
|
|
@* ═══════════════════════════════════════════════
|
|
1. HERO — Bold, minimal, centered
|
|
═══════════════════════════════════════════════ *@
|
|
<section class="hero-gradient py-12 py-md-16">
|
|
<MudContainer MaxWidth="MaxWidth.Medium">
|
|
<MudStack AlignItems="AlignItems.Center" Spacing="4" Class="text-center">
|
|
<MudChip T="string" Color="Color.Default" Variant="Variant.Filled"
|
|
Class="pulse-chip hero-chip-glass" Size="Size.Small">
|
|
باشگاه مشتریان KBS کارا بازار سلامت
|
|
</MudChip>
|
|
|
|
<MudText Typo="Typo.h1" Class="hero-title" Style="max-width:680px;">
|
|
@(_pageData?.HeroTitle ?? "رشد تیم، فروش واقعی، پاداش شفاف")
|
|
</MudText>
|
|
|
|
<MudText Typo="Typo.body1" Class="hero-subtitle" Style="max-width:520px;">
|
|
@(_pageData?.HeroSubtitle ?? "با دعوت از دوستان، از خریدهای واقعی محصولات سلامت پاداش بگیرید. ثبتنام سریع، داشبورد لحظهای.")
|
|
</MudText>
|
|
|
|
<MudStack Row="true" Spacing="2" Class="mt-2 flex-wrap" Justify="Justify.Center">
|
|
<MudButton Variant="Variant.Filled"
|
|
Class="rounded-pill hero-cta-primary"
|
|
Size="Size.Large"
|
|
OnClick="NavigateToRegistrationWizard">
|
|
@(_settings?.HeroButtonPrimaryText ?? "شروع رایگان")
|
|
</MudButton>
|
|
<MudButton Variant="Variant.Outlined"
|
|
Class="rounded-pill hero-cta-outline"
|
|
Size="Size.Large"
|
|
OnClick="@(() => Navigation.NavigateTo("/blog"))">
|
|
@(_settings?.HeroButtonSecondaryText ?? "آخرین اخبار")
|
|
</MudButton>
|
|
</MudStack>
|
|
|
|
@* ── Trust badges ── *@
|
|
<MudStack Row="true" Spacing="4" Class="mt-4 flex-wrap" Justify="Justify.Center" AlignItems="AlignItems.Center">
|
|
@foreach (var badge in _trustBadges)
|
|
{
|
|
<MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
|
|
<MudIcon Icon="@badge.Icon" Size="Size.Small" Style="color:rgba(255,255,255,.7);" />
|
|
<MudText Typo="Typo.caption" Style="color:rgba(255,255,255,.8);">@badge.Text</MudText>
|
|
</MudStack>
|
|
}
|
|
</MudStack>
|
|
</MudStack>
|
|
</MudContainer>
|
|
</section>
|
|
|
|
@* ═══════════════════════════════════════════════
|
|
1b. FEATURED POST BANNER — below hero
|
|
═══════════════════════════════════════════════ *@
|
|
@if (_latestPosts.Any())
|
|
{
|
|
var featured = _latestPosts.First();
|
|
<section class="py-4" style="background:var(--mud-palette-surface);">
|
|
<MudContainer MaxWidth="MaxWidth.Medium">
|
|
<MudPaper Elevation="1" Class="landing-blog-banner rounded-xl cursor-pointer pa-3"
|
|
@onclick="() => NavigateToPost(featured.Slug)">
|
|
<MudStack Row="true" Spacing="3" AlignItems="AlignItems.Center">
|
|
@if (!string.IsNullOrWhiteSpace(featured.ThumbnailUrl))
|
|
{
|
|
<AppImage Path="@featured.ThumbnailUrl"
|
|
Alt="@featured.Title"
|
|
ObjectFit="ObjectFit.Cover"
|
|
Class="landing-blog-thumb"
|
|
Fallback="@Icons.Material.Filled.Article" />
|
|
}
|
|
else
|
|
{
|
|
<MudAvatar Variant="Variant.Filled" Color="Color.Primary" Size="Size.Large" Class="rounded-lg" Style="min-width:64px;">
|
|
<MudIcon Icon="@Icons.Material.Filled.Article" />
|
|
</MudAvatar>
|
|
}
|
|
<MudStack Spacing="1" Style="flex:1; min-width:0;">
|
|
<MudChip T="string" Size="Size.Small" Variant="Variant.Outlined" Color="Color.Primary">
|
|
🔥 جدیدترین مطلب
|
|
</MudChip>
|
|
<MudText Typo="Typo.subtitle1" Class="landing-blog-title">@featured.Title</MudText>
|
|
@if (!string.IsNullOrWhiteSpace(featured.Summary))
|
|
{
|
|
<MudText Typo="Typo.body2" Class="landing-blog-summary mud-text-secondary">@featured.Summary</MudText>
|
|
}
|
|
</MudStack>
|
|
<MudIcon Icon="@Icons.Material.Filled.ChevronLeft" Class="mud-text-secondary d-none d-sm-flex" />
|
|
</MudStack>
|
|
</MudPaper>
|
|
</MudContainer>
|
|
</section>
|
|
}
|
|
|
|
@* ═══════════════════════════════════════════════
|
|
2. HOW IT WORKS — 3 numbered steps
|
|
═══════════════════════════════════════════════ *@
|
|
<section class="section-landing">
|
|
<MudContainer MaxWidth="MaxWidth.Large">
|
|
<div class="text-center mb-8 fade-in-up">
|
|
<MudText Typo="Typo.h3">@(_settings?.StepsTitle ?? "سه گام تا شروع")</MudText>
|
|
<MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">
|
|
بدون پیچیدگی، سریع و آسان
|
|
</MudText>
|
|
</div>
|
|
|
|
<MudGrid Spacing="4" Justify="Justify.Center">
|
|
@foreach (var (step, i) in _steps.Select((s, i) => (s, i)))
|
|
{
|
|
<MudItem xs="12" sm="4">
|
|
<MudPaper Elevation="0" Class="pa-5 rounded-xl feature-card-v2 text-center fade-in-up" data-delay="@(i * 150)">
|
|
<MudAvatar Size="Size.Large" Color="Color.Primary" Variant="Variant.Filled" Class="mx-auto mb-3 landing-step-num">
|
|
<MudText Typo="Typo.h5" Style="color:#fff;font-weight:800;">@(i + 1)</MudText>
|
|
</MudAvatar>
|
|
<MudText Typo="Typo.h6" Class="mb-1">@step.Title</MudText>
|
|
<MudText Typo="Typo.body2" Class="mud-text-secondary">@step.Desc</MudText>
|
|
</MudPaper>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
</MudContainer>
|
|
</section>
|
|
|
|
@* ═══════════════════════════════════════════════
|
|
3. FEATURES — 6 cards with icons
|
|
═══════════════════════════════════════════════ *@
|
|
<section class="section-landing" style="background:var(--mud-palette-background-gray);">
|
|
<MudContainer MaxWidth="MaxWidth.Large">
|
|
<div class="text-center mb-8 fade-in-up">
|
|
<MudText Typo="Typo.h3">@(_settings?.FeaturesTitle ?? "چرا کارا بازار سلامت؟")</MudText>
|
|
<MudText Typo="Typo.body1" Class="mud-text-secondary mt-2" Style="max-width:540px;margin:0 auto;">
|
|
ابزارهایی ساده و قدرتمند برای رشد کسبوکار شما
|
|
</MudText>
|
|
</div>
|
|
|
|
<MudGrid Spacing="3" Justify="Justify.Center">
|
|
@foreach (var (icon, title, desc, delay) in _features)
|
|
{
|
|
<MudItem xs="12" sm="6" md="4">
|
|
<MudPaper Elevation="0" Class="pa-5 rounded-xl feature-card-v2 fade-in-up" data-delay="@delay">
|
|
<MudStack Spacing="2">
|
|
<MudAvatar Color="Color.Primary" Variant="Variant.Filled" Size="Size.Medium" Class="mb-1">
|
|
<MudIcon Icon="@icon" />
|
|
</MudAvatar>
|
|
<MudText Typo="Typo.h6">@title</MudText>
|
|
<MudText Typo="Typo.body2" Class="mud-text-secondary">@desc</MudText>
|
|
</MudStack>
|
|
</MudPaper>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
</MudContainer>
|
|
</section>
|
|
|
|
@* ═══════════════════════════════════════════════
|
|
4. STATS — Counter cards
|
|
═══════════════════════════════════════════════ *@
|
|
<section class="section-landing">
|
|
<MudContainer MaxWidth="MaxWidth.Medium">
|
|
<MudGrid Spacing="3" Justify="Justify.Center">
|
|
@foreach (var stat in _stats)
|
|
{
|
|
<MudItem xs="6" sm="3">
|
|
<MudPaper Elevation="2" Class="pa-4 rounded-xl stat-card fade-in-up text-center">
|
|
<MudText Class="stat-number" Color="@stat.Color" id="@stat.ElementId">@stat.Display</MudText>
|
|
<MudText Typo="Typo.caption" Class="mud-text-secondary mt-1">@stat.Label</MudText>
|
|
</MudPaper>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
</MudContainer>
|
|
</section>
|
|
|
|
@* ═══════════════════════════════════════════════
|
|
1c. TOP-SELLING REGULAR PRODUCTS
|
|
═══════════════════════════════════════════════ *@
|
|
@if (_loadingTopProducts)
|
|
{
|
|
<section class="section-landing" style="background:var(--mud-palette-background-gray);">
|
|
<MudContainer MaxWidth="MaxWidth.Large">
|
|
<MudStack AlignItems="AlignItems.Center" Class="py-4">
|
|
<MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Small" />
|
|
</MudStack>
|
|
</MudContainer>
|
|
</section>
|
|
}
|
|
else
|
|
{
|
|
@if (_topRegularProducts.Any())
|
|
{
|
|
<section class="section-landing" style="background:var(--mud-palette-background-gray);">
|
|
<MudContainer MaxWidth="MaxWidth.Large">
|
|
<div class="text-center mb-6 fade-in-up">
|
|
<MudText Typo="Typo.h3">محصولات پرفروش فروشگاه</MudText>
|
|
<MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">
|
|
محبوبترین محصولات کارا بازار سلامت
|
|
</MudText>
|
|
</div>
|
|
|
|
<MudGrid Spacing="2" Justify="Justify.FlexStart">
|
|
@foreach (var p in _topRegularProducts)
|
|
{
|
|
<MudItem xs="6" sm="6" md="4">
|
|
<MudCard Class="rounded-lg h-100 d-flex flex-column overflow-hidden landing-product-card"
|
|
Style="cursor:pointer;"
|
|
@onclick="() => NavigateToRegularProduct(p.Id)">
|
|
<MudCardContent Class="d-flex flex-column pa-1 h-100">
|
|
<div style="aspect-ratio:1/1;width:100%;background-image:url('@p.ImageUrl');background-size:cover;background-position:center;border-radius:0.5rem;position:relative;">
|
|
@if (p.RemainingCount <= 0)
|
|
{
|
|
<div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;border-radius:0.5rem;">
|
|
<MudChip T="string" Color="Color.Error" Variant="Variant.Filled" Size="Size.Small">ناموجود</MudChip>
|
|
</div>
|
|
}
|
|
else if (p.RemainingCount <= 5)
|
|
{
|
|
<MudChip T="string" Color="Color.Warning" Variant="Variant.Filled" Size="Size.Small"
|
|
Style="position:absolute;top:8px;right:8px;">
|
|
فقط @p.RemainingCount عدد
|
|
</MudChip>
|
|
}
|
|
</div>
|
|
<div class="pa-1 flex-grow-1 d-flex flex-column justify-space-between">
|
|
<MudText Typo="Typo.subtitle1" Style="display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">@p.Title</MudText>
|
|
@if (_isAuthenticated)
|
|
{
|
|
<MudText Typo="Typo.subtitle2" Color="Color.Primary">@FormatPrice(p.Price)</MudText>
|
|
}
|
|
else
|
|
{
|
|
<MudText Typo="Typo.caption" Class="mud-text-secondary">
|
|
<MudIcon Icon="@Icons.Material.Filled.Lock" Size="Size.Small" Class="me-1"/>برای مشاهده قیمت وارد شوید
|
|
</MudText>
|
|
}
|
|
</div>
|
|
</MudCardContent>
|
|
<MudCardActions Class="mt-auto pa-2" @onclick:stopPropagation="true">
|
|
<MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true"
|
|
StartIcon="@Icons.Material.Filled.AddShoppingCart"
|
|
Disabled="@(p.RemainingCount <= 0)"
|
|
OnClick="@(() => AddRegularToCart(p))">
|
|
@(p.RemainingCount <= 0 ? "ناموجود" : "افزودن به سبد")
|
|
</MudButton>
|
|
</MudCardActions>
|
|
</MudCard>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
|
|
<div class="text-center mt-6">
|
|
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Class="rounded-pill"
|
|
Href="@RouteConstants.Store.Products"
|
|
EndIcon="@Icons.Material.Filled.ArrowBack">
|
|
مشاهده همه محصولات
|
|
</MudButton>
|
|
</div>
|
|
</MudContainer>
|
|
</section>
|
|
}
|
|
|
|
@* ═══════════════════════════════════════════════
|
|
1d. TOP-SELLING DISCOUNT STORE PRODUCTS
|
|
═══════════════════════════════════════════════ *@
|
|
@if (_topDiscountProducts.Any())
|
|
{
|
|
<section class="section-landing">
|
|
<MudContainer MaxWidth="MaxWidth.Large">
|
|
<div class="text-center mb-6 fade-in-up">
|
|
<MudText Typo="Typo.h3">محصولات پرفروش فروشگاه اعتباری</MudText>
|
|
<MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">
|
|
محصولات ویژه اعضای باشگاه با پرداخت اعتباری
|
|
</MudText>
|
|
</div>
|
|
|
|
<MudGrid Spacing="2" Justify="Justify.FlexStart">
|
|
@foreach (var p in _topDiscountProducts)
|
|
{
|
|
<MudItem xs="6" sm="6" md="4">
|
|
<MudCard Class="rounded-lg h-100 d-flex flex-column overflow-hidden landing-product-card"
|
|
Style="cursor:pointer;"
|
|
@onclick="() => NavigateToDiscountProduct(p.Id)">
|
|
<MudCardContent Class="d-flex flex-column pa-1 h-100">
|
|
<div style="aspect-ratio:1/1;width:100%;background-image:url('@(string.IsNullOrWhiteSpace(p.ThumbnailUrl) ? p.ImageUrl : p.ThumbnailUrl)');background-size:cover;background-position:center;border-radius:0.5rem;position:relative;">
|
|
@if (p.RemainingCount <= 0)
|
|
{
|
|
<div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;border-radius:0.5rem;">
|
|
<MudChip T="string" Color="Color.Error" Variant="Variant.Filled" Size="Size.Small">ناموجود</MudChip>
|
|
</div>
|
|
}
|
|
else if (p.RemainingCount <= 5)
|
|
{
|
|
<MudChip T="string" Color="Color.Warning" Variant="Variant.Filled" Size="Size.Small"
|
|
Style="position:absolute;top:8px;right:8px;">
|
|
فقط @p.RemainingCount عدد
|
|
</MudChip>
|
|
}
|
|
@if (p.MaxDiscountPercent > 0)
|
|
{
|
|
<MudChip T="string" Color="Color.Secondary" Variant="Variant.Filled" Size="Size.Small"
|
|
Style="position:absolute;top:8px;left:8px;">
|
|
@p.MaxDiscountPercent% اعتبار
|
|
</MudChip>
|
|
}
|
|
</div>
|
|
<div class="pa-1 flex-grow-1 d-flex flex-column justify-space-between">
|
|
<MudText Typo="Typo.subtitle1" Style="display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">@p.Title</MudText>
|
|
@if (_isAuthenticated)
|
|
{
|
|
<div>
|
|
<MudText Typo="Typo.subtitle2" Color="Color.Primary">@FormatDiscountPrice(p.Price)</MudText>
|
|
<MudText Typo="Typo.overline" Class="mud-text-secondary" Style="font-size:0.6rem;line-height:1;">(+ ارزش افزوده)</MudText>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<MudText Typo="Typo.caption" Class="mud-text-secondary">
|
|
<MudIcon Icon="@Icons.Material.Filled.Lock" Size="Size.Small" Class="me-1"/>برای مشاهده قیمت وارد شوید
|
|
</MudText>
|
|
}
|
|
</div>
|
|
</MudCardContent>
|
|
<MudCardActions Class="mt-auto pa-2" @onclick:stopPropagation="true">
|
|
<MudButton Variant="Variant.Filled" Color="Color.Secondary" FullWidth="true"
|
|
StartIcon="@Icons.Material.Filled.AddShoppingCart"
|
|
Disabled="@(p.RemainingCount <= 0)"
|
|
OnClick="@(() => AddDiscountToCart(p))">
|
|
@(p.RemainingCount <= 0 ? "ناموجود" : "افزودن به سبد")
|
|
</MudButton>
|
|
</MudCardActions>
|
|
</MudCard>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
|
|
<div class="text-center mt-6">
|
|
<MudButton Variant="Variant.Outlined" Color="Color.Secondary" Class="rounded-pill"
|
|
Href="@RouteConstants.DiscountStore.Products"
|
|
EndIcon="@Icons.Material.Filled.ArrowBack">
|
|
مشاهده همه محصولات اعتباری
|
|
</MudButton>
|
|
</div>
|
|
</MudContainer>
|
|
</section>
|
|
}
|
|
}
|
|
|
|
@* ═══════════════════════════════════════════════
|
|
5. LATEST BLOG POSTS
|
|
═══════════════════════════════════════════════ *@
|
|
@if (_latestPosts.Any())
|
|
{
|
|
<section class="section-landing" style="background:var(--mud-palette-background-gray);">
|
|
<MudContainer MaxWidth="MaxWidth.Large">
|
|
<div class="text-center mb-8 fade-in-up">
|
|
<MudText Typo="Typo.h3">آخرین مقالات</MudText>
|
|
<MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">
|
|
جدیدترین مطالب و اخبار کارا بازار سلامت
|
|
</MudText>
|
|
</div>
|
|
|
|
<MudGrid Spacing="4" Justify="Justify.Center">
|
|
@foreach (var post in _latestPosts.Take(2))
|
|
{
|
|
<MudItem xs="12" sm="6" md="6">
|
|
<MudPaper Elevation="1" Class="rounded-xl blog-card-v2 cursor-pointer fade-in-up" Style="overflow:hidden;"
|
|
@onclick="() => NavigateToPost(post.Slug)">
|
|
<div class="blog-thumb" style="height:180px; background:#f0f0f0;">
|
|
@if (!string.IsNullOrWhiteSpace(post.ThumbnailUrl))
|
|
{
|
|
<AppImage Path="@post.ThumbnailUrl"
|
|
Alt="@post.Title"
|
|
ObjectFit="ObjectFit.Cover"
|
|
Style="width:100%; height:180px;" />
|
|
}
|
|
else
|
|
{
|
|
<div style="height:180px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#6366f1,#a78bfa);">
|
|
<MudIcon Icon="@Icons.Material.Filled.Article" Size="Size.Large" Style="color:rgba(255,255,255,.5);" />
|
|
</div>
|
|
}
|
|
</div>
|
|
<div class="pa-4">
|
|
@if (post.Categories.Any())
|
|
{
|
|
<MudChip T="string" Size="Size.Small" Variant="Variant.Outlined" Color="Color.Primary" Class="mb-2">
|
|
@post.Categories.First().Title
|
|
</MudChip>
|
|
}
|
|
<MudText Typo="Typo.h6" Class="mb-1" Style="display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">
|
|
@post.Title
|
|
</MudText>
|
|
@if (!string.IsNullOrWhiteSpace(post.Summary))
|
|
{
|
|
<MudText Typo="Typo.body2" Class="mud-text-secondary mb-2" Style="display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">
|
|
@post.Summary
|
|
</MudText>
|
|
}
|
|
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center" Class="mt-2">
|
|
@if (post.PublishedAt.HasValue)
|
|
{
|
|
<MudText Typo="Typo.caption" Class="mud-text-secondary">
|
|
<MudIcon Icon="@Icons.Material.Filled.CalendarToday" Size="Size.Small" Class="ml-1" />
|
|
@post.PublishedAt.Value.ToString("yyyy/MM/dd")
|
|
</MudText>
|
|
}
|
|
<MudSpacer />
|
|
<MudText Typo="Typo.caption" Class="mud-text-secondary">
|
|
<MudIcon Icon="@Icons.Material.Filled.Visibility" Size="Size.Small" Class="ml-1" />
|
|
@post.ViewCount
|
|
</MudText>
|
|
</MudStack>
|
|
</div>
|
|
</MudPaper>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
|
|
<div class="text-center mt-6">
|
|
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Class="rounded-pill"
|
|
Href="/blog">
|
|
مشاهده همه مقالات
|
|
</MudButton>
|
|
</div>
|
|
</MudContainer>
|
|
</section>
|
|
}
|
|
|
|
@* ═══════════════════════════════════════════════
|
|
6. TESTIMONIALS
|
|
═══════════════════════════════════════════════ *@
|
|
<section class="section-landing">
|
|
<MudContainer MaxWidth="MaxWidth.Large">
|
|
<div class="text-center mb-8 fade-in-up">
|
|
<MudText Typo="Typo.h3">@(_settings?.TestimonialsTitle ?? "اعتماد مشتریان")</MudText>
|
|
<MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">
|
|
بخشی از تجربه استفاده از «کارا بازار سلامت»
|
|
</MudText>
|
|
</div>
|
|
|
|
<MudGrid Spacing="4" Justify="Justify.Center">
|
|
@foreach (var t in _testimonials)
|
|
{
|
|
<MudItem xs="12" md="4">
|
|
<MudPaper Elevation="2" Class="pa-5 rounded-xl testimonial-card fade-in-up" data-delay="@t.Delay">
|
|
<MudStack Spacing="2">
|
|
<MudRating ReadOnly="true" SelectedValue="5" Size="Size.Small" Color="Color.Warning" />
|
|
<MudText Typo="Typo.body2" Class="mud-text-secondary">
|
|
«@t.Quote»
|
|
</MudText>
|
|
<MudDivider Class="my-1" />
|
|
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
|
|
<MudAvatar Size="Size.Small" Color="Color.Primary" Variant="Variant.Filled">
|
|
<MudIcon Icon="@Icons.Material.Filled.Person" Size="Size.Small" />
|
|
</MudAvatar>
|
|
<div>
|
|
<MudText Typo="Typo.subtitle2">@t.Name</MudText>
|
|
<MudText Typo="Typo.overline" Class="mud-text-secondary">@t.Role</MudText>
|
|
</div>
|
|
</MudStack>
|
|
</MudStack>
|
|
</MudPaper>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
</MudContainer>
|
|
</section>
|
|
|
|
@* ═══════════════════════════════════════════════
|
|
7. FAQ
|
|
═══════════════════════════════════════════════ *@
|
|
<section class="section-landing" style="background:var(--mud-palette-background-gray);">
|
|
<MudContainer MaxWidth="MaxWidth.Medium">
|
|
<div class="text-center mb-8 fade-in-up">
|
|
<MudText Typo="Typo.h3">@(_settings?.FaqTitle ?? "سوالات متداول")</MudText>
|
|
<MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">
|
|
پاسخ به سوالات رایج شما
|
|
</MudText>
|
|
</div>
|
|
|
|
<div class="fade-in-up">
|
|
<MudExpansionPanels Elevation="1" Class="rounded-xl">
|
|
@foreach (var q in _faqs)
|
|
{
|
|
<MudExpansionPanel Text="@q.Q">
|
|
<MudText Typo="Typo.body2" Class="mud-text-secondary">@q.A</MudText>
|
|
</MudExpansionPanel>
|
|
}
|
|
</MudExpansionPanels>
|
|
</div>
|
|
</MudContainer>
|
|
</section>
|
|
|
|
@* ═══════════════════════════════════════════════
|
|
8. CTA BANNER
|
|
═══════════════════════════════════════════════ *@
|
|
<section class="section-landing-lg">
|
|
<MudContainer MaxWidth="MaxWidth.Medium">
|
|
<div class="cta-banner pa-8 pa-md-12 fade-in-up">
|
|
<MudStack AlignItems="AlignItems.Center" Spacing="3">
|
|
<MudText Typo="Typo.h3" Align="Align.Center" Class="dash-hero-name">
|
|
@(_settings?.CtaTitle ?? "آماده شروع هستید؟")
|
|
</MudText>
|
|
<MudText Typo="Typo.body1" Align="Align.Center" Class="hero-subtitle">
|
|
@(_settings?.CtaDescription ?? "همین الان ثبتنام کنید و از مزایای کارا بازار سلامت بهرهمند شوید.")
|
|
</MudText>
|
|
<MudButton Variant="Variant.Filled"
|
|
Size="Size.Large"
|
|
Class="rounded-pill mt-2 hero-cta-primary"
|
|
OnClick="NavigateToRegistrationWizard">
|
|
@(_settings?.CtaButtonText ?? "شروع رایگان")
|
|
</MudButton>
|
|
</MudStack>
|
|
</div>
|
|
</MudContainer>
|
|
</section>
|