feat: update brand assets (#257)

* feat(pages): redesign landing page UI with i18n support

- Redesign all sections based on design file: Navbar, Hero, Highlights, UseCases, Features, Benchmark, QuickStart, Footer
- Add scroll fade-in animation with IntersectionObserver
- Implement full i18n (English/Chinese) with language toggle button
- Add SVG icons and image assets
- Style refinements: table borders, step containers, button styles, spacing

* feat(pages): redesign Docs page with i18n, responsive sidebar, and aligned copy interaction

- Redesign DocsPage UI based on reference HTML design
- Add i18n support for all Docs content (en/zh/ja)
- Fix right sidebar CONTENTS nav with fixed positioning
- Add container backgrounds (4% opacity, 16% border)
- Hide CONTENTS sidebar on mobile instead of alternative UI
- Align copy icon and toast interaction with QuickStart section
- Add new SVG icon assets for docs page
- Add Japanese language support
- Add ColorBends animated background component
- Add responsive hooks and FadeInSection animation
- Add Benchmark, Features, QuickStart standalone pages
- Update Navbar, Footer, and LandingPage components

* refactor: cleanup design drafts, rename Chinese assets, UI improvements

- Remove unused design draft folders (html-files, html-files (1), inpt, doc)
- Rename Chinese-named image files (容器-4_*.svg → provider-*.svg)
- Add language switcher icon to Navbar with dynamic character display
- Align Footer padding with Navbar (32px desktop, 16px mobile)
- Fix CONTENTS sidebar position on wide screens
- Add i18n support for Docs CONTENTS title
- Fix clipboard copy fallback for HTTP/LAN environments
- Adjust Toast padding, benchmark medal sizes
- Swap highlight stats positions (Adoption Rate ↔ Active Users)
- Update stat4 value to 25.10% and stat5 caption to Battle-tested
- Unify Hero buttons size with Navbar Get Started button

* refactor: rename icon assets with semantic English names and cleanup unused files

- Rename all svg_*.svg icons to semantic names based on usage context:
  - icon-feature-*.svg for feature section icons
  - icon-usecase-*.svg for use case section icons
  - icon-chevron-*.svg, icon-copy.svg, icon-play.svg for UI controls
  - icon-github.svg, icon-language.svg, icon-sort.svg, icon-terminal-prompt.svg
- Remove unused assets: 5 unreferenced svg icons, image_9e7821.png, provider-8.svg
- Remove debug screenshots: debug-screenshot.png, debug-wide.png
- Remove .vsix build artifact and add *.vsix to .gitignore
- Update all import paths in components accordingly

* fix: address PR review feedback - bugs and improvements

- Fix copy-paste bug: step3Label1 had wrong text in all 3 languages
  - en: 'Interactive Setup (Recommended)' → 'Review Commands'
  - zh: '交互式设置（推荐）' → '运行审查命令'
  - ja: '対話式セットアップ（推奨）' → 'レビュー実行'
- Fix inconsistent indentation (4 spaces → 2 spaces) in i18n files
- Add .catch() handler for navigator.clipboard.writeText() in QuickStartSection
- Check document.execCommand('copy') return value before showing toast
- Extract fallbackCopy helper to deduplicate clipboard logic
- Remove unused useCallback import from HighlightsSection
- Move @types/three from dependencies to devDependencies
- Add i18n key 'hero.terminal' for hardcoded Terminal label

* fix: revert vscode .gitignore change and remove duplicate root SVGs

- Revert extensions/vscode/.gitignore to upstream state (remove *.vsix rule)
- Remove root-level brandicon.svg, claude code icon.svg, codex icon.svg
  (identical copies already exist in pages/src/assets/images/ with proper names)

* fix: reorder highlights stats to match design reference

- Reorder stats: 20K+ Active Users → > 30% Adoption Rate → 1M+ Tasks → 1/9 Token Cost → 25.10% AACR-BENCH
- Update stat1 value from 30K+ to 20K+
- Sync all three languages (en/zh/ja)

* chore: remove unused debug screenshots

* chore: remove unused image_9e7821.png

* feat(pages): consolidate icons, add scroll-to-top, responsive titles

- Merge provider-1~7.svg into single icon-ocr-source.svg
- Add ScrollToTop component for tab navigation reset
- Add tablet breakpoint (36px) to section titles for responsive scaling

* refactor(pages): extract shared responsive title hook, fix indentation

- Create useSectionTitleStyle hook to eliminate nested ternaries
- Replace duplicated responsive logic in 4 section components
- Fix fragment children indentation in App.tsx

Addresses code review feedback from PR #241

* feat(pages): add install badge with shimmer effect and copy functionality

- Add install badge above hero title with download/copy icons
- Implement text shimmer animation (left-to-right, 5s cycle)
- Add clipboard copy with secure context check and fallback
- Set download icon color to #2bde5e
- Set badge background to rgba(0,0,0,0.8)
- Fix mobile responsive width for badge

* fix(pages): address PR #254 code review feedback

- Add prefers-reduced-motion media query for shimmer animation
- Extract install command to INSTALL_CMD constant (DRY)
- Use t() i18n function for toast messages (hero.copied/hero.copyFailed)
- Show error feedback when copy operation fails
- Refactor handleCopy to use async/await instead of .then/.catch

* fix(pages): align hero install badge toast style with QuickStart section

- Use consistent toast visual: rgba(255,255,255,0.1) bg, 0.2 border, 0.85 text
- Match padding (5px 14px), borderRadius (6px), fontSize (12px)
- Position at top: 88px (below navbar)

* fix(pages): separate green download icon for hero badge, restore docs icon

- Restore doc-download.svg to original white (#FFFFFF, opacity 0.8) for Docs page
- Create doc-download-green.svg (#2bde5e) for Hero install badge
- Update HeroSection import to use green variant

* fix(pages): restore doc-download.svg to white for Docs page

- Restore doc-download.svg fill to #FFFFFF with opacity 0.8
- Hero badge uses separate doc-download-green.svg (#2bde5e)

* feat: update brand assets - replace navbar logo, favicon and logo-core.svg

* feat(docs): replace icons with semantic @agentscope-ai/icons components

- Branch Diff → SparkContrastView2Line (comparison)
- Single Commit → SparkHistoryLine (history)
- Requirement Context → SparkDocumentLine (document)
- JSON Output → SparkCode02Line (code format)
- Agent Mode → SparkAgentLine (agent)
- Preview → SparkVisibleLine (visibility)
- Scan → SparkScanLine (scan)
- Scan Path → SparkTargetLine (target)
- Scan File → SparkFileCodeLine (code file)

* refactor: replace logo.svg content directly instead of adding favicon.svg

Remove redundant favicon.svg, update logo.svg with new brand icon content.
No reference changes needed in index.html.

* fix: simplify logo-core.svg for GitHub README rendering

Remove mask, clipPath and mix-blend-mode that are not supported
by GitHub's SVG sanitizer, causing the icon to be invisible.

pages/package.json

@@ -8,6 +8,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@agentscope-ai/icons": "^1.0.68",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.0",

pages/src/pages/DocsPage.tsx

@@ -8,6 +8,17 @@ import docDownloadIcon from '../assets/icons/doc-download.svg';
 import docCheckCircleIcon from '../assets/icons/doc-check-circle.svg';
 import docEditIcon from '../assets/icons/doc-edit.svg';
 import docContentsIcon from '../assets/icons/doc-contents.svg';
+import {
+  SparkContrastView2Line,
+  SparkHistoryLine,
+  SparkDocumentLine,
+  SparkCode02Line,
+  SparkAgentLine,
+  SparkVisibleLine,
+  SparkScanLine,
+  SparkTargetLine,
+  SparkFileCodeLine,
+} from '@agentscope-ai/icons';
 
 /* Toast - same as QuickStartSection */
 const Toast: React.FC<{ message: string; visible: boolean }> = ({ message, visible }) =>
@@ -87,6 +98,13 @@ const IconBox: React.FC<{ icon: string }> = ({ icon }) => (
   </div>
 );
 
+/* ─── Spark Icon box (same style, wraps React icon component) ─── */
+const SparkIconBox: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div style={{ width: 32, height: 32, display: 'flex', flex: 'none', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.04)', borderRadius: 6, color: 'rgba(255,255,255,0.8)' }}>
+    {children}
+  </div>
+);
+
 const DocsPage: React.FC = () => {
   const [activeSection, setActiveSection] = useState('overview');
   const [toastVisible, setToastVisible] = useState(false);
@@ -306,7 +324,7 @@ const DocsPage: React.FC = () => {
               {/* Branch Diff Mode */}
               <div style={{ marginBottom: 12, background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 16, border: '1px solid rgba(255,255,255,0.16)' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
-                  <IconBox icon={docDownloadIcon} />
+                  <SparkIconBox><SparkContrastView2Line size={16} /></SparkIconBox>
                   <div style={{ display: 'flex', flex: 1, flexDirection: 'column' }}>
                     <span style={{ fontSize: 14, fontWeight: 500, color: '#FFFFFF' }}>{t('docs.reviewBranch')}</span>
                     <p style={{ margin: 0, fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: '20px' }}>{t('docs.reviewBranchDesc')}</p>
@@ -317,7 +335,7 @@ const DocsPage: React.FC = () => {
               {/* Single Commit Mode */}
               <div style={{ marginBottom: 12, background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 16, border: '1px solid rgba(255,255,255,0.16)' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
-                  <IconBox icon={docDownloadIcon} />
+                  <SparkIconBox><SparkHistoryLine size={16} /></SparkIconBox>
                   <div style={{ display: 'flex', flex: 1, flexDirection: 'column' }}>
                     <span style={{ fontSize: 14, fontWeight: 500, color: '#FFFFFF' }}>{t('docs.reviewCommit')}</span>
                     <p style={{ margin: 0, fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: '20px' }}>{t('docs.reviewCommitDesc')}</p>
@@ -330,7 +348,7 @@ const DocsPage: React.FC = () => {
               {/* Review with Requirement Context */}
               <div style={{ marginBottom: 12, background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 16, border: '1px solid rgba(255,255,255,0.16)' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
-                  <IconBox icon={docEditIcon} />
+                  <SparkIconBox><SparkDocumentLine size={16} /></SparkIconBox>
                   <div style={{ display: 'flex', flex: 1, flexDirection: 'column' }}>
                     <span style={{ fontSize: 14, fontWeight: 500, color: '#FFFFFF' }}>{t('docs.reviewBackground')}</span>
                     <p style={{ margin: 0, fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: '20px' }}>{t('docs.reviewBackgroundDesc')}</p>
@@ -341,7 +359,7 @@ const DocsPage: React.FC = () => {
               {/* JSON Output */}
               <div style={{ marginBottom: 12, background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 16, border: '1px solid rgba(255,255,255,0.16)' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
-                  <IconBox icon={docDownloadIcon} />
+                  <SparkIconBox><SparkCode02Line size={16} /></SparkIconBox>
                   <div style={{ display: 'flex', flex: 1, flexDirection: 'column' }}>
                     <span style={{ fontSize: 14, fontWeight: 500, color: '#FFFFFF' }}>{t('docs.reviewJson')}</span>
                     <p style={{ margin: 0, fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: '20px' }}>{t('docs.reviewJsonDesc')}</p>
@@ -352,7 +370,7 @@ const DocsPage: React.FC = () => {
               {/* Agent Mode */}
               <div style={{ marginBottom: 12, background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 16, border: '1px solid rgba(255,255,255,0.16)' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
-                  <IconBox icon={docDownloadIcon} />
+                  <SparkIconBox><SparkAgentLine size={16} /></SparkIconBox>
                   <div style={{ display: 'flex', flex: 1, flexDirection: 'column' }}>
                     <span style={{ fontSize: 14, fontWeight: 500, color: '#FFFFFF' }}>{t('docs.reviewAgent')}</span>
                     <p style={{ margin: 0, fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: '20px' }}>{t('docs.reviewAgentDesc')}</p>
@@ -363,7 +381,7 @@ const DocsPage: React.FC = () => {
               {/* Dry-Run Preview */}
               <div style={{ background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 16, border: '1px solid rgba(255,255,255,0.16)' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
-                  <IconBox icon={docCheckCircleIcon} />
+                  <SparkIconBox><SparkVisibleLine size={16} /></SparkIconBox>
                   <div style={{ display: 'flex', flex: 1, flexDirection: 'column' }}>
                     <span style={{ fontSize: 14, fontWeight: 500, color: '#FFFFFF' }}>{t('docs.reviewPreviewLabel')}</span>
                     <p style={{ margin: 0, fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: '20px' }}>{t('docs.reviewPreviewDesc')}</p>
@@ -420,7 +438,7 @@ const DocsPage: React.FC = () => {
               <p style={subTitle}>{t('docs.scanVsTitle')}</p>
               <div style={{ marginBottom: 12, background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 16, border: '1px solid rgba(255,255,255,0.16)' }}>
                 <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
-                  <IconBox icon={docEditIcon} />
+                  <SparkIconBox><SparkContrastView2Line size={16} /></SparkIconBox>
                   <div style={{ display: 'flex', flex: 1, flexDirection: 'column' }}>
                     <span style={{ fontSize: 14, fontWeight: 500, color: '#FFFFFF' }}>{t('docs.scanVsReviewLabel')}</span>
                     <p style={{ margin: 0, fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: '20px' }}>{t('docs.scanVsReview').replace(/<\/?code>/g, '')}</p>
@@ -429,7 +447,7 @@ const DocsPage: React.FC = () => {
               </div>
               <div style={{ marginBottom: 24, background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 16, border: '1px solid rgba(255,255,255,0.16)' }}>
                 <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
-                  <IconBox icon={docDownloadIcon} />
+                  <SparkIconBox><SparkScanLine size={16} /></SparkIconBox>
                   <div style={{ display: 'flex', flex: 1, flexDirection: 'column' }}>
                     <span style={{ fontSize: 14, fontWeight: 500, color: '#FFFFFF' }}>{t('docs.scanVsScanLabel')}</span>
                     <p style={{ margin: 0, fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: '20px' }}>{t('docs.scanVsScan').replace(/<\/?code>/g, '')}</p>
@@ -440,7 +458,7 @@ const DocsPage: React.FC = () => {
               <p style={subTitle}>{t('docs.scanUsage')}</p>
               <div style={{ marginBottom: 12, background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 16, border: '1px solid rgba(255,255,255,0.16)' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
-                  <IconBox icon={docDownloadIcon} />
+                  <SparkIconBox><SparkScanLine size={16} /></SparkIconBox>
                   <div style={{ display: 'flex', flex: 1, flexDirection: 'column' }}>
                     <span style={{ fontSize: 14, fontWeight: 500, color: '#FFFFFF' }}>{t('docs.scanUsageWhole')}</span>
                     <p style={{ margin: 0, fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: '20px' }}>{t('docs.scanUsageWholeDesc')}</p>
@@ -450,7 +468,7 @@ const DocsPage: React.FC = () => {
               </div>
               <div style={{ marginBottom: 12, background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 16, border: '1px solid rgba(255,255,255,0.16)' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
-                  <IconBox icon={docEditIcon} />
+                  <SparkIconBox><SparkTargetLine size={16} /></SparkIconBox>
                   <div style={{ display: 'flex', flex: 1, flexDirection: 'column' }}>
                     <span style={{ fontSize: 14, fontWeight: 500, color: '#FFFFFF' }}>{t('docs.scanUsagePath')}</span>
                     <p style={{ margin: 0, fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: '20px' }}>{t('docs.scanUsagePathDesc')}</p>
@@ -460,7 +478,7 @@ const DocsPage: React.FC = () => {
               </div>
               <div style={{ marginBottom: 12, background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 16, border: '1px solid rgba(255,255,255,0.16)' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
-                  <IconBox icon={docEditIcon} />
+                  <SparkIconBox><SparkFileCodeLine size={16} /></SparkIconBox>
                   <div style={{ display: 'flex', flex: 1, flexDirection: 'column' }}>
                     <span style={{ fontSize: 14, fontWeight: 500, color: '#FFFFFF' }}>{t('docs.scanUsageFile')}</span>
                     <p style={{ margin: 0, fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: '20px' }}>{t('docs.scanUsageFileDesc')}</p>
@@ -470,7 +488,7 @@ const DocsPage: React.FC = () => {
               </div>
               <div style={{ background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 16, border: '1px solid rgba(255,255,255,0.16)' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
-                  <IconBox icon={docCheckCircleIcon} />
+                  <SparkIconBox><SparkVisibleLine size={16} /></SparkIconBox>
                   <div style={{ display: 'flex', flex: 1, flexDirection: 'column' }}>
                     <span style={{ fontSize: 14, fontWeight: 500, color: '#FFFFFF' }}>{t('docs.scanUsagePreviewLabel')}</span>
                     <p style={{ margin: 0, fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: '20px' }}>{t('docs.scanUsagePreviewDesc')}</p>