Next.js Project Structure
Next.js App Router, Tailwind mobile-first responsive design, Magic UI for selected polished motion/components.
app/(public)
Homepage, about, services, articles, digital Wang entry page, contact, legal/safety pages.
app/(admin)
Authenticated dashboard for pages, articles, media, knowledge base, AI settings, intake submissions.
app/api
Intake, RAG chat, realtime session tokens, embeddings sync, media upload, admin actions.
components
Domain components, layout components, article components, chat/avatar components, Magic UI wrappers.
Mobile First
Single-column default, sticky bottom CTAs where useful, desktop upgrades with md/lg breakpoints.
Tailwind Design Tokens
Calm professional palette, readable Chinese typography, restrained motion, accessible contrast.
Magic UI Usage
Use sparingly for premium polish: hero reveal, article cards, avatar entry, trust sections. Avoid gimmicky motion.
Avatar Surface
Responsive layout: mobile chat-first, desktop split view with avatar/video panel and formatted guidance.