189 lines
7.2 KiB
TypeScript
189 lines
7.2 KiB
TypeScript
import { motion } from 'framer-motion';
|
||
import { Target, Eye, Heart, Award, ArrowRight } from 'lucide-react';
|
||
import { Link } from 'react-router-dom';
|
||
|
||
/**
|
||
* AboutSection 组件 - 关于我们简介区域
|
||
*/
|
||
|
||
const values = [
|
||
{
|
||
icon: Heart,
|
||
title: '诚信为本',
|
||
description: '坚守诚信底线，建立长期信任关系',
|
||
},
|
||
{
|
||
icon: Target,
|
||
title: '创新驱动',
|
||
description: '持续创新，保持行业领先优势',
|
||
},
|
||
{
|
||
icon: Award,
|
||
title: '品质至上',
|
||
description: '追求卓越，提供高品质服务',
|
||
},
|
||
];
|
||
|
||
export const AboutSection: React.FC = () => {
|
||
return (
|
||
<section
|
||
id="about"
|
||
className="py-20 lg:py-28 bg-background"
|
||
aria-labelledby="about-heading"
|
||
>
|
||
<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
|
||
id="about-heading"
|
||
className="text-3xl md:text-4xl font-bold text-primary-dark"
|
||
>
|
||
关于示例集团
|
||
</h2>
|
||
<p className="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
|
||
示例集团成立于 2010 年，是一家集科技研发、金融服务、产业投资于一体的综合性企业集团
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* 主要内容区域 */}
|
||
<div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||
{/* 左侧内容 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -30 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
>
|
||
<h3 className="text-2xl font-semibold text-primary-dark mb-6">
|
||
示例集团 · 稳健前行，携手共赢
|
||
</h3>
|
||
<div className="space-y-6 text-gray-600 leading-relaxed">
|
||
<p>
|
||
示例集团总部位于北京，经过十余年的稳健发展，已形成了以金融服务、科技研发、产业投资为核心的业务体系。集团秉承"诚信、创新、共赢"的核心价值观，致力于为客户创造最大价值。
|
||
</p>
|
||
<p>
|
||
我们拥有一支经验丰富、专业高效的管理团队，汇聚了金融、科技、投资等领域的优秀人才。通过持续的业务创新和服务优化，示例集团已成功为超过 1000 家企业客户提供专业服务。
|
||
</p>
|
||
</div>
|
||
|
||
{/* 使命与愿景 */}
|
||
<div className="mt-8 grid sm:grid-cols-2 gap-6">
|
||
<div className="p-5 bg-white rounded-xl shadow-sm border border-gray-100">
|
||
<div className="flex items-center gap-3 mb-3">
|
||
<div className="p-2 bg-primary/10 rounded-lg">
|
||
<Eye size={20} className="text-primary" />
|
||
</div>
|
||
<h4 className="font-semibold text-primary-dark">我们的愿景</h4>
|
||
</div>
|
||
<p className="text-sm text-gray-600">
|
||
成为具有国际影响力的综合性企业集团
|
||
</p>
|
||
</div>
|
||
<div className="p-5 bg-white rounded-xl shadow-sm border border-gray-100">
|
||
<div className="flex items-center gap-3 mb-3">
|
||
<div className="p-2 bg-accent/20 rounded-lg">
|
||
<Target size={20} className="text-accent" />
|
||
</div>
|
||
<h4 className="font-semibold text-primary-dark">我们的使命</h4>
|
||
</div>
|
||
<p className="text-sm text-gray-600">
|
||
为客户创造价值，为社会贡献力量
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 更多按钮 */}
|
||
<motion.div className="mt-8" whileHover={{ x: 5 }}>
|
||
<Link
|
||
to="/about"
|
||
className="inline-flex items-center gap-2 text-primary font-medium hover:text-primary-light transition-colors"
|
||
>
|
||
了解更多关于我们
|
||
<ArrowRight size={18} />
|
||
</Link>
|
||
</motion.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-tr from-primary/20 to-transparent" />
|
||
</div>
|
||
|
||
{/* 装饰性元素 */}
|
||
<motion.div
|
||
className="absolute -bottom-6 -left-6 w-32 h-32 bg-accent/20 rounded-2xl -z-10"
|
||
initial={{ scale: 0 }}
|
||
whileInView={{ scale: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: 0.4, duration: 0.5 }}
|
||
/>
|
||
<motion.div
|
||
className="absolute -top-6 -right-6 w-24 h-24 bg-primary/10 rounded-2xl -z-10"
|
||
initial={{ scale: 0 }}
|
||
whileInView={{ scale: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: 0.5, duration: 0.5 }}
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* 核心价值观 */}
|
||
<motion.div
|
||
className="mt-20"
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
>
|
||
<h3 className="text-2xl font-semibold text-center text-primary-dark mb-10">
|
||
核心价值观
|
||
</h3>
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
{values.map((value, index) => (
|
||
<motion.div
|
||
key={value.title}
|
||
className="text-center p-8 bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow duration-300"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
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 from-primary/10 to-accent/10 mb-5">
|
||
<value.icon size={32} className="text-primary" />
|
||
</div>
|
||
<h4 className="text-xl font-semibold text-primary-dark mb-3">
|
||
{value.title}
|
||
</h4>
|
||
<p className="text-gray-600">{value.description}</p>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default AboutSection;
|