109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
'use client'
|
||
|
||
import { motion } from 'framer-motion'
|
||
import { Target, Eye, Heart, Star, Shield, Users, TrendingUp } from 'lucide-react'
|
||
|
||
export function MissionVision() {
|
||
const coreValues = [
|
||
{
|
||
icon: Target,
|
||
title: "使命",
|
||
content: "军工技术赋能实体经济<br/>人工智能驱动万商互联",
|
||
color: "from-orange-500 to-red-500"
|
||
},
|
||
{
|
||
icon: Eye,
|
||
title: "愿景",
|
||
content: "天下白马是一家<br/>一起赚钱一起花",
|
||
color: "from-blue-500 to-indigo-600"
|
||
},
|
||
{
|
||
icon: Heart,
|
||
title: "价值观",
|
||
content: "共创 · 共享 · 共富",
|
||
color: "from-green-500 to-emerald-600"
|
||
}
|
||
]
|
||
|
||
return (
|
||
<section className="py-24 bg-gradient-to-br from-[#0A1931] via-[#0d1f45] to-[#050A14] relative overflow-hidden">
|
||
{/* 背景装饰 */}
|
||
<div className="absolute inset-0">
|
||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-[#FF6600] rounded-full blur-[150px] opacity-10"></div>
|
||
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-[#185ADB] rounded-full blur-[150px] opacity-10"></div>
|
||
</div>
|
||
|
||
<div className="container mx-auto px-4 relative z-10">
|
||
{/* 标题 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-16"
|
||
>
|
||
<h2 className="text-3xl md:text-5xl font-black text-white mb-4">
|
||
我们的信仰
|
||
</h2>
|
||
<p className="text-gray-400 text-lg max-w-2xl mx-auto">
|
||
坚守初心，砥砺前行，白马家园与您携手共创美好未来
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* 三大核心支柱 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
{coreValues.map((item, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: index * 0.2 }}
|
||
className="group"
|
||
>
|
||
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10 hover:border-[#FF6600]/50 transition-all duration-500 h-full">
|
||
{/* 图标 */}
|
||
<div className={`w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-r ${item.color} flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300`}>
|
||
<item.icon className="w-10 h-10 text-white" />
|
||
</div>
|
||
|
||
{/* 标题 */}
|
||
<h3 className="text-2xl font-bold text-white text-center mb-6">
|
||
{item.title}
|
||
</h3>
|
||
|
||
{/* 内容 */}
|
||
<div
|
||
className="text-center text-gray-300 leading-loose text-lg"
|
||
dangerouslySetInnerHTML={{ __html: item.content }}
|
||
/>
|
||
|
||
{/* 装饰线 */}
|
||
<div className="mt-6 flex justify-center">
|
||
<div className={`w-16 h-1 bg-gradient-to-r ${item.color} rounded-full opacity-50`}></div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 底部标语 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: 0.5 }}
|
||
className="mt-16 text-center"
|
||
>
|
||
<div className="inline-flex items-center gap-4 bg-[#FF6600]/10 backdrop-blur-sm px-8 py-4 rounded-full border border-[#FF6600]/20">
|
||
<Star className="w-6 h-6 text-[#FF6600]" />
|
||
<span className="text-[#FF6600] font-bold text-lg">
|
||
数智连接万商 共创美好未来
|
||
</span>
|
||
<Star className="w-6 h-6 text-[#FF6600]" />
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|