初始提交:AI医疗展示网站,包含回到顶部按钮功能(排除大文件)
This commit is contained in:
200
src/components/Hero.jsx
Normal file
200
src/components/Hero.jsx
Normal file
@@ -0,0 +1,200 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Brain, Heart, Activity, Stethoscope, TrendingUp, Network } from 'lucide-react';
|
||||
|
||||
const Hero = () => {
|
||||
const iconVariants = {
|
||||
hidden: { opacity: 0, scale: 0 },
|
||||
visible: {
|
||||
opacity: 0.1,
|
||||
scale: 1,
|
||||
transition: { duration: 1, delay: 0.5 }
|
||||
},
|
||||
float: {
|
||||
y: [-10, 10, -10],
|
||||
transition: { duration: 3, repeat: Infinity, ease: "easeInOut" }
|
||||
}
|
||||
};
|
||||
|
||||
const textVariants = {
|
||||
hidden: { opacity: 0, y: 50 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.8, ease: "easeOut" }
|
||||
}
|
||||
};
|
||||
|
||||
const badgeVariants = {
|
||||
hidden: { opacity: 0, scale: 0.8 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
transition: { duration: 0.6, delay: 1.2 }
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="hero" className="relative min-h-screen flex items-center justify-center medical-gradient overflow-hidden">
|
||||
{/* 背景装饰图标 */}
|
||||
<motion.div
|
||||
className="absolute top-20 left-20 text-white"
|
||||
variants={iconVariants}
|
||||
initial="hidden"
|
||||
animate={["visible", "float"]}
|
||||
>
|
||||
<Heart className="w-24 h-24" />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="absolute top-32 right-32 text-white"
|
||||
variants={iconVariants}
|
||||
initial="hidden"
|
||||
animate={["visible", "float"]}
|
||||
style={{ animationDelay: '1s' }}
|
||||
>
|
||||
<Brain className="w-20 h-20" />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="absolute bottom-32 left-32 text-white"
|
||||
variants={iconVariants}
|
||||
initial="hidden"
|
||||
animate={["visible", "float"]}
|
||||
style={{ animationDelay: '2s' }}
|
||||
>
|
||||
<Activity className="w-16 h-16" />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="absolute bottom-40 right-40 text-white"
|
||||
variants={iconVariants}
|
||||
initial="hidden"
|
||||
animate={["visible", "float"]}
|
||||
style={{ animationDelay: '1.5s' }}
|
||||
>
|
||||
<Stethoscope className="w-14 h-14" />
|
||||
</motion.div>
|
||||
|
||||
{/* 主要内容 */}
|
||||
<div className="relative z-10 text-center text-white px-4 max-w-6xl mx-auto">
|
||||
<motion.h1
|
||||
className="text-5xl md:text-7xl font-bold mb-8 leading-tight"
|
||||
variants={textVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
AI如何协助并
|
||||
<br />
|
||||
<span className="bg-gradient-to-r from-blue-200 to-purple-200 bg-clip-text text-transparent">
|
||||
赋能医生
|
||||
</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
className="text-xl md:text-2xl mb-12 text-white/90 font-light"
|
||||
variants={textVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
新一代大模型原生临床研究智能解决方案
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
className="medical-card p-8 mb-12 max-w-2xl mx-auto"
|
||||
variants={textVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{ delay: 0.6 }}
|
||||
>
|
||||
<div className="text-gray-800 space-y-3">
|
||||
<div className="flex items-center justify-center space-x-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
|
||||
<span className="text-lg font-medium">北京数耀科技有限公司</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center space-x-3">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
<span className="text-lg font-medium">2025年6月</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* AI科技元素 */}
|
||||
<motion.div
|
||||
className="flex flex-wrap justify-center items-center gap-8 text-white/80"
|
||||
variants={badgeVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
<motion.div
|
||||
className="flex flex-col items-center space-y-2"
|
||||
whileHover={{ scale: 1.1, y: -5 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 10 }}
|
||||
>
|
||||
<div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm">
|
||||
<Brain className="w-8 h-8" />
|
||||
</div>
|
||||
<span className="text-sm font-medium">人工智能</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="flex flex-col items-center space-y-2"
|
||||
whileHover={{ scale: 1.1, y: -5 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 10 }}
|
||||
>
|
||||
<div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm">
|
||||
<Stethoscope className="w-8 h-8" />
|
||||
</div>
|
||||
<span className="text-sm font-medium">智慧医疗</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="flex flex-col items-center space-y-2"
|
||||
whileHover={{ scale: 1.1, y: -5 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 10 }}
|
||||
>
|
||||
<div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm">
|
||||
<TrendingUp className="w-8 h-8" />
|
||||
</div>
|
||||
<span className="text-sm font-medium">数据分析</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="flex flex-col items-center space-y-2"
|
||||
whileHover={{ scale: 1.1, y: -5 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 10 }}
|
||||
>
|
||||
<div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm">
|
||||
<Network className="w-8 h-8" />
|
||||
</div>
|
||||
<span className="text-sm font-medium">智能系统</span>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* 滚动指示器 */}
|
||||
<motion.div
|
||||
className="absolute bottom-8 left-1/2 transform -translate-x-1/2"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 2, duration: 0.8 }}
|
||||
>
|
||||
<motion.div
|
||||
className="w-6 h-10 border-2 border-white/50 rounded-full flex justify-center"
|
||||
animate={{ y: [0, 10, 0] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
>
|
||||
<motion.div
|
||||
className="w-1 h-3 bg-white/70 rounded-full mt-2"
|
||||
animate={{ opacity: [1, 0.3, 1] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
|
||||
Reference in New Issue
Block a user