FrontOffice/src/FrontOffice.Main/Pages/Index.razor

@attribute [Route(RouteConstants.Main.MainPage)]
@inject NavigationManager Navigation

<PageTitle>صفحه اصلی</PageTitle>

<!-- Hero -->
        <section id="hero" class="hero-section">
            <MudContainer MaxWidth="MaxWidth.Large" Class="py-16">
                <MudGrid Justify="Justify.Center" AlignItems="AlignItems.Center" Spacing="3">
                    <MudItem xs="12" md="6">
                <MudChip T="string" Color="Color.Primary" Variant="Variant.Filled" Class="mb-3">جدید</MudChip>
                <MudText Typo="Typo.h2" Class="fw-700 lh-tight mb-2">
                            ساخت شبکه‌های هوشمند با فورسات
                        </MudText>
                        <MudText Typo="Typo.subtitle1" Class="muted mb-6">
                            پلن‌های باینری، شجره‌نامه و گزارش کارمزد ماهانه — همه در یک اپ بلazor.
                        </MudText>

                        <MudStack Row="true" Spacing="2" Class="mb-2">
                            <MudTextField @bind-Value="_email" For="@(() => _email)" Placeholder="ایمیل کاری شما" Variant="Variant.Outlined" Class="max-w-56" />
                            <MudButton Color="Color.Primary" OnClick="@JoinWaitlist">عضویت در لیست انتظار</MudButton>
                        </MudStack>
                        <MudText Typo="Typo.caption" Class="muted">بدون اسپم؛ هر زمان بخواهید لغو کنید.</MudText>
                    </MudItem>

                    <MudItem xs="12" md="6">
                        <MudPaper Elevation="6" Class="p-4 rounded-2xl preview-card">
                            <MudStack Spacing="2">
                                <MudText Typo="Typo.h6">نمای لحظه‌ای</MudText>
                                <MudDivider />
                                <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
                                    <MudAvatar Color="Color.Secondary" Icon="@Icons.Material.Filled.Groups" />
                                    <MudText Typo="Typo.subtitle2">اعضای فعال</MudText>
                                    <MudSpacer />
                                    <MudText Typo="Typo.subtitle2" Class="fw-700">1,284</MudText>
                                </MudStack>
                                <MudProgressLinear Value="72" Color="Color.Primary" Class="my-1" />
                                <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
                                    <MudAvatar Color="Color.Tertiary" Icon="@Icons.Material.Filled.Timeline" />
                                    <MudText Typo="Typo.subtitle2">پرداختی ماهانه</MudText>
                                    <MudSpacer />
                                    <MudText Typo="Typo.subtitle2" Class="fw-700">$48,970</MudText>
                                </MudStack>
                                <MudProgressLinear Value="54" Color="Color.Secondary" Class="my-1" />
                            </MudStack>
                        </MudPaper>
                    </MudItem>
                </MudGrid>
            </MudContainer>
        </section>

        <!-- Features -->
        <section id="features" class="py-14">
            <MudContainer MaxWidth="MaxWidth.Large">
                <MudText Typo="Typo.h4" Align="Align.Center" Class="mb-1 fw-700">هرچه نیاز دارید</MudText>
                <MudText Typo="Typo.subtitle1" Align="Align.Center" Class="muted mb-8">سریع، آماده تولید و زیبا از ابتدا.</MudText>

                <MudGrid Spacing="3" Justify="Justify.Center" Class="stretch-grid">
                    @foreach (var f in _features)
                    {
                        <MudItem xs="12" md="4" Class="d-flex">
                            <MudPaper Elevation="2" Class="p-5 rounded-2xl d-flex flex-column flex-grow-1">
                                <MudStack Spacing="1">
                                    <MudAvatar Color="@f.Color" Icon="@f.Icon" />
                                    <MudText Typo="Typo.h6">@f.Title</MudText>
                                    <MudText Typo="Typo.body2" Class="muted">@f.Body</MudText>
                                </MudStack>
                            </MudPaper>
                        </MudItem>
                    }
                </MudGrid>
            </MudContainer>
        </section>

        <!-- Pricing -->
        <section id="pricing" class="py-14">
            <MudContainer MaxWidth="MaxWidth.Large">
                <MudText Typo="Typo.h4" Align="Align.Center" Class="mb-1 fw-700">قیمت‌گذاری ساده</MudText>
                <MudText Typo="Typo.subtitle1" Align="Align.Center" Class="muted mb-8">رایگان شروع کنید و در صورت نیاز ارتقا دهید.</MudText>

                <MudGrid Spacing="3" Justify="Justify.Center">
                    @foreach (var p in _plans)
                    {
                        <MudItem xs="12" md="4" Class="d-flex">
                            <MudCard Class="rounded-2xl d-flex flex-column flex-grow-1">
                                <MudCardContent Class="p-6">
                                    <MudText Typo="Typo.overline" Class="muted">@p.Name</MudText>
                                    <MudText Typo="Typo.h4" Class="fw-700 mb-2">@p.Price</MudText>
                                    <MudList T="string" Dense="true">
                                        @foreach (var item in p.Features)
                                        {
                                            <MudListItem>
                                                <MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Small" Class="ml-2" />
                                                @item
                                            </MudListItem>
                                        }
                                    </MudList>
                                </MudCardContent>
                                <MudCardActions Class="p-6 pt-0">
                                    <MudButton Color="Color.Primary" Variant="@(p.Highlight ? Variant.Filled : Variant.Outlined)" Class="w-100">انتخاب پلن</MudButton>
                                </MudCardActions>
                            </MudCard>
                        </MudItem>
                    }
                </MudGrid>
            </MudContainer>
        </section>

        <!-- FAQ -->
        <section id="faq" class="py-14">
            <MudContainer MaxWidth="MaxWidth.Large">
                <MudText Typo="Typo.h4" Align="Align.Center" Class="mb-1 fw-700">سوالات متداول</MudText>
                <MudText Typo="Typo.subtitle1" Align="Align.Center" Class="muted mb-8">پاسخ به سوالات رایج راه‌اندازی و صورتحساب.</MudText>

                <MudGrid>
                    <MudItem xs="12" md="8" mdOffset="2">
                        <MudExpansionPanels Elevation="1" Square="false" Class="rounded-2xl">
                            @foreach (var q in _faqs)
                            {
                                <MudExpansionPanel Text="@q.Q">
                                    <MudText Typo="Typo.body2">@q.A</MudText>
                                </MudExpansionPanel>
                            }
                        </MudExpansionPanels>
                    </MudItem>
                </MudGrid>
            </MudContainer>
        </section>

        <!-- CTA -->
        <section id="contact" class="py-14">
            <MudContainer MaxWidth="MaxWidth.Medium" Class="text-center">
                <MudPaper Elevation="2" Class="p-8 rounded-2xl">
                    <MudText Typo="Typo.h5" Class="fw-700 mb-2">آماده‌ی راه‌اندازی هستید؟</MudText>
                    <MudText Typo="Typo.body1" Class="muted mb-4">ایمیل‌تان را بگذارید تا دسترسی زودهنگام بگیرید.</MudText>
                    <MudStack Row="true" Spacing="2" Justify="Justify.Center">
                        <MudTextField @bind-Value="_email" For="@(() => _email)" Placeholder="you@company.com" Variant="Variant.Outlined" Class="max-w-56" />
                        <MudButton Color="Color.Primary" OnClick="@JoinWaitlist">درخواست دسترسی</MudButton>
                    </MudStack>
                </MudPaper>
            </MudContainer>
        </section>