初始提交:AI医疗展示网站,包含回到顶部按钮功能(排除大文件)
This commit is contained in:
188
src/components/CompanyIntro.jsx
Normal file
188
src/components/CompanyIntro.jsx
Normal file
@@ -0,0 +1,188 @@
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user