feat: full FrontOffice updates - discount store, blog, payment gateway, UI improvements
Build and Deploy to Kubernetes / build-and-deploy (push) Failing after 4m55s
Build and Deploy to Kubernetes / build-and-deploy (push) Failing after 4m55s
- Discount store pages (products, cart, orders, order detail) - Blog pages and services - Payment gateway callback page - AppImage component, EmptyState, LoadingState, PageHeader - DiscountCartService, DiscountOrderService, DiscountProductService - BlogCategoryService, BlogPostService, SitePageService, ImageCacheService - PhoneVerifyForm component - Profile Hub page - UI/UX improvements across all pages - landing.js for homepage - Config and routing updates
This commit is contained in:
masoodafar-web
@@ -1,354 +1,343 @@
|
||||
@attribute [Route(RouteConstants.Main.MainPage)]
|
||||
@inject NavigationManager Navigation
|
||||
@inject IJSRuntime JS
|
||||
|
||||
<PageTitle>صفحه اصلی</PageTitle>
|
||||
<PageTitle>صفحه اصلی | کارا بازار سلامت</PageTitle>
|
||||
|
||||
<!-- HERO -->
|
||||
<section id="hero" class="hero-section">
|
||||
<MudContainer MaxWidth="MaxWidth.Large" Class="py-16">
|
||||
<MudGrid Justify="Justify.Center" Spacing="3">
|
||||
<MudItem xs="12" md="6">
|
||||
<MudChip T="string" Color="Color.Secondary" Variant="Variant.Filled" Class="mb-3">پیشنهاد ویژه برای شروع</MudChip>
|
||||
<MudStack Spacing="2">
|
||||
<MudText Typo="Typo.h1">
|
||||
با دعوت از دوستان خود، از خریدهای واقعی پاداش بگیرید
|
||||
</MudText>
|
||||
<MudText Typo="Typo.body1" Class="mud-text-secondary mb-6">
|
||||
ثبتنام آسان، تجربهٔ سریع و شفاف. همین امروز حساب بساز و با دعوت دوستانت، امتیاز و پاداش دریافت کن.
|
||||
</MudText>
|
||||
@* ═══════════════════════════════════════════════
|
||||
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>
|
||||
|
||||
<MudStack Row="true" Spacing="3" Class="mb-2">
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Primary"
|
||||
Size="Size.Large"
|
||||
Class="mud-ripple rounded-pill"
|
||||
OnClick="@(() => Navigation.NavigateTo("/pricing"))">مشاهده قیمتها</MudButton>
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
Size="Size.Large"
|
||||
Class="mud-ripple rounded-pill"
|
||||
OnClick="@(() => NavigateToRegistrationWizard())">شروع کن</MudButton>
|
||||
</MudStack>
|
||||
<MudDivider Class="my-2" Style="width: 90%;" />
|
||||
<MudStack Row="true" Spacing="1">
|
||||
<MudChip T="string"
|
||||
Color="Color.Info"
|
||||
Variant="Variant.Outlined"
|
||||
Class="mb-3">ثبتنام زیر ۲ دقیقه</MudChip>
|
||||
<MudChip T="string"
|
||||
Color="Color.Info"
|
||||
Variant="Variant.Outlined"
|
||||
Class="mb-3">پشتیبانی ۷×۲۴</MudChip>
|
||||
<MudChip T="string"
|
||||
Color="Color.Info"
|
||||
Variant="Variant.Outlined"
|
||||
Class="mb-3">پرداخت ایمن</MudChip>
|
||||
<MudText Typo="Typo.h1" Class="hero-title" Style="max-width:680px;">
|
||||
رشد تیم، فروش واقعی، پاداش شفاف
|
||||
</MudText>
|
||||
|
||||
<MudText Typo="Typo.body1" Class="hero-subtitle" Style="max-width:520px;">
|
||||
با دعوت از دوستان، از خریدهای واقعی محصولات سلامت پاداش بگیرید. ثبتنام سریع، داشبورد لحظهای.
|
||||
</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">
|
||||
شروع رایگان
|
||||
</MudButton>
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Class="rounded-pill hero-cta-outline"
|
||||
Size="Size.Large"
|
||||
OnClick="@(() => Navigation.NavigateTo("/blog"))">
|
||||
آخرین اخبار
|
||||
</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>
|
||||
</MudItem>
|
||||
</MudPaper>
|
||||
</MudContainer>
|
||||
</section>
|
||||
}
|
||||
|
||||
<MudItem xs="12" md="6">
|
||||
<MudPaper Class="pa-8 rounded-xl" Style="background: radial-gradient(600px 280px at 120% 0, #daccff 0, transparent 60%), radial-gradient(600px 280px at -10% 100%, #ffe2f2 0, transparent 60%), linear-gradient(180deg, #fff, #fbfaff);">
|
||||
<MudImage Src="images/team-meeting.jpg"
|
||||
Alt="جلسه تیم فروش"
|
||||
ObjectFit="ObjectFit.Cover"
|
||||
ObjectPosition="ObjectPosition.Center"
|
||||
Style="width:100%"
|
||||
Class="rounded-xl" />
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
@* ═══════════════════════════════════════════════
|
||||
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">سه گام تا شروع</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>
|
||||
<MudStack Spacing="4">
|
||||
|
||||
<!-- WHYUS -->
|
||||
<section class="whyus-section">
|
||||
<MudContainer MaxWidth="MaxWidth.Large" Class="whyus-section">
|
||||
|
||||
<MudText Typo="Typo.h4" GutterBottom="true">
|
||||
چرا کاربران ما را انتخاب میکنند؟
|
||||
</MudText>
|
||||
<MudText Typo="Typo.subtitle1" Class="mud-text-secondary mb-8">
|
||||
سه دلیل روشن برای شروع امروز.
|
||||
@* ═══════════════════════════════════════════════
|
||||
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">چرا کارا بازار سلامت؟</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">
|
||||
|
||||
<MudItem xs="12" sm="6" md="4">
|
||||
<MudCard Class="feature-card rounded-xl pa-4" Outlined="true">
|
||||
<MudStack>
|
||||
<MudStack Row="true">
|
||||
<MudIconButton Icon="@Icons.Material.Outlined.VerifiedUser"
|
||||
Variant="Variant.Outlined"
|
||||
Color="Color.Primary"
|
||||
Size="Size.Small" />
|
||||
<MudText Typo="Typo.h6" Align="Align.Center" Class="mb-2">ثبتنام سریع و ساده</MudText>
|
||||
</MudStack>
|
||||
|
||||
<MudText Class="ps-10 mud-text-secondary">
|
||||
در چند گام کوتاه، حسابت را بساز و شروع کن.
|
||||
</MudText>
|
||||
</MudStack>
|
||||
</MudCard>
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12" sm="6" md="4">
|
||||
<MudCard Class="feature-card rounded-xl pa-4" Outlined="true">
|
||||
<MudStack>
|
||||
<MudStack Row="true">
|
||||
<MudIconButton Icon="@Icons.Material.Outlined.StarBorder"
|
||||
Variant="Variant.Outlined"
|
||||
Color="Color.Primary"
|
||||
Size="Size.Small" />
|
||||
<MudText Typo="Typo.h6" Align="Align.Center" Class="mb-2">مزایا و پاداشهای شفاف</MudText>
|
||||
</MudStack>
|
||||
|
||||
<MudText Class="ps-10 mud-text-secondary">
|
||||
قوانین روشن، دسترسی آسان به سوابق و گزارشها.
|
||||
</MudText>
|
||||
</MudStack>
|
||||
</MudCard>
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12" sm="6" md="4">
|
||||
<MudCard Class="feature-card rounded-xl pa-4" Outlined="true">
|
||||
<MudStack>
|
||||
<MudStack Row="true">
|
||||
<MudIconButton Icon="@Icons.Material.Outlined.Devices"
|
||||
Variant="Variant.Outlined"
|
||||
Color="Color.Primary"
|
||||
Size="Size.Small" />
|
||||
<MudText Typo="Typo.h6" Align="Align.Center" Class="mb-2">اپلیکیشن واکنشگرا</MudText>
|
||||
</MudStack>
|
||||
|
||||
<MudText Class="ps-10 mud-text-secondary">
|
||||
تجربهای روان در موبایل و دسکتاپ.
|
||||
</MudText>
|
||||
</MudStack>
|
||||
</MudCard>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
|
||||
</MudContainer>
|
||||
</section>
|
||||
|
||||
@* <!-- FEATURES: معرفی پکیجها -->
|
||||
<section id="features" class="py-20">
|
||||
<MudContainer MaxWidth="MaxWidth.Large">
|
||||
<MudText Typo="Typo.h4" GutterBottom="true">
|
||||
پکیجهای سرمایه گذاری
|
||||
</MudText>
|
||||
<MudText Typo="Typo.subtitle1" Class="mud-text-secondary mb-8">
|
||||
بر اساس اندازهٔ تیم خود انتخاب کنید.
|
||||
</MudText>
|
||||
@if (_isLoadingPackages)
|
||||
<MudGrid Spacing="3" Justify="Justify.Center">
|
||||
@foreach (var (icon, title, desc, delay) in _features)
|
||||
{
|
||||
<MudStack AlignItems="AlignItems.Center" Class="py-8">
|
||||
<MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
|
||||
<MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">در حال بارگذاری پکیجها...</MudText>
|
||||
</MudStack>
|
||||
<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>
|
||||
}
|
||||
else if (_packs.Any())
|
||||
</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)
|
||||
{
|
||||
<MudGrid Spacing="4" Justify="Justify.Center" Class="stretch-grid">
|
||||
@foreach (var p in _packs)
|
||||
{
|
||||
<MudItem xs="12" md="4" Class="d-flex">
|
||||
<MudCard>
|
||||
<MudCardMedia Image="@p.Image"
|
||||
Title="@p.Title"
|
||||
Height="300" />
|
||||
<MudCardContent>
|
||||
<MudText Typo="Typo.h5" Class="mb-3">@(p.Title)</MudText>
|
||||
@((MarkupString)p.Body)
|
||||
</MudCardContent>
|
||||
<MudCardActions Class="ma-2">
|
||||
<MudText Typo="Typo.h5"
|
||||
Color="Color.Success"
|
||||
Align="Align.End">@(p.Price.ToThousands().ToCurrencyUnitIRT())</MudText>
|
||||
<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 />
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
OnClick="@(() => NavigateToPackage(p.Id))">مشاهده جزئیات</MudButton>
|
||||
</MudCardActions>
|
||||
</MudCard>
|
||||
</MudItem>
|
||||
}
|
||||
</MudGrid>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudStack AlignItems="AlignItems.Center" Class="py-8">
|
||||
<MudText Typo="Typo.body1" Class="mud-text-secondary">هیچ پکیجی یافت نشد.</MudText>
|
||||
</MudStack>
|
||||
}
|
||||
</MudContainer>
|
||||
</section>
|
||||
*@
|
||||
<!-- STATS -->
|
||||
<section class="stats-strip">
|
||||
<MudContainer MaxWidth="MaxWidth.Large">
|
||||
<MudText Typo="Typo.h4" Align="Align.Center" GutterBottom="true">
|
||||
کارا بازار سلامت چطور کار میکند؟
|
||||
</MudText>
|
||||
<MudText Typo="Typo.subtitle1" Align="Align.Center" Class="mud-text-secondary mb-8">
|
||||
سه گام روشن تا شروع یک ماجراجویی جدید
|
||||
</MudText>
|
||||
<MudGrid>
|
||||
<MudItem xs="12" lg="6">
|
||||
<MudStack AlignItems="AlignItems.Start">
|
||||
<MudPaper Outlined="true" Class="pa-6 rounded-xl">
|
||||
<MudTimeline>
|
||||
<MudTimelineItem Color="Color.Info" Size="Size.Small">
|
||||
<ItemOpposite>
|
||||
<MudText Color="Color.Info" Typo="Typo.h5">ثبتنام</MudText>
|
||||
</ItemOpposite>
|
||||
<ItemContent>
|
||||
<MudText Color="Color.Info" Typo="Typo.h6" GutterBottom="true">مرحله اول</MudText>
|
||||
<MudText>یک حساب بساز و وارد شو.</MudText>
|
||||
</ItemContent>
|
||||
</MudTimelineItem>
|
||||
|
||||
<MudTimelineItem Color="Color.Success" Size="Size.Small">
|
||||
<ItemOpposite>
|
||||
<MudText Color="Color.Success" Typo="Typo.h5">دعوت دوستان</MudText>
|
||||
</ItemOpposite>
|
||||
<ItemContent>
|
||||
<MudText Align="Align.End" Color="Color.Success" Typo="Typo.h6" GutterBottom="true">مرحله دوم</MudText>
|
||||
<MudText Align="Align.End">لینک دعوتت را به اشتراک بگذار.</MudText>
|
||||
</ItemContent>
|
||||
</MudTimelineItem>
|
||||
|
||||
<MudTimelineItem Color="Color.Error" Size="Size.Small">
|
||||
<ItemOpposite>
|
||||
<MudText Color="Color.Error" Typo="Typo.h5">دریافت پاداش</MudText>
|
||||
</ItemOpposite>
|
||||
<ItemContent>
|
||||
<MudText Color="Color.Error" Typo="Typo.h6" GutterBottom="true">مرحله سوم</MudText>
|
||||
<MudText>از خریدهای واقعی دوستانت پاداش بگیر.</MudText>
|
||||
</ItemContent>
|
||||
</MudTimelineItem>
|
||||
</MudTimeline>
|
||||
<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>
|
||||
</MudStack>
|
||||
</MudItem>
|
||||
<MudItem xs="1">
|
||||
<MudDivider Vertical="true" />
|
||||
</MudItem>
|
||||
<MudItem xs="12" lg="5" Class="d-flex align-center">
|
||||
<MudStack>
|
||||
<MudGrid Spacing="4" Justify="Justify.SpaceAround">
|
||||
<MudItem xs="6">
|
||||
<MudPaper Elevation="2" Class="pa-4 rounded-xl ">
|
||||
<MudText Typo="Typo.h4" Align="Align.Center" Color="Color.Success">+۵۰٪</MudText>
|
||||
<MudText Typo="Typo.caption" HtmlTag="div" Align="Align.Center" Color="Color.Info">رشد میانگین تیم</MudText>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
<MudItem xs="6">
|
||||
<MudPaper Elevation="2" Class="pa-4 rounded-xl text-center">
|
||||
<MudText Typo="Typo.h4" Align="Align.Center" Color="Color.Primary">۹۹٫۹٪</MudText>
|
||||
<MudText Typo="Typo.caption" HtmlTag="div" Align="Align.Center" Color="Color.Info">آپتایم سرویس</MudText>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
<MudItem xs="6">
|
||||
<MudPaper Elevation="2" Class="pa-4 rounded-xl text-center">
|
||||
<MudText Typo="Typo.h4" Align="Align.Center" Color="Color.Warning">۳ روز</MudText>
|
||||
<MudText Typo="Typo.caption" HtmlTag="div" Align="Align.Center" Color="Color.Info">میانگین زمان استقرار</MudText>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
<MudItem xs="6">
|
||||
<MudPaper Elevation="2" Class="pa-4 rounded-xl text-center">
|
||||
<MudText Typo="Typo.h4" Align="Align.Center" Color="Color.Secondary">+۲۰ کشور</MudText>
|
||||
<MudText Typo="Typo.caption" HtmlTag="div" Align="Align.Center" Color="Color.Info">پوشش ارسال کد</MudText>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudStack>
|
||||
</MudItem>
|
||||
|
||||
</MudItem>
|
||||
}
|
||||
</MudGrid>
|
||||
|
||||
</MudContainer>
|
||||
</section>
|
||||
|
||||
<!-- TESTIMONIALS -->
|
||||
<section id="testimonials" class="py-20 testimonials">
|
||||
<MudContainer MaxWidth="MaxWidth.Large">
|
||||
<MudText Typo="Typo.h4" Align="Align.Center" GutterBottom="true">
|
||||
اعتماد مشتریان
|
||||
</MudText>
|
||||
<MudText Typo="Typo.subtitle1" Align="Align.Center" Class="mud-text-secondary mb-8">
|
||||
بخشی از تجربهٔ استفاده از «کارا بازار سلامت».
|
||||
</MudText>
|
||||
<MudGrid Spacing="3" Justify="Justify.Center">
|
||||
<MudItem xs="12" md="6">
|
||||
<MudPaper Elevation="4" Class=" pa-5 ">
|
||||
<MudStack Spacing="2">
|
||||
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
|
||||
<MudAvatar>
|
||||
<MudImage ObjectFit="ObjectFit.Cover"
|
||||
ObjectPosition="ObjectPosition.Center"
|
||||
Src="images/avatar1.jpg"></MudImage>
|
||||
</MudAvatar>
|
||||
<div>
|
||||
<MudText Typo="Typo.subtitle2">شرکت سینا نت</MudText>
|
||||
<MudText Typo="Typo.overline" Class="mud-text-secondary">مدیر عملیات</MudText>
|
||||
</div>
|
||||
</MudStack>
|
||||
<MudText Typo="Typo.body2">
|
||||
«با کارا بازار سلامت، محاسبهٔ کارمزدها و پایش تیمها بدون اکسل و دردسر انجام میشود.»
|
||||
</MudText>
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12" md="6">
|
||||
<MudPaper Elevation="4" Class=" pa-5 ">
|
||||
<MudStack Spacing="2">
|
||||
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
|
||||
<MudAvatar>
|
||||
<MudImage ObjectFit="ObjectFit.Cover"
|
||||
ObjectPosition="ObjectPosition.Center"
|
||||
Src="images/avatar2.jpg"></MudImage>
|
||||
</MudAvatar>
|
||||
<div>
|
||||
<MudText Typo="Typo.subtitle2">هولدینگ آریانا</MudText>
|
||||
<MudText Typo="Typo.overline" Class="mud-text-secondary">مدیر فروش</MudText>
|
||||
</div>
|
||||
</MudStack>
|
||||
<MudText Typo="Typo.body2">
|
||||
«شجرهنامهٔ بصری و گزارشهای دقیق باعث شد رشد تیم را لحظهای ببینیم.»
|
||||
</MudText>
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
|
||||
</MudGrid>
|
||||
</MudContainer>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section id="faq" class="mb-6">
|
||||
<MudContainer MaxWidth="MaxWidth.Large">
|
||||
<MudText Typo="Typo.h4" Align="Align.Center" GutterBottom="true">
|
||||
سوالات متداول
|
||||
</MudText>
|
||||
<MudText Typo="Typo.subtitle1" Align="Align.Center" Class="mud-text-secondary mb-8">
|
||||
پاسخ به سوالات رایج شما.
|
||||
</MudText>
|
||||
<div class="mx-auto max-w-800">
|
||||
<MudExpansionPanels Square="false" Class=" ">
|
||||
@foreach (var q in _faqs)
|
||||
{
|
||||
<MudExpansionPanel Text="@q.Q">
|
||||
<MudText Typo="Typo.body2">@q.A</MudText>
|
||||
</MudExpansionPanel>
|
||||
}
|
||||
</MudExpansionPanels>
|
||||
<div class="text-center mt-6">
|
||||
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Class="rounded-pill"
|
||||
Href="/blog">
|
||||
مشاهده همه مقالات
|
||||
</MudButton>
|
||||
</div>
|
||||
</MudContainer>
|
||||
</section>
|
||||
}
|
||||
|
||||
</MudStack>
|
||||
@* ═══════════════════════════════════════════════
|
||||
6. TESTIMONIALS
|
||||
═══════════════════════════════════════════════ *@
|
||||
<section class="section-landing">
|
||||
<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 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">سوالات متداول</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">
|
||||
آماده شروع هستید؟
|
||||
</MudText>
|
||||
<MudText Typo="Typo.body1" Align="Align.Center" Class="hero-subtitle">
|
||||
همین الان ثبتنام کنید و از مزایای کارا بازار سلامت بهرهمند شوید.
|
||||
</MudText>
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Size="Size.Large"
|
||||
Class="rounded-pill mt-2 hero-cta-primary"
|
||||
OnClick="NavigateToRegistrationWizard">
|
||||
شروع رایگان
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
</div>
|
||||
</MudContainer>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user