root
77ad8beb3d
- 新建 digital-humans 页面，展示8个数字人角色 - 使用public/human目录下的写实美女图片 - 卡片采用左图右文布局，4列响应式设计 - 图片上添加左下角遮罩显示姓名 - 首页添加数字人应用入口区域 - 调整卡片间距和样式优化
234 lines
10 KiB
TypeScript
234 lines
10 KiB
TypeScript
import Link from "next/link"
|
||
import Image from "next/image"
|
||
|
||
const digitalHumans = [
|
||
{
|
||
id: 1,
|
||
name: "小雅",
|
||
avatar: "/human/0ac179c47f1957d03ccc6858e6351f1d.jpeg",
|
||
category: "商务助手",
|
||
description: "专业的商务顾问，擅长企业咨询、市场分析、商务谈判等场景，为您提供智能化的商业决策支持。",
|
||
color: "from-purple-500 to-pink-500",
|
||
bgColor: "bg-purple-50",
|
||
textColor: "text-purple-600",
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "书淇",
|
||
avatar: "/human/166c0f9202afc463e9264529764ddb7f.jpg",
|
||
category: "教育导师",
|
||
description: "知识渊博的教育专家，专注于在线教学、课程辅导、学习规划，让学习更高效、更有趣。",
|
||
color: "from-blue-500 to-cyan-500",
|
||
bgColor: "bg-blue-50",
|
||
textColor: "text-blue-600",
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "樱桃",
|
||
avatar: "/human/541ab483fbafcc7b5476a63dbd350fb5.jpg",
|
||
category: "生活陪伴",
|
||
description: "活泼可爱的虚拟伙伴，擅长日常聊天、情感陪伴、生活建议，为您的生活增添温暖与乐趣。",
|
||
color: "from-pink-500 to-rose-500",
|
||
bgColor: "bg-pink-50",
|
||
textColor: "text-pink-600",
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "星辰",
|
||
avatar: "/human/8365454662deb53637146f8b81476124.png",
|
||
category: "科技顾问",
|
||
description: "前沿科技专家，精通AI技术、编程开发、技术咨询，助力您在数字时代保持竞争力。",
|
||
color: "from-indigo-500 to-blue-500",
|
||
bgColor: "bg-indigo-50",
|
||
textColor: "text-indigo-600",
|
||
},
|
||
{
|
||
id: 5,
|
||
name: "墨竹",
|
||
avatar: "/human/a4c1285f4d131a65821a541c1d58181a.jpg",
|
||
category: "创意设计",
|
||
description: "富有创意的设计师，擅长视觉设计、艺术创作、品牌策划，为您的创意项目注入灵感。",
|
||
color: "from-green-500 to-emerald-500",
|
||
bgColor: "bg-green-50",
|
||
textColor: "text-green-600",
|
||
},
|
||
{
|
||
id: 6,
|
||
name: "清风",
|
||
avatar: "/human/aa5332e4434fcf0cc8bcb9a4d8122ad0.jpeg",
|
||
category: "健康顾问",
|
||
description: "专业的健康管理师，提供健康咨询、饮食建议、运动指导，守护您和家人的健康生活。",
|
||
color: "from-teal-500 to-cyan-500",
|
||
bgColor: "bg-teal-50",
|
||
textColor: "text-teal-600",
|
||
},
|
||
{
|
||
id: 7,
|
||
name: "小悦",
|
||
avatar: "/human/dd709ef07f783ef0b912127191004580.jpg",
|
||
category: "娱乐主播",
|
||
description: "活力四射的娱乐主播，擅长直播互动、内容策划、粉丝运营，为您的娱乐生活带来无限精彩。",
|
||
color: "from-orange-500 to-amber-500",
|
||
bgColor: "bg-orange-50",
|
||
textColor: "text-orange-600",
|
||
},
|
||
{
|
||
id: 8,
|
||
name: "心灵",
|
||
avatar: "/human/decbb93c49351eae57b4f3251cab9f26.jpg",
|
||
category: "心理咨询",
|
||
description: "温柔专业的心理咨询师，提供情绪疏导、心理测评、压力管理，守护您的心理健康。",
|
||
color: "from-violet-500 to-purple-500",
|
||
bgColor: "bg-violet-50",
|
||
textColor: "text-violet-600",
|
||
},
|
||
]
|
||
|
||
const categories = ["全部", "商务助手", "教育导师", "生活陪伴", "科技顾问", "创意设计", "健康顾问", "娱乐主播", "心理咨询"]
|
||
|
||
export default function DigitalHumansPage() {
|
||
return (
|
||
<div className="min-h-screen bg-gray-50">
|
||
{/* 导航栏 */}
|
||
<nav className="bg-white border-b border-gray-200 fixed top-0 left-0 right-0 z-50 shadow-sm">
|
||
<div className="max-w-6xl mx-auto px-6 py-3">
|
||
<div className="flex items-center justify-between">
|
||
<Link href="/" className="flex items-center gap-2">
|
||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||
<span className="text-white font-bold text-sm">AI</span>
|
||
</div>
|
||
<span className="font-bold text-gray-900">冲浪智能体广场</span>
|
||
</Link>
|
||
<div className="flex items-center gap-6">
|
||
<Link href="/" className="text-gray-600 hover:text-blue-600 transition">首页</Link>
|
||
<Link href="/agents" className="text-gray-600 hover:text-blue-600 transition">智能体广场</Link>
|
||
<Link href="/digital-humans" className="text-blue-600 font-medium">数字人</Link>
|
||
<Link href="/news" className="text-gray-600 hover:text-blue-600 transition">新闻动态</Link>
|
||
<Link
|
||
href="/admin/login"
|
||
className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition"
|
||
>
|
||
登录
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main className="pt-16">
|
||
{/* Hero 区域 */}
|
||
<section className="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-20">
|
||
<div className="max-w-6xl mx-auto px-6 text-center">
|
||
<div className="text-6xl mb-6">🧑💼</div>
|
||
<h1 className="text-4xl md:text-5xl font-bold mb-4">
|
||
数字人库
|
||
</h1>
|
||
<p className="text-lg text-white/90 leading-relaxed max-w-2xl mx-auto">
|
||
探索我们的虚拟数字人角色，每个数字人都拥有独特的个性、专业技能和应用场景，
|
||
为您的工作和生活提供智能化服务。
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 分类筛选 */}
|
||
<section className="py-8 bg-white border-b border-gray-200">
|
||
<div className="max-w-6xl mx-auto px-6">
|
||
<div className="flex flex-wrap gap-3 justify-center">
|
||
{categories.map((category) => (
|
||
<button
|
||
key={category}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
|
||
category === "全部"
|
||
? "bg-purple-600 text-white"
|
||
: "bg-gray-100 text-gray-600 hover:bg-gray-200"
|
||
}`}
|
||
>
|
||
{category}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 数字人列表 */}
|
||
<section className="py-16">
|
||
<div className="max-w-6xl mx-auto px-6">
|
||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-x-4 gap-y-12">
|
||
{digitalHumans.map((human) => (
|
||
<div
|
||
key={human.id}
|
||
className="bg-white rounded-2xl border border-gray-200 overflow-hidden hover:border-purple-300 hover:shadow-lg transition-all duration-300"
|
||
>
|
||
{/* 图片区域 */}
|
||
<div className="relative aspect-[3/4] overflow-hidden">
|
||
<Image
|
||
src={human.avatar}
|
||
alt={human.name}
|
||
fill
|
||
className="object-contain"
|
||
/>
|
||
{/* 左下角遮罩显示姓名 */}
|
||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
|
||
<h3 className="text-lg font-bold text-white">{human.name}</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 特性介绍 */}
|
||
<section className="py-16 bg-white">
|
||
<div className="max-w-6xl mx-auto px-6">
|
||
<h2 className="text-2xl font-bold text-gray-900 text-center mb-10">为什么选择我们的数字人</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div className="text-center p-6">
|
||
<div className="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-4 text-3xl">
|
||
🎭
|
||
</div>
|
||
<h3 className="font-semibold text-gray-900 mb-2">逼真形象</h3>
|
||
<p className="text-sm text-gray-500">超写实数字人形象，支持表情动画、语音交互，带来沉浸式体验</p>
|
||
</div>
|
||
<div className="text-center p-6">
|
||
<div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4 text-3xl">
|
||
🧠
|
||
</div>
|
||
<h3 className="font-semibold text-gray-900 mb-2">智能交互</h3>
|
||
<p className="text-sm text-gray-500">基于大语言模型，支持多轮对话、上下文理解、智能决策</p>
|
||
</div>
|
||
<div className="text-center p-6">
|
||
<div className="w-16 h-16 bg-pink-100 rounded-2xl flex items-center justify-center mx-auto mb-4 text-3xl">
|
||
🎯
|
||
</div>
|
||
<h3 className="font-semibold text-gray-900 mb-2">场景定制</h3>
|
||
<p className="text-sm text-gray-500">针对不同应用场景深度优化，满足商务、教育、生活等多元需求</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
{/* 底部 */}
|
||
<div className="border-t border-gray-200 py-8">
|
||
<div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-7 h-7 bg-blue-600 rounded-lg flex items-center justify-center">
|
||
<span className="text-white font-bold text-xs">AI</span>
|
||
</div>
|
||
<span className="font-semibold text-gray-700 text-sm">江苏冲浪软件科技有限公司</span>
|
||
</div>
|
||
<div className="text-gray-400 text-sm text-center">
|
||
© 2026 江苏冲浪软件科技有限公司 · AI 智能体广场
|
||
</div>
|
||
<div className="flex gap-4 text-xs text-gray-400">
|
||
<a className="hover:text-gray-600 cursor-pointer transition">关于我们</a>
|
||
<a className="hover:text-gray-600 cursor-pointer transition">隐私政策</a>
|
||
<a className="hover:text-gray-600 cursor-pointer transition">联系我们</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|