Creation chat
17301595989
我想做一个类似https://www.beisen.com/的网站
09-12 07:42
暂无回复
No comments yet
登录 后可以评论
Assistant
我将为您创建一个类似北森官网风格的 B2B 企业服务 SaaS 网站——一个面向人力资源数字化转型的一体化人才管理云平台落地页。已参考其官网结构：顶部导航、Hero 主视觉、核心产品矩阵、平台能力、行业方案、成功案例、CTA 与页脚。
选用【现代蓝】配色方案，响应式、支持暗色模式。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>人才云平台 - 一体化企业人才管理 SaaS</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config = { darkMode: 'class' }</script>
</head>
<body class="min-h-screen bg-slate-50 dark:bg-slate-900 text-slate-700 dark:text-slate-200 antialiased">
<!-- 主题切换按钮 -->
<button id="theme-toggle-btn" class="fixed top-4 right-4 z-10 p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex items-center justify-center" aria-label="Toggle theme" onclick="toggleTheme()">
<svg id="icon-moon" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998z"/></svg>
<svg id="icon-sun" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg>
</button>
<script>
function toggleTheme(){ var el=document.documentElement; var isDark=!el.classList.contains('dark'); el.classList.toggle('dark',isDark); localStorage.setItem('theme',isDark?'dark':'light'); applyTheme(isDark); }
function applyTheme(isDark){ document.getElementById('icon-moon').style.display=isDark?'none':'block'; document.getElementById('icon-sun').style.display=isDark?'block':'none'; }
document.addEventListener('DOMContentLoaded',function(){ var saved=localStorage.getItem('theme'); var isDark=saved==='dark'||(!saved&&window.matchMedia('(prefers-color-scheme: dark)').matches); document.documentElement.classList.toggle('dark',isDark); applyTheme(isDark); });
</script>
<!-- 自定义弹窗 -->
<div id="custom-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 hidden" aria-hidden="true">
<div class="rounded-xl bg-white dark:bg-slate-800 p-6 shadow-xl max-w-sm w-full border border-slate-200 dark:border-slate-700">
<p id="custom-modal-msg" class="text-slate-700 dark:text-slate-200 mb-4"></p>
<button type="button" onclick="hideModal()" class="w-full rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">确定</button>
</div>
</div>
<script>
function showModal(msg){ var el=document.getElementById('custom-modal'); document.getElementById('custom-modal-msg').textContent=msg||''; el.classList.remove('hidden'); }
function hideModal(){ document.getElementById('custom-modal').classList.add('hidden'); }
</script>
<!-- ===== 顶部导航 ===== -->
<header class="sticky top-0 z-40 bg-white/90 dark:bg-slate-900/90 backdrop-blur border-b border-slate-200 dark:border-slate-700">
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<a href="#" class="flex items-center gap-2" onclick="event.preventDefault();scrollTop();">
<span class="w-9 h-9 rounded-lg bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center text-white font-bold text-lg">云</span>
<span class="text-xl font-semibold text-slate-900 dark:text-slate-100">人才云<span class="text-blue-600 dark:text-blue-400">TalentCloud</span></span>
</a>
<!-- 桌面菜单 -->
<div class="hidden lg:flex items-center gap-8 text-sm font-medium">
<a href="#products" class="hover:text-blue-600 dark:hover:text-blue-400">产品与方案</a>
<a href="#platform" class="hover:text-blue-600 dark:hover:text-blue-400">一体化平台</a>
<a href="#industries" class="hover:text-blue-600 dark:hover:text-blue-400">行业方案</a>
<a href="#cases" class="hover:text-blue-600 dark:hover:text-blue-400">成功案例</a>
<a href="#resources" class="hover:text-blue-600 dark:hover:text-blue-400">资源中心</a>
</div>
<div class="flex items-center gap-3">
<a href="#" onclick="event.preventDefault();showModal('已为您开通专属演示通道，销售顾问将尽快与您联系。')" class="hidden sm:inline-flex rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">申请体验</a>
<button id="mobile-menu-btn" class="lg:hidden w-9 h-9 flex items-center justify-center rounded-md text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700" onclick="toggleMobileMenu()" aria-label="打开菜单">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/></svg>
</button>
</div>
</nav>
<!-- 移动端菜单 -->
<div id="mobile-menu" class="lg:hidden hidden bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700">
<div class="px-4 py-3 flex flex-col gap-1 text-sm font-medium">
<a href="#products" class="py-2 px-2 rounded hover:bg-slate-100 dark:hover:bg-slate-700" onclick="toggleMobileMenu()">产品与方案</a>
<a href="#platform" class="py-2 px-2 rounded hover:bg-slate-100 dark:hover:bg-slate-700" onclick="toggleMobileMenu()">一体化平台</a>
<a href="#industries" class="py-2 px-2 rounded hover:bg-slate-100 dark:hover:bg-slate-700" onclick="toggleMobileMenu()">行业方案</a>
<a href="#cases" class="py-2 px-2 rounded hover:bg-slate-100 dark:hover:bg-slate-700" onclick="toggleMobileMenu()">成功案例</a>
<a href="#resources" class="py-2 px-2 rounded hover:bg-slate-100 dark:hover:bg-slate-700" onclick="toggleMobileMenu()">资源中心</a>
</div>
</div>
</header>
<!-- ===== Hero 主视觉 ===== -->
<section class="relative overflow-hidden bg-slate-50 dark:bg-slate-900">
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<div class="absolute -top-24 -right-24 w-96 h-96 rounded-full bg-blue-100 dark:bg-blue-900/30 blur-3xl"></div>
<div class="absolute -bottom-32 -left-20 w-96 h-96 rounded-full bg-indigo-100 dark:bg-indigo-900/30 blur-3xl"></div>
</div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 lg:pt-28 lg:pb-32">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<span class="inline-flex items-center rounded-full border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/30 px-3 py-1 text-xs font-medium text-blue-700 dark:text-blue-300 mb-6">
<span class="w-2 h-2 rounded-full bg-blue-500 animate-pulse mr-2"></span> 全新 AI 原生人才管理平台
</span>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-slate-900 dark:text-slate-100 leading-tight">
一体化人才管理
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-500">云平台</span>
</h1>
<p class="mt-6 text-lg text-slate-600 dark:text-slate-300 max-w-xl">
覆盖招聘、测评、绩效、假勤、薪酬、盘点到发展的员工全生命周期，打通 HR 业务断点，以数据驱动人力决策，赋能企业从人力成功走向业务成功。
</p>
<div class="mt-8 flex flex-wrap gap-4">
<a href="#" onclick="event.preventDefault();showModal('已为您开通专属演示通道，销售顾问将尽快与您联系。')" class="rounded-lg bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 px-6 py-3 text-white font-medium shadow-lg shadow-blue-600/20">申请体验</a>
<a href="#products" class="rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-6 py-3 font-medium text-slate-700 dark:text-slate-200 hover:border-blue-400 hover:text-blue-600 dark:hover:text-blue-400">查看产品矩阵</a>
</div>
<p class="mt-6 text-sm text-slate-500 dark:text-slate-400">已服务 <span class="font-semibold text-slate-700 dark:text-slate-200">6,000+</span> 企业客户 · 覆盖 <span class="font-semibold text-slate-700 dark:text-slate-200">40+</span> 行业</p>
</div>
<!-- 右侧产品概览卡片 -->
<div class="relative">
<div class="rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 shadow-xl p-6 sm:p-8">
<p class="text-sm font-semibold text-slate-500 dark:text-slate-400 tracking-wide mb-4">人才管理全生命周期</p>
<div class="grid grid-cols-2 gap-3">
<div class="rounded-xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 p-4">
<div class="text-blue-600 dark:text-blue-400 font-bold text-xl">招聘</div>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">渠道归集 · 流程协同</p>
</div>
<div class="rounded-xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 p-4">
<div class="text-blue-600 dark:text-blue-400 font-bold text-xl">测评</div>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">人才画像 · 360评估</p>
</div>
<div class="rounded-xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 p-4">
<div class="text-blue-600 dark:text-blue-400 font-bold text-xl">绩效</div>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">OKR · 目标管理</p>
</div>
<div class="rounded-xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 p-4">
<div class="text-blue-600 dark:text-blue-400 font-bold text-xl">薪酬</div>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">精准算薪 · 成本预算</p>
</div>
<div class="rounded-xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 p-4">
<div class="text-blue-600 dark:text-blue-400 font-bold text-xl">假勤</div>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">智能排班 · 复杂假勤</p>
</div>
<div class="rounded-xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 p-4">
<div class="text-blue-600 dark:text-blue-400 font-bold text-xl">盘点</div>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">继任发展 · 人才洞察</p>
</div>
</div>
<a href="#platform" class="mt-5 inline-flex items-center text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700">
了解一体化平台能力
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- ===== 数据/徽标带 ===== -->
<section class="border-y border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<p class="text-center text-sm text-slate-500 dark:text-slate-400 mb-6">深受中国领先企业信赖</p>
<div class="flex flex-wrap justify-center items-center gap-x-10 gap-y-4 text-slate-400 dark:text-slate-500">
<span class="text-lg font-semibold tracking-wide">海尔</span>
<span class="text-lg font-semibold tracking-wide">中国平安</span>
<span class="text-lg font-semibold tracking-wide">字节跳动</span>
<span class="text-lg font-semibold tracking-wide">比亚迪</span>
<span class="text-lg font-semibold tracking-wide">万科</span>
<span class="text-lg font-semibold tracking-wide">招商银行</span>
</div>
</div>
</section>
<!-- ===== 产品与方案 ===== -->
<section id="products" class="py-20 bg-slate-50 dark:bg-slate-900 scroll-mt-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-14">
<p class="text-blue-600 dark:text-blue-400 font-semibold text-sm tracking-widest uppercase mb-2">Product Matrix</p>
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-slate-100">产品与解决方案</h2>
<p class="mt-4 text-slate-600 dark:text-slate-300">以场景为驱动，覆盖 HR 全业务模块，让每一功能真正落地业务价值。</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<a href="#" onclick="event.preventDefault();showModal('招聘管理：渠道归集、流程协同、人才质量与多角色协同。')" class="group rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 hover:border-blue-400 dark:hover:border-blue-600 hover:shadow-lg transition">
<div class="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-900/40 flex items-center justify-center text-blue-600 dark:text-blue-400 mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M21 21l-4.35-4.35M16 16a5 5 0 1 0-10 0 5 5 0 0 0 10 0z" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">招聘管理系统</h3>
<p class="text-sm text-slate-600 dark:text-slate-300">招聘流程、渠道管理、人才质量与多角色协同，科技赋能校招与社招。</p>
</a>
<a href="#" onclick="event.preventDefault();showModal('人才测评：招聘测评、管理测评与专业测评中心，构建人才模型。')" class="group rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 hover:border-blue-400 dark:hover:border-blue-600 hover:shadow-lg transition">
<div class="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-900/40 flex items-center justify-center text-blue-600 dark:text-blue-400 mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M8 8h8M8 12h8M8 16h4M4 20h16a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1z" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">人才测评</h3>
<p class="text-sm text-slate-600 dark:text-slate-300">招聘测评、人才管理测评、360 度评估与人才模型构建。</p>
</a>
<a href="#" onclick="event.preventDefault();showModal('绩效管理：OKR 目标管理、员工绩效与组织绩效。')" class="group rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 hover:border-blue-400 dark:hover:border-blue-600 hover:shadow-lg transition">
<div class="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-900/40 flex items-center justify-center text-blue-600 dark:text-blue-400 mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M3 3v18h18M7 14l4-4 3 3 5-6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">绩效管理</h3>
<p class="text-sm text-slate-600 dark:text-slate-300">OKR 目标管理、员工绩效与组织绩效，对齐战略目标。</p>
</a>
<a href="#" onclick="event.preventDefault();showModal('组织人事：组织管理、员工任职与实时数据报表。')" class="group rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 hover:border-blue-400 dark:hover:border-blue-600 hover:shadow-lg transition">
<div class="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-900/40 flex items-center justify-center text-blue-600 dark:text-blue-400 mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M4 20v-3a4 4 0 0 1 4-4h.5M14 20v-3a4 4 0 0 0-4-4m-2.5 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm8 2v-3a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">组织人事</h3>
<p class="text-sm text-slate-600 dark:text-slate-300">组织管理、员工和任职、角色工作台与实时数据报表。</p>
</a>
<a href="#" onclick="event.preventDefault();showModal('假勤管理：智能排班、复杂假勤与工时分析。')" class="group rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 hover:border-blue-400 dark:hover:border-blue-600 hover:shadow-lg transition">
<div class="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-900/40 flex items-center justify-center text-blue-600 dark:text-blue-400 mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">假勤管理</h3>
<p class="text-sm text-slate-600 dark:text-slate-300">智能排班、复杂假勤与工时分析，提升排班效率。</p>
</a>
<a href="#" onclick="event.preventDefault();showModal('薪酬管理：薪酬体系、精准算薪与激励佣金管理。')" class="group rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 hover:border-blue-400 dark:hover:border-blue-600 hover:shadow-lg transition">
<div class="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-900/40 flex items-center justify-center text-blue-600 dark:text-blue-400 mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M16 12a4 4 0 1 0-8 0 4 4 0 0 0 8 0z" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">薪酬管理</h3>
<p class="text-sm text-slate-600 dark:text-slate-300">薪酬体系、精准算薪与薪酬激励和佣金管理。</p>
</a>
</div>
</div>
</section>
<!-- ===== 一体化平台 ===== -->
<section id="platform" class="py-20 bg-white dark:bg-slate-800 scroll-mt-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-14 items-center">
<div>
<p class="text-blue-600 dark:text-blue-400 font-semibold text-sm tracking-widest uppercase mb-2">One Platform</p>
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-slate-100">一体化平台，打通 HR 数据与业务闭环</h2>
<p class="mt-5 text-slate-600 dark:text-slate-300">构建于 PaaS 基础设施之上，整合场景、体验、数据与平台，实现员工从应聘、入职、发展到离职全周期数字化的无缝连接。</p>
<div class="mt-8 space-y-6">
<div class="flex gap-4">
<div class="w-11 h-11 rounded-xl bg-amber-100 dark:bg-amber-900/40 flex-shrink-0 flex items-center justify-center text-amber-600 dark:text-amber-400">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 8l4 4-4 4M7 16l-4-4 4-4M13 5l-2 14" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div>
<h3 class="font-semibold text-slate-900 dark:text-slate-100">业务场景一体化</h3>
<p class="text-sm text-slate-600 dark:text-slate-300 mt-1">拒绝场景割裂，人力全流程业务闭环，衔接应聘、入职、绩效、薪酬全链路。</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-11 h-11 rounded-xl bg-amber-100 dark:bg-amber-900/40 flex-shrink-0 flex items-center justify-center text-amber-600 dark:text-amber-400">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7l8-4z" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div>
<h3 class="font-semibold text-slate-900 dark:text-slate-100">员工体验一体化</h3>
<p class="text-sm text-slate-600 dark:text-slate-300 mt-1">多角色专属工作台，业务与人力数据集中一体，摆脱繁琐事务。</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-11 h-11 rounded-xl bg-amber-100 dark:bg-amber-900/40 flex-shrink-0 flex items-center justify-center text-amber-600 dark:text-amber-400">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 19V5M4 19h16M8 15v1m4-4v4m4-7v7" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div>
<h3 class="font-semibold text-slate-900 dark:text-slate-100">数据分析一体化</h3>
<p class="text-sm text-slate-600 dark:text-slate-300 mt-1">200+ 指标体系与 People Analytics，将人力数据转化为经营决策。</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-11 h-11 rounded-xl bg-amber-100 dark:bg-amber-900/40 flex-shrink-0 flex items-center justify-center text-amber-600 dark:text-amber-400">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2l3 3-3 3-3-3 3-3zM12 16l3 3-3 3-3-3 3-3zM2 12l3-3 3 3-3 3-3-3zM16 12l3-3 3 3-3 3-3-3z" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div>
<h3 class="font-semibold text-slate-900 dark:text-slate-100">PaaS 平台定制化</h3>
<p class="text-sm text-slate-600 dark:text-slate-300 mt-1">鲁班 PaaS 低代码平台，敏捷响应企业个性化需求。</p>
</div>
</div>
</div>
</div>
<!-- 平台架构示意图 -->
<div class="rounded-2xl bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-700 p-8">
<div class="text-center mb-6">
<span class="rounded-lg bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-5 py-2 text-sm font-medium shadow">人才云 TalentCloud 架构</span>
</div>
<div class="space-y-4">
<div class="grid grid-cols-3 gap-3">
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-3 text-center text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm">招聘云</div>
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-3 text-center text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm">测评云</div>
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-3 text-center text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm">绩效云</div>
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-3 text-center text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm">假勤云</div>
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-3 text-center text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm">薪酬云</div>
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-3 text-center text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm">学习云</div>
</div>
<!-- 连接线箭头 -->
<div class="flex justify-center text-blue-500 dark:text-blue-400 text-xl">↓</div>
<div class="rounded-xl bg-blue-600/10 dark:bg-blue-500/10 border border-blue-300 dark:border-blue-700 p-4 text-center">
<span class="text-sm font-semibold text-blue-700 dark:text-blue-300">统一数据底座 · 组织 / 人事 / 权限中枢</span>
</div>
<div class="flex justify-center text-blue-500 dark:text-blue-400 text-xl">↑</div>
<div class="rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white p-4 text-center text-sm font-medium shadow-lg">鲁班 PaaS 低代码平台 & AI 智能引擎</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== 行业方案 ===== -->
<section id="industries" class="py-20 bg-slate-50 dark:bg-slate-900 scroll-mt-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-14">
<p class="text-blue-600 dark:text-blue-400 font-semibold text-sm tracking-widest uppercase mb-2">Industry Solutions</p>
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-slate-100">深度行业方案</h2>
<p class="mt-4 text-slate-600 dark:text-slate-300">深耕行业场景，为不同行业的组织与人才管理提供专业化解决方案。</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="group overflow-hidden rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:shadow-lg transition">
<div class="overflow-hidden h-44">
<img src="https://picsum.photos/seed/internet/600/340" alt="互联网行业方案" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
▼ Code
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>人才云平台 - 一体化企业人才管理 SaaS</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config = { darkMode: 'class' }</script>
</head>
<body class="min-h-screen bg-slate-50 dark:bg-slate-900 text-slate-700 dark:text-slate-200 antialiased">
<!-- 主题切换按钮 -->
<button id="theme-toggle-btn" class="fixed top-4 right-4 z-10 p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex items-center justify-center" aria-label="Toggle theme" onclick="toggleTheme()">
<svg id="icon-moon" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998z"/></svg>
<svg id="icon-sun" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg>
</button>
<script>
function toggleTheme(){ var el=document.documentElement; var isDark=!el.classList.contains('dark'); el.classList.toggle('dark',isDark); localStorage.setItem('theme',isDark?'dark':'light'); applyTheme(isDark); }
function applyTheme(isDark){ document.getElementById('icon-moon').style.display=isDark?'none':'block'; document.getElementById('icon-sun').style.display=isDark?'block':'none'; }
document.addEventListener('DOMContentLoaded',function(){ var saved=localStorage.getItem('theme'); var isDark=saved==='dark'||(!saved&&window.matchMedia('(prefers-color-scheme: dark)').matches); document.documentElement.classList.toggle('dark',isDark); applyTheme(isDark); });
</script>
<!-- 自定义弹窗 -->
<div id="custom-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 hidden" aria-hidden="true">
<div class="rounded-xl bg-white dark:bg-slate-800 p-6 shadow-xl max-w-sm w-full border border-slate-200 dark:border-slate-700">
<p id="custom-modal-msg" class="text-slate-700 dark:text-slate-200 mb-4"></p>
<button type="button" onclick="hideModal()" class="w-full rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">确定</button>
</div>
</div>
<script>
function showModal(msg){ var el=document.getElementById('custom-modal'); document.getElementById('custom-modal-msg').textContent=msg||''; el.classList.remove('hidden'); }
function hideModal(){ document.getElementById('custom-modal').classList.add('hidden'); }
</script>
<!-- ===== 顶部导航 ===== -->
<header class="sticky top-0 z-40 bg-white/90 dark:bg-slate-900/90 backdrop-blur border-b border-slate-200 dark:border-slate-700">
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<a href="#" class="flex items-center gap-2" onclick="event.preventDefault();scrollTop();">
<span class="w-9 h-9 rounded-lg bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center text-white font-bold text-lg">云</span>
<span class="text-xl font-semibold text-slate-900 dark:text-slate-100">人才云<span class="text-blue-600 dark:text-blue-400">TalentCloud</span></span>
</a>
<!-- 桌面菜单 -->
<div class="hidden lg:flex items-center gap-8 text-sm font-medium">
<a href="#products" class="hover:text-blue-600 dark:hover:text-blue-400">产品与方案</a>
<a href="#platform" class="hover:text-blue-600 dark:hover:text-blue-400">一体化平台</a>
<a href="#industries" class="hover:text-blue-600 dark:hover:text-blue-400">行业方案</a>
<a href="#cases" class="hover:text-blue-600 dark:hover:text-blue-400">成功案例</a>
<a href="#resources" class="hover:text-blue-600 dark:hover:text-blue-400">资源中心</a>
</div>
<div class="flex items-center gap-3">
<a href="#" onclick="event.preventDefault();showModal('已为您开通专属演示通道，销售顾问将尽快与您联系。')" class="hidden sm:inline-flex rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">申请体验</a>
<button id="mobile-menu-btn" class="lg:hidden w-9 h-9 flex items-center justify-center rounded-md text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700" onclick="toggleMobileMenu()" aria-label="打开菜单">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/></svg>
</button>
</div>
</nav>
<!-- 移动端菜单 -->
<div id="mobile-menu" class="lg:hidden hidden bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700">
<div class="px-4 py-3 flex flex-col gap-1 text-sm font-medium">
<a href="#products" class="py-2 px-2 rounded hover:bg-slate-100 dark:hover:bg-slate-700" onclick="toggleMobileMenu()">产品与方案</a>
<a href="#platform" class="py-2 px-2 rounded hover:bg-slate-100 dark:hover:bg-slate-700" onclick="toggleMobileMenu()">一体化平台</a>
<a href="#industries" class="py-2 px-2 rounded hover:bg-slate-100 dark:hover:bg-slate-700" onclick="toggleMobileMenu()">行业方案</a>
<a href="#cases" class="py-2 px-2 rounded hover:bg-slate-100 dark:hover:bg-slate-700" onclick="toggleMobileMenu()">成功案例</a>
<a href="#resources" class="py-2 px-2 rounded hover:bg-slate-100 dark:hover:bg-slate-700" onclick="toggleMobileMenu()">资源中心</a>
</div>
</div>
</header>
<!-- ===== Hero 主视觉 ===== -->
<section class="relative overflow-hidden bg-slate-50 dark:bg-slate-900">
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<div class="absolute -top-24 -right-24 w-96 h-96 rounded-full bg-blue-100 dark:bg-blue-900/30 blur-3xl"></div>
<div class="absolute -bottom-32 -left-20 w-96 h-96 rounded-full bg-indigo-100 dark:bg-indigo-900/30 blur-3xl"></div>
</div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 lg:pt-28 lg:pb-32">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<span class="inline-flex items-center rounded-full border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/30 px-3 py-1 text-xs font-medium text-blue-700 dark:text-blue-300 mb-6">
<span class="w-2 h-2 rounded-full bg-blue-500 animate-pulse mr-2"></span> 全新 AI 原生人才管理平台
</span>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-slate-900 dark:text-slate-100 leading-tight">
一体化人才管理
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-500">云平台</span>
</h1>
<p class="mt-6 text-lg text-slate-600 dark:text-slate-300 max-w-xl">
覆盖招聘、测评、绩效、假勤、薪酬、盘点到发展的员工全生命周期，打通 HR 业务断点，以数据驱动人力决策，赋能企业从人力成功走向业务成功。
</p>
<div class="mt-8 flex flex-wrap gap-4">
<a href="#" onclick="event.preventDefault();showModal('已为您开通专属演示通道，销售顾问将尽快与您联系。')" class="rounded-lg bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 px-6 py-3 text-white font-medium shadow-lg shadow-blue-600/20">申请体验</a>
<a href="#products" class="rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-6 py-3 font-medium text-slate-700 dark:text-slate-200 hover:border-blue-400 hover:text-blue-600 dark:hover:text-blue-400">查看产品矩阵</a>
</div>
<p class="mt-6 text-sm text-slate-500 dark:text-slate-400">已服务 <span class="font-semibold text-slate-700 dark:text-slate-200">6,000+</span> 企业客户 · 覆盖 <span class="font-semibold text-slate-700 dark:text-slate-200">40+</span> 行业</p>
</div>
<!-- 右侧产品概览卡片 -->
<div class="relative">
<div class="rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 shadow-xl p-6 sm:p-8">
<p class="text-sm font-semibold text-slate-500 dark:text-slate-400 tracking-wide mb-4">人才管理全生命周期</p>
<div class="grid grid-cols-2 gap-3">
<div class="rounded-xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 p-4">
<div class="text-blue-600 dark:text-blue-400 font-bold text-xl">招聘</div>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">渠道归集 · 流程协同</p>
</div>
<div class="rounded-xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 p-4">
<div class="text-blue-600 dark:text-blue-400 font-bold text-xl">测评</div>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">人才画像 · 360评估</p>
</div>
<div class="rounded-xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 p-4">
<div class="text-blue-600 dark:text-blue-400 font-bold text-xl">绩效</div>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">OKR · 目标管理</p>
</div>
<div class="rounded-xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 p-4">
<div class="text-blue-600 dark:text-blue-400 font-bold text-xl">薪酬</div>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">精准算薪 · 成本预算</p>
</div>
<div class="rounded-xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 p-4">
<div class="text-blue-600 dark:text-blue-400 font-bold text-xl">假勤</div>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">智能排班 · 复杂假勤</p>
</div>
<div class="rounded-xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 p-4">
<div class="text-blue-600 dark:text-blue-400 font-bold text-xl">盘点</div>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">继任发展 · 人才洞察</p>
</div>
</div>
<a href="#platform" class="mt-5 inline-flex items-center text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700">
了解一体化平台能力
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- ===== 数据/徽标带 ===== -->
<section class="border-y border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<p class="text-center text-sm text-slate-500 dark:text-slate-400 mb-6">深受中国领先企业信赖</p>
<div class="flex flex-wrap justify-center items-center gap-x-10 gap-y-4 text-slate-400 dark:text-slate-500">
<span class="text-lg font-semibold tracking-wide">海尔</span>
<span class="text-lg font-semibold tracking-wide">中国平安</span>
<span class="text-lg font-semibold tracking-wide">字节跳动</span>
<span class="text-lg font-semibold tracking-wide">比亚迪</span>
<span class="text-lg font-semibold tracking-wide">万科</span>
<span class="text-lg font-semibold tracking-wide">招商银行</span>
</div>
</div>
</section>
<!-- ===== 产品与方案 ===== -->
<section id="products" class="py-20 bg-slate-50 dark:bg-slate-900 scroll-mt-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-14">
<p class="text-blue-600 dark:text-blue-400 font-semibold text-sm tracking-widest uppercase mb-2">Product Matrix</p>
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-slate-100">产品与解决方案</h2>
<p class="mt-4 text-slate-600 dark:text-slate-300">以场景为驱动，覆盖 HR 全业务模块，让每一功能真正落地业务价值。</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<a href="#" onclick="event.preventDefault();showModal('招聘管理：渠道归集、流程协同、人才质量与多角色协同。')" class="group rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 hover:border-blue-400 dark:hover:border-blue-600 hover:shadow-lg transition">
<div class="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-900/40 flex items-center justify-center text-blue-600 dark:text-blue-400 mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M21 21l-4.35-4.35M16 16a5 5 0 1 0-10 0 5 5 0 0 0 10 0z" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">招聘管理系统</h3>
<p class="text-sm text-slate-600 dark:text-slate-300">招聘流程、渠道管理、人才质量与多角色协同，科技赋能校招与社招。</p>
</a>
<a href="#" onclick="event.preventDefault();showModal('人才测评：招聘测评、管理测评与专业测评中心，构建人才模型。')" class="group rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 hover:border-blue-400 dark:hover:border-blue-600 hover:shadow-lg transition">
<div class="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-900/40 flex items-center justify-center text-blue-600 dark:text-blue-400 mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M8 8h8M8 12h8M8 16h4M4 20h16a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1z" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">人才测评</h3>
<p class="text-sm text-slate-600 dark:text-slate-300">招聘测评、人才管理测评、360 度评估与人才模型构建。</p>
</a>
<a href="#" onclick="event.preventDefault();showModal('绩效管理：OKR 目标管理、员工绩效与组织绩效。')" class="group rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 hover:border-blue-400 dark:hover:border-blue-600 hover:shadow-lg transition">
<div class="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-900/40 flex items-center justify-center text-blue-600 dark:text-blue-400 mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M3 3v18h18M7 14l4-4 3 3 5-6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">绩效管理</h3>
<p class="text-sm text-slate-600 dark:text-slate-300">OKR 目标管理、员工绩效与组织绩效，对齐战略目标。</p>
</a>
<a href="#" onclick="event.preventDefault();showModal('组织人事：组织管理、员工任职与实时数据报表。')" class="group rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 hover:border-blue-400 dark:hover:border-blue-600 hover:shadow-lg transition">
<div class="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-900/40 flex items-center justify-center text-blue-600 dark:text-blue-400 mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M4 20v-3a4 4 0 0 1 4-4h.5M14 20v-3a4 4 0 0 0-4-4m-2.5 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm8 2v-3a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">组织人事</h3>
<p class="text-sm text-slate-600 dark:text-slate-300">组织管理、员工和任职、角色工作台与实时数据报表。</p>
</a>
<a href="#" onclick="event.preventDefault();showModal('假勤管理：智能排班、复杂假勤与工时分析。')" class="group rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 hover:border-blue-400 dark:hover:border-blue-600 hover:shadow-lg transition">
<div class="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-900/40 flex items-center justify-center text-blue-600 dark:text-blue-400 mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">假勤管理</h3>
<p class="text-sm text-slate-600 dark:text-slate-300">智能排班、复杂假勤与工时分析，提升排班效率。</p>
</a>
<a href="#" onclick="event.preventDefault();showModal('薪酬管理：薪酬体系、精准算薪与激励佣金管理。')" class="group rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 hover:border-blue-400 dark:hover:border-blue-600 hover:shadow-lg transition">
<div class="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-900/40 flex items-center justify-center text-blue-600 dark:text-blue-400 mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M16 12a4 4 0 1 0-8 0 4 4 0 0 0 8 0z" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">薪酬管理</h3>
<p class="text-sm text-slate-600 dark:text-slate-300">薪酬体系、精准算薪与薪酬激励和佣金管理。</p>
</a>
</div>
</div>
</section>
<!-- ===== 一体化平台 ===== -->
<section id="platform" class="py-20 bg-white dark:bg-slate-800 scroll-mt-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-14 items-center">
<div>
<p class="text-blue-600 dark:text-blue-400 font-semibold text-sm tracking-widest uppercase mb-2">One Platform</p>
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-slate-100">一体化平台，打通 HR 数据与业务闭环</h2>
<p class="mt-5 text-slate-600 dark:text-slate-300">构建于 PaaS 基础设施之上，整合场景、体验、数据与平台，实现员工从应聘、入职、发展到离职全周期数字化的无缝连接。</p>
<div class="mt-8 space-y-6">
<div class="flex gap-4">
<div class="w-11 h-11 rounded-xl bg-amber-100 dark:bg-amber-900/40 flex-shrink-0 flex items-center justify-center text-amber-600 dark:text-amber-400">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 8l4 4-4 4M7 16l-4-4 4-4M13 5l-2 14" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div>
<h3 class="font-semibold text-slate-900 dark:text-slate-100">业务场景一体化</h3>
<p class="text-sm text-slate-600 dark:text-slate-300 mt-1">拒绝场景割裂，人力全流程业务闭环，衔接应聘、入职、绩效、薪酬全链路。</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-11 h-11 rounded-xl bg-amber-100 dark:bg-amber-900/40 flex-shrink-0 flex items-center justify-center text-amber-600 dark:text-amber-400">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7l8-4z" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div>
<h3 class="font-semibold text-slate-900 dark:text-slate-100">员工体验一体化</h3>
<p class="text-sm text-slate-600 dark:text-slate-300 mt-1">多角色专属工作台，业务与人力数据集中一体，摆脱繁琐事务。</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-11 h-11 rounded-xl bg-amber-100 dark:bg-amber-900/40 flex-shrink-0 flex items-center justify-center text-amber-600 dark:text-amber-400">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 19V5M4 19h16M8 15v1m4-4v4m4-7v7" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div>
<h3 class="font-semibold text-slate-900 dark:text-slate-100">数据分析一体化</h3>
<p class="text-sm text-slate-600 dark:text-slate-300 mt-1">200+ 指标体系与 People Analytics，将人力数据转化为经营决策。</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-11 h-11 rounded-xl bg-amber-100 dark:bg-amber-900/40 flex-shrink-0 flex items-center justify-center text-amber-600 dark:text-amber-400">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2l3 3-3 3-3-3 3-3zM12 16l3 3-3 3-3-3 3-3zM2 12l3-3 3 3-3 3-3-3zM16 12l3-3 3 3-3 3-3-3z" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div>
<h3 class="font-semibold text-slate-900 dark:text-slate-100">PaaS 平台定制化</h3>
<p class="text-sm text-slate-600 dark:text-slate-300 mt-1">鲁班 PaaS 低代码平台，敏捷响应企业个性化需求。</p>
</div>
</div>
</div>
</div>
<!-- 平台架构示意图 -->
<div class="rounded-2xl bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-700 p-8">
<div class="text-center mb-6">
<span class="rounded-lg bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-5 py-2 text-sm font-medium shadow">人才云 TalentCloud 架构</span>
</div>
<div class="space-y-4">
<div class="grid grid-cols-3 gap-3">
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-3 text-center text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm">招聘云</div>
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-3 text-center text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm">测评云</div>
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-3 text-center text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm">绩效云</div>
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-3 text-center text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm">假勤云</div>
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-3 text-center text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm">薪酬云</div>
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-3 text-center text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm">学习云</div>
</div>
<!-- 连接线箭头 -->
<div class="flex justify-center text-blue-500 dark:text-blue-400 text-xl">↓</div>
<div class="rounded-xl bg-blue-600/10 dark:bg-blue-500/10 border border-blue-300 dark:border-blue-700 p-4 text-center">
<span class="text-sm font-semibold text-blue-700 dark:text-blue-300">统一数据底座 · 组织 / 人事 / 权限中枢</span>
</div>
<div class="flex justify-center text-blue-500 dark:text-blue-400 text-xl">↑</div>
<div class="rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white p-4 text-center text-sm font-medium shadow-lg">鲁班 PaaS 低代码平台 & AI 智能引擎</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== 行业方案 ===== -->
<section id="industries" class="py-20 bg-slate-50 dark:bg-slate-900 scroll-mt-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-14">
<p class="text-blue-600 dark:text-blue-400 font-semibold text-sm tracking-widest uppercase mb-2">Industry Solutions</p>
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-slate-100">深度行业方案</h2>
<p class="mt-4 text-slate-600 dark:text-slate-300">深耕行业场景，为不同行业的组织与人才管理提供专业化解决方案。</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="group overflow-hidden rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:shadow-lg transition">
<div class="overflow-hidden h-44">
<img src="https://picsum.photos/seed/internet/600/340" alt="互联网行业方案" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
09-12 07:43
暂无回复
No comments yet
登录 后可以评论
Comments
暂无回复
No comments yet
登录 后可以评论