109 lines
4.0 KiB
TypeScript
109 lines
4.0 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import { Target, Eye, Heart, Star } from 'lucide-react'
|
|
|
|
export function MissionVisionEN() {
|
|
const coreValues = [
|
|
{
|
|
icon: Target,
|
|
title: "Mission",
|
|
content: "Military-grade Technology Empowers Physical Economy<br/>AI Drives Universal Business Connectivity",
|
|
color: "from-orange-500 to-red-500"
|
|
},
|
|
{
|
|
icon: Eye,
|
|
title: "Vision",
|
|
content: "One Baima Family Worldwide<br/>Grow Wealth Together, Spend Together",
|
|
color: "from-blue-500 to-indigo-600"
|
|
},
|
|
{
|
|
icon: Heart,
|
|
title: "Values",
|
|
content: "Co-create · Share · Prosper Together",
|
|
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">
|
|
Our Beliefs
|
|
</h2>
|
|
<p className="text-gray-400 text-lg max-w-2xl mx-auto">
|
|
Staying True to Our Original Aspiration, Advancing with Determination - Baima Home Builds a Better Future Together
|
|
</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">
|
|
Digital Intelligence Connects Businesses, Creates Better Future
|
|
</span>
|
|
<Star className="w-6 h-6 text-[#FF6600]" />
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|