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" 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>

                    <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">شروع کن</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>
                    </MudStack>

                </MudStack>
            </MudItem>

            <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="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=1200&auto=format&fit=crop"
                              Alt="جلسه تیم فروش و شبکه‌سازی"
                              ObjectFit="ObjectFit.Cover"
                              ObjectPosition="ObjectPosition.Center"
                              Style="width:100%"
                              Class="rounded-xl" />
                </MudPaper>
            </MudItem>
        </MudGrid>
    </MudContainer>
</section>
<MudStack Spacing="4">

    <!-- WHYUS -->
    <section class="whyus-section">
        <MudContainer MaxWidth="MaxWidth.Large" Class="whyus-section py-12">

            <MudText Typo="Typo.h4" GutterBottom="true">
                چرا کاربران ما را انتخاب می‌کنند؟
            </MudText>
            <MudText Typo="Typo.subtitle1" Class="mud-text-secondary mb-8">
                سه دلیل روشن برای شروع امروز.
            </MudText>

            <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)
            {
                <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>
            }
            else if (_packs.Any())
            {
                <MudGrid Spacing="3" Justify="Justify.Center" Class="stretch-grid">
                    @foreach (var p in _packs)
                    {
                        <MudItem xs="12" md="4" Class="d-flex">
                            <MudPaper Elevation="2" Class="rounded-2xl d-flex flex-column flex-grow-1 overflow-hidden">
                                <MudImage Src="@p.Image"
                                          Alt="@p.Title"
                                          Height="300"
                                          ObjectFit="ObjectFit.Cover"
                                          ObjectPosition="ObjectPosition.Center"
                                          Class="feature-img" />
                                <div class="pa-5">
                                    <MudText Typo="Typo.h6" Class="mb-2">@(p.Title)</MudText>
                                    @((MarkupString)p.Body)                                    
                                </div>
                            </MudPaper>
                        </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="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>
                        </MudPaper>
                    </MudStack>
                </MudItem>
                <MudItem xs="1">
                    <MudDivider Vertical="true" />
                </MudItem>
                <MudItem xs="5" Class="d-flex align-center">
                    <MudStack>
                        <MudGrid Spacing="4" Justify="Justify.SpaceAround">
                            <MudItem xs="6">
                                <MudPaper Elevation="2" Class="pa-4 mud-elevation-2 rounded-xl mud-theme-surface">
                                    <MudText Typo="Typo.h4" Align="Align.Center" Class="mud-typography-subtitle1" 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 mud-elevation-2 rounded-xl mud-theme-surface text-center">
                                    <MudText Typo="Typo.h4" Align="Align.Center" Class="mud-typography-subtitle1" 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 mud-elevation-2 rounded-xl mud-theme-surface text-center">
                                    <MudText Typo="Typo.h4" Align="Align.Center" Class="mud-typography-subtitle1" 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 mud-elevation-2 rounded-xl mud-theme-surface text-center">
                                    <MudText Typo="Typo.h4" Align="Align.Center" Class="mud-typography-subtitle1" Color="Color.Secondary">+۲۰ کشور</MudText>
                                    <MudText Typo="Typo.caption" HtmlTag="div" Align="Align.Center" Color="Color.Info">پوشش ارسال کد</MudText>
                                </MudPaper>
                            </MudItem>
                        </MudGrid>
                    </MudStack>
                </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="mud-elevation-4 rounded-2xl pa-5 mud-theme-surface">
                        <MudStack Spacing="2">
                            <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                <MudAvatar>
                                    <MudImage ObjectFit="ObjectFit.Cover"
                                              ObjectPosition="ObjectPosition.Center"
                                              Src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?q=80&w=256&auto=format&fit=crop"></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="mud-elevation-4 rounded-2xl pa-5 mud-theme-surface">
                        <MudStack Spacing="2">
                            <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                <MudAvatar>
                                    <MudImage ObjectFit="ObjectFit.Cover"
                                              ObjectPosition="ObjectPosition.Center"
                                              Src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=256&auto=format&fit=crop"></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="rounded-2xl mud-theme-surface">
                    @foreach (var q in _faqs)
                    {
                        <MudExpansionPanel Text="@q.Q">
                            <MudText Typo="Typo.body2">@q.A</MudText>
                            </MudExpansionPanel>
                    }
                </MudExpansionPanels>
            </div>
        </MudContainer>
    </section>

</MudStack>