Update UI Design
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
@page "/"
|
||||
@inject IStringLocalizer<Home> L
|
||||
@inject IJSRuntime JS
|
||||
|
||||
<PageTitle>aPOS - @L["HeroHeadline"]</PageTitle>
|
||||
|
||||
@@ -22,11 +23,11 @@
|
||||
|
||||
<div class="hero-actions">
|
||||
<a href="#pricing" class="btn-accent btn-accent-lg">
|
||||
<i class="lucide lucide-arrow-right"></i>
|
||||
<i data-lucide="arrow-right"></i>
|
||||
@L["HeroCTA_Primary"]
|
||||
</a>
|
||||
<a href="#features" class="btn-outline btn-outline-lg">
|
||||
<i class="lucide lucide-play"></i>
|
||||
<i data-lucide="play"></i>
|
||||
@L["HeroCTA_Secondary"]
|
||||
</a>
|
||||
</div>
|
||||
@@ -67,7 +68,7 @@
|
||||
{
|
||||
<div class="tpos-feature-card">
|
||||
<div class="tpos-feature-icon-bg" style="background: @f.IconBg;">
|
||||
<i class="lucide lucide-@L[f.Icon]" style="color: @f.IconColor;"></i>
|
||||
<i data-lucide="@L[f.Icon]" style="color: @f.IconColor;"></i>
|
||||
</div>
|
||||
<h3 class="tpos-feature-title">@L[f.Title]</h3>
|
||||
<p class="tpos-feature-desc">@L[f.Desc]</p>
|
||||
@@ -209,7 +210,7 @@
|
||||
{
|
||||
<div class="tpos-addon-item">
|
||||
<div class="tpos-addon-left">
|
||||
<i class="lucide lucide-@L[addon.Icon]" style="color: var(--accent);"></i>
|
||||
<i data-lucide="@L[addon.Icon]" style="color: var(--accent-primary);"></i>
|
||||
<span class="tpos-addon-name">@L[addon.Name]</span>
|
||||
</div>
|
||||
<div class="tpos-addon-price">@L[addon.Price]</div>
|
||||
@@ -228,7 +229,7 @@
|
||||
<p class="tpos-cta-sub">@L["CTA_Subtitle"]</p>
|
||||
<div class="tpos-cta-actions">
|
||||
<a href="#" class="btn-accent btn-accent-lg">
|
||||
<i class="lucide lucide-arrow-right"></i>
|
||||
<i data-lucide="arrow-right"></i>
|
||||
@L["CTA_Primary"]
|
||||
</a>
|
||||
<a href="#" class="btn-outline btn-outline-lg">@L["CTA_Secondary"]</a>
|
||||
@@ -277,15 +278,24 @@
|
||||
<div class="tpos-footer-bottom">
|
||||
<div class="tpos-footer-copy">@L["Footer_Copyright"]</div>
|
||||
<div class="tpos-footer-socials">
|
||||
<a href="#" class="tpos-social-link"><i class="lucide lucide-facebook"></i></a>
|
||||
<a href="#" class="tpos-social-link"><i class="lucide lucide-instagram"></i></a>
|
||||
<a href="#" class="tpos-social-link"><i class="lucide lucide-youtube"></i></a>
|
||||
<a href="#" class="tpos-social-link"><i class="lucide lucide-linkedin"></i></a>
|
||||
<a href="#" class="tpos-social-link"><i data-lucide="facebook"></i></a>
|
||||
<a href="#" class="tpos-social-link"><i data-lucide="instagram"></i></a>
|
||||
<a href="#" class="tpos-social-link"><i data-lucide="youtube"></i></a>
|
||||
<a href="#" class="tpos-social-link"><i data-lucide="linkedin"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@code {
|
||||
// Initialize Lucide icons after render
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
await JS.InvokeVoidAsync("lucide.createIcons");
|
||||
}
|
||||
}
|
||||
|
||||
// Feature cards data
|
||||
private record FeatureItem(string Icon, string Title, string Desc, string IconColor, string IconBg);
|
||||
private readonly FeatureItem[] _features =
|
||||
|
||||
@@ -15,8 +15,8 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800&display=swap"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- Lucide Icons (matching Pencil design) -->
|
||||
<link href="https://unpkg.com/lucide-static@latest/font/lucide.css" rel="stylesheet">
|
||||
<!-- Lucide Icons JS (matching Pencil design) -->
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
|
||||
<!-- Material Design Icons -->
|
||||
<link
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"Nav_Contact": "Contact",
|
||||
"Nav_Login": "Login",
|
||||
"Nav_FreeTrial": "Start Free Trial",
|
||||
"HeroBadge": "AI-Powered POS & Loyalty",
|
||||
"HeroBadge": "AI-Powered POS & Loyalty",
|
||||
"HeroHeadline": "Smart Sales Management with AI",
|
||||
"HeroSubtext": "All-in-one POS solution for Restaurants, Cafes, Bars, Karaoke and Spas — automate accounting, customer loyalty and real-time reporting.",
|
||||
"HeroCTA_Primary": "Start for Free",
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"Nav_Contact": "Liên hệ",
|
||||
"Nav_Login": "Đăng nhập",
|
||||
"Nav_FreeTrial": "Dùng thử miễn phí",
|
||||
"HeroBadge": "AI-Powered POS & Loyalty",
|
||||
"HeroBadge": "AI-Powered POS & Loyalty",
|
||||
"HeroHeadline": "Quản lý bán hàng thông minh với AI",
|
||||
"HeroSubtext": "Giải pháp POS toàn diện cho Nhà hàng, Cafe, Bar, Karaoke và Spa — tự động hóa kế toán, tích điểm khách hàng và báo cáo realtime.",
|
||||
"HeroCTA_Primary": "Bắt đầu miễn phí",
|
||||
|
||||
Reference in New Issue
Block a user