QuAIChain官网是展示量子计算、人工智能和区块链技术融合生态系统的门户。网站需要传达前沿科技感、专业可信度，同时保持用户友好的交互体验，帮助不同背景的用户（投资者、开发者、企业合作伙伴等）快速了解项目价值与技术创新。
设计遵循以下核心理念：
- 科技前瞻性：通过现代UI元素和交互效果展现项目的技术前瞻性
- 专业可信度：采用简洁、结构化的布局传达专业形象
- 用户中心导向：确保信息层级清晰，重要内容突出
- 视觉连贯性：从配色到组件设计保持统一的视觉语言
- 响应式体验：在所有设备上提供优质的用户体验
- 技术开发者：关注技术细节、API文档和开发工具
- 企业决策者：关注应用场景、解决方案和商业价值
- 投资者：关注项目路线图、团队背景和代币经济模型
- 学术研究人员：关注技术创新和研究合作机会
- 行业合作伙伴：关注生态系统整合和战略合作模式
采用以蓝色为主的配色方案，象征技术稳定性与创新，同时加入金色元素代表价值与卓越：
- 主要蓝色：
#3f51b5(RGB: 63, 81, 181) - 深蓝色：
#1a237e(RGB: 26, 35, 126) - 浅蓝色：
#c5cae9(RGB: 197, 202, 233)
- 金色：
#ffd700(RGB: 255, 215, 0) - 深金色：
#ff8f00(RGB: 255, 143, 0)
- 成功色：
#4caf50(RGB: 76, 175, 80) - 信息色：
#2196f3(RGB: 33, 150, 243) - 警告色：
#ff9800(RGB: 255, 152, 0) - 危险色：
#f44336(RGB: 244, 67, 54) - 紫色：
#9c27b0(RGB: 156, 39, 176)
- 背景浅色：
#ffffff(RGB: 255, 255, 255) - 背景深色：
#0a1929(RGB: 10, 25, 41) - 文本深色：
#333333(RGB: 51, 51, 51) - 文本浅色：
#f5f5f5(RGB: 245, 245, 245)
- 主要渐变：
linear-gradient(135deg, #1a237e 0%, #3f51b5 100%) - 强调渐变：
linear-gradient(135deg, #ff8f00 0%, #ffd700 100%)
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;- 大标题：2.5-3.5rem (40-56px)
- 中标题：1.8-2.2rem (28-35px)
- 小标题：1.3-1.5rem (20-24px)
- 正文：1rem (16px)
- 小文本：0.9rem (14px)
- 极小文本：0.8rem (12px)
- 超粗体：800 (用于主要标题)
- 粗体：700 (用于副标题)
- 半粗体：600 (用于强调文本)
- 常规：400 (用于正文)
- 行高：1.6 (适用于大多数文本)
- 段落间距：1.5倍行高
- 标题下间距：0.5倍行高
- 文本对齐：主要内容左对齐，标题可居中对齐
/* 默认阴影 */
--box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
/* 悬浮阴影 */
--hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
/* 深度阴影 */
--deep-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);- 大圆角：15px (用于卡片、大按钮)
- 中圆角：10px (用于次要元素)
- 小圆角：5px (用于输入框等)
- 圆形：50% (用于圆形图标、头像)
采用基于8px的间距系统：
- 超小间距：8px
- 小间距：16px
- 中间距：24px
- 大间距：32px
- 超大间距：48px
- 特大间距：64px、80px
- 背景：白色 (#ffffff)
- 高度：80px
- 阴影：var(--box-shadow)
- Logo尺寸：40px高
- 菜单项：16px字体，#333333颜色
- 联系按钮：强调色背景，圆角30px
- 背景：半透明白色 (rgba(255, 255, 255, 0.95))
- 模糊效果：backdrop-filter: blur(10px)
- 其他同默认状态
- 汉堡菜单图标显示
- 菜单项垂直排列
- 下拉动画效果
- 背景：主要渐变色
- 文字：白色
- 内边距：12px 24px
- 圆角：30px
- 悬浮效果：轻微上移和阴影增强
- 背景：强调渐变色
- 文字：深色
- 内边距：12px 24px
- 圆角：30px
- 悬浮效果：轻微上移和阴影增强
- 背景：透明
- 边框：1px 主色调
- 文字：主色调
- 悬浮效果：背景轻微变色
- 背景：白色
- 圆角：15px
- 阴影：var(--box-shadow)
- 内边距：30px
- 悬浮效果：上移10px，阴影加深
- 同基础卡片
- 附加顶部图标或图形元素
- 可能包含列表或额外交互元素
- 顶部图片区域
- 底部信息区域
- 社交媒体图标链接
- 悬浮效果：上移和图片轻微缩放
- 背景：#f9f9f9
- 边框：1px #d1d1d1
- 圆角：8px
- 内边距：12px 15px
- 聚焦状态：边框变为主色，添加光晕效果
- 同输入框
- 最小高度：150px
- 可调整大小：垂直方向
- 见3.2按钮部分
- 中央垂直线：浅色主色调
- 时间节点：20px圆形，主色调
- 内容卡片：白色背景，10px圆角
- 奇偶卡片分列布局
- 响应式：移动端转为单列
- 背景：白色
- 圆角：30px
- 阴影：轻微
- 活动状态：主色调渐变背景，白色文字
- 点击效果：平滑过渡
- 网格布局
- 灰度滤镜默认状态
- 悬浮时恢复彩色
- 轻微上移效果
- 最大内容宽度：1200px
- 左右内边距：20px
- 标准节间距：80px (移动端减少为60px)
- 页面边缘预留：保持足够的页面边缘空白
- 基于12列网格系统
- 列间距：30px
- 响应式断点：
- 大屏幕：1200px以上
- 中屏幕：992px-1199px
- 小屏幕：768px-991px
- 移动端：767px以下
- 小型移动设备：576px以下
- 全宽度背景：主色调渐变
- 高度：至少占视口高度的80%
- 文本与图像并排布局
- 强烈的视觉焦点和行动召唤按钮
- 白色或浅灰背景
- 居中标题和副标题
- 多列卡片或网格布局内容
- 清晰的视觉层次结构
- 可使用渐变背景或图案背景
- 强调重要内容或统计数据
- 可能包含视差滚动效果
- 渐变背景
- 两栏布局：联系信息和表单
- 白色表单卡片突出显示
- 深色背景
- 多列布局
- 包含所有重要链接、简介和联系方式
- 社交媒体图标和订阅表单
- 完整桌面体验
- 最多四列内容并排
- 标准字体大小和间距
- 轻微调整内容宽度
- 最多三列内容并排
- 页脚从四列变为三列
- 英雄区转为垂直布局
- 两列网格为主
- 部分三列布局转为两列
- 代币经济和联系区块转为单列
- 导航栏转为汉堡菜单
- 大部分内容转为单列
- 减少内边距和外边距
- 路线图转为单侧布局
- 标签选项垂直排列
- 进一步减少字体大小
- 调整按钮和表单为全宽
- 简化复杂组件
- 使用响应式图像技术
- 移动端可使用更小和更优化的图像
- 保持关键可视元素在所有设备上清晰可见
- 桌面端水平导航
- 移动端垂直折叠菜单
- 固定顶部确保易于访问
- 移动端首先展示最关键内容
- 非关键内容可在移动端简化或隐藏
- 确保关键行动按钮在所有设备上明显可见
- 移动端增大可点击区域
- 确保足够的元素间距以防误触
- 为触摸滑动优化交互效果
- 导航栏透明度变化
- 平滑滚动到锚点位置
- 卡片上移和阴影增强
- 按钮轻微放大或上移
- 链接颜色变化
- 按钮轻微下陷效果
- 涟漪效果
- 页面元素渐入
- 英雄区图像浮动效果
- 标签切换时的平滑过渡
- 移动菜单的展开/折叠动画
- 数值计数器动画
- 进度指示器填充动画
- 平滑的页面内导航
- 考虑在大屏幕上添加视差滚动
- 滚动时的元素渐入效果
- 文本与背景保持足够对比度
- 所有交互元素有清晰视觉反馈
- 不仅依赖颜色传达信息
- 最小正文字体为16px
- 适当的行高提高可读性
- 避免过长的文本行
- 所有交互元素可通过键盘访问
- 清晰的焦点状态样式
- 合理的标签顺序
- 所有图像提供替代文本
- 表单元素有适当标签
- 使用语义化HTML提高可访问性
- 导航栏与菜单
- 英雄区布局
- 卡片组件（多种变体）
- 按钮系统
- 路线图时间线
- 团队成员展示卡片
- 合作伙伴徽标网格
- 标签切换系统
- 表单元素
- 页脚布局
- 建议使用开源图标库如Font Awesome或Material Icons
- 关键功能图标统一设计，保持一致的视觉风格
- 图标颜色与整体配色方案协调
- 尺寸：300×300px
- 格式：JPEG或PNG
- 风格：专业商务风格，统一背景
- 提供多种尺寸版本
- 包含彩色版和单色版
- 适应深色和浅色背景
- 高清晰度矢量格式为佳
- 保持一致的设计风格
- 简洁明了，突出关键信息
- 使用现代CSS特性（Flexbox、Grid等）
- 优化图像加载（懒加载、适当压缩）
- 最小化HTTP请求
- 考虑首屏内容优先加载
- 支持最新版Chrome、Firefox、Safari和Edge
- 使用CSS前缀确保更广泛的兼容性
- 测试在各种浏览器下的一致性
- 采用CSS变量管理配色和主题
- 模块化CSS结构
- 遵循BEM或类似命名规范
- 移动优先的CSS编写方式
- 考虑实现深色模式
- 为国际化做好准备
- 添加微动效增强用户体验
- 建立完整的组件库文档
- 所有颜色使用定义的色彩系统
- 字体大小遵循定义的层级
- 间距使用统一的间距系统
- 组件样式在整个网站保持一致
- 所有页面在所有设备断点测试
- 内容在小屏幕上可读
- 交互元素在触摸设备上易于使用
- 确保没有水平滚动条出现
- 颜色对比度符合WCAG AA标准
- 所有功能可通过键盘访问
- 图像有适当的替代文本
- 表单元素有关联的标签
- 图像已优化
- CSS和JavaScript最小化
- 利用浏览器缓存
- 首屏加载时间在2秒以内