ع
This commit is contained in:
MeysamMoghaddam
@@ -1,102 +1,142 @@
|
||||
@attribute [Route(RouteConstants.Main.MainPage)]
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<PageTitle>FrontOffice Platform</PageTitle>
|
||||
<PageTitle>صفحه اصلی</PageTitle>
|
||||
|
||||
<MudContainer Class="pa-6" MaxWidth="MaxWidth.Large">
|
||||
<MudGrid GutterSize="GutterSize.Medium">
|
||||
<MudItem xs="12" md="6">
|
||||
<MudText Typo="Typo.h3" Class="mb-2">Grow your capital with curated investment packages</MudText>
|
||||
<MudText Typo="Typo.body1" Class="mb-4">
|
||||
FrontOffice combines product ownership with network-based commissions. Explore verified packages, track your earnings, and manage your team in a single dashboard.
|
||||
</MudText>
|
||||
<MudStack Direction="Row" Spacing="2">
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(()=>NavigateToAuth(true))" StartIcon="@Icons.Material.Filled.PlayArrow">
|
||||
Get Started
|
||||
</MudButton>
|
||||
<MudButton Variant="Variant.Outlined" Color="Color.Primary" OnClick="@(()=>NavigateToAuth(false))">
|
||||
Sign In
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
</MudItem>
|
||||
<MudItem xs="12" md="6">
|
||||
<MudPaper Elevation="1" Class="pa-4 d-flex flex-column gap-3">
|
||||
<MudStack Spacing="2">
|
||||
<MudText Typo="Typo.subtitle1" Color="Color.Primary">Why FrontOffice?</MudText>
|
||||
<MudStack Direction="Row" AlignItems="AlignItems.Center" Spacing="1">
|
||||
<MudIcon Icon="@Icons.Material.Filled.TrendingUp" Color="Color.Primary" />
|
||||
<MudText Typo="Typo.body2">Hybrid investment + product ownership ensures tangible value.</MudText>
|
||||
<!-- Hero -->
|
||||
<section id="hero" class="hero-section">
|
||||
<MudContainer MaxWidth="MaxWidth.Large" Class="py-16">
|
||||
<MudGrid Justify="Justify.Center" AlignItems="AlignItems.Center" Spacing="3">
|
||||
<MudItem xs="12" md="6">
|
||||
<MudChip T="string" Color="Color.Primary" Variant="Variant.Filled" Class="mb-3">جدید</MudChip>
|
||||
<MudText Typo="Typo.h2" Class="fw-700 lh-tight mb-2">
|
||||
ساخت شبکههای هوشمند با فورسات
|
||||
</MudText>
|
||||
<MudText Typo="Typo.subtitle1" Class="muted mb-6">
|
||||
پلنهای باینری، شجرهنامه و گزارش کارمزد ماهانه — همه در یک اپ بلazor.
|
||||
</MudText>
|
||||
|
||||
<MudStack Row="true" Spacing="2" Class="mb-2">
|
||||
<MudTextField @bind-Value="_email" For="@(() => _email)" Placeholder="ایمیل کاری شما" Variant="Variant.Outlined" Class="max-w-56" />
|
||||
<MudButton Color="Color.Primary" OnClick="@JoinWaitlist">عضویت در لیست انتظار</MudButton>
|
||||
</MudStack>
|
||||
<MudText Typo="Typo.caption" Class="muted">بدون اسپم؛ هر زمان بخواهید لغو کنید.</MudText>
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12" md="6">
|
||||
<MudPaper Elevation="6" Class="p-4 rounded-2xl preview-card">
|
||||
<MudStack Spacing="2">
|
||||
<MudText Typo="Typo.h6">نمای لحظهای</MudText>
|
||||
<MudDivider />
|
||||
<MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
|
||||
<MudAvatar Color="Color.Secondary" Icon="@Icons.Material.Filled.Groups" />
|
||||
<MudText Typo="Typo.subtitle2">اعضای فعال</MudText>
|
||||
<MudSpacer />
|
||||
<MudText Typo="Typo.subtitle2" Class="fw-700">1,284</MudText>
|
||||
</MudStack>
|
||||
<MudProgressLinear Value="72" Color="Color.Primary" Class="my-1" />
|
||||
<MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
|
||||
<MudAvatar Color="Color.Tertiary" Icon="@Icons.Material.Filled.Timeline" />
|
||||
<MudText Typo="Typo.subtitle2">پرداختی ماهانه</MudText>
|
||||
<MudSpacer />
|
||||
<MudText Typo="Typo.subtitle2" Class="fw-700">$48,970</MudText>
|
||||
</MudStack>
|
||||
<MudProgressLinear Value="54" Color="Color.Secondary" Class="my-1" />
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudContainer>
|
||||
</section>
|
||||
|
||||
<!-- Features -->
|
||||
<section id="features" class="py-14">
|
||||
<MudContainer MaxWidth="MaxWidth.Large">
|
||||
<MudText Typo="Typo.h4" Align="Align.Center" Class="mb-1 fw-700">هرچه نیاز دارید</MudText>
|
||||
<MudText Typo="Typo.subtitle1" Align="Align.Center" Class="muted mb-8">سریع، آماده تولید و زیبا از ابتدا.</MudText>
|
||||
|
||||
<MudGrid Spacing="3" Justify="Justify.Center" Class="stretch-grid">
|
||||
@foreach (var f in _features)
|
||||
{
|
||||
<MudItem xs="12" md="4" Class="d-flex">
|
||||
<MudPaper Elevation="2" Class="p-5 rounded-2xl d-flex flex-column flex-grow-1">
|
||||
<MudStack Spacing="1">
|
||||
<MudAvatar Color="@f.Color" Icon="@f.Icon" />
|
||||
<MudText Typo="Typo.h6">@f.Title</MudText>
|
||||
<MudText Typo="Typo.body2" Class="muted">@f.Body</MudText>
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
}
|
||||
</MudGrid>
|
||||
</MudContainer>
|
||||
</section>
|
||||
|
||||
<!-- Pricing -->
|
||||
<section id="pricing" class="py-14">
|
||||
<MudContainer MaxWidth="MaxWidth.Large">
|
||||
<MudText Typo="Typo.h4" Align="Align.Center" Class="mb-1 fw-700">قیمتگذاری ساده</MudText>
|
||||
<MudText Typo="Typo.subtitle1" Align="Align.Center" Class="muted mb-8">رایگان شروع کنید و در صورت نیاز ارتقا دهید.</MudText>
|
||||
|
||||
<MudGrid Spacing="3" Justify="Justify.Center">
|
||||
@foreach (var p in _plans)
|
||||
{
|
||||
<MudItem xs="12" md="4" Class="d-flex">
|
||||
<MudCard Class="rounded-2xl d-flex flex-column flex-grow-1">
|
||||
<MudCardContent Class="p-6">
|
||||
<MudText Typo="Typo.overline" Class="muted">@p.Name</MudText>
|
||||
<MudText Typo="Typo.h4" Class="fw-700 mb-2">@p.Price</MudText>
|
||||
<MudList T="string" Dense="true">
|
||||
@foreach (var item in p.Features)
|
||||
{
|
||||
<MudListItem>
|
||||
<MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Small" Class="ml-2" />
|
||||
@item
|
||||
</MudListItem>
|
||||
}
|
||||
</MudList>
|
||||
</MudCardContent>
|
||||
<MudCardActions Class="p-6 pt-0">
|
||||
<MudButton Color="Color.Primary" Variant="@(p.Highlight ? Variant.Filled : Variant.Outlined)" Class="w-100">انتخاب پلن</MudButton>
|
||||
</MudCardActions>
|
||||
</MudCard>
|
||||
</MudItem>
|
||||
}
|
||||
</MudGrid>
|
||||
</MudContainer>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section id="faq" class="py-14">
|
||||
<MudContainer MaxWidth="MaxWidth.Large">
|
||||
<MudText Typo="Typo.h4" Align="Align.Center" Class="mb-1 fw-700">سوالات متداول</MudText>
|
||||
<MudText Typo="Typo.subtitle1" Align="Align.Center" Class="muted mb-8">پاسخ به سوالات رایج راهاندازی و صورتحساب.</MudText>
|
||||
|
||||
<MudGrid>
|
||||
<MudItem xs="12" md="8" mdOffset="2">
|
||||
<MudExpansionPanels Elevation="1" Square="false" Class="rounded-2xl">
|
||||
@foreach (var q in _faqs)
|
||||
{
|
||||
<MudExpansionPanel Text="@q.Q">
|
||||
<MudText Typo="Typo.body2">@q.A</MudText>
|
||||
</MudExpansionPanel>
|
||||
}
|
||||
</MudExpansionPanels>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudContainer>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section id="contact" class="py-14">
|
||||
<MudContainer MaxWidth="MaxWidth.Medium" Class="text-center">
|
||||
<MudPaper Elevation="2" Class="p-8 rounded-2xl">
|
||||
<MudText Typo="Typo.h5" Class="fw-700 mb-2">آمادهی راهاندازی هستید؟</MudText>
|
||||
<MudText Typo="Typo.body1" Class="muted mb-4">ایمیلتان را بگذارید تا دسترسی زودهنگام بگیرید.</MudText>
|
||||
<MudStack Row="true" Spacing="2" Justify="Justify.Center">
|
||||
<MudTextField @bind-Value="_email" For="@(() => _email)" Placeholder="you@company.com" Variant="Variant.Outlined" Class="max-w-56" />
|
||||
<MudButton Color="Color.Primary" OnClick="@JoinWaitlist">درخواست دسترسی</MudButton>
|
||||
</MudStack>
|
||||
<MudStack Direction="Row" AlignItems="AlignItems.Center" Spacing="1">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Groups" Color="Color.Primary" />
|
||||
<MudText Typo="Typo.body2">Binary network model with transparent genealogy tracking.</MudText>
|
||||
</MudStack>
|
||||
<MudStack Direction="Row" AlignItems="AlignItems.Center" Spacing="1">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Payments" Color="Color.Primary" />
|
||||
<MudText Typo="Typo.body2">Instant commission reports and monthly payouts.</MudText>
|
||||
</MudStack>
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudDivider Class="my-6" />
|
||||
|
||||
<MudStack Spacing="1" Class="mb-4" AlignItems="AlignItems.Center">
|
||||
<MudText Typo="Typo.h4">Featured Packages</MudText>
|
||||
<MudText Typo="Typo.body2" Align="Align.Center" Style="max-width:600px;">
|
||||
Discover curated bundles that combine digital ownership, physical products, and network rewards. Choose the plan that matches your investment horizon.
|
||||
</MudText>
|
||||
</MudStack>
|
||||
|
||||
<MudGrid GutterSize="GutterSize.Medium">
|
||||
@foreach (var package in Packages)
|
||||
{
|
||||
<MudItem xs="12" sm="6" lg="4">
|
||||
<MudCard Class="h-100 d-flex flex-column">
|
||||
<MudCardMedia Image="@package.ImageUrl" Height="180" />
|
||||
<MudCardContent Class="d-flex flex-column gap-2">
|
||||
<MudText Typo="Typo.h6">@package.Title</MudText>
|
||||
<MudText Typo="Typo.subtitle2" Color="Color.Primary">@package.Price</MudText>
|
||||
<MudText Typo="Typo.body2" Class="mud-truncate">@package.Summary</MudText>
|
||||
</MudCardContent>
|
||||
<MudCardActions Class="mt-auto d-flex justify-space-between pa-4">
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
StartIcon="@Icons.Material.Filled.ShoppingCart"
|
||||
OnClick="@(()=>HandlePurchase(package))">
|
||||
Buy
|
||||
</MudButton>
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Primary"
|
||||
OnClick="@(()=>HandleDetails(package))">
|
||||
Details
|
||||
</MudButton>
|
||||
</MudCardActions>
|
||||
</MudCard>
|
||||
</MudItem>
|
||||
}
|
||||
</MudGrid>
|
||||
|
||||
<MudDivider Class="my-6" />
|
||||
|
||||
<MudPaper Elevation="1" Class="pa-6 d-flex flex-column flex-md-row align-center justify-space-between gap-4">
|
||||
<MudStack Spacing="1">
|
||||
<MudText Typo="Typo.h5">Ready to build your FrontOffice?</MudText>
|
||||
<MudText Typo="Typo.body2">
|
||||
Start with a starter package, invite your partners, and monitor your income in real time. Our support team is here to help you onboard smoothly.
|
||||
</MudText>
|
||||
</MudStack>
|
||||
<MudStack Direction="Row" Spacing="2">
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="@(()=>NavigateToAuth(true))">
|
||||
Create Account
|
||||
</MudButton>
|
||||
<MudButton Variant="Variant.Outlined" Color="Color.Secondary" OnClick="ScrollToPackages">
|
||||
View Packages
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
</MudContainer>
|
||||
|
||||
|
||||
|
||||
</MudPaper>
|
||||
</MudContainer>
|
||||
</section>
|
||||
@@ -1,38 +1,49 @@
|
||||
using FrontOffice.Main.Utilities;
|
||||
using MudBlazor;
|
||||
|
||||
namespace FrontOffice.Main.Pages;
|
||||
public partial class Index
|
||||
{
|
||||
private readonly IReadOnlyList<PackageCard> Packages = new List<PackageCard>
|
||||
{
|
||||
new("Starter Combo", "$150", "Entry-level mix of digital services and physical product vouchers.", "https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?auto=format&fit=crop&w=800&q=80"),
|
||||
new("Growth Portfolio", "$420", "Balanced bundle for network builders with weekly webinars and mentor access.", "https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=800&q=80"),
|
||||
new("Elite Master Pack", "$980", "Premium assets, lifetime dashboard analytics, and higher binary commissions.", "https://images.unsplash.com/photo-1545239351-1141bd82e8a6?auto=format&fit=crop&w=800&q=80"),
|
||||
new("Product Booster", "$260", "Merchandise-focused kit with recurring inventory top-ups and customer rewards.", "https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=800&q=80"),
|
||||
new("Network Accelerator", "$560", "Designed for team leaders<72>includes onboarding funnels and marketing credits.", "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=800&q=80"),
|
||||
new("Legacy Plan", "$1,250", "Long-term portfolio with quarterly dividends, event invitations, and VIP support.", "https://images.unsplash.com/photo-1454165205744-3b78555e5572?auto=format&fit=crop&w=800&q=80"),
|
||||
};
|
||||
|
||||
private void NavigateToAuth(bool createAccount)
|
||||
private string? _email;
|
||||
private void JoinWaitlist()
|
||||
{
|
||||
var target = createAccount ? RouteConstants.Auth.Phone : RouteConstants.Auth.Verify;
|
||||
Navigation.NavigateTo(target);
|
||||
if (string.IsNullOrWhiteSpace(_email))
|
||||
{
|
||||
Snackbar.Add("Please enter a valid email.", Severity.Warning);
|
||||
return;
|
||||
}
|
||||
Snackbar.Add("You're on the list. We'll be in touch!", Severity.Success);
|
||||
_email = string.Empty;
|
||||
}
|
||||
|
||||
private void HandlePurchase(PackageCard package)
|
||||
{
|
||||
Navigation.NavigateTo($"{RouteConstants.Auth.Phone}?redirect=/packages/{Uri.EscapeDataString(package.Title)}");
|
||||
}
|
||||
// Data models
|
||||
private record Feature(string Title, string Body, string Icon, Color Color);
|
||||
private record Plan(string Name, string Price, bool Highlight, IEnumerable<string> Features);
|
||||
private record QA(string Q, string A);
|
||||
|
||||
private void HandleDetails(PackageCard package)
|
||||
// Sample data
|
||||
private readonly List<Feature> _features = new()
|
||||
{
|
||||
Navigation.NavigateTo($"/packages/{Uri.EscapeDataString(package.Title)}");
|
||||
}
|
||||
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)
|
||||
};
|
||||
|
||||
private void ScrollToPackages()
|
||||
private readonly List<Plan> _plans = new()
|
||||
{
|
||||
Navigation.NavigateTo("#packages", forceLoad: false);
|
||||
}
|
||||
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" }),
|
||||
};
|
||||
|
||||
private sealed record PackageCard(string Title, string Price, string Summary, string ImageUrl);
|
||||
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."),
|
||||
};
|
||||
}
|
||||
@@ -3,11 +3,49 @@
|
||||
<PageTitle>فرصت</PageTitle>
|
||||
|
||||
<MudRTLProvider RightToLeft="true">
|
||||
<MudThemeProvider @ref="_mudThemeProvider" Theme="CustomMudTheme.CustomMudBlazorTheme" />
|
||||
<MudThemeProvider @ref="_mudThemeProvider" Theme="CustomMudTheme.CustomMudBlazorTheme" @bind-IsDarkMode="_isDark" />
|
||||
<MudPopoverProvider/>
|
||||
<MudDialogProvider/>
|
||||
<MudSnackbarProvider/>
|
||||
<MudLayout>
|
||||
<!-- AppBar -->
|
||||
<MudAppBar Elevation="0" Color="Color.Transparent" Dense="true" Class="appbar">
|
||||
<MudContainer MaxWidth="MaxWidth.Large" Class="d-flex align-center justify-space-between w-100">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<div class="d-flex align-center gap-2">
|
||||
<MudButton Variant="Variant.Outlined" Color="Color.Inherit">ورود</MudButton>
|
||||
<MudButton Color="Color.Primary">شروع کنید</MudButton>
|
||||
<MudIconButton Title="تغییر پوسته" 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">
|
||||
<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>
|
||||
<MudDivider Class="my-2" />
|
||||
<MudButton Variant="Variant.Outlined" Color="Color.Inherit">ورود</MudButton>
|
||||
<MudButton Color="Color.Primary">شروع کنید</MudButton>
|
||||
</MudStack>
|
||||
</MudDrawer>
|
||||
|
||||
<MudMainContent>
|
||||
@Body
|
||||
</MudMainContent>
|
||||
|
||||
@@ -5,6 +5,12 @@ namespace FrontOffice.Main.Shared;
|
||||
public partial class MainLayout
|
||||
{
|
||||
private MudThemeProvider _mudThemeProvider;
|
||||
private bool _isDark;
|
||||
private bool _drawerOpen;
|
||||
private string? _email;
|
||||
|
||||
private void ToggleTheme() => _isDark = !_isDark;
|
||||
private void ToggleDrawer() => _drawerOpen = !_drawerOpen;
|
||||
private async void Back()
|
||||
{
|
||||
await JSRuntime.InvokeVoidAsync("history.back");
|
||||
|
||||
Reference in New Issue
Block a user