manual save(2025-12-29 00:16)
This commit is contained in:
SiteAgent Bot
438
src/pages/About.tsx
Normal file
438
src/pages/About.tsx
Normal file
@@ -0,0 +1,438 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import {
|
||||
Target,
|
||||
Heart,
|
||||
Award,
|
||||
Users,
|
||||
Calendar,
|
||||
TrendingUp,
|
||||
Building2,
|
||||
Globe,
|
||||
} from 'lucide-react';
|
||||
import { Header } from '../components/Header';
|
||||
import { Footer } from '../components/Footer';
|
||||
import { COMPANY_INFO } from '../lib/constants';
|
||||
|
||||
// 发展历程数据
|
||||
const milestones = [
|
||||
{
|
||||
year: '2010',
|
||||
title: '公司成立',
|
||||
description: '诚裕集团在北京成立，开始布局金融服务业务',
|
||||
icon: Building2,
|
||||
},
|
||||
{
|
||||
year: '2012',
|
||||
title: '首次战略融资',
|
||||
description: '完成 A 轮融资，获得知名投资机构认可',
|
||||
icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
year: '2015',
|
||||
title: '业务扩展',
|
||||
description: '成立科技研发子公司，进军科技领域',
|
||||
icon: Globe,
|
||||
},
|
||||
{
|
||||
year: '2018',
|
||||
title: '规模扩张',
|
||||
description: '员工规模突破 200 人，服务客户超过 500 家',
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
year: '2020',
|
||||
title: '产业投资布局',
|
||||
description: '成立产业投资基金，全面进入投资领域',
|
||||
icon: Target,
|
||||
},
|
||||
{
|
||||
year: '2023',
|
||||
title: '集团化运营',
|
||||
description: '正式更名为诚裕集团，形成多元化业务体系',
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
year: '2025',
|
||||
title: '新里程碑',
|
||||
description: '管理资产突破 500 亿，员工规模超过 500 人',
|
||||
icon: Calendar,
|
||||
},
|
||||
];
|
||||
|
||||
// 核心价值观数据
|
||||
const coreValues = [
|
||||
{
|
||||
icon: Heart,
|
||||
title: '诚信为本',
|
||||
description: '诚信是企业发展的基石，我们始终坚守诚信底线，与客户、合作伙伴建立长期信任关系',
|
||||
color: 'from-red-500 to-red-600',
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: '创新驱动',
|
||||
description: '创新是企业发展的动力，我们持续投入研发，不断推出创新产品和服务',
|
||||
color: 'from-blue-500 to-blue-600',
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: '卓越品质',
|
||||
description: '品质是企业生存的根本，我们追求卓越，确保每一个项目都达到最高标准',
|
||||
color: 'from-yellow-500 to-yellow-600',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: '共赢合作',
|
||||
description: '合作是企业成功的关键，我们与客户、员工、合作伙伴实现互利共赢',
|
||||
color: 'from-green-500 to-green-600',
|
||||
},
|
||||
];
|
||||
|
||||
// 团队成员数据
|
||||
const teamMembers = [
|
||||
{
|
||||
name: '张明远',
|
||||
position: '董事长兼 CEO',
|
||||
bio: '毕业于清华大学金融系，拥有 20 年金融行业经验，曾任多家知名金融机构高管。',
|
||||
},
|
||||
{
|
||||
name: '李晓峰',
|
||||
position: '首席财务官 CFO',
|
||||
bio: '持有注册会计师资格，曾在四大会计师事务所工作 15 年，专业财务管理和资本运作专家。',
|
||||
},
|
||||
{
|
||||
name: '王建华',
|
||||
position: '首席技术官 CTO',
|
||||
bio: '计算机科学博士，曾在国内外知名科技公司担任技术负责人，拥有多项技术专利。',
|
||||
},
|
||||
{
|
||||
name: '陈静雅',
|
||||
position: '首席运营官 COO',
|
||||
bio: 'MBA 学位，拥有丰富的企业运营管理经验，擅长战略规划和流程优化。',
|
||||
},
|
||||
];
|
||||
|
||||
// 荣誉资质数据
|
||||
const honors = [
|
||||
{ name: '国家级高新技术企业认证', year: '2020' },
|
||||
{ name: '北京市优秀企业', year: '2021' },
|
||||
{ name: '中国最佳雇主品牌', year: '2022' },
|
||||
{ name: '金融科技创新奖', year: '2023' },
|
||||
{ name: '年度优秀企业', year: '2024' },
|
||||
{ name: 'ESG 最佳实践奖', year: '2025' },
|
||||
];
|
||||
|
||||
/**
|
||||
* About 组件 - 关于我们页面
|
||||
*/
|
||||
export const About: React.FC = () => {
|
||||
const timelineRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="min-h-screen bg-background"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
{/* 顶部导航 */}
|
||||
<Header />
|
||||
|
||||
{/* 主内容 */}
|
||||
<main>
|
||||
{/* 页面标题区域 */}
|
||||
<section className="pt-32 pb-16 bg-gradient-to-br from-primary to-primary-light">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
className="text-center text-white"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">
|
||||
关于诚裕集团
|
||||
</h1>
|
||||
<p className="text-xl text-white/80 max-w-3xl mx-auto">
|
||||
诚裕集团成立于 2010 年，是一家集科技研发、金融服务、产业投资于一体的综合性企业集团
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 公司简介 */}
|
||||
<section className="py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-primary-dark mb-6">
|
||||
公司简介
|
||||
</h2>
|
||||
<div className="space-y-6 text-gray-600 leading-relaxed">
|
||||
<p>
|
||||
<strong>{COMPANY_INFO.fullName}</strong>
|
||||
成立于 {COMPANY_INFO.established}，总部位于 {COMPANY_INFO.headquarters}。
|
||||
经过十余年的稳健发展，诚裕集团已形成了以金融服务、科技研发、产业投资为核心的多元化业务体系。
|
||||
</p>
|
||||
<p>
|
||||
集团秉承"诚信、创新、共赢"的核心价值观，致力于为客户创造最大价值。
|
||||
我们拥有一支经验丰富、专业高效的管理团队，汇聚了金融、科技、投资等领域的优秀人才。
|
||||
</p>
|
||||
<p>
|
||||
截至目前，诚裕集团已成功为超过 1000 家企业客户提供专业服务，
|
||||
管理资产规模突破 500 亿元人民币，业务范围覆盖全国主要城市。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 核心数据 */}
|
||||
<div className="mt-8 grid grid-cols-3 gap-6">
|
||||
<div className="text-center p-4 bg-primary/5 rounded-xl">
|
||||
<div className="text-2xl font-bold text-primary">15+</div>
|
||||
<div className="text-sm text-gray-600">年发展历程</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-accent/10 rounded-xl">
|
||||
<div className="text-2xl font-bold text-accent-dark">500+</div>
|
||||
<div className="text-sm text-gray-600">员工人数</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-green-100 rounded-xl">
|
||||
<div className="text-2xl font-bold text-green-700">1000+</div>
|
||||
<div className="text-sm text-gray-600">服务客户</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="relative"
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<div className="aspect-[4/3] rounded-2xl overflow-hidden bg-gradient-to-br from-primary to-primary-light shadow-xl">
|
||||
<div className="w-full h-full flex items-center justify-center text-white p-12 text-center">
|
||||
<div>
|
||||
<div className="text-6xl font-bold mb-4">诚裕集团</div>
|
||||
<div className="text-2xl opacity-80">诚信为本 · 裕及四方</div>
|
||||
<div className="mt-8 w-24 h-1 bg-accent mx-auto rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 装饰元素 */}
|
||||
<div className="absolute -bottom-6 -right-6 w-32 h-32 bg-accent/20 rounded-2xl -z-10" />
|
||||
<div className="absolute -top-6 -left-6 w-24 h-24 bg-primary/10 rounded-2xl -z-10" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 发展历程时间线 */}
|
||||
<section className="py-20 bg-white" ref={timelineRef}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
className="text-center mb-16"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-primary-dark mb-4">
|
||||
发展历程
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
十余年稳健发展，见证诚裕成长
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* 时间线 */}
|
||||
<div className="relative">
|
||||
{/* 中轴线 */}
|
||||
<div className="absolute left-1/2 -translate-x-1/2 w-0.5 h-full bg-gradient-to-b from-primary via-accent to-primary-light hidden md:block" />
|
||||
|
||||
{/* 时间线项目 */}
|
||||
<div className="space-y-12">
|
||||
{milestones.map((milestone, index) => (
|
||||
<motion.div
|
||||
key={milestone.year}
|
||||
className={`flex items-center gap-8 ${
|
||||
index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'
|
||||
}`}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1, duration: 0.5 }}
|
||||
>
|
||||
{/* 内容区域 */}
|
||||
<div className="flex-1 text-center md:text-left">
|
||||
<div
|
||||
className={`p-6 bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow ${
|
||||
index % 2 === 0 ? 'md:pr-12' : 'md:pl-12'
|
||||
}`}
|
||||
>
|
||||
<span className="inline-block px-3 py-1 bg-accent/20 text-accent-dark text-sm font-semibold rounded-full mb-3">
|
||||
{milestone.year}
|
||||
</span>
|
||||
<h3 className="text-xl font-semibold text-primary-dark mb-2">
|
||||
{milestone.title}
|
||||
</h3>
|
||||
<p className="text-gray-600">{milestone.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 中间图标 */}
|
||||
<div className="hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white shadow-lg z-10">
|
||||
<milestone.icon size={20} />
|
||||
</div>
|
||||
|
||||
{/* 空白区域 */}
|
||||
<div className="flex-1 hidden md:block" />
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 企业文化 */}
|
||||
<section className="py-20 bg-primary-dark text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
className="text-center mb-16"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-3xl font-bold mb-4">企业文化</h2>
|
||||
<p className="text-lg text-gray-300">
|
||||
核心价值观驱动企业发展
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{coreValues.map((value, index) => (
|
||||
<motion.div
|
||||
key={value.title}
|
||||
className="text-center p-6 rounded-2xl bg-white/5 hover:bg-white/10 transition-colors"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1, duration: 0.5 }}
|
||||
whileHover={{ y: -5 }}
|
||||
>
|
||||
<div
|
||||
className={`inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br ${value.color} text-white mb-5`}
|
||||
>
|
||||
<value.icon size={32} />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-3">{value.title}</h3>
|
||||
<p className="text-gray-300 text-sm leading-relaxed">
|
||||
{value.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 团队介绍 */}
|
||||
<section className="py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
className="text-center mb-16"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-primary-dark mb-4">
|
||||
管理团队
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
汇聚行业精英，共创企业未来
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{teamMembers.map((member, index) => (
|
||||
<motion.div
|
||||
key={member.name}
|
||||
className="text-center p-6 bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-lg transition-shadow"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1, duration: 0.5 }}
|
||||
whileHover={{ y: -5 }}
|
||||
>
|
||||
{/* 头像占位 */}
|
||||
<div className="w-24 h-24 mx-auto mb-4 rounded-full bg-gradient-to-br from-primary to-primary-light flex items-center justify-center text-white text-2xl font-bold">
|
||||
{member.name.charAt(0)}
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-primary-dark">
|
||||
{member.name}
|
||||
</h3>
|
||||
<p className="text-accent font-medium mb-3">{member.position}</p>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
{member.bio}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 资质荣誉 */}
|
||||
<section className="py-20 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
className="text-center mb-16"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-primary-dark mb-4">
|
||||
资质荣誉
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
行业认可，品质保证
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{honors.map((honor, index) => (
|
||||
<motion.div
|
||||
key={honor.name}
|
||||
className="flex items-center gap-4 p-5 bg-background rounded-xl hover:shadow-md transition-shadow"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1, duration: 0.5 }}
|
||||
whileHover={{ x: 5 }}
|
||||
>
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-lg bg-accent/20 flex items-center justify-center">
|
||||
<Award size={24} className="text-accent" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium text-primary-dark">
|
||||
{honor.name}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-500">获得年份：{honor.year}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* 页脚 */}
|
||||
<Footer />
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
557
src/pages/Contact.tsx
Normal file
557
src/pages/Contact.tsx
Normal file
@@ -0,0 +1,557 @@
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
MapPin,
|
||||
Phone,
|
||||
Mail,
|
||||
Clock,
|
||||
Send,
|
||||
User,
|
||||
MessageSquare,
|
||||
Building2,
|
||||
Briefcase,
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
} from 'lucide-react';
|
||||
import { Header } from '../components/Header';
|
||||
import { Footer } from '../components/Footer';
|
||||
import { COMPANY_INFO, CONTACT_INFO } from '../lib/constants';
|
||||
|
||||
/**
|
||||
* Contact 组件 - 联系我们页面
|
||||
*/
|
||||
|
||||
// 招聘信息数据
|
||||
const jobPositions = [
|
||||
{
|
||||
id: 1,
|
||||
title: '高级投资经理',
|
||||
department: '投资部',
|
||||
location: '北京',
|
||||
type: '全职',
|
||||
salary: '30K-50K/月',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Java 开发工程师',
|
||||
department: '技术部',
|
||||
location: '北京',
|
||||
type: '全职',
|
||||
salary: '25K-40K/月',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '财务顾问',
|
||||
department: '金融部',
|
||||
location: '上海',
|
||||
type: '全职',
|
||||
salary: '20K-35K/月',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '产品经理',
|
||||
department: '产品部',
|
||||
location: '北京',
|
||||
type: '全职',
|
||||
salary: '28K-45K/月',
|
||||
},
|
||||
];
|
||||
|
||||
// 表单状态类型
|
||||
interface ContactFormData {
|
||||
name: string;
|
||||
email: string;
|
||||
subject: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
interface FormErrors {
|
||||
name?: string;
|
||||
email?: string;
|
||||
subject?: string;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Contact 组件
|
||||
*/
|
||||
export const Contact: React.FC = () => {
|
||||
const [formData, setFormData] = useState<ContactFormData>({
|
||||
name: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
});
|
||||
const [errors, setErrors] = useState<FormErrors>({});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submitSuccess, setSubmitSuccess] = useState(false);
|
||||
|
||||
// 表单验证
|
||||
const validateForm = (): boolean => {
|
||||
const newErrors: FormErrors = {};
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
newErrors.name = '请输入您的姓名';
|
||||
}
|
||||
|
||||
if (!formData.email.trim()) {
|
||||
newErrors.email = '请输入您的邮箱';
|
||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
||||
newErrors.email = '请输入有效的邮箱地址';
|
||||
}
|
||||
|
||||
if (!formData.subject.trim()) {
|
||||
newErrors.subject = '请输入邮件主题';
|
||||
}
|
||||
|
||||
if (!formData.message.trim()) {
|
||||
newErrors.message = '请输入留言内容';
|
||||
} else if (formData.message.trim().length < 10) {
|
||||
newErrors.message = '留言内容至少需要 10 个字符';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
// 处理输入变化
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
// 清除对应字段的错误
|
||||
if (errors[name as keyof FormErrors]) {
|
||||
setErrors((prev) => ({ ...prev, [name]: undefined }));
|
||||
}
|
||||
};
|
||||
|
||||
// 处理表单提交
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
// 模拟表单提交
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
|
||||
setIsSubmitting(false);
|
||||
setSubmitSuccess(true);
|
||||
setFormData({ name: '', email: '', subject: '', message: '' });
|
||||
|
||||
// 3秒后重置成功状态
|
||||
setTimeout(() => setSubmitSuccess(false), 3000);
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="min-h-screen bg-background"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
{/* 顶部导航 */}
|
||||
<Header />
|
||||
|
||||
{/* 主内容 */}
|
||||
<main>
|
||||
{/* 页面标题 */}
|
||||
<section className="pt-32 pb-16 bg-gradient-to-br from-primary to-primary-light">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
className="text-center text-white"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">
|
||||
联系我们
|
||||
</h1>
|
||||
<p className="text-xl text-white/80 max-w-3xl mx-auto">
|
||||
诚挚期待与您合作，欢迎随时与我们联系
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 联系信息 */}
|
||||
<section className="py-16 -mt-8">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{CONTACT_INFO.map((info, index) => {
|
||||
const Icon = info.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={info.id}
|
||||
className="bg-white rounded-xl shadow-lg p-6 text-center hover:shadow-xl transition-shadow"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1, duration: 0.5 }}
|
||||
whileHover={{ y: -5 }}
|
||||
>
|
||||
<div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-accent/20 mb-4">
|
||||
<Icon size={28} className="text-accent" />
|
||||
</div>
|
||||
<h3 className="text-sm text-gray-500 mb-2">{info.title}</h3>
|
||||
<p className="font-medium text-primary-dark">{info.content}</p>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 联系表单和地图 */}
|
||||
<section className="py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid lg:grid-cols-2 gap-12">
|
||||
{/* 联系表单 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
|
||||
<h2 className="text-2xl font-bold text-primary-dark mb-2">
|
||||
发送留言
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-8">
|
||||
请填写以下表单，我们将尽快与您联系
|
||||
</p>
|
||||
|
||||
{/* 成功提示 */}
|
||||
{submitSuccess && (
|
||||
<motion.div
|
||||
className="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl flex items-center gap-3"
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
>
|
||||
<CheckCircle size={24} className="text-green-600" />
|
||||
<div>
|
||||
<p className="font-medium text-green-800">提交成功！</p>
|
||||
<p className="text-sm text-green-600">
|
||||
我们已收到您的留言，会尽快回复您。
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* 姓名 */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
姓名 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User
|
||||
size={20}
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
placeholder="请输入您的姓名"
|
||||
className={`w-full pl-10 pr-4 py-3 border rounded-lg focus:ring-2 focus:ring-primary/20 outline-none transition-all ${
|
||||
errors.name
|
||||
? 'border-red-300 focus:border-red-500'
|
||||
: 'border-gray-200 focus:border-primary'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
{errors.name && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 邮箱 */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
邮箱 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail
|
||||
size={20}
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
placeholder="请输入您的邮箱"
|
||||
className={`w-full pl-10 pr-4 py-3 border rounded-lg focus:ring-2 focus:ring-primary/20 outline-none transition-all ${
|
||||
errors.email
|
||||
? 'border-red-300 focus:border-red-500'
|
||||
: 'border-gray-200 focus:border-primary'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
{errors.email && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 主题 */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="subject"
|
||||
className="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
主题 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<MessageSquare
|
||||
size={20}
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
|
||||
/>
|
||||
<select
|
||||
id="subject"
|
||||
name="subject"
|
||||
value={formData.subject}
|
||||
onChange={handleInputChange}
|
||||
className={`w-full pl-10 pr-4 py-3 border rounded-lg focus:ring-2 focus:ring-primary/20 outline-none transition-all appearance-none bg-white ${
|
||||
errors.subject
|
||||
? 'border-red-300 focus:border-red-500'
|
||||
: 'border-gray-200 focus:border-primary'
|
||||
}`}
|
||||
>
|
||||
<option value="">请选择主题</option>
|
||||
<option value="业务咨询">业务咨询</option>
|
||||
<option value="投资合作">投资合作</option>
|
||||
<option value="技术支持">技术支持</option>
|
||||
<option value="媒体合作">媒体合作</option>
|
||||
<option value="其他">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
{errors.subject && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.subject}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 留言内容 */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="message"
|
||||
className="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
留言内容 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
rows={5}
|
||||
placeholder="请详细描述您的需求..."
|
||||
className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-primary/20 outline-none transition-all resize-none ${
|
||||
errors.message
|
||||
? 'border-red-300 focus:border-red-500'
|
||||
: 'border-gray-200 focus:border-primary'
|
||||
}`}
|
||||
/>
|
||||
{errors.message && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 提交按钮 */}
|
||||
<motion.button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className={`w-full py-4 rounded-lg font-medium text-white transition-all flex items-center justify-center gap-2 ${
|
||||
isSubmitting
|
||||
? 'bg-gray-400 cursor-not-allowed'
|
||||
: 'bg-primary hover:bg-primary-light'
|
||||
}`}
|
||||
whileHover={!isSubmitting ? { scale: 1.02 } : {}}
|
||||
whileTap={!isSubmitting ? { scale: 0.98 } : {}}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
提交中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send size={20} />
|
||||
提交留言
|
||||
</>
|
||||
)}
|
||||
</motion.button>
|
||||
</form>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 地图和地址信息 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
{/* 地图占位 */}
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-2 mb-6">
|
||||
<div className="aspect-[4/3] rounded-xl bg-gradient-to-br from-primary/10 to-primary-light/10 flex flex-col items-center justify-center">
|
||||
<MapPin size={48} className="text-primary mb-4" />
|
||||
<p className="text-primary-dark font-medium mb-2">
|
||||
诚裕集团总部
|
||||
</p>
|
||||
<p className="text-gray-500 text-sm text-center px-8">
|
||||
北京市朝阳区建国路88号诚裕大厦
|
||||
</p>
|
||||
<motion.button
|
||||
className="mt-4 px-6 py-2 bg-primary text-white rounded-lg text-sm"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
在地图中查看
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 公司详细信息 */}
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
|
||||
<h3 className="text-lg font-semibold text-primary-dark mb-4">
|
||||
公司信息
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<MapPin size={20} className="text-accent mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">总部地址</p>
|
||||
<p className="text-primary-dark">
|
||||
{COMPANY_INFO.headquarters}诚裕大厦
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Phone size={20} className="text-accent mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">服务热线</p>
|
||||
<p className="text-primary-dark">{COMPANY_INFO.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Mail size={20} className="text-accent mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">商务邮箱</p>
|
||||
<p className="text-primary-dark">{COMPANY_INFO.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Clock size={20} className="text-accent mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">工作时间</p>
|
||||
<p className="text-primary-dark">{COMPANY_INFO.workingHours}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 招聘信息 */}
|
||||
<section className="py-20 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
className="text-center mb-12"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-primary-dark mb-4">
|
||||
加入诚裕
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
我们正在寻找优秀的人才，与我们共创未来
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{jobPositions.map((job, index) => (
|
||||
<motion.div
|
||||
key={job.id}
|
||||
className="p-6 bg-background rounded-xl border border-gray-100 hover:shadow-md transition-shadow"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1, duration: 0.5 }}
|
||||
whileHover={{ y: -3 }}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-primary-dark mb-1">
|
||||
{job.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 flex items-center gap-4">
|
||||
<span className="flex items-center gap-1">
|
||||
<Building2 size={14} />
|
||||
{job.department}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<MapPin size={14} />
|
||||
{job.location}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<span className="px-3 py-1 bg-accent/20 text-accent-dark text-sm font-medium rounded-full">
|
||||
{job.salary}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between pt-4 border-t border-gray-100">
|
||||
<span className="text-sm text-gray-500">{job.type}</span>
|
||||
<motion.button
|
||||
className="flex items-center gap-1 text-primary font-medium text-sm hover:text-primary-light"
|
||||
whileHover={{ x: 3 }}
|
||||
>
|
||||
了解详情
|
||||
<ArrowRight size={16} />
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="text-center mt-8"
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<motion.button
|
||||
className="inline-flex items-center gap-2 px-8 py-3 border-2 border-primary text-primary font-medium rounded-lg hover:bg-primary hover:text-white transition-colors"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Briefcase size={20} />
|
||||
查看全部职位
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* 页脚 */}
|
||||
<Footer />
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
@@ -1,116 +1,45 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { Header } from '../components/Header'
|
||||
import { Footer } from '../components/Footer'
|
||||
import { PostCard } from '../components/PostCard'
|
||||
import { PostCardSkeleton } from '../components/PostCardSkeleton'
|
||||
import { Posts } from '../clientsdk/sdk.gen'
|
||||
import { createClient } from '../clientsdk/client'
|
||||
import { customQuerySerializer } from '../clientsdk/querySerializer'
|
||||
import { TENANT_SLUG, TENANT_API_KEY, API_URL } from '../config'
|
||||
|
||||
const client = createClient({
|
||||
baseUrl: API_URL,
|
||||
querySerializer: customQuerySerializer,
|
||||
headers: {
|
||||
'X-Tenant-Slug': TENANT_SLUG,
|
||||
'X-API-Key': TENANT_API_KEY,
|
||||
},
|
||||
})
|
||||
import { motion } from 'framer-motion';
|
||||
import { Header } from '../components/Header';
|
||||
import { Footer } from '../components/Footer';
|
||||
import { Hero } from '../components/Hero';
|
||||
import { AboutSection } from '../components/Home/AboutSection';
|
||||
import { ServicesSection } from '../components/Home/ServicesSection';
|
||||
import { NewsSection } from '../components/Home/NewsSection';
|
||||
|
||||
/**
|
||||
* Home 组件 - 企业官网首页
|
||||
*/
|
||||
export const Home: React.FC = () => {
|
||||
const [posts, setPosts] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPosts = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
const response = await Posts.listPosts({
|
||||
client,
|
||||
query: {
|
||||
limit: 10,
|
||||
sort: '-createdAt',
|
||||
},
|
||||
})
|
||||
|
||||
setPosts((response as any)?.data?.docs || [])
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '加载失败')
|
||||
console.error('获取文章失败:', err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchPosts()
|
||||
}, [])
|
||||
|
||||
const stripHtml = (html: string): string => {
|
||||
const tmp = document.createElement('div')
|
||||
tmp.innerHTML = html
|
||||
return tmp.textContent || tmp.innerText || ''
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string): string => {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
const getCategoryTitle = (post: any): string | undefined => {
|
||||
// categories is an array, get the first one
|
||||
return post.categories?.[0]?.title
|
||||
}
|
||||
|
||||
const handlePostClick = (slug: string) => {
|
||||
window.location.href = `/posts/${slug}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<motion.div
|
||||
className="min-h-screen bg-background"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
{/* 顶部导航栏 */}
|
||||
<Header />
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<section className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-2">📚 最新文章</h2>
|
||||
<p className="text-gray-600">探索我们的最新内容</p>
|
||||
</section>
|
||||
{/* 主内容区域 */}
|
||||
<main>
|
||||
{/* Hero 区域 - 首页大图 */}
|
||||
<Hero />
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
|
||||
<strong>错误：</strong> {error}
|
||||
</div>
|
||||
)}
|
||||
{/* 关于我们区域 */}
|
||||
<AboutSection />
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{loading
|
||||
? Array.from({ length: 6 }).map((_, i) => <PostCardSkeleton key={i} />)
|
||||
: posts.map((post) => (
|
||||
<PostCard
|
||||
key={post.id}
|
||||
title={post.title}
|
||||
excerpt={stripHtml(post.content_html || post.content?.root?.children?.[0]?.children?.[0]?.text || post.title)}
|
||||
category={getCategoryTitle(post)}
|
||||
date={formatDate(post.createdAt)}
|
||||
onClick={() => handlePostClick(post.slug)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{/* 核心业务区域 */}
|
||||
<ServicesSection />
|
||||
|
||||
{!loading && posts.length === 0 && !error && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-500 text-lg">暂无文章</p>
|
||||
</div>
|
||||
)}
|
||||
{/* 新闻资讯区域 */}
|
||||
<NewsSection />
|
||||
</main>
|
||||
|
||||
{/* 页脚 */}
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
||||
524
src/pages/News.tsx
Normal file
524
src/pages/News.tsx
Normal file
@@ -0,0 +1,524 @@
|
||||
import { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Calendar,
|
||||
Eye,
|
||||
ArrowRight,
|
||||
Clock,
|
||||
TrendingUp,
|
||||
Tag,
|
||||
} from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Header } from '../components/Header';
|
||||
import { Footer } from '../components/Footer';
|
||||
import { formatDate } from '../lib/utils';
|
||||
import { NEWS_CATEGORIES } from '../lib/constants';
|
||||
|
||||
// 模拟新闻数据
|
||||
const allNews = [
|
||||
{
|
||||
id: 1,
|
||||
title: '诚裕集团荣获"2025年度优秀企业"称号',
|
||||
excerpt: '在近日举办的年度企业评选活动中，诚裕集团凭借其卓越的经营业绩和社会责任表现，荣获"2025年度优秀企业"称号。这一荣誉是对诚裕集团多年来坚持创新发展的肯定。',
|
||||
category: 'company',
|
||||
date: '2025-12-20',
|
||||
readCount: 1256,
|
||||
image: null,
|
||||
isHot: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '金融科技创新论坛圆满落幕，诚裕集团分享行业洞察',
|
||||
excerpt: '诚裕集团受邀参加金融科技创新论坛，与行业专家共同探讨金融科技发展趋势，分享公司在数字化转型方面的实践经验。与会嘉宾对诚裕集团的创新成果给予了高度评价。',
|
||||
category: 'industry',
|
||||
date: '2025-12-15',
|
||||
readCount: 892,
|
||||
image: null,
|
||||
isHot: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '诚裕集团完成新一轮战略融资，估值突破百亿',
|
||||
excerpt: '诚裕集团宣布完成新一轮战略融资，本轮融资由知名投资机构领投，估值突破百亿元人民币，标志着公司发展进入新阶段。此轮融资将用于加大技术研发和市场拓展力度。',
|
||||
category: 'company',
|
||||
date: '2025-12-10',
|
||||
readCount: 2341,
|
||||
image: null,
|
||||
isHot: true,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '诚裕集团发布2025年度社会责任报告',
|
||||
excerpt: '诚裕集团正式发布《2025年度社会责任报告》，全面展示了公司在环境保护、社会公益、公司治理等方面的实践成果。报告显示，诚裕集团在ESG领域取得了显著进步。',
|
||||
category: 'company',
|
||||
date: '2025-12-05',
|
||||
readCount: 567,
|
||||
image: null,
|
||||
isHot: false,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '人工智能赋能金融服务行业论坛成功举办',
|
||||
excerpt: '由诚裕集团主办的人工智能赋能金融服务行业论坛在北京成功举办。来自金融机构、科技公司、学术机构的专家学者共同探讨AI技术在金融服务领域的应用前景。',
|
||||
category: 'industry',
|
||||
date: '2025-11-28',
|
||||
readCount: 743,
|
||||
image: null,
|
||||
isHot: false,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '诚裕集团获得国家级高新技术企业认证',
|
||||
excerpt: '诚裕集团正式获得国家级高新技术企业认证，这标志着集团在技术创新和研发投入方面获得了国家层面的认可。诚裕集团将继续加大研发投入，提升自主创新能力。',
|
||||
category: 'achievement',
|
||||
date: '2025-11-20',
|
||||
readCount: 1089,
|
||||
image: null,
|
||||
isHot: true,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: '诚裕集团与清华大学签署战略合作协议',
|
||||
excerpt: '诚裕集团与清华大学正式签署战略合作协议，双方将在人才培养、技术研发、成果转化等方面开展深度合作。这一合作将为诚裕集团的创新发展提供强大的智力支持。',
|
||||
category: 'company',
|
||||
date: '2025-11-15',
|
||||
readCount: 621,
|
||||
image: null,
|
||||
isHot: false,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: '数字化转型趋势报告发布，诚裕集团引领行业发展',
|
||||
excerpt: '诚裕集团研究院发布《2025企业数字化转型趋势报告》，深入分析了当前数字化转型的发展态势和未来趋势。报告指出，数字化转型已成为企业提升竞争力的关键路径。',
|
||||
category: 'industry',
|
||||
date: '2025-11-08',
|
||||
readCount: 456,
|
||||
image: null,
|
||||
isHot: false,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: '诚裕集团获评"最佳雇主品牌"荣誉称号',
|
||||
excerpt: '在2025年度人力资源管理峰会上，诚裕集团凭借其在人才培养、员工发展、企业文化等方面的卓越表现，荣获"最佳雇主品牌"荣誉称号。这一荣誉体现了员工对诚裕集团的高度认可。',
|
||||
category: 'achievement',
|
||||
date: '2025-11-01',
|
||||
readCount: 389,
|
||||
image: null,
|
||||
isHot: false,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: '诚裕集团启动"绿色金融"专项计划',
|
||||
excerpt: '诚裕集团正式宣布启动"绿色金融"专项计划，计划在未来三年内投入100亿元支持绿色产业发展。这一计划的推出，体现了诚裕集团积极践行可持续发展理念的决心。',
|
||||
category: 'company',
|
||||
date: '2025-10-25',
|
||||
readCount: 723,
|
||||
image: null,
|
||||
isHot: false,
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: '产业投资基金发展趋势研讨会在京举行',
|
||||
excerpt: '由诚裕集团主办的产业投资基金发展趋势研讨会在北京举行。来自监管部门、投资机构、产业龙头企业的代表就产业投资基金的发展方向和投资策略进行了深入探讨。',
|
||||
category: 'industry',
|
||||
date: '2025-10-18',
|
||||
readCount: 312,
|
||||
image: null,
|
||||
isHot: false,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: '诚裕集团入选"北京民营企业百强"榜单',
|
||||
excerpt: '北京市工商联发布2025年度北京民营企业百强榜单，诚裕集团凭借优异的经营业绩和创新能力，成功入选该榜单。这一荣誉是对诚裕集团综合实力的又一次肯定。',
|
||||
category: 'achievement',
|
||||
date: '2025-10-10',
|
||||
readCount: 567,
|
||||
image: null,
|
||||
isHot: false,
|
||||
},
|
||||
];
|
||||
|
||||
// 新闻分类映射
|
||||
const categoryMap: Record<string, { label: string; color: string }> = {
|
||||
all: { label: '全部', color: 'bg-primary text-white' },
|
||||
company: { label: '公司动态', color: 'bg-primary/10 text-primary' },
|
||||
industry: { label: '行业资讯', color: 'bg-accent/20 text-accent-dark' },
|
||||
achievement: { label: '荣誉资质', color: 'bg-green-100 text-green-700' },
|
||||
};
|
||||
|
||||
// 每页新闻数量
|
||||
const ITEMS_PER_PAGE = 6;
|
||||
|
||||
/**
|
||||
* 新闻卡片组件
|
||||
*/
|
||||
const NewsCard: React.FC<{ news: typeof allNews[0]; index: number }> = ({
|
||||
news,
|
||||
index,
|
||||
}) => {
|
||||
const category = categoryMap[news.category] || categoryMap.company;
|
||||
|
||||
return (
|
||||
<motion.article
|
||||
className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-300 group"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ delay: index * 0.05, duration: 0.4 }}
|
||||
whileHover={{ y: -5 }}
|
||||
>
|
||||
{/* 图片区域 */}
|
||||
<Link to={`/news/${news.id}`} className="block aspect-[16/9] bg-gradient-to-br from-primary/5 to-primary-light/10 relative overflow-hidden">
|
||||
<div className="absolute inset-0 flex items-center justify-center text-primary/20">
|
||||
<Tag size={48} />
|
||||
</div>
|
||||
{/* 分类标签 */}
|
||||
<span className={`absolute top-4 left-4 px-3 py-1 text-xs font-medium rounded-full ${category.color}`}>
|
||||
{category.label}
|
||||
</span>
|
||||
{/* 热门标签 */}
|
||||
{news.isHot && (
|
||||
<span className="absolute top-4 right-4 px-3 py-1 text-xs font-medium bg-red-500 text-white rounded-full flex items-center gap-1">
|
||||
<TrendingUp size={12} />
|
||||
热门
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
{/* 内容区域 */}
|
||||
<div className="p-6">
|
||||
{/* 元信息 */}
|
||||
<div className="flex items-center gap-4 text-sm text-gray-500 mb-3">
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar size={14} />
|
||||
<time dateTime={news.date}>{formatDate(news.date, 'YYYY年MM月DD日')}</time>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Eye size={14} />
|
||||
<span>{news.readCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 标题 */}
|
||||
<Link to={`/news/${news.id}`}>
|
||||
<h3 className="text-lg font-semibold text-primary-dark mb-3 line-clamp-2 group-hover:text-primary transition-colors">
|
||||
{news.title}
|
||||
</h3>
|
||||
</Link>
|
||||
|
||||
{/* 摘要 */}
|
||||
<p className="text-gray-600 text-sm leading-relaxed line-clamp-2 mb-4">
|
||||
{news.excerpt}
|
||||
</p>
|
||||
|
||||
{/* 阅读更多 */}
|
||||
<Link
|
||||
to={`/news/${news.id}`}
|
||||
className="inline-flex items-center gap-2 text-sm font-medium text-primary group-hover:text-primary-light transition-colors"
|
||||
>
|
||||
阅读全文
|
||||
<motion.span
|
||||
initial={{ x: 0 }}
|
||||
whileHover={{ x: 5 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<ArrowRight size={16} />
|
||||
</motion.span>
|
||||
</Link>
|
||||
</div>
|
||||
</motion.article>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 侧边栏热门新闻组件
|
||||
*/
|
||||
const HotNewsWidget: React.FC<{ news: typeof allNews[0]; rank: number }> = ({
|
||||
news,
|
||||
rank,
|
||||
}) => (
|
||||
<Link
|
||||
to={`/news/${news.id}`}
|
||||
className="flex items-start gap-4 p-4 bg-background rounded-xl hover:bg-white hover:shadow-sm transition-all group"
|
||||
>
|
||||
<span className="flex-shrink-0 w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary font-bold text-sm">
|
||||
{rank}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="text-sm font-medium text-primary-dark mb-1 line-clamp-2 group-hover:text-primary transition-colors">
|
||||
{news.title}
|
||||
</h4>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500">
|
||||
<span>{formatDate(news.date, 'YYYY-MM-DD')}</span>
|
||||
<span>·</span>
|
||||
<span>{news.readCount} 阅读</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
|
||||
/**
|
||||
* 分页组件
|
||||
*/
|
||||
const Pagination: React.FC<{
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
onPageChange: (page: number) => void;
|
||||
}> = ({ currentPage, totalPages, onPageChange }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-center gap-2 mt-12">
|
||||
{/* 上一页按钮 */}
|
||||
<motion.button
|
||||
onClick={() => onPageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
上一页
|
||||
</motion.button>
|
||||
|
||||
{/* 页码 */}
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||
<motion.button
|
||||
key={page}
|
||||
onClick={() => onPageChange(page)}
|
||||
className={`w-10 h-10 text-sm font-medium rounded-lg transition-colors ${
|
||||
currentPage === page
|
||||
? 'bg-primary text-white'
|
||||
: 'text-gray-600 bg-white border border-gray-200 hover:bg-gray-50'
|
||||
}`}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
{page}
|
||||
</motion.button>
|
||||
))}
|
||||
|
||||
{/* 下一页按钮 */}
|
||||
<motion.button
|
||||
onClick={() => onPageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
下一页
|
||||
</motion.button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* News 组件 - 新闻资讯页面
|
||||
*/
|
||||
export const News: React.FC = () => {
|
||||
const [activeCategory, setActiveCategory] = useState('all');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
// 根据分类筛选新闻
|
||||
const filteredNews =
|
||||
activeCategory === 'all'
|
||||
? allNews
|
||||
: allNews.filter((news) => news.category === activeCategory);
|
||||
|
||||
// 计算分页
|
||||
const totalPages = Math.ceil(filteredNews.length / ITEMS_PER_PAGE);
|
||||
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
||||
const currentNews = filteredNews.slice(startIndex, startIndex + ITEMS_PER_PAGE);
|
||||
|
||||
// 获取热门新闻 TOP 5
|
||||
const hotNews = allNews
|
||||
.filter((news) => news.isHot)
|
||||
.sort((a, b) => b.readCount - a.readCount)
|
||||
.slice(0, 5);
|
||||
|
||||
// 切换分类时重置分页
|
||||
const handleCategoryChange = (category: string) => {
|
||||
setActiveCategory(category);
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="min-h-screen bg-background"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
{/* 顶部导航 */}
|
||||
<Header />
|
||||
|
||||
{/* 主内容 */}
|
||||
<main>
|
||||
{/* 页面标题 */}
|
||||
<section className="pt-32 pb-16 bg-gradient-to-br from-primary to-primary-light">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
className="text-center text-white"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">
|
||||
新闻资讯
|
||||
</h1>
|
||||
<p className="text-xl text-white/80 max-w-3xl mx-auto">
|
||||
了解诚裕集团最新动态和行业资讯
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 新闻内容区域 */}
|
||||
<section className="py-12">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid lg:grid-cols-3 gap-8">
|
||||
{/* 左侧新闻列表 */}
|
||||
<div className="lg:col-span-2">
|
||||
{/* 分类筛选 */}
|
||||
<motion.div
|
||||
className="flex flex-wrap gap-2 mb-8"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
{NEWS_CATEGORIES.map((category) => (
|
||||
<motion.button
|
||||
key={category.id}
|
||||
onClick={() => handleCategoryChange(category.id)}
|
||||
className={`px-5 py-2 text-sm font-medium rounded-lg transition-all ${
|
||||
activeCategory === category.id
|
||||
? 'bg-primary text-white shadow-lg shadow-primary/25'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-50 border border-gray-200'
|
||||
}`}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
{category.label}
|
||||
</motion.button>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* 新闻数量提示 */}
|
||||
<motion.p
|
||||
className="text-sm text-gray-500 mb-6"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
共 <span className="font-medium text-primary">{filteredNews.length}</span> 条新闻
|
||||
</motion.p>
|
||||
|
||||
{/* 新闻列表 */}
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={`${activeCategory}-${currentPage}`}
|
||||
className="grid sm:grid-cols-2 gap-6"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{currentNews.map((news, index) => (
|
||||
<NewsCard key={news.id} news={news} index={index} />
|
||||
))}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
{/* 空状态 */}
|
||||
{currentNews.length === 0 && (
|
||||
<motion.div
|
||||
className="text-center py-16"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
>
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
|
||||
<Clock size={32} className="text-gray-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-600 mb-2">
|
||||
暂无新闻
|
||||
</h3>
|
||||
<p className="text-gray-400">
|
||||
该分类下暂无新闻，请选择其他分类
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* 分页 */}
|
||||
{totalPages > 1 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={setCurrentPage}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 右侧侧边栏 */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="sticky top-24 space-y-8">
|
||||
{/* 热门新闻 */}
|
||||
<motion.div
|
||||
className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="p-2 bg-red-100 rounded-lg">
|
||||
<TrendingUp size={20} className="text-red-500" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-primary-dark">
|
||||
热门新闻
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{hotNews.map((news, index) => (
|
||||
<HotNewsWidget key={news.id} news={news} rank={index + 1} />
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 关注我们 */}
|
||||
<motion.div
|
||||
className="bg-gradient-to-br from-primary to-primary-light rounded-2xl p-6 text-white"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
>
|
||||
<h3 className="text-lg font-semibold mb-4">关注我们</h3>
|
||||
<p className="text-white/80 text-sm mb-4">
|
||||
第一时间获取最新企业动态和行业资讯
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<motion.button
|
||||
className="flex-1 py-2 bg-white/20 rounded-lg text-sm font-medium hover:bg-white/30 transition-colors"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
微信公众号
|
||||
</motion.button>
|
||||
<motion.button
|
||||
className="flex-1 py-2 bg-white/20 rounded-lg text-sm font-medium hover:bg-white/30 transition-colors"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
官方微博
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* 页脚 */}
|
||||
<Footer />
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default News;
|
||||
549
src/pages/Services.tsx
Normal file
549
src/pages/Services.tsx
Normal file
@@ -0,0 +1,549 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
TrendingUp,
|
||||
Cpu,
|
||||
Building2,
|
||||
Briefcase,
|
||||
CheckCircle,
|
||||
Target,
|
||||
BarChart3,
|
||||
Shield,
|
||||
Lightbulb,
|
||||
Rocket,
|
||||
Handshake,
|
||||
PieChart,
|
||||
Globe,
|
||||
Users,
|
||||
Zap,
|
||||
} from 'lucide-react';
|
||||
import { Header } from '../components/Header';
|
||||
import { Footer } from '../components/Footer';
|
||||
import { SERVICES } from '../lib/constants';
|
||||
|
||||
/**
|
||||
* Services 组件 - 产品服务页面
|
||||
*/
|
||||
|
||||
// 详细服务数据
|
||||
const serviceDetails = {
|
||||
finance: {
|
||||
description: '我们的金融服务涵盖资产配置、投资顾问、风险管理等全方位金融解决方案，帮助客户实现财富稳健增长。',
|
||||
features: [
|
||||
{ icon: PieChart, title: '资产配置', desc: '根据客户风险偏好和投资目标，提供个性化的资产配置方案' },
|
||||
{ icon: TrendingUp, title: '投资顾问', desc: '专业投资顾问团队，提供一对一的投资咨询和指导服务' },
|
||||
{ icon: Shield, title: '风险管理', desc: '完善的风险控制体系，确保投资安全可控' },
|
||||
{ icon: BarChart3, title: '业绩报告', desc: '定期提供详细的业绩报告和分析，让客户清晰了解投资状况' },
|
||||
],
|
||||
process: [
|
||||
{ step: '01', title: '需求沟通', desc: '了解客户投资目标和风险偏好' },
|
||||
{ step: '02', title: '方案设计', desc: '制定个性化资产配置方案' },
|
||||
{ step: '03', title: '投资执行', desc: '按照方案进行投资操作' },
|
||||
{ step: '04', title: '持续跟踪', desc: '定期调整和优化投资组合' },
|
||||
],
|
||||
},
|
||||
tech: {
|
||||
description: '我们聚焦人工智能、大数据、云计算等前沿技术，为企业提供全方位的数字化转型解决方案。',
|
||||
features: [
|
||||
{ icon: Cpu, title: 'AI 解决方案', desc: '利用人工智能技术，帮助企业实现智能化升级' },
|
||||
{ icon: Lightbulb, title: '大数据分析', desc: '深度挖掘数据价值，提供决策支持' },
|
||||
{ icon: Zap, title: '云服务', desc: '为企业提供稳定、高效的云计算服务' },
|
||||
{ icon: Rocket, title: '产品研发', desc: '定制化软件产品开发和创新解决方案' },
|
||||
],
|
||||
process: [
|
||||
{ step: '01', title: '需求分析', desc: '深入了解企业数字化需求' },
|
||||
{ step: '02', title: '方案规划', desc: '制定数字化转型路线图' },
|
||||
{ step: '03', title: '开发实施', desc: '按照方案进行系统开发和部署' },
|
||||
{ step: '04', title: '运维支持', desc: '提供持续的技术支持和维护服务' },
|
||||
],
|
||||
},
|
||||
investment: {
|
||||
description: '我们专注于新兴产业投资，通过战略投资推动产业升级，为投资者创造丰厚回报。',
|
||||
features: [
|
||||
{ icon: Target, title: '股权投资', desc: '聚焦高成长性企业，把握产业投资机会' },
|
||||
{ icon: Building2, title: '产业基金', desc: '设立专项产业基金，支持重点产业发展' },
|
||||
{ icon: Handshake, title: '并购重组', desc: '协助企业进行并购整合，实现规模扩张' },
|
||||
{ icon: Globe, title: '跨境投资', desc: '布局全球市场，寻求国际投资机会' },
|
||||
],
|
||||
process: [
|
||||
{ step: '01', title: '项目筛选', desc: '严格筛选优质投资项目' },
|
||||
{ step: '02', title: '尽职调查', desc: '深入调研项目基本面' },
|
||||
{ step: '03', title: '投资决策', desc: '专业评审委员会决策' },
|
||||
{ step: '04', title: '投后管理', desc: '提供增值服务，助力企业成长' },
|
||||
],
|
||||
},
|
||||
consulting: {
|
||||
description: '我们为企业提供战略规划、运营优化、风险管理等专业咨询服务，助力企业持续发展。',
|
||||
features: [
|
||||
{ icon: Target, title: '战略规划', desc: '帮助企业制定长期发展战略' },
|
||||
{ icon: Users, title: '管理咨询', desc: '优化组织架构和业务流程' },
|
||||
{ icon: BarChart3, title: '财务咨询', desc: '提供财务规划和优化建议' },
|
||||
{ icon: Shield, title: '风险咨询', desc: '识别和控制企业经营风险' },
|
||||
],
|
||||
process: [
|
||||
{ step: '01', title: '现状诊断', desc: '全面评估企业现状' },
|
||||
{ step: '02', title: '问题分析', desc: '深入分析核心问题' },
|
||||
{ step: '03', title: '方案设计', desc: '制定针对性解决方案' },
|
||||
{ step: '04', title: '落地实施', desc: '协助方案落地和效果跟踪' },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
// 成功案例数据
|
||||
const cases = [
|
||||
{
|
||||
id: 1,
|
||||
title: '某大型制造企业数字化转型',
|
||||
category: 'tech',
|
||||
description: '帮助某大型制造企业完成全面的数字化转型，实现生产效率提升 30%，成本降低 20%。',
|
||||
result: ['生产效率提升 30%', '成本降低 20%', '库存周转率提升 40%'],
|
||||
image: null,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '新兴产业基金设立与运营',
|
||||
category: 'investment',
|
||||
description: '为某地方政府设立 50 亿元新兴产业投资基金，成功投资 20 余个优质项目。',
|
||||
result: ['基金规模 50 亿元', '投资项目 20+', '平均回报率 25%'],
|
||||
image: null,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '企业战略重组咨询项目',
|
||||
category: 'consulting',
|
||||
description: '为某上市公司提供战略重组咨询服务，成功完成业务整合，实现市值增长 50%。',
|
||||
result: ['市值增长 50%', '完成 3 家公司整合', '营收增长 35%'],
|
||||
image: null,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '高净值客户财富管理',
|
||||
category: 'finance',
|
||||
description: '为某高净值客户提供全方位的财富管理服务，5 年累计收益达到 120%。',
|
||||
result: ['累计收益 120%', '资产规模增长 80%', '零重大风险事件'],
|
||||
image: null,
|
||||
},
|
||||
];
|
||||
|
||||
// 合作伙伴数据
|
||||
const partners = [
|
||||
{ name: '中国银行', industry: '金融' },
|
||||
{ name: '华为技术', industry: '科技' },
|
||||
{ name: '中信证券', industry: '金融' },
|
||||
{ name: '阿里巴巴', industry: '科技' },
|
||||
{ name: '招商银行', industry: '金融' },
|
||||
{ name: '腾讯云', industry: '科技' },
|
||||
{ name: '建设银行', industry: '金融' },
|
||||
{ name: '字节跳动', industry: '科技' },
|
||||
];
|
||||
|
||||
// 分类标签
|
||||
const categories = [
|
||||
{ id: 'all', label: '全部' },
|
||||
{ id: 'finance', label: '金融服务' },
|
||||
{ id: 'tech', label: '科技研发' },
|
||||
{ id: 'investment', label: '产业投资' },
|
||||
{ id: 'consulting', label: '咨询服务' },
|
||||
];
|
||||
|
||||
/**
|
||||
* 成功案例卡片组件
|
||||
*/
|
||||
const CaseCard: React.FC<{ case: typeof cases[0]; index: number }> = ({ case: caseItem, index }) => (
|
||||
<motion.div
|
||||
className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition-shadow"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1, duration: 0.5 }}
|
||||
whileHover={{ y: -5 }}
|
||||
>
|
||||
{/* 图片占位 */}
|
||||
<div className="aspect-[16/9] bg-gradient-to-br from-primary/5 to-primary-light/10 flex items-center justify-center">
|
||||
<div className="text-primary/20">
|
||||
<Rocket size={48} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<span className="inline-block px-3 py-1 text-xs font-medium bg-accent/20 text-accent-dark rounded-full mb-3">
|
||||
{categories.find(c => c.id === caseItem.category)?.label}
|
||||
</span>
|
||||
<h3 className="text-xl font-semibold text-primary-dark mb-3">
|
||||
{caseItem.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm mb-4">{caseItem.description}</p>
|
||||
<div className="space-y-2">
|
||||
{caseItem.result.map((result, i) => (
|
||||
<div key={i} className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<CheckCircle size={14} className="text-accent flex-shrink-0" />
|
||||
{result}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
/**
|
||||
* Services 组件
|
||||
*/
|
||||
export const Services: React.FC = () => {
|
||||
const [activeCategory, setActiveCategory] = useState('all');
|
||||
|
||||
const filteredCases = activeCategory === 'all'
|
||||
? cases
|
||||
: cases.filter(c => c.category === activeCategory);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="min-h-screen bg-background"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
{/* 顶部导航 */}
|
||||
<Header />
|
||||
|
||||
{/* 主内容 */}
|
||||
<main>
|
||||
{/* 页面标题 */}
|
||||
<section className="pt-32 pb-16 bg-gradient-to-br from-primary to-primary-light">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
className="text-center text-white"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">
|
||||
产品服务
|
||||
</h1>
|
||||
<p className="text-xl text-white/80 max-w-3xl mx-auto">
|
||||
为客户提供全方位的专业服务解决方案
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 服务概览 */}
|
||||
<section className="py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
className="text-center mb-16"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-primary-dark mb-4">
|
||||
核心业务板块
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
四大核心业务，构建全方位服务体系
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* 服务卡片 */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{SERVICES.map((service, index) => {
|
||||
const iconMap: Record<string, React.ComponentType<{ size?: number; className?: string }>> = {
|
||||
TrendingUp,
|
||||
Cpu,
|
||||
Building2,
|
||||
Briefcase,
|
||||
};
|
||||
const Icon = iconMap[service.icon] || TrendingUp;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={service.id}
|
||||
className="group p-8 bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-lg transition-all duration-300"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1, duration: 0.5 }}
|
||||
whileHover={{ y: -8 }}
|
||||
>
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-primary-light text-white mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<Icon size={32} />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-primary-dark mb-4">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed mb-6">
|
||||
{service.description}
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
{service.features.map((feature, i) => (
|
||||
<li key={i} className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<CheckCircle size={14} className="text-accent" />
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 详细服务介绍 - 使用 Tab 切换 */}
|
||||
<section className="py-20 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
className="text-center mb-16"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-primary-dark mb-4">
|
||||
服务详情
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
深入了解我们的专业服务
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* 使用静态展示代替 Tab - 展示金融服务 */}
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center mb-20">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<span className="inline-block px-4 py-1 bg-accent/20 text-accent-dark text-sm font-semibold rounded-full mb-4">
|
||||
金融服务
|
||||
</span>
|
||||
<h3 className="text-2xl font-bold text-primary-dark mb-6">
|
||||
专业财富管理解决方案
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-8">
|
||||
{serviceDetails.finance.description}
|
||||
</p>
|
||||
|
||||
{/* 特性列表 */}
|
||||
<div className="grid sm:grid-cols-2 gap-4 mb-8">
|
||||
{serviceDetails.finance.features.map((feature, index) => (
|
||||
<div key={index} className="flex items-start gap-3 p-4 bg-background rounded-xl">
|
||||
<div className="p-2 bg-primary/10 rounded-lg">
|
||||
<feature.icon size={20} className="text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-primary-dark text-sm">
|
||||
{feature.title}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-500 mt-1">{feature.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="relative"
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<div className="aspect-square rounded-2xl bg-gradient-to-br from-primary to-primary-light p-8 flex items-center justify-center">
|
||||
<div className="text-center text-white">
|
||||
<PieChart size={80} className="mx-auto mb-6 opacity-80" />
|
||||
<div className="text-4xl font-bold mb-2">500亿</div>
|
||||
<div className="text-lg opacity-80">管理资产规模</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* 科技研发 */}
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center mb-20">
|
||||
<motion.div
|
||||
className="order-2 lg:order-1"
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<div className="aspect-square rounded-2xl bg-gradient-to-br from-accent to-accent-dark p-8 flex items-center justify-center">
|
||||
<div className="text-center text-primary-dark">
|
||||
<Cpu size={80} className="mx-auto mb-6 opacity-80" />
|
||||
<div className="text-4xl font-bold mb-2">100+</div>
|
||||
<div className="text-lg opacity-80">技术专利</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="order-1 lg:order-2"
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<span className="inline-block px-4 py-1 bg-primary/10 text-primary text-sm font-semibold rounded-full mb-4">
|
||||
科技研发
|
||||
</span>
|
||||
<h3 className="text-2xl font-bold text-primary-dark mb-6">
|
||||
数字化转型专家
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-8">
|
||||
{serviceDetails.tech.description}
|
||||
</p>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-4 mb-8">
|
||||
{serviceDetails.tech.features.map((feature, index) => (
|
||||
<div key={index} className="flex items-start gap-3 p-4 bg-background rounded-xl">
|
||||
<div className="p-2 bg-accent/20 rounded-lg">
|
||||
<feature.icon size={20} className="text-accent-dark" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-primary-dark text-sm">
|
||||
{feature.title}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-500 mt-1">{feature.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 成功案例 */}
|
||||
<section className="py-20 bg-background">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-12"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-primary-dark mb-2">
|
||||
成功案例
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
真实项目，展现专业实力
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 筛选标签 */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categories.slice(0, 5).map((category) => (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => setActiveCategory(category.id)}
|
||||
className={`px-4 py-2 text-sm font-medium rounded-lg transition-all ${
|
||||
activeCategory === category.id
|
||||
? 'bg-primary text-white'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
{category.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 案例网格 */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-2 gap-8">
|
||||
{filteredCases.map((caseItem, index) => (
|
||||
<CaseCard key={caseItem.id} case={caseItem} index={index} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 合作伙伴 */}
|
||||
<section className="py-20 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
className="text-center mb-16"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-primary-dark mb-4">
|
||||
合作伙伴
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
与众多知名企业建立深度合作关系
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{partners.map((partner, index) => (
|
||||
<motion.div
|
||||
key={partner.name}
|
||||
className="p-6 bg-background rounded-xl hover:shadow-md transition-shadow flex flex-col items-center"
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1, duration: 0.5 }}
|
||||
whileHover={{ y: -3 }}
|
||||
>
|
||||
<div className="w-16 h-16 rounded-lg bg-gradient-to-br from-primary/10 to-primary-light/10 flex items-center justify-center mb-4">
|
||||
<Building2 size={32} className="text-primary" />
|
||||
</div>
|
||||
<h4 className="font-semibold text-primary-dark">
|
||||
{partner.name}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-500">{partner.industry}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 服务流程 */}
|
||||
<section className="py-20 bg-primary-dark text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
className="text-center mb-16"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-3xl font-bold mb-4">服务流程</h2>
|
||||
<p className="text-lg text-gray-300">
|
||||
标准化流程，确保服务质量
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
{serviceDetails.finance.process.map((step, index) => (
|
||||
<motion.div
|
||||
key={step.step}
|
||||
className="text-center"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1, duration: 0.5 }}
|
||||
>
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-accent text-primary-dark font-bold text-xl mb-6">
|
||||
{step.step}
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-3">{step.title}</h3>
|
||||
<p className="text-gray-400 text-sm">{step.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* 页脚 */}
|
||||
<Footer />
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
Reference in New Issue
Block a user