feat: launch Chat Assistant product page
This commit is contained in:
@@ -0,0 +1,135 @@
|
||||
import {
|
||||
ArrowRight, Brain, ChartLineUp, CheckCircle, CirclesFour,
|
||||
Database, Factory, List, LockKey, MagnifyingGlass, ShieldCheck,
|
||||
ShoppingCart, Stack, UserFocus, X
|
||||
} from '@phosphor-icons/react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
const zhIndustries = [
|
||||
{ id: 'insurance', label: '保险', icon: ShieldCheck, title: '让保障建议更精准、更可信', description: '联动客户需求、保单信息、产品条款与服务记录，在数据权限和合规策略约束下辅助顾问组织保障建议。', evidence: ['客户需求与家庭画像', '保单、产品与条款事实', '合规表达与适当性策略'], action: '识别保障缺口，生成匹配客户目标的建议，并明确依据、适用条件与下一步沟通重点。' },
|
||||
{ id: 'manufacturing', label: '制造', icon: Factory, title: '把经验沉淀进生产与供应链判断', description: '接入生产、质量、库存与供应商数据，融合工艺知识和处置规则，辅助团队识别风险与改进路径。', evidence: ['生产与质量数据', '工艺知识与异常规则', '供应链历史案例'], action: '定位异常的可能原因，给出处置顺序、验证条件与协同建议。' },
|
||||
{ id: 'retail', label: '零售', icon: ShoppingCart, title: '把门店与商品信号转成运营动作', description: '连接商品、库存、会员和营销数据，结合区域经验与运营策略，辅助门店形成可执行方案。', evidence: ['商品与库存状态', '会员与渠道行为', '区域运营策略'], action: '形成选品、补货与活动建议，并说明适用门店和预期目标。' },
|
||||
{ id: 'services', label: '专业服务', icon: UserFocus, title: '让专业判断有章可循、有据可查', description: '将项目材料、专业知识、服务流程与质量标准组织起来，辅助团队提高交付一致性。', evidence: ['项目与客户材料', '专业方法与知识库', '交付规范和检查项'], action: '生成结构化判断、工作建议与待核验事项，帮助团队稳步推进。' }
|
||||
];
|
||||
|
||||
const enIndustries = [
|
||||
{ id: 'insurance', label: 'Insurance', icon: ShieldCheck, title: 'Make protection advice precise and trustworthy', description: 'Connect customer needs, policies, product terms and service history under data-access and compliance controls.', evidence: ['Customer needs and household context', 'Policy, product and coverage facts', 'Compliance and suitability policies'], action: 'Identify protection gaps and propose suitable next steps with clear evidence and conditions.' },
|
||||
{ id: 'manufacturing', label: 'Manufacturing', icon: Factory, title: 'Bring experience into supply-chain decisions', description: 'Connect production, quality, inventory and supplier data with process knowledge.', evidence: ['Production and quality data', 'Process knowledge and rules', 'Supply-chain cases'], action: 'Prioritize likely causes, verification steps and cross-team actions.' },
|
||||
{ id: 'retail', label: 'Retail', icon: ShoppingCart, title: 'Turn store and product signals into action', description: 'Combine merchandise, inventory, membership and campaign data with regional playbooks.', evidence: ['Merchandise and inventory', 'Member and channel behavior', 'Regional playbooks'], action: 'Propose assortment, replenishment and campaign actions for the right stores.' },
|
||||
{ id: 'services', label: 'Professional Services', icon: UserFocus, title: 'Make expert judgement consistent and traceable', description: 'Organize project materials, specialist knowledge, service workflows and quality standards.', evidence: ['Project and client materials', 'Methods and knowledge base', 'Delivery standards'], action: 'Produce structured findings, recommendations and open verification items.' }
|
||||
];
|
||||
|
||||
const copy = {
|
||||
zh: {
|
||||
brand: '荣刻科技', product: '箴言助手', navCapabilities: '核心能力', navIndustries: '行业扩展', navTrust: '安全可信', navCta: '预约演示', language: 'EN', menu: '打开导航', close: '关闭导航',
|
||||
eyebrow: 'CHAT ASSISTANT / 箴言助手', titleLine1: '让行业经验，', titleLine2: '成为', titleAccent: '每一次决策的底气',
|
||||
summary: '连接企业数据与领域知识，基于可信的信息来源和真实业务经验，为你提供有依据、可落地的智能建议，让复杂问题更快找到确定的答案。', primary: '预约产品演示', secondary: '了解核心能力',
|
||||
proof: ['连接企业数据', '融合领域知识', '给出有依据的建议'], visualAlt: '箴言助手基于企业数据与领域知识生成建议的产品界面',
|
||||
capabilitiesKicker: '核心能力', capabilitiesTitle: '六大能力，构建企业的专属智能伙伴', capabilitiesSummary: '从数据连接到行业落地，箴言助手把建议生成所需的上下文、工具与治理能力组织成一套可持续运营的系统。',
|
||||
capabilities: [
|
||||
['企业数据连接', '连接业务系统与数据库，以受控范围、安全字段和运行时查询构建事实底座。'],
|
||||
['领域知识融合', '将行业经验沉淀为技能、意图、工具、知识与表达策略，按场景组合调用。'],
|
||||
['智能分析建议', '结合会话上下文与工具事实，形成面向具体对象、具体目标的可执行建议。'],
|
||||
['可信来源追溯', '记录意图、技能、工具调用、模型响应与关键依据，支持分析、审计和回放。'],
|
||||
['行业场景扩展', '替换数据、知识、工具与策略资源，即可从保险扩展到更多专业领域。'],
|
||||
['安全合规保障', '通过统一身份、角色权限、数据范围、字段脱敏与追加式审计守住边界。']
|
||||
],
|
||||
systemKicker: 'DOMAIN INTELLIGENCE SYSTEM', systemTitle: ['行业能力，', '可以持续生长'], systemSummary: '以保险顾问服务为示例，将客户需求、产品条款、权益与服务记录组织为建议依据；通用资源体系让同一套助手能够适配不同领域的业务对象、知识结构与工作方法。', industryLabel: '选择行业示例', industryEvidence: '建议依据', industryAction: '示例建议', industries: zhIndustries,
|
||||
processKicker: 'FROM CONTEXT TO ACTION', processTitle: '从业务信息，到可执行建议', processSummary: '每次回答都经历清晰的连接、理解、建议与追溯路径，让行业经验真正进入业务流程。',
|
||||
process: [['01', '连接', '接入业务系统、知识资源与模型服务，划定数据范围和使用边界。'], ['02', '理解', '识别意图、上下文与业务对象，选择匹配的技能、工具和表达策略。'], ['03', '建议', '基于工具事实和行业经验生成建议，明确依据、条件与下一步行动。'], ['04', '追溯', '保留会话、资源版本、工具调用、耗时与结果，支持复盘和持续优化。']],
|
||||
trustKicker: 'SECURE BY DESIGN', trustTitle: ['建议可以智能，', '边界必须清晰'], trustSummary: '箴言助手以企业身份、数据权限和可审计运行作为产品底座。模型负责理解与表达，关键事实来自受控数据与业务工具。',
|
||||
trustItems: [['统一身份与明确授权', '接入 Roncarve IAM OIDC，以稳定外部身份绑定账号，通过显式应用准入和角色授权控制访问。'], ['数据范围与字段保护', '数据源、对象范围和字段元数据独立管理，运行时按权限查询并对敏感字段实施脱敏。'], ['全链路指标与审计', '会话指标、Agent 选择、工具调用和管理操作均可查询，支持完整性校验与问题回放。']],
|
||||
ctaKicker: 'CHAT ASSISTANT / PRODUCT DEMO', ctaTitle: ['从一个真实场景开始，', '让行业经验进入每一次决策'], ctaSummary: '告诉我们你的业务对象、数据基础、专业流程与安全要求，我们将一起梳理最适合的箴言助手落地路径。', ctaButton: '预约产品演示', copyright: '海南荣刻科技有限公司', footerSignal: '数据驱动 · AI 赋能 · 安全交付', record: '琼ICP备2025052166号-1', policeAlt: '公安备案图标'
|
||||
},
|
||||
en: {
|
||||
brand: 'Roncarve Tech', product: 'Chat Assistant', navCapabilities: 'Capabilities', navIndustries: 'Industries', navTrust: 'Trust', navCta: 'Book a Demo', language: '中文', menu: 'Open navigation', close: 'Close navigation',
|
||||
eyebrow: 'CHAT ASSISTANT', titleLine1: 'Turn domain experience', titleLine2: 'into confidence for', titleAccent: 'every decision', summary: 'Connect enterprise data with domain knowledge to deliver grounded, actionable advice from trusted information and real operating experience.', primary: 'Book a Product Demo', secondary: 'Explore Capabilities', proof: ['Connect enterprise data', 'Apply domain knowledge', 'Ground every recommendation'], visualAlt: 'Chat Assistant product interface producing advice from enterprise data and domain knowledge',
|
||||
capabilitiesKicker: 'CORE CAPABILITIES', capabilitiesTitle: 'Six capabilities for a dedicated enterprise intelligence partner', capabilitiesSummary: 'From governed data access to vertical delivery, Chat Assistant organizes the context, tools and controls required for dependable advice.',
|
||||
capabilities: [['Enterprise Data', 'Connect systems and databases through governed scopes, protected fields and runtime queries.'], ['Domain Knowledge', 'Organize expertise as skills, intents, tools, knowledge and expression policies.'], ['Actionable Advice', 'Combine conversation context with tool-grounded facts for specific business objectives.'], ['Traceable Sources', 'Record intent, skills, tool calls, model responses and evidence for analysis and replay.'], ['Vertical Expansion', 'Adapt to a new industry by replacing data, knowledge, tools and policy resources.'], ['Security & Compliance', 'Protect enterprise boundaries with SSO, roles, scopes, masking and append-only audit.']],
|
||||
systemKicker: 'DOMAIN INTELLIGENCE SYSTEM', systemTitle: ['Industry capability', 'grows with your business.'], systemSummary: 'Using insurance advisory as an example, the experience organizes customer needs, product terms, benefits and service context into grounded advice. The same resource model adapts to new objects, knowledge and operating methods.', industryLabel: 'Choose an example industry', industryEvidence: 'Evidence', industryAction: 'Example outcome', industries: enIndustries,
|
||||
processKicker: 'FROM CONTEXT TO ACTION', processTitle: 'From business context to actionable advice', processSummary: 'Every response follows a clear connect, understand, advise and trace path.', process: [['01', 'Connect', 'Connect systems, knowledge and model services with explicit data boundaries.'], ['02', 'Understand', 'Resolve intent, context and entities, then select relevant skills, tools and policies.'], ['03', 'Advise', 'Use tool-grounded facts and domain experience to explain evidence and next actions.'], ['04', 'Trace', 'Preserve conversations, resource versions, tool calls, latency and outcomes.']],
|
||||
trustKicker: 'SECURE BY DESIGN', trustTitle: ['Advice can be intelligent.', 'Boundaries must stay explicit.'], trustSummary: 'Enterprise identity, data authorization and observable operation are part of the product foundation. Models interpret and communicate; governed data and tools provide the facts.', trustItems: [['Identity and explicit access', 'Integrate Roncarve IAM OIDC with stable external identity binding, explicit application access and role grants.'], ['Data scope and field protection', 'Manage sources, object scopes and field metadata separately, enforcing access and masking at runtime.'], ['Metrics and audit end to end', 'Query conversation metrics, Agent selection, tool use and admin operations with integrity checks and replay.']],
|
||||
ctaKicker: 'CHAT ASSISTANT / PRODUCT DEMO', ctaTitle: ['Start with one real scenario.', 'Put domain experience into every decision.'], ctaSummary: 'Tell us about your business entities, data foundation, specialist workflow and security needs. We will shape the right delivery path together.', ctaButton: 'Book a Product Demo', copyright: 'Hainan Roncarve Technology Co., Ltd', footerSignal: 'DATA-DRIVEN · AI-POWERED · SECURE DELIVERY', record: 'Qiong ICP No. 2025052166-1', policeAlt: 'Public security filing icon'
|
||||
}
|
||||
};
|
||||
|
||||
const capabilityIcons = [Database, Brain, ChartLineUp, MagnifyingGlass, CirclesFour, ShieldCheck];
|
||||
const processIcons = [Database, Brain, ChartLineUp, Stack];
|
||||
const trustIcons = [LockKey, ShieldCheck, MagnifyingGlass];
|
||||
|
||||
function mailto(language) {
|
||||
const subject = language === 'zh' ? '[箴言助手] 产品演示预约' : '[Chat Assistant] Product demo request';
|
||||
const body = language === 'zh' ? '您好，我想预约箴言助手产品演示。\n\n所属行业：\n业务场景：\n现有数据/系统：\n部署要求：\n联系人：' : 'Hello, I would like to book a Chat Assistant demo.\n\nIndustry:\nUse case:\nCurrent data/systems:\nDeployment needs:\nContact:';
|
||||
return `mailto:contact@roncarve.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
|
||||
}
|
||||
|
||||
function ProductNav({ language, setLanguage }) {
|
||||
const t = copy[language];
|
||||
const [open, setOpen] = useState(false);
|
||||
const close = () => setOpen(false);
|
||||
return <nav className="assistant-nav" aria-label={language === 'zh' ? '箴言助手产品导航' : 'Chat Assistant product navigation'}>
|
||||
<div className="assistant-shell assistant-nav-inner">
|
||||
<a className="assistant-brand" href="/" aria-label={language === 'zh' ? '返回荣刻科技首页' : 'Back to Roncarve home'}><img src="/assets/brand-logo-final.png" alt="" /><span><strong>{t.brand}</strong><small>RONCARVE TECHNOLOGY</small></span></a>
|
||||
<button className="assistant-menu" type="button" onClick={() => setOpen(!open)} aria-expanded={open} aria-controls="assistantNavLinks" aria-label={open ? t.close : t.menu}>{open ? <X size={22} /> : <List size={22} />}</button>
|
||||
<div className={`assistant-nav-links ${open ? 'is-open' : ''}`} id="assistantNavLinks">
|
||||
<a href="#top" onClick={close}>{t.product}</a><a href="#capabilities" onClick={close}>{t.navCapabilities}</a><a href="#industries" onClick={close}>{t.navIndustries}</a><a href="#trust" onClick={close}>{t.navTrust}</a>
|
||||
<button className="assistant-language" type="button" onClick={() => setLanguage(language === 'zh' ? 'en' : 'zh')}>{t.language}</button>
|
||||
<a className="assistant-nav-cta" href={mailto(language)} onClick={close}>{t.navCta}<ArrowRight size={16} weight="bold" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>;
|
||||
}
|
||||
|
||||
function IndustryExplorer({ t }) {
|
||||
const [activeId, setActiveId] = useState(t.industries[0].id);
|
||||
useEffect(() => setActiveId(t.industries[0].id), [t]);
|
||||
const active = t.industries.find((item) => item.id === activeId) ?? t.industries[0];
|
||||
const ActiveIcon = active.icon;
|
||||
return <div className="industry-explorer">
|
||||
<div className="industry-tab-label">{t.industryLabel}</div>
|
||||
<div className="industry-tabs" role="tablist" aria-label={t.industryLabel}>{t.industries.map((industry) => { const Icon = industry.icon; const selected = industry.id === active.id; return <button key={industry.id} type="button" role="tab" aria-selected={selected} className={selected ? 'is-active' : ''} onClick={() => setActiveId(industry.id)}><Icon size={19} weight="duotone" />{industry.label}</button>; })}</div>
|
||||
<div className="industry-detail" role="tabpanel" aria-live="polite">
|
||||
<div className="industry-detail-heading"><span><ActiveIcon size={26} weight="duotone" /></span><div><small>{active.label}</small><h3>{active.title}</h3></div></div>
|
||||
<p>{active.description}</p>
|
||||
<div className="industry-detail-grid"><div><strong>{t.industryEvidence}</strong><ul>{active.evidence.map((item) => <li key={item}><CheckCircle size={16} weight="fill" />{item}</li>)}</ul></div><div><strong>{t.industryAction}</strong><p>{active.action}</p></div></div>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
export function ChatAssistantProductPage() {
|
||||
const [language, setLanguageState] = useState(() => { try { return localStorage.getItem('site_lang') === 'en' ? 'en' : 'zh'; } catch { return 'zh'; } });
|
||||
const t = copy[language];
|
||||
const meta = useMemo(() => language === 'zh' ? { title: '箴言助手 Chat Assistant｜垂直行业智能建议助手 - 荣刻科技', description: '箴言助手连接企业数据、领域知识与业务工具，为垂直行业提供有依据、可落地、可追溯的智能建议。' } : { title: 'Chat Assistant | Vertical Industry Advice from Roncarve', description: 'Chat Assistant connects enterprise data, domain knowledge and business tools to deliver grounded, actionable and traceable advice.' }, [language]);
|
||||
const setLanguage = (next) => { setLanguageState(next); try { localStorage.setItem('site_lang', next); } catch { /* non-critical */ } };
|
||||
|
||||
useEffect(() => { document.documentElement.lang = language === 'zh' ? 'zh-CN' : 'en'; document.title = meta.title; document.querySelector('meta[name="description"]')?.setAttribute('content', meta.description); }, [language, meta]);
|
||||
useEffect(() => {
|
||||
const items = Array.from(document.querySelectorAll('[data-reveal]'));
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { items.forEach((item) => item.classList.add('is-visible')); return undefined; }
|
||||
const observer = new IntersectionObserver((entries) => entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); } }), { threshold: .13 });
|
||||
items.forEach((item) => observer.observe(item));
|
||||
return () => observer.disconnect();
|
||||
}, [language]);
|
||||
|
||||
return <div className="assistant-page">
|
||||
<a className="assistant-skip" href="#main">{language === 'zh' ? '跳到主要内容' : 'Skip to main content'}</a>
|
||||
<ProductNav language={language} setLanguage={setLanguage} />
|
||||
<main id="main">
|
||||
<section className="assistant-hero" id="top"><div className="assistant-shell assistant-hero-grid">
|
||||
<div className="assistant-hero-copy" data-reveal><p className="assistant-eyebrow">{t.eyebrow}</p><h1><span>{t.titleLine1}</span><span>{t.titleLine2}{language === 'en' ? ' ' : ''}<em>{t.titleAccent}</em></span></h1><p className="assistant-hero-summary">{t.summary}</p><div className="assistant-hero-actions"><a className="assistant-button-primary" href={mailto(language)}>{t.primary}<ArrowRight size={18} weight="bold" /></a><a className="assistant-button-secondary" href="#capabilities">{t.secondary}</a></div><ul className="assistant-proof">{t.proof.map((item) => <li key={item}><span />{item}</li>)}</ul></div>
|
||||
<figure className="assistant-hero-visual" data-reveal><img src="/assets/chat-assistant-hero-v1.jpg" alt={t.visualAlt} /><figcaption><span>KNOWLEDGE</span><span>CONNECTS</span><span>PEOPLE</span><span>AND</span><span>POSSIBILITIES</span></figcaption></figure>
|
||||
</div></section>
|
||||
|
||||
<section className="assistant-capabilities" id="capabilities"><div className="assistant-shell"><header className="assistant-section-center" data-reveal><span className="assistant-kicker">{t.capabilitiesKicker}</span><h2>{t.capabilitiesTitle}</h2><p>{t.capabilitiesSummary}</p></header><div className="capability-grid" data-reveal>{t.capabilities.map(([title, description], index) => { const Icon = capabilityIcons[index]; return <article key={title}><span className="capability-icon"><Icon size={25} weight="duotone" /></span><h3>{title}</h3><p>{description}</p></article>; })}</div></div></section>
|
||||
|
||||
<section className="assistant-system" id="industries"><div className="assistant-shell assistant-system-grid"><header className="assistant-section-left" data-reveal><span className="assistant-kicker">{t.systemKicker}</span><h2>{t.systemTitle.map((line) => <span key={line}>{line}</span>)}</h2><p>{t.systemSummary}</p></header><div data-reveal><IndustryExplorer t={t} /></div></div></section>
|
||||
|
||||
<section className="assistant-process" id="process"><div className="assistant-shell"><header className="assistant-section-split" data-reveal><div><span className="assistant-kicker">{t.processKicker}</span><h2>{t.processTitle}</h2></div><p>{t.processSummary}</p></header><div className="process-grid" data-reveal>{t.process.map(([number, title, description], index) => { const Icon = processIcons[index]; return <article key={number}><span className="process-number">{number}</span><span className="process-icon"><Icon size={24} weight="duotone" /></span><h3>{title}</h3><p>{description}</p></article>; })}</div></div></section>
|
||||
|
||||
<section className="assistant-trust" id="trust"><div className="assistant-shell assistant-trust-grid"><header className="assistant-section-left" data-reveal><span className="assistant-kicker">{t.trustKicker}</span><h2>{t.trustTitle.map((line) => <span key={line}>{line}</span>)}</h2><p>{t.trustSummary}</p></header><div className="trust-list" data-reveal>{t.trustItems.map(([title, description], index) => { const Icon = trustIcons[index]; return <article key={title}><span><Icon size={23} weight="duotone" /></span><div><h3>{title}</h3><p>{description}</p></div></article>; })}</div></div></section>
|
||||
|
||||
<section className="assistant-cta"><div className="assistant-shell assistant-cta-inner" data-reveal><span className="assistant-kicker">{t.ctaKicker}</span><h2>{t.ctaTitle.map((line) => <span key={line}>{line}</span>)}</h2><p>{t.ctaSummary}</p><a className="assistant-button-primary" href={mailto(language)}>{t.ctaButton}<ArrowRight size={18} weight="bold" /></a></div></section>
|
||||
</main>
|
||||
<footer className="assistant-footer"><div className="assistant-shell assistant-footer-row"><div className="assistant-footer-company"><span>© 2025–2026 {t.copyright}</span><a href="https://beian.miit.gov.cn/" target="_blank" rel="noreferrer">{t.record}</a><a className="assistant-footer-police" href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank" rel="noreferrer"><img src="/assets/beian-police.png" alt={t.policeAlt} />琼公网安备 46010602000704号</a></div><span className="assistant-footer-signal">{t.footerSignal}</span></div></footer>
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
:root {
|
||||
--ca-bg: #fff;
|
||||
--ca-surface: #f6f8fc;
|
||||
--ca-surface-blue: #edf4ff;
|
||||
--ca-ink: #07152f;
|
||||
--ca-text: #3f4f6a;
|
||||
--ca-muted: #71809a;
|
||||
--ca-line: #dce3ee;
|
||||
--ca-blue: #0b63f6;
|
||||
--ca-blue-strong: #004ed5;
|
||||
--ca-mint: #13a98c;
|
||||
--ca-shell: min(1320px, calc(100vw - 72px));
|
||||
--ca-display: Inter, "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
|
||||
--ca-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
||||
--ca-ease: cubic-bezier(.2, .75, .2, 1);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
|
||||
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--ca-bg); color: var(--ca-ink); font-family: var(--ca-display); -webkit-font-smoothing: antialiased; }
|
||||
body, button, input { font-family: var(--ca-display); }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { color: inherit; }
|
||||
img { display: block; max-width: 100%; }
|
||||
::selection { color: #fff; background: var(--ca-blue); }
|
||||
:focus-visible { outline: 3px solid rgba(11, 99, 246, .35); outline-offset: 3px; }
|
||||
|
||||
.assistant-page { min-height: 100vh; background: var(--ca-bg); }
|
||||
.assistant-shell { width: var(--ca-shell); margin-inline: auto; }
|
||||
.assistant-skip { position: fixed; z-index: 3000; top: 12px; left: 12px; padding: 10px 15px; border-radius: 8px; color: #fff; background: var(--ca-blue); transform: translateY(-150%); transition: transform .2s; }
|
||||
.assistant-skip:focus { transform: translateY(0); }
|
||||
|
||||
.assistant-nav { position: fixed; z-index: 1000; inset: 0 0 auto; height: 76px; border-bottom: 1px solid rgba(220, 227, 238, .88); background: rgba(255, 255, 255, .94); box-shadow: 0 8px 30px rgba(42, 64, 103, .035); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
|
||||
.assistant-nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
|
||||
.assistant-brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
|
||||
.assistant-brand img { width: 39px; height: 39px; object-fit: contain; }
|
||||
.assistant-brand > span { display: flex; flex-direction: column; gap: 4px; }
|
||||
.assistant-brand strong { font-size: 16px; font-weight: 780; letter-spacing: .035em; }
|
||||
.assistant-brand small { color: var(--ca-muted); font: 600 8px/1 var(--ca-mono); letter-spacing: .15em; }
|
||||
.assistant-nav-links { display: flex; align-items: center; gap: 28px; }
|
||||
.assistant-nav-links > a:not(.assistant-nav-cta) { position: relative; padding-block: 10px; font-size: 14px; font-weight: 650; }
|
||||
.assistant-nav-links > a:not(.assistant-nav-cta)::after { content: ""; position: absolute; inset: auto 0 2px; height: 2px; background: var(--ca-blue); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
|
||||
.assistant-nav-links > a:not(.assistant-nav-cta):hover::after { transform: scaleX(1); }
|
||||
.assistant-language { min-height: 38px; padding: 0 12px; border: 1px solid var(--ca-line); border-radius: 8px; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
|
||||
.assistant-language:hover { border-color: #aab9d0; background: var(--ca-surface); }
|
||||
.assistant-nav-cta, .assistant-button-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px; border: 1px solid var(--ca-blue); border-radius: 9px; color: #fff; background: var(--ca-blue); font-size: 14px; font-weight: 760; box-shadow: 0 10px 28px rgba(11, 99, 246, .17); transition: transform .2s var(--ca-ease), background .2s ease, box-shadow .2s ease; }
|
||||
.assistant-nav-cta:hover, .assistant-button-primary:hover { background: var(--ca-blue-strong); transform: translateY(-2px); box-shadow: 0 15px 36px rgba(11, 99, 246, .23); }
|
||||
.assistant-menu { display: none; place-items: center; width: 42px; height: 42px; border: 1px solid var(--ca-line); border-radius: 9px; background: #fff; cursor: pointer; }
|
||||
|
||||
.assistant-hero { padding: 110px 0 20px; overflow: hidden; background: #fff; }
|
||||
.assistant-hero-grid { display: grid; grid-template-columns: minmax(510px, .94fr) minmax(0, 1.06fr); align-items: start; gap: 32px; }
|
||||
.assistant-hero-copy { padding-top: 35px; }
|
||||
.assistant-eyebrow, .assistant-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--ca-blue); font: 750 11px/1.4 var(--ca-mono); letter-spacing: .15em; text-transform: uppercase; }
|
||||
.assistant-eyebrow::after { content: ""; width: 34px; height: 1px; background: var(--ca-blue); }
|
||||
.assistant-hero h1 { margin: 28px 0 0; font-size: clamp(48px, 4.1vw, 62px); line-height: 1.05; letter-spacing: -.07em; }
|
||||
.assistant-hero h1 > span { display: block; }
|
||||
.assistant-hero h1 em { color: var(--ca-blue); font-style: normal; }
|
||||
.assistant-hero-summary { max-width: 500px; margin: 30px 0 0; color: var(--ca-text); font-size: 17px; line-height: 1.85; }
|
||||
.assistant-hero-actions { display: flex; gap: 12px; margin-top: 34px; }
|
||||
.assistant-button-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border: 1px solid #c8d3e2; border-radius: 9px; color: var(--ca-ink); background: #fff; font-size: 14px; font-weight: 750; transition: border-color .2s ease, background .2s ease, transform .2s var(--ca-ease); }
|
||||
.assistant-button-secondary:hover { border-color: #9badc5; background: var(--ca-surface); transform: translateY(-2px); }
|
||||
.assistant-proof { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 28px 0 0; padding: 0; color: var(--ca-text); list-style: none; }
|
||||
.assistant-proof li { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 620; }
|
||||
.assistant-proof li span { width: 6px; height: 6px; border-radius: 50%; background: var(--ca-blue); }
|
||||
.assistant-hero-visual { position: relative; margin: 0; overflow: hidden; border: 1px solid #dbe3ee; border-radius: 25px; background: var(--ca-surface); box-shadow: 0 35px 90px rgba(48, 70, 109, .13); }
|
||||
.assistant-hero-visual::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); pointer-events: none; }
|
||||
.assistant-hero-visual img { width: 100%; aspect-ratio: 1.31; object-fit: cover; object-position: center; }
|
||||
.assistant-hero-visual figcaption { position: absolute; right: 15px; top: 50%; display: flex; flex-direction: column; gap: 4px; color: #697994; font: 600 7px/1.2 var(--ca-mono); letter-spacing: .08em; transform: translateY(-50%); }
|
||||
|
||||
.assistant-capabilities { padding: 38px 0 124px; border-top: 1px solid #eef1f6; background: var(--ca-bg); }
|
||||
.assistant-section-center { max-width: 780px; margin: 0 auto 58px; text-align: center; }
|
||||
.assistant-section-center h2, .assistant-section-left h2, .assistant-section-split h2, .assistant-cta h2 { margin: 20px 0 0; font-size: clamp(38px, 4vw, 58px); line-height: 1.12; letter-spacing: -.055em; }
|
||||
.assistant-section-center > p, .assistant-section-left > p, .assistant-section-split > p, .assistant-cta p { color: var(--ca-text); font-size: 16px; line-height: 1.8; }
|
||||
.assistant-section-center > p { margin: 20px auto 0; }
|
||||
.capability-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--ca-line); border-bottom: 1px solid var(--ca-line); }
|
||||
.capability-grid article { min-height: 250px; padding: 30px 22px; }
|
||||
.capability-grid article + article { border-left: 1px solid var(--ca-line); }
|
||||
.capability-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: var(--ca-blue); background: var(--ca-surface-blue); }
|
||||
.capability-grid article:nth-child(even) .capability-icon { color: var(--ca-mint); background: #eaf8f4; }
|
||||
.capability-grid h3 { margin: 28px 0 12px; font-size: 17px; letter-spacing: -.025em; }
|
||||
.capability-grid p { margin: 0; color: var(--ca-muted); font-size: 12px; line-height: 1.72; }
|
||||
|
||||
.assistant-system { padding: 126px 0; border-top: 1px solid #eef1f6; background: var(--ca-surface); }
|
||||
.assistant-system-grid, .assistant-trust-grid { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(620px, 1.3fr); gap: 86px; align-items: start; }
|
||||
.assistant-section-left h2 span, .assistant-cta h2 span { display: block; }
|
||||
.assistant-section-left > p { margin: 26px 0 0; }
|
||||
.industry-explorer { overflow: hidden; border: 1px solid var(--ca-line); border-radius: 18px; background: #fff; box-shadow: 0 20px 65px rgba(58, 79, 116, .08); }
|
||||
.industry-tab-label { padding: 17px 22px 11px; color: var(--ca-muted); font: 700 9px/1 var(--ca-mono); letter-spacing: .12em; text-transform: uppercase; }
|
||||
.industry-tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 12px 12px; border-bottom: 1px solid var(--ca-line); }
|
||||
.industry-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 0; border-radius: 8px; color: var(--ca-text); background: transparent; font-size: 13px; font-weight: 700; cursor: pointer; }
|
||||
.industry-tabs button:hover { background: var(--ca-surface); }
|
||||
.industry-tabs button.is-active { color: var(--ca-blue); background: var(--ca-surface-blue); }
|
||||
.industry-detail { padding: 30px; }
|
||||
.industry-detail-heading { display: flex; align-items: flex-start; gap: 16px; }
|
||||
.industry-detail-heading > span { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px; color: var(--ca-blue); background: var(--ca-surface-blue); }
|
||||
.industry-detail-heading small { color: var(--ca-blue); font: 700 9px/1 var(--ca-mono); letter-spacing: .12em; text-transform: uppercase; }
|
||||
.industry-detail h3 { margin: 7px 0 0; font-size: 23px; letter-spacing: -.035em; }
|
||||
.industry-detail > p { margin: 20px 0 0; color: var(--ca-text); font-size: 14px; line-height: 1.75; }
|
||||
.industry-detail-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 0; margin-top: 28px; border-top: 1px solid var(--ca-line); }
|
||||
.industry-detail-grid > div { padding-top: 24px; }
|
||||
.industry-detail-grid > div + div { margin-left: 26px; padding-left: 26px; border-left: 1px solid var(--ca-line); }
|
||||
.industry-detail-grid strong { font-size: 12px; }
|
||||
.industry-detail-grid ul { display: grid; gap: 11px; margin: 15px 0 0; padding: 0; list-style: none; }
|
||||
.industry-detail-grid li { display: flex; align-items: center; gap: 8px; color: var(--ca-text); font-size: 12px; }
|
||||
.industry-detail-grid li svg { color: var(--ca-mint); }
|
||||
.industry-detail-grid p { margin: 15px 0 0; color: var(--ca-text); font-size: 12px; line-height: 1.72; }
|
||||
|
||||
.assistant-process { padding: 124px 0; background: #fff; }
|
||||
.assistant-section-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .65fr); align-items: end; gap: 80px; margin-bottom: 60px; }
|
||||
.assistant-section-split > p { margin: 0; }
|
||||
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ca-line); border-bottom: 1px solid var(--ca-line); }
|
||||
.process-grid article { position: relative; min-height: 300px; padding: 28px; }
|
||||
.process-grid article + article { border-left: 1px solid var(--ca-line); }
|
||||
.process-number { color: var(--ca-blue); font: 750 10px/1 var(--ca-mono); letter-spacing: .12em; }
|
||||
.process-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-top: 46px; border-radius: 50%; color: var(--ca-blue); background: var(--ca-surface-blue); }
|
||||
.process-grid h3 { margin: 28px 0 11px; font-size: 20px; }
|
||||
.process-grid p { margin: 0; color: var(--ca-muted); font-size: 13px; line-height: 1.72; }
|
||||
|
||||
.assistant-trust { padding: 126px 0; background: var(--ca-surface-blue); }
|
||||
.assistant-trust .assistant-kicker { color: var(--ca-blue-strong); }
|
||||
.trust-list { border-top: 1px solid #cbd9ee; }
|
||||
.trust-list article { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 27px 0; border-bottom: 1px solid #cbd9ee; }
|
||||
.trust-list article > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: var(--ca-blue); background: #fff; }
|
||||
.trust-list h3 { margin: 0; font-size: 19px; }
|
||||
.trust-list p { margin: 10px 0 0; color: var(--ca-text); font-size: 13px; line-height: 1.75; }
|
||||
|
||||
.assistant-cta { padding: 138px 0; text-align: center; background: #fff; }
|
||||
.assistant-cta-inner { max-width: 850px; display: flex; flex-direction: column; align-items: center; }
|
||||
.assistant-cta p { max-width: 700px; margin: 25px auto 0; }
|
||||
.assistant-cta .assistant-button-primary { margin-top: 34px; }
|
||||
|
||||
.assistant-footer { padding: 28px 0 32px; border-top: 1px solid var(--ca-line); background: var(--ca-surface); }
|
||||
.assistant-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
|
||||
.assistant-footer-company { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
|
||||
.assistant-footer-company > span, .assistant-footer-signal { color: var(--ca-muted); font: 600 9px/1.5 var(--ca-mono); }
|
||||
.assistant-footer-company a { color: var(--ca-muted); font-size: 11px; }
|
||||
.assistant-footer-company a:hover { color: var(--ca-blue); }
|
||||
.assistant-footer-police { display: inline-flex; align-items: center; gap: 5px; }
|
||||
.assistant-footer-police img { width: 18px; height: 20px; object-fit: contain; }
|
||||
.assistant-footer-signal { flex: 0 0 auto; letter-spacing: .08em; }
|
||||
|
||||
[data-reveal] { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s var(--ca-ease); }
|
||||
[data-reveal].is-visible { opacity: 1; transform: none; }
|
||||
|
||||
@media (max-width: 1160px) {
|
||||
:root { --ca-shell: min(100% - 48px, 1060px); }
|
||||
.assistant-nav-links { gap: 18px; }
|
||||
.assistant-hero-grid { grid-template-columns: minmax(390px, .8fr) minmax(500px, 1.1fr); gap: 26px; }
|
||||
.assistant-hero h1 { font-size: clamp(46px, 4.5vw, 54px); }
|
||||
.assistant-hero h1 span:last-child em { display: block; }
|
||||
.capability-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
.capability-grid article:nth-child(4) { border-left: 0; }
|
||||
.capability-grid article:nth-child(n+4) { border-top: 1px solid var(--ca-line); }
|
||||
.assistant-system-grid, .assistant-trust-grid { gap: 50px; }
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.assistant-menu { display: grid; }
|
||||
.assistant-nav-links { position: fixed; inset: 76px 0 auto; display: grid; gap: 0; padding: 14px 24px 22px; border-bottom: 1px solid var(--ca-line); background: rgba(255, 255, 255, .98); opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity .2s ease, transform .2s var(--ca-ease); }
|
||||
.assistant-nav-links.is-open { opacity: 1; pointer-events: auto; transform: none; }
|
||||
.assistant-nav-links > a:not(.assistant-nav-cta) { padding: 14px 4px; border-bottom: 1px solid var(--ca-line); }
|
||||
.assistant-nav-links > a:not(.assistant-nav-cta)::after { display: none; }
|
||||
.assistant-language { width: 100%; margin-top: 12px; }
|
||||
.assistant-nav-cta { margin-top: 10px; }
|
||||
.assistant-hero { min-height: 0; padding-top: 134px; }
|
||||
.assistant-hero-grid { grid-template-columns: 1fr; }
|
||||
.assistant-hero-copy { max-width: 720px; padding-top: 0; }
|
||||
.assistant-hero-visual { margin-top: 20px; }
|
||||
.assistant-system-grid, .assistant-trust-grid { grid-template-columns: 1fr; }
|
||||
.assistant-section-left { max-width: 720px; }
|
||||
.assistant-section-split { grid-template-columns: 1fr; gap: 22px; }
|
||||
.process-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.process-grid article:nth-child(3) { border-left: 0; }
|
||||
.process-grid article:nth-child(n+3) { border-top: 1px solid var(--ca-line); }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
:root { --ca-shell: min(100% - 28px, 560px); }
|
||||
.assistant-nav { height: 68px; }
|
||||
.assistant-brand small { display: none; }
|
||||
.assistant-nav-links { inset: 68px 0 auto; }
|
||||
.assistant-hero { padding: 116px 0 70px; }
|
||||
.assistant-hero h1 { margin-top: 24px; font-size: clamp(43px, 13vw, 58px); }
|
||||
.assistant-hero h1 span:last-child em { display: block; }
|
||||
.assistant-hero-summary { margin-top: 24px; font-size: 15px; line-height: 1.75; }
|
||||
.assistant-hero-actions { display: grid; }
|
||||
.assistant-button-primary, .assistant-button-secondary { width: 100%; }
|
||||
.assistant-proof { display: grid; gap: 10px; }
|
||||
.assistant-hero-visual { border-radius: 15px; }
|
||||
.assistant-hero-visual img { aspect-ratio: 1.12; object-position: 44% center; }
|
||||
.assistant-hero-visual figcaption { display: none; }
|
||||
.assistant-capabilities, .assistant-system, .assistant-process, .assistant-trust { padding: 88px 0; }
|
||||
.assistant-section-center { margin-bottom: 42px; text-align: left; }
|
||||
.assistant-section-center h2, .assistant-section-left h2, .assistant-section-split h2, .assistant-cta h2 { font-size: clamp(35px, 10vw, 47px); }
|
||||
.capability-grid { grid-template-columns: 1fr; }
|
||||
.capability-grid article { display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; min-height: 0; padding: 22px 8px; }
|
||||
.capability-grid article + article { border-left: 0; border-top: 1px solid var(--ca-line); }
|
||||
.capability-icon { grid-row: 1 / 3; width: 48px; height: 48px; }
|
||||
.capability-grid h3 { margin: 2px 0 4px; }
|
||||
.industry-tabs { grid-template-columns: repeat(2, 1fr); }
|
||||
.industry-detail { padding: 22px; }
|
||||
.industry-detail h3 { font-size: 20px; }
|
||||
.industry-detail-grid { grid-template-columns: 1fr; }
|
||||
.industry-detail-grid > div + div { margin: 20px 0 0; padding: 22px 0 0; border-top: 1px solid var(--ca-line); border-left: 0; }
|
||||
.process-grid { grid-template-columns: 1fr; }
|
||||
.process-grid article { min-height: 0; padding: 25px 8px 28px; }
|
||||
.process-grid article + article { border-left: 0; border-top: 1px solid var(--ca-line); }
|
||||
.process-icon { margin-top: 28px; }
|
||||
.trust-list article { grid-template-columns: 46px 1fr; gap: 14px; }
|
||||
.trust-list article > span { width: 44px; height: 44px; }
|
||||
.assistant-cta { padding: 100px 0; }
|
||||
.assistant-footer-row, .assistant-footer-company { align-items: flex-start; flex-direction: column; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
|
||||
[data-reveal] { opacity: 1; transform: none; }
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { ChatAssistantProductPage } from './ChatAssistantProductPage';
|
||||
import './chat-assistant.css';
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<ChatAssistantProductPage />
|
||||
</StrictMode>
|
||||
);
|
||||
Reference in New Issue
Block a user