admin/FrontOffice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a11a3765b8a1fd2cd8a820a504c8f02bbea54a57
FrontOffice/src/FrontOffice.Main/Pages/Index.razor
T
masoodafar-web be78bc683a
Build and Deploy to Kubernetes / build-and-deploy (push) Successful in 6m33s
Details
refactor: migrate Landing page to SitePageSettings system 
- Index.razor.cs: load landing SettingsJson via SitePageSettingsService
- PopulateFromSettings(): parse trustBadges, steps, features, stats, testimonials, faqs from DB
- ResolveIcon(): dynamically resolve MudBlazor icons from icon name strings
- Index.razor: make hero text, section titles, CTA dynamic with fallback defaults
- All hardcoded data preserved as fallbacks when DB is unavailable
2026-02-17 23:17:09 +03:30

344 lines
19 KiB
Plaintext
Raw Blame History

@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">
🌿 پلتفرم سلامت‌محور فروش و تیم‌سازی
</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>
@* ═══════════════════════════════════════════════
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>
Reference in New Issue View Git Blame Copy Permalink