SMANAGE/backup/www/Invite/RecruitingTalentedIndividuals/index.html

<div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-slate-50 py-20 px-4">
	<div class="text-center mb-16">
		<div class="inline-flex items-center gap-2 bg-blue-500/10 border border-blue-500/20 text-blue-600 text-sm px-4 py-1.5 rounded-full mb-6">
			<span class="w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse"></span> 我们正在招募优秀人才
		</div>
		<h1 class="text-5xl font-bold text-slate-900 mb-4 tracking-tight"> 招贤 <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-600">纳士</span></h1>
		<p class="text-slate-600 text-lg max-w-xl mx-auto leading-relaxed"> 加入我们，与一群有理想、有激情的伙伴共同构建项目 </p>
	</div>
	<div class="flex justify-center gap-12 mb-20">
		<div class="text-center">
			<div class="text-3xl font-bold text-slate-900">20+</div>
			<div class="text-slate-500 text-sm mt-1">团队成员</div>
		</div>
		<!--div class="w-px bg-slate-200"></div>
		<div class="text-center">
			<div class="text-3xl font-bold text-slate-900">30+</div>
			<div class="text-slate-500 text-sm mt-1">开放职位</div>
		</div>
		<div class="w-px bg-slate-200"></div>
		<div class="text-center">
			<div class="text-3xl font-bold text-slate-900">12</div>
			<div class="text-slate-500 text-sm mt-1">城市分部</div>
		</div-->
	</div>
	<div class="flex justify-center gap-2 mb-10 flex-wrap" id="filter-tabs"></div>
	<div class="max-w-4xl mx-auto space-y-4" id="job-list"></div>
	<div class="text-center mb-20 mt-20">
		<div class="inline-flex items-center gap-2 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 text-sm px-4 py-1.5 rounded-full mb-6">
			<span class="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse"></span> 为什么选择我们
		</div>
		<h2 class="text-5xl font-bold text-slate-900 mb-4 tracking-tight"> 加入我们， <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-cyan-600">能获得什么</span>
		</h2>
		<p class="text-slate-600 text-lg max-w-xl mx-auto"> 我们相信每一位成员都值得被看见、被支持、被表扬 </p>
	</div>
	<div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 mb-8" id="benefits-grid"></div>
	<div class="max-w-6xl mx-auto mt-6">
		<div class="relative rounded-3xl overflow-hidden border border-slate-200 bg-white p-10 text-center shadow-sm">
			<div class="absolute inset-0 pointer-events-none">
				<div class="absolute -top-20 left-1/2 -translate-x-1/2 w-96 h-40 bg-blue-500/5 rounded-full blur-3xl"></div>
				<div class="absolute -bottom-10 left-1/4 w-64 h-32 bg-emerald-500/5 rounded-full blur-3xl"></div>
				<div class="absolute -bottom-10 right-1/4 w-64 h-32 bg-cyan-500/5 rounded-full blur-3xl"></div>
			</div>
			<div class="relative z-10">
				<div class="text-4xl mb-4">🚀</div>
				<h3 class="text-2xl font-bold text-slate-900 mb-3"> 还在等什么？ </h3>
				<p class="text-slate-600 text-sm max-w-md mx-auto mb-8 leading-relaxed"> GVSDS 工作室欢迎每一位有想法、有热情的你。<br />不论你是前端、后端、设计还是运营，这里都有你的位置。 </p>
				<div class="flex justify-center gap-10 mb-8">
					<div class="text-center">
						<div class="text-2xl font-bold text-emerald-600">2019</div>
						<div class="text-slate-500 text-xs mt-1">创立年份</div>
					</div>
					<div class="w-px bg-slate-200"></div>
					<div class="text-center">
						<div class="text-2xl font-bold text-blue-600">8+</div>
						<div class="text-slate-500 text-xs mt-1">合作工作室</div>
					</div>
					<div class="w-px bg-slate-200"></div>
					<div class="text-center">
						<div class="text-2xl font-bold text-cyan-600">∞</div>
						<div class="text-slate-500 text-xs mt-1">发展可能</div>
					</div>
				</div>
				<div class="flex justify-center gap-3 flex-wrap">
					<button class="bg-gradient-to-r from-emerald-500 to-cyan-500 hover:from-emerald-600 hover:to-cyan-600 text-white font-medium px-8 py-3 rounded-xl transition-all duration-200 text-sm shadow-md shadow-emerald-500/10 cursor-pointer" onclick="window.location.href='mailto:hr@gvsds.com'"> 立即加入我们 </button>
					<button class="border border-slate-200 hover:border-slate-400 text-slate-700 hover:text-slate-900 px-8 py-3 rounded-xl transition-all duration-200 text-sm cursor-pointer" onclick="window.location.href='https://www.gvsds.com/'"> 了解更多 </button>
				</div>
			</div>
		</div>
	</div>
</div>


<script>
const jobs = [{
        id: 1,
        title: "前端程序员（原生）",
        department: "技术",
        location: "网络",
        type: "远程",
        salary: "非营利",
        tags: ["JavaScript", "HTML/CSS", "TailwindCSS"],
        desc: "负责核心产品前端架构设计与开发，推动前端工程化建设，参与技术选型与方案评审。",
        requirements: ["14岁+", "至少有 3 年前端开发经验", "熟悉原生生态", "有大型项目架构经验优先"],
        hot: true,
    },
    {
        id: 2,
        title: "前端程序员（React）",
        department: "技术",
        location: "网络",
        type: "远程",
        salary: "非营利",
        tags: ["React", "JavaScript", "HTML/CSS"],
        desc: "负责较边缘前端架构设计与开发，推动前端工程化建设，参与技术选型与方案评审。",
        requirements: ["14岁+", "至少有 3 年前端开发经验", "熟悉 React 生态", "有大型项目架构经验优先"],
        hot: false,
    },
    {
        id: 3,
        title: "前端程序员（Node.js）",
        department: "技术",
        location: "网络",
        type: "远程",
        salary: "非营利",
        tags: ["Node.js", "JavaScript", "HTML/CSS"],
        desc: "负责 Node.js 项目前端架构设计与开发，可能涉及部分桌面端应用开发，参与技术选型与方案评审。",
        requirements: ["14岁+", "至少有 3 年前端开发经验", "熟悉 Node.js 生态", "有大型项目架构经验优先"],
        hot: true,
    },
    {
        id: 4,
        title: "后端程序员（Python Flask）",
        department: "技术",
        location: "网络",
        type: "远程",
        salary: "非营利",
        tags: ["Python", "Flask", "SQLAlchemy"],
        desc: "负责 Python Flask 项目后端架构设计与开发，参与技术选型与方案评审。",
        requirements: ["14岁+", "至少有 3 年后端开发经验", "熟悉 Python Flask 生态", "有大型项目架构经验优先"],
        hot: true,
    },
    {
        id: 5,
        title: "后端程序员（Python Django）",
        department: "技术",
        location: "网络",
        type: "远程",
        salary: "非营利",
        tags: ["Python", "Django", "SQLAlchemy"],
        desc: "负责 Python Django 企业级项目后端架构设计与开发，参与技术选型与方案评审。",
        requirements: ["14岁+", "至少有 4 年后端开发经验", "熟悉 Python Django 生态", "有大型项目架构经验优先"],
        hot: true,
    },
    {
        id: 6,
        title: "后端程序员（C/C++）（服务器优化）",
        department: "技术",
        location: "网络",
        type: "远程",
        salary: "非营利",
        tags: ["C/C++", "GCC", "Makefile", "Clang", "AsyncIO"],
        desc: "负责后端项目核心设计（重写异步库，优化服务器 QPS 性能），参与技术选型与方案评审。",
        requirements: ["14岁+", "至少有 4 年后端开发经验", "熟悉 C/C++ 生态", "有大型项目架构经验优先"],
        hot: true,
    },
    {
        id: 7,
        title: "程序员（C/C++/NASM）（操作系统）",
        department: "技术",
        location: "网络",
        type: "远程",
        salary: "非营利",
        tags: ["C/C++", "Linux_ELF", "x86_64", "ARM", "GCC", "Makefile", "Clang", "操作系统架构设计"],
        desc: "负责后端项目核心设计（重写异步库，优化服务器 QPS 性能），参与技术选型与方案评审。",
        requirements: ["14岁+", "至少有 3 年 C/C++ 开发经验", "熟悉 C/C++ 生态", "有大型项目架构经验优先", "从其它类似项目跳岗优先"],
        hot: true,
    },
    {
        id: 8,
        title: "程序员（C/C++/Python/Qt/Node.js）（桌面应用）",
        department: "技术",
        location: "网络",
        type: "远程",
        salary: "非营利",
        tags: ["C/C++", "Python", "Qt", "Node.js", "GCC", "Makefile", "Clang"],
        desc: "负责桌面端应用（如文件管理器、文本编辑器、ERP 系统、桌宠等）的前端架构设计与开发，参与技术选型与方案评审。",
        requirements: ["14岁+", "至少有 3 年 C/C++ 开发经验", "熟悉 Qt/WebView 生态", "有大型项目架构经验优先"],
        hot: true,
    },
    {
        id: 9,
        title: "美术师（Photoshop/Illustrator）（UI/UX设计）",
        department: "设计",
        location: "网络",
        type: "远程",
        salary: "非营利",
        tags: ["Photoshop", "Illustrator", "UI/UX设计"],
        desc: "负责设计用户界面（如应用程序、网站）的视觉元素，参与用户体验优化。",
        requirements: ["14岁+", "至少有 3 年 UI/UX 设计经验", "熟悉 Photoshop/Illustrator 工具"],
        hot: true,
    },
    {
        id: 10,
        title: "美术师（Photoshop/Illustrator/画世界等）（Furry 吉祥物 / 艺术插画设计）",
        department: "设计",
        location: "网络",
        type: "远程",
        salary: "非营利",
        tags: ["Photoshop", "Illustrator", "Furry 吉祥物", "艺术插画设计"],
        desc: "负责设计 Furry 吉祥物（如猫、狗、鸟、人等）的视觉元素，参与用户体验优化。",
        requirements: ["14岁+", "至少有 3 年 绘画经验（画龄）", "熟悉 2D/3D 绘画工具（如 Photoshop、Illustrator）", "熟悉人体解剖结构"],
        hot: true,
    },
    {
        id: 11,
        title: "3D 建模设计师",
        department: "设计",
        location: "网络",
        type: "远程",
        salary: "非营利",
        tags: ["Photoshop", "Illustrator", "Blender", "3DMax", "等"],
        desc: "负责使用 Blender、3DMax 等 3D 建模工具设计 游戏 的 3D 模型，参与用户体验优化。",
        requirements: ["14岁+", "至少有 3 年 3D 建模经验", "熟悉 Blender、3DMax 等 3D 建模工具"],
        hot: true,
    },
    {
        id: 12,
        title: "项目经理",
        department: "产品",
        location: "网络",
        type: "远程",
        salary: "非营利",
        tags: ["C/C++", "Python", "Node.js", "GCC", "Makefile", "Clang", "Node.js", "Photoshop", "Illustrator", "Blender", "3DMax", "Git", "等"],
        desc: "负责项目管理（需求分析、项目计划、任务分配、进度监控、风险管理），参与技术选型与方案评审。",
        requirements: ["14岁+", "至少经手过 2 个中大型项目或 10 余个小型项目", "熟悉 Git 等版本控制工具"],
        hot: true,
    },
    {
        id: 13,
        title: "人力资源部负责人/成员",
        department: "市场",
        location: "网络",
        type: "远程",
        salary: "非营利",
        tags: ["微信", "企业微信", "QQ", "等"],
        desc: "负责公司人力资源管理（员工招聘、培训、发展规划、绩效评估等），能说会道能挖人，能精准选取需要或预备需要的人才，参与公司人力资源策略制定。",
        requirements: ["14岁+", "至少经手过 2 个中大型项目或 10 余个小型项目", "熟悉 Git 等版本控制工具"],
        hot: true,
    },
    {
        id: 14,
        title: "剪辑师",
        department: "产品",
        location: "网络",
        type: "远程",
        salary: "非营利",
        tags: ["剪辑", "视频编辑"],
        desc: "负责视频剪辑（如视频编辑、视频拼接、视频剪辑等），参与视频内容创作。",
        requirements: ["14岁+", "至少有 1 年 视频剪辑经验"],
        hot: true,
    },

];

const departments = ["全部", ...new Set(jobs.map(j => j.department))];
let activeTab = "全部";
let expandedId = null;

const tabColors = {
    "全部": "bg-blue-500 text-white border-blue-500",
    default: "bg-transparent text-slate-700 border-slate-200 hover:border-slate-400 hover:text-slate-900",
};

function renderTabs() {
    const container = document.getElementById("filter-tabs");
    container.innerHTML = departments.map(dep => `
    <button
        onclick="setTab('${dep}')"
        class="px-5 py-2 rounded-full border text-sm font-medium transition-all duration-200 cursor-pointer
        ${activeTab === dep
            ? "bg-blue-500 text-white border-blue-500"
            : "bg-transparent text-slate-700 border-slate-200 hover:border-slate-400 hover:text-slate-900"
        }"
    >
        ${dep}
    </button>
    `).join("");
}

function renderJobs() {
    const filtered = activeTab === "全部" ? jobs : jobs.filter(j => j.department === activeTab);
    const container = document.getElementById("job-list");
    container.innerHTML = filtered.map(job => {
        const isOpen = expandedId === job.id;
        return `
<div class="group bg-white border ${isOpen ? "border-blue-500/50" : "border-slate-200 hover:border-slate-300"} rounded-2xl overflow-hidden transition-all duration-300 shadow-sm">
    <div onclick="toggleJob(${job.id})" class="flex items-center justify-between p-6 cursor-pointer">
        <div class="flex items-center gap-4">
            <div class="w-11 h-11 rounded-xl flex items-center justify-center text-lg flex-shrink-0
                ${job.department === '技术' ? 'bg-blue-500/10 text-blue-600' :
                job.department === '产品' ? 'bg-purple-500/10 text-purple-600' :
                job.department === '设计' ? 'bg-pink-500/10 text-pink-600' :
                job.department === '运营' ? 'bg-green-500/10 text-green-600' :
                'bg-orange-500/10 text-orange-600'}">
                ${job.department === '技术' ? '⚡' :
                job.department === '产品' ? '🧩' :
                job.department === '设计' ? '🎨' :
                job.department === '运营' ? '📈' : '📣'}
            </div>
            <div>
                <div class="flex items-center gap-2 mb-1">
                <span class="text-slate-900 font-semibold text-base">${job.title}</span>
                ${job.hot ? `<span class="text-xs bg-red-500/10 text-red-600 border border-red-500/20 px-2 py-0.5 rounded-full">热招</span>` : ""}
                </div>
                <div class="flex items-center gap-3 text-slate-500 text-xs">
                <span>📍 ${job.location}</span>
                <span>🏷 ${job.department}</span>
                <span>⏱ ${job.type}</span>
                </div>
            </div>
        </div>
        <div class="flex items-center gap-6">
            <div class="text-right hidden sm:block">
                <div class="text-blue-600 font-bold text-sm">${job.salary}</div>
                <div class="text-slate-400 text-xs">月薪</div>
            </div>
            <div class="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center transition-transform duration-300 ${isOpen ? "rotate-180" : ""}">
                <svg class="w-4 h-4 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </div>
        </div>
    </div>
    ${isOpen ? `
    <div class="px-6 pb-6 border-t border-slate-200 pt-5">
        <div class="flex flex-wrap gap-2 mb-5">
            ${job.tags.map(tag => `
            <span class="text-xs bg-slate-100 text-slate-700 px-3 py-1 rounded-md border border-slate-200">${tag}</span>
            `).join("")}
        </div>
        <div class="grid md:grid-cols-2 gap-6 mb-6">
            <div>
                <h4 class="text-slate-800 font-medium text-sm mb-2 flex items-center gap-1.5"><span class="w-1 h-3.5 bg-blue-500 rounded-full inline-block"></span>岗位描述</h4>
                <p class="text-slate-600 text-sm leading-relaxed">${job.desc}</p>
            </div>
            <div>
                <h4 class="text-slate-800 font-medium text-sm mb-2 flex items-center gap-1.5"><span class="w-1 h-3.5 bg-cyan-500 rounded-full inline-block"></span>任职要求</h4>
                <ul class="space-y-1.5">${job.requirements.map(r => `<li class="text-slate-600 text-sm flex items-start gap-2"><span class="text-cyan-600 mt-0.5 flex-shrink-0">✓</span>${r}</li>`).join("")}</ul>
            </div>
        </div>
        <div class="flex items-center gap-3">
            <button class="bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white text-sm font-medium px-6 py-2.5 rounded-lg transition-all duration-200 cursor-pointer">立即申请</button>
            <button class="border border-slate-200 hover:border-slate-400 text-slate-700 hover:text-slate-900 text-sm px-5 py-2.5 rounded-lg transition-all duration-200 cursor-pointer">转发给朋友</button>
            <div class="ml-auto sm:hidden text-blue-600 font-bold text-sm">${job.salary}<span class="text-slate-400 text-xs font-normal"> /月</span></div>
        </div>
    </div>` : ""}
</div>`;
    }).join("");
}
function setTab(dep) {
    activeTab = dep;
    expandedId = null;
    renderTabs();
    renderJobs();
}
function toggleJob(id) {
    expandedId = expandedId === id ? null : id;
    renderJobs();
}
renderTabs();
renderJobs();
  const benefits = [
    {
      icon: "📦",
      title: "成员福利",
      badge: "免费申请",
      badgeColor: "bg-emerald-500/10 text-emerald-600 border-emerald-500/20",
      accentColor: "from-emerald-500/10 to-transparent",
      borderColor: "hover:border-emerald-500/30",
      glowColor: "bg-emerald-500/5",
      items: [
        { icon: "📧", text: "免费申请专属工作室邮箱，彰显你的身份" },
        { icon: "🖥️", text: "每位成员均可申请一台免费云服务器" },
        { icon: "💰", text: "表现出色？每个项目都有机会拿到专项奖金" },
        { icon: "💻", text: "项目条件允许时，我们可能为你配备一台电脑" },
        { icon: "🎖️", text: "贡献突出的成员将在下期视频中被点名表扬！" },
      ],
    },
    {
      icon: "🕐",
      title: "极其人性的作息",
      badge: "弹性自由",
      badgeColor: "bg-yellow-500/10 text-yellow-600 border-yellow-500/20",
      accentColor: "from-yellow-500/10 to-transparent",
      borderColor: "hover:border-yellow-500/30",
      glowColor: "bg-yellow-500/5",
      items: [
        { icon: "😅", text: "说实话，作息制度……视情况而定" },
        { icon: "🌙", text: "不强制打卡，不强制在线，随缘就好" },
        { icon: "🧘", text: "核心宗旨只有一条：活着就行" },
        { icon: "☕", text: "最重要的是心态放平，开心最重要" },
        { icon: "🎯", text: "只要产出到位，过程你说了算" },
      ],
    },
    {
      icon: "🏆",
      title: "全国顶尖的工作室",
      badge: "历史悠久",
      badgeColor: "bg-blue-500/10 text-blue-600 border-blue-500/20",
      accentColor: "from-blue-500/10 to-transparent",
      borderColor: "hover:border-blue-500/30",
      glowColor: "bg-blue-500/5",
      items: [
        { icon: "📅", text: "GVSDS 工作室创立于 2019 年，至今已走过数载风雨" },
        { icon: "🌟", text: "历史悠久，积淀深厚，在同类工作室中首屈一指" },
        { icon: "🏅", text: "工作室已取得多项卓越成就，实力有目共睹" },
        { icon: "🤝", text: "加入一个有历史、有底蕴的团队，你不会后悔" },
        { icon: "✨", text: "下一个被写进历史的，就是你！" },
      ],
    },
    {
      icon: "🌐",
      title: "丰富的资源",
      badge: "8所合作",
      badgeColor: "bg-purple-500/10 text-purple-600 border-purple-500/20",
      accentColor: "from-purple-500/10 to-transparent",
      borderColor: "hover:border-purple-500/30",
      glowColor: "bg-purple-500/5",
      items: [
        { icon: "🤝", text: "已与全国 8 所工作室 / 社区正式达成战略合作" },
        { icon: "📚", text: "海量学习资源、项目资源随时共享，应有尽有" },
        { icon: "🔗", text: "跨工作室交流机会，拓宽你的视野与人脉" },
        { icon: "💡", text: "多元化资源加持，让你的创意不再受限" },
        { icon: "🚀", text: "来这里，体验全网最丰富的成员资源体系" },
      ],
    },
  ];

  const grid = document.getElementById("benefits-grid");

  grid.innerHTML = benefits.map((b, i) => `
    <div class="group relative rounded-2xl border border-slate-200 ${b.borderColor} bg-white overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-md hover:shadow-slate-100">

      <!-- 顶部渐变光带 -->
      <div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r ${b.accentColor}"></div>

      <!-- 背景微光 -->
      <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ${b.glowColor} pointer-events-none"></div>

      <!-- 卡片内容 -->
      <div class="relative z-10 p-7">
        <!-- 头部 -->
        <div class="flex items-start justify-between mb-6">
          <div class="flex items-center gap-3">
            <div class="w-12 h-12 rounded-2xl bg-slate-100 flex items-center justify-center text-2xl flex-shrink-0 border border-slate-200">
              ${b.icon}
            </div>
            <div>
              <h3 class="text-slate-900 font-bold text-base leading-snug">${b.title}</h3>
              <span class="inline-block mt-1 text-xs border px-2.5 py-0.5 rounded-full ${b.badgeColor}">
                ${b.badge}
              </span>
            </div>
          </div>
          <span class="text-slate-300 text-xs font-mono mt-1">0${i + 1}</span>
        </div>

        <!-- 条目列表 -->
        <ul class="space-y-3">
          ${b.items.map(item => `
            <li class="flex items-start gap-3 group/item">
              <span class="text-base flex-shrink-0 mt-0.5 transition-transform duration-200 group-hover/item:scale-110">${item.icon}</span>
              <span class="text-slate-600 text-sm leading-relaxed group-hover/item:text-slate-800 transition-colors duration-200">${item.text}</span>
            </li>
          `).join("")}
        </ul>
      </div>
    </div>
  `).join("");
</script>