91 lines
3.7 KiB
TypeScript
91 lines
3.7 KiB
TypeScript
'use client'
|
||
|
||
import { motion } from 'framer-motion'
|
||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { User, ShieldCheck, TrendingUp } from 'lucide-react'
|
||
|
||
const team = [
|
||
{
|
||
name: "汪洋",
|
||
role: "董事长",
|
||
badges: ["国防科大本硕博", "航天级专家"],
|
||
description: "深度参与神舟、北斗任务。全网粉丝100万+ AIGC头部博主。"
|
||
},
|
||
{
|
||
name: "段海龙",
|
||
role: "技术总监",
|
||
badges: ["国防科大学士", "高级工程师"],
|
||
description: "专注AI与机器视觉。发表论文20多篇，拥有专利20余项。"
|
||
},
|
||
{
|
||
name: "秦波",
|
||
role: "总经理",
|
||
badges: ["第一军医大学", "正团职转业"],
|
||
description: "资深康养专家，10年以上市场招商渠道拓展经验。"
|
||
},
|
||
{
|
||
name: "焦文军",
|
||
role: "CFO",
|
||
badges: ["十大杰出CFO", "操盘上市"],
|
||
description: "多家上市公司操盘手。中央财经大学、南开大学客座教授。"
|
||
}
|
||
]
|
||
|
||
export function AboutSection() {
|
||
return (
|
||
<section id="about" className="py-24 bg-white scroll-mt-20">
|
||
<div className="container mx-auto px-4 md:px-6">
|
||
<div className="max-w-4xl mx-auto text-center mb-20">
|
||
<Badge variant="outline" className="mb-4 border-[#FF6600] text-[#FF6600] bg-orange-50 font-bold">
|
||
关于白马家园
|
||
</Badge>
|
||
<h2 className="text-3xl md:text-5xl font-black text-[#0A1931] mb-6">
|
||
军工技术赋能实体经济
|
||
</h2>
|
||
<p className="text-lg text-gray-500 leading-relaxed">
|
||
白马家园是一家拥有国资背景的高新技术企业，已获五轮融资超 2 亿元。
|
||
我们致力于解决实体商家“流量难、锁客难、变现难”的痛点，
|
||
构建万商互联的共享经济生态。
|
||
</p>
|
||
</div>
|
||
|
||
{/* 核心团队 */}
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||
{team.map((member, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: index * 0.1 }}
|
||
>
|
||
<Card className="border-0 shadow-lg hover:shadow-xl transition-all h-full bg-gray-50/50 group">
|
||
<CardHeader className="text-center pb-4">
|
||
<div className="w-20 h-20 mx-auto bg-white rounded-2xl flex items-center justify-center mb-4 shadow-sm group-hover:bg-[#FF6600] transition-colors duration-300">
|
||
<User className="w-10 h-10 text-[#0A1931] group-hover:text-white" />
|
||
</div>
|
||
<CardTitle className="text-xl font-bold text-[#0A1931]">{member.name}</CardTitle>
|
||
<CardDescription className="text-[#FF6600] font-bold">{member.role}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="flex flex-wrap justify-center gap-1.5 mb-4">
|
||
{member.badges.map((badge, bIndex) => (
|
||
<span key={bIndex} className="text-[10px] font-bold bg-white px-2 py-0.5 rounded border border-gray-100 text-gray-500">
|
||
{badge}
|
||
</span>
|
||
))}
|
||
</div>
|
||
<p className="text-sm text-gray-500 leading-relaxed text-center">
|
||
{member.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|