447 lines
17 KiB
TypeScript
447 lines
17 KiB
TypeScript
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';
|
||
import { usePageTitle } from '../hooks/usePageTitle';
|
||
|
||
// 发展历程数据
|
||
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);
|
||
usePageTitle('关于我们');
|
||
|
||
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 shadow-xl">
|
||
<img
|
||
src="/images/about-office.jpg"
|
||
alt="示例集团办公环境"
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent flex items-end justify-center p-8">
|
||
<div className="text-center text-white">
|
||
<div className="text-4xl font-bold mb-2">示例集团</div>
|
||
<div className="text-xl opacity-90">稳健前行 · 携手共赢</div>
|
||
</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 overflow-hidden ring-4 ring-primary/10">
|
||
<div className="w-full h-full rounded-full bg-gradient-to-br from-primary to-primary-light flex items-center justify-center text-white text-2xl font-bold shadow-lg">
|
||
{member.name.charAt(0)}
|
||
</div>
|
||
</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-16 h-16 rounded-lg bg-gradient-to-br from-accent/20 to-accent/10 flex items-center justify-center">
|
||
<Award size={28} 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;
|