From 454d27f37ee285c74b959d95f21f4dbc000fd505 Mon Sep 17 00:00:00 2001
From: masoodafar-web <masoud.afarin.moghaddam@outlook.com>
Date: Tue, 30 Jun 2026 02:49:50 +0330
Subject: [PATCH] feat: add new sections for steps, features, and stats on the
 landing page

- 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.
---
 src/FrontOffice.Main/Pages/Index.razor | 158 ++++++++++++-------------
 1 file changed, 79 insertions(+), 79 deletions(-)

diff --git a/src/FrontOffice.Main/Pages/Index.razor b/src/FrontOffice.Main/Pages/Index.razor
index 51b359f..15d3329 100644
--- a/src/FrontOffice.Main/Pages/Index.razor
+++ b/src/FrontOffice.Main/Pages/Index.razor
@@ -93,6 +93,85 @@
     </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
    ═══════════════════════════════════════════════ *@
@@ -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
    ═══════════════════════════════════════════════ *@