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 16:20:07 +03:30
parent 64a9387330
commit 8488f5d8fb
2 changed files with 327 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,226 +6,335 @@
<!-- HERO --> <!-- HERO -->
<section id="hero" class="hero-section"> <section id="hero" class="hero-section">
<MudContainer MaxWidth="MaxWidth.Large" Class="py-16"> <MudContainer MaxWidth="MaxWidth.Large" Class="py-16">
<MudGrid Justify="Justify.Center" AlignItems="AlignItems.Center" Spacing="3"> <MudGrid Justify="Justify.Center" Spacing="3">
<MudItem xs="12" md="6"> <MudItem xs="12" md="6">
<MudChip T="string" Color="Color.Primary" Variant="Variant.Filled" Class="mb-3">جدید</MudChip> <MudChip T="string" Color="Color.Secondary" Variant="Variant.Filled" Class="mb-3">پیشنهاد ویژه برای شروع</MudChip>
<MudText Typo="Typo.h3" Class="mud-typography-subtitle1 lh-tight mb-1 hero-title"> <MudStack Spacing="2">
ساخت شبکه‌های هوشمند با فرصت <MudText Typo="Typo.h1">
</MudText> با دعوت از دوستان خود، از خریدهای واقعی پاداش بگیرید
<MudText Typo="Typo.subtitle1" Class="mud-text-secondary mb-6"> </MudText>
پلن باینری، شجره‌نامه و گزارش‌های کارمزدی شفاف — همه در یک پنل بلِیزر. <MudText Typo="Typo.body1" Class="mud-text-secondary mb-6">
</MudText> ثبت‌نام آسان، تجربهٔ سریع و شفاف. همین امروز حساب بساز و با دعوت دوستانت، امتیاز و پاداش دریافت کن.
</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 Row="true" Spacing="3" Class="mb-2">
<MudButton Color="Color.Primary" Size="Size.Large" Class="mud-ripple rounded-pill" OnClick="@(() => Navigation.NavigateTo("#pricing"))">مشاهده قیمت‌ها</MudButton>
<MudButton Variant="Variant.Outlined" Color="Color.Inherit" Size="Size.Large" Class="mud-ripple rounded-pill" OnClick="@(() => Navigation.NavigateTo("#features"))">معرفی پکیج‌ها</MudButton>
</MudStack> </MudStack>
</MudItem> </MudItem>
<MudItem xs="12" md="6"> <MudItem xs="12" md="6">
<MudPaper Elevation="8" Class="pa-0 rounded-2xl hero-media"> <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" <MudImage Src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=1200&auto=format&fit=crop"
Alt="جلسه تیم فروش و شبکه‌سازی" Alt="جلسه تیم فروش و شبکه‌سازی"
ObjectFit="ObjectFit.Cover" ObjectFit="ObjectFit.Cover"
ObjectPosition="ObjectPosition.Center" ObjectPosition="ObjectPosition.Center"
Style="width:100%" Style="width:100%"
Class="rounded-2xl" /> Class="rounded-xl" />
<div class="hero-overlay"></div>
<div class="hero-badge px-2 pb-2">
<MudText Typo="Typo.subtitle2">نمای لحظه‌ای</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">۱۲۸۴ عضو فعال · ‎$۴۸,۹۷۰‎ پرداختی ماه گذشته</MudText>
</div>
</MudPaper> </MudPaper>
</MudItem> </MudItem>
</MudGrid> </MudGrid>
</MudContainer> </MudContainer>
</section> </section>
<MudStack Spacing="10">
<!-- STATS --> <!-- WHYUS -->
<section class="stats-strip"> <section class="whyus-section">
<MudContainer MaxWidth="MaxWidth.Large" Class="py-8"> <MudContainer MaxWidth="MaxWidth.Large" Class="whyus-section py-12">
<MudGrid Spacing="2" Justify="Justify.SpaceAround">
<MudItem xs="6" md="3">
<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" md="3">
<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" md="3">
<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" md="3">
<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>
</MudContainer>
</section>
<!-- FEATURES: معرفی پکیج‌ها --> <MudText Typo="Typo.h4" GutterBottom="true">
<section id="features" class="py-20"> چرا کاربران ما را انتخاب می‌کنند؟
<MudContainer MaxWidth="MaxWidth.Large"> </MudText>
<MudText Typo="Typo.h4" Align="Align.Center" Class="mb-1 mud-typography-subtitle1">پکیج‌ها و امکانات</MudText> <MudText Typo="Typo.subtitle1" Class="mud-text-secondary mb-8">
<MudText Typo="Typo.subtitle1" Align="Align.Center" Class="mud-text-secondary mb-8">بر اساس اندازهٔ تیم خود انتخاب کنید.</MudText> سه دلیل روشن برای شروع امروز.
</MudText>
<MudGrid Spacing="3" Justify="Justify.Center" Class="stretch-grid"> <MudGrid Spacing="3" Justify="Justify.Center">
@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="mud-text-secondary 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 --> <MudItem xs="12" sm="6" md="4">
<section id="pricing" class="py-20"> <MudCard Class="feature-card rounded-xl pa-4" Outlined="true">
<MudContainer MaxWidth="MaxWidth.Large"> <MudStack>
<MudText Typo="Typo.h4" Align="Align.Center" Class="mb-1 mud-typography-subtitle1">قیمت‌گذاری</MudText> <MudStack Row="true">
<MudText Typo="Typo.subtitle1" Align="Align.Center" Class="mud-text-secondary mb-8">قیمت‌ها به تومان — بدون هزینهٔ پنهان.</MudText> <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>
<MudGrid Spacing="3" Justify="Justify.Center"> <MudText Class="ps-10 mud-text-secondary">
@foreach (var p in _plans) در چند گام کوتاه، حسابت را بساز و شروع کن.
{ </MudText>
<MudItem xs="12" md="4" Class="d-flex"> </MudStack>
<MudCard Elevation="3" Class="mud-elevation-3 rounded-2xl d-flex flex-column flex-grow-1 mud-theme-surface">
<MudCardContent Class="pa-6">
<MudText Typo="Typo.overline" Class="mud-text-secondary">@(p.Name)</MudText>
<MudText Typo="Typo.h4" Class="mud-typography-subtitle1 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> </MudCard>
</MudItem> </MudItem>
}
</MudGrid>
</MudContainer>
</section>
<!-- TESTIMONIALS --> <MudItem xs="12" sm="6" md="4">
<section id="testimonials" class="py-20 testimonials"> <MudCard Class="feature-card rounded-xl pa-4" Outlined="true">
<MudContainer MaxWidth="MaxWidth.Large"> <MudStack>
<MudText Typo="Typo.h4" Align="Align.Center" Class="mb-1 mud-typography-subtitle1">اعتماد مشتریان</MudText> <MudStack Row="true">
<MudText Typo="Typo.subtitle1" Align="Align.Center" Class="mud-text-secondary mb-8">بخشی از تجربهٔ استفاده از «فرصت».</MudText> <MudIconButton Icon="@Icons.Material.Outlined.Star"
Variant="Variant.Outlined"
Color="Color.Primary"
Size="Size.Small" />
<MudText Typo="Typo.h6" Align="Align.Center" Class="mb-2">مزایا و پاداش‌های شفاف</MudText>
</MudStack>
<MudGrid Spacing="3" Justify="Justify.Center"> <MudText Class="ps-10 mud-text-secondary">
<MudItem xs="12" md="6"> قوانین روشن، دسترسی آسان به سوابق و گزارش‌ها.
<MudPaper Elevation="4" Class="mud-elevation-4 rounded-2xl pa-5 mud-theme-surface"> </MudText>
<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> </MudStack>
<MudText Typo="Typo.body2"> </MudCard>
«با فرصت، محاسبهٔ کارمزدها و پایش تیم‌ها بدون اکسل و دردسر انجام می‌شود.» </MudItem>
</MudText>
</MudStack>
</MudPaper>
</MudItem>
<MudItem xs="12" md="6"> <MudItem xs="12" sm="6" md="4">
<MudPaper Elevation="4" Class="mud-elevation-4 rounded-2xl pa-5 mud-theme-surface"> <MudCard Class="feature-card rounded-xl pa-4" Outlined="true">
<MudStack Spacing="2"> <MudStack>
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center"> <MudStack Row="true">
<MudAvatar> <MudIconButton Icon="@Icons.Material.Outlined.Devices"
<MudImage ObjectFit="ObjectFit.Cover" Variant="Variant.Outlined"
ObjectPosition="ObjectPosition.Center" Color="Color.Primary"
Src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=256&auto=format&fit=crop"></MudImage> Size="Size.Small" />
</MudAvatar> <MudText Typo="Typo.h6" Align="Align.Center" Class="mb-2">اپلیکیشن واکنش‌گرا</MudText>
<div> </MudStack>
<MudText Typo="Typo.subtitle2">هولدینگ آریانا</MudText>
<MudText Typo="Typo.overline" Class="mud-text-secondary">مدیر فروش</MudText> <MudText Class="ps-10 mud-text-secondary">
</div> تجربه‌ای روان در موبایل و دسکتاپ.
</MudText>
</MudStack> </MudStack>
<MudText Typo="Typo.body2"> </MudCard>
«شجره‌نامهٔ بصری و گزارش‌های دقیق باعث شد رشد تیم را لحظه‌ای ببینیم.» </MudItem>
</MudText> </MudGrid>
</MudStack>
</MudPaper>
</MudItem>
</MudGrid>
</MudContainer>
</section>
<!-- FAQ --> </MudContainer>
<section id="faq" class="py-20"> </section>
<MudContainer MaxWidth="MaxWidth.Large">
<MudText Typo="Typo.h4" Align="Align.Center" Class="mb-1 mud-typography-subtitle1">سوالات متداول</MudText>
<MudText Typo="Typo.subtitle1" Align="Align.Center" Class="mud-text-secondary mb-8">پاسخ به سوالات رایج راه‌اندازی و صورتحساب.</MudText>
<div class="mx-auto max-w-800"> <!-- FEATURES: معرفی پکیج‌ها -->
<MudExpansionPanels Elevation="3" Square="false" Class="mud-elevation-3 rounded-2xl mud-theme-surface"> <section id="features" class="py-20">
@foreach (var q in _faqs) <MudContainer MaxWidth="MaxWidth.Large">
<MudText Typo="Typo.h4" GutterBottom="true">
پکیج‌های سرمایه گذاری
</MudText>
<MudText Typo="Typo.subtitle1" Class="mud-text-secondary mb-8">
بر اساس اندازهٔ تیم خود انتخاب کنید.
</MudText>
<MudGrid Spacing="3" Justify="Justify.Center" Class="stretch-grid">
@foreach (var p in _packs)
{ {
<MudExpansionPanel Text="@q.Q"> <MudItem xs="12" md="4" Class="d-flex">
<MudText Typo="Typo.body2">@q.A</MudText> <MudPaper Elevation="2" Class="rounded-2xl d-flex flex-column flex-grow-1 overflow-hidden">
</MudExpansionPanel> <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="mud-text-secondary 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>
} }
</MudExpansionPanels> </MudGrid>
</div> </MudContainer>
</MudContainer> </section>
</section>
<!-- CTA --> <!-- STATS -->
<section id="contact" class="py-20"> <section class="stats-strip">
<MudContainer MaxWidth="MaxWidth.Medium" Class="text-center"> <MudContainer MaxWidth="MaxWidth.Large">
<MudPaper Elevation="5" Class="mud-elevation-5 pa-6 rounded-2xl mud-theme-surface"> <MudText Typo="Typo.h4" Align="Align.Center" GutterBottom="true">
<MudText Typo="Typo.h5" Class="mud-typography-subtitle1 mb-2">آمادهٔ راه‌اندازی هستید؟</MudText> فرصت چطور کار می‌کند؟
<MudText Typo="Typo.body1" Class="mud-text-secondary mb-4">ایمیل‌تان را بگذارید تا دسترسی زودهنگام بگیرید.</MudText> </MudText>
<MudStack Row="true" Spacing="3" Justify="Justify.Center"> <MudText Typo="Typo.subtitle1" Align="Align.Center" Class="mud-text-secondary mb-8">
<MudTextField @bind-Value="_email" For="@(() => _email)" Placeholder="you@company.com" Variant="Variant.Outlined" Class="max-w-56" /> سه گام روشن تا شروع یک ماجراجویی جدید
<MudButton Color="Color.Primary" Size="Size.Large" OnClick="@JoinWaitlist">درخواست دسترسی</MudButton> </MudText>
</MudStack> <MudGrid>
</MudPaper> <MudItem xs="6">
</MudContainer> <MudStack AlignItems="AlignItems.Start">
</section> <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-4">
<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>

140
src/FrontOffice.Main/Utilities/CustomMudTheme.cs
View File

@@ -57,125 +57,41 @@ public static class CustomMudTheme
Typography = new Typography() Typography = new Typography()
{ {
// پایه
Default = new Default() Default = new Default()
{ {
FontFamily = new[] { "Vazir" } FontFamily = new[] { "Vazir", "Tahoma", "Segoe UI", "Arial", "sans-serif" }
},
//Display/Large
H1 = new H1()
{
FontFamily = new[] { "Vazir" },
FontSize = "3.5625rem",
LineHeight = 4,
FontWeight = 500,
LetterSpacing = "0"
},
//Display/Medium
H2 = new H2()
{
FontFamily = new[] { "Vazir" },
FontSize = "2.8125rem",
LineHeight = 3.25,
FontWeight = 500,
LetterSpacing = "0"
},
//Display/Small
H3 = new H3()
{
FontFamily = new[] { "Vazir" },
FontSize = "2.25rem",
LineHeight = 2.75,
FontWeight = 500,
LetterSpacing = "0"
},
//Headline/Large
H4 = new H4()
{
FontFamily = new[] { "Vazir" },
FontSize = "2rem",
LineHeight = 2.5,
FontWeight = 600,
LetterSpacing = "0"
},
//Headline/Medium
H5 = new H5()
{
FontFamily = new[] { "Vazir" },
FontSize = "1.75rem",
LineHeight = 2.25,
FontWeight = 600,
LetterSpacing = "0"
},
//Headline/Small
H6 = new H6()
{
FontFamily = new[] { "Vazir" },
FontSize = "1.5rem",
LineHeight = 2,
FontWeight = 600,
LetterSpacing = "0"
}, },
// هدینگ‌ها (اسکیل متعادل برای وب)
H1 = new H1 { FontFamily = new[] { "Vazir" }, FontSize = "2rem", LineHeight = 1.70, FontWeight = 800, LetterSpacing = "normal" }, // ~32px
H2 = new H2 { FontFamily = new[] { "Vazir" }, FontSize = "1.875rem", LineHeight = 1.65, FontWeight = 800, LetterSpacing = "normal" }, // ~30px
H3 = new H3 { FontFamily = new[] { "Vazir" }, FontSize = "1.5rem", LineHeight = 1.60, FontWeight = 800, LetterSpacing = "normal" }, // ~24px
H4 = new H4 { FontFamily = new[] { "Vazir" }, FontSize = "1.25rem", LineHeight = 1.55, FontWeight = 800, LetterSpacing = "normal" }, // ~20px
H5 = new H5 { FontFamily = new[] { "Vazir" }, FontSize = "1.125rem", LineHeight = 1.50, FontWeight = 800, LetterSpacing = "normal" }, // ~18px
H6 = new H6 { FontFamily = new[] { "Vazir" }, FontSize = "1rem", LineHeight = 1.45, FontWeight = 800, LetterSpacing = "normal" }, // ~16px
// Subtitles
Subtitle1 = new Subtitle1 { FontFamily = new[] { "Vazir" }, FontSize = "1rem", LineHeight = 1.62, FontWeight = 500, LetterSpacing = "normal" },
Subtitle2 = new Subtitle2 { FontFamily = new[] { "Vazir" }, FontSize = "0.875rem", LineHeight = 1.60, FontWeight = 500, LetterSpacing = "normal" },
// Body text (برای خوانایی بازتر از هدینگ‌ها)
Body1 = new Body1 { FontFamily = new[] { "Vazir" }, FontSize = "1rem", LineHeight = 1.85, FontWeight = 400, LetterSpacing = "normal" },
Body2 = new Body2 { FontFamily = new[] { "Vazir" }, FontSize = "0.875rem", LineHeight = 1.80, FontWeight = 400, LetterSpacing = "normal" },
// Small text
Caption = new Caption { FontFamily = new[] { "Vazir" }, FontSize = "0.75rem", LineHeight = 1.60, FontWeight = 400, LetterSpacing = "normal" },
Overline = new Overline { FontFamily = new[] { "Vazir" }, FontSize = "0.75rem", LineHeight = 1.60, FontWeight = 500, LetterSpacing = "normal" },
// Buttons
Button = new Button Button = new Button
{ {
FontFamily = new[] { "Vazir" }, FontFamily = new[] { "Vazir" },
FontSize = "0.875rem", FontSize = "0.875rem",
LineHeight = 1.75, LineHeight = 1.60,
FontWeight = 700, FontWeight = 600,
LetterSpacing = "0" LetterSpacing = "normal",
}, TextTransform = "none" // حروف بزرگ اجباری غیرفعال
//Body/Large
Body1 = new Body1
{
FontFamily = new[] { "Vazir" },
FontSize = "0.875rem",
LineHeight = 1.75,
FontWeight = 400,
LetterSpacing = "0"
},
//Body/Medium
Body2 = new Body2
{
FontFamily = new[] { "Vazir" },
FontSize = "0.875rem",
LineHeight = 1.43,
FontWeight = 400,
LetterSpacing = "0"
},
//Body/small
Overline = new Overline
{
FontFamily = new[] { "Vazir" },
FontSize = "0.75rem",
LineHeight = 1.33,
FontWeight = 400,
LetterSpacing = "0"
},
//Title/Large
Caption = new Caption
{
FontFamily = new[] { "Vazir" },
FontSize = "1.125rem",
LineHeight = 1.714,
FontWeight = 700,
LetterSpacing = "0"
},
//Title/medium
Subtitle1 = new Subtitle1
{
FontFamily = new[] { "Vazir" },
FontSize = "1rem",
LineHeight = 1.5,
FontWeight = 700,
LetterSpacing = "0.009em"
},
//Title/small
Subtitle2 = new Subtitle2
{
FontFamily = new[] { "Vazir" },
FontSize = "0.875rem",
LineHeight = 1.43,
FontWeight = 700,
LetterSpacing = "0.006em"
} }
} }
}; };