u
This commit is contained in:
MeysamMoghaddam
307
src/FrontOffice.Main/Pages/FAQ.razor
Normal file
307
src/FrontOffice.Main/Pages/FAQ.razor
Normal file
@@ -0,0 +1,307 @@
|
||||
@attribute [Route(RouteConstants.FAQ.Index)]
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<PageTitle>سوالات متداول | فرصت</PageTitle>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="faq-hero-section py-16">
|
||||
<MudContainer MaxWidth="MaxWidth.Large">
|
||||
<MudStack AlignItems="AlignItems.Center" Spacing="4">
|
||||
<MudChip T="string" Color="Color.Secondary" Variant="Variant.Filled" Class="mb-2">سوالات متداول</MudChip>
|
||||
<MudText Typo="Typo.h2" Align="Align.Center" Class="mb-3">
|
||||
پاسخ سوالات شما در اینجا
|
||||
</MudText>
|
||||
<MudText Typo="Typo.body1" Align="Align.Center" Class="mud-text-secondary mb-6" MaxWidth="600px">
|
||||
در این بخش به پرتکرارترین سوالات کاربران پاسخ دادهایم. اگر سوال شما در لیست نیست، با تیم پشتیبانی ما تماس بگیرید.
|
||||
</MudText>
|
||||
|
||||
<!-- Search Box -->
|
||||
<MudPaper Elevation="2" Class="pa-4 rounded-2xl w-100" Style="max-width: 500px;">
|
||||
<MudTextField @bind-Value="_searchQuery"
|
||||
Label="جستجو در سوالات..."
|
||||
Variant="Variant.Outlined"
|
||||
Adornment="Adornment.Start"
|
||||
AdornmentIcon="@Icons.Material.Filled.Search"
|
||||
FullWidth="true"
|
||||
Immediate="true"
|
||||
Placeholder="سوال خود را تایپ کنید" />
|
||||
</MudPaper>
|
||||
</MudStack>
|
||||
</MudContainer>
|
||||
</section>
|
||||
|
||||
<MudStack Spacing="6">
|
||||
|
||||
<!-- FAQ Categories -->
|
||||
<section class="py-8">
|
||||
<MudContainer MaxWidth="MaxWidth.Large">
|
||||
<MudText Typo="Typo.h4" Align="Align.Center" Class="mb-8 mud-typography-subtitle1">دستهبندی سوالات</MudText>
|
||||
<MudGrid Spacing="3" Justify="Justify.Center">
|
||||
@foreach (var category in _categories)
|
||||
{
|
||||
<MudItem xs="12" sm="6" md="4">
|
||||
<MudPaper Elevation="2" Class="pa-4 rounded-xl mud-theme-surface cursor-pointer h-100"
|
||||
OnClick="() => ScrollToCategory(category.Id)">
|
||||
<MudStack AlignItems="AlignItems.Center" Spacing="3">
|
||||
<MudIcon Icon="@category.Icon" Size="Size.Large" Color="Color.Primary" />
|
||||
<MudText Typo="Typo.h6" Align="Align.Center">@category.Title</MudText>
|
||||
<MudText Typo="Typo.caption" Align="Align.Center" Class="mud-text-secondary">
|
||||
@category.Description
|
||||
</MudText>
|
||||
<MudChip T="string" Color="Color.Info" Variant="Variant.Outlined" Size="Size.Small">
|
||||
@category.QuestionCount سوال
|
||||
</MudChip>
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
}
|
||||
</MudGrid>
|
||||
</MudContainer>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Content -->
|
||||
<section class="py-8">
|
||||
<MudContainer MaxWidth="MaxWidth.Large">
|
||||
@if (!string.IsNullOrWhiteSpace(_searchQuery))
|
||||
{
|
||||
<!-- Search Results -->
|
||||
<MudStack Spacing="4">
|
||||
<MudText Typo="Typo.h5" Class="mb-4">نتایج جستجو برای "@_searchQuery"</MudText>
|
||||
@if (_filteredQuestions.Any())
|
||||
{
|
||||
<MudExpansionPanels Square="false" Class="rounded-2xl">
|
||||
@foreach (var question in _filteredQuestions)
|
||||
{
|
||||
<MudExpansionPanel Text="@question.Question">
|
||||
<MudText Typo="Typo.body1">@((MarkupString)question.Answer)</MudText>
|
||||
</MudExpansionPanel>
|
||||
}
|
||||
</MudExpansionPanels>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudStack AlignItems="AlignItems.Center" Class="py-8">
|
||||
<MudIcon Icon="@Icons.Material.Filled.SearchOff" Size="Size.Large" Color="Color.Default" />
|
||||
<MudText Typo="Typo.h6" Class="mt-2">نتیجهای یافت نشد</MudText>
|
||||
<MudText Typo="Typo.body2" Class="mud-text-secondary">
|
||||
سعی کنید از کلمات کلیدی دیگری استفاده کنید.
|
||||
</MudText>
|
||||
</MudStack>
|
||||
}
|
||||
</MudStack>
|
||||
}
|
||||
else
|
||||
{
|
||||
<!-- Categorized FAQ -->
|
||||
@foreach (var category in _categories)
|
||||
{
|
||||
<MudStack Spacing="4" Class="mb-8">
|
||||
<div id="@category.Id">
|
||||
<MudText Typo="Typo.h5" Class="mb-4">@category.Title</MudText>
|
||||
<MudExpansionPanels Square="false" Class="rounded-2xl">
|
||||
@foreach (var question in category.Questions)
|
||||
{
|
||||
<MudExpansionPanel Text="@question.Question">
|
||||
<MudText Typo="Typo.body1">@((MarkupString)question.Answer)</MudText>
|
||||
</MudExpansionPanel>
|
||||
}
|
||||
</MudExpansionPanels>
|
||||
</div>
|
||||
</MudStack>
|
||||
}
|
||||
}
|
||||
</MudContainer>
|
||||
</section>
|
||||
|
||||
<!-- Contact Support -->
|
||||
<section class="py-12 bg-grey-50">
|
||||
<MudContainer MaxWidth="MaxWidth.Large">
|
||||
<MudPaper Elevation="3" Class="pa-8 rounded-2xl mud-theme-surface text-center">
|
||||
<MudIcon Icon="@Icons.Material.Filled.ContactSupport" Size="Size.Large" Color="Color.Primary" Class="mb-4" />
|
||||
<MudText Typo="Typo.h4" Class="mb-3">سوال شما پاسخ داده نشد؟</MudText>
|
||||
<MudText Typo="Typo.body1" Class="mud-text-secondary mb-6">
|
||||
تیم پشتیبانی ما آماده پاسخگویی به سوالات شما است. از طریق راههای زیر با ما تماس بگیرید.
|
||||
</MudText>
|
||||
|
||||
<MudGrid Spacing="4" Justify="Justify.Center">
|
||||
<MudItem xs="12" md="4">
|
||||
<MudStack AlignItems="AlignItems.Center" Spacing="2">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Email" Color="Color.Primary" Size="Size.Large" />
|
||||
<MudText Typo="Typo.h6">ایمیل</MudText>
|
||||
<MudText Typo="Typo.body2" Class="mud-text-secondary">support@foursat.co</MudText>
|
||||
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Size="Size.Small">
|
||||
ارسال ایمیل
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12" md="4">
|
||||
<MudStack AlignItems="AlignItems.Center" Spacing="2">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Chat" Color="Color.Success" Size="Size.Large" />
|
||||
<MudText Typo="Typo.h6">چت آنلاین</MudText>
|
||||
<MudText Typo="Typo.body2" Class="mud-text-secondary">پاسخگویی ۲۴ ساعته</MudText>
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Success" Size="Size.Small">
|
||||
شروع چت
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12" md="4">
|
||||
<MudStack AlignItems="AlignItems.Center" Spacing="2">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Phone" Color="Color.Warning" Size="Size.Large" />
|
||||
<MudText Typo="Typo.h6">تلفن</MudText>
|
||||
<MudText Typo="Typo.body2" Class="mud-text-secondary">۰۲۱-۱۲۳۴۵۶۷۸</MudText>
|
||||
<MudButton Variant="Variant.Outlined" Color="Color.Warning" Size="Size.Small">
|
||||
تماس تلفنی
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudPaper>
|
||||
</MudContainer>
|
||||
</section>
|
||||
|
||||
</MudStack>
|
||||
|
||||
@code {
|
||||
private string _searchQuery = "";
|
||||
private List<FAQCategory> _categories = new();
|
||||
private List<FAQQuestion> _filteredQuestions = new();
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
LoadFAQData();
|
||||
}
|
||||
|
||||
protected override void OnParametersSet()
|
||||
{
|
||||
FilterQuestions();
|
||||
}
|
||||
|
||||
private void LoadFAQData()
|
||||
{
|
||||
_categories = new List<FAQCategory>
|
||||
{
|
||||
new FAQCategory
|
||||
{
|
||||
Id = "getting-started",
|
||||
Title = "شروع کار",
|
||||
Description = "نحوه ثبتنام و شروع استفاده",
|
||||
Icon = Icons.Material.Filled.PlayArrow,
|
||||
Questions = new List<FAQQuestion>
|
||||
{
|
||||
new() { Question = "چگونه حساب کاربری بسازم؟", Answer = "برای ایجاد حساب کاربری، روی دکمه «شروع کنید» کلیک کنید و مراحل ثبتنام را دنبال کنید. نیاز به شماره موبایل معتبر دارید." },
|
||||
new() { Question = "آیا ثبتنام رایگان است؟", Answer = "بله، ثبتنام اولیه کاملاً رایگان است. شما میتوانید از امکانات پایه به صورت رایگان استفاده کنید." },
|
||||
new() { Question = "چه مدارکی برای ثبتنام نیاز است؟", Answer = "تنها شماره موبایل معتبر نیاز است. برای استفاده از امکانات پیشرفتهتر ممکن است نیاز به احراز هویت کامل باشد." }
|
||||
}
|
||||
},
|
||||
new FAQCategory
|
||||
{
|
||||
Id = "pricing",
|
||||
Title = "قیمتگذاری",
|
||||
Description = "طرحهای قیمتگذاری و پرداخت",
|
||||
Icon = Icons.Material.Filled.Payment,
|
||||
Questions = new List<FAQQuestion>
|
||||
{
|
||||
new() { Question = "طرحهای قیمتگذاری شما چیست؟", Answer = "ما سه طرح داریم: استارتر (رایگان)، رشد (۳۹ دلار/ماه)، و اسکیل (تماس بگیرید). هر طرح برای اندازه تیم شما مناسب است." },
|
||||
new() { Question = "آیا امکان ارتقا یا کاهش طرح وجود دارد؟", Answer = "بله، شما میتوانید در هر زمان طرح خود را ارتقا دهید. کاهش طرح نیز با محدودیتهای زمانی ممکن است." },
|
||||
new() { Question = "چه روشهای پرداختی پشتیبانی میشود؟", Answer = "از کارتهای بانکی ایرانی، درگاههای پرداخت آنلاین، و کیف پولهای دیجیتال پشتیبانی میکنیم." }
|
||||
}
|
||||
},
|
||||
new FAQCategory
|
||||
{
|
||||
Id = "features",
|
||||
Title = "امکانات",
|
||||
Description = "ویژگیها و قابلیتهای سیستم",
|
||||
Icon = Icons.Material.Filled.Build,
|
||||
Questions = new List<FAQQuestion>
|
||||
{
|
||||
new() { Question = "شجرهنامه چگونه کار میکند؟", Answer = "شجرهنامه بصری نمایش سلسله مراتبی تیم شما را نشان میدهد و امکان ردیابی روابط ارجاعی را فراهم میکند." },
|
||||
new() { Question = "گزارشگیری به چه صورت است؟", Answer = "سیستم گزارشهای جامع مالی، عملکردی و آماری ارائه میدهد که قابل فیلتر و دانلود به فرمت Excel است." },
|
||||
new() { Question = "آیا از موبایل قابل استفاده است؟", Answer = "بله، اپلیکیشن کاملاً responsive است و تجربه کاربری عالی در موبایل و تبلت ارائه میدهد." }
|
||||
}
|
||||
},
|
||||
new FAQCategory
|
||||
{
|
||||
Id = "security",
|
||||
Title = "امنیت",
|
||||
Description = "امنیت دادهها و حریم خصوصی",
|
||||
Icon = Icons.Material.Filled.Security,
|
||||
Questions = new List<FAQQuestion>
|
||||
{
|
||||
new() { Question = "دادههای من چگونه محافظت میشود؟", Answer = "از رمزنگاری پیشرفته، پشتیبانگیری منظم، و پروتکلهای امنیتی استاندارد استفاده میکنیم." },
|
||||
new() { Question = "آیا دادهها را با دیگران به اشتراک میگذاریم؟", Answer = "خیر، دادههای شما کاملاً خصوصی است و تنها برای ارائه خدمات به شما استفاده میشود." },
|
||||
new() { Question = "چگونه میتوانم حساب خود را حذف کنم؟", Answer = "از طریق تنظیمات پروفایل میتوانید درخواست حذف حساب دهید. این فرآیند ۳۰ روز طول میکشد." }
|
||||
}
|
||||
},
|
||||
new FAQCategory
|
||||
{
|
||||
Id = "support",
|
||||
Title = "پشتیبانی",
|
||||
Description = "کمک و پشتیبانی فنی",
|
||||
Icon = Icons.Material.Filled.Help,
|
||||
Questions = new List<FAQQuestion>
|
||||
{
|
||||
new() { Question = "پشتیبانی چگونه کار میکند؟", Answer = "پشتیبانی ۲۴ ساعته از طریق چت آنلاین، ایمیل و تلفن ارائه میشود. پاسخگویی در کمتر از ۲ ساعت." },
|
||||
new() { Question = "آیا آموزشهایی دارید؟", Answer = "بله، مرکز راهنمایی جامع با ویدیوهای آموزشی، راهنماها و وبینارهای آموزشی داریم." },
|
||||
new() { Question = "چگونه مشکل فنی گزارش دهم؟", Answer = "از طریق پنل پشتیبانی یا ایمیل support@foursat.co میتوانید مشکلات را گزارش دهید." }
|
||||
}
|
||||
},
|
||||
new FAQCategory
|
||||
{
|
||||
Id = "legal",
|
||||
Title = "قوانین و مقررات",
|
||||
Description = "قوانین استفاده و شرایط",
|
||||
Icon = Icons.Material.Filled.Gavel,
|
||||
Questions = new List<FAQQuestion>
|
||||
{
|
||||
new() { Question = "شرایط استفاده از خدمات چیست؟", Answer = "با ثبتنام، شرایط استفاده را میپذیرید. این شرایط در صفحه قوانین کامل توضیح داده شده است." },
|
||||
new() { Question = "سیاست بازگشت وجه چگونه است؟", Answer = "در صورت عدم رضایت، امکان بازگشت وجه در ۱۴ روز اول وجود دارد. شرایط کامل در صفحه بازگشت وجه." },
|
||||
new() { Question = "چگونه میتوانم شکایت کنم؟", Answer = "از طریق ایمیل legal@foursat.co یا فرم تماس شکایات میتوانید شکایت خود را ثبت کنید." }
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Calculate question counts
|
||||
foreach (var category in _categories)
|
||||
{
|
||||
category.QuestionCount = category.Questions.Count;
|
||||
}
|
||||
}
|
||||
|
||||
private void FilterQuestions()
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(_searchQuery))
|
||||
{
|
||||
_filteredQuestions = new List<FAQQuestion>();
|
||||
return;
|
||||
}
|
||||
|
||||
_filteredQuestions = _categories
|
||||
.SelectMany(c => c.Questions)
|
||||
.Where(q => q.Question.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase) ||
|
||||
q.Answer.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase))
|
||||
.ToList();
|
||||
}
|
||||
|
||||
private void ScrollToCategory(string categoryId)
|
||||
{
|
||||
// TODO: Implement smooth scroll to category
|
||||
}
|
||||
|
||||
public class FAQCategory
|
||||
{
|
||||
public string? Id { get; set; }
|
||||
public string? Title { get; set; }
|
||||
public string? Description { get; set; }
|
||||
public string? Icon { get; set; }
|
||||
public int QuestionCount { get; set; }
|
||||
public List<FAQQuestion> Questions { get; set; } = new();
|
||||
}
|
||||
|
||||
public class FAQQuestion
|
||||
{
|
||||
public string? Question { get; set; }
|
||||
public string? Answer { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -37,7 +37,7 @@
|
||||
<div class="d-none d-md-flex align-center gap-10">
|
||||
<MudLink Href="#features" Typo="Typo.subtitle1" Class="mud-link">امکانات</MudLink>
|
||||
<MudLink Href="#pricing" Typo="Typo.subtitle1" Class="mud-link">قیمتها</MudLink>
|
||||
<MudLink Href="#faq" Typo="Typo.subtitle1" Class="mud-link">سوالات متداول</MudLink>
|
||||
<MudLink Href="@(RouteConstants.FAQ.Index)" Typo="Typo.subtitle1" Class="mud-link">سوالات متداول</MudLink>
|
||||
<MudLink Href="@(RouteConstants.About.Index)" Typo="Typo.subtitle1" Class="mud-link">درباره ما</MudLink>
|
||||
<MudLink Href="#contact" Typo="Typo.subtitle1" Class="mud-link">ارتباط با ما</MudLink>
|
||||
</div>
|
||||
@@ -66,7 +66,7 @@
|
||||
<MudStack Spacing="2">
|
||||
<MudLink Href="#features" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">امکانات</MudLink>
|
||||
<MudLink Href="#pricing" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">قیمتها</MudLink>
|
||||
<MudLink Href="#faq" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">سوالات متداول</MudLink>
|
||||
<MudLink Href="@(RouteConstants.FAQ.Index)" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">سوالات متداول</MudLink>
|
||||
<MudLink Href="@(RouteConstants.About.Index)" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">درباره ما</MudLink>
|
||||
<MudLink Href="#contact" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">ارتباط</MudLink>
|
||||
|
||||
|
||||
@@ -27,4 +27,9 @@ public static class RouteConstants
|
||||
{
|
||||
public const string Index = "/about";
|
||||
}
|
||||
|
||||
public static class FAQ
|
||||
{
|
||||
public const string Index = "/faq";
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user