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.
2026-06-30 02:49:50 +03:30
parent 37c7cebf92
commit 454d27f37e
1 changed files with 79 additions and 79 deletions
@@ -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
   ═══════════════════════════════════════════════ *@