189 lines
8.0 KiB
JavaScript
189 lines
8.0 KiB
JavaScript
import React from 'react';
|
||
import { motion } from 'framer-motion';
|
||
import { Building, User, Eye, Star, GraduationCap, Code, Award, Brain } from 'lucide-react';
|
||
|
||
const CompanyIntro = () => {
|
||
const cardVariants = {
|
||
hidden: { opacity: 0, y: 50 },
|
||
visible: {
|
||
opacity: 1,
|
||
y: 0,
|
||
transition: { duration: 0.6, ease: "easeOut" }
|
||
}
|
||
};
|
||
|
||
const advantages = [
|
||
{ icon: Brain, title: 'AI技术领先', color: 'text-blue-500' },
|
||
{ icon: Building, title: '医疗场景深度', color: 'text-green-500' },
|
||
{ icon: User, title: '专业团队', color: 'text-purple-500' },
|
||
{ icon: Star, title: '创新驱动', color: 'text-orange-500' }
|
||
];
|
||
|
||
return (
|
||
<section id="company" className="section-padding bg-gradient-to-br from-gray-50 to-blue-50">
|
||
<div className="container-custom">
|
||
<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-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||
<Building className="inline-block w-12 h-12 mr-4 text-blue-600" />
|
||
关于数耀科技
|
||
</h2>
|
||
</motion.div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||
{/* 左侧：公司介绍 */}
|
||
<div className="space-y-8">
|
||
<motion.div
|
||
className="medical-card p-8"
|
||
variants={cardVariants}
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5, transition: { duration: 0.3 } }}
|
||
>
|
||
<h3 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">
|
||
<Building className="w-6 h-6 text-blue-500 mr-3" />
|
||
公司简介
|
||
</h3>
|
||
<p className="text-gray-700 leading-relaxed text-lg">
|
||
<span className="font-semibold text-blue-600">北京数耀科技有限公司</span>
|
||
是一家专注于AI医疗领域的创新科技企业，致力于开发新一代大模型原生临床研究智能解决方案。
|
||
公司汇聚了医疗、AI、大数据等领域的顶尖人才，以技术创新驱动医疗行业数字化转型。
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
className="medical-card p-8"
|
||
variants={cardVariants}
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{ once: true }}
|
||
transition={{ delay: 0.2 }}
|
||
whileHover={{ y: -5, transition: { duration: 0.3 } }}
|
||
>
|
||
<h3 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">
|
||
<User className="w-6 h-6 text-blue-500 mr-3" />
|
||
核心团队
|
||
</h3>
|
||
<div className="space-y-6">
|
||
{/* 创始人信息 */}
|
||
<div className="border-l-4 border-blue-500 pl-6 py-4">
|
||
<div className="flex items-center mb-3">
|
||
<div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4">
|
||
狄
|
||
</div>
|
||
<div>
|
||
<h4 className="text-xl font-bold text-gray-800">狄亮</h4>
|
||
<p className="text-blue-600 font-semibold">创始人 | 医学+管理</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center text-gray-700">
|
||
<GraduationCap className="w-5 h-5 text-gray-500 mr-3" />
|
||
<span>北京大学医学部 & 光华管理学院</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 技术合伙人信息 */}
|
||
<div className="border-l-4 border-green-500 pl-6 py-4">
|
||
<div className="flex items-center mb-3">
|
||
<div className="w-12 h-12 bg-gradient-to-r from-green-500 to-green-600 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4">
|
||
高
|
||
</div>
|
||
<div>
|
||
<h4 className="text-xl font-bold text-gray-800">高浩然</h4>
|
||
<p className="text-green-600 font-semibold">技术合伙人 | 亿级用户产品架构师</p>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div className="flex items-center text-gray-700">
|
||
<GraduationCap className="w-5 h-5 text-gray-500 mr-3" />
|
||
<span>同济大学软件工程</span>
|
||
</div>
|
||
<div className="flex items-center text-gray-700">
|
||
<Code className="w-5 h-5 text-gray-500 mr-3" />
|
||
<span>前小米智能生态负责人</span>
|
||
</div>
|
||
<div className="flex items-center text-gray-700">
|
||
<Award className="w-5 h-5 text-gray-500 mr-3" />
|
||
<span>主导构建支撑百万级并发的医疗数据中台</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* 右侧：愿景与核心价值 */}
|
||
<div className="space-y-8">
|
||
<motion.div
|
||
className="medical-card p-8"
|
||
variants={cardVariants}
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{ once: true }}
|
||
transition={{ delay: 0.1 }}
|
||
whileHover={{ y: -5, transition: { duration: 0.3 } }}
|
||
>
|
||
<h3 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">
|
||
<Eye className="w-6 h-6 text-blue-500 mr-3" />
|
||
公司愿景
|
||
</h3>
|
||
<div className="text-center py-6">
|
||
<motion.div
|
||
className="medical-gradient text-white p-6 rounded-2xl mb-6"
|
||
whileHover={{ scale: 1.02 }}
|
||
transition={{ type: "spring", stiffness: 300 }}
|
||
>
|
||
<h4 className="text-xl font-bold mb-2">
|
||
成为国内头部的AI辅助医疗Agent提供商
|
||
</h4>
|
||
</motion.div>
|
||
<p className="text-gray-600 leading-relaxed">
|
||
通过先进的AI技术，为医疗机构提供智能化、个性化的临床研究解决方案，
|
||
提升医疗服务质量和效率，推动精准医疗发展。
|
||
</p>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
className="medical-card p-8"
|
||
variants={cardVariants}
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{ once: true }}
|
||
transition={{ delay: 0.3 }}
|
||
whileHover={{ y: -5, transition: { duration: 0.3 } }}
|
||
>
|
||
<h3 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">
|
||
<Star className="w-6 h-6 text-blue-500 mr-3" />
|
||
核心优势
|
||
</h3>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
{advantages.map((advantage, index) => (
|
||
<motion.div
|
||
key={index}
|
||
className="text-center p-4 bg-blue-50 rounded-lg"
|
||
whileHover={{ scale: 1.05, backgroundColor: '#dbeafe' }}
|
||
transition={{ duration: 0.2 }}
|
||
>
|
||
<advantage.icon className={`w-8 h-8 ${advantage.color} mx-auto mb-2`} />
|
||
<p className="text-sm font-semibold text-gray-700">{advantage.title}</p>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default CompanyIntro;
|
||
|