u

src/FrontOffice.Main/Pages/FAQ.razor

@@ -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; }
+    }
+}

src/FrontOffice.Main/Shared/MainLayout.razor

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

src/FrontOffice.Main/Utilities/RouteConstants.cs

@@ -27,4 +27,9 @@ public static class RouteConstants
     {
         public const string Index = "/about";
     }
+
+    public static class FAQ
+    {
+        public const string Index = "/faq";
+    }
 }