+ // EN: Main content area with brand gradient background
+ // VI: Khu vực nội dung chính với background gradient thương hiệu
+
+ {/* EN: Brand gradient overlay / VI: Overlay gradient thương hiệu */}
+
+
+ {/* EN: Decorative brand dots / VI: Chấm trang trí thương hiệu */}
+
+
+
+
+
+ {/* EN: Brand Logo / VI: Logo thương hiệu */}
+
+
+
+
{/* EN: Hero Title / VI: Tiêu đề Hero */}
-
+
{t('home.title')}
{/* EN: Subtitle/Description / VI: Phụ đề/Mô tả */}
-
+
{t('home.description')}
@@ -68,31 +87,69 @@ export default function Home() {
{isAuthenticated && user ? (
// EN: Authenticated user welcome message / VI: Thông báo chào mừng người dùng đã xác thực
-
-
+ = {
+ xs: { width: 'w-16', height: 'h-4' },
+ sm: { width: 'w-24', height: 'h-6' },
+ md: { width: 'w-32', height: 'h-8' },
+ lg: { width: 'w-48', height: 'h-12' },
+ xl: { width: 'w-64', height: 'h-16' },
+ '2xl': { width: 'w-80', height: 'h-20' },
+};
+
+/**
+ * EN: Size mappings for icon variant
+ * VI: Ánh xạ kích thước cho biến thể icon
+ */
+const iconSizeClasses: Record = {
+ xs: { width: 'w-4', height: 'h-4' },
+ sm: { width: 'w-6', height: 'h-6' },
+ md: { width: 'w-8', height: 'h-8' },
+ lg: { width: 'w-12', height: 'h-12' },
+ xl: { width: 'w-16', height: 'h-16' },
+ '2xl': { width: 'w-20', height: 'h-20' },
+};
+
+/**
+ * EN: Brand Logo Component - Displays brand logo with automatic theme switching
+ * VI: Component Logo Thương Hiệu - Hiển thị logo với tự động chuyển theme
+ *
+ * @example
+ * ```tsx
+ * ,
- VariantProps {
+ VariantProps {
/**
* EN: Loading state - shows spinner when true / VI: Trạng thái loading - hiển thị spinner khi true
*/
diff --git a/apps/web-client/src/components/ui/empty-state.tsx b/apps/web-client/src/components/ui/empty-state.tsx
new file mode 100644
index 00000000..d33d1c29
--- /dev/null
+++ b/apps/web-client/src/components/ui/empty-state.tsx
@@ -0,0 +1,153 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { cn } from '@/lib/utils';
+import { getBrandIllustration } from '@/lib/brand-constants';
+import { Button } from './button';
+
+/**
+ * EN: Empty state action button configuration
+ * VI: Cấu hình button hành động cho empty state
+ */
+export interface EmptyStateAction {
+ /** Button label / Nhãn button */
+ label: string;
+ /** Click handler / Hàm xử lý click */
+ onClick: () => void;
+ /** Button variant / Biến thể button */
+ variant?: 'brand' | 'primary' | 'secondary' | 'ghost';
+}
+
+/**
+ * EN: Empty state component props
+ * VI: Props cho component empty state
+ */
+export interface EmptyStateProps {
+ /** Title text / Tiêu đề */
+ title: string;
+ /** Description text / Mô tả */
+ description?: string;
+ /** Illustration type / Loại minh họa */
+ illustration?: 'empty' | 'error' | 'custom';
+ /** Custom illustration path / Đường dẫn minh họa tùy chỉnh */
+ customIllustration?: string;
+ /** Primary action button / Button hành động chính */
+ action?: EmptyStateAction;
+ /** Secondary action button / Button hành động phụ */
+ secondaryAction?: EmptyStateAction;
+ /** Additional CSS classes / CSS classes bổ sung */
+ className?: string;
+ /** Show illustration / Hiển thị minh họa */
+ showIllustration?: boolean;
+}
+
+/**
+ * EN: Empty State Component - Professional empty state with illustrations
+ * VI: Component Empty State - Empty state chuyên nghiệp với minh họa
+ *
+ * @example
+ * ```tsx
+ * {} }}
+ * />
+ * ```
+ */
+export function EmptyState({
+ title,
+ description,
+ illustration = 'empty',
+ customIllustration,
+ action,
+ secondaryAction,
+ className,
+ showIllustration = true,
+}: EmptyStateProps) {
+ // EN: Get illustration path
+ // VI: Lấy đường dẫn minh họa
+ const illustrationSrc =
+ illustration === 'custom' && customIllustration
+ ? customIllustration
+ : getBrandIllustration(illustration === 'custom' ? 'empty' : illustration);
+
+ return (
+ {} }}
+ * />
+ * ```
+ */
+export function ErrorState(props: Omit) {
+ return = {
+ xs: 'w-4 h-4 border-2',
+ sm: 'w-6 h-6 border-2',
+ md: 'w-8 h-8 border-3',
+ lg: 'w-12 h-12 border-4',
+ xl: 'w-16 h-16 border-4',
+};
+
+/**
+ * EN: Color mappings for spinner
+ * VI: Ánh xạ màu cho spinner
+ */
+const spinnerColors: Record = {
+ brand: 'border-brand-primary/20 border-t-brand-primary',
+ primary: 'border-text-primary/20 border-t-text-primary',
+ white: 'border-white/20 border-t-white',
+};
+
+/**
+ * EN: Brand Spinner - Loading spinner with brand colors
+ * VI: Brand Spinner - Loading spinner với màu thương hiệu
+ *
+ * @example
+ * ```tsx
+ * = {
+ brand: 'bg-brand-gradient',
+ success: 'bg-accent-success',
+ warning: 'bg-accent-warning',
+ error: 'bg-accent-error',
+};
+
+export function ProgressBar({
+ value,
+ showLabel = false,
+ className,
+ color = 'brand',
+}: ProgressBarProps) {
+ const clampedValue = Math.max(0, Math.min(100, value));
+
+ return (
+
+
);
diff --git a/apps/web-client/src/components/ui/brand-logo.tsx b/apps/web-client/src/components/ui/brand-logo.tsx
new file mode 100644
index 00000000..309dd41c
--- /dev/null
+++ b/apps/web-client/src/components/ui/brand-logo.tsx
@@ -0,0 +1,140 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { useTheme } from '@/contexts/theme-context';
+import { cn } from '@/lib/utils';
+import { BRAND, getBrandLogo } from '@/lib/brand-constants';
+
+/**
+ * EN: Brand logo variant types
+ * VI: Các kiểu biến thể logo thương hiệu
+ */
+export type LogoVariant = 'full' | 'icon' | 'wordmark';
+
+/**
+ * EN: Brand logo size presets
+ * VI: Kích thước logo định sẵn
+ */
+export type LogoSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+/**
+ * EN: Brand logo component props
+ * VI: Props cho component logo thương hiệu
+ */
+export interface BrandLogoProps {
+ /** Logo variant / Biến thể logo */
+ variant?: LogoVariant;
+ /** Logo size / Kích thước logo */
+ size?: LogoSize;
+ /** Additional CSS classes / CSS classes bổ sung */
+ className?: string;
+ /** Whether to use Next.js Image optimization / Có sử dụng tối ưu Image của Next.js không */
+ priority?: boolean;
+}
+
+/**
+ * EN: Size mappings for different logo sizes
+ * VI: Ánh xạ kích thước cho các size logo khác nhau
+ */
+const sizeClasses: Record
{user.email?.[0].toUpperCase()}
- {t('home.welcome', { email: user.email })}
-
-
+
) : (
// EN: Login prompt for unauthenticated users / VI: Nhắc đăng nhập cho người dùng chưa xác thực
- + {t('home.welcome', { email: user.email })} +
+
+
{t('home.role', { role: user.role })}
-
+
+ {/* EN: Feature highlights / VI: Điểm nổi bật tính năng */}
+ {!isAuthenticated && (
+ {t('home.pleaseLogin')}
- )}
+ {[
+ { title: 'Fast Development', icon: '⚡', desc: 'Build and deploy in minutes' },
+ { title: 'Enterprise Ready', icon: '🏢', desc: 'Production-grade platform' },
+ { title: 'Developer First', icon: '💻', desc: 'Built for modern teams' },
+ ].map((feature, index) => (
+
+ )}
+
+ ))}
+
+ {feature.icon}
+
+ + {feature.title} +
+{feature.desc}
+
+
+ );
+}
+
+/**
+ * EN: Brand Logo Link - Clickable logo that links to home
+ * VI: Logo Link - Logo có thể nhấp dẫn về trang chủ
+ *
+ * @example
+ * ```tsx
+ *
+ {/* EN: Illustration / VI: Minh họa */}
+ {showIllustration && (
+
+ );
+}
+
+/**
+ * EN: Error State Component - Specialized empty state for errors
+ * VI: Component Error State - Empty state chuyên biệt cho lỗi
+ *
+ * @example
+ * ```tsx
+ *
+
+ )}
+
+ {/* EN: Title / VI: Tiêu đề */}
+ + {title} +
+ + {/* EN: Description / VI: Mô tả */} + {description && ( ++ {description} +
+ )} + + {/* EN: Actions / VI: Hành động */} + {(action || secondaryAction) && ( +
+ {action && (
+
+ )}
+ {secondaryAction && (
+
+ )}
+
+ )}
+
+ Loading...
+
+ );
+}
+
+/**
+ * EN: Skeleton component props
+ * VI: Props cho skeleton component
+ */
+export interface SkeletonProps {
+ /** Skeleton variant / Biến thể skeleton */
+ variant?: 'text' | 'circular' | 'rectangular';
+ /** Width / Chiều rộng */
+ width?: string | number;
+ /** Height / Chiều cao */
+ height?: string | number;
+ /** Additional CSS classes / CSS classes bổ sung */
+ className?: string;
+ /** Animation wave effect / Hiệu ứng sóng animation */
+ wave?: boolean;
+}
+
+/**
+ * EN: Skeleton - Loading placeholder with shimmer effect
+ * VI: Skeleton - Loading placeholder với hiệu ứng shimmer
+ *
+ * @example
+ * ```tsx
+ *
+ {wave && (
+
+ )}
+ Loading...
+
+ );
+}
+
+/**
+ * EN: Skeleton Card - Pre-built skeleton for card layouts
+ * VI: Skeleton Card - Skeleton định sẵn cho layout card
+ */
+export function SkeletonCard({ className }: { className?: string }) {
+ return (
+
+
+ );
+}
+
+/**
+ * EN: Skeleton List - Pre-built skeleton for list layouts
+ * VI: Skeleton List - Skeleton định sẵn cho layout list
+ */
+export function SkeletonList({
+ count = 3,
+ className,
+}: {
+ count?: number;
+ className?: string;
+}) {
+ return (
+
+
+
+ {Array.from({ length: count }).map((_, index) => (
+
+ );
+}
+
+/**
+ * EN: Loading Overlay - Full screen loading overlay
+ * VI: Loading Overlay - Overlay loading toàn màn hình
+ */
+export interface LoadingOverlayProps {
+ /** Loading message / Thông báo loading */
+ message?: string;
+ /** Show overlay / Hiển thị overlay */
+ show: boolean;
+ /** Spinner size / Kích thước spinner */
+ size?: SpinnerSize;
+}
+
+export function LoadingOverlay({
+ message = 'Loading...',
+ show,
+ size = 'lg',
+}: LoadingOverlayProps) {
+ if (!show) return null;
+
+ return (
+
+
+ ))}
+
+
+
+
+ );
+}
+
+/**
+ * EN: Progress Bar - Linear progress indicator with brand colors
+ * VI: Progress Bar - Thanh tiến trình với màu thương hiệu
+ */
+export interface ProgressBarProps {
+ /** Progress value (0-100) / Giá trị tiến trình (0-100) */
+ value: number;
+ /** Show percentage label / Hiển thị nhãn phần trăm */
+ showLabel?: boolean;
+ /** Additional CSS classes / CSS classes bổ sung */
+ className?: string;
+ /** Progress bar color / Màu thanh tiến trình */
+ color?: 'brand' | 'success' | 'warning' | 'error';
+}
+
+const progressColors: Record{message}
+
+
+ );
+}
diff --git a/apps/web-client/src/lib/brand-constants.ts b/apps/web-client/src/lib/brand-constants.ts
new file mode 100644
index 00000000..00cc571f
--- /dev/null
+++ b/apps/web-client/src/lib/brand-constants.ts
@@ -0,0 +1,122 @@
+/**
+ * EN: Brand Constants - Easy access to brand values
+ * VI: Hằng số thương hiệu - Truy cập dễ dàng các giá trị thương hiệu
+ *
+ * This file provides type-safe constants for brand colors, fonts, and assets.
+ * Use these instead of hardcoding values for consistency and maintainability.
+ *
+ * File này cung cấp constants type-safe cho màu sắc, fonts và assets thương hiệu.
+ * Sử dụng các constants này thay vì hardcode giá trị để đảm bảo tính nhất quán và dễ bảo trì.
+ */
+
+export const BRAND = {
+ /** EN: Brand name and tagline / VI: Tên thương hiệu và slogan */
+ name: 'GoodGo Platform',
+ tagline: 'Enterprise Microservices Platform',
+ description: 'Build, deploy, and scale microservices with confidence',
+
+ /**
+ * EN: Brand color palette - Use these for consistent branding
+ * VI: Bảng màu thương hiệu - Sử dụng để đảm bảo tính nhất quán
+ */
+ colors: {
+ /** Primary brand color - Main identity color (Blue) */
+ primary: {
+ main: 'var(--brand-primary)',
+ light: 'var(--brand-primary-light)',
+ dark: 'var(--brand-primary-dark)',
+ contrast: 'var(--brand-primary-contrast)',
+ hex: '#3B82F6', // For use outside CSS
+ },
+ /** Secondary brand color - Supporting color (Purple) */
+ secondary: {
+ main: 'var(--brand-secondary)',
+ light: 'var(--brand-secondary-light)',
+ dark: 'var(--brand-secondary-dark)',
+ hex: '#8B5CF6',
+ },
+ /** Accent color - Call-to-action color (Cyan) */
+ accent: {
+ main: 'var(--brand-accent)',
+ hex: '#06B6D4',
+ },
+ /** Brand gradients - For backgrounds and special elements */
+ gradients: {
+ primary: 'var(--brand-gradient-primary)',
+ accent: 'var(--brand-gradient-accent)',
+ },
+ },
+
+ /**
+ * EN: Typography system - Font families for different use cases
+ * VI: Hệ thống typography - Font families cho các trường hợp khác nhau
+ */
+ fonts: {
+ display: 'var(--font-display)', // For hero titles (48px+)
+ heading: 'var(--font-heading)', // For section headings (24-36px)
+ body: 'var(--font-sans)', // For body text (16px)
+ mono: 'var(--font-mono)', // For code blocks
+ },
+
+ /**
+ * EN: Brand assets paths - Logo, icons, illustrations
+ * VI: Đường dẫn brand assets - Logo, icons, illustrations
+ */
+ assets: {
+ logo: {
+ full: '/brand-assets/logo/logo-full.svg',
+ icon: '/brand-assets/logo/logo-icon.svg',
+ wordmark: '/brand-assets/logo/logo-wordmark.svg',
+ },
+ icons: {
+ favicon: '/brand-assets/icons/favicon.svg',
+ },
+ illustrations: {
+ empty: '/brand-assets/illustrations/empty-state.svg',
+ error: '/brand-assets/illustrations/error-state.svg',
+ },
+ },
+} as const;
+
+/**
+ * EN: Type-safe brand color getter
+ * VI: Hàm lấy màu thương hiệu type-safe
+ *
+ * @example
+ * ```tsx
+ * const primaryColor = getBrandColor('primary.main');
+ * const secondaryHex = getBrandColor('secondary.hex');
+ * ```
+ */
+export const getBrandColor = (path: string): string => {
+ const keys = path.split('.');
+ let value: any = BRAND.colors;
+
+ for (const key of keys) {
+ value = value?.[key];
+ }
+
+ return value || '';
+};
+
+/**
+ * EN: Brand logo path getter
+ * VI: Hàm lấy đường dẫn logo thương hiệu
+ *
+ * @param variant - Logo variant: 'full' | 'icon' | 'wordmark'
+ * @returns Logo file path
+ */
+export const getBrandLogo = (variant: 'full' | 'icon' | 'wordmark' = 'full'): string => {
+ return BRAND.assets.logo[variant];
+};
+
+/**
+ * EN: Brand illustration path getter
+ * VI: Hàm lấy đường dẫn illustration thương hiệu
+ *
+ * @param type - Illustration type: 'empty' | 'error'
+ * @returns Illustration file path
+ */
+export const getBrandIllustration = (type: 'empty' | 'error'): string => {
+ return BRAND.assets.illustrations[type];
+};
diff --git a/apps/web-client/src/styles/theme.css b/apps/web-client/src/styles/theme.css
index f576bae2..e225dda2 100644
--- a/apps/web-client/src/styles/theme.css
+++ b/apps/web-client/src/styles/theme.css
@@ -75,6 +75,51 @@
--border-focus: #FFFFFF;
/* Focus state - White */
+ /* ============================================
+ EN: Brand Colors (Primary Identity)
+ VI: Màu thương hiệu (Nhận diện chính)
+ ============================================ */
+
+ /* Primary Brand Color - Main brand identity (Blue - Tech & Trust) */
+ --brand-primary: #3B82F6;
+ --brand-primary-light: #60A5FA;
+ --brand-primary-dark: #2563EB;
+ --brand-primary-contrast: #FFFFFF;
+
+ /* Secondary Brand Color - Supporting color (Purple - Innovation) */
+ --brand-secondary: #8B5CF6;
+ --brand-secondary-light: #A78BFA;
+ --brand-secondary-dark: #7C3AED;
+
+ /* Accent Color - Call-to-action (Cyan - Energy) */
+ --brand-accent: #06B6D4;
+ --brand-accent-light: #22D3EE;
+ --brand-accent-dark: #0891B2;
+
+ /* Brand Gradients - For backgrounds and special elements */
+ --brand-gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
+ --brand-gradient-accent: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-primary) 100%);
+ --brand-gradient-vertical: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
+
+ /* ============================================
+ EN: Glassmorphism Effects
+ VI: Hiệu ứng Glassmorphism
+ ============================================ */
+
+ --glass-bg: rgba(255, 255, 255, 0.05);
+ --glass-bg-hover: rgba(255, 255, 255, 0.08);
+ --glass-border: rgba(255, 255, 255, 0.1);
+ --glass-blur: 10px;
+
+ /* ============================================
+ EN: Extended Shadows & Effects
+ VI: Shadows & Effects mở rộng
+ ============================================ */
+
+ --shadow-brand: 0 10px 40px rgba(59, 130, 246, 0.2);
+ --shadow-brand-lg: 0 20px 60px rgba(59, 130, 246, 0.3);
+ --shadow-colored: 0 8px 30px rgba(59, 130, 246, 0.25);
+
/* ============================================
EN: Light Mode Colors (Secondary Theme)
VI: Màu sắc cho Light Mode (Theme phụ)
@@ -95,6 +140,12 @@
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+ /* Display Font - For hero titles (48px+) */
+ --font-display: "Inter Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+ /* Heading Font - For section headings (24-36px) */
+ --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
/* Type Scale / Kích thước chữ */
--text-6xl: 3.75rem;
/* 60px - Hero titles */
@@ -243,6 +294,23 @@
/* Complex animations */
--duration-slower: 500ms;
/* Page transitions */
+
+ /* ============================================
+ EN: Advanced Motion Tokens
+ VI: Token chuyển động nâng cao
+ ============================================ */
+
+ /* Motion Ease Functions - For micro-interactions */
+ --motion-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ --motion-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
+
+ /* Hover Scale - For interactive elements */
+ --hover-scale-sm: 1.02;
+ --hover-scale-md: 1.05;
+ --hover-scale-lg: 1.1;
+
+ /* Active Scale - For pressed states */
+ --active-scale: 0.98;
}
/* ============================================
diff --git a/apps/web-client/tailwind.config.js b/apps/web-client/tailwind.config.js
index 6348b0d3..978e4c6b 100644
--- a/apps/web-client/tailwind.config.js
+++ b/apps/web-client/tailwind.config.js
@@ -58,6 +58,31 @@ module.exports = {
secondary: 'var(--border-secondary)',
focus: 'var(--border-focus)',
},
+ // EN: Brand colors for easy access / VI: Màu thương hiệu dễ sử dụng
+ brand: {
+ primary: {
+ DEFAULT: 'var(--brand-primary)',
+ light: 'var(--brand-primary-light)',
+ dark: 'var(--brand-primary-dark)',
+ contrast: 'var(--brand-primary-contrast)',
+ },
+ secondary: {
+ DEFAULT: 'var(--brand-secondary)',
+ light: 'var(--brand-secondary-light)',
+ dark: 'var(--brand-secondary-dark)',
+ },
+ accent: {
+ DEFAULT: 'var(--brand-accent)',
+ light: 'var(--brand-accent-light)',
+ dark: 'var(--brand-accent-dark)',
+ },
+ },
+ // EN: Glassmorphism utilities / VI: Utilities glassmorphism
+ glass: {
+ bg: 'var(--glass-bg)',
+ 'bg-hover': 'var(--glass-bg-hover)',
+ border: 'var(--glass-border)',
+ },
},
// EN: Font families from CSS variables
// VI: Font families từ CSS variables
@@ -120,12 +145,26 @@ module.exports = {
},
// EN: Box shadows from CSS variables
// VI: Đổ bóng từ CSS variables
+ // EN: Brand gradients / VI: Gradients thương hiệu
+ backgroundImage: {
+ 'brand-gradient': 'var(--brand-gradient-primary)',
+ 'brand-gradient-accent': 'var(--brand-gradient-accent)',
+ 'brand-gradient-vertical': 'var(--brand-gradient-vertical)',
+ },
+ // EN: Extended shadows / VI: Shadows mở rộng
boxShadow: {
sm: 'var(--shadow-sm)',
md: 'var(--shadow-md)',
lg: 'var(--shadow-lg)',
xl: 'var(--shadow-xl)',
glow: 'var(--shadow-glow)',
+ brand: 'var(--shadow-brand)',
+ 'brand-lg': 'var(--shadow-brand-lg)',
+ colored: 'var(--shadow-colored)',
+ },
+ // EN: Glassmorphism backdrop blur / VI: Backdrop blur glassmorphism
+ backdropBlur: {
+ glass: 'var(--glass-blur)',
},
// EN: Animation timing functions
// VI: Hàm thời gian animation
+
+
+
+
+ {showLabel && (
+
+ {Math.round(clampedValue)}%
+
+ )}
+