Update UI Design

This commit is contained in:
Ho Ngoc Hai
2026-02-12 01:08:22 +07:00
parent 347f8c1df9
commit 78f4a296be
4 changed files with 23 additions and 13 deletions

View File

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

View File

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

View File

@@ -5,7 +5,7 @@
"Nav_Contact": "Contact",
"Nav_Login": "Login",
"Nav_FreeTrial": "Start Free Trial",
"HeroBadge": "AI-Powered POS &amp; 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",

View File

@@ -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 &amp; 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í",