张翔
1631 lines
53 KiB
Markdown
1631 lines
53 KiB
Markdown
# 网站优化重构实施计划
|
||
|
||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||
|
||
**Goal:** 统一网站交互模式、优化首页结构、统一配色方案，提升用户体验和品牌一致性。
|
||
|
||
**Architecture:** 采用 Next.js App Router 架构，服务详情页使用故事化叙事风格，移除模态框交互，统一使用独立页面。首页精简 About Section，新增 Cases Section。
|
||
|
||
**Tech Stack:** Next.js 16, React 19, TypeScript, Tailwind CSS, Framer Motion
|
||
|
||
---
|
||
|
||
## 实施阶段概览
|
||
|
||
### 阶段 1: 服务详情页重构（高优先级）
|
||
- 创建服务详情页面
|
||
- 删除服务详情模态框
|
||
- 修改服务卡片添加链接
|
||
|
||
### 阶段 2: 首页结构优化（高优先级）
|
||
- 精简首页 About Section
|
||
- 新增首页 Cases Section
|
||
- 更新首页 Section 顺序
|
||
|
||
### 阶段 3: 导航与链接统一（中优先级）
|
||
- 更新导航链接
|
||
- 创建服务列表页
|
||
- 更新 Footer 链接
|
||
|
||
### 阶段 4: 配色方案统一（中优先级）
|
||
- 移除紫色，统一使用品牌红
|
||
- 更新所有相关组件
|
||
|
||
---
|
||
|
||
## 阶段 1: 服务详情页重构
|
||
|
||
### Task 1.1: 创建服务详情页面
|
||
|
||
**Files:**
|
||
- Create: `src/app/(marketing)/services/[id]/page.tsx`
|
||
- Create: `src/app/(marketing)/services/[id]/client.tsx`
|
||
|
||
**Step 1: 创建服务详情客户端组件**
|
||
|
||
```tsx
|
||
// src/app/(marketing)/services/[id]/client.tsx
|
||
'use client';
|
||
|
||
import { useEffect, useRef, useState } from 'react';
|
||
import Link from 'next/link';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Card, CardContent } from '@/components/ui/card';
|
||
import { PageHeader } from '@/components/ui/page-header';
|
||
import {
|
||
ArrowLeft,
|
||
CheckCircle2,
|
||
TrendingUp,
|
||
Users,
|
||
Target,
|
||
Clock,
|
||
MessageCircle,
|
||
ArrowRight
|
||
} from 'lucide-react';
|
||
import { SERVICES, CASES } from '@/lib/constants';
|
||
|
||
interface ServiceDetailClientProps {
|
||
service: typeof SERVICES[number];
|
||
}
|
||
|
||
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
||
Code: () => (
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
||
</svg>
|
||
),
|
||
Cloud: () => (
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
|
||
</svg>
|
||
),
|
||
BarChart3: () => (
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||
</svg>
|
||
),
|
||
Shield: () => (
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
</svg>
|
||
),
|
||
};
|
||
|
||
const challenges = {
|
||
software: [
|
||
{ title: '需求不明确', description: '业务部门提不出清晰需求，开发团队反复返工' },
|
||
{ title: '技术选型困难', description: '技术栈更新快，不知道该选什么技术方案' },
|
||
{ title: '项目延期', description: '开发进度难以把控，上线时间一拖再拖' },
|
||
{ title: '维护成本高', description: '系统上线后问题不断，运维压力巨大' },
|
||
],
|
||
cloud: [
|
||
{ title: '资源浪费', description: '服务器资源利用率低，成本居高不下' },
|
||
{ title: '扩展困难', description: '业务增长时系统无法快速扩容' },
|
||
{ title: '迁移风险', description: '担心数据丢失、业务中断' },
|
||
{ title: '安全顾虑', description: '不确定云端数据是否安全' },
|
||
],
|
||
data: [
|
||
{ title: '数据孤岛', description: '各系统数据分散，无法整合分析' },
|
||
{ title: '决策盲区', description: '缺乏数据支撑，决策凭感觉' },
|
||
{ title: '报表滞后', description: '手工制作报表，时效性差' },
|
||
{ title: '价值难挖', description: '数据很多，但不知道怎么用' },
|
||
],
|
||
security: [
|
||
{ title: '安全漏洞', description: '系统存在未知漏洞，随时可能被攻击' },
|
||
{ title: '合规压力', description: '监管要求越来越严，不知如何应对' },
|
||
{ title: '内部威胁', description: '员工操作不规范，数据泄露风险' },
|
||
{ title: '应急能力弱', description: '安全事件发生后不知所措' },
|
||
],
|
||
};
|
||
|
||
const outcomes = {
|
||
software: [
|
||
{ value: '30%', label: '开发效率提升' },
|
||
{ value: '50%', label: '返工率降低' },
|
||
{ value: '100%', label: '按时交付率' },
|
||
],
|
||
cloud: [
|
||
{ value: '40%', label: '成本降低' },
|
||
{ value: '99.9%', label: '可用性保障' },
|
||
{ value: '10x', label: '弹性扩展能力' },
|
||
],
|
||
data: [
|
||
{ value: '70%', label: '决策效率提升' },
|
||
{ value: '实时', label: '数据更新' },
|
||
{ value: '100+', label: '可视化报表' },
|
||
],
|
||
security: [
|
||
{ value: '99%', label: '漏洞修复率' },
|
||
{ value: '100%', label: '合规达标' },
|
||
{ value: '24/7', label: '安全监控' },
|
||
],
|
||
};
|
||
|
||
export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
|
||
const [isVisible, setIsVisible] = useState(false);
|
||
const contentRef = useRef<HTMLDivElement>(null);
|
||
|
||
useEffect(() => {
|
||
const observer = new IntersectionObserver(
|
||
([entry]) => {
|
||
if (entry?.isIntersecting) {
|
||
setIsVisible(true);
|
||
}
|
||
},
|
||
{ threshold: 0.1 }
|
||
);
|
||
|
||
if (contentRef.current) {
|
||
observer.observe(contentRef.current);
|
||
}
|
||
|
||
return () => observer.disconnect();
|
||
}, []);
|
||
|
||
const serviceChallenges = challenges[service.id as keyof typeof challenges] || [];
|
||
const serviceOutcomes = outcomes[service.id as keyof typeof outcomes] || [];
|
||
const relatedCases = CASES.slice(0, 2);
|
||
|
||
const Icon = iconMap[service.icon];
|
||
|
||
return (
|
||
<main className="min-h-screen bg-white">
|
||
<div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
|
||
<div className="container-wide relative z-10 pt-32 pb-20">
|
||
<Link href="/services">
|
||
<Button variant="ghost" className="text-[#5C5C5C] hover:text-[#C41E3A] hover:bg-[#C41E3A]/10">
|
||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||
返回服务列表
|
||
</Button>
|
||
</Link>
|
||
<div className="max-w-4xl mt-8">
|
||
<div className="flex items-center gap-4 mb-6">
|
||
<div className="w-16 h-16 bg-[#C41E3A] rounded-2xl flex items-center justify-center text-white">
|
||
{Icon && <Icon />}
|
||
</div>
|
||
<div>
|
||
<Badge className="mb-2 bg-[#C41E3A]/10 text-[#C41E3A] hover:bg-[#C41E3A]/20">
|
||
核心业务
|
||
</Badge>
|
||
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-[#1C1C1C]">
|
||
{service.title}
|
||
</h1>
|
||
</div>
|
||
</div>
|
||
<p className="text-lg text-[#5C5C5C] leading-relaxed">
|
||
{service.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div ref={contentRef} className="container-wide py-12 md:py-16">
|
||
<div className="max-w-4xl mx-auto space-y-16">
|
||
|
||
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-8 border border-[#C41E3A]/20">
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
|
||
<MessageCircle className="w-6 h-6 text-white" />
|
||
</div>
|
||
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
|
||
您可能面临的挑战
|
||
</h2>
|
||
</div>
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
{serviceChallenges.map((challenge, index) => (
|
||
<div
|
||
key={index}
|
||
className="p-4 bg-white rounded-lg border border-[#E5E5E5] hover:border-[#C41E3A] transition-colors"
|
||
>
|
||
<h3 className="font-semibold text-[#1C1C1C] mb-2">{challenge.title}</h3>
|
||
<p className="text-sm text-[#5C5C5C]">{challenge.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="bg-gradient-to-br from-[#F5F7FA] to-white rounded-2xl p-8 border border-[#E5E5E5]">
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
|
||
<Target className="w-6 h-6 text-white" />
|
||
</div>
|
||
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
|
||
我们如何帮助您
|
||
</h2>
|
||
</div>
|
||
<p className="text-lg text-[#5C5C5C] leading-relaxed mb-6">
|
||
{service.overview}
|
||
</p>
|
||
<div className="space-y-3">
|
||
{service.features.map((feature, index) => (
|
||
<div key={index} className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-5 h-5 text-[#C41E3A] mt-0.5 flex-shrink-0" />
|
||
<span className="text-[#1C1C1C]">{feature}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-8 border border-[#C41E3A]/20">
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
|
||
<Clock className="w-6 h-6 text-white" />
|
||
</div>
|
||
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
|
||
服务流程
|
||
</h2>
|
||
</div>
|
||
<div className="space-y-4">
|
||
{service.process.map((step, index) => (
|
||
<div key={index} className="flex items-start gap-4">
|
||
<div className="w-10 h-10 bg-[#C41E3A] rounded-full flex items-center justify-center flex-shrink-0 text-white font-semibold">
|
||
{index + 1}
|
||
</div>
|
||
<div className="flex-1 pb-4">
|
||
<p className="text-[#1C1C1C] font-medium">{step}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="bg-gradient-to-br from-[#F5F7FA] to-white rounded-2xl p-8 border border-[#E5E5E5]">
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
|
||
<TrendingUp className="w-6 h-6 text-white" />
|
||
</div>
|
||
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
|
||
您将获得的改变
|
||
</h2>
|
||
</div>
|
||
<div className="grid sm:grid-cols-3 gap-4">
|
||
{serviceOutcomes.map((outcome, index) => (
|
||
<div
|
||
key={index}
|
||
className="p-6 bg-white rounded-lg border border-[#E5E5E5] hover:border-[#C41E3A] transition-colors text-center"
|
||
>
|
||
<div className="text-3xl font-bold text-[#C41E3A] mb-2">
|
||
{outcome.value}
|
||
</div>
|
||
<div className="text-sm text-[#5C5C5C]">{outcome.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="mt-6 p-4 bg-white rounded-lg border border-[#E5E5E5]">
|
||
<p className="text-sm text-[#5C5C5C]">
|
||
{service.benefits.map(b => b).join('；')}
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-8 border border-[#C41E3A]/20">
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
|
||
<Users className="w-6 h-6 text-white" />
|
||
</div>
|
||
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
|
||
相关案例
|
||
</h2>
|
||
</div>
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
{relatedCases.map((caseItem) => (
|
||
<Link
|
||
key={caseItem.id}
|
||
href={`/cases/${caseItem.id}`}
|
||
className="group p-4 bg-white rounded-lg border border-[#E5E5E5] hover:border-[#C41E3A] transition-colors"
|
||
>
|
||
<Badge variant="secondary" className="mb-2">
|
||
{caseItem.industry}
|
||
</Badge>
|
||
<h3 className="font-semibold text-[#1C1C1C] group-hover:text-[#C41E3A] transition-colors">
|
||
{caseItem.title}
|
||
</h3>
|
||
<p className="text-sm text-[#5C5C5C] mt-2 line-clamp-2">
|
||
{caseItem.description}
|
||
</p>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
|
||
<Button variant="outline" size="lg" asChild>
|
||
<Link href="/services">
|
||
查看其他服务
|
||
</Link>
|
||
</Button>
|
||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
|
||
<Link href="/contact">
|
||
开始您的转型之旅
|
||
<ArrowRight className="ml-2 w-4 h-4" />
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 2: 创建服务详情页面入口**
|
||
|
||
```tsx
|
||
// src/app/(marketing)/services/[id]/page.tsx
|
||
import { Metadata } from 'next';
|
||
import { notFound } from 'next/navigation';
|
||
import { SERVICES } from '@/lib/constants';
|
||
import { ServiceDetailClient } from './client';
|
||
|
||
export async function generateStaticParams() {
|
||
return SERVICES.map((service) => ({
|
||
id: service.id,
|
||
}));
|
||
}
|
||
|
||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
|
||
const { id } = await params;
|
||
const service = SERVICES.find((s) => s.id === id);
|
||
|
||
if (!service) {
|
||
return {
|
||
title: '服务未找到',
|
||
};
|
||
}
|
||
|
||
return {
|
||
title: `${service.title} - 睿新致远`,
|
||
description: service.description,
|
||
};
|
||
}
|
||
|
||
export default async function ServiceDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
||
const { id } = await params;
|
||
const service = SERVICES.find((s) => s.id === id);
|
||
|
||
if (!service) {
|
||
notFound();
|
||
}
|
||
|
||
return <ServiceDetailClient service={service} />;
|
||
}
|
||
```
|
||
|
||
**Step 3: 验证文件创建成功**
|
||
|
||
Run: `ls -la src/app/\(marketing\)/services/`
|
||
|
||
Expected: 目录和文件已创建
|
||
|
||
**Step 4: Commit**
|
||
|
||
```bash
|
||
git add src/app/\(marketing\)/services/
|
||
git commit -m "feat: add service detail page with storytelling style"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 1.2: 创建服务列表页面
|
||
|
||
**Files:**
|
||
- Create: `src/app/(marketing)/services/page.tsx`
|
||
|
||
**Step 1: 创建服务列表页面**
|
||
|
||
```tsx
|
||
// src/app/(marketing)/services/page.tsx
|
||
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import { motion } from 'framer-motion';
|
||
import { useInView } from 'framer-motion';
|
||
import { useRef } from 'react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Card, CardContent } from '@/components/ui/card';
|
||
import { PageHeader } from '@/components/ui/page-header';
|
||
import { ArrowRight, Code, Cloud, BarChart3, Shield } from 'lucide-react';
|
||
import { SERVICES } from '@/lib/constants';
|
||
|
||
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
||
Code,
|
||
Cloud,
|
||
BarChart3,
|
||
Shield,
|
||
};
|
||
|
||
export default function ServicesPage() {
|
||
const contentRef = useRef(null);
|
||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
||
|
||
return (
|
||
<div className="min-h-screen bg-white">
|
||
<PageHeader
|
||
title="核心业务"
|
||
description="专业技术团队，为您提供全方位的数字化解决方案"
|
||
/>
|
||
|
||
<div className="container-wide relative z-10 py-16" ref={contentRef}>
|
||
<div className="max-w-6xl mx-auto">
|
||
<div className="grid md:grid-cols-2 gap-8">
|
||
{SERVICES.map((service, index) => {
|
||
const Icon = iconMap[service.icon];
|
||
return (
|
||
<motion.div
|
||
key={service.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||
>
|
||
<Link
|
||
href={`/services/${service.id}`}
|
||
className="group bg-white rounded-2xl border border-[#E5E5E5] overflow-hidden hover:shadow-xl transition-all duration-300 block h-full"
|
||
>
|
||
<div className="p-8">
|
||
<div className="flex items-start gap-4 mb-4">
|
||
<div className="w-14 h-14 rounded-xl bg-[#F5F5F5] flex items-center justify-center group-hover:bg-[#C41E3A] transition-all duration-300">
|
||
{Icon && <Icon className="w-7 h-7 text-[#1C1C1C] group-hover:text-white transition-colors" />}
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
|
||
{service.title}
|
||
</h3>
|
||
<p className="text-[#5C5C5C] text-sm leading-relaxed">
|
||
{service.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-6 pt-4 border-t border-[#E5E5E5]">
|
||
<div className="flex flex-wrap gap-2 mb-4">
|
||
{service.features.slice(0, 3).map((feature, idx) => (
|
||
<Badge key={idx} variant="secondary" className="text-xs">
|
||
{feature.split('：')[0]}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
<div className="flex items-center text-[#C41E3A] font-medium group-hover:translate-x-2 transition-transform">
|
||
了解详情
|
||
<ArrowRight className="w-4 h-4 ml-2" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.6, delay: 0.4 }}
|
||
className="bg-[#F5F5F5] py-16"
|
||
>
|
||
<div className="container-wide text-center">
|
||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
|
||
准备开始您的数字化转型之旅？
|
||
</h2>
|
||
<p className="text-lg text-[#5C5C5C] mb-8 max-w-2xl mx-auto">
|
||
让我们与您同行，共创美好未来
|
||
</p>
|
||
<Button
|
||
size="lg"
|
||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
|
||
asChild
|
||
>
|
||
<Link href="/contact">
|
||
立即咨询
|
||
<ArrowRight className="ml-2 w-4 h-4" />
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 2: 验证文件创建成功**
|
||
|
||
Run: `ls -la src/app/\(marketing\)/services/page.tsx`
|
||
|
||
Expected: 文件已创建
|
||
|
||
**Step 3: Commit**
|
||
|
||
```bash
|
||
git add src/app/\(marketing\)/services/page.tsx
|
||
git commit -m "feat: add services list page"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 1.3: 修改服务卡片组件添加链接
|
||
|
||
**Files:**
|
||
- Modify: `src/components/sections/services-section.tsx`
|
||
|
||
**Step 1: 移除模态框相关代码，添加链接**
|
||
|
||
Read: `src/components/sections/services-section.tsx`
|
||
|
||
Replace entire file with:
|
||
|
||
```tsx
|
||
'use client';
|
||
|
||
import { motion } from 'framer-motion';
|
||
import { useInView } from 'framer-motion';
|
||
import { useRef } from 'react';
|
||
import Link from 'next/link';
|
||
import { Code, Cloud, BarChart3, Shield, ArrowRight } from 'lucide-react';
|
||
import { Card, CardContent } from '@/components/ui/card';
|
||
import { Button } from '@/components/ui/button';
|
||
import { SERVICES } from '@/lib/constants';
|
||
|
||
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
||
Code,
|
||
Cloud,
|
||
BarChart3,
|
||
Shield,
|
||
};
|
||
|
||
export function ServicesSection() {
|
||
const ref = useRef(null);
|
||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||
|
||
return (
|
||
<section id="solutions" aria-labelledby="solutions-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
|
||
<div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(196,30,58,0.03)] rounded-full blur-3xl" />
|
||
<div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
|
||
|
||
<div className="container-wide relative z-10">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.6 }}
|
||
className="text-center max-w-3xl mx-auto mb-16"
|
||
>
|
||
<h2 id="solutions-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
||
我们的 <span className="text-[#C41E3A]">核心业务</span>
|
||
</h2>
|
||
<p className="text-lg text-[#5C5C5C] max-w-2xl mx-auto">
|
||
专业技术团队，为您提供全方位的数字化解决方案
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{SERVICES.map((service, index) => {
|
||
const Icon = iconMap[service.icon];
|
||
return (
|
||
<motion.div
|
||
key={service.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||
>
|
||
<Link href={`/services/${service.id}`}>
|
||
<Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors">
|
||
<CardContent className="p-0">
|
||
<div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[#C41E3A] transition-all duration-300">
|
||
{Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">{service.title}</h3>
|
||
<p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
|
||
<div className="mt-4 flex items-center text-[#C41E3A] text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
|
||
了解详情
|
||
<ArrowRight className="ml-1 w-4 h-4" />
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</Link>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.6, delay: 0.4 }}
|
||
className="text-center mt-12"
|
||
>
|
||
<Button variant="outline" size="lg" className="group" asChild>
|
||
<Link href="/services">
|
||
查看全部服务
|
||
<ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||
</Link>
|
||
</Button>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 2: 验证修改**
|
||
|
||
Run: `npm run lint`
|
||
|
||
Expected: 无 lint 错误
|
||
|
||
**Step 3: Commit**
|
||
|
||
```bash
|
||
git add src/components/sections/services-section.tsx
|
||
git commit -m "refactor: remove modal, add link navigation for services"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 1.4: 删除服务详情模态框组件
|
||
|
||
**Files:**
|
||
- Delete: `src/components/services/service-detail-modal.tsx`
|
||
|
||
**Step 1: 删除模态框组件文件**
|
||
|
||
Run: `rm src/components/services/service-detail-modal.tsx`
|
||
|
||
**Step 2: 验证删除成功**
|
||
|
||
Run: `ls src/components/services/`
|
||
|
||
Expected: 目录为空或不存在
|
||
|
||
**Step 3: 如果目录为空，删除目录**
|
||
|
||
Run: `rmdir src/components/services/ 2>/dev/null || true`
|
||
|
||
**Step 4: Commit**
|
||
|
||
```bash
|
||
git add -A
|
||
git commit -m "refactor: remove service detail modal component"
|
||
```
|
||
|
||
---
|
||
|
||
## 阶段 2: 首页结构优化
|
||
|
||
### Task 2.1: 精简首页 About Section
|
||
|
||
**Files:**
|
||
- Modify: `src/components/sections/about-section.tsx`
|
||
|
||
**Step 1: 精简 About Section 内容**
|
||
|
||
Read: `src/components/sections/about-section.tsx`
|
||
|
||
Replace entire file with:
|
||
|
||
```tsx
|
||
'use client';
|
||
|
||
import { motion } from 'framer-motion';
|
||
import { useInView } from 'framer-motion';
|
||
import { useRef } from 'react';
|
||
import Link from 'next/link';
|
||
import { Card, CardContent } from '@/components/ui/card';
|
||
import { Button } from '@/components/ui/button';
|
||
import { COMPANY_INFO, STATS } from '@/lib/constants';
|
||
import { ArrowRight } from 'lucide-react';
|
||
|
||
export function AboutSection() {
|
||
const ref = useRef(null);
|
||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||
|
||
return (
|
||
<section id="about" className="py-24 bg-[#FAFAFA] relative" ref={ref}>
|
||
<div className="absolute inset-0 bg-[linear-gradient(rgba(28,28,28,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(28,28,28,0.02)_1px,transparent_1px)] bg-[size:40px_40px]" />
|
||
<div className="container-wide relative z-10">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.6 }}
|
||
className="max-w-4xl mx-auto"
|
||
>
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||
关于 <span className="tracking-tight font-calligraphy text-[#C41E3A]" style={{ fontWeight: 'normal', WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', textRendering: 'optimizeLegibility' }}>{COMPANY_INFO.shortName}</span>
|
||
</h2>
|
||
<p className="text-lg text-[#5C5C5C] mb-8">
|
||
{COMPANY_INFO.slogan}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-2xl p-8 mb-12 border border-[#E5E5E5]">
|
||
<p className="text-lg text-[#5C5C5C] leading-relaxed text-center mb-6">
|
||
"企业需要的，不是一个高高在上的'专家'，也不是一个做完就跑的'卖家'，而是一个能坐下来、一起想办法的同行者。"
|
||
</p>
|
||
<p className="text-[#1C1C1C] font-medium text-center">
|
||
我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
|
||
</p>
|
||
</div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.6, delay: 0.2 }}
|
||
className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12"
|
||
>
|
||
{STATS.map((stat, idx) => (
|
||
<Card key={idx} className="text-center border-[#E5E5E5]">
|
||
<CardContent className="pt-6">
|
||
<div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-2">{stat.value}</div>
|
||
<div className="text-sm text-[#5C5C5C]">{stat.label}</div>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.6, delay: 0.3 }}
|
||
className="text-center"
|
||
>
|
||
<Button size="lg" variant="outline" className="group" asChild>
|
||
<Link href="/about">
|
||
了解更多关于我们
|
||
<ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||
</Link>
|
||
</Button>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 2: 验证修改**
|
||
|
||
Run: `npm run lint`
|
||
|
||
Expected: 无 lint 错误
|
||
|
||
**Step 3: Commit**
|
||
|
||
```bash
|
||
git add src/components/sections/about-section.tsx
|
||
git commit -m "refactor: simplify about section on homepage"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 2.2: 创建首页 Cases Section
|
||
|
||
**Files:**
|
||
- Create: `src/components/sections/cases-section.tsx`
|
||
|
||
**Step 1: 创建 Cases Section 组件**
|
||
|
||
```tsx
|
||
// src/components/sections/cases-section.tsx
|
||
'use client';
|
||
|
||
import { motion } from 'framer-motion';
|
||
import { useInView } from 'framer-motion';
|
||
import { useRef } from 'react';
|
||
import Link from 'next/link';
|
||
import { Card, CardContent } from '@/components/ui/card';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { CASES } from '@/lib/constants';
|
||
import { ArrowRight, Building2, TrendingUp } from 'lucide-react';
|
||
|
||
export function CasesSection() {
|
||
const ref = useRef(null);
|
||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||
|
||
const featuredCases = CASES.slice(0, 3);
|
||
|
||
return (
|
||
<section id="cases" className="py-24 bg-white relative overflow-hidden" ref={ref}>
|
||
<div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(196,30,58,0.03)] rounded-full blur-3xl" />
|
||
<div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
|
||
|
||
<div className="container-wide relative z-10">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.6 }}
|
||
className="text-center max-w-3xl mx-auto mb-16"
|
||
>
|
||
<h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
||
与谁同行，<span className="text-[#C41E3A]">决定能走多远</span>
|
||
</h2>
|
||
<p className="text-lg text-[#5C5C5C] max-w-2xl mx-auto">
|
||
我们与优秀的企业同行，共同成长，共创未来
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
{featuredCases.map((caseItem, index) => (
|
||
<motion.div
|
||
key={caseItem.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.5, delay: 0.1 + index * 0.1 }}
|
||
>
|
||
<Link href={`/cases/${caseItem.id}`}>
|
||
<Card className="h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors overflow-hidden">
|
||
<div className="relative h-40 bg-gradient-to-br from-[#F5F5F5] to-[#E5E5E5] flex items-center justify-center">
|
||
<Building2 className="w-16 h-16 text-[#C41E3A]/20 group-hover:scale-110 transition-transform duration-300" />
|
||
<div className="absolute top-4 right-4">
|
||
<Badge className="bg-white/90 text-[#1C1C1C] hover:bg-white">
|
||
{caseItem.industry}
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
<CardContent className="p-6">
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<Building2 className="w-4 h-4 text-[#C41E3A]" />
|
||
<span className="text-sm text-[#5C5C5C]">{caseItem.client}</span>
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">
|
||
{caseItem.title}
|
||
</h3>
|
||
<p className="text-[#5C5C5C] text-sm line-clamp-2 mb-4">
|
||
{caseItem.description}
|
||
</p>
|
||
{caseItem.results.length > 0 && (
|
||
<div className="flex items-center gap-2 text-[#C41E3A]">
|
||
<TrendingUp className="w-4 h-4" />
|
||
<span className="text-sm font-medium">{caseItem.results[0].value}</span>
|
||
<span className="text-sm text-[#5C5C5C]">{caseItem.results[0].label}</span>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</Link>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.6, delay: 0.4 }}
|
||
className="text-center mt-12"
|
||
>
|
||
<Button variant="outline" size="lg" className="group" asChild>
|
||
<Link href="/cases">
|
||
查看更多案例
|
||
<ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||
</Link>
|
||
</Button>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 2: 验证文件创建成功**
|
||
|
||
Run: `ls -la src/components/sections/cases-section.tsx`
|
||
|
||
Expected: 文件已创建
|
||
|
||
**Step 3: Commit**
|
||
|
||
```bash
|
||
git add src/components/sections/cases-section.tsx
|
||
git commit -m "feat: add cases section to homepage"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 2.3: 更新首页 Section 顺序
|
||
|
||
**Files:**
|
||
- Modify: `src/app/(marketing)/page.tsx`
|
||
|
||
**Step 1: 更新首页导入和 Section 顺序**
|
||
|
||
Read: `src/app/(marketing)/page.tsx`
|
||
|
||
Replace entire file with:
|
||
|
||
```tsx
|
||
"use client";
|
||
|
||
import dynamic from 'next/dynamic';
|
||
import { Header } from "@/components/layout/header";
|
||
import { Footer } from "@/components/layout/footer";
|
||
import { HeroSection } from "@/components/sections/hero-section";
|
||
import { SectionSkeleton } from "@/components/ui/loading-skeleton";
|
||
|
||
const ServicesSection = dynamic(
|
||
() => import('@/components/sections/services-section').then(mod => ({ default: mod.ServicesSection })),
|
||
{
|
||
loading: () => <SectionSkeleton />,
|
||
ssr: true
|
||
}
|
||
);
|
||
|
||
const ProductsSection = dynamic(
|
||
() => import('@/components/sections/products-section').then(mod => ({ default: mod.ProductsSection })),
|
||
{
|
||
loading: () => <SectionSkeleton />,
|
||
ssr: true
|
||
}
|
||
);
|
||
|
||
const CasesSection = dynamic(
|
||
() => import('@/components/sections/cases-section').then(mod => ({ default: mod.CasesSection })),
|
||
{
|
||
loading: () => <SectionSkeleton />,
|
||
ssr: true
|
||
}
|
||
);
|
||
|
||
const AboutSection = dynamic(
|
||
() => import('@/components/sections/about-section').then(mod => ({ default: mod.AboutSection })),
|
||
{
|
||
loading: () => <SectionSkeleton />,
|
||
ssr: true
|
||
}
|
||
);
|
||
|
||
const NewsSection = dynamic(
|
||
() => import('@/components/sections/news-section').then(mod => ({ default: mod.NewsSection })),
|
||
{
|
||
loading: () => <SectionSkeleton />,
|
||
ssr: true
|
||
}
|
||
);
|
||
|
||
const ContactSection = dynamic(
|
||
() => import('@/components/sections/contact-section').then(mod => ({ default: mod.ContactSection })),
|
||
{
|
||
loading: () => <SectionSkeleton />,
|
||
ssr: true
|
||
}
|
||
);
|
||
|
||
export default function HomePage() {
|
||
return (
|
||
<main className="min-h-screen bg-white dark:bg-[var(--color-bg-primary)]">
|
||
<Header />
|
||
<HeroSection />
|
||
<ServicesSection />
|
||
<ProductsSection />
|
||
<CasesSection />
|
||
<AboutSection />
|
||
<NewsSection />
|
||
<ContactSection />
|
||
<Footer />
|
||
</main>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 2: 验证修改**
|
||
|
||
Run: `npm run lint`
|
||
|
||
Expected: 无 lint 错误
|
||
|
||
**Step 3: Commit**
|
||
|
||
```bash
|
||
git add src/app/\(marketing\)/page.tsx
|
||
git commit -m "refactor: update homepage section order with cases section"
|
||
```
|
||
|
||
---
|
||
|
||
## 阶段 3: 导航与链接统一
|
||
|
||
### Task 3.1: 更新导航链接
|
||
|
||
**Files:**
|
||
- Modify: `src/lib/constants.ts`
|
||
- Modify: `src/components/layout/header.tsx`
|
||
|
||
**Step 1: 更新导航配置**
|
||
|
||
Read: `src/lib/constants.ts`
|
||
|
||
Find the `NAVIGATION` constant and replace with:
|
||
|
||
```typescript
|
||
// Navigation Items - 独立页面导航
|
||
export const NAVIGATION = [
|
||
{ id: 'home', label: '首页', href: '/' },
|
||
{ id: 'services', label: '核心业务', href: '/services' },
|
||
{ id: 'products', label: '产品服务', href: '/products' },
|
||
{ id: 'about', label: '关于我们', href: '/about' },
|
||
{ id: 'news', label: '新闻动态', href: '/news' },
|
||
{ id: 'contact', label: '联系我们', href: '/contact' },
|
||
] as const;
|
||
```
|
||
|
||
**Step 2: 更新 Header 组件**
|
||
|
||
Read: `src/components/layout/header.tsx`
|
||
|
||
Replace the navigation handling logic to use Link instead of anchor scroll:
|
||
|
||
```tsx
|
||
'use client';
|
||
|
||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||
import Link from 'next/link';
|
||
import { usePathname } from 'next/navigation';
|
||
import { Menu, X } from 'lucide-react';
|
||
import { motion, AnimatePresence } from 'framer-motion';
|
||
import { Button } from '@/components/ui/button';
|
||
import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
|
||
import { useFocusTrap } from '@/hooks/use-focus-trap';
|
||
|
||
export function Header() {
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
const [isScrolled, setIsScrolled] = useState(false);
|
||
const pathname = usePathname();
|
||
const focusTrapRef = useFocusTrap<HTMLDivElement>(isOpen);
|
||
|
||
useEffect(() => {
|
||
const handleScroll = () => {
|
||
setIsScrolled(window.scrollY > 20);
|
||
};
|
||
|
||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||
handleScroll();
|
||
|
||
return () => {
|
||
window.removeEventListener('scroll', handleScroll);
|
||
};
|
||
}, []);
|
||
|
||
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
setIsOpen(!isOpen);
|
||
}
|
||
if (e.key === 'Escape' && isOpen) {
|
||
setIsOpen(false);
|
||
}
|
||
}, [isOpen]);
|
||
|
||
return (
|
||
<>
|
||
<header
|
||
className={`
|
||
fixed top-0 left-0 right-0 z-50
|
||
transition-all duration-300 ease-out
|
||
${isScrolled
|
||
? 'bg-white/95 backdrop-blur-xl border-b border-[#E2E8F0] shadow-sm'
|
||
: 'bg-transparent'
|
||
}
|
||
`}
|
||
>
|
||
<div className="container-wide">
|
||
<div className="flex items-center justify-between h-16">
|
||
<Link
|
||
href="/"
|
||
className="flex items-center group focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-offset-2 rounded-sm"
|
||
>
|
||
<img
|
||
src="/logo.svg"
|
||
alt={COMPANY_INFO.name}
|
||
className="h-8 w-auto transition-transform duration-200 group-hover:scale-105"
|
||
/>
|
||
</Link>
|
||
|
||
<nav className="hidden md:flex items-center gap-1" role="navigation" aria-label="主导航">
|
||
{NAVIGATION.map((item) => (
|
||
<Link
|
||
key={item.id}
|
||
href={item.href}
|
||
className={`
|
||
relative px-3 py-1.5 text-sm font-medium
|
||
transition-all duration-300
|
||
focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-offset-2 rounded-sm
|
||
${pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href))
|
||
? 'text-[#1C1C1C]'
|
||
: 'text-[#3D3D3D] hover:text-[#1C1C1C]'
|
||
}
|
||
`}
|
||
aria-current={pathname === item.href ? 'page' : undefined}
|
||
>
|
||
{item.label}
|
||
{(pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href))) && (
|
||
<motion.span
|
||
layoutId="activeNav"
|
||
className="absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[#C41E3A] rounded-full"
|
||
transition={{ type: "spring", stiffness: 380, damping: 30 }}
|
||
/>
|
||
)}
|
||
</Link>
|
||
))}
|
||
</nav>
|
||
|
||
<div className="hidden md:flex items-center gap-3">
|
||
<Button
|
||
size="sm"
|
||
asChild
|
||
>
|
||
<Link href="/contact">立即咨询</Link>
|
||
</Button>
|
||
</div>
|
||
|
||
<button
|
||
className="md:hidden p-2 -mr-2 text-[#3D3D3D] hover:text-[#1C1C1C] transition-colors focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-offset-2 rounded-sm"
|
||
onClick={() => setIsOpen(!isOpen)}
|
||
onKeyDown={handleKeyDown}
|
||
aria-expanded={isOpen}
|
||
aria-controls="mobile-menu"
|
||
aria-label={isOpen ? '关闭菜单' : '打开菜单'}
|
||
>
|
||
{isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<AnimatePresence>
|
||
{isOpen && (
|
||
<motion.div
|
||
ref={focusTrapRef}
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
className="fixed inset-0 z-40 md:hidden"
|
||
>
|
||
<div
|
||
className="absolute inset-0 bg-black/20 backdrop-blur-sm"
|
||
onClick={() => setIsOpen(false)}
|
||
aria-hidden="true"
|
||
/>
|
||
<motion.div
|
||
initial={{ y: -20, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
exit={{ y: -20, opacity: 0 }}
|
||
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
||
className="absolute top-16 left-0 right-0 bg-white/95 backdrop-blur-xl border-b border-[#E2E8F0] shadow-lg"
|
||
id="mobile-menu"
|
||
role="navigation"
|
||
aria-label="移动端导航"
|
||
>
|
||
<nav className="container-wide py-4">
|
||
{NAVIGATION.map((item, index) => (
|
||
<motion.div
|
||
key={item.id}
|
||
initial={{ x: -20, opacity: 0 }}
|
||
animate={{ x: 0, opacity: 1 }}
|
||
transition={{ delay: index * 0.05 }}
|
||
>
|
||
<Link
|
||
href={item.href}
|
||
onClick={() => setIsOpen(false)}
|
||
className={`
|
||
block px-4 py-3 text-base font-medium
|
||
transition-all duration-300
|
||
border-l-2
|
||
focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-inset
|
||
${pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href))
|
||
? 'text-[#1C1C1C] border-[#C41E3A] bg-[#FEF2F4]'
|
||
: 'text-[#3D3D3D] border-transparent hover:text-[#1C1C1C] hover:bg-[#F5F5F5]'
|
||
}
|
||
`}
|
||
>
|
||
{item.label}
|
||
</Link>
|
||
</motion.div>
|
||
))}
|
||
<div className="mt-4 px-4 pt-4 border-t border-[#E2E8F0] space-y-3">
|
||
<Button
|
||
className="w-full"
|
||
asChild
|
||
>
|
||
<Link href="/contact" onClick={() => setIsOpen(false)}>
|
||
联系我们
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
</nav>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 3: 验证修改**
|
||
|
||
Run: `npm run lint`
|
||
|
||
Expected: 无 lint 错误
|
||
|
||
**Step 4: Commit**
|
||
|
||
```bash
|
||
git add src/lib/constants.ts src/components/layout/header.tsx
|
||
git commit -m "refactor: update navigation to use independent page links"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 3.2: 创建产品列表页面
|
||
|
||
**Files:**
|
||
- Create: `src/app/(marketing)/products/page.tsx`
|
||
|
||
**Step 1: 创建产品列表页面**
|
||
|
||
```tsx
|
||
// src/app/(marketing)/products/page.tsx
|
||
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import { motion } from 'framer-motion';
|
||
import { useInView } from 'framer-motion';
|
||
import { useRef } from 'react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||
import { PageHeader } from '@/components/ui/page-header';
|
||
import { ArrowRight, Check, TrendingUp } from 'lucide-react';
|
||
import { PRODUCTS } from '@/lib/constants';
|
||
|
||
export default function ProductsPage() {
|
||
const contentRef = useRef(null);
|
||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
||
|
||
return (
|
||
<div className="min-h-screen bg-white">
|
||
<PageHeader
|
||
title="产品服务"
|
||
description="自主研发的企业级产品，助力企业高效运营，实现数字化转型"
|
||
/>
|
||
|
||
<div className="container-wide relative z-10 py-16" ref={contentRef}>
|
||
<div className="max-w-6xl mx-auto">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
{PRODUCTS.map((product, index) => (
|
||
<motion.div
|
||
key={product.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||
>
|
||
<Link href={`/products/${product.id}`}>
|
||
<Card className="h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors">
|
||
<CardHeader>
|
||
<Badge variant="secondary" className="w-fit mb-3">
|
||
{product.category}
|
||
</Badge>
|
||
<CardTitle className="group-hover:text-[#C41E3A] transition-colors">{product.title}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="flex-1 flex flex-col">
|
||
<CardDescription className="text-base leading-relaxed mb-4 flex-1">
|
||
{product.description}
|
||
</CardDescription>
|
||
|
||
<div className="mb-4">
|
||
<p className="text-sm font-medium text-[#1C1C1C] mb-2">核心功能</p>
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{product.features.slice(0, 4).map((feature, idx) => (
|
||
<span
|
||
key={idx}
|
||
className="inline-flex items-center text-xs px-2 py-1 bg-[#FAFAFA] text-[#3D3D3D] rounded border border-[#E5E5E5]"
|
||
>
|
||
<Check className="w-3 h-3 mr-1 text-[#C41E3A]" />
|
||
{feature}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mb-4">
|
||
<p className="text-sm font-medium text-[#1C1C1C] mb-2 flex items-center">
|
||
<TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
|
||
核心价值
|
||
</p>
|
||
<ul className="space-y-1">
|
||
{product.benefits.map((benefit, idx) => (
|
||
<li key={idx} className="text-xs text-[#5C5C5C] flex items-start">
|
||
<span className="text-[#C41E3A] mr-1.5">•</span>
|
||
{benefit}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<Button variant="outline" className="w-full mt-auto group-hover:bg-[#C41E3A] group-hover:text-white group-hover:border-[#C41E3A] transition-colors">
|
||
了解详情
|
||
<ArrowRight className="ml-2 w-4 h-4" />
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
</Link>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.6, delay: 0.4 }}
|
||
className="bg-[#F5F5F5] py-16"
|
||
>
|
||
<div className="container-wide text-center">
|
||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
|
||
需要定制化解决方案？
|
||
</h2>
|
||
<p className="text-lg text-[#5C5C5C] mb-8 max-w-2xl mx-auto">
|
||
我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
|
||
</p>
|
||
<Button
|
||
size="lg"
|
||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
|
||
asChild
|
||
>
|
||
<Link href="/contact">
|
||
联系我们
|
||
<ArrowRight className="ml-2 w-4 h-4" />
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 2: 验证文件创建成功**
|
||
|
||
Run: `ls -la src/app/\(marketing\)/products/page.tsx`
|
||
|
||
Expected: 文件已创建
|
||
|
||
**Step 3: Commit**
|
||
|
||
```bash
|
||
git add src/app/\(marketing\)/products/page.tsx
|
||
git commit -m "feat: add products list page"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 3.3: 更新 Footer 链接
|
||
|
||
**Files:**
|
||
- Modify: `src/components/layout/footer.tsx`
|
||
|
||
**Step 1: 更新 Footer 导航链接**
|
||
|
||
Read: `src/components/layout/footer.tsx`
|
||
|
||
Replace the navigation links section with:
|
||
|
||
```tsx
|
||
<div>
|
||
<h3 className="font-semibold text-lg mb-6 text-[#1C1C1C]">快速链接</h3>
|
||
<ul className="space-y-3">
|
||
{NAVIGATION.map((item) => (
|
||
<li key={item.id}>
|
||
<Link
|
||
href={item.href}
|
||
className="text-[#3D3D3D] hover:text-[#C41E3A] transition-colors"
|
||
>
|
||
{item.label}
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
```
|
||
|
||
**Step 2: 验证修改**
|
||
|
||
Run: `npm run lint`
|
||
|
||
Expected: 无 lint 错误
|
||
|
||
**Step 3: Commit**
|
||
|
||
```bash
|
||
git add src/components/layout/footer.tsx
|
||
git commit -m "refactor: update footer navigation links"
|
||
```
|
||
|
||
---
|
||
|
||
## 阶段 4: 配色方案统一
|
||
|
||
### Task 4.1: 更新案例详情页配色
|
||
|
||
**Files:**
|
||
- Modify: `src/app/(marketing)/cases/[id]/client.tsx`
|
||
|
||
**Step 1: 将紫色替换为品牌红**
|
||
|
||
Read: `src/app/(marketing)/cases/[id]/client.tsx`
|
||
|
||
Replace all occurrences of:
|
||
- `#4F46E5` → `#C41E3A`
|
||
- `rgba(79,70,229,` → `rgba(196,30,58,`
|
||
|
||
Key replacements:
|
||
```tsx
|
||
// Before
|
||
<div className="w-12 h-12 bg-[#4F46E5] rounded-xl flex items-center justify-center">
|
||
|
||
// After
|
||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
|
||
```
|
||
|
||
**Step 2: 验证修改**
|
||
|
||
Run: `npm run lint`
|
||
|
||
Expected: 无 lint 错误
|
||
|
||
**Step 3: Commit**
|
||
|
||
```bash
|
||
git add src/app/\(marketing\)/cases/\[id\]/client.tsx
|
||
git commit -m "style: unify color scheme to brand red in case detail page"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 4.2: 更新 Solutions 页面配色
|
||
|
||
**Files:**
|
||
- Modify: `src/app/(marketing)/solutions/page.tsx`
|
||
|
||
**Step 1: 将紫色替换为品牌红**
|
||
|
||
Read: `src/app/(marketing)/solutions/page.tsx`
|
||
|
||
Replace all occurrences of:
|
||
- `#4F46E5` → `#C41E3A`
|
||
- `rgba(79,70,229,` → `rgba(196,30,58,`
|
||
|
||
**Step 2: 验证修改**
|
||
|
||
Run: `npm run lint`
|
||
|
||
Expected: 无 lint 错误
|
||
|
||
**Step 3: Commit**
|
||
|
||
```bash
|
||
git add src/app/\(marketing\)/solutions/page.tsx
|
||
git commit -m "style: unify color scheme to brand red in solutions page"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 4.3: 更新 Products Section 配色
|
||
|
||
**Files:**
|
||
- Modify: `src/components/sections/products-section.tsx`
|
||
|
||
**Step 1: 将紫色替换为品牌红**
|
||
|
||
Read: `src/components/sections/products-section.tsx`
|
||
|
||
Replace all occurrences of:
|
||
- `#4F46E5` → `#C41E3A`
|
||
- `rgba(79,70,229,` → `rgba(196,30,58,`
|
||
|
||
**Step 2: 验证修改**
|
||
|
||
Run: `npm run lint`
|
||
|
||
Expected: 无 lint 错误
|
||
|
||
**Step 3: Commit**
|
||
|
||
```bash
|
||
git add src/components/sections/products-section.tsx
|
||
git commit -m "style: unify color scheme to brand red in products section"
|
||
```
|
||
|
||
---
|
||
|
||
## 阶段 5: 清理与验证
|
||
|
||
### Task 5.1: 删除旧的 Solutions 页面（可选）
|
||
|
||
**Files:**
|
||
- Delete: `src/app/(marketing)/solutions/` (如果与 services 重复)
|
||
|
||
**Step 1: 检查是否需要删除**
|
||
|
||
Run: `ls -la src/app/\(marketing\)/solutions/`
|
||
|
||
如果 solutions 页面与 services 功能重复，考虑重定向或删除。
|
||
|
||
**Step 2: 如果决定保留，更新导航**
|
||
|
||
确保导航指向正确的页面。
|
||
|
||
---
|
||
|
||
### Task 5.2: 运行完整测试
|
||
|
||
**Step 1: 运行 lint 检查**
|
||
|
||
Run: `npm run lint`
|
||
|
||
Expected: 无错误
|
||
|
||
**Step 2: 运行类型检查**
|
||
|
||
Run: `npm run typecheck || npx tsc --noEmit`
|
||
|
||
Expected: 无类型错误
|
||
|
||
**Step 3: 运行构建**
|
||
|
||
Run: `npm run build`
|
||
|
||
Expected: 构建成功
|
||
|
||
**Step 4: 本地测试**
|
||
|
||
Run: `npm run dev`
|
||
|
||
手动测试以下页面：
|
||
- `/` - 首页
|
||
- `/services` - 服务列表
|
||
- `/services/[id]` - 服务详情
|
||
- `/products` - 产品列表
|
||
- `/products/[id]` - 产品详情
|
||
- `/cases` - 案例列表
|
||
- `/cases/[id]` - 案例详情
|
||
- `/about` - 关于我们
|
||
- `/news` - 新闻列表
|
||
- `/contact` - 联系我们
|
||
|
||
---
|
||
|
||
### Task 5.3: 最终提交
|
||
|
||
**Step 1: 检查所有更改**
|
||
|
||
Run: `git status`
|
||
|
||
**Step 2: 提交所有更改**
|
||
|
||
```bash
|
||
git add -A
|
||
git commit -m "refactor: complete website optimization - unified navigation, colors, and structure"
|
||
```
|
||
|
||
---
|
||
|
||
## 实施完成检查清单
|
||
|
||
- [ ] 服务详情页创建完成
|
||
- [ ] 服务列表页创建完成
|
||
- [ ] 服务模态框已删除
|
||
- [ ] 首页 About Section 已精简
|
||
- [ ] 首页 Cases Section 已添加
|
||
- [ ] 导航链接已统一
|
||
- [ ] 产品列表页已创建
|
||
- [ ] Footer 链接已更新
|
||
- [ ] 配色方案已统一
|
||
- [ ] Lint 检查通过
|
||
- [ ] 类型检查通过
|
||
- [ ] 构建成功
|
||
- [ ] 手动测试通过
|