✅ Brand Identity System - Complete logo suite, favicons, and illustrations
✅ Design System - Professional design tokens with brand colors, gradients, and glassmorphism
✅ UI Component Library - Enhanced components with brand variants (Button, EmptyState, Loading States, Logo)
✅ Dark/Light Theme - Automatic theme switching with system preference
✅ Internationalization - Multi-language support (i18n ready)
✅ TypeScript - Full type safety
✅ Tailwind CSS 4 - Modern utility-first styling
✅ Next.js 14 - App Router with RSC
✅ Accessibility - WCAG 2.1 AA compliant
✅ PWA Ready - Progressive Web App support

Tech Stack

Framework: Next.js 14 (App Router)
Language: TypeScript 5+
Styling: Tailwind CSS 4 (CSS-first)
State Management: Zustand
API Client: @goodgo/http-client
Testing: Vitest + Playwright
Component Development: Storybook

##Development / Phát Triển

# Install dependencies / Cài đặt dependencies
pnpm install

# Start dev server / Khởi động dev server
pnpm dev
# → http://localhost:3000

# Start Storybook / Khởi động Storybook
pnpm storybook
# → http://localhost:6006

# Build for production / Build cho production
pnpm build

# Type checking / Kiểm tra kiểu
pnpm typecheck

# Lint / Kiểm tra lỗi
pnpm lint

Environment Variables / Biến Môi Trường

Create .env.local file:

# API URL
NEXT_PUBLIC_API_URL=http://localhost/api/v1

Brand Assets / Tài Sản Thương Hiệu

Brand assets are located in /public/brand-assets/:

Logos: /brand-assets/logo/ (full, icon, wordmark variants)
Icons: /brand-assets/icons/ (favicon)
Illustrations: /brand-assets/illustrations/ (empty state, error state)

Usage in components:

import { BrandLogo } from '@/components/ui/brand-logo';
import { BRAND } from '@/lib/brand-constants';

// Logo component
<BrandLogo variant="full" size="lg" />

// Brand constants
const primaryColor = BRAND.colors.primary.hex; // #3B82F6

UI Components / Components Giao Diện

BrandLogo

import { BrandLogo, BrandLogoLink } from '@/components/ui/brand-logo';

<BrandLogo variant="full" size="xl" />
<BrandLogoLink variant="icon" size="md" href="/" />

Button with Brand Variants

import { Button } from '@/components/ui/button';

<Button variant="brand">Get Started</Button>
<Button variant="glass">Learn More</Button>

Empty State

import { EmptyState, ErrorState } from '@/components/ui/empty-state';

<EmptyState
  title="No items found"
  description="Try adding some items"
  action={{ label: 'Add Item', onClick: handleAdd }}
/>

Loading States

import {
  BrandSpinner,
  Skeleton,
  SkeletonCard,
  LoadingOverlay,
  ProgressBar
} from '@/components/ui/loading-states';

<BrandSpinner size="lg" color="brand" />
<SkeletonCard />
<LoadingOverlay show={isLoading} message="Loading..." />
<ProgressBar value={progress} showLabel />

Design System / Hệ Thống Thiết Kế

Brand Colors

/* Primary (Blue) - Tech & Trust */
--brand-primary: #3B82F6;

/* Secondary (Purple) - Innovation */
--brand-secondary: #8B5CF6;

/* Accent (Cyan) - Energy */
--brand-accent: #06B6D4;

Tailwind Utilities

// Brand colors
<div className="bg-brand-primary text-white" />
<div className="bg-brand-gradient" />

// Glassmorphism
<div className="bg-glass-bg backdrop-blur-glass border-glass-border" />

// Brand shadows
<div className="shadow-brand hover:shadow-brand-lg" />

Project Structure / Cấu Trúc Dự Án

apps/web-client/
├── public/
│   └── brand-assets/       # Brand logos, icons, illustrations
├── src/
│   ├── app/               # Next.js App Router pages
│   ├── components/
│   │   └── ui/           # Reusable UI components
│   ├── lib/
│   │   └── brand-constants.ts  # Brand helper functions
│   ├── styles/
│   │   └── theme.css     # Design system tokens
│   ├── contexts/         # React contexts (Theme, etc.)
│   ├── hooks/            # Custom React hooks
│   ├── providers/        # Provider components
│   └── stores/           # Zustand stores
└── tailwind.config.js    # Tailwind configuration

Contributing / Đóng Góp

Please read CONTRIBUTING.md for details.

License / Giấy Phép

Proprietary - GoodGo Platform