From 15e17a8f20f2292b9c8b36c899eb3c63308daacc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Sat, 21 Feb 2026 23:32:47 +0800 Subject: [PATCH] fix: add light/dark mode support with Tailwind dark: prefix --- .../2026-02-21-website-redesign-design.md | 693 +++++++ docs/plans/2026-02-21-website-redesign.md | 1800 +++++++++++++++++ src/app/(marketing)/page.tsx | 2 +- src/components/layout/footer.tsx | 31 +- src/components/layout/header.tsx | 12 +- src/components/sections/about-section.tsx | 46 +- src/components/sections/contact-section.tsx | 12 +- src/components/sections/hero-section.tsx | 14 +- src/components/sections/news-section.tsx | 24 +- src/components/sections/products-section.tsx | 20 +- src/components/sections/services-section.tsx | 6 +- src/components/ui/button.tsx | 4 +- src/components/ui/card.tsx | 8 +- 13 files changed, 2581 insertions(+), 91 deletions(-) create mode 100644 docs/plans/2026-02-21-website-redesign-design.md create mode 100644 docs/plans/2026-02-21-website-redesign.md diff --git a/docs/plans/2026-02-21-website-redesign-design.md b/docs/plans/2026-02-21-website-redesign-design.md new file mode 100644 index 0000000..26c24f5 --- /dev/null +++ b/docs/plans/2026-02-21-website-redesign-design.md @@ -0,0 +1,693 @@ +# Novalon 官网重新设计方案 + +**设计日期：** 2026-02-21 +**设计风格：** 极简科技风 +**项目目标：** 品牌形象升级 + 用户体验优化 + +--- + +## 一、项目背景 + +### 当前状态 + +- 技术栈：Next.js 16 + React 19 + TypeScript + Tailwind CSS v4 +- 现有页面：首页包含13个section，信息密度较高 +- 目标用户：混合群体（企业决策者、技术人员、业务人员） + +### 设计目标 + +1. **品牌形象升级** - 打造科技创新与前沿感的品牌调性 +2. **用户体验优化** - 全方位改进导航、内容展示、交互体验和移动端适配 + +--- + +## 二、整体架构与导航结构 + +### 信息架构优化 + +**一级导航（顶部固定）：** + +- 首页 +- 产品（下拉：ERP、CRM、OA、BI、IoT） +- 解决方案（下拉：按行业、按场景） +- 案例 +- 关于我们 +- 联系我们 + +**首页结构精简（从13个section减少到8个）：** + +1. **Hero区域** - 核心价值主张 + 动态粒子背景 +2. **核心优势** - 4个关键数据指标（动态计数） +3. **产品矩阵** - 卡片式展示核心产品 +4. **解决方案** - 行业/场景分类展示 +5. **成功案例** - 精选3个典型案例 +6. **技术实力** - 技术栈展示 +7. **客户评价** - 轮播式testimonial +8. **CTA区域** - 行动号召 + +**优化效果：** + +- 减少到8个核心section，提升信息聚焦度 +- 下拉菜单提供更清晰的信息层级 +- 每个section都有明确的用户目标和转化路径 + +--- + +## 三、视觉设计系统 + +### 色彩系统 + +**主色调：** + +- 深色背景：`#0A0A0A`（主背景）、`#1A1A1A`（次级背景）、`#2A2A2A`（卡片背景） +- 科技蓝：`#00D9FF`（主要强调色、CTA按钮） +- 紫色：`#A855F7`（次要强调色、装饰元素） +- 青色：`#06B6D4`（辅助色、图标） + +**文字色彩：** + +- 主文字：`#FFFFFF`（白色） +- 次级文字：`#A0A0A0`（灰色） +- 禁用文字：`#606060`（深灰） + +**渐变色：** + +- 主渐变：`linear-gradient(135deg, #00D9FF 0%, #A855F7 100%)` +- 背景渐变：`linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%)` +- 光晕效果：`radial-gradient(circle, #00D9FF20 0%, transparent 70%)` + +### 字体系统 + +**主字体：** + +- 标题：`Inter` 或 `SF Pro Display`（现代无衬线字体） +- 正文：`Inter`（高可读性） +- 代码/数据：`JetBrains Mono`（等宽字体） + +**字号规范：** + +- H1：`64px`（Hero标题） +- H2：`48px`（Section标题） +- H3：`32px`（卡片标题） +- Body：`16px`（正文） +- Small：`14px`（辅助文字） + +### 间距系统 + +基于 8px 网格： + +- xs：`4px` +- sm：`8px` +- md：`16px` +- lg：`24px` +- xl：`32px` +- 2xl：`48px` +- 3xl：`64px` + +### 圆角系统 + +- 小圆角：`8px`（按钮、标签） +- 中圆角：`12px`（卡片） +- 大圆角：`16px`（大卡片、容器） +- 全圆角：`9999px`（徽章、标签） + +--- + +## 四、核心组件设计 + +### 1. Hero 区域设计 + +**布局：** + +- 全屏高度（100vh） +- 左侧：核心文案 + CTA按钮 +- 右侧：动态粒子效果 + 抽象几何动画 +- 底部：滚动提示动画 + +**视觉元素：** + +- 背景：深色渐变 + 微妙的网格线 +- 粒子效果：蓝色和紫色粒子缓慢漂浮 +- 光晕：科技蓝的径向渐变光晕 +- 文字：大标题 + 副标题 + 两个CTA按钮（主次分明） + +**动效：** + +- 文字淡入上移（staggered animation） +- 粒子持续运动 +- 按钮悬停发光效果 +- 滚动提示上下浮动 + +### 2. 导航栏设计 + +**样式：** + +- 固定顶部，滚动时背景变深（`backdrop-blur`） +- Logo左侧，导航居中，CTA按钮右侧 +- 高度：`64px`（桌面）、`56px`（移动端） + +**交互：** + +- 下拉菜单：悬停展开，带淡入动画 +- 移动端：汉堡菜单，全屏抽屉式导航 +- 当前页面：底部蓝色下划线指示 + +**特殊效果：** + +- Logo悬停：微妙的发光效果 +- 导航项悬停：文字颜色变科技蓝 +- CTA按钮：渐变背景 + 悬停放大 + +### 3. 产品卡片设计 + +**布局：** + +- 网格布局：桌面3列、平板2列、移动端1列 +- 卡片高度：固定或自适应内容 +- 卡片间距：`24px` + +**卡片结构：** + +- 顶部：产品图标/图片（带渐变边框） +- 中部：产品名称 + 简短描述 +- 底部：核心特性标签 + "了解更多"链接 + +**视觉效果：** + +- 背景：`#2A2A2A`，悬停时变亮 +- 边框：1px灰色边框，悬停时科技蓝边框 +- 阴影：悬停时添加发光阴影 +- 图标：科技蓝或紫色渐变 + +**动效：** + +- 悬停：卡片上移 `8px` + 边框发光 +- 点击：轻微缩放反馈 +- 加载：骨架屏或淡入动画 + +### 4. 数据可视化组件（使用 AntV） + +**技术选型：** + +- **@antv/g2** - 基础图表（折线图、柱状图、饼图等） +- **@antv/g6** - 关系图、拓扑图 +- **@antv/l7** - 地理空间数据可视化 +- **@antv/x6** - 流程图、架构图编辑 + +**统计数字展示：** + +- 大号数字：`48-64px`，科技蓝色 +- 动态计数动画：从0到目标值 +- 标签：灰色小号文字 +- 布局：4列网格，每项居中对齐 + +**图表配置：** + +- 主题：深色主题定制 +- 配色：科技蓝 `#00D9FF`、紫色 `#A855F7`、青色 `#06B6D4` +- 背景：透明或半透明深色 +- 网格线：淡灰色，降低视觉干扰 +- 动画：流畅的入场动画 + +**交互特性：** + +- 悬停：显示详细数据 tooltip +- 点击：可配置的交互事件 +- 缩放：支持图表缩放（如需要） +- 响应式：自适应容器大小 + +--- + +## 五、交互体验与动效设计 + +### 1. 页面过渡与滚动体验 + +**页面加载：** + +- 首屏优先加载策略 +- 骨架屏占位，提升感知速度 +- 渐进式图片加载（blur-up 技术） +- 关键CSS内联，非关键CSS延迟加载 + +**滚动体验：** + +- 平滑滚动：`scroll-behavior: smooth` +- 视差效果：背景元素随滚动缓慢移动 +- 渐入动画：元素进入视口时触发淡入上移 +- 进度指示：顶部细线显示页面滚动进度 + +**Section切换：** + +- 每个Section进入视口时触发动画 +- 标题先出现，内容依次淡入 +- 数字计数动画在可见时触发 +- 图表在可见时才开始渲染 + +### 2. 微交互设计 + +**按钮交互：** + +- 悬停：背景渐变流动 + 轻微放大（scale 1.05） +- 点击：缩小反馈（scale 0.95）+ 波纹效果 +- 加载中：旋转图标 + 禁用状态 +- 成功/失败：短暂的颜色变化反馈 + +**表单交互：** + +- 输入框聚焦：边框变科技蓝 + 外发光 +- 实时验证：输入时显示验证状态 +- 错误提示：红色边框 + 错误信息淡入 +- 提交成功：绿色勾选动画 + 成功消息 + +**卡片交互：** + +- 悬停：上移 + 边框发光 + 阴影增强 +- 点击：轻微缩放 + 跳转或展开详情 +- 加载：骨架屏动画 +- 收藏/分享：图标变化动画 + +### 3. 动画效果库 + +**入场动画：** + +- 淡入上移：`fade-in-up`（最常用） +- 淡入缩放：`fade-in-scale`（适合卡片） +- 从左滑入：`slide-in-left`（适合侧边内容） +- 从右滑入：`slide-in-right`（适合侧边内容） + +**持续动画：** + +- 粒子漂浮：随机运动轨迹 +- 光晕脉动：缓慢的透明度变化 +- 渐变流动：背景渐变位置移动 +- 图标旋转：加载状态的旋转动画 + +**退出动画：** + +- 淡出：`fade-out` +- 缩小淡出：`scale-out-fade` +- 向上滑出：`slide-out-up` + +**动画时长规范：** + +- 快速：`150ms`（按钮反馈、状态切换） +- 标准：`300ms`（大多数过渡效果） +- 慢速：`500ms`（页面过渡、大型动画） +- 超慢：`1000ms+`（特殊强调效果） + +### 4. 性能优化策略 + +**动画性能：** + +- 优先使用 `transform` 和 `opacity`（GPU加速） +- 避免动画 `width`、`height`、`top`、`left` +- 使用 `will-change` 提示浏览器优化 +- 复杂动画使用 `requestAnimationFrame` + +**移动端优化：** + +- 减少移动端动画复杂度 +- 使用 `prefers-reduced-motion` 媒体查询 +- 触摸事件优化（防止滚动卡顿） +- 移动端禁用某些装饰性动画 + +**加载优化：** + +- 动画库按需加载（如 `framer-motion`） +- 图片懒加载 + WebP格式 +- 代码分割，按路由加载 +- 预加载关键资源 + +--- + +## 六、响应式设计与移动端体验 + +### 1. 响应式断点系统 + +**断点定义：** + +- 移动端：`< 640px`（sm） +- 平板：`640px - 1024px`（md） +- 桌面：`1024px - 1280px`（lg） +- 大屏：`> 1280px`（xl） + +**布局策略：** + +- 移动优先设计 +- 弹性网格系统 +- 内容优先级排序 +- 触摸友 +好的交互区域 + +### 2. 移动端特殊设计 + +**导航栏：** +- 高度：`56px` +- Logo居左，汉堡菜单居右 +- 点击展开全屏抽屉式导航 +- 抽屉内容：垂直排列的导航项 + CTA按钮 +- 关闭按钮：右上角X图标 + +**Hero区域：** +- 高度：`100vh`（移动端可能更高） +- 文案居中或左对齐 +- 标题字号：`36-40px`（缩小但仍突出） +- 粒子效果：减少粒子数量，降低性能消耗 +- CTA按钮：垂直堆叠，全宽 + +**内容区域：** +- 单列布局为主 +- 卡片全宽显示 +- 图片：自适应宽度，保持比例 +- 文字：行高适当增加，提升可读性 + +**交互优化：** +- 最小触摸区域：`44px × 44px` +- 按钮全宽或大尺寸 +- 表单输入框：大尺寸，易于点击 +- 滑动操作：支持手势滑动（如轮播图） + +### 3. 平板端设计 + +**布局调整：** +- 2列网格布局 +- 导航栏：完整导航或简化版 +- Hero区域：文案左侧，视觉元素右侧 +- 卡片：2列排列 + +**交互优化：** +- 支持触摸和鼠标操作 +- 下拉菜单：点击触发（非悬停） +- 表单：优化触摸输入体验 + +### 4. 桌面端设计 + +**布局优化：** +- 3列或4列网格 +- 完整导航栏 + 下拉菜单 +- Hero区域：左右分栏，视觉平衡 +- 卡片：3列排列，悬停效果丰富 + +**交互增强：** +- 悬停效果：丰富的视觉反馈 +- 键盘导航：支持Tab键导航 +- 快捷键：如搜索（Cmd/Ctrl + K） + +### 5. 性能与可访问性 + +**移动端性能优化：** +- 图片：使用 `srcset` 提供不同尺寸 +- 动画：减少复杂动画，优先性能 +- 字体：使用 `font-display: swap` +- 懒加载：图片和组件按需加载 + +**可访问性（A11y）：** +- 色彩对比度：符合WCAG 2.1 AA标准 +- 键盘导航：所有交互元素可访问 +- 屏幕阅读器：语义化HTML + ARIA标签 +- 焦点管理：清晰的焦点指示器 +- 减少动画：尊重 `prefers-reduced-motion` + +**触摸体验：** +- 防止误触：按钮间距合理 +- 触摸反馈：即时的视觉反馈 +- 滚动优化：防止滚动卡顿 +- 手势支持：滑动、缩放等 + +### 6. 特殊场景处理 + +**横屏模式：** +- 检测横屏，调整布局 +- Hero区域：可能需要重新排版 +- 导航：考虑底部导航栏 + +**小屏设备：** +- 内容优先级排序 +- 隐藏次要信息 +- 简化视觉元素 + +**大屏设备：** +- 最大内容宽度：`1440px` 或 `1600px` +- 内容居中，两侧留白 +- 充分利用空间，展示更多信息 + +--- + +## 七、技术实现方案 + +### 1. 技术栈确认与增强 + +**现有技术栈：** +- Next.js 16.1.6（App Router） +- React 19.2.3 +- TypeScript 5 +- Tailwind CSS v4 +- shadcn/ui + Radix UI + +**新增依赖：** +- **动画库：** `framer-motion` - 流畅的动画效果 +- **图表库：** `@antv/g2` - 数据可视化 +- **图标库：** `lucide-react`（已有） +- **工具库：** + - `clsx` + `tailwind-merge`（已有） + - `class-variance-authority` - CVA变体管理 + - `zod` - 数据验证（已有） + +**开发工具：** +- ESLint + Prettier - 代码规范 +- Husky + lint-staged - Git hooks +- Commitlint - 提交信息规范 + +### 2. 组件库架构 + +**目录结构：** +``` +src/ +├── components/ +│ ├── ui/ # 基础UI组件 +│ │ ├── button.tsx +│ │ ├── card.tsx +│ │ ├── input.tsx +│ │ └── ... +│ ├── layout/ # 布局组件 +│ │ ├── header.tsx +│ │ ├── footer.tsx +│ │ ├── mobile-menu.tsx +│ │ └── ... +│ ├── sections/ # 页面区块组件 +│ │ ├── hero-section.tsx +│ │ ├── products-section.tsx +│ │ └── ... +│ ├── effects/ # 特效组件 +│ │ ├── particle-background.tsx +│ │ ├── glow-effect.tsx +│ │ └── ... +│ └── charts/ # 图表组件 +│ ├── line-chart.tsx +│ ├── bar-chart.tsx +│ └── ... +├── hooks/ # 自定义Hooks +│ ├── use-animation.ts +│ ├── use-intersection-observer.ts +│ └── ... +├── lib/ # 工具库 +│ ├── utils.ts +│ ├── constants.ts +│ ├── theme.ts +│ └── ... +└── styles/ # 样式文件 + ├── globals.css + ├── animations.css + └── ... +``` + +### 3. 样式系统设计 + +**Tailwind配置扩展：** +```typescript +// tailwind.config.ts +export default { + theme: { + extend: { + colors: { + // 深色主题 + dark: { + DEFAULT: '#0A0A0A', + secondary: '#1A1A1A', + tertiary: '#2A2A2A', + }, + // 科技色 + tech: { + blue: '#00D9FF', + purple: '#A855F7', + cyan: '#06B6D4', + }, + }, + fontFamily: { + sans: ['Inter', 'sans-serif'], + mono: ['JetBrains Mono', 'monospace'], + }, + animation: { + 'fade-in-up': 'fadeInUp 0.6s ease-out', + 'fade-in-scale': 'fadeInScale 0.6s ease-out', + 'glow': 'glow 2s ease-in-out infinite', + }, + keyframes: { + fadeInUp: { + '0%': { opacity: '0', transform: 'translateY(20px)' }, + '100%': { opacity: '1', transform: 'translateY(0)' }, + }, + fadeInScale: { + '0%': { opacity: '0', transform: 'scale(0.95)' }, + '100%': { opacity: '1', transform: 'scale(1)' }, + }, + glow: { + '0%, 100%': { boxShadow: '0 0 20px rgba(0, 217, 255, 0.3)' }, + '50%': { boxShadow: '0 0 40px rgba(0, 217, 255, 0.6)' }, + }, + }, + }, + }, +} +``` + +**CSS变量系统：** +```css +/* globals.css */ +:root { + --color-dark: #0A0A0A; + --color-dark-secondary: #1A1A1A; + --color-dark-tertiary: #2A2A2A; + --color-tech-blue: #00D9FF; + --color-tech-purple: #A855F7; + --color-tech-cyan: #06B6D4; + + --gradient-primary: linear-gradient(135deg, #00D9FF 0%, #A855F7 100%); + --gradient-dark: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%); +} +``` + +### 4. 开发流程与规范 + +**Git工作流：** +- 分支策略：`main`（生产）、`develop`（开发）、`feature/*`（功能） +- 提交规范：`feat:`、`fix:`、`style:`、`refactor:`、`docs:` +- Code Review：必须经过至少一人审查 + +**代码规范：** +- ESLint配置：基于 `eslint-config-next` +- Prettier配置：统一格式化规则 +- TypeScript严格模式 +- 组件命名：PascalCase +- 文件命名：kebab-case + +**开发流程：** +1. 从 `develop` 创建 `feature` 分支 +2. 开发 + 单元测试 +3. 提交PR + Code Review +4. 合并到 `develop` +5. 测试通过后合并到 `main` +6. 自动部署 + +### 5. 测试策略 + +**单元测试：** +- 框架：Vitest + React Testing Library +- 覆盖率目标：≥80% +- 重点：组件逻辑、Hooks、工具函数 + +**集成测试：** +- 测试关键用户流程 +- API集成测试 +- 状态管理测试 + +**E2E测试：** +- 框架：Playwright（已有） +- 重点：核心业务流程 +- 视觉回归测试 + +**性能测试：** +- Lighthouse评分：≥90 +- 首屏加载时间：<2s +- 交互响应时间：<100ms + +### 6. 部署与监控 + +**部署方案：** +- 静态导出：`next build` + `next export` +- 托管：Vercel / 阿里云OSS + CDN +- CI/CD：GitHub Actions + +**监控与优化：** +- 性能监控：Web Vitals +- 错误追踪：Sentry +- 用户行为：Google Analytics +- SEO优化：meta标签、sitemap、robots.txt + +--- + +## 八、实施计划 + +### 阶段一：基础架构（1-2周） +- 设计系统搭建（色彩、字体、间距） +- 基础UI组件库开发 +- 布局组件重构（Header、Footer） +- 响应式框架搭建 + +### 阶段二：核心页面（2-3周） +- Hero区域重构 +- 产品展示页面 +- 解决方案页面 +- 案例展示页面 + +### 阶段三：交互优化（1-2周） +- 动画效果实现 +- 微交互优化 +- 性能优化 +- 可访问性改进 + +### 阶段四：测试与上线（1周） +- 全面测试 +- 性能优化 +- 部署上线 +- 监控配置 + +**总工期：5-8周** + +--- + +## 九、设计决策记录 + +### 为什么选择深色科技风？ +1. 符合科技创新与前沿感的品牌定位 +2. 顶级科技公司的主流选择（Apple、Microsoft、GitHub、Vercel） +3. 对企业决策者显得更加专业、高端、可信赖 +4. 深色背景配合霓虹色点缀能更好突出关键信息 +5. 移动端更受欢迎（省电、护眼） + +### 为什么选择 AntV？ +1. 完善的中文文档和社区支持 +2. 企业级稳定性，适合金融场景 +3. 丰富的图表类型和交互能力 +4. 良好的性能表现 + +### 为什么精简到8个section？ +1. 提升信息聚焦度，避免用户认知负担 +2. 每个section都有明确的用户目标和转化路径 +3. 更好的性能表现（减少渲染内容） +4. 更清晰的信息层级 + +--- + +## 十、下一步行动 + +1. ✅ 设计方案已完成并文档化 +2. ⏭️ 准备进入实施阶段 +3. ⏭️ 创建详细的实施计划（使用 `writing-plans` skill） +4. ⏭️ 创建隔离的开发环境（使用 `using-git-worktrees` skill） + +--- + +**设计者：** AI Assistant +**审核者：** 待定 +**最后更新：** 2026-02-21 diff --git a/docs/plans/2026-02-21-website-redesign.md b/docs/plans/2026-02-21-website-redesign.md new file mode 100644 index 0000000..a526d2a --- /dev/null +++ b/docs/plans/2026-02-21-website-redesign.md @@ -0,0 +1,1800 @@ +# Novalon 官网重新设计实施计划 + +> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. + +**Goal:** 将 Novalon 官网从现有设计升级为深色科技风格的现代化企业网站 + +**Architecture:** 采用 Next.js 16 App Router + React 19 + TypeScript + Tailwind CSS v4 技术栈，基于组件化设计，实现深色科技风格的视觉系统和流畅的用户体验 + +**Tech Stack:** Next.js 16, React 19, TypeScript 5, Tailwind CSS v4, Framer Motion, AntV G2, shadcn/ui + +--- + +## 前置准备 + +### Task 0: 创建开发分支 + +**Files:** +- None + +**Step 1: 检查当前分支状态** + +Run: `git status` + +Expected: 工作目录干净，在 main 或 develop 分支 + +**Step 2: 创建新的功能分支** + +Run: `git checkout -b feature/website-redesign` + +Expected: 切换到新分支 feature/website-redesign + +**Step 3: 推送分支到远程** + +Run: `git push -u origin feature/website-redesign` + +Expected: 分支推送到远程仓库 + +--- + +## 阶段一：基础架构搭建 + +### Task 1: 安装必要依赖 + +**Files:** +- Modify: `package.json` + +**Step 1: 安装动画库** + +Run: `npm install framer-motion` + +Expected: framer-motion 安装成功 + +**Step 2: 安装图表库** + +Run: `npm install @antv/g2` + +Expected: @antv/g2 安装成功 + +**Step 3: 安装 CVA（如果尚未安装）** + +Run: `npm install class-variance-authority` + +Expected: class-variance-authority 安装成功 + +**Step 4: 验证安装** + +Run: `npm list framer-motion @antv/g2 class-variance-authority` + +Expected: 显示已安装的版本信息 + +**Step 5: 提交依赖更新** + +Run: +```bash +git add package.json package-lock.json +git commit -m "chore: add framer-motion, @antv/g2, and class-variance-authority dependencies" +``` + +Expected: 提交成功 + +--- + +### Task 2: 扩展 Tailwind 配置 + +**Files:** +- Modify: `tailwind.config.ts`（如果不存在则创建） + +**Step 1: 检查 Tailwind 配置文件** + +Run: `ls -la | grep tailwind` + +Expected: 显示 tailwind 配置文件 + +**Step 2: 读取现有配置** + +Read: `tailwind.config.ts` + +**Step 3: 扩展配置添加深色主题色彩** + +Modify: `tailwind.config.ts` + +```typescript +import type { Config } from "tailwindcss"; + +export default { + content: [ + "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", + "./src/components/**/*.{js,ts,jsx,tsx,mdx}", + "./src/app/**/*.{js,ts,jsx,tsx,mdx}", + ], + theme: { + extend: { + colors: { + dark: { + DEFAULT: "#0A0A0A", + secondary: "#1A1A1A", + tertiary: "#2A2A2A", + }, + tech: { + blue: "#00D9FF", + purple: "#A855F7", + cyan: "#06B6D4", + }, + }, + fontFamily: { + sans: ["Inter", "system-ui", "sans-serif"], + mono: ["JetBrains Mono", "monospace"], + }, + animation: { + "fade-in-up": "fadeInUp 0.6s ease-out", + "fade-in-scale": "fadeInScale 0.6s ease-out", + glow: "glow 2s ease-in-out infinite", + float: "float 3s ease-in-out infinite", + }, + keyframes: { + fadeInUp: { + "0%": { opacity: "0", transform: "translateY(20px)" }, + "100%": { opacity: "1", transform: "translateY(0)" }, + }, + fadeInScale: { + "0%": { opacity: "0", transform: "scale(0.95)" }, + "100%": { opacity: "1", transform: "scale(1)" }, + }, + glow: { + "0%, 100%": { boxShadow: "0 0 20px rgba(0, 217, 255, 0.3)" }, + "50%": { boxShadow: "0 0 40px rgba(0, 217, 255, 0.6)" }, + }, + float: { + "0%, 100%": { transform: "translateY(0px)" }, + "50%": { transform: "translateY(-10px)" }, + }, + }, + }, + }, + plugins: [], +} satisfies Config; +``` + +**Step 4: 验证配置语法** + +Run: `npx tsc --noEmit tailwind.config.ts` + +Expected: 无错误输出 + +**Step 5: 提交配置更新** + +Run: +```bash +git add tailwind.config.ts +git commit -m "feat: extend Tailwind config with dark theme and tech colors" +``` + +Expected: 提交成功 + +--- + +### Task 3: 更新全局样式 + +**Files:** +- Modify: `src/app/globals.css` + +**Step 1: 读取现有全局样式** + +Read: `src/app/globals.css` + +**Step 2: 添加 CSS 变量和基础样式** + +Modify: `src/app/globals.css` + +在文件顶部添加： + +```css +:root { + --color-dark: #0A0A0A; + --color-dark-secondary: #1A1A1A; + --color-dark-tertiary: #2A2A2A; + --color-tech-blue: #00D9FF; + --color-tech-purple: #A855F7; + --color-tech-cyan: #06B6D4; + + --gradient-primary: linear-gradient(135deg, #00D9FF 0%, #A855F7 100%); + --gradient-dark: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%); + --gradient-glow: radial-gradient(circle, #00D9FF20 0%, transparent 70%); +} + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + background-color: var(--color-dark); + color: #FFFFFF; + font-family: 'Inter', system-ui, sans-serif; + line-height: 1.6; +} + +a { + color: inherit; + text-decoration: none; +} + +button { + font-family: inherit; +} + +input, textarea { + font-family: inherit; +} + +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--color-dark-secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--color-tech-blue); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--color-tech-purple); +} +``` + +**Step 3: 验证样式文件** + +Run: `npm run build` + +Expected: 构建成功，无样式错误 + +**Step 4: 提交样式更新** + +Run: +```bash +git add src/app/globals.css +git commit -m "feat: add CSS variables and base styles for dark theme" +``` + +Expected: 提交成功 + +--- + +### Task 4: 创建工具函数 + +**Files:** +- Modify: `src/lib/utils.ts` + +**Step 1: 读取现有工具函数** + +Read: `src/lib/utils.ts` + +**Step 2: 添加新的工具函数** + +Modify: `src/lib/utils.ts` + +```typescript +import { type ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} + +export function formatNumber(num: number): string { + return new Intl.NumberFormat("zh-CN").format(num); +} + +export function formatCurrency(amount: number): string { + return new Intl.NumberFormat("zh-CN", { + style: "currency", + currency: "CNY", + }).format(amount); +} + +export function debounce unknown>( + func: T, + wait: number +): (...args: Parameters) => void { + let timeout: NodeJS.Timeout | null = null; + return (...args: Parameters) => { + if (timeout) clearTimeout(timeout); + timeout = setTimeout(() => func(...args), wait); + }; +} + +export function throttle unknown>( + func: T, + limit: number +): (...args: Parameters) => void { + let inThrottle: boolean; + return (...args: Parameters) => { + if (!inThrottle) { + func(...args); + inThrottle = true; + setTimeout(() => (inThrottle = false), limit); + } + }; +} + +export function randomBetween(min: number, max: number): number { + return Math.random() * (max - min) + min; +} + +export function lerp(start: number, end: number, t: number): number { + return start + (end - start) * t; +} + +export function clamp(value: number, min: number, max: number): number { + return Math.min(Math.max(value, min), max); +} +``` + +**Step 3: 验证类型检查** + +Run: `npx tsc --noEmit` + +Expected: 无类型错误 + +**Step 4: 提交工具函数** + +Run: +```bash +git add src/lib/utils.ts +git commit -m "feat: add utility functions for formatting and animation" +``` + +Expected: 提交成功 + +--- + +### Task 5: 创建主题常量 + +**Files:** +- Modify: `src/lib/constants.ts` + +**Step 1: 读取现有常量** + +Read: `src/lib/constants.ts` + +**Step 2: 添加主题相关常量** + +Modify: `src/lib/constants.ts` + +在文件末尾添加： + +```typescript +export const THEME = { + colors: { + dark: { + DEFAULT: "#0A0A0A", + secondary: "#1A1A1A", + tertiary: "#2A2A2A", + }, + tech: { + blue: "#00D9FF", + purple: "#A855F7", + cyan: "#06B6D4", + }, + text: { + primary: "#FFFFFF", + secondary: "#A0A0A0", + disabled: "#606060", + }, + }, + gradients: { + primary: "linear-gradient(135deg, #00D9FF 0%, #A855F7 100%)", + dark: "linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%)", + glow: "radial-gradient(circle, #00D9FF20 0%, transparent 70%)", + }, + spacing: { + xs: "4px", + sm: "8px", + md: "16px", + lg: "24px", + xl: "32px", + "2xl": "48px", + "3xl": "64px", + }, + borderRadius: { + sm: "8px", + md: "12px", + lg: "16px", + full: "9999px", + }, + animation: { + fast: "150ms", + standard: "300ms", + slow: "500ms", + verySlow: "1000ms", + }, + breakpoints: { + sm: "640px", + md: "768px", + lg: "1024px", + xl: "1280px", + "2xl": "1536px", + }, +} as const; + +export const ANIMATION_VARIANTS = { + fadeInUp: { + initial: { opacity: 0, y: 20 }, + animate: { opacity: 1, y: 0 }, + exit: { opacity: 0, y: -20 }, + }, + fadeInScale: { + initial: { opacity: 0, scale: 0.95 }, + animate: { opacity: 1, scale: 1 }, + exit: { opacity: 0, scale: 0.95 }, + }, + slideInLeft: { + initial: { opacity: 0, x: -20 }, + animate: { opacity: 1, x: 0 }, + exit: { opacity: 0, x: 20 }, + }, + slideInRight: { + initial: { opacity: 0, x: 20 }, + animate: { opacity: 1, x: 0 }, + exit: { opacity: 0, x: -20 }, + }, +} as const; +``` + +**Step 3: 验证类型检查** + +Run: `npx tsc --noEmit` + +Expected: 无类型错误 + +**Step 4: 提交常量更新** + +Run: +```bash +git add src/lib/constants.ts +git commit -m "feat: add theme constants and animation variants" +``` + +Expected: 提交成功 + +--- + +## 阶段二：基础UI组件开发 + +### Task 6: 创建增强版按钮组件 + +**Files:** +- Modify: `src/components/ui/button.tsx` + +**Step 1: 读取现有按钮组件** + +Read: `src/components/ui/button.tsx` + +**Step 2: 重写按钮组件以支持深色主题** + +Modify: `src/components/ui/button.tsx` + +```typescript +import * as React from "react"; +import { cva, type VariantProps } from "class-variance-authority"; +import { cn } from "@/lib/utils"; + +const buttonVariants = cva( + "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tech-blue focus-visible:ring-offset-2 focus-visible:ring-offset-dark disabled:pointer-events-none disabled:opacity-50", + { + variants: { + variant: { + default: + "bg-gradient-to-r from-tech-blue to-tech-purple text-white hover:shadow-lg hover:shadow-tech-blue/50 hover:scale-105 active:scale-95", + secondary: + "bg-dark-tertiary text-white border border-gray-700 hover:border-tech-blue hover:shadow-lg hover:shadow-tech-blue/20 hover:scale-105 active:scale-95", + outline: + "border border-tech-blue text-tech-blue hover:bg-tech-blue/10 hover:shadow-lg hover:shadow-tech-blue/20", + ghost: + "text-gray-300 hover:text-tech-blue hover:bg-dark-tertiary", + link: "text-tech-blue underline-offset-4 hover:underline", + }, + size: { + default: "h-10 px-6 py-2", + sm: "h-8 px-4 text-xs", + lg: "h-12 px-8 text-base", + xl: "h-14 px-10 text-lg", + icon: "h-10 w-10", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +); + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean; +} + +const Button = React.forwardRef( + ({ className, variant, size, ...props }, ref) => { + return ( + + + + + + + + {isMobileMenuOpen && ( +
+
+ {NAVIGATION.map((item) => ( + setIsMobileMenuOpen(false)} + > + {item.label} + + ))} +
+ + +
+
+
+ )} + + ); +} +``` + +**Step 3: 验证类型检查** + +Run: `npx tsc --noEmit` + +Expected: 无类型错误 + +**Step 4: 提交导航栏组件** + +Run: +```bash +git add src/components/layout/header.tsx +git commit -m "feat: refactor header with dark theme and mobile menu" +``` + +Expected: 提交成功 + +--- + +### Task 11: 重构页脚组件 + +**Files:** +- Modify: `src/components/layout/footer.tsx` + +**Step 1: 读取现有页脚组件** + +Read: `src/components/layout/footer.tsx` + +**Step 2: 重写页脚组件以支持深色主题** + +Modify: `src/components/layout/footer.tsx` + +```typescript +import Link from "next/link"; +import { COMPANY_INFO } from "@/lib/constants"; + +export function Footer() { + const currentYear = new Date().getFullYear(); + + const footerLinks = { + products: [ + { label: "ERP系统", href: "/products/erp" }, + { label: "CRM系统", href: "/products/crm" }, + { label: "OA平台", href: "/products/oa" }, + { label: "BI平台", href: "/products/bi" }, + ], + solutions: [ + { label: "金融行业", href: "/solutions/finance" }, + { label: "制造业", href: "/solutions/manufacturing" }, + { label: "零售行业", href: "/solutions/retail" }, + { label: "教育行业", href: "/solutions/education" }, + ], + company: [ + { label: "关于我们", href: "/about" }, + { label: "新闻动态", href: "/news" }, + { label: "成功案例", href: "/cases" }, + { label: "联系我们", href: "/contact" }, + ], + }; + + return ( +
+
+
+
+ + {COMPANY_INFO.shortName} + + {COMPANY_INFO.shortName} + + +

+ {COMPANY_INFO.slogan} +

+ +
+ +
+

产品服务

+
    + {footerLinks.products.map((link) => ( +
  • + + {link.label} + +
    • + ))} +
+
+ +
+

解决方案

+
    + {footerLinks.solutions.map((link) => ( +
  • + + {link.label} + +
    • + ))} +
+
+ +
+

关于我们

+
    + {footerLinks.company.map((link) => ( +
  • + + {link.label} + +
    • + ))} +
+
+
+ +
+
+

+ © {currentYear} {COMPANY_INFO.name}. All rights reserved. +

+
+ + 隐私政策 + + + 服务条款 + +
+
+
+
+
+ ); +} +``` + +**Step 3: 验证类型检查** + +Run: `npx tsc --noEmit` + +Expected: 无类型错误 + +**Step 4: 提交页脚组件** + +Run: +```bash +git add src/components/layout/footer.tsx +git commit -m "feat: refactor footer with dark theme and improved layout" +``` + +Expected: 提交成功 + +--- + +## 阶段四：特效组件开发 + +### Task 12: 创建粒子背景组件 + +**Files:** +- Create: `src/components/effects/particle-background.tsx` + +**Step 1: 创建粒子背景组件** + +Create: `src/components/effects/particle-background.tsx` + +```typescript +"use client"; + +import { useEffect, useRef } from "react"; +import { randomBetween } from "@/lib/utils"; + +interface Particle { + x: number; + y: number; + vx: number; + vy: number; + size: number; + color: string; + opacity: number; +} + +interface ParticleBackgroundProps { + particleCount?: number; + colors?: string[]; + minSize?: number; + maxSize?: number; + speed?: number; + className?: string; +} + +export function ParticleBackground({ + particleCount = 50, + colors = ["#00D9FF", "#A855F7", "#06B6D4"], + minSize = 1, + maxSize = 3, + speed = 0.5, + className = "", +}: ParticleBackgroundProps) { + const canvasRef = useRef(null); + const particlesRef = useRef([]); + const animationRef = useRef(); + + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return; + + const ctx = canvas.getContext("2d"); + if (!ctx) return; + + const resizeCanvas = () => { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + }; + + resizeCanvas(); + window.addEventListener("resize", resizeCanvas); + + particlesRef.current = Array.from({ length: particleCount }, () => ({ + x: randomBetween(0, canvas.width), + y: randomBetween(0, canvas.height), + vx: randomBetween(-speed, speed), + vy: randomBetween(-speed, speed), + size: randomBetween(minSize, maxSize), + color: colors[Math.floor(Math.random() * colors.length)], + opacity: randomBetween(0.1, 0.5), + })); + + const animate = () => { + if (!ctx || !canvas) return; + + ctx.clearRect(0, 0, canvas.width, canvas.height); + + particlesRef.current.forEach((particle) => { + particle.x += particle.vx; + particle.y += particle.vy; + + if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1; + if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1; + + ctx.beginPath(); + ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2); + ctx.fillStyle = particle.color; + ctx.globalAlpha = particle.opacity; + ctx.fill(); + }); + + ctx.globalAlpha = 1; + animationRef.current = requestAnimationFrame(animate); + }; + + animate(); + + return () => { + window.removeEventListener("resize", resizeCanvas); + if (animationRef.current) { + cancelAnimationFrame(animationRef.current); + } + }; + }, [particleCount, colors, minSize, maxSize, speed]); + + return ( + + ); +} +``` + +**Step 2: 验证类型检查** + +Run: `npx tsc --noEmit` + +Expected: 无类型错误 + +**Step 3: 提交粒子背景组件** + +Run: +```bash +git add src/components/effects/particle-background.tsx +git commit -m "feat: create particle background component for hero section" +``` + +Expected: 提交成功 + +--- + +### Task 13: 创建发光效果组件 + +**Files:** +- Create: `src/components/effects/glow-effect.tsx` + +**Step 1: 创建发光效果组件** + +Create: `src/components/effects/glow-effect.tsx` + +```typescript +"use client"; + +import { cn } from "@/lib/utils"; + +interface GlowEffectProps { + color?: string; + size?: "sm" | "md" | "lg" | "xl"; + className?: string; + children?: React.ReactNode; +} + +const sizeMap = { + sm: "w-32 h-32", + md: "w-48 h-48", + lg: "w-64 h-64", + xl: "w-96 h-96", +}; + +export function GlowEffect({ + color = "#00D9FF", + size = "lg", + className, + children, +}: GlowEffectProps) { + return ( +
+
+ {children} +
+ ); +} + +interface GradientOrbProps { + position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"; + color?: string; + className?: string; +} + +const positionMap = { + "top-left": "top-0 left-0", + "top-right": "top-0 right-0", + "bottom-left": "bottom-0 left-0", + "bottom-right": "bottom-0 right-0", +}; + +export function GradientOrb({ + position = "top-right", + color = "#00D9FF", + className, +}: GradientOrbProps) { + return ( +
+ ); +} +``` + +**Step 2: 验证类型检查** + +Run: `npx tsc --noEmit` + +Expected: 无类型错误 + +**Step 3: 提交发光效果组件** + +Run: +```bash +git add src/components/effects/glow-effect.tsx +git commit -m "feat: create glow effect and gradient orb components" +``` + +Expected: 提交成功 + +--- + +## 阶段五：首页重构 + +### Task 14: 重构 Hero Section + +**Files:** +- Modify: `src/components/sections/hero-section.tsx` + +**Step 1: 读取现有 Hero Section** + +Read: `src/components/sections/hero-section.tsx` + +**Step 2: 重写 Hero Section 以支持深色主题和动画** + +Modify: `src/components/sections/hero-section.tsx` + +```typescript +"use client"; + +import { motion } from "framer-motion"; +import { Button } from "@/components/ui/button"; +import { ParticleBackground } from "@/components/effects/particle-background"; +import { GradientOrb } from "@/components/effects/glow-effect"; +import { COMPANY_INFO } from "@/lib/constants"; +import { ArrowRight, Sparkles } from "lucide-react"; + +export function HeroSection() { + return ( +
+ + + + + +
+
+ + + + 专注科技创新 + + + + + {COMPANY_INFO.slogan} + + + + {COMPANY_INFO.description} + + + + + + +
+
+ + +
+ 向下滚动 +
+ +
+
+ +
+ ); +} +``` + +**Step 3: 验证类型检查** + +Run: `npx tsc --noEmit` + +Expected: 无类型错误 + +**Step 4: 提交 Hero Section** + +Run: +```bash +git add src/components/sections/hero-section.tsx +git commit -m "feat: refactor hero section with dark theme and animations" +``` + +Expected: 提交成功 + +--- + +### Task 15: 创建统计数据 Section + +**Files:** +- Create: `src/components/sections/stats-section.tsx` + +**Step 1: 创建统计数据 Section** + +Create: `src/components/sections/stats-section.tsx` + +```typescript +"use client"; + +import { motion } from "framer-motion"; +import { STATS } from "@/lib/constants"; + +export function StatsSection() { + return ( +
+
+
+ {STATS.map((stat, index) => ( + +
+ {stat.value} +
+
+ {stat.label} +
+ + ))} +
+
+
+ ); +} +``` + +**Step 2: 验证类型检查** + +Run: `npx tsc --noEmit` + +Expected: 无类型错误 + +**Step 3: 提交统计数据 Section** + +Run: +```bash +git add src/components/sections/stats-section.tsx +git commit -m "feat: create stats section with animated counters" +``` + +Expected: 提交成功 + +--- + +### Task 16: 重构产品展示 Section + +**Files:** +- Modify: `src/components/sections/products-section.tsx` + +**Step 1: 读取现有产品展示 Section** + +Read: `src/components/sections/products-section.tsx` + +**Step 2: 重写产品展示 Section 以支持深色主题和卡片效果** + +Modify: `src/components/sections/products-section.tsx` + +```typescript +"use client"; + +import { motion } from "framer-motion"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { PRODUCTS } from "@/lib/constants"; +import { ArrowRight } from "lucide-react"; + +export function ProductsSection() { + return ( +
+
+ +

+ 产品服务 +

+

+ 为企业提供全方位的数字化解决方案，助力业务增长 +

+ + +
+ {PRODUCTS.slice(0, 6).map((product, index) => ( + + + +
+ {product.category} +
+ {product.title} + + + + {product.description} + +
+ {product.features.slice(0, 3).map((feature) => ( + + {feature} + + ))} +
+ + 了解更多 + + + + + + ))} +
+
+
+ ); +} +``` + +**Step 3: 验证类型检查** + +Run: `npx tsc --noEmit` + +Expected: 无类型错误 + +**Step 4: 提交产品展示 Section** + +Run: +```bash +git add src/components/sections/products-section.tsx +git commit -m "feat: refactor products section with dark theme and card layout" +``` + +Expected: 提交成功 + +--- + +## 阶段六：测试与验证 + +### Task 17: 运行开发服务器测试 + +**Files:** +- None + +**Step 1: 启动开发服务器** + +Run: `npm run dev` + +Expected: 开发服务器成功启动在 http://localhost:3000 + +**Step 2: 在浏览器中验证首页** + +手动测试： +- 访问 http://localhost:3000 +- 验证深色主题是否正确应用 +- 验证导航栏是否正常工作 +- 验证 Hero Section 动画是否流畅 +- 验证产品卡片悬停效果 +- 验证响应式布局（移动端、平板、桌面） + +Expected: 所有功能正常工作 + +**Step 3: 停止开发服务器** + +按 Ctrl+C 停止服务器 + +Expected: 服务器成功停止 + +--- + +### Task 18: 运行构建测试 + +**Files:** +- None + +**Step 1: 运行生产构建** + +Run: `npm run build` + +Expected: 构建成功，无错误 + +**Step 2: 检查构建输出** + +验证构建输出中： +- 页面是否正确生成 +- 是否有优化建议 +- 构建大小是否合理 + +Expected: 构建输出正常 + +**Step 3: 运行代码检查** + +Run: `npm run lint` + +Expected: 无 ESLint 错误 + +--- + +### Task 19: 提交所有更改 + +**Files:** +- None + +**Step 1: 检查 Git 状态** + +Run: `git status` + +Expected: 显示所有修改的文件 + +**Step 2: 添加所有更改** + +Run: `git add .` + +Expected: 所有更改已暂存 + +**Step 3: 创建提交** + +Run: +```bash +git commit -m "feat: complete website redesign with dark tech theme + +- Add dark theme color system and CSS variables +- Enhance UI components (Button, Card, Input, Badge) +- Refactor layout components (Header, Footer) +- Create effect components (ParticleBackground, GlowEffect) +- Refactor sections (Hero, Stats, Products) +- Add Framer Motion animations +- Improve responsive design +- Update Tailwind configuration" +``` + +Expected: 提交成功 + +**Step 4: 推送到远程** + +Run: `git push origin feature/website-redesign` + +Expected: 推送成功 + +--- + +## 完成清单 + +- [ ] 安装必要依赖（framer-motion, @antv/g2, class-variance-authority） +- [ ] 扩展 Tailwind 配置 +- [ ] 更新全局样式 +- [ ] 创建工具函数 +- [ ] 创建主题常量 +- [ ] 增强按钮组件 +- [ ] 增强卡片组件 +- [ ] 增强输入框组件 +- [ ] 增强徽章组件 +- [ ] 重构导航栏组件 +- [ ] 重构页脚组件 +- [ ] 创建粒子背景组件 +- [ ] 创建发光效果组件 +- [ ] 重构 Hero Section +- [ ] 创建统计数据 Section +- [ ] 重构产品展示 Section +- [ ] 运行开发服务器测试 +- [ ] 运行构建测试 +- [ ] 提交所有更改 + +--- + +## 注意事项 + +1. **每个任务都应该独立完成并提交**，便于版本控制和回滚 +2. **遇到错误立即停止**，不要继续下一步 +3. **保持代码风格一致**，遵循项目现有的代码规范 +4. **测试每个组件**，确保在移动端和桌面端都能正常工作 +5. **关注性能**，避免过度使用动画和特效 + +--- + +**计划创建者：** AI Assistant +**创建日期：** 2026-02-21 +**预计工期：** 2-3天（基础架构 + 核心组件 + 首页重构） diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx index b0176ce..42705c8 100644 --- a/src/app/(marketing)/page.tsx +++ b/src/app/(marketing)/page.tsx @@ -11,7 +11,7 @@ import { ContactSection } from "@/components/sections/contact-section"; export default function HomePage() { return ( -
+
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx index 1289c89..9cd4914 100644 --- a/src/components/layout/footer.tsx +++ b/src/components/layout/footer.tsx @@ -4,14 +4,15 @@ import { COMPANY_INFO, NAVIGATION } from '@/lib/constants'; export function Footer() { return ( -