u

src/FrontOffice.Main/Pages/Index.razor

@@ -3,68 +3,106 @@
 
 <PageTitle>صفحه اصلی</PageTitle>
 
-<!-- Hero -->
+<!-- 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 Typo="Typo.h3" Class="fw-700 lh-tight mb-1 hero-title">
+                    ساخت شبکه‌های هوشمند با فرصت
                 </MudText>
                 <MudText Typo="Typo.subtitle1" Class="muted mb-6">
-                            پلن‌های باینری، شجره‌نامه و گزارش کارمزد ماهانه — همه در یک اپ بلazor.
+                    پلن باینری، شجره‌نامه و گزارش‌های کارمزدی شفاف — همه در یک پنل بلِیزر.
                 </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>
+                    <MudButton Color="Color.Primary" OnClick="@(() => Navigation.NavigateTo("#pricing"))">مشاهده قیمت‌ها</MudButton>
+                    <MudButton Variant="Variant.Outlined" Color="Color.Inherit" OnClick="@(() => Navigation.NavigateTo("#features"))">معرفی پکیج‌ها</MudButton>
                 </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 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>
 
-        <!-- Features -->
+<!-- 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>
+        <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)
+            @foreach (var p in _packs)
             {
                 <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 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>
             }
@@ -72,32 +110,32 @@
     </MudContainer>
 </section>
 
-        <!-- Pricing -->
+<!-- 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>
+        <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>
+                        <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>
+                                    <MudListItem T="string" Value="@item">
                                         <MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Small" Class="ml-2" />
-                                                @item
+                                        @(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 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>
@@ -106,14 +144,66 @@
     </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.body2">
+                            «با فرصت، محاسبهٔ کارمزدها و پایش تیم‌ها بدون اکسل و دردسر انجام می‌شود.»
+                        </MudText>
+                    </MudStack>
+                </MudPaper>
+            </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>
 
-                <MudGrid>
-                    <MudItem xs="12" md="8" mdOffset="2">
+        <div class="mx-auto max-w-800">
             <MudExpansionPanels Elevation="1" Square="false" Class="rounded-2xl">
                 @foreach (var q in _faqs)
                 {
@@ -122,16 +212,15 @@
                         </MudExpansionPanel>
                 }
             </MudExpansionPanels>
-                    </MudItem>
-                </MudGrid>
+        </div>
     </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>
+        <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" />

src/FrontOffice.Main/Pages/Index.razor.cs

@@ -1,49 +1,58 @@
-using FrontOffice.Main.Utilities;
+using FrontOffice.Main.Utilities;
 using MudBlazor;
 
 namespace FrontOffice.Main.Pages;
 public partial class Index
 {
     private string? _email;
+
     private void JoinWaitlist()
     {
         if (string.IsNullOrWhiteSpace(_email))
         {
-            Snackbar.Add("Please enter a valid email.", Severity.Warning);
+            Snackbar.Add("لطفاً ایمیل معتبر وارد کنید.", Severity.Warning);
             return;
         }
-        Snackbar.Add("You're on the list. We'll be in touch!", Severity.Success);
+        Snackbar.Add("به لیست انتظار «فرصت» اضافه شدید.", Severity.Success);
         _email = string.Empty;
     }
 
-    // Data models
-    private record Feature(string Title, string Body, string Icon, Color Color);
+    private record Pack(string Title, string Body, IEnumerable<string> Items, string Image);
     private record Plan(string Name, string Price, bool Highlight, IEnumerable<string> Features);
     private record QA(string Q, string A);
    
-    // Sample data
-    private readonly List<Feature> _features = new()
+    private readonly List<Pack> _packs = new()
     {
-        new("Binary Plan Engine", "Accurate volume pairing and capping with weekly cycles.", Icons.Material.Filled.AccountTree, Color.Primary),
-        new("Genealogy Viewer", "See left/right legs, depth, and spillover at a glance.", Icons.Material.Filled.DeviceHub, Color.Secondary),
-        new("Commission Reports", "Month-by-month breakdowns with exportable statements.", Icons.Material.Filled.Assessment, Color.Tertiary),
-        new("KYC & Security", "Role-based access, audit logs, and 2FA-ready flows.", Icons.Material.Filled.VerifiedUser, Color.Success),
-        new("Payments", "Wallets, withdrawals, and reconciliation dashboards.", Icons.Material.Filled.AccountBalanceWallet, Color.Info),
-        new("API & Webhooks", "Integrate with CRMs, bots, and third-party services.", Icons.Material.Filled.IntegrationInstructions, Color.Dark)
-    };
+        new("پکیج استارتر", "برای تیم‌های کوچک و شروع سریع.", new []{
+            "تا ۲۰۰ عضو فعال",
+            "نمایش شجره‌نامه پایه",
+            "گزارش‌های ماهانه"
+        }, "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=1200&auto=format&fit=crop"),
 
+        new("پکیج رشد", "برای تیم‌های در حال توسعه.", new []{
+            "تا ۵۰۰۰ عضو",
+            "موتور کارمزد پیشرفته",
+            "پشتیبانی اولویت‌دار"
+        }, "https://images.unsplash.com/photo-1551836022-4e32a88b5f16?q=80&w=1200&auto=format&fit=crop"),
+
+        new("پکیج اسکیل", "برای سازمان‌های بزرگ و حساس.", new []{
+            "اعضای نامحدود",
+            "قوانین سفارشی کارمزد",
+            "SLA و آن‌بوردینگ اختصاصی"
+        }, "https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=1200&auto=format&fit=crop"),
+    };
     private readonly List<Plan> _plans = new()
     {
-        new("Starter", "$0", false, new []{ "Up to 200 members", "Basic genealogy", "Email support" }),
-        new("Growth", "$39/mo", true, new []{ "Up to 5,000 members", "Advanced genealogy", "Commission engine", "Priority support" }),
-        new("Scale", "Contact us", false, new []{ "Unlimited members", "Custom rules", "SLA & onboarding", "Dedicated success manager" }),
+        new("استارتر", "رایگان", false, new []{ "تا ۲۰۰ عضو", "شجره‌نامه پایه", "پشتیبانی ایمیلی" }),
+        new("رشد", "۳۹ دلار / ماه", true, new []{ "تا ۵۰۰۰ عضو", "شجره‌نامه پیشرفته", "موتور کارمزد", "پشتیبانی اولویت‌دار" }),
+        new("اسکیل", "تماس بگیرید", false, new []{ "نامحدود", "قوانین سفارشی", "SLA و آن‌بوردینگ", "مدیر موفقیت اختصاصی" }),
     };
 
     private readonly List<QA> _faqs = new()
     {
-        new("Can I use my own domain?", "Yes, you can deploy behind your custom domain and SSL certificates."),
-        new("Does it work with self-hosted databases?", "Absolutely. We support SQL Server, PostgreSQL, and MySQL."),
-        new("What payment gateways are supported?", "You can integrate Stripe, PayPal, or your own gateway via webhooks."),
-        new("Can I export my data?", "Yes. Export to CSV/Excel at any time from your admin dashboard."),
+        new("دامنهٔ اختصاصی دارم؛ قابل اتصال است؟", "بله، پشت دامنه و گواهی SSL خودتان مستقر می‌شود."),
+        new("با دیتابیس خودم کار می‌کند؟", "کاملاً. SQL Server، PostgreSQL و MySQL پشتیبانی می‌شود."),
+        new("چه درگاه‌هایی پشتیبانی می‌شود؟", "Stripe و PayPal یا درگاه اختصاصی از طریق وب‌هوک‌ها."),
+        new("می‌توانم داده‌ها را خروجی بگیرم؟", "هر زمان از داشبورد ادمین خروجی CSV/Excel بگیرید."),
     };
 }

src/FrontOffice.Main/Pages/_Host.cshtml

@@ -1,4 +1,4 @@
-@page "/"
+@page "/"
 @using Microsoft.AspNetCore.Components.Web
 @namespace FrontOffice.Main.Pages
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@@ -22,17 +22,55 @@
 
     <div id="blazor-error-ui">
         <environment include="Staging,Production">
-            ?? ??? ?? ???? ???. ??? ?????? ???? ??? ?? ???? ???????? ???? ?????? ?????.
+            یک خطا رخ داده است. این برنامه ممکن است تا زمان بارگذاری مجدد پاسخگو نباشد.
         </environment>
         <environment include="Development">
-            ???? ??????????? ?? ????? ?????? ???. ???? ?????? ??????? ????? ????? (DevTools) ?????? ?? ????? ??????.
+            خطای مدیریت‌نشده ای اتفاق افتاده است. برای مشاهده جزئیات، ابزار توسعه (DevTools) مرورگر را بررسی نمایید.
         </environment>
-        <a href="" class="reload">???????? ????</a>
-        <a class="dismiss">??</a>
+        <a href="" class="reload">بارگذاری مجدد</a>
+        <a class="dismiss">🗙</a>
     </div>
 
     <script src="_framework/blazor.server.js"></script>
     <script src="_content/MudBlazor/MudBlazor.min.js"></script>
+    <script>
+        // elementId: id نوار (مثلاً "top")
+        // containerSelector: کانتینری که اسکرول می‌خوره؛ برای MudLayout معمولا ".mud-main-content"
+        // threshold: آستانه پیکسل
+        function changeNavBgOnBodyScroll(elementId, containerSelector = null, threshold = 10) {
+            var navbar = document.getElementById(elementId);
+            if (!navbar) return;
+
+            var container = containerSelector ? document.querySelector(containerSelector) : window;
+
+            var getScrollTop = function () {
+                if (container === window) {
+                    return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+                }
+                return container.scrollTop || 0;
+            };
+
+            var update = function () {
+                var y = getScrollTop();
+                if (y >= threshold) {
+                    navbar.classList.add("white", "mud-elevation-2");
+                } else {
+                    navbar.classList.remove("white", "mud-elevation-2");
+                }
+            };
+
+            // گوش دادن به اسکرول روی کانتینر درست
+            (container === window ? window : container).addEventListener("scroll", update, { passive: true });
+
+            // برای بارگذاری اولیه / تغییر اندازه / بازگشت از تاریخچه
+            window.addEventListener("load", update);
+            window.addEventListener("resize", update);
+            window.addEventListener("pageshow", update);
+
+            // اجرای اولیه (حتی اگر کاربر اسکرول نکرده)
+            requestAnimationFrame(update);
+        }
+    </script>
 </body>
 </html>
 

src/FrontOffice.Main/Shared/Footer.razor

@@ -0,0 +1,152 @@
+@inject ISnackbar Snackbar
+
+<footer class="footer-section">
+    <MudContainer MaxWidth="MaxWidth.Large" Class="py-12">
+        <!-- Main Footer Content -->
+        <MudGrid Spacing="4" Class="mb-8">
+            <!-- Company Info -->
+            <MudItem xs="12" md="4">
+                <MudStack Spacing="3">
+                    <div class="d-flex align-center gap-2 mb-2">
+                        <MudImage ObjectFit="ObjectFit.Cover"
+                                  ObjectPosition="ObjectPosition.Center"
+                                  Width="40"
+                                  Height="40"
+                                  Class="rounded-circle"
+                                  Src="favicon.png" />
+                        <MudText Typo="Typo.h5" Class="fw-700">فرصت</MudText>
+                    </div>
+                    <MudText Typo="Typo.body2" Class="footer-description">
+                        پلتفرم هوشمند ساخت شبکه‌های فروش و MLM با امکانات پیشرفته مدیریت تیم، محاسبه کارمزد و گزارش‌گیری جامع.
+                    </MudText>
+                    <MudStack Row="true" Spacing="2" Class="social-links">
+                        <MudIconButton Icon="@Icons.Custom.Brands.Telegram" 
+                                       Color="Color.Inherit" 
+                                       Size="Size.Medium"
+                                       Class="social-icon"
+                                       Href="https://t.me/foursat" 
+                                       Target="_blank" />
+                        <MudIconButton Icon="@Icons.Custom.Brands.Instagram" 
+                                       Color="Color.Inherit" 
+                                       Size="Size.Medium"
+                                       Class="social-icon"
+                                       Href="https://instagram.com/foursat" 
+                                       Target="_blank" />
+                        <MudIconButton Icon="@Icons.Custom.Brands.LinkedIn" 
+                                       Color="Color.Inherit" 
+                                       Size="Size.Medium"
+                                       Class="social-icon"
+                                       Href="https://linkedin.com/company/foursat" 
+                                       Target="_blank" />
+                        <MudIconButton Icon="@Icons.Custom.Brands.WhatsApp" 
+                                       Color="Color.Inherit" 
+                                       Size="Size.Medium"
+                                       Class="social-icon"
+                                       Href="https://wa.me/989123456789" 
+                                       Target="_blank" />
+                    </MudStack>
+                </MudStack>
+            </MudItem>
+
+            <!-- Quick Links -->
+            <MudItem xs="12" sm="6" md="2">
+                <MudStack Spacing="2">
+                    <MudText Typo="Typo.subtitle1" Class="fw-700 footer-title">دسترسی سریع</MudText>
+                    <MudLink Href="#features" Class="footer-link">امکانات</MudLink>
+                    <MudLink Href="#pricing" Class="footer-link">قیمت‌ها</MudLink>
+                    <MudLink Href="#faq" Class="footer-link">سوالات متداول</MudLink>
+                    <MudLink Href="#contact" Class="footer-link">ارتباط با ما</MudLink>
+                    <MudLink Href="/auth/phone" Class="footer-link">ورود</MudLink>
+                </MudStack>
+            </MudItem>
+
+            <!-- Services -->
+            <MudItem xs="12" sm="6" md="2">
+                <MudStack Spacing="2">
+                    <MudText Typo="Typo.subtitle1" Class="fw-700 footer-title">خدمات</MudText>
+                    <MudLink Href="#" Class="footer-link">پکیج استارتر</MudLink>
+                    <MudLink Href="#" Class="footer-link">پکیج رشد</MudLink>
+                    <MudLink Href="#" Class="footer-link">پکیج اسکیل</MudLink>
+                    <MudLink Href="#" Class="footer-link">مشاوره رایگان</MudLink>
+                    <MudLink Href="#" Class="footer-link">پشتیبانی فنی</MudLink>
+                </MudStack>
+            </MudItem>
+
+            <!-- Support -->
+            <MudItem xs="12" sm="6" md="2">
+                <MudStack Spacing="2">
+                    <MudText Typo="Typo.subtitle1" Class="fw-700 footer-title">پشتیبانی</MudText>
+                    <MudLink Href="#" Class="footer-link">مرکز راهنمایی</MudLink>
+                    <MudLink Href="#" Class="footer-link">آموزش‌ها</MudLink>
+                    <MudLink Href="#" Class="footer-link">وبلاگ</MudLink>
+                    <MudLink Href="#" Class="footer-link">تماس با ما</MudLink>
+                    <MudLink Href="#" Class="footer-link">گزارش مشکل</MudLink>
+                </MudStack>
+            </MudItem>
+
+            <!-- Contact Info -->
+            <MudItem xs="12" sm="6" md="2">
+                <MudStack Spacing="2">
+                    <MudText Typo="Typo.subtitle1" Class="fw-700 footer-title">تماس</MudText>
+                    <div class="d-flex align-center gap-2">
+                        <MudIcon Icon="@Icons.Material.Filled.Phone" Size="Size.Small" />
+                        <MudText Typo="Typo.body2" Class="footer-contact">۰۲۱-۱۲۳۴۵۶۷۸</MudText>
+                    </div>
+                    <div class="d-flex align-center gap-2">
+                        <MudIcon Icon="@Icons.Material.Filled.Email" Size="Size.Small" />
+                        <MudText Typo="Typo.body2" Class="footer-contact">info@foursat.co</MudText>
+                    </div>
+                    <div class="d-flex align-start gap-2">
+                        <MudIcon Icon="@Icons.Material.Filled.LocationOn" Size="Size.Small" Class="mt-1" />
+                        <MudText Typo="Typo.body2" Class="footer-contact">
+                            تهران، خیابان ولیعصر، پلاک ۱۲۳۴
+                        </MudText>
+                    </div>
+                </MudStack>
+            </MudItem>
+        </MudGrid>
+
+        <!-- Newsletter Subscription -->
+        <MudDivider Class="my-6" />
+        <MudGrid Justify="Justify.Center" Class="mb-6">
+            <MudItem xs="12" md="8" lg="6">
+                <MudPaper Elevation="2" Class="pa-4 rounded-2xl newsletter-section">
+                    <MudText Typo="Typo.h6" Class="fw-700 mb-2" Align="Align.Center">عضویت در خبرنامه</MudText>
+                    <MudText Typo="Typo.body2" Class="mb-3" Align="Align.Center">
+                        از آخرین اخبار، آموزش‌ها و تخفیف‌های ویژه باخبر شوید
+                    </MudText>
+                    <MudStack Row="true" Spacing="2" Justify="Justify.Center" Class="newsletter-form">
+                        <MudTextField @bind-Value="_newsletterEmail" 
+                                      Placeholder="آدرس ایمیل شما" 
+                                      Variant="Variant.Outlined" 
+                                      Class="flex-grow-1"
+                                      Style="max-width: 300px;" />
+                        <MudButton Color="Color.Primary" 
+                                   Variant="Variant.Filled"
+                                   OnClick="SubscribeNewsletter"
+                                   Class="newsletter-btn">
+                            عضویت
+                        </MudButton>
+                    </MudStack>
+                </MudPaper>
+            </MudItem>
+        </MudGrid>
+
+        <!-- Bottom Footer -->
+        <MudDivider Class="mb-4" />
+        <MudGrid Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
+            <MudItem xs="12" md="6">
+                <MudText Typo="Typo.body2" Class="footer-copyright">
+                    © @DateTime.Now.Year فرصت. تمامی حقوق محفوظ است.
+                </MudText>
+            </MudItem>
+            <MudItem xs="12" md="6">
+                <MudStack Row="true" Spacing="3" Justify="Justify.FlexEnd" Class="footer-legal">
+                    <MudLink Href="#" Class="footer-link">حریم خصوصی</MudLink>
+                    <MudLink Href="#" Class="footer-link">شرایط استفاده</MudLink>
+                    <MudLink Href="#" Class="footer-link">قوانین</MudLink>
+                </MudStack>
+            </MudItem>
+        </MudGrid>
+    </MudContainer>
+</footer>

src/FrontOffice.Main/Shared/Footer.razor.cs

@@ -0,0 +1,41 @@
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+
+namespace FrontOffice.Main.Shared;
+
+public partial class Footer
+{
+    private string? _newsletterEmail;
+
+    private void SubscribeNewsletter()
+    {
+        if (string.IsNullOrWhiteSpace(_newsletterEmail))
+        {
+            Snackbar.Add("لطفاً آدرس ایمیل معتبر وارد کنید.", Severity.Warning);
+            return;
+        }
+
+        if (!IsValidEmail(_newsletterEmail))
+        {
+            Snackbar.Add("فرمت ایمیل صحیح نیست.", Severity.Warning);
+            return;
+        }
+
+        // TODO: Implement newsletter subscription logic
+        Snackbar.Add("با موفقیت در خبرنامه عضو شدید.", Severity.Success);
+        _newsletterEmail = string.Empty;
+    }
+
+    private static bool IsValidEmail(string email)
+    {
+        try
+        {
+            var addr = new System.Net.Mail.MailAddress(email);
+            return addr.Address == email;
+        }
+        catch
+        {
+            return false;
+        }
+    }
+}

src/FrontOffice.Main/Shared/MainLayout.razor

@@ -9,37 +9,53 @@
     <MudSnackbarProvider />
     <MudLayout>
         <!-- AppBar -->
-        <MudAppBar Elevation="0" Color="Color.Transparent" Dense="true" Class="appbar">
+        <MudAppBar Elevation="0" Color="Color.Transparent" Dense="true" Class="py-2" id="top">
             <MudContainer MaxWidth="MaxWidth.Large" Class="d-flex align-center justify-space-between w-100">
+
+                <MudHidden Breakpoint="Breakpoint.SmAndUp">
+                    <MudIconButton Class="d-inline"
+                                   Icon="@Icons.Material.Filled.Menu"
+                                   OnClick="@ToggleDrawer" />
+                </MudHidden>
+
                 <div class="d-flex align-center gap-2">
-                    <MudAvatar Size="Size.Medium" Color="Color.Primary" Variant="Variant.Filled" Icon="@Icons.Material.Filled.AutoAwesome" Class="rounded-xl" />
-                    <MudText Typo="Typo.h6" Class="fw-600">فورسات</MudText>
+                    <MudHidden Breakpoint="Breakpoint.SmAndUp" Invert="true">
+                        <MudImage ObjectFit="ObjectFit.Cover"
+                                  ObjectPosition="ObjectPosition.Center"
+                                  Width="32"
+                                  Height="32"
+                                  Class="rounded-circle"
+                                  Src="favicon.png" />
+                    </MudHidden>
+                    <MudText Typo="Typo.h6" Class="fw-600">فرصت</MudText>
                 </div>
 
-                <div class="d-none d-md-flex align-center gap-4">
-                    <MudLink Href="#features" Class="mud-link">امکانات</MudLink>
-                    <MudLink Href="#pricing" Class="mud-link">قیمت‌ها</MudLink>
-                    <MudLink Href="#faq" class="mud-link">سوالات متداول</MudLink>
-                    <MudLink Href="#contact" class="mud-link">ارتباط</MudLink>
+                <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="#contact" Typo="Typo.subtitle1" Class="mud-link">ارتباط با ما</MudLink>
                 </div>
 
                 <div class="d-flex align-center gap-2">
+                    <MudHidden Breakpoint="Breakpoint.SmAndUp" Invert="true">
                         <MudButton Variant="Variant.Outlined" Color="Color.Inherit">ورود</MudButton>
                         <MudButton Color="Color.Primary">شروع کنید</MudButton>
-                    <MudIconButton Title="تغییر پوسته" OnClick="@ToggleTheme" Edge="Edge.End"
+                    </MudHidden>
+
+                    <MudIconButton OnClick="@ToggleTheme" Edge="Edge.End"
                                    Icon="@(_isDark ? Icons.Material.Filled.DarkMode : Icons.Material.Filled.LightMode)" />
-                    <MudIconButton Class="d-inline d-md-none" Title="فهرست" Icon="@Icons.Material.Filled.Menu" OnClick="@ToggleDrawer" />
                 </div>
             </MudContainer>
         </MudAppBar>
 
         <!-- Mobile Drawer -->
-        <MudDrawer @bind-Open="_drawerOpen" Anchor="Anchor.Left" Elevation="1" Variant="DrawerVariant.Temporary" Class="p-4">
+        <MudDrawer @bind-Open="_drawerOpen" Anchor="Anchor.Right" Elevation="1" Variant="DrawerVariant.Temporary" Class="pa-4">
             <MudStack Spacing="2">
-                <MudLink Href="#features" OnClick="() => _drawerOpen=false">امکانات</MudLink>
-                <MudLink Href="#pricing" OnClick="() => _drawerOpen=false">قیمت‌ها</MudLink>
-                <MudLink Href="#faq" OnClick="() => _drawerOpen=false">سوالات متداول</MudLink>
-                <MudLink Href="#contact" OnClick="() => _drawerOpen=false">ارتباط</MudLink>
+                <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="#contact" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">ارتباط</MudLink>
                 <MudDivider Class="my-2" />
                 <MudButton Variant="Variant.Outlined" Color="Color.Inherit">ورود</MudButton>
                 <MudButton Color="Color.Primary">شروع کنید</MudButton>
@@ -48,7 +64,9 @@
 
         <MudMainContent>
             @Body
+            <Footer />
         </MudMainContent>
+
     </MudLayout>
 </MudRTLProvider>
 

src/FrontOffice.Main/Shared/MainLayout.razor.cs

@@ -15,4 +15,12 @@ public partial class MainLayout
     {
         await JSRuntime.InvokeVoidAsync("history.back");
     }
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await JSRuntime.InvokeVoidAsync("changeNavBgOnBodyScroll", "top", null, 1);
+            StateHasChanged();
+        }
+    }
 }

src/FrontOffice.Main/wwwroot/css/site.css

@@ -40,3 +40,115 @@
     src: url(../fonts/Vazir-Bold.ttf) format('woff2');
 }
 /*#endregion*/
+
+/*#region Layout Styles*/
+html, body {
+    height: 100%;
+}
+
+.mud-layout {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.mud-main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.mud-main-content > div:first-child {
+    flex: 1;
+}
+/*#endregion*/
+
+/*#region Footer Styles*/
+.footer-section {
+    background: var(--mud-palette-surface);
+    border-top: 1px solid var(--mud-palette-divider);
+    margin-top: auto;
+}
+
+.footer-title {
+    color: var(--mud-palette-text-primary);
+    margin-bottom: 1rem;
+}
+
+.footer-description {
+    color: var(--mud-palette-text-secondary);
+    line-height: 1.6;
+}
+
+.footer-link {
+    color: var(--mud-palette-text-secondary);
+    text-decoration: none;
+    transition: color 0.3s ease;
+    display: block;
+    padding: 0.25rem 0;
+}
+
+.footer-link:hover {
+    color: var(--mud-palette-primary);
+    text-decoration: none;
+}
+
+.footer-contact {
+    color: var(--mud-palette-text-secondary);
+}
+
+.footer-copyright {
+    color: var(--mud-palette-text-secondary);
+}
+
+.social-links .social-icon {
+    transition: transform 0.3s ease, color 0.3s ease;
+}
+
+.social-links .social-icon:hover {
+    transform: translateY(-2px);
+    color: var(--mud-palette-primary);
+}
+
+.newsletter-section {
+    background: var(--mud-palette-background-grey);
+}
+
+.newsletter-form {
+    align-items: center;
+}
+
+.newsletter-btn {
+    white-space: nowrap;
+}
+
+.footer-legal {
+    flex-wrap: wrap;
+}
+
+@media (max-width: 960px) {
+    .footer-legal {
+        justify-content: flex-start !important;
+        margin-top: 1rem;
+    }
+    
+    .newsletter-form {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .newsletter-btn {
+        margin-top: 0.5rem;
+    }
+}
+
+/* Dark mode adjustments */
+.mud-theme-dark .footer-section {
+    background: var(--mud-palette-dark-background);
+    border-top-color: var(--mud-palette-dark-divider);
+}
+
+.mud-theme-dark .newsletter-section {
+    background: var(--mud-palette-dark-surface);
+}
+/*#endregion*/