feat: add new sections for steps, features, and stats on the landing page
Build and Deploy to Kubernetes / build-and-deploy (push) Has been cancelled
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.
This commit is contained in:
masoodafar-web
@@ -93,6 +93,85 @@
|
|||||||
</section>
|
</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
|
1c. TOP-SELLING REGULAR PRODUCTS
|
||||||
═══════════════════════════════════════════════ *@
|
═══════════════════════════════════════════════ *@
|
||||||
@@ -266,85 +345,6 @@ else
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@* ═══════════════════════════════════════════════
|
|
||||||
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
|
5. LATEST BLOG POSTS
|
||||||
═══════════════════════════════════════════════ *@
|
═══════════════════════════════════════════════ *@
|
||||||
|
|||||||
Reference in New Issue
Block a user