diff --git a/.cursor/skills/figma-ui-implementation/SKILL.md b/.cursor/skills/figma-ui-implementation/SKILL.md index acfa285..8de4906 100644 --- a/.cursor/skills/figma-ui-implementation/SKILL.md +++ b/.cursor/skills/figma-ui-implementation/SKILL.md @@ -40,6 +40,8 @@ Hard Constraints 图片资源必须使用设计稿中导出的真实图片文件（如 PNG、JPG、WebP 等），禁止使用 SVG、CSS 绘制（如 ::before、::after、background 渐变模拟）、或任何其他技术手段来替代或模拟图片内容。图片的视觉内容（产品图、人物头像、图标等）必须与设计稿保持一致。 +当当前 Codex 环境无法从 Figma 临时资源链接下载图片到本地时，不要阻塞实现流程；所有图片资源先直接使用 Figma MCP 返回的临时资源地址，并在代码或交付说明中标明后续可替换为本地导出文件。 + Implementation Rules Prefer project design tokens and existing components when they match the Figma values exactly. @@ -71,4 +73,6 @@ Basic responsive behavior works on common screen widths. All images are using real exported assets (PNG/JPG/WebP), not SVG substitutions or CSS-drawn alternatives. +When local Figma asset download is unavailable in Codex, images temporarily use the Figma MCP asset URLs and are clearly noted for later local replacement. + SCSS nested structure strictly mirrors the HTML structure, with no use of abbreviated class name selectors like &_. diff --git a/src/api/api.ts b/src/api/api.ts index 5e74dbf..bec0f49 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -455,6 +455,9 @@ export type ParamConfigResponse = { musicStyleSugList?: unknown; servicePhone?: string; serviceQrCode?: string; + businessCooperation?: string; + joinUs?: string; + officialPublicAccount?: string; userFileFolderMaxLevel?: number; }; }; diff --git a/src/assets/images/index/brand_logo.png b/src/assets/images/index/brand_logo.png new file mode 100644 index 0000000..42d82ad Binary files /dev/null and b/src/assets/images/index/brand_logo.png differ diff --git a/src/assets/images/index/brand_logo2.png b/src/assets/images/index/brand_logo2.png new file mode 100644 index 0000000..c6bf239 Binary files /dev/null and b/src/assets/images/index/brand_logo2.png differ diff --git a/src/assets/images/index/cloud_auto_match_icon.png b/src/assets/images/index/cloud_auto_match_icon.png new file mode 100644 index 0000000..070709d Binary files /dev/null and b/src/assets/images/index/cloud_auto_match_icon.png differ diff --git a/src/assets/images/index/cloud_ip_asset_reuse_icon.png b/src/assets/images/index/cloud_ip_asset_reuse_icon.png new file mode 100644 index 0000000..19eec8f Binary files /dev/null and b/src/assets/images/index/cloud_ip_asset_reuse_icon.png differ diff --git a/src/assets/images/index/cloud_one_prompt_icon.png b/src/assets/images/index/cloud_one_prompt_icon.png new file mode 100644 index 0000000..68feabb Binary files /dev/null and b/src/assets/images/index/cloud_one_prompt_icon.png differ diff --git a/src/assets/images/index/cloud_team_collaboration_icon.png b/src/assets/images/index/cloud_team_collaboration_icon.png new file mode 100644 index 0000000..570fb00 Binary files /dev/null and b/src/assets/images/index/cloud_team_collaboration_icon.png differ diff --git a/src/assets/images/index/feature_check_icon.png b/src/assets/images/index/feature_check_icon.png new file mode 100644 index 0000000..88403d7 Binary files /dev/null and b/src/assets/images/index/feature_check_icon.png differ diff --git a/src/assets/images/index/header_login_arrow_icon.png b/src/assets/images/index/header_login_arrow_icon.png new file mode 100644 index 0000000..25d2459 Binary files /dev/null and b/src/assets/images/index/header_login_arrow_icon.png differ diff --git a/src/assets/images/index/hero_creator_lifestyle_bg.png b/src/assets/images/index/hero_creator_lifestyle_bg.png new file mode 100644 index 0000000..0240f79 Binary files /dev/null and b/src/assets/images/index/hero_creator_lifestyle_bg.png differ diff --git a/src/assets/images/index/hero_download_arrow_icon.png b/src/assets/images/index/hero_download_arrow_icon.png new file mode 100644 index 0000000..ac1676f Binary files /dev/null and b/src/assets/images/index/hero_download_arrow_icon.png differ diff --git a/src/assets/images/index/popi_art_assets_preview.png b/src/assets/images/index/popi_art_assets_preview.png new file mode 100644 index 0000000..be2a76c Binary files /dev/null and b/src/assets/images/index/popi_art_assets_preview.png differ diff --git a/src/assets/images/index/popi_art_workspace_preview.png b/src/assets/images/index/popi_art_workspace_preview.png new file mode 100644 index 0000000..00e6eb8 Binary files /dev/null and b/src/assets/images/index/popi_art_workspace_preview.png differ diff --git a/src/assets/images/index/popi_mcn_agent_preview.png b/src/assets/images/index/popi_mcn_agent_preview.png new file mode 100644 index 0000000..af26e28 Binary files /dev/null and b/src/assets/images/index/popi_mcn_agent_preview.png differ diff --git a/src/assets/images/index/popi_tv_canvas_preview.png b/src/assets/images/index/popi_tv_canvas_preview.png new file mode 100644 index 0000000..b6e1953 Binary files /dev/null and b/src/assets/images/index/popi_tv_canvas_preview.png differ diff --git a/src/assets/images/index/product_download_arrow_icon.png b/src/assets/images/index/product_download_arrow_icon.png new file mode 100644 index 0000000..94bef4d Binary files /dev/null and b/src/assets/images/index/product_download_arrow_icon.png differ diff --git a/src/assets/images/index/product_open_arrow_icon.png b/src/assets/images/index/product_open_arrow_icon.png new file mode 100644 index 0000000..6e34394 Binary files /dev/null and b/src/assets/images/index/product_open_arrow_icon.png differ diff --git a/src/assets/images/index/product_popi_art_icon.png b/src/assets/images/index/product_popi_art_icon.png new file mode 100644 index 0000000..3d6c278 Binary files /dev/null and b/src/assets/images/index/product_popi_art_icon.png differ diff --git a/src/assets/images/index/product_popi_cloud_icon.png b/src/assets/images/index/product_popi_cloud_icon.png new file mode 100644 index 0000000..b47661a Binary files /dev/null and b/src/assets/images/index/product_popi_cloud_icon.png differ diff --git a/src/assets/images/index/product_popi_mcn_icon.png b/src/assets/images/index/product_popi_mcn_icon.png new file mode 100644 index 0000000..40efdea Binary files /dev/null and b/src/assets/images/index/product_popi_mcn_icon.png differ diff --git a/src/assets/images/index/product_popi_tv_icon.png b/src/assets/images/index/product_popi_tv_icon.png new file mode 100644 index 0000000..388137d Binary files /dev/null and b/src/assets/images/index/product_popi_tv_icon.png differ diff --git a/src/components/VoiceLibraryPicker/index.scss b/src/components/VoiceLibraryPicker/index.scss index 7f2ab7f..679e163 100644 --- a/src/components/VoiceLibraryPicker/index.scss +++ b/src/components/VoiceLibraryPicker/index.scss @@ -196,12 +196,15 @@ left: 50%; top: 50%; transform: translate(-50%, -50%); - width: 30px; - height: 30px; + width: 100%; + height: 100%; padding: 0; border: none; background: transparent; cursor: pointer; + display: flex; + align-items: center; + justify-content: center; } .voiceLibraryPicker__coverPlayIcon { @@ -510,4 +513,4 @@ .voiceLibraryPickerDropdown .voiceLibraryPicker__actions { gap: 10px; margin-right: 4px; -} +} \ No newline at end of file diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 4cbc565..48f8bd7 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -258,6 +258,17 @@ "pages.create.filters.template": "Templates", "pages.create.filters.character": "Characters", "pages.create.batchAction": "Batch actions", + "pages.create.batch.manage": "Manage", + "pages.create.batch.actionsAria": "Batch actions", + "pages.create.batch.selected": "Selected", + "pages.create.batch.like": "Like", + "pages.create.batch.cancelSelection": "Cancel selection", + "pages.create.batch.likeSuccess": "Added to favorites", + "pages.create.batch.likeFailed": "Could not like selected items. Please try again later", + "pages.create.batch.downloadFailed": "Download failed. Please try again later", + "pages.create.batch.confirmDeleteTitle": "Confirm delete", + "pages.create.batch.confirmDeleteContent": "Delete {{count}} selected works? This cannot be undone.", + "pages.create.batch.confirmDeleteAction": "Confirm delete", "pages.create.inspiration.filtersAria": "Inspiration categories", "pages.create.inspiration.filters.character": "Characters", "pages.create.inspiration.filters.characterAssets": "Character assets", @@ -1022,6 +1033,20 @@ "pages.voice.speech.create.modelRequired": "Please select a model first", "index.2026.header.nav_aria": "Homepage navigation", "index.2026.header.login": "Log in", + "index.2026.header.features.image": "AI Images", + "index.2026.header.features.video": "AI Video", + "index.2026.header.features.music": "AI Music", + "index.2026.header.features.character": "AI Characters", + "index.2026.header.support.contact": "Contact support", + "index.2026.header.support.business": "Business", + "index.2026.header.support.career": "Join us", + "index.2026.header.support.official": "Official account", + "index.2026.header.support.contact_tip": "Scan the QR code to contact official support", + "index.2026.header.support.business_tip": "Scan the QR code for business cooperation. Replace this with the dedicated QR code later.", + "index.2026.header.support.career_tip": "Scan the QR code to learn about hiring and collaboration. Replace this with the dedicated QR code later.", + "index.2026.header.support.official_tip": "Scan the QR code to follow the official account. Replace this with the official account QR code later.", + "index.2026.header.support.qr_alt": "{{title}} QR code", + "index.2026.header.support.qr_pending": "QR code pending", "index.2026.hero.brand": "Popi.art", "index.2026.hero.title1": "Record your life and generate IP", "index.2026.hero.title2": "Social images, video, music, and games", @@ -1047,6 +1072,7 @@ "index.2026.products.cloud.title": "Cloud IP asset cloud", "index.2026.products.cloud.description": "Upload original assets and build characters, voices, and styles. Reuse them reliably for videos, games, music, and derivatives.", "index.2026.products.cloud.cta": "Learn Popi.Cloud", + "index.2026.products.coming_soon": "Coming soon", "index.2026.popiart.eyebrow": "POPILART", "index.2026.popiart.title": "Website features help you learn simply and get started quickly", "index.2026.popiart.description": "Popi.art organizes characters, templates, style assets, and curated content into a workspace creators can browse, choose, and use directly. Users can start from a character and content goal without first understanding models, parameters, or switching logic.", diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json index 9f8d980..2be18d9 100644 --- a/src/locales/zh-CN.json +++ b/src/locales/zh-CN.json @@ -258,6 +258,17 @@ "pages.create.filters.template": "模板", "pages.create.filters.character": "角色", "pages.create.batchAction": "批量操作", + "pages.create.batch.manage": "批量管理", + "pages.create.batch.actionsAria": "批量操作", + "pages.create.batch.selected": "已选", + "pages.create.batch.like": "喜欢", + "pages.create.batch.cancelSelection": "取消选择", + "pages.create.batch.likeSuccess": "已添加到喜欢", + "pages.create.batch.likeFailed": "喜欢失败，请稍后重试", + "pages.create.batch.downloadFailed": "下载失败，请稍后重试", + "pages.create.batch.confirmDeleteTitle": "确认删除", + "pages.create.batch.confirmDeleteContent": "确定删除已选中的 {{count}} 个作品吗？删除后无法恢复。", + "pages.create.batch.confirmDeleteAction": "确认删除", "pages.create.inspiration.filtersAria": "灵感库分类", "pages.create.inspiration.filters.character": "角色", "pages.create.inspiration.filters.characterAssets": "角色素材", @@ -1022,6 +1033,20 @@ "pages.voice.speech.create.modelRequired": "请先选择模型", "index.2026.header.nav_aria": "首页导航", "index.2026.header.login": "登录", + "index.2026.header.features.image": "AI生图", + "index.2026.header.features.video": "AI视频", + "index.2026.header.features.music": "AI音乐", + "index.2026.header.features.character": "AI角色", + "index.2026.header.support.contact": "联系客服", + "index.2026.header.support.business": "商务合作", + "index.2026.header.support.career": "加入我们", + "index.2026.header.support.official": "官方公众号", + "index.2026.header.support.contact_tip": "扫描二维码添加官方客服号咨询", + "index.2026.header.support.business_tip": "扫描二维码联系商务合作，后续可替换为专属商务合作二维码", + "index.2026.header.support.career_tip": "扫描二维码了解招聘与合作机会，后续可替换为专属加入我们二维码", + "index.2026.header.support.official_tip": "扫描二维码关注官方公众号，后续可替换为公众号二维码", + "index.2026.header.support.qr_alt": "{{title}}二维码", + "index.2026.header.support.qr_pending": "二维码待补充", "index.2026.hero.brand": "Popi.art", "index.2026.hero.title1": "记录你的生活，生成 IP", "index.2026.hero.title2": "社交图片、视频、音乐和游戏", @@ -1047,6 +1072,7 @@ "index.2026.products.cloud.title": "Cloud IP资产云", "index.2026.products.cloud.description": "上传原创素材，沉淀角色、声纹和画风。之后做视频、游戏、音乐和衍生内容都能稳定调用", "index.2026.products.cloud.cta": "了解Popi.Cloud", + "index.2026.products.coming_soon": "暂未开放", "index.2026.popiart.eyebrow": "POPILART", "index.2026.popiart.title": "网站功能帮你简单学习，轻松进入", "index.2026.popiart.description": "Popi.art把角色、模板、风格素材和精选内容组织成创作者可以直接浏览、选择和使用的工作台。用户无需先理解背后的模型、参数和切换逻辑，只需要围绕角色和内容目标开始创作", diff --git a/src/locales/zh-TW.json b/src/locales/zh-TW.json index adc3c52..682be32 100644 --- a/src/locales/zh-TW.json +++ b/src/locales/zh-TW.json @@ -259,6 +259,17 @@ "pages.create.filters.template": "模板", "pages.create.filters.character": "角色", "pages.create.batchAction": "批次操作", + "pages.create.batch.manage": "批量管理", + "pages.create.batch.actionsAria": "批次操作", + "pages.create.batch.selected": "已選", + "pages.create.batch.like": "喜歡", + "pages.create.batch.cancelSelection": "取消選擇", + "pages.create.batch.likeSuccess": "已加入喜歡", + "pages.create.batch.likeFailed": "喜歡失敗，請稍後重試", + "pages.create.batch.downloadFailed": "下載失敗，請稍後重試", + "pages.create.batch.confirmDeleteTitle": "確認刪除", + "pages.create.batch.confirmDeleteContent": "確定刪除已選中的 {{count}} 個作品嗎？刪除後無法恢復。", + "pages.create.batch.confirmDeleteAction": "確認刪除", "pages.create.inspiration.filtersAria": "靈感庫分類", "pages.create.inspiration.filters.character": "角色", "pages.create.inspiration.filters.characterAssets": "角色素材", @@ -1000,6 +1011,20 @@ "pages.voice.speech.create.modelRequired": "請先選擇模型", "index.2026.header.nav_aria": "首頁導覽", "index.2026.header.login": "登入", + "index.2026.header.features.image": "AI生圖", + "index.2026.header.features.video": "AI影片", + "index.2026.header.features.music": "AI音樂", + "index.2026.header.features.character": "AI角色", + "index.2026.header.support.contact": "聯絡客服", + "index.2026.header.support.business": "商務合作", + "index.2026.header.support.career": "加入我們", + "index.2026.header.support.official": "官方公眾號", + "index.2026.header.support.contact_tip": "掃描二維碼添加官方客服號諮詢", + "index.2026.header.support.business_tip": "掃描二維碼聯絡商務合作，後續可替換為專屬商務合作二維碼", + "index.2026.header.support.career_tip": "掃描二維碼了解招聘與合作機會，後續可替換為專屬加入我們二維碼", + "index.2026.header.support.official_tip": "掃描二維碼關注官方公眾號，後續可替換為公眾號二維碼", + "index.2026.header.support.qr_alt": "{{title}}二維碼", + "index.2026.header.support.qr_pending": "二維碼待補充", "index.2026.hero.brand": "Popi.art", "index.2026.hero.title1": "記錄你的生活，生成 IP", "index.2026.hero.title2": "社交圖片、影片、音樂和遊戲", @@ -1025,6 +1050,7 @@ "index.2026.products.cloud.title": "Cloud IP資產雲", "index.2026.products.cloud.description": "上傳原創素材，沉澱角色、聲紋和畫風。之後做影片、遊戲、音樂和衍生內容都能穩定調用", "index.2026.products.cloud.cta": "了解Popi.Cloud", + "index.2026.products.coming_soon": "暫未開放", "index.2026.popiart.eyebrow": "POPILART", "index.2026.popiart.title": "網站功能幫你簡單學習，輕鬆進入", "index.2026.popiart.description": "Popi.art把角色、模板、風格素材和精選內容組織成創作者可以直接瀏覽、選擇和使用的工作台。用戶無需先理解背後的模型、參數和切換邏輯，只需要圍繞角色和內容目標開始創作", diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index e53f866..dc85a87 100644 --- a/src/pages/index/index.scss +++ b/src/pages/index/index.scss @@ -1,1262 +1,1726 @@ -.index2026 { - --index2026-content-width: 1284px; - --index2026-purple: #6f47f5; - --index2026-black: #000; - --index2026-text: #333; - --index2026-muted: #666; - --index2026-border: #d9d9db; - --index2026-soft-border: #e5e6eb; - --index2026-section-padding-x: clamp(20px, calc((100vw - var(--index2026-content-width)) / 2), 318px); +.index_page { + --index_content_width: 1284px; + --index_purple: #6f47f5; + --index_black: #000; + --index_text: #333; + --index_muted: #666; + --index_border: #d9d9db; + --index_soft_border: #e5e6eb; position: relative; min-height: 100vh; - overflow-x: hidden; + overflow-x: clip; background: #fff; - color: var(--index2026-text); + color: var(--index_text); font-family: "PingFang SC", "Source Han Sans CN", "Microsoft YaHei", sans-serif; +} - .index2026-container { - box-sizing: border-box; - width: min(100% - 40px, var(--index2026-content-width)); +.index_header { + position: sticky; + z-index: 20; + top: 10px; + left: 0; + width: 100%; + height: 64px; + margin-top: 48px; + margin-bottom: -112px; + pointer-events: none; + + .index_header_inner { + position: relative; + display: grid; + grid-template-columns: 150px 1fr 150px; + align-items: start; + width: calc(100% - 88px); + height: 64px; margin: 0 auto; + pointer-events: auto; + } + + .index_header_brand { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: 150px; + height: 64px; + padding: 7px 12px 7px 11px; + text-decoration: none; + } + + .index_header_brand_logo { + display: block; + width: 127px; + height: 50px; + object-fit: contain; + } + + .index_header_nav { + display: flex; + align-items: center; + justify-content: center; + justify-self: center; + box-sizing: border-box; + width: 357px; + height: 64px; + padding: 10px; + gap: 20px; + border-radius: 100px; + background: rgba(255, 255, 255, 0.9); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(12px); + } + + .index_header_nav_btn { + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: 99px; + height: 44px; + padding: 15px 33px; + border: 0; + border-radius: 100px; + background: transparent; + color: var(--index_text); + font-size: 16px; + font-weight: 500; + line-height: 1; + white-space: nowrap; + cursor: pointer; + } + + .index_header_nav_btn:hover, + .index_header_nav_btn:focus-visible, + .index_header_nav_btn_active { + background: #fbf0ff; + color: var(--index_purple); + outline: none; + } + + .index_header_login { + display: flex; + align-items: center; + justify-content: center; + justify-self: end; + box-sizing: border-box; + width: 99px; + height: 44px; + margin-top: 10px; + padding: 12px 21px; + border: 0; + border-radius: 100px; + background: #333; + color: #fff; + text-decoration: none; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + cursor: pointer; + } + + .index_header_login:hover, + .index_header_login:focus-visible { + background: #000; + outline: none; + } + + .index_header_login_text { + font-size: 16px; + font-weight: 500; + line-height: 1; + white-space: nowrap; } - .index2026-header { + .index_header_login_icon { + display: block; + width: 20px; + height: 20px; + margin-left: 2px; + object-fit: contain; + } + + .index_header_avatar_link { + display: block; + justify-self: end; + width: 64px; + height: 64px; + border-radius: 50%; + border: 2px solid #fff; + overflow: hidden; + text-decoration: none; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + } + + .index_header_avatar { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } + + .index_header_dropdown { position: absolute; - z-index: 20; - top: 48px; - left: 0; + top: 64px; + left: 50%; + width: 208px; + transform: translateX(-25%); + opacity: 0; + pointer-events: none; + transition: opacity 180ms ease; + } + + .index_header_dropdown_features { + margin-left: -129px; + } + + .index_header_dropdown_products { + margin-left: -10px; + } + + .index_header_dropdown_support { + margin-left: 109px; + } + + .index_header_dropdown_open { + opacity: 1; + pointer-events: auto; + } + + .index_header_dropdown_inner { + box-sizing: border-box; + width: 208px; + padding: 10px; + border-radius: 26px; + background: rgba(255, 255, 255, 0.9); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(16px); + pointer-events: auto; + } + + .index_header_menu_list { + display: flex; + flex-direction: column; + gap: 10px; + margin: 0; + padding: 0; + list-style: none; + } + + .index_header_menu_item { + margin: 0; + padding: 0; + } + + .index_header_menu_btn { + display: inline-flex; + align-items: center; + box-sizing: border-box; width: 100%; + height: 44px; + padding: 5px 20px; + border: 0; + border-radius: 100px; + background: transparent; + color: var(--index_text); + font-size: 14px; + font-weight: 400; + line-height: 29px; + text-align: left; + text-decoration: none; + cursor: pointer; + } + + .index_header_menu_btn:hover, + .index_header_menu_btn:focus-visible { + background: #fbf0ff; + color: var(--index_purple); + font-weight: 500; + outline: none; + } + + .index_header_support_panel { + position: relative; + } + + .index_header_support_qr_card { + position: absolute; + top: 0; + left: calc(100% + 12px); + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: 130px; + height: 130px; + padding: 7px; + border-radius: 17px; + background: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + } + + .index_header_support_qr_img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } + + .index_header_support_qr_placeholder { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + border-radius: 12px; + background: #f4f4f6; + color: #999; + font-size: 13px; + font-weight: 400; + line-height: 1.4; + text-align: center; + } +} + +.index_hero { + position: relative; + min-height: 956px; + overflow: hidden; + background: #f7f7f9; + + .index_hero_media { + position: absolute; + inset: 0; + overflow: hidden; pointer-events: none; + } - .index2026-header__inner { - position: relative; - display: grid; - grid-template-columns: 150px 1fr 150px; - align-items: start; - width: calc(100% - 88px); - height: 64px; - margin: 0 auto; - pointer-events: auto; - } + .index_hero_img { + position: absolute; + top: -14px; + left: 10.63%; + width: 94.17%; + height: 105.5%; + object-fit: cover; + opacity: 0.35; + } - .index2026-header__brand { - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - width: 150px; - height: 64px; - padding: 7px 12px 7px 11px; - background: #f8f8fa; - text-decoration: none; - } + .index_hero_fade { + position: absolute; + inset: 0; + background: linear-gradient(90deg, #f7f7f9 35.096%, rgba(247, 247, 249, 0) 100%); + } - .index2026-header__brandLogo { - display: block; - width: 127px; - height: 50px; - object-fit: contain; - } + .index_hero_container { + box-sizing: border-box; + width: min(100% - 40px, var(--index_content_width)); + margin: 0 auto; + } - .index2026-header__nav { - display: flex; - align-items: center; - justify-content: center; - justify-self: center; - box-sizing: border-box; - width: 357px; - height: 64px; - padding: 10px; - gap: 20px; - border-radius: 100px; - background: rgba(255, 255, 255, 0.9); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(12px); - } + .index_hero_content { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + min-height: 956px; + padding-top: 1px; + gap: 30px; + } - .index2026-header__navButton { - display: inline-flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - width: 99px; - height: 44px; - padding: 15px 33px; - border: 0; - border-radius: 100px; - background: transparent; - color: var(--index2026-text); - font-size: 16px; - font-weight: 500; - line-height: 1; - white-space: nowrap; - cursor: pointer; - } + .index_hero_copy { + display: flex; + flex-direction: column; + gap: 10px; + max-width: 100%; + } - .index2026-header__navButton:hover, - .index2026-header__navButton:focus-visible { - background: #f8f8fa; - outline: none; - } + .index_hero_title { + margin: 0; + color: #000; + font-size: 64px; + font-weight: 500; + line-height: normal; + } - .index2026-header__login { - display: flex; - align-items: center; - justify-content: center; - justify-self: end; - box-sizing: border-box; - width: 99px; - height: 44px; - margin-top: 10px; - padding: 12px 21px; - border-radius: 100px; - background: #333; - color: #fff; - text-decoration: none; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - } + .index_hero_subtitle { + display: flex; + flex-direction: column; + color: #000; + font-size: 48px; + font-weight: 500; + line-height: normal; + } - .index2026-header__loginText { - font-size: 16px; - font-weight: 500; - line-height: 1; - white-space: nowrap; - } + .index_hero_subtitle_line, + .index_hero_desc_line { + margin: 0; + } - .index2026-header__loginIcon { - display: block; - width: 20px; - height: 20px; - margin-left: 2px; - object-fit: contain; - transform: rotate(90deg); - } + .index_hero_desc { + display: flex; + flex-direction: column; + width: 816px; + max-width: 100%; + color: var(--index_muted); + font-size: 24px; + font-weight: 400; + line-height: normal; + } - .index2026-header__dropdown { - position: absolute; - top: 74px; - left: 50%; - width: 357px; - transform: translateX(-50%); - opacity: 0; - pointer-events: none; - transition: opacity 180ms ease; - } + .index_hero_actions { + display: flex; + align-items: center; + gap: 20px; + } - .index2026-header__dropdown--open { - opacity: 1; - pointer-events: auto; - } + .index_hero_btn { + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-height: 99px; + border-radius: 100px; + font-size: 35px; + font-weight: 500; + line-height: normal; + white-space: nowrap; + cursor: pointer; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + } - .index2026-header__dropdownInner { - box-sizing: border-box; - min-height: 48px; - padding: 18px 20px; - border: 1px solid rgba(217, 217, 219, 0.8); - border-radius: 26px; - background: rgba(255, 255, 255, 0.96); - box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12); - backdrop-filter: blur(16px); - pointer-events: auto; - } + .index_hero_btn_primary { + width: 234px; + padding: 30px 46px; + border: 0; + background: var(--index_purple); + color: #fff; + } - .index2026-header__menuList { - display: flex; - flex-direction: column; - gap: 10px; - margin: 0; - padding: 0; - list-style: none; - } + .index_hero_btn_secondary { + width: 277px; + gap: 10px; + padding: 30px 46px; + border: 1px solid var(--index_border); + background: #fff; + color: var(--index_text); + } - .index2026-header__menuItem { - margin: 0; - padding: 0; - } + .index_hero_btn_icon { + display: block; + width: 35px; + height: 27px; + object-fit: contain; + } +} - .index2026-header__menuButton { - display: inline-flex; - align-items: center; - box-sizing: border-box; - width: 100%; - min-height: 32px; - padding: 0; - border: 0; - background: transparent; - color: var(--index2026-text); - font-size: 15px; - font-weight: 500; - line-height: 22px; - text-align: left; - text-decoration: none; - cursor: pointer; - } +.index_products { + padding: 144px 0; + background: #fff; - .index2026-header__menuButton:hover, - .index2026-header__menuButton:focus-visible { - color: var(--index2026-purple); - outline: none; - } + .index_products_container { + box-sizing: border-box; + width: min(100% - 40px, var(--index_content_width)); + margin: 0 auto; + } - .index2026-header__menuButton--disabled { - color: #999; - cursor: not-allowed; - } + .index_products_heading { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + word-break: break-word; + } - .index2026-header__support { - display: grid; - grid-template-columns: minmax(0, 1fr) 92px; - align-items: start; - gap: 18px; - } + .index_products_heading_eyebrow, + .index_products_heading_title { + margin: 0; + } - .index2026-header__supportQr { - display: block; - box-sizing: border-box; - width: 92px; - height: 92px; - padding: 6px; - border-radius: 18px; - background: #fff; - object-fit: cover; - box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); - } + .index_products_heading_eyebrow { + width: 816px; + max-width: 100%; + color: var(--index_purple); + font-size: 24px; + font-weight: 400; + line-height: normal; + text-transform: uppercase; } - .index2026-hero { + .index_products_heading_title { + display: flex; + flex-direction: column; + width: 100%; + color: #000; + font-size: 48px; + font-weight: 500; + line-height: normal; + } + + .index_products_heading_title_line { + display: block; + } + + .index_products_grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 20px; + margin-top: 40px; + } + + .index_products_card { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + box-sizing: border-box; + width: 100%; + min-height: 353px; + padding: 30px; + gap: 30px; + border: 1px solid var(--index_border); + border-radius: 26px; + background: #fff; + box-shadow: -15px 50px 40px rgba(0, 0, 0, 0.05); + } + + .index_products_card_icon_wrap { + display: flex; + align-items: center; + justify-content: center; + width: 70px; + height: 70px; + border-radius: 20px; + background: var(--index_products_card_icon_bg); + } + + .index_products_card_icon { + display: block; + width: 40px; + height: 40px; + object-fit: contain; + } + + .index_products_card_copy { + display: flex; + flex: 1 1 auto; + flex-direction: column; + gap: 10px; + width: 100%; + min-height: 141px; + } + + .index_products_card_eyebrow, + .index_products_card_title, + .index_products_card_desc { + margin: 0; + } + + .index_products_card_eyebrow { + color: var(--index_products_card_accent); + font-size: 14px; + font-weight: 400; + line-height: normal; + } + + .index_products_card_title { + color: #000; + font-size: 25px; + font-weight: 500; + line-height: normal; + } + + .index_products_card_desc { + color: var(--index_muted); + font-size: 16px; + font-weight: 400; + line-height: 25px; + } + + .index_products_card_action { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 0; + border: 0; + background: transparent; + color: #000; + text-decoration: none; + cursor: pointer; + } + + .index_products_card_action_text { + font-size: 16px; + font-weight: 500; + line-height: normal; + white-space: nowrap; + } + + .index_products_card_action_icon { + display: block; + width: 20px; + height: 20px; + object-fit: contain; + } +} + +.index_popiart { + padding: 224px 0; + background: linear-gradient(180deg, #fbf0ff 0%, #fff 24.038%, #fff 75.962%, #fbf0ff 100%); + + .index_popiart_container { + box-sizing: border-box; + width: min(100% - 40px, var(--index_content_width)); + margin: 0 auto; + } + + .index_popiart_top { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 30px; + margin-bottom: 40px; + } + + .index_popiart_heading { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + word-break: break-word; + } + + .index_popiart_heading_eyebrow, + .index_popiart_heading_title, + .index_popiart_heading_desc_line { + margin: 0; + } + + .index_popiart_heading_eyebrow { + width: 816px; + max-width: 100%; + color: var(--index_purple); + font-size: 24px; + font-weight: 400; + line-height: normal; + text-transform: uppercase; + } + + .index_popiart_heading_title { + display: flex; + flex-direction: column; + width: 100%; + color: #000; + font-size: 48px; + font-weight: 500; + line-height: normal; + } + + .index_popiart_heading_title_line { + display: block; + } + + .index_popiart_heading_desc { + display: flex; + flex-direction: column; + width: 816px; + max-width: 100%; + color: var(--index_muted); + font-size: 24px; + font-weight: 400; + line-height: normal; + } + + .index_popiart_chips { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 20px; + } + + .index_popiart_chip { + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-height: 41px; + padding: 10px 20px; + border: 1px solid var(--index_purple); + border-radius: 100px; + background: #fff; + color: var(--index_purple); + font-size: 16px; + font-weight: 500; + line-height: normal; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + cursor: pointer; + } + + .index_popiart_workspace_img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; + } + + .index_popiart_assets { + margin-top: 198px; + } + + .index_popiart_assets_heading { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + word-break: break-word; + text-align: center; + } + + .index_popiart_assets_heading_eyebrow, + .index_popiart_assets_heading_title, + .index_popiart_assets_heading_desc_line { + margin: 0; + } + + .index_popiart_assets_heading_eyebrow { + width: 816px; + max-width: 100%; + color: var(--index_purple); + font-size: 24px; + font-weight: 400; + line-height: normal; + text-transform: uppercase; + } + + .index_popiart_assets_heading_title { + display: flex; + flex-direction: column; + width: 100%; + color: #000; + font-size: 48px; + font-weight: 500; + line-height: normal; + } + + .index_popiart_assets_heading_title_line { + display: block; + } + + .index_popiart_assets_heading_desc { + display: flex; + flex-direction: column; + width: 816px; + max-width: 100%; + color: var(--index_muted); + font-size: 24px; + font-weight: 400; + line-height: normal; + } + + .index_popiart_assets_visual { position: relative; - min-height: 956px; - overflow: hidden; - background: #f7f7f9; + width: 100%; + margin-top: 20px; + } - .index2026-hero__media { - position: absolute; - inset: 0; - overflow: hidden; - pointer-events: none; - } + .index_popiart_assets_img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; + } +} - .index2026-hero__image { - position: absolute; - top: -14px; - left: 10.63%; - width: 94.17%; - height: 105.5%; - object-fit: cover; - opacity: 0.35; - } +.index_product_detail { + padding: 224px 0; + background: linear-gradient(180deg, #fff 0%, #fbf0ff 50%, #fff 100%); - .index2026-hero__fade { - position: absolute; - inset: 0; - background: linear-gradient(90deg, #f7f7f9 35.096%, rgba(247, 247, 249, 0) 100%); - } + .index_product_detail_container { + display: flex; + flex-direction: column; + gap: 198px; + box-sizing: border-box; + width: min(100% - 40px, var(--index_content_width)); + margin: 0 auto; + } - .index2026-hero__content { - position: relative; - z-index: 1; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - min-height: 956px; - padding-top: 1px; - gap: 30px; - } + .index_product_detail_tv { + display: grid; + grid-template-columns: 452px minmax(0, 792px); + align-items: center; + gap: 40px; + min-height: 493px; + } - .index2026-hero__copy { - display: flex; - flex-direction: column; - gap: 10px; - max-width: 100%; - } + .index_product_detail_mcn { + display: grid; + grid-template-columns: minmax(0, 792px) 452px; + align-items: center; + gap: 40px; + min-height: 493px; + } - .index2026-hero__title { - margin: 0; - color: #000; - font-size: 64px; - font-weight: 500; - line-height: normal; - } + .index_product_detail_tv_copy, + .index_product_detail_mcn_copy { + display: flex; + flex-direction: column; + gap: 40px; + } - .index2026-hero__subtitle { - display: flex; - flex-direction: column; - color: #000; - font-size: 48px; - font-weight: 500; - line-height: normal; - } + .index_product_detail_tv_heading, + .index_product_detail_mcn_heading { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + word-break: break-word; + } - .index2026-hero__subtitleLine, - .index2026-hero__descriptionLine { - margin: 0; - } + .index_product_detail_tv_heading_eyebrow, + .index_product_detail_tv_heading_title, + .index_product_detail_tv_heading_desc_line, + .index_product_detail_mcn_heading_eyebrow, + .index_product_detail_mcn_heading_title, + .index_product_detail_mcn_heading_desc_line { + margin: 0; + } - .index2026-hero__description { - display: flex; - flex-direction: column; - width: 816px; - max-width: 100%; - color: var(--index2026-muted); - font-size: 24px; - font-weight: 400; - line-height: normal; - } + .index_product_detail_tv_heading_eyebrow, + .index_product_detail_mcn_heading_eyebrow { + width: 452px; + max-width: 100%; + color: var(--index_purple); + font-size: 24px; + font-weight: 400; + line-height: normal; + text-transform: uppercase; + } - .index2026-hero__actions { - display: flex; - align-items: center; - gap: 20px; - } + .index_product_detail_tv_heading_title, + .index_product_detail_mcn_heading_title { + display: flex; + flex-direction: column; + width: 100%; + color: #000; + font-size: 48px; + font-weight: 500; + line-height: normal; + } - .index2026-hero__button { - display: inline-flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - min-height: 99px; - border-radius: 100px; - font-size: 35px; - font-weight: 500; - line-height: normal; - white-space: nowrap; - cursor: pointer; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - } + .index_product_detail_tv_heading_title_line, + .index_product_detail_mcn_heading_title_line { + display: block; + } - .index2026-hero__button--primary { - width: 234px; - padding: 30px 46px; - border: 0; - background: var(--index2026-purple); - color: #fff; - } + .index_product_detail_tv_heading_desc, + .index_product_detail_mcn_heading_desc { + display: flex; + flex-direction: column; + width: 452px; + max-width: 100%; + color: var(--index_muted); + font-size: 24px; + font-weight: 400; + line-height: normal; + } - .index2026-hero__button--secondary { - width: 277px; - gap: 10px; - padding: 30px 46px; - border: 1px solid var(--index2026-border); - background: #fff; - color: var(--index2026-text); - } + .index_product_detail_tv_bullets, + .index_product_detail_mcn_bullets { + display: flex; + flex-direction: column; + gap: 15px; + margin: 0; + padding: 0; + list-style: none; + } + + .index_product_detail_tv_bullet, + .index_product_detail_mcn_bullet { + display: flex; + align-items: center; + gap: 10px; + min-height: 22px; + color: #000; + font-size: 16px; + font-weight: 500; + line-height: normal; + } + + .index_product_detail_tv_check, + .index_product_detail_mcn_check { + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + box-sizing: border-box; + width: 20px; + height: 20px; + border: 2px solid var(--index_purple); + border-radius: 24px; + background: #fff; + } + + .index_product_detail_tv_check img, + .index_product_detail_mcn_check img { + display: block; + width: 20px; + height: 20px; + object-fit: cover; + } + + .index_product_detail_tv_img { + display: block; + width: 792px; + height: 493px; + object-fit: cover; + } + + .index_product_detail_mcn_img { + display: block; + width: 792px; + height: 439px; + object-fit: cover; + } +} + +.index_workflow { + padding: 144px 0; + background: linear-gradient(180deg, #7b61d4 0%, #553da3 37.019%, #412f80 83.173%); + + .index_workflow_container { + box-sizing: border-box; + width: min(100% - 40px, var(--index_content_width)); + margin: 0 auto; + } + + .index_workflow_heading { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + word-break: break-word; + text-align: center; + } + + .index_workflow_heading_eyebrow, + .index_workflow_heading_title { + margin: 0; + } + + .index_workflow_heading_eyebrow { + width: 816px; + max-width: 100%; + color: #f2def9; + font-size: 24px; + font-weight: 400; + line-height: normal; + text-transform: uppercase; + } + + .index_workflow_heading_title { + display: flex; + flex-direction: column; + width: 100%; + color: #fff; + font-size: 48px; + font-weight: 500; + line-height: normal; + } + + .index_workflow_heading_title_line { + display: block; + } + + .index_workflow_steps { + position: relative; + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 10px; + margin-top: 40px; + padding: 0 12px; + } + + .index_workflow_track { + position: absolute; + top: 53px; + left: 146px; + right: 67px; + height: 4px; + border-radius: 100px; + background: linear-gradient(90deg, #7753f6 0%, #1acfd1 25%, #6ec691 50.96%, #fe914e 73.56%, #fa5ca7 100%); + } + + .index_workflow_step { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + box-sizing: border-box; + min-height: 267px; + padding: 30px; + gap: 40px; + border-radius: 26px; + background: rgba(255, 255, 255, 0.05); + box-shadow: -15px 50px 80px rgba(0, 0, 0, 0.05); + } + + .index_workflow_step_num { + display: flex; + align-items: center; + justify-content: center; + width: 50px; + height: 50px; + border-radius: 100px; + background: #fff; + color: #000; + font-size: 25px; + font-weight: 500; + line-height: 25px; + } + + .index_workflow_step_copy { + display: flex; + flex-direction: column; + gap: 10px; + width: 184px; + max-width: 100%; + } + + .index_workflow_step_title, + .index_workflow_step_desc { + margin: 0; + } + + .index_workflow_step_title { + color: #fff; + font-size: 25px; + font-weight: 500; + line-height: normal; + } + + .index_workflow_step_desc { + color: #cdcdcd; + font-size: 16px; + font-weight: 400; + line-height: 25px; + } +} + +.index_cloud { + padding: 144px 0 228px; + background: #fff; + + .index_cloud_container { + box-sizing: border-box; + width: min(100% - 40px, 1212px); + margin: 0 auto; + } + + .index_cloud_intro { + display: grid; + grid-template-columns: 524px minmax(0, 648px); + align-items: start; + gap: 40px; + } + + .index_cloud_heading { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + word-break: break-word; + } + + .index_cloud_heading_eyebrow, + .index_cloud_heading_title, + .index_cloud_heading_desc_line { + margin: 0; + } + + .index_cloud_heading_eyebrow { + width: 524px; + max-width: 100%; + color: var(--index_purple); + font-size: 24px; + font-weight: 400; + line-height: normal; + text-transform: uppercase; + } + + .index_cloud_heading_title { + display: flex; + flex-direction: column; + width: 100%; + color: #000; + font-size: 48px; + font-weight: 500; + line-height: normal; + } + + .index_cloud_heading_title_line { + display: block; + } + + .index_cloud_heading_desc { + display: flex; + flex-direction: column; + width: 524px; + max-width: 100%; + color: var(--index_muted); + font-size: 24px; + font-weight: 400; + line-height: normal; + } + + .index_cloud_cards { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; + } + + .index_cloud_card { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + box-sizing: border-box; + min-height: 237px; + padding: 30px 30px 60px; + border: 1px solid var(--index_soft_border); + border-radius: 26px; + background: #f8f8fa; + } - .index2026-hero__buttonIcon { - display: block; - width: 35px; - height: 27px; - object-fit: contain; - } + .index_cloud_card_icon { + display: block; + width: 35px; + height: 35px; + flex: 0 0 auto; + margin: 0 0 20px; + border-radius: 100px; + object-fit: cover; } - .index2026-sectionHeading { + .index_cloud_card_copy { display: flex; flex-direction: column; - align-items: flex-start; gap: 10px; - word-break: break-word; - - .index2026-sectionHeading__eyebrow, - .index2026-sectionHeading__title, - .index2026-sectionHeading__descriptionLine { - margin: 0; - } + width: 259px; + max-width: 100%; + } - .index2026-sectionHeading__eyebrow { - width: 816px; - max-width: 100%; - color: var(--index2026-purple); - font-size: 24px; - font-weight: 400; - line-height: normal; - text-transform: uppercase; - } + .index_cloud_card_title, + .index_cloud_card_desc { + margin: 0; + color: var(--index_text); + } - .index2026-sectionHeading__title { - display: flex; - flex-direction: column; - width: 100%; - color: #000; - font-size: 48px; - font-weight: 500; - line-height: normal; - } + .index_cloud_card_title { + font-size: 25px; + font-weight: 500; + line-height: normal; + } - .index2026-sectionHeading__titleLine { - display: block; - } + .index_cloud_card_desc { + font-size: 16px; + font-weight: 400; + line-height: 25px; + } - .index2026-sectionHeading__description { - display: flex; - flex-direction: column; - width: 816px; - max-width: 100%; - color: var(--index2026-muted); - font-size: 24px; - font-weight: 400; - line-height: normal; - } + .index_cloud_vision { + margin-top: 144px; } - .index2026-sectionHeading--center { + .index_cloud_vision_heading { + display: flex; + flex-direction: column; align-items: center; + gap: 10px; + word-break: break-word; text-align: center; - - .index2026-sectionHeading__eyebrow, - .index2026-sectionHeading__description { - width: 816px; - } } - .index2026-products { - padding: 144px 0; - background: #fff; + .index_cloud_vision_heading_eyebrow, + .index_cloud_vision_heading_title { + margin: 0; + } - .index2026-products__grid { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 20px; - margin-top: 40px; - } + .index_cloud_vision_heading_eyebrow { + width: 816px; + max-width: 100%; + color: var(--index_purple); + font-size: 24px; + font-weight: 400; + line-height: normal; + text-transform: uppercase; + } - .index2026-productCard { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - box-sizing: border-box; - width: 100%; - min-height: 353px; - padding: 30px; - gap: 30px; - border: 1px solid var(--index2026-border); - border-radius: 26px; - background: #fff; - box-shadow: -15px 50px 40px rgba(0, 0, 0, 0.05); - } + .index_cloud_vision_heading_title { + display: flex; + flex-direction: column; + width: 100%; + color: #000; + font-size: 48px; + font-weight: 500; + line-height: normal; + } - .index2026-productCard__iconWrap { - display: flex; - align-items: center; - justify-content: center; - width: 70px; - height: 70px; - border-radius: 20px; - background: var(--index2026-card-icon-bg); - } + .index_cloud_vision_heading_title_line { + display: block; + margin-bottom: 60px; + } +} - .index2026-productCard__icon { - display: block; - width: 40px; - height: 40px; - object-fit: contain; - } +.index_footer { + padding: 100px 0 23px; + min-height: 430px; + box-sizing: border-box; + background: linear-gradient(90deg, #333 0%, #6f47f5 100%); - .index2026-productCard__copy { - display: flex; - flex: 1 1 auto; - flex-direction: column; - gap: 10px; - width: 100%; - min-height: 141px; - } + .index_footer_container { + display: flex; + flex-direction: column; + align-items: center; + gap: 81px; + box-sizing: border-box; + width: min(100% - 40px, var(--index_content_width)); + margin: 0 auto; + } - .index2026-productCard__eyebrow, - .index2026-productCard__title, - .index2026-productCard__description { - margin: 0; - } + .index_footer_top { + display: grid; + grid-template-columns: 201px 740px 130px; + align-items: start; + justify-content: space-between; + box-sizing: border-box; + width: 100%; + height: 200px; + } - .index2026-productCard__eyebrow { - color: var(--index2026-card-accent); - font-size: 14px; - font-weight: 400; - line-height: normal; - } + .index_footer_brand { + display: flex; + align-items: flex-start; + justify-content: flex-start; + padding-top: 1px; + } - .index2026-productCard__title { - color: #000; - font-size: 25px; - font-weight: 500; - line-height: normal; - } + .index_footer_logo { + display: block; + width: 127px; + height: 50px; + object-fit: contain; + } - .index2026-productCard__description { - color: var(--index2026-muted); - font-size: 16px; - font-weight: 400; - line-height: 25px; - } + .index_footer_nav { + display: grid; + grid-template-columns: repeat(4, max-content); + justify-content: space-between; + gap: 0; + padding-top: 0; + } - .index2026-productCard__action { - display: inline-flex; - align-items: center; - gap: 5px; - padding: 0; - border: 0; - background: transparent; - color: #000; - text-decoration: none; - cursor: pointer; - } + .index_footer_group { + position: relative; + min-width: 72px; + } - .index2026-productCard__actionText { - font-size: 16px; - font-weight: 500; - line-height: normal; - white-space: nowrap; - } + .index_footer_group_support { + min-width: 82px; + } - .index2026-productCard__actionIcon { - display: block; - width: 20px; - height: 20px; - object-fit: contain; - } + .index_footer_group_title { + margin: 0 0 20px; + color: #fff; + font-size: 20px; + font-weight: 500; + line-height: 1.35; } - .index2026-popiart { - padding: 224px 0; - background: linear-gradient(180deg, #fbf0ff 0%, #fff 24.038%, #fff 75.962%, #fbf0ff 100%); + .index_footer_list { + display: flex; + flex-direction: column; + gap: 10px; + margin: 0; + padding: 0; + list-style: none; + } - .index2026-popiart__top { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 30px; - } + .index_footer_item { + position: relative; + display: flex; + } - .index2026-popiart__chips { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 20px; - } + .index_footer_link { + padding: 0; + border: 0; + background: transparent; + color: #cecece; + font-size: 15px; + font-weight: 400; + line-height: 1.35; + text-align: left; + text-decoration: none; + cursor: pointer; + } - .index2026-popiart__chip { - display: inline-flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - min-height: 41px; - padding: 10px 20px; - border: 1px solid var(--index2026-purple); - border-radius: 100px; - background: #fff; - color: var(--index2026-purple); - font-size: 16px; - font-weight: 500; - line-height: normal; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - cursor: pointer; - } + .index_footer_link:hover, + .index_footer_link:focus-visible { + color: #fff; + font-weight: 500; + outline: none; + } - .index2026-popiart__screen { - box-sizing: border-box; - width: 100%; - height: 662px; - margin-top: 40px; - overflow: hidden; - border: 3px solid #a089e4; - border-radius: 26px; - background: #fff; - box-shadow: 0 2px 50px rgba(111, 71, 245, 0.15); - } + .index_footer_support_qr_card { + position: absolute; + z-index: 1; + top: 50%; + left: calc(100% + 12px); + transform: translateY(-50%); + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: 117px; + height: 117px; + padding: 7px; + border-radius: 24px; + background: #fff; + box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); + } - .index2026-popiart__screenImage { - display: block; - width: 100%; - height: 100%; - object-fit: contain; - } + .index_footer_support_qr_img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } - .index2026-assets { - margin-top: 198px; - } + .index_footer_support_qr_placeholder { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + border-radius: 18px; + background: #f4f4f6; + color: #999; + font-size: 13px; + font-weight: 400; + line-height: 1.4; + text-align: center; + } - .index2026-assets__visual { - position: relative; - width: 100%; - height: 529px; - margin-top: 40px; - } + .index_footer_qr_group { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + justify-self: end; + } - .index2026-assets__main { - position: absolute; - top: 0; - left: 0; - width: calc(100% - 312px); - height: 529px; - overflow: hidden; - border-radius: 26px; - background: #fff; - box-shadow: 0 2px 50px rgba(111, 71, 245, 0.15); - } + .index_footer_qr { + display: block; + box-sizing: border-box; + width: 130px; + height: 130px; + padding: 7px; + border-radius: 24px; + background: #fff; + object-fit: cover; + } - .index2026-assets__mainImage { - display: block; - width: 100%; - height: 100%; - object-fit: cover; - } + .index_footer_qr_text { + margin: 0; + color: #fff; + font-size: 15px; + font-weight: 400; + line-height: 1.35; + text-align: center; + } - .index2026-assets__float { - position: absolute; - top: 36px; - right: 0; - width: 399px; - height: 277px; - overflow: hidden; - border-radius: 26px; - background: #f9fbfc; - box-shadow: 0 2px 50px rgba(111, 71, 245, 0.15); - } + .index_footer_legal { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 40px; + min-height: 26px; + margin: 0; + color: #cecece; + font-size: 13.252px; + font-weight: 400; + line-height: 1.425; + text-align: center; + } - .index2026-assets__floatImage { - display: block; - width: 138%; - height: 100%; - object-fit: cover; - object-position: left center; - } + .index_footer_legal_item { + white-space: nowrap; } +} - .index2026-details { - padding: 224px 0; - background: linear-gradient(180deg, #fff 0%, #fbf0ff 50%, #fff 100%); +@media (max-width: 1320px) { + .index_header { + margin-top: 24px; + margin-bottom: -88px; - .index2026-details__inner { - display: flex; - flex-direction: column; - gap: 198px; + .index_header_inner { + width: calc(100% - 40px); } + } - .index2026-detail { - display: grid; - grid-template-columns: 452px minmax(0, 792px); - align-items: center; - gap: 40px; - min-height: 493px; + .index_products { + .index_products_grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); } + } - .index2026-detail--mcn { - grid-template-columns: minmax(0, 792px) 452px; + .index_workflow { + .index_workflow_steps { + grid-template-columns: repeat(3, minmax(0, 1fr)); } - .index2026-detail__copy { - display: flex; - flex-direction: column; - gap: 40px; + .index_workflow_track { + display: none; } + } +} - .index2026-detail__copy .index2026-sectionHeading__eyebrow, - .index2026-detail__copy .index2026-sectionHeading__description { - width: 452px; - } +@media (max-width: 1100px) { + .index_product_detail { - .index2026-detail__bullets { - display: flex; - flex-direction: column; - gap: 15px; - margin: 0; - padding: 0; - list-style: none; + .index_product_detail_tv, + .index_product_detail_mcn { + grid-template-columns: 1fr; } - .index2026-detail__bullet { - display: flex; - align-items: center; - gap: 10px; - min-height: 22px; - color: #000; - font-size: 16px; - font-weight: 500; - line-height: normal; + .index_product_detail_mcn_img { + order: 1; } - .index2026-detail__check { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - flex: 0 0 auto; - box-sizing: border-box; - width: 20px; - height: 20px; - border: 2px solid var(--index2026-purple); - border-radius: 24px; - background: #fff; + .index_product_detail_mcn_copy { + order: 2; } - .index2026-detail__check img { - display: block; - width: 20px; - height: 20px; - object-fit: contain; + .index_product_detail_tv_heading_eyebrow, + .index_product_detail_tv_heading_desc, + .index_product_detail_mcn_heading_eyebrow, + .index_product_detail_mcn_heading_desc { + width: 816px; } + } - .index2026-detail__visual { - width: 100%; - height: 493px; - overflow: hidden; - border: 3px solid #daceff; - border-radius: 26px; - background: #fff; - box-shadow: 0 2px 50px rgba(111, 71, 245, 0.15); + .index_cloud { + .index_cloud_intro { + grid-template-columns: 1fr; } + } +} - .index2026-detail--mcn .index2026-detail__visual { - height: 439px; - border: 0; - } +@media (max-width: 860px) { + .index_header { + height: 120px; + margin-bottom: -144px; - .index2026-detail__image { - display: block; - width: 100%; - height: 100%; - object-fit: cover; + .index_header_inner { + grid-template-columns: auto auto; + height: auto; + row-gap: 14px; } - } - - .index2026-workflow { - padding: 144px 0; - background: linear-gradient(180deg, #7b61d4 0%, #553da3 37.019%, #412f80 83.173%); - .index2026-sectionHeading__eyebrow { - color: #f2def9; + .index_header_brand { + width: 116px; + height: 50px; + padding: 6px 8px; } - .index2026-sectionHeading__title { - color: #fff; + .index_header_brand_logo { + width: 100px; + height: 38px; } - .index2026-workflow__steps { - position: relative; - display: grid; - grid-template-columns: repeat(5, minmax(0, 1fr)); - gap: 10px; - margin-top: 40px; - padding: 0 12px; + .index_header_nav { + grid-column: 1 / -1; + grid-row: 2; + width: min(100%, 357px); + height: 56px; + order: 3; } - .index2026-workflow__track { - position: absolute; - top: 53px; - left: 146px; - right: 67px; - height: 4px; - border-radius: 100px; - background: #fff; - opacity: 0.2; + .index_header_nav_btn { + width: auto; + min-width: 80px; + padding: 12px 20px; } - .index2026-workflowStep { - position: relative; - z-index: 1; - display: flex; - flex-direction: column; - box-sizing: border-box; - min-height: 267px; - padding: 30px; - gap: 40px; - border-radius: 26px; - background: rgba(255, 255, 255, 0.05); - box-shadow: -15px 50px 80px rgba(0, 0, 0, 0.05); + .index_header_login { + width: 90px; + height: 40px; + margin-top: 5px; } - .index2026-workflowStep__number { - display: flex; - align-items: center; - justify-content: center; + .index_header_avatar_link { width: 50px; height: 50px; - border-radius: 100px; - background: #fff; - color: #000; - font-size: 25px; - font-weight: 500; - line-height: 25px; - } - - .index2026-workflowStep__copy { - display: flex; - flex-direction: column; - gap: 10px; - width: 184px; - max-width: 100%; } - .index2026-workflowStep__title, - .index2026-workflowStep__description { - margin: 0; + .index_header_dropdown { + top: 128px; + width: 208px; } - .index2026-workflowStep__title { - color: #fff; - font-size: 25px; - font-weight: 500; - line-height: normal; + .index_header_dropdown_features, + .index_header_dropdown_products, + .index_header_dropdown_support { + margin-left: 0; } - .index2026-workflowStep__description { - color: #cdcdcd; - font-size: 16px; - font-weight: 400; - line-height: 25px; + .index_header_support_qr_card { + position: relative; + top: auto; + left: auto; + width: 130px; + height: 130px; + margin: 12px auto 0; } } - .index2026-cloud { - padding: 144px 0 228px; - background: #fff; + .index_hero { + min-height: 760px; - .index2026-cloud__container { - box-sizing: border-box; - width: min(100% - 40px, 1212px); - margin: 0 auto; + .index_hero_content { + min-height: 760px; + padding-top: 110px; } - .index2026-cloud__intro { - display: grid; - grid-template-columns: 524px minmax(0, 648px); - align-items: start; - gap: 40px; + .index_hero_title { + font-size: 48px; } - .index2026-cloud__intro .index2026-sectionHeading__description { - width: 524px; + .index_hero_subtitle { + font-size: 36px; } - .index2026-cloud__cards { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px; + .index_hero_desc { + font-size: 20px; } - .index2026-cloudCard { - display: flex; + .index_hero_actions { flex-direction: column; align-items: flex-start; - justify-content: flex-start; - box-sizing: border-box; - min-height: 237px; - padding: 30px 30px 60px; - border: 1px solid var(--index2026-soft-border); - border-radius: 26px; - background: #f8f8fa; } - .index2026-cloudCard__icon { - display: block; - width: 35px; - height: 35px; - flex: 0 0 auto; - margin: 0 0 20px; - border-radius: 100px; - object-fit: cover; + .index_hero_btn { + min-height: 64px; + font-size: 22px; } - .index2026-cloudCard__copy { - display: flex; - flex-direction: column; - gap: 10px; - width: 259px; - max-width: 100%; + .index_hero_btn_primary, + .index_hero_btn_secondary { + width: auto; + min-width: 180px; + padding: 18px 28px; } + } - .index2026-cloudCard__title, - .index2026-cloudCard__description { - margin: 0; - color: var(--index2026-text); - } + .index_products, + .index_popiart, + .index_product_detail, + .index_workflow, + .index_cloud { + padding-top: 96px; + padding-bottom: 96px; + } - .index2026-cloudCard__title { - font-size: 25px; - font-weight: 500; - line-height: normal; + .index_popiart { + .index_popiart_assets { + margin-top: 120px; } - .index2026-cloudCard__description { - font-size: 16px; - font-weight: 400; - line-height: 25px; + .index_popiart_assets_visual { + height: auto; } + } - .index2026-vision { - margin-top: 144px; - } + .index_products_heading_title, + .index_popiart_heading_title, + .index_popiart_assets_heading_title, + .index_product_detail_tv_heading_title, + .index_product_detail_mcn_heading_title, + .index_workflow_heading_title, + .index_cloud_heading_title, + .index_cloud_vision_heading_title { + font-size: 36px; } - .index2026-footer { - padding: 100px 0 23px; - background: linear-gradient(90deg, #333 0%, var(--index2026-purple) 100%); + .index_products_heading_eyebrow, + .index_products_heading_desc, + .index_popiart_heading_eyebrow, + .index_popiart_heading_desc, + .index_popiart_assets_heading_eyebrow, + .index_popiart_assets_heading_desc, + .index_product_detail_tv_heading_eyebrow, + .index_product_detail_tv_heading_desc, + .index_product_detail_mcn_heading_eyebrow, + .index_product_detail_mcn_heading_desc, + .index_workflow_heading_eyebrow, + .index_cloud_heading_eyebrow, + .index_cloud_heading_desc, + .index_cloud_vision_heading_eyebrow { + font-size: 20px; + } - .index2026-footer__inner { - display: grid; - grid-template-columns: 130px minmax(0, 1fr) 130px; - align-items: start; - gap: 56px; + .index_workflow { + .index_workflow_steps { + grid-template-columns: 1fr; } - .index2026-footer__brand { - display: flex; - align-items: flex-start; - justify-content: flex-start; + .index_workflow_step { + min-height: auto; } + } - .index2026-footer__logo { - display: block; - width: 127px; - height: 50px; - object-fit: contain; - filter: brightness(0) invert(1); + .index_cloud { + .index_cloud_cards { + grid-template-columns: 1fr; } + } - .index2026-footer__nav { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 40px; - } + .index_footer { + min-height: auto; - .index2026-footer__groupTitle { - margin: 0 0 20px; - color: #fff; - font-size: 20px; - font-weight: 500; - line-height: 1.35; + .index_footer_container { + gap: 36px; + text-align: center; } - .index2026-footer__list { + .index_footer_top { display: flex; flex-direction: column; - gap: 12px; - margin: 0; - padding: 0; - list-style: none; - } - - .index2026-footer__link { - padding: 0; - border: 0; - background: transparent; - color: #cecece; - font-size: 15px; - font-weight: 400; - line-height: 1.35; - text-align: left; - text-decoration: none; - cursor: pointer; - } - - .index2026-footer__link:hover, - .index2026-footer__link:focus-visible { - color: #fff; - outline: none; + align-items: center; + height: auto; + gap: 36px; } - .index2026-footer__qrGroup { - display: flex; - flex-direction: column; - align-items: center; - gap: 12px; + .index_footer_brand { + padding-top: 0; } - .index2026-footer__qr { - display: block; - box-sizing: border-box; - width: 100px; - height: 100px; - padding: 6px; - border-radius: 24px; - background: #fff; - object-fit: cover; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + .index_footer_nav { + width: 100%; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 24px; + justify-content: stretch; } - .index2026-footer__qrText { - margin: 0; - color: #fff; - font-size: 15px; - font-weight: 400; - line-height: 1.35; - text-align: center; + .index_footer_group { + min-width: 0; } - .index2026-footer__legal { - grid-column: 1 / -1; - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 12px 40px; - margin-top: 24px; - color: #cecece; - font-size: 13.252px; - font-weight: 400; - line-height: 1.425; + .index_footer_link { text-align: center; } - } - @media (max-width: 1320px) { - .index2026-header { - top: 24px; - - .index2026-header__inner { - width: calc(100% - 40px); - } + .index_footer_support_qr_card { + position: static; + width: 110px; + height: 110px; + margin: 12px auto 0; + padding: 6px; + transform: none; } - .index2026-products { - .index2026-products__grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } + .index_footer_qr_group { + justify-self: auto; } - .index2026-workflow { - .index2026-workflow__steps { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .index2026-workflow__track { - display: none; - } + .index_footer_qr { + width: 110px; + height: 110px; + padding: 6px; } - } - - @media (max-width: 1100px) { - .index2026-details { - .index2026-detail, - .index2026-detail--mcn { - grid-template-columns: 1fr; - } - .index2026-detail--mcn .index2026-detail__visual { - order: 2; - } - - .index2026-detail--mcn .index2026-detail__copy { - order: 1; - } - - .index2026-detail__copy .index2026-sectionHeading__eyebrow, - .index2026-detail__copy .index2026-sectionHeading__description { - width: 816px; - } + .index_footer_list, + .index_footer_item { + align-items: center; + justify-content: center; } - .index2026-cloud { - .index2026-cloud__intro { - grid-template-columns: 1fr; - } + .index_footer_legal { + margin-top: 0; + gap: 10px 24px; } } +} - @media (max-width: 860px) { - .index2026-header { - .index2026-header__inner { - grid-template-columns: auto auto; - height: auto; - row-gap: 14px; - } - - .index2026-header__brand { - width: 116px; - height: 50px; - padding: 6px 8px; - } - - .index2026-header__brandLogo { - width: 100px; - height: 38px; - } - - .index2026-header__nav { - grid-column: 1 / -1; - grid-row: 2; - width: min(100%, 357px); - height: 56px; - order: 3; - } - - .index2026-header__navButton { - width: auto; - min-width: 80px; - padding: 12px 20px; - } - - .index2026-header__login { - width: 90px; - height: 40px; - margin-top: 5px; - } - - .index2026-header__dropdown { - top: 128px; - width: min(calc(100% - 40px), 357px); - } - } - - .index2026-hero { - min-height: 760px; - - .index2026-hero__content { - min-height: 760px; - padding-top: 110px; - } - - .index2026-hero__title { - font-size: 48px; - } - - .index2026-hero__subtitle, - .index2026-sectionHeading__title { - font-size: 36px; - } - - .index2026-hero__description, - .index2026-sectionHeading__description, - .index2026-sectionHeading__eyebrow { - font-size: 20px; - } - - .index2026-hero__actions { - flex-direction: column; - align-items: flex-start; - } - - .index2026-hero__button { - min-height: 64px; - font-size: 22px; - } - - .index2026-hero__button--primary, - .index2026-hero__button--secondary { - width: auto; - min-width: 180px; - padding: 18px 28px; - } - } +@media (max-width: 640px) { - .index2026-products, - .index2026-popiart, - .index2026-details, - .index2026-workflow, - .index2026-cloud { - padding-top: 96px; - padding-bottom: 96px; - } + .index_hero_container, + .index_products_container, + .index_popiart_container, + .index_product_detail_container, + .index_workflow_container, + .index_cloud_container, + .index_footer_container { + width: calc(100% - 32px); + } - .index2026-popiart { - .index2026-popiart__screen { - height: auto; - aspect-ratio: 1284 / 662; - } - - .index2026-assets { - margin-top: 120px; - } - - .index2026-assets__visual { - height: auto; - } - - .index2026-assets__main { - position: relative; - width: 100%; - height: auto; - aspect-ratio: 972 / 529; - } - - .index2026-assets__float { - position: relative; - top: auto; - right: auto; - width: min(100%, 399px); - height: auto; - aspect-ratio: 399 / 277; - margin: 20px 0 0 auto; - } - } + .index_products_heading_title, + .index_popiart_heading_title, + .index_popiart_assets_heading_title, + .index_product_detail_tv_heading_title, + .index_product_detail_mcn_heading_title, + .index_workflow_heading_title, + .index_cloud_heading_title, + .index_cloud_vision_heading_title { + font-size: 30px; + } - .index2026-workflow { - .index2026-workflow__steps { - grid-template-columns: 1fr; - } + .index_products_heading_eyebrow, + .index_popiart_heading_eyebrow, + .index_popiart_heading_desc, + .index_popiart_assets_heading_eyebrow, + .index_popiart_assets_heading_desc, + .index_product_detail_tv_heading_eyebrow, + .index_product_detail_tv_heading_desc, + .index_product_detail_mcn_heading_eyebrow, + .index_product_detail_mcn_heading_desc, + .index_workflow_heading_eyebrow, + .index_cloud_heading_eyebrow, + .index_cloud_heading_desc, + .index_cloud_vision_heading_eyebrow { + font-size: 17px; + } - .index2026-workflowStep { - min-height: auto; - } + .index_hero { + .index_hero_title { + font-size: 40px; } - .index2026-cloud { - .index2026-cloud__cards { - grid-template-columns: 1fr; - } + .index_hero_subtitle { + font-size: 30px; } - .index2026-footer { - .index2026-footer__inner { - grid-template-columns: 1fr; - justify-items: center; - text-align: center; - } - - .index2026-footer__nav { - width: 100%; - grid-template-columns: 1fr; - } - - .index2026-footer__link { - text-align: center; - } + .index_hero_desc { + font-size: 17px; } } - @media (max-width: 640px) { - .index2026-container, - .index2026-cloud .index2026-cloud__container { - width: calc(100% - 32px); - } - - .index2026-sectionHeading { - .index2026-sectionHeading__title { - font-size: 30px; - } - - .index2026-sectionHeading__description, - .index2026-sectionHeading__eyebrow { - font-size: 17px; - } + .index_products { + .index_products_grid { + grid-template-columns: 1fr; } + } - .index2026-hero { - .index2026-hero__title { - font-size: 40px; - } - - .index2026-hero__subtitle { - font-size: 30px; - } - - .index2026-hero__description { - font-size: 17px; - } - } + .index_product_detail { - .index2026-products { - .index2026-products__grid { - grid-template-columns: 1fr; - } + .index_product_detail_tv_img, + .index_product_detail_mcn_img { + width: 100%; + height: auto; + aspect-ratio: 792 / 493; } - .index2026-details { - .index2026-detail__visual, - .index2026-detail--mcn .index2026-detail__visual { - height: auto; - aspect-ratio: 792 / 493; - } + .index_product_detail_mcn_img { + aspect-ratio: 792 / 439; } } -} +} \ No newline at end of file diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 75e0900..24121f3 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -1,45 +1,74 @@ import { useCallback, useEffect, useMemo, useState, type CSSProperties } from "react"; +import { Message } from "@arco-design/web-react"; import { Link, useNavigate } from "react-router-dom"; import { useTranslation } from "react-i18next"; import "./index.scss"; import { getAppLatest, getParamConfig } from "@/api/api"; import { ROUTES } from "@/constants"; +import { openLoginDialog } from "@/dialog"; import { AppMacDownloadDialogOverlay } from "@/dialog/app-download-mac"; import { useComposerStore } from "@/store/useComposerStore"; import { useGlobalPromptImageStore } from "@/store/useMakeSameStore"; +import { useUserStore } from "@/store/useUserStore"; +import { getToken } from "@/utils/auth"; import { openLatestPrivacyPolicyLink, PRIVACY_POLICY_KEY_AI_USE_NOTICE, PRIVACY_POLICY_KEY_PRIVACY_POLICY, PRIVACY_POLICY_KEY_USAGE_TUTORIAL, PRIVACY_POLICY_KEY_USER_TERMS } from "@/utils/openLatestPrivacyPolicyLink"; -const FIGMA_ASSETS = { - logo: "https://www.figma.com/api/mcp/asset/415a6685-d1c7-4ddd-9c40-5f89f2f1f296", - headerArrow: "https://www.figma.com/api/mcp/asset/bc6429cb-661e-4796-bd90-09430c01fb10", - heroBg: "https://www.figma.com/api/mcp/asset/5e50478f-5fb9-477a-a992-287af052a397", - heroArrow: "https://www.figma.com/api/mcp/asset/46c7123f-ee5f-4a80-ab86-087b13fae7d1", - productWeb: "https://www.figma.com/api/mcp/asset/65e7a2c8-e39e-4c69-8ea3-dfb90eb454f3", - productTv: "https://www.figma.com/api/mcp/asset/4c3cf386-49bb-432b-9907-cb2f39b38cc6", - productMcn: "https://www.figma.com/api/mcp/asset/959ee401-be37-454f-833e-cdf568530acb", - productCloud: "https://www.figma.com/api/mcp/asset/c8704419-538f-4430-9111-676790bdb6d7", - productArrow: "https://www.figma.com/api/mcp/asset/913f99a0-50dd-43b2-afc3-70fcad3e5004", - productDownloadArrow: "https://www.figma.com/api/mcp/asset/431a7c4e-9c4d-493d-8adf-aabfa8a1b2e2", - popiArtScreen: "https://www.figma.com/api/mcp/asset/ba09cca6-fdb2-4638-a13e-5a4e863d944e", - assetsScreen: "https://www.figma.com/api/mcp/asset/dd341121-04ad-487c-a9b7-31640122e7b1", - assetsFloat: "https://www.figma.com/api/mcp/asset/fdedf0a8-1e16-4746-8a07-0be5d51f07e4", - tvScreen: "https://www.figma.com/api/mcp/asset/527c2058-296b-4034-b795-4e86769646de", - mcnScreen: "https://www.figma.com/api/mcp/asset/1d6488ff-7623-4a40-a68a-4d2468bab1ea", - check: "https://www.figma.com/api/mcp/asset/e32fabae-6d93-49ec-b04b-57aaf6f63e45", - cloudGenerate: "https://www.figma.com/api/mcp/asset/525cd257-249d-47fb-94b1-d7098b152b28", - cloudTeam: "https://www.figma.com/api/mcp/asset/5ca357bc-d2f8-4662-a8ab-77c496d107cc", - cloudAsset: "https://www.figma.com/api/mcp/asset/d6a77569-d2f2-4aa5-9b26-925e05976aec", - cloudMatch: "https://www.figma.com/api/mcp/asset/aee313d7-53a5-423b-a4f5-a0b1545b1885", - footerQr: "https://www.figma.com/api/mcp/asset/40654bde-0ef4-4f14-946e-1dc0c6633b56", +const INDEX_ASSETS = { + brandLogo: new URL("@/assets/images/index/brand_logo.png", import.meta.url).href, + brandLogo2: new URL("@/assets/images/index/brand_logo2.png", import.meta.url).href, + defaultAvatar: new URL("@/assets/images/avatar.png", import.meta.url).href, + headerLoginArrowIcon: new URL("@/assets/images/index/header_login_arrow_icon.png", import.meta.url).href, + heroCreatorLifestyleBg: new URL("@/assets/images/index/hero_creator_lifestyle_bg.png", import.meta.url).href, + heroDownloadArrowIcon: new URL("@/assets/images/index/hero_download_arrow_icon.png", import.meta.url).href, + productPopiArtIcon: new URL("@/assets/images/index/product_popi_art_icon.png", import.meta.url).href, + productPopiTvIcon: new URL("@/assets/images/index/product_popi_tv_icon.png", import.meta.url).href, + productPopiMcnIcon: new URL("@/assets/images/index/product_popi_mcn_icon.png", import.meta.url).href, + productPopiCloudIcon: new URL("@/assets/images/index/product_popi_cloud_icon.png", import.meta.url).href, + productOpenArrowIcon: new URL("@/assets/images/index/product_open_arrow_icon.png", import.meta.url).href, + productDownloadArrowIcon: new URL("@/assets/images/index/product_download_arrow_icon.png", import.meta.url).href, + popiArtWorkspacePreview: new URL("@/assets/images/index/popi_art_workspace_preview.png", import.meta.url).href, + popiArtAssetsPreview: new URL("@/assets/images/index/popi_art_assets_preview.png", import.meta.url).href, + popiTvCanvasPreview: new URL("@/assets/images/index/popi_tv_canvas_preview.png", import.meta.url).href, + popiMcnAgentPreview: new URL("@/assets/images/index/popi_mcn_agent_preview.png", import.meta.url).href, + featureCheckIcon: new URL("@/assets/images/index/feature_check_icon.png", import.meta.url).href, + cloudOnePromptIcon: new URL("@/assets/images/index/cloud_one_prompt_icon.png", import.meta.url).href, + cloudTeamCollaborationIcon: new URL("@/assets/images/index/cloud_team_collaboration_icon.png", import.meta.url).href, + cloudIpAssetReuseIcon: new URL("@/assets/images/index/cloud_ip_asset_reuse_icon.png", import.meta.url).href, + cloudAutoMatchIcon: new URL("@/assets/images/index/cloud_auto_match_icon.png", import.meta.url).href, } as const; const FEATURE_IMAGE_SUB_TYPE = 103; const FEATURE_VIDEO_SUB_TYPE = 202; +const INDEX_NO_SCROLLBAR_CLASS = "index-landing-no-scrollbar"; type NavPanel = "features" | "products" | "support"; -type ProductAction = "home" | "canvas" | "download" | "cloud"; +type ProductAction = "explore" | "canvas" | "download" | "comingSoon"; type FeatureAction = "character" | "image" | "video" | "voice"; +type HeaderProductAction = "explore" | "canvas" | "download"; +type SupportAction = "contact" | "business" | "career" | "official"; +type FooterAction = "home" | "canvas" | "download" | "support" | FeatureAction; +type FooterSupportAction = Exclude; + +interface FooterPolicyLink { + labelKey: string; + policyKey: string; +} + +interface FooterActionLink { + labelKey: string; + action: FooterAction; + supportAction?: FooterSupportAction; +} + +interface FooterGroupConfig { + id: "features" | "products" | "about" | "support"; + titleKey: string; + links: Array; +} + +type SupportQrAssets = Record; +type DetailBlockId = "tv" | "mcn"; interface AppDownloadDialogState { macIntelUrl: string; @@ -61,7 +90,7 @@ interface ProductCardConfig { } interface DetailBlockConfig { - id: string; + id: DetailBlockId; eyebrowKey: string; titleKeys: string[]; descriptionKeys: string[]; @@ -78,13 +107,6 @@ interface CloudCardConfig { iconSrc: string; } -interface SectionHeadingProps { - eyebrowKey: string; - titleKeys: string[]; - descriptionKeys?: string[]; - align?: "left" | "center"; -} - const PRODUCT_CARDS: ProductCardConfig[] = [ { id: "web", @@ -92,11 +114,11 @@ const PRODUCT_CARDS: ProductCardConfig[] = [ titleKey: "index.2026.products.web.title", descriptionKey: "index.2026.products.web.description", ctaKey: "index.2026.products.web.cta", - action: "home", + action: "explore", accent: "#fa51a2", iconBg: "rgba(250, 81, 162, 0.1)", - iconSrc: FIGMA_ASSETS.productWeb, - ctaIconSrc: FIGMA_ASSETS.productArrow, + iconSrc: INDEX_ASSETS.productPopiArtIcon, + ctaIconSrc: INDEX_ASSETS.productOpenArrowIcon, }, { id: "tv", @@ -107,8 +129,8 @@ const PRODUCT_CARDS: ProductCardConfig[] = [ action: "canvas", accent: "#00dcca", iconBg: "rgba(0, 220, 202, 0.1)", - iconSrc: FIGMA_ASSETS.productTv, - ctaIconSrc: FIGMA_ASSETS.productArrow, + iconSrc: INDEX_ASSETS.productPopiTvIcon, + ctaIconSrc: INDEX_ASSETS.productOpenArrowIcon, }, { id: "mcn", @@ -119,8 +141,8 @@ const PRODUCT_CARDS: ProductCardConfig[] = [ action: "download", accent: "#5d4dca", iconBg: "rgba(93, 77, 202, 0.1)", - iconSrc: FIGMA_ASSETS.productMcn, - ctaIconSrc: FIGMA_ASSETS.productDownloadArrow, + iconSrc: INDEX_ASSETS.productPopiMcnIcon, + ctaIconSrc: INDEX_ASSETS.productDownloadArrowIcon, }, { id: "cloud", @@ -128,11 +150,11 @@ const PRODUCT_CARDS: ProductCardConfig[] = [ titleKey: "index.2026.products.cloud.title", descriptionKey: "index.2026.products.cloud.description", ctaKey: "index.2026.products.cloud.cta", - action: "cloud", + action: "comingSoon", accent: "#ff9a27", iconBg: "rgba(255, 154, 39, 0.1)", - iconSrc: FIGMA_ASSETS.productCloud, - ctaIconSrc: FIGMA_ASSETS.productDownloadArrow, + iconSrc: INDEX_ASSETS.productPopiCloudIcon, + ctaIconSrc: INDEX_ASSETS.productDownloadArrowIcon, }, ]; @@ -143,6 +165,26 @@ const FEATURE_ACTIONS: Array<{ id: FeatureAction; labelKey: string }> = [ { id: "voice", labelKey: "index.2026.popiart.chips.music" }, ]; +const HEADER_FEATURE_ACTIONS: Array<{ id: FeatureAction; labelKey: string }> = [ + { id: "image", labelKey: "index.2026.header.features.image" }, + { id: "video", labelKey: "index.2026.header.features.video" }, + { id: "voice", labelKey: "index.2026.header.features.music" }, + { id: "character", labelKey: "index.2026.header.features.character" }, +]; + +const HEADER_PRODUCT_ACTIONS: Array<{ id: HeaderProductAction; labelKey: string }> = [ + { id: "explore", labelKey: "index.2026.footer.popi_art" }, + { id: "canvas", labelKey: "index.2026.footer.popi_tv" }, + { id: "download", labelKey: "index.2026.footer.popi_mcn" }, +]; + +const HEADER_SUPPORT_ACTIONS: Array<{ id: SupportAction; labelKey: string }> = [ + { id: "contact", labelKey: "index.2026.header.support.contact" }, + { id: "business", labelKey: "index.2026.header.support.business" }, + { id: "career", labelKey: "index.2026.header.support.career" }, + { id: "official", labelKey: "index.2026.header.support.official" }, +]; + const DETAIL_BLOCKS: DetailBlockConfig[] = [ { id: "tv", @@ -150,7 +192,7 @@ const DETAIL_BLOCKS: DetailBlockConfig[] = [ titleKeys: ["index.2026.detail.tv.title1", "index.2026.detail.tv.title2", "index.2026.detail.tv.title3"], descriptionKeys: ["index.2026.detail.tv.description"], bulletKeys: ["index.2026.detail.tv.bullet1", "index.2026.detail.tv.bullet2", "index.2026.detail.tv.bullet3"], - imageSrc: FIGMA_ASSETS.tvScreen, + imageSrc: INDEX_ASSETS.popiTvCanvasPreview, imageAltKey: "index.2026.detail.tv.image_alt", imageFirst: false, }, @@ -160,7 +202,7 @@ const DETAIL_BLOCKS: DetailBlockConfig[] = [ titleKeys: ["index.2026.detail.mcn.title1", "index.2026.detail.mcn.title2"], descriptionKeys: ["index.2026.detail.mcn.description1", "index.2026.detail.mcn.description2"], bulletKeys: ["index.2026.detail.mcn.bullet1", "index.2026.detail.mcn.bullet2", "index.2026.detail.mcn.bullet3"], - imageSrc: FIGMA_ASSETS.mcnScreen, + imageSrc: INDEX_ASSETS.popiMcnAgentPreview, imageAltKey: "index.2026.detail.mcn.image_alt", imageFirst: true, }, @@ -179,40 +221,42 @@ const CLOUD_CARDS: CloudCardConfig[] = [ id: "generate", titleKey: "index.2026.cloud.card_generate.title", descriptionKey: "index.2026.cloud.card_generate.description", - iconSrc: FIGMA_ASSETS.cloudGenerate, + iconSrc: INDEX_ASSETS.cloudOnePromptIcon, }, { id: "team", titleKey: "index.2026.cloud.card_team.title", descriptionKey: "index.2026.cloud.card_team.description", - iconSrc: FIGMA_ASSETS.cloudTeam, + iconSrc: INDEX_ASSETS.cloudTeamCollaborationIcon, }, { id: "asset", titleKey: "index.2026.cloud.card_asset.title", descriptionKey: "index.2026.cloud.card_asset.description", - iconSrc: FIGMA_ASSETS.cloudAsset, + iconSrc: INDEX_ASSETS.cloudIpAssetReuseIcon, }, { id: "match", titleKey: "index.2026.cloud.card_match.title", descriptionKey: "index.2026.cloud.card_match.description", - iconSrc: FIGMA_ASSETS.cloudMatch, + iconSrc: INDEX_ASSETS.cloudAutoMatchIcon, }, ]; -const FOOTER_GROUPS = [ +const FOOTER_GROUPS: FooterGroupConfig[] = [ { - titleKey: "index.footer.nav_about", + id: "features", + titleKey: "index.header.nav_features", links: [ - { labelKey: "layout.usageTutorial", policyKey: PRIVACY_POLICY_KEY_USAGE_TUTORIAL }, - { labelKey: "app.ai_use_notice", policyKey: PRIVACY_POLICY_KEY_AI_USE_NOTICE }, - { labelKey: "app.user_terms", policyKey: PRIVACY_POLICY_KEY_USER_TERMS }, - { labelKey: "app.privacy_policy", policyKey: PRIVACY_POLICY_KEY_PRIVACY_POLICY }, + { labelKey: "menu.image", action: "image" }, + { labelKey: "menu.video", action: "video" }, + { labelKey: "index.2026.popiart.chips.music", action: "voice" }, + { labelKey: "index.2026.popiart.chips.character", action: "character" }, ], }, { - titleKey: "index.footer.nav_related", + id: "products", + titleKey: "index.header.nav_product", links: [ { labelKey: "index.2026.footer.popi_art", action: "home" }, { labelKey: "index.2026.footer.popi_tv", action: "canvas" }, @@ -220,61 +264,86 @@ const FOOTER_GROUPS = [ ], }, { - titleKey: "index.header.nav_features", + id: "about", + titleKey: "index.footer.nav_about", links: [ - { labelKey: "menu.image", action: "image" }, - { labelKey: "menu.video", action: "video" }, - { labelKey: "index.2026.popiart.chips.music", action: "voice" }, - { labelKey: "index.2026.popiart.chips.character", action: "character" }, + { labelKey: "layout.usageTutorial", policyKey: PRIVACY_POLICY_KEY_USAGE_TUTORIAL }, + { labelKey: "app.ai_use_notice", policyKey: PRIVACY_POLICY_KEY_AI_USE_NOTICE }, + { labelKey: "app.user_terms", policyKey: PRIVACY_POLICY_KEY_USER_TERMS }, + { labelKey: "app.privacy_policy", policyKey: PRIVACY_POLICY_KEY_PRIVACY_POLICY }, ], }, -] as const; - -function SectionHeading({ eyebrowKey, titleKeys, descriptionKeys = [], align = "left" }: SectionHeadingProps) { - const { t } = useTranslation(); - - return ( -
-

{t(eyebrowKey)}

-

- {titleKeys.map((key) => ( - - {t(key)} - - ))} -

- {descriptionKeys.length > 0 ? ( -
- {descriptionKeys.map((key) => ( -

- {t(key)} -

- ))} -
- ) : null} -
- ); -} + { + id: "support", + titleKey: "index.header.nav_support", + links: [ + { labelKey: "index.2026.header.support.business", action: "support", supportAction: "business" }, + { labelKey: "index.2026.header.support.career", action: "support", supportAction: "career" }, + { labelKey: "index.2026.header.support.official", action: "support", supportAction: "official" }, + ], + }, +]; function getProductCardStyle(card: ProductCardConfig): CSSProperties { return { - "--index2026-card-accent": card.accent, - "--index2026-card-icon-bg": card.iconBg, + "--index_products_card_accent": card.accent, + "--index_products_card_icon_bg": card.iconBg, } as CSSProperties; } +function getUserString(user: Record | null, key: string): string { + const value = user?.[key]; + if (typeof value === "string") return value.trim(); + if (typeof value === "number" || typeof value === "boolean") return String(value); + return ""; +} + export default function Index() { const { t } = useTranslation(); const navigate = useNavigate(); const requestApplyMedia = useGlobalPromptImageStore((s) => s.requestApplyMedia); const requestComposerExpand = useComposerStore((s) => s.requestComposerExpand); + const user = useUserStore((s) => s.user); + const setUser = useUserStore((s) => s.setUser); + const clearUser = useUserStore((s) => s.clearUser); const [openNavPanel, setOpenNavPanel] = useState(null); - const [contactUsPageUrl, setContactUsPageUrl] = useState(""); + const [hoveredSupportAction, setHoveredSupportAction] = useState(null); + const [hoveredFooterSupportAction, setHoveredFooterSupportAction] = useState(null); const [serviceQrCode, setServiceQrCode] = useState(""); + const [supportQrAssets, setSupportQrAssets] = useState({ + business: "", + career: "", + official: "", + }); const [appDownloadDialog, setAppDownloadDialog] = useState(null); - const qrCodeSrc = serviceQrCode || FIGMA_ASSETS.footerQr; + const qrCodeSrc = serviceQrCode.trim(); + const hoveredFooterSupportItem = HEADER_SUPPORT_ACTIONS.find((item) => item.id === hoveredFooterSupportAction); + const hoveredFooterSupportQrSrc = hoveredFooterSupportAction == null ? "" : supportQrAssets[hoveredFooterSupportAction]; + const hasToken = getToken() != null; + const userAvatarSrc = getUserString(user, "avatar") || INDEX_ASSETS.defaultAvatar; + const userName = getUserString(user, "name") || t("layout.userMenu.profileCenter"); + const isLoggedIn = hasToken; + + useEffect(() => { + if (!getToken()) { + clearUser(); + return; + } + + void setUser(); + }, [clearUser, setUser]); + + useEffect(() => { + document.documentElement.classList.add(INDEX_NO_SCROLLBAR_CLASS); + document.body.classList.add(INDEX_NO_SCROLLBAR_CLASS); + + return () => { + document.documentElement.classList.remove(INDEX_NO_SCROLLBAR_CLASS); + document.body.classList.remove(INDEX_NO_SCROLLBAR_CLASS); + }; + }, []); useEffect(() => { let isActive = true; @@ -282,13 +351,21 @@ export default function Index() { void getParamConfig() .then((res) => { if (!isActive) return; - setContactUsPageUrl(res.systemConfig?.contactUsPageUrl ?? ""); setServiceQrCode(res.systemConfig?.serviceQrCode ?? ""); + setSupportQrAssets({ + business: res.systemConfig?.businessCooperation ?? "", + career: res.systemConfig?.joinUs ?? "", + official: res.systemConfig?.officialPublicAccount ?? "", + }); }) .catch(() => { if (!isActive) return; - setContactUsPageUrl(""); setServiceQrCode(""); + setSupportQrAssets({ + business: "", + career: "", + official: "", + }); }); return () => { @@ -346,6 +423,23 @@ export default function Index() { [navigate, openComposerWithSubType], ); + const handleHeaderProductAction = useCallback( + (action: HeaderProductAction) => { + if (action === "explore") { + navigate(ROUTES.EXPLORE); + return; + } + + if (action === "canvas") { + openExternalUrl(import.meta.env.VITE_CANVAS_URL); + return; + } + + openAppDownloadDialog(); + }, + [navigate, openAppDownloadDialog, openExternalUrl], + ); + const handleFooterAction = useCallback( (action: string) => { if (action === "home") { @@ -365,6 +459,7 @@ export default function Index() { if (action === "image" || action === "video" || action === "voice" || action === "character") { handleFeatureAction(action); + return; } }, [handleFeatureAction, navigate, openAppDownloadDialog, openExternalUrl], @@ -373,14 +468,15 @@ export default function Index() { const navPanelContent = useMemo(() => { if (openNavPanel === "features") { return ( -
    - {FEATURE_ACTIONS.map((item) => ( -
  • +
      + {HEADER_FEATURE_ACTIONS.map((item) => ( +
    • -
      • -
    • - -
      • -
    • - -
      • -
    - ); - } - - if (openNavPanel === "support") { - return ( -
    -
      -
    • - -
      • -
    • +
        + {HEADER_PRODUCT_ACTIONS.map((item) => ( +
        • -
      • - {contactUsPageUrl ? ( - - {t("index.header.support_contact")} - + ))} +
      + ); + } + + if (openNavPanel === "support") { + const hoveredSupportItem = HEADER_SUPPORT_ACTIONS.find((item) => item.id === hoveredSupportAction); + const hoveredSupportQrSrc = + hoveredSupportItem == null ? "" : hoveredSupportItem.id === "contact" ? qrCodeSrc : supportQrAssets[hoveredSupportItem.id]; + + return ( +
      +
        + {HEADER_SUPPORT_ACTIONS.map((item) => ( +
      • + +
        • + ))} +
      + + {hoveredSupportItem != null ? ( +
      + {hoveredSupportQrSrc ? ( + {t("index.2026.header.support.qr_alt", ) : ( - {t("index.header.support_contact")} + {t("index.2026.header.support.qr_pending")} )} -
      • -
    - {t("index.2026.footer.qr_alt")} +
    + ) : null} ); } return null; - }, [contactUsPageUrl, handleFeatureAction, openAppDownloadDialog, openExternalUrl, openNavPanel, qrCodeSrc, t]); + }, [handleFeatureAction, handleHeaderProductAction, hoveredSupportAction, openNavPanel, qrCodeSrc, supportQrAssets, t]); const renderProductAction = useCallback( (card: ProductCardConfig) => { const content = ( <> - {t(card.ctaKey)} - + {t(card.ctaKey)} + ); - if (card.action === "home") { + if (card.action === "explore") { return ( - + {content} ); @@ -490,7 +571,7 @@ export default function Index() { return ( ); } return ( - + ); }, [openAppDownloadDialog, openExternalUrl, t], ); + const renderDetailBlock = (block: DetailBlockConfig) => { + const blockClass = block.id === "tv" ? "index_product_detail_tv" : "index_product_detail_mcn"; + const headingClass = block.id === "tv" ? "index_product_detail_tv_heading" : "index_product_detail_mcn_heading"; + const imageClass = block.id === "tv" ? "index_product_detail_tv_img" : "index_product_detail_mcn_img"; + + return ( +
    + {block.imageFirst ? {t(block.imageAltKey)} : null} + +
    +
    +

    {t(block.eyebrowKey)}

    +

    + {block.titleKeys.map((key) => ( + + {t(key)} + + ))} +

    +
    + {block.descriptionKeys.map((key) => ( +

    + {t(key)} +

    + ))} +
    +
    +
      + {block.bulletKeys.map((key) => ( +
    • + + + + {t(key)} +
      • + ))} +
    +
    + + {!block.imageFirst ? {t(block.imageAltKey)} : null} +
    + ); + }; + return ( -
    +
    { setOpenNavPanel(null); + setHoveredSupportAction(null); }} > -
    - - +
    + + -
    -
    -
    {navPanelContent}
    +
    +
    {navPanelContent}
    -
    -
    - -
    +
    +
    + +
    -
    -
    -

    {t("index.2026.hero.brand")}

    -
    -

    {t("index.2026.hero.title1")}

    -

    {t("index.2026.hero.title2")}

    +
    +
    +

    {t("index.2026.hero.brand")}

    +
    +

    {t("index.2026.hero.title1")}

    +

    {t("index.2026.hero.title2")}

    -
    -

    {t("index.2026.hero.description1")}

    -

    {t("index.2026.hero.description2")}

    +
    +

    {t("index.2026.hero.description1")}

    +

    {t("index.2026.hero.description2")}

    -
    +
    -
    -
    -
    - -
    +
    +
    +
    +

    {t("index.2026.products.eyebrow")}

    +

    + {t("index.2026.products.title")} +

    +
    +
    {PRODUCT_CARDS.map((card) => ( -
    -
    - +
    +
    +
    -
    -

    {t(card.eyebrowKey)}

    -

    {t(card.titleKey)}

    -

    {t(card.descriptionKey)}

    +
    +

    {t(card.eyebrowKey)}

    +

    {t(card.titleKey)}

    +

    {t(card.descriptionKey)}

    {renderProductAction(card)}
    @@ -627,15 +780,23 @@ export default function Index() {
    -
    -
    -
    - -
    +
    +
    +
    +
    +

    {t("index.2026.popiart.eyebrow")}

    +

    + {t("index.2026.popiart.title")} +

    +
    +

    {t("index.2026.popiart.description")}

    +
    +
    +
    {FEATURE_ACTIONS.map((action) => (
    -
    - {t("index.2026.popiart.image_alt")} -
    - -
    - -
    -
    - {t("index.2026.assets.image_alt")} -
    -
    - + {t("index.2026.popiart.image_alt")} + +
    +
    +

    {t("index.2026.assets.eyebrow")}

    +

    + {t("index.2026.assets.title")} +

    +
    +

    {t("index.2026.assets.description1")}

    +

    {t("index.2026.assets.description2")}

    +
    +
    + {t("index.2026.assets.image_alt")}
    -
    -
    - {DETAIL_BLOCKS.map((block) => ( -
    - {block.imageFirst ? ( -
    - {t(block.imageAltKey)} -
    - ) : null} - -
    - -
      - {block.bulletKeys.map((key) => ( -
    • - - - - {t(key)} -
      • - ))} -
    -
    - - {!block.imageFirst ? ( -
    - {t(block.imageAltKey)} -
    - ) : null} -
    - ))} -
    +
    +
    {DETAIL_BLOCKS.map((block) => renderDetailBlock(block))}
    -
    -
    - -
    -
    +
    +
    +
    +

    {t("index.2026.workflow.eyebrow")}

    +

    + {t("index.2026.workflow.title1")} + {t("index.2026.workflow.title2")} +

    +
    +
    +
    {WORKFLOW_STEPS.map((step, index) => ( -
    -
    {index + 1}
    -
    -

    {t(step.titleKey)}

    -

    {t(step.descriptionKey)}

    +
    +
    {index + 1}
    +
    +

    {t(step.titleKey)}

    +

    {t(step.descriptionKey)}

    ))} @@ -716,76 +855,126 @@ export default function Index() {
    -
    -
    -
    - -
    +
    +
    +
    +
    +

    {t("index.2026.cloud.eyebrow")}

    +

    + {t("index.2026.cloud.title1")} + {t("index.2026.cloud.title2")} +

    +
    +

    {t("index.2026.cloud.description")}

    +
    +
    +
    {CLOUD_CARDS.map((card) => ( -
    - -
    -

    {t(card.titleKey)}

    -

    {t(card.descriptionKey)}

    +
    + +
    +

    {t(card.titleKey)}

    +

    {t(card.descriptionKey)}

    ))}
    -
    - +
    +
    +

    {t("index.2026.vision.eyebrow")}

    +

    + {t("index.2026.vision.title1")} + {t("index.2026.vision.title2")} +

    +
    - diff --git a/打包dist-Windows.bat b/打包dist-Windows.bat new file mode 100644 index 0000000..6a894cc --- /dev/null +++ b/打包dist-Windows.bat @@ -0,0 +1,57 @@ +@echo off +setlocal + +set "SCRIPT_DIR=%~dp0" +set "DIST_DIR=%SCRIPT_DIR%dist" + +echo Building and packaging dist... +echo Project folder: %SCRIPT_DIR% + +cd /d "%SCRIPT_DIR%" +if errorlevel 1 ( + echo Error: could not enter project folder. + pause + exit /b 1 +) + +where npm >nul 2>nul +if errorlevel 1 ( + echo Error: npm was not found. Please install Node.js first. + pause + exit /b 1 +) + +echo. +echo Running npm run build:prod... +call npm run build:prod +if errorlevel 1 ( + echo Error: build:prod failed. Package was not created. + pause + exit /b 1 +) + +if not exist "%DIST_DIR%\" ( + echo Error: dist folder was not found after build. + pause + exit /b 1 +) + +where powershell >nul 2>nul +if errorlevel 1 ( + echo Error: PowerShell was not found. + pause + exit /b 1 +) + +powershell -NoProfile -ExecutionPolicy Bypass -Command "$ErrorActionPreference='Stop'; $scriptDir=$env:SCRIPT_DIR; $distDir=Join-Path $scriptDir 'dist'; $packageName='popiart-website-new'; $outputZip=Join-Path $scriptDir ($packageName + '.zip'); $tmpRoot=Join-Path ([IO.Path]::GetTempPath()) ('popiart-package-' + [guid]::NewGuid().ToString('N')); try { $packageDir=Join-Path $tmpRoot $packageName; New-Item -ItemType Directory -Path $packageDir -Force | Out-Null; Get-ChildItem -LiteralPath $distDir -Force | Copy-Item -Destination $packageDir -Recurse -Force; Get-ChildItem -LiteralPath $packageDir -Recurse -Force -Filter '.DS_Store' | Remove-Item -Force; if (Test-Path -LiteralPath $outputZip) { Remove-Item -LiteralPath $outputZip -Force }; Compress-Archive -LiteralPath $packageDir -DestinationPath $outputZip -Force; Write-Host 'Done:' $outputZip; Get-Item -LiteralPath $outputZip | Format-List FullName,Length } finally { if (Test-Path -LiteralPath $tmpRoot) { Remove-Item -LiteralPath $tmpRoot -Recurse -Force } }" + +if errorlevel 1 ( + echo Error: package failed. + pause + exit /b 1 +) + +echo. +echo Package complete. +echo Closing this window in 3 seconds... +timeout /t 3 /nobreak >nul diff --git a/打包dist.command b/打包dist.command new file mode 100755 index 0000000..785c655 --- /dev/null +++ b/打包dist.command @@ -0,0 +1,95 @@ +#!/bin/bash + +set -u + +SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)" +DIST_DIR="$SCRIPT_DIR/dist" +PACKAGE_NAME="popiart-website-new" +OUTPUT_ZIP="$SCRIPT_DIR/$PACKAGE_NAME.zip" +TMP_DIR="$(mktemp -d)" + +export PATH="/opt/homebrew/bin:/usr/local/bin:$PATH" + +if [ -s "$HOME/.nvm/nvm.sh" ]; then + . "$HOME/.nvm/nvm.sh" +fi + +cleanup() { + if [ -n "${TMP_DIR:-}" ] && [ -d "$TMP_DIR" ]; then + rm -rf "$TMP_DIR" + fi +} + +pause_before_exit() { + echo + read -r -p "按回车键关闭窗口..." +} + +close_after_success() { + echo + echo "3 秒后自动关闭窗口..." + sleep 3 +} + +trap cleanup EXIT + +echo "开始打包 dist..." +echo "项目目录: $SCRIPT_DIR" + +cd "$SCRIPT_DIR" || { + echo "错误: 无法进入项目目录。" + pause_before_exit + exit 1 +} + +if ! command -v npm >/dev/null 2>&1; then + echo "错误: 没有找到 npm，请先确认 Node.js 已安装。" + pause_before_exit + exit 1 +fi + +echo +echo "正在执行 npm run build:prod..." +npm run build:prod + +if [ $? -ne 0 ]; then + echo "错误: build:prod 执行失败，已停止打包。" + pause_before_exit + exit 1 +fi + +if [ ! -d "$DIST_DIR" ]; then + echo "错误: build 完成后没有找到 dist 目录。" + pause_before_exit + exit 1 +fi + +echo +echo "正在打包新的 dist..." + +if ! command -v zip >/dev/null 2>&1; then + echo "错误: 当前系统没有找到 zip 命令。" + pause_before_exit + exit 1 +fi + +mkdir "$TMP_DIR/$PACKAGE_NAME" +cp -R "$DIST_DIR/." "$TMP_DIR/$PACKAGE_NAME/" + +( + cd "$TMP_DIR" || exit 1 + zip -qry -X "$OUTPUT_ZIP" "$PACKAGE_NAME" -x "*/.DS_Store" "__MACOSX/*" +) + +if [ $? -ne 0 ]; then + echo "错误: 打包失败。" + pause_before_exit + exit 1 +fi + +echo "打包完成:" +echo "$OUTPUT_ZIP" +echo +ls -lh "$OUTPUT_ZIP" + +close_after_success