224 lines
7.9 KiB
TypeScript
224 lines
7.9 KiB
TypeScript
'use client'
|
||
|
||
import { motion } from 'framer-motion'
|
||
import { Trophy, Award, FileText, Medal, Shield, Zap, Users, Globe, CheckCircle2 } from 'lucide-react'
|
||
|
||
// 扩充后的资质和知识产权数据
|
||
const honors = [
|
||
{
|
||
icon: Trophy,
|
||
title: "科大讯飞 AI 开发者大赛",
|
||
subtitle: "数字人赛道冠军",
|
||
color: "bg-orange-100 text-orange-600"
|
||
},
|
||
{
|
||
icon: Medal,
|
||
title: "中国产业元宇宙创新大赛",
|
||
subtitle: "一等奖",
|
||
color: "bg-blue-100 text-blue-600"
|
||
},
|
||
{
|
||
icon: Award,
|
||
title: "退役军人创新创业大赛",
|
||
subtitle: "一等奖",
|
||
color: "bg-purple-100 text-purple-600"
|
||
},
|
||
{
|
||
icon: Globe,
|
||
title: "元宇宙应用场景大赛",
|
||
subtitle: "产业生态先锋奖",
|
||
color: "bg-green-100 text-green-600"
|
||
}
|
||
]
|
||
|
||
const patents = [
|
||
{
|
||
title: "融合多信息的 AI 虚拟人与用户交互方法",
|
||
type: "发明专利"
|
||
},
|
||
{
|
||
title: "一种虚拟人物不同表情模型生成方法",
|
||
type: "发明专利"
|
||
},
|
||
{
|
||
title: "基于深度学习的智能收银系统",
|
||
type: "发明专利"
|
||
},
|
||
{
|
||
title: "多通道智能路由分配算法",
|
||
type: "发明专利"
|
||
},
|
||
{
|
||
title: "区块链数据确权与价值分配系统",
|
||
type: "发明专利"
|
||
},
|
||
{
|
||
title: "AI 驱动的精准营销推荐系统",
|
||
type: "发明专利"
|
||
}
|
||
]
|
||
|
||
const certifications = [
|
||
{
|
||
title: "收单外包服务机构备案",
|
||
desc: "中国支付清算协会备案，合规开展收单外包服务"
|
||
},
|
||
{
|
||
title: "ISO 9001 质量管理体系认证",
|
||
desc: "国际标准化组织认证"
|
||
},
|
||
{
|
||
title: "高新技术企业认定",
|
||
desc: "享受国家高新技术企业税收优惠"
|
||
},
|
||
{
|
||
title: "软件企业认定",
|
||
desc: "符合国家软件产业政策要求"
|
||
},
|
||
{
|
||
title: "信息安全管理系统认证",
|
||
desc: "保障用户数据安全"
|
||
},
|
||
{
|
||
title: "数商备案接入",
|
||
desc: "合规参与数据要素市场"
|
||
}
|
||
]
|
||
|
||
export function HonorSection() {
|
||
return (
|
||
<section id="honor" className="py-24 bg-[#F4F7FB] scroll-mt-20">
|
||
<div className="container mx-auto px-4 md:px-6">
|
||
|
||
{/* 大标题 */}
|
||
<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-[#0A1931] mb-4">
|
||
权威认证 · 技术实力
|
||
</h2>
|
||
<p className="text-lg text-gray-500 max-w-3xl mx-auto">
|
||
白马家园拥有完备的知识产权体系和权威资质认证，为您的商业合作保驾护航
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* 1. 权威奖项展示 - 大卡片风格 */}
|
||
<div className="mb-20">
|
||
<h3 className="text-2xl font-bold text-[#0A1931] mb-8 flex items-center gap-3">
|
||
<Trophy className="w-8 h-8 text-[#FF6600]" />
|
||
权威奖项与认可
|
||
</h3>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{honors.map((item, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: index * 0.1 }}
|
||
className="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all hover:-translate-y-1 border border-gray-100"
|
||
>
|
||
<div className={`w-16 h-16 ${item.color} rounded-2xl flex items-center justify-center mb-6`}>
|
||
<item.icon className="w-8 h-8" />
|
||
</div>
|
||
<h4 className="text-xl font-bold text-[#0A1931] mb-2">{item.title}</h4>
|
||
<p className="text-[#FF6600] font-bold">{item.subtitle}</p>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 2. 知识产权展示 - 网格布局 */}
|
||
<div className="mb-20">
|
||
<h3 className="text-2xl font-bold text-[#0A1931] mb-8 flex items-center gap-3">
|
||
<FileText className="w-8 h-8 text-[#185ADB]" />
|
||
自主知识产权 (80+ 项)
|
||
</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{patents.map((item, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, x: -20 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: index * 0.05 }}
|
||
className="bg-white p-5 rounded-xl border border-gray-200 hover:border-[#185ADB] hover:shadow-md transition-all flex items-start gap-4"
|
||
>
|
||
<div className="w-10 h-10 bg-[#185ADB]/10 rounded-lg flex items-center justify-center shrink-0 mt-1">
|
||
<Shield className="w-5 h-5 text-[#185ADB]" />
|
||
</div>
|
||
<div>
|
||
<h4 className="font-bold text-[#0A1931] mb-1">{item.title}</h4>
|
||
<span className="text-xs font-bold text-[#185ADB] bg-[#185ADB]/10 px-2 py-0.5 rounded">{item.type}</span>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
{/* 更多专利提示 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -20 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: 0.4 }}
|
||
className="bg-gradient-to-br from-[#0A1931] to-[#185ADB] p-5 rounded-xl text-white flex items-center justify-center"
|
||
>
|
||
<div className="text-center">
|
||
<Zap className="w-10 h-10 mx-auto mb-2 text-[#FF6600]" />
|
||
<p className="font-bold text-lg">80+ 项</p>
|
||
<p className="text-sm text-gray-300">软件著作权与专利</p>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 3. 资质认证展示 - 详情列表 */}
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-[#0A1931] mb-8 flex items-center gap-3">
|
||
<CheckCircle2 className="w-8 h-8 text-green-600" />
|
||
权威资质认证
|
||
</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{certifications.map((item, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: index * 0.1 }}
|
||
className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-all"
|
||
>
|
||
<div className="flex items-start gap-4">
|
||
<div className="w-12 h-12 bg-green-50 rounded-xl flex items-center justify-center shrink-0">
|
||
<CheckCircle2 className="w-6 h-6 text-green-600" />
|
||
</div>
|
||
<div>
|
||
<h4 className="font-bold text-[#0A1931] mb-2">{item.title}</h4>
|
||
<p className="text-sm text-gray-500 leading-relaxed">{item.desc}</p>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 底部强调 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
className="mt-16 bg-gradient-to-r from-[#0A1931] to-[#185ADB] rounded-3xl p-10 text-white text-center"
|
||
>
|
||
<h4 className="text-2xl font-black mb-4">合规保障 · 安全无忧</h4>
|
||
<p className="text-lg text-gray-300 max-w-2xl mx-auto">
|
||
我们拥有收单外包服务机构备案，资金受银监会监管，数商备案接入，工商税务监管系统实时对接，
|
||
为您的每一笔交易保驾护航。
|
||
</p>
|
||
</motion.div>
|
||
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|