feat(website): add multilingual commercial site for OSS + Fab UMG offerings

[Copilot]

Adds a production-ready static website to the copilot/website branch promoting both the open-source GitHub plugin and the commercial Fab version, with full Chinese/English multilingual support deployable via GitHub Pages.

Pages (9 HTML)

• index.html — Hero with particle field, typing carousel, stats bar, OSS vs Commercial comparison preview, YouTube demo embeds
• commercial.html — "No Python. No Setup. Just Talk." positioning; inline SVG multi-agent architecture diagram; FAQ accordion
• open-source.html — Full 40+ API catalog across 5 categories; SVG system architecture diagram
• features.html — 18-row OSS vs Commercial comparison table; widget API capability matrix
• architecture.html — Annotated SVG system diagrams with animated stroke-dashoffset flow lines
• workflow.html — Animated workflow loop SVG; 6 use-case scenarios with real prompt examples
• roadmap.html — 4-phase vertical timeline: Released → In Progress → Planned → Vision
• getting-started.html — Tabbed guide (OSS 8-step / Commercial 6-step); troubleshooting FAQ
• contact.html — GitHub / Fab / Discussions cards

Assets

• assets/css/main.css — Dark tech theme (#0a0a0f, purple/blue/cyan), CSS custom properties, responsive, Firefox + WebKit scrollbar, 30+ animation classes
• assets/js/main.js — Vanilla JS only: i18n loader, nav/footer injection, IntersectionObserver reveals, counter animations, SVG stroke animations, typing carousel, particle field, FAQ accordion, tab switching
• assets/i18n/{en,zh}.json — 151 keys each, full parity; data-i18n="key" → textContent (no innerHTML, XSS-safe); language persisted to localStorage, auto-detected from navigator.language

Path safety

getBase() uses the browser's URL API for double-normalized same-origin path extraction — no manual .. string matching:

const url = new URL(s.src);                          // normalizes %2e%2e etc.
const base = path.slice(0, path.length - suffix.length);
const normalized = new URL(base || '.', location.origin + '/').pathname;
if (/^[/a-zA-Z0-9_.-]*$/.test(normalized) && !normalized.includes('..')) return normalized;

GitHub Pages deployment

Settings → Pages → Branch: website, Folder: / (root) → https://winyunq.github.io/UnrealMotionGraphicsMCP/

Full deployment instructions in README-website.md.

Original prompt

Create a comprehensive multilingual commercial website for the repository, deployed from a new website branch in winyunq/UnrealMotionGraphicsMCP, with rich content that promotes both the open-source and commercial Fab versions.

Context

• Target repo: winyunq/UnrealMotionGraphicsMCP
• Preferred branch for website deployment: website
• User wants direct operation in the open-source repo if possible.
• Fab listing URL to feature prominently: https://www.fab.com/zh-cn/listings/f70dbcb0-11e4-46bf-b3f7-9f30ba2c9b71
• Product positioning details provided by user:
  • Focused entirely on UE5 UMG.
  • Commercial Fab version does not depend on Python.
  • Commercial version has multi-agent capabilities.
  • Goal UX: UE5 UI designers can directly converse with the system and use it with minimal/no technical barrier.
• User explicitly asks for multilingual support, highly detailed and rich website, with technical roadmap, multiple pages, process diagrams, and animations.

Goals

1. Create and push a production-ready static website to a new branch named website.
2. Make website content highly detailed, rich, and marketing-quality while technically credible.
3. Support multilingual content (at least Chinese + English).
4. Promote both:
   • Open-source UnrealMotionGraphicsMCP
   • Commercial Fab version
5. Highlight key differentiators:
   • UMG-first specialization
   • Fab version no Python dependency
   • Multi-agent architecture in Fab version
   • Low-barrier conversational workflow for UE5 UI creators
6. Include multiple pages with clear navigation and deep technical content.
7. Include process diagrams and animated sections (CSS/SVG/JS-based) suitable for GitHub Pages static hosting.
8. Include deployment guidance for GitHub Pages from website branch.

Deliverables

Implement a complete static website structure in the repository, including but not limited to:

• index.html (landing page)
• open-source.html
• commercial.html
• features.html
• architecture.html
• workflow.html
• roadmap.html
• docs.html or getting-started.html
• contact.html (optional but preferred)
• Language switch mechanism (e.g., i18n JSON files + JS, or mirrored pages under /en and /zh)
• Shared assets:
  • assets/css/*
  • assets/js/*
  • assets/img/*
  • Optional assets/i18n/*
• README for website deployment:
  • website/README.md or root-level section documenting deployment from website branch to GitHub Pages.

Content Requirements

• Strong hero messaging and CTA buttons:
  • View open-source repo/docs
  • Visit Fab listing / buy commercial version
• Explicit comparison section/table:
  • Open-source vs Fab (capabilities, target users, integration depth, Python dependency, multi-agent support, support level, etc.)
• Technical roadmap section with phased milestones.
• Architecture explanation emphasizing UMG-centric design.
• Workflow/process diagrams for:
  • Conversational UI design flow
  • Multi-agent task orchestration (commercial)
  • UMG generation/integration pipeline
• Animation demo sections (lightweight web animations):
  • Step progression animations
  • Card reveal / timeline motion
  • Optional SVG flow animation for architecture/workflow
• Include clear multilingual copy in both Chinese and English for core pages.

Design/UX Requirements

• Modern “commercial product” visual style.
• Responsive layout (desktop/tablet/mobile).
• Consistent header/footer navigation across pages.
• Accessible color contrast and readable typography.
• Fast loading static assets suitable for GitHub Pages.

SEO & Metadata

• Per-page title and meta description.
• Open Graph/Twitter card basics.
• Canonical/internal linking hygiene.

Technical Constraints

• Must work as static site on GitHub Pages (no server runtime required).
• Avoid dependencies requiring build tooling unless already present and easy to run.
• If using JS libraries, prefer minimal and CDN-safe options or pure JS/CSS.

Git Operations

• Create branch website from main.
• Commit all required website files.
• Push website branch to winyunq/UnrealMotionGraphicsMCP.
• Open a PR from website to main with a concise summary of what was built and how to deploy.

PR Expectations

PR title suggestion: feat(website): add multilingual commercial site for OSS + Fab UMG offerings

PR description should include:

• What pages were added
• How multilingual support works
• Key messaging for OSS vs commercial versions
• Diagram/animation implementation approach
• GitHub Pages deployment instructions
• Any assumptions/placeholders for media assets/screenshots

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: 我想为我的开源仓库，和fab仓库，做一个"商业网站"，我需要一个website的分支用于发布此网页。

https://www.fab.com/zh-cn/listings/f70dbcb0-11e4-46bf-b3f7-9f30ba2c9b71

https://github.com/winyunq/UnrealMotionGraphicsMCP

如果你能直接在https://github.com/winyunq/UnrealMotionGraphicsMCP上操作是最好的...

This pull request was created from Copilot chat.