admin/FrontOffice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
MeysamMoghaddam
2025-10-07 00:39:38 +03:30
parent 8c03d00a4b
commit b26225d8a6
15 changed files with 646 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
src/FrontOffice.Main/Pages/Index.razor
View File

@@ -3,140 +3,229 @@
<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">
<!-- 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>
<MudText Typo="Typo.h3" Class="fw-700 lh-tight mb-1 hero-title">
ساخت شبکه‌های هوشمند با فرصت
</MudText>
<MudText Typo="Typo.subtitle1" Class="muted mb-6">
پلن باینری، شجره‌نامه و گزارش‌های کارمزدی شفاف — همه در یک پنل بلِیزر.
</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 Row="true" Spacing="2" Class="mb-2">
<MudButton Color="Color.Primary" OnClick="@(() => Navigation.NavigateTo("#pricing"))">مشاهده قیمت‌ها</MudButton>
<MudButton Variant="Variant.Outlined" Color="Color.Inherit" OnClick="@(() => Navigation.NavigateTo("#features"))">معرفی پکیج‌ها</MudButton>
</MudStack>
</MudItem>
<MudItem xs="12" md="6">
<MudPaper Elevation="8" Class="pa-0 rounded-2xl hero-media">
<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-2xl" />
<div class="hero-overlay"></div>
<div class="hero-badge px-2 pb-2">
<MudText Typo="Typo.subtitle2">نمای لحظه‌ای</MudText>
<MudText Typo="Typo.caption" Class="muted">۱۲۸۴ عضو فعال · ‎$۴۸,۹۷۰‎ پرداختی ماه گذشته</MudText>
</div>
</MudPaper>
</MudItem>
</MudGrid>
</MudContainer>
</section>
<!-- STATS -->
<section class="stats-strip">
<MudContainer MaxWidth="MaxWidth.Large" Class="py-8">
<MudGrid Spacing="2" Justify="Justify.SpaceAround">
<MudItem xs="6" md="3">
<MudPaper Outlined="true" Class="pa-4 rounded-lg">
<MudText Typo="Typo.h4" Align="Align.Center" Class="fw-700">+۵۰٪</MudText>
<MudText Typo="Typo.caption" HtmlTag="div" Align="Align.Center" Color="Color.Info">رشد میانگین شبکه</MudText>
</MudPaper>
</MudItem>
<MudItem xs="6" md="3">
<MudPaper Outlined="true" Class="pa-4 rounded-lg text-center">
<MudText Typo="Typo.h4" Align="Align.Center" Class="fw-700">۹۹٫۹٪</MudText>
<MudText Typo="Typo.caption" HtmlTag="div" Align="Align.Center" Color="Color.Info">آپ‌تایم سرویس</MudText>
</MudPaper>
</MudItem>
<MudItem xs="6" md="3">
<MudPaper Outlined="true" Class="pa-4 rounded-lg text-center">
<MudText Typo="Typo.h4" Align="Align.Center" Class="fw-700">۳ روز</MudText>
<MudText Typo="Typo.caption" HtmlTag="div" Align="Align.Center" Color="Color.Info">میانگین زمان استقرار</MudText>
</MudPaper>
</MudItem>
<MudItem xs="6" md="3">
<MudPaper Outlined="true" Class="pa-4 rounded-lg text-center">
<MudText Typo="Typo.h4" Align="Align.Center" Class="fw-700">+۲۰ کشور</MudText>
<MudText Typo="Typo.caption" HtmlTag="div" Align="Align.Center" Color="Color.Info">پوشش ارسال کد</MudText>
</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 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-1">@(p.Title)</MudText>
<MudText Typo="Typo.body2" Class="muted mb-2">@(p.Body)</MudText>
<MudList T="string" Dense="true">
@foreach (var item in p.Items)
{
<MudListItem T="string" Value="@item">
<MudIcon Icon="@Icons.Material.Filled.Verified" Size="Size.Small" Class="ml-2" />
@item
</MudListItem>
}
</MudList>
</div>
</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="pa-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 T="string" Value="@item">
<MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Small" Class="ml-2" />
@(item)
</MudListItem>
}
</MudList>
</MudCardContent>
<MudCardActions Class="pa-4 pt-0 d-flex justify-center">
<MudButton Color="Color.Primary" FullWidth="true" Variant="@(p.Highlight ? Variant.Filled : Variant.Outlined)">انتخاب پکیج</MudButton>
</MudCardActions>
</MudCard>
</MudItem>
}
</MudGrid>
</MudContainer>
</section>
<!-- TESTIMONIALS -->
<section id="testimonials" class="py-14 testimonials">
<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">
<MudItem xs="12" md="6">
<MudPaper Elevation="2" Class="rounded-2xl pa-5">
<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.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>
<MudText Typo="Typo.body2">
«با فرصت، محاسبهٔ کارمزدها و پایش تیم‌ها بدون اکسل و دردسر انجام می‌شود.»
</MudText>
</MudStack>
</MudPaper>
</MudContainer>
</section>
</MudItem>
<MudItem xs="12" md="6">
<MudPaper Elevation="2" Class="rounded-2xl pa-5">
<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="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>
<div class="mx-auto max-w-800">
<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>
</div>
</MudContainer>
</section>
<!-- CTA -->
<section id="contact" class="py-14">
<MudContainer MaxWidth="MaxWidth.Medium" Class="text-center">
<MudPaper Elevation="2" Class="pa-4 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>