410 lines
34 KiB
HTML
410 lines
34 KiB
HTML
<section class="relative min-h-[60vh] flex items-center justify-center overflow-hidden bg-white dark:bg-slate-900 transition-colors duration-300">
|
||
<div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.06]" style="background-image: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px); background-size: 40px 40px;">
|
||
</div>
|
||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-violet-300/20 dark:bg-violet-600/10 rounded-full blur-[100px] pointer-events-none"></div>
|
||
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-sky-300/20 dark:bg-sky-600/10 rounded-full blur-[100px] pointer-events-none"></div>
|
||
<div class="relative z-10 text-center px-6">
|
||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gray-100 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 text-sm text-gray-500 dark:text-gray-400 mb-8 reveal">
|
||
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> 非营利 · 开源 · 共建
|
||
</div>
|
||
<h2 class="text-5xl md:text-7xl lg:text-8xl font-black text-gray-900 dark:text-white leading-none tracking-tight mb-4 reveal"> 银河锋锐 </h2>
|
||
<h3 class="text-2xl md:text-3xl font-light text-gray-400 dark:text-gray-500 tracking-widest mb-8 reveal" style="transition-delay:150ms"> SOFTWARE DEVELOPMENT STUDIO </h3>
|
||
<p class="max-w-xl mx-auto text-gray-500 dark:text-gray-400 text-lg leading-relaxed reveal" style="transition-delay:250ms"> 因热爱而聚，以技术为桥——<br> 一群年轻开发者的开源实验场 </p>
|
||
<div class="mt-16 flex justify-center reveal" style="transition-delay:400ms">
|
||
<div class="flex flex-col items-center gap-2 text-gray-300 dark:text-gray-600">
|
||
<span class="text-xs tracking-widest uppercase">Scroll</span>
|
||
<div class="w-px h-12 bg-gradient-to-b from-gray-300 dark:from-gray-600 to-transparent animate-pulse"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="relative py-24 bg-gray-950 dark:bg-black overflow-hidden transition-colors duration-300">
|
||
<div class="absolute inset-0 flex items-center justify-center pointer-events-none select-none overflow-hidden">
|
||
<span class="text-[20vw] font-black text-white/[0.02] tracking-widest whitespace-nowrap">CORE</span>
|
||
</div>
|
||
<div class="relative z-10 container mx-auto lg:max-w-[75%] px-6">
|
||
<div class="flex items-center gap-4 mb-16 reveal">
|
||
<div class="w-8 h-px bg-white/30"></div>
|
||
<span class="text-white/40 text-sm tracking-widest uppercase">Our Philosophy</span>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-white/10 rounded-2xl overflow-hidden">
|
||
<div class="group relative bg-gray-950 dark:bg-black p-8 md:p-10 flex flex-col gap-6 hover:bg-white/5 transition-colors duration-500 reveal">
|
||
<div class="text-6xl font-black text-white/10 group-hover:text-violet-500/30 transition-colors duration-500 leading-none">01</div>
|
||
<div class="w-10 h-10 rounded-xl bg-violet-500/10 border border-violet-500/20 flex items-center justify-center group-hover:bg-violet-500/20 transition-colors duration-300">
|
||
<i class="fa fa-code text-violet-400"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-white text-xl font-bold mb-3">和而不同</h4>
|
||
<p class="text-gray-500 text-sm leading-relaxed">尊重每一位开发者独特的风格与思路，在差异中寻求最优解。</p>
|
||
</div>
|
||
<div class="mt-auto w-0 h-px bg-violet-400 group-hover:w-full transition-all duration-700"></div>
|
||
</div>
|
||
<div class="group relative bg-gray-950 dark:bg-black p-8 md:p-10 flex flex-col gap-6 hover:bg-white/5 transition-colors duration-500 reveal" style="transition-delay:150ms">
|
||
<div class="text-6xl font-black text-white/10 group-hover:text-sky-500/30 transition-colors duration-500 leading-none">02</div>
|
||
<div class="w-10 h-10 rounded-xl bg-sky-500/10 border border-sky-500/20 flex items-center justify-center group-hover:bg-sky-500/20 transition-colors duration-300">
|
||
<i class="fa fa-rocket text-sky-400"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-white text-xl font-bold mb-3">创新为主</h4>
|
||
<p class="text-gray-500 text-sm leading-relaxed">不满足于已知的边界，持续叩响未知领域的大门，让每一行代码都充满可能。</p>
|
||
</div>
|
||
<div class="mt-auto w-0 h-px bg-sky-400 group-hover:w-full transition-all duration-700"></div>
|
||
</div>
|
||
<div class="group relative bg-gray-950 dark:bg-black p-8 md:p-10 flex flex-col gap-6 hover:bg-white/5 transition-colors duration-500 reveal" style="transition-delay:300ms">
|
||
<div class="text-6xl font-black text-white/10 group-hover:text-emerald-500/30 transition-colors duration-500 leading-none">03</div>
|
||
<div class="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center group-hover:bg-emerald-500/20 transition-colors duration-300">
|
||
<i class="fa fa-users text-emerald-400"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-white text-xl font-bold mb-3">以人为本</h4>
|
||
<p class="text-gray-500 text-sm leading-relaxed">技术服务于人，成长成就彼此，让每个人都能在这里找到属于自己的位置。</p>
|
||
</div>
|
||
<div class="mt-auto w-0 h-px bg-emerald-400 group-hover:w-full transition-all duration-700"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="relative py-24 bg-white dark:bg-slate-900 overflow-hidden transition-colors duration-300">
|
||
<div class="absolute right-0 top-0 h-full w-1/2 bg-gray-50 dark:bg-slate-800/50 clip-diagonal pointer-events-none" style="clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);">
|
||
</div>
|
||
<div class="relative z-10 container mx-auto lg:max-w-[75%] px-6">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||
<div class="space-y-8">
|
||
<div class="reveal">
|
||
<span class="text-xs font-bold tracking-widest text-violet-500 uppercase">Who We Are</span>
|
||
<h3 class="text-4xl md:text-5xl font-black text-gray-900 dark:text-white mt-3 leading-tight"> 我们是一群<br>
|
||
<span class="relative inline-block"> 热爱技术的人 <svg class="absolute -bottom-2 left-0 w-full" viewBox="0 0 300 12" fill="none">
|
||
<path d="M2 10 Q75 2 150 8 Q225 14 298 6" stroke="#8b5cf6" stroke-width="3" stroke-linecap="round" fill="none" />
|
||
</svg>
|
||
</span>
|
||
</h3>
|
||
</div>
|
||
<div class="space-y-6 reveal" style="transition-delay:200ms">
|
||
<p class="text-gray-500 dark:text-gray-400 text-lg leading-relaxed border-l-2 border-violet-300 dark:border-violet-600 pl-5"> 自成立以来，始终以开源精神驱动前行，在 GitHub 等平台分享项目、文章与经验，让技术的价值触达更多人。 </p>
|
||
<p class="text-gray-500 dark:text-gray-400 text-lg leading-relaxed border-l-2 border-sky-300 dark:border-sky-600 pl-5"> 我们不追逐商业利益，通过编程兼职保障基本运转，让这里永远是一片纯粹的技术沃土。 </p>
|
||
<p class="text-gray-500 dark:text-gray-400 text-lg leading-relaxed border-l-2 border-emerald-300 dark:border-emerald-600 pl-5"> 这里不只是写代码的地方，更是结识同好、分享日常的温暖港湾。 </p>
|
||
</div>
|
||
</div>
|
||
<div class="reveal flex flex-wrap gap-3 items-start content-start" style="transition-delay:300ms">
|
||
<span class="px-5 py-3 rounded-full border-2 border-gray-900 dark:border-white text-gray-900 dark:text-white font-bold text-lg">开源</span>
|
||
<span class="px-5 py-3 rounded-full bg-violet-500 text-white font-bold text-lg">协作</span>
|
||
<span class="px-5 py-3 rounded-full border-2 border-gray-200 dark:border-slate-600 text-gray-400 dark:text-gray-500 font-semibold">非营利</span>
|
||
<span class="px-5 py-3 rounded-full bg-sky-500 text-white font-bold text-lg">创新</span>
|
||
<span class="px-5 py-3 rounded-full border-2 border-gray-200 dark:border-slate-600 text-gray-400 dark:text-gray-500 font-semibold">年轻</span>
|
||
<span class="px-5 py-3 rounded-full border-2 border-gray-900 dark:border-white text-gray-900 dark:text-white font-bold text-lg">分享</span>
|
||
<span class="px-5 py-3 rounded-full bg-emerald-500 text-white font-bold text-lg">成长</span>
|
||
<span class="px-5 py-3 rounded-full border-2 border-gray-200 dark:border-slate-600 text-gray-400 dark:text-gray-500 font-semibold">技术探索</span>
|
||
<span class="px-5 py-3 rounded-full bg-amber-400 text-gray-900 font-bold text-lg">热爱</span>
|
||
<span class="px-5 py-3 rounded-full border-2 border-gray-200 dark:border-slate-600 text-gray-400 dark:text-gray-500 font-semibold">GitHub</span>
|
||
<span class="px-5 py-3 rounded-full border-2 border-gray-900 dark:border-white text-gray-900 dark:text-white font-bold">彼此成就</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="relative py-24 bg-white dark:bg-slate-900 border-t border-gray-100 dark:border-slate-800 overflow-hidden transition-colors duration-300">
|
||
<div class="absolute -left-32 -top-32 w-96 h-96 rounded-full border border-gray-100 dark:border-slate-800 pointer-events-none"></div>
|
||
<div class="absolute -left-16 -top-16 w-64 h-64 rounded-full border border-gray-100 dark:border-slate-800 pointer-events-none"></div>
|
||
<div class="absolute -right-32 -bottom-32 w-96 h-96 rounded-full border border-gray-100 dark:border-slate-800 pointer-events-none"></div>
|
||
<div class="relative z-10 container mx-auto lg:max-w-[75%] px-6">
|
||
<div class="text-center mb-16 reveal">
|
||
<span class="text-xs font-bold tracking-widest text-sky-500 uppercase">By The Numbers</span>
|
||
<h3 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white mt-3">用数字说话</h3>
|
||
</div>
|
||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||
<div class="group text-center reveal">
|
||
<div class="relative inline-flex items-center justify-center w-24 h-24 md:w-32 md:h-32 mb-4">
|
||
<svg class="absolute inset-0 w-full h-full -rotate-90" viewBox="0 0 100 100">
|
||
<circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-100 dark:text-slate-800" />
|
||
<circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="283" stroke-dashoffset="70" class="text-violet-400 transition-all duration-1000 group-hover:stroke-dashoffset-0" />
|
||
</svg>
|
||
<div class="relative z-10 text-center">
|
||
<div class="text-2xl md:text-3xl font-black text-gray-900 dark:text-white counter">17</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-400 dark:text-gray-500 text-sm font-medium tracking-widest uppercase">Members</p>
|
||
<p class="text-gray-900 dark:text-white font-semibold mt-1">核心成员</p>
|
||
</div>
|
||
<div class="group text-center reveal" style="transition-delay:100ms">
|
||
<div class="relative inline-flex items-center justify-center w-24 h-24 md:w-32 md:h-32 mb-4">
|
||
<svg class="absolute inset-0 w-full h-full -rotate-90" viewBox="0 0 100 100">
|
||
<circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-100 dark:text-slate-800" />
|
||
<circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="283" stroke-dashoffset="90" class="text-sky-400 transition-all duration-1000" />
|
||
</svg>
|
||
<div class="relative z-10 text-center">
|
||
<div class="text-2xl md:text-3xl font-black text-gray-900 dark:text-white counter">28</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-400 dark:text-gray-500 text-sm font-medium tracking-widest uppercase">Projects</p>
|
||
<p class="text-gray-900 dark:text-white font-semibold mt-1">开源项目</p>
|
||
</div>
|
||
<div class="group text-center reveal" style="transition-delay:200ms">
|
||
<div class="relative inline-flex items-center justify-center w-24 h-24 md:w-32 md:h-32 mb-4">
|
||
<svg class="absolute inset-0 w-full h-full -rotate-90" viewBox="0 0 100 100">
|
||
<circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-100 dark:text-slate-800" />
|
||
<circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="283" stroke-dashoffset="20" class="text-emerald-400 transition-all duration-1000" />
|
||
</svg>
|
||
<div class="relative z-10 text-center">
|
||
<div class="text-xl md:text-2xl font-black text-gray-900 dark:text-white counter">100w+</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-400 dark:text-gray-500 text-sm font-medium tracking-widest uppercase">Commits</p>
|
||
<p class="text-gray-900 dark:text-white font-semibold mt-1">代码提交量</p>
|
||
</div>
|
||
<div class="group text-center reveal" style="transition-delay:300ms">
|
||
<div class="relative inline-flex items-center justify-center w-24 h-24 md:w-32 md:h-32 mb-4">
|
||
<svg class="absolute inset-0 w-full h-full -rotate-90" viewBox="0 0 100 100">
|
||
<circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-100 dark:text-slate-800" />
|
||
<circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="283" stroke-dashoffset="50" class="text-amber-400 transition-all duration-1000" />
|
||
</svg>
|
||
<div class="relative z-10 text-center">
|
||
<div class="text-xl md:text-2xl font-black text-gray-900 dark:text-white counter">1500+</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-400 dark:text-gray-500 text-sm font-medium tracking-widest uppercase">Clients</p>
|
||
<p class="text-gray-900 dark:text-white font-semibold mt-1">服务客户</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="relative min-h-[80vh] flex flex-col bg-slate-50 dark:bg-slate-900 overflow-hidden transition-colors duration-300">
|
||
<!-- 背景装饰 -->
|
||
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/4 w-[800px] h-[800px] bg-gradient-to-br from-violet-200/40 to-sky-200/40 dark:from-violet-900/20 dark:to-sky-900/20 rounded-full blur-[120px] pointer-events-none"></div>
|
||
<div class="absolute -left-32 top-1/4 w-64 h-64 rounded-full border border-gray-200/50 dark:border-slate-700/50 pointer-events-none"></div>
|
||
<div class="absolute -right-32 bottom-1/4 w-96 h-96 rounded-full border border-gray-200/50 dark:border-slate-700/50 pointer-events-none"></div>
|
||
|
||
<div class="relative z-10 container mx-auto lg:max-w-[85%] px-6 py-12 flex flex-col flex-grow">
|
||
<!-- 标题区域 -->
|
||
<div class="text-center mb-8 reveal">
|
||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400 text-xs font-bold tracking-widest uppercase mb-4">
|
||
<i class="fa fa-users text-[10px]"></i> The Founders
|
||
</div>
|
||
<h3 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white tracking-tight"> 初心如磐，携手同行 </h3>
|
||
<p class="text-gray-500 dark:text-gray-400 mt-2 max-w-lg mx-auto leading-relaxed"> 因为共同的热爱，四个年轻的灵魂在此交汇 </p>
|
||
</div>
|
||
|
||
<!-- 核心图片展示区 - 自动填充剩余高度 -->
|
||
<div class="flex-grow flex items-center justify-center reveal" style="transition-delay: 150ms">
|
||
<div class="relative group w-full h-full max-h-[70vh]">
|
||
|
||
<!-- 图片容器：圆角卡片风格 -->
|
||
<div class="relative w-full h-full rounded-3xl overflow-hidden bg-white/80 dark:bg-slate-800/50 backdrop-blur-sm shadow-xl shadow-gray-200/50 dark:shadow-black/20 border border-white dark:border-slate-700 transition-all duration-500 hover:shadow-2xl hover:shadow-violet-500/10">
|
||
|
||
<!-- 图片本体：全宽高自适应裁剪 -->
|
||
<!-- object-cover 确保图片填满容器且不变形 -->
|
||
<img src="/assets/img/Us/FourPeople.jpg" alt="银河锋锐创始人合影" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.02]">
|
||
|
||
<!-- 图片底部渐变遮罩 -->
|
||
<div class="absolute bottom-0 left-0 right-0 p-6 md:p-8 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none">
|
||
<div class="flex items-end justify-between">
|
||
<div>
|
||
<p class="text-white/60 text-xs font-medium tracking-widest uppercase mb-1">Est. 2023</p>
|
||
<h4 class="text-white text-xl md:text-2xl font-bold tracking-wide">梦想启航的地方</h4>
|
||
</div>
|
||
<!-- 桌面端显示的按钮 -->
|
||
<div class="hidden md:flex items-center gap-2 text-white/80 text-sm font-medium bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full border border-white/20">
|
||
<span>Core Team</span>
|
||
<i class="fa fa-arrow-right text-xs"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 装饰性悬浮标签 -->
|
||
<div class="absolute -top-3 -right-3 md:-top-5 md:-right-5 z-20">
|
||
<div class="px-4 py-2 bg-white dark:bg-slate-700 rounded-xl shadow-lg border border-gray-100 dark:border-slate-600 rotate-6 group-hover:rotate-12 transition-transform duration-500">
|
||
<span class="text-rose-500 font-bold text-sm flex items-center gap-1">
|
||
<i class="fa fa-heart"></i> 4 Founders
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 左下角装饰线条 -->
|
||
<div class="absolute -bottom-3 -left-3 w-20 h-20 border-b-2 border-l-2 border-violet-400/50 rounded-bl-3xl pointer-events-none group-hover:border-violet-400 transition-colors"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部引言 - 紧凑布局 -->
|
||
<div class="mt-8 text-center reveal" style="transition-delay: 300ms">
|
||
<p class="text-gray-500 dark:text-gray-400 text-sm relative z-10 px-6 italic"> “独行快，众行远。我们是伙伴，更是彼此坚实的后盾。” </p>
|
||
<div class="mt-3 flex justify-center items-center gap-4 text-xs text-gray-400 dark:text-gray-500">
|
||
<span class="uppercase tracking-widest">Together We Build</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="relative py-32 md:py-48 bg-gray-950 dark:bg-black overflow-hidden transition-colors duration-300">
|
||
<div class="absolute inset-0 pointer-events-none">
|
||
<div class="absolute top-1/3 left-10 w-2 h-2 rounded-full bg-violet-400/60 animate-ping" style="animation-duration:3s"></div>
|
||
<div class="absolute top-2/3 left-1/4 w-1.5 h-1.5 rounded-full bg-sky-400/60 animate-ping" style="animation-duration:4s;animation-delay:1s"></div>
|
||
<div class="absolute top-1/4 right-1/3 w-2 h-2 rounded-full bg-emerald-400/60 animate-ping" style="animation-duration:3.5s;animation-delay:0.5s"></div>
|
||
<div class="absolute top-3/4 right-1/4 w-1.5 h-1.5 rounded-full bg-amber-400/60 animate-ping" style="animation-duration:5s;animation-delay:2s"></div>
|
||
<div class="absolute top-1/2 right-10 w-1 h-1 rounded-full bg-pink-400/60 animate-ping" style="animation-duration:2.5s;animation-delay:1.5s"></div>
|
||
</div>
|
||
<div class="relative z-10 container mx-auto lg:max-w-[70%] px-6 text-center">
|
||
<div class="reveal">
|
||
<span class="text-xs font-bold tracking-widest text-white/30 uppercase">Our Belief</span>
|
||
</div>
|
||
<blockquote class="mt-8 reveal" style="transition-delay:150ms">
|
||
<p class="text-3xl md:text-5xl lg:text-6xl font-black text-white leading-tight"> 每一份对技术的<span class="text-violet-400">热爱</span>，<br class="hidden md:block"> 都能汇聚成<span class="text-sky-400">改变</span>的力量。 </p>
|
||
</blockquote>
|
||
<p class="mt-10 text-gray-500 text-lg md:text-xl leading-relaxed max-w-2xl mx-auto reveal" style="transition-delay:300ms"> 无论你是刚踏入技术领域的新手，还是深耕行业的资深开发者——<br> 只要怀揣好奇，这里就是你的地方。 </p>
|
||
<div class="mt-8 reveal" style="transition-delay:400ms">
|
||
<span class="inline-block px-6 py-3 rounded-full border border-white/20 text-white/60 font-medium text-sm tracking-wide"> 技术的力量源于共同探索，成长的价值在于「成就彼此」 </span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="relative py-24 overflow-hidden duration-300">
|
||
<div class="absolute left-0 top-0 w-[15%] h-full z-0 pointer-events-none c-furry">
|
||
<img src="./assets/img/Background/ChiSha_Left.png" alt="左侧吉祥物" class="w-full h-full object-contain object-left opacity-60 dark:opacity-40">
|
||
</div>
|
||
<div class="absolute right-0 top-0 w-[15%] h-full z-0 pointer-events-none c-furry">
|
||
<img src="./assets/img/Background/Ying_Right.png" alt="右侧吉祥物" class="w-full h-full object-contain object-right opacity-60 dark:opacity-40">
|
||
</div>
|
||
<div class="relative z-10 container mx-auto lg:max-w-[60%] px-6 text-center">
|
||
<div class="reveal">
|
||
<span class="text-xs font-bold tracking-widest text-violet-500 uppercase">Join Us</span>
|
||
<h3 class="text-4xl md:text-5xl font-black text-gray-900 dark:text-white mt-4 mb-6"> 期待与你同行 </h3>
|
||
<p class="text-gray-500 dark:text-gray-400 text-lg max-w-lg mx-auto leading-relaxed"> 我们欢迎<strong class="text-violet-500 font-semibold">画师</strong>、 <strong class="text-sky-500 font-semibold">程序员</strong>、 <strong class="text-emerald-500 font-semibold">测试人员</strong>， 以及所有愿意与我们一起探索技术边界的你。
|
||
</p>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-12 mb-12 reveal" style="transition-delay:200ms">
|
||
<div class="group p-6 rounded-2xl border-2 border-violet-100 dark:border-violet-900/50 bg-violet-50/50 dark:bg-violet-900/10 hover:border-violet-400 dark:hover:border-violet-500 transition-all duration-300 hover:scale-105 cursor-default">
|
||
<div class="w-12 h-12 rounded-xl bg-violet-100 dark:bg-violet-900/30 flex items-center justify-center mx-auto mb-3 group-hover:bg-violet-200 dark:group-hover:bg-violet-800/40 transition-colors">
|
||
<i class="fa fa-paint-brush text-violet-500 text-xl"></i>
|
||
</div>
|
||
<h5 class="font-bold text-gray-900 dark:text-white mb-1">画师</h5>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400">用艺术点亮技术世界</p>
|
||
</div>
|
||
<div class="group p-6 rounded-2xl border-2 border-sky-100 dark:border-sky-900/50 bg-sky-50/50 dark:bg-sky-900/10 hover:border-sky-400 dark:hover:border-sky-500 transition-all duration-300 hover:scale-105 cursor-default">
|
||
<div class="w-12 h-12 rounded-xl bg-sky-100 dark:bg-sky-900/30 flex items-center justify-center mx-auto mb-3 group-hover:bg-sky-200 dark:group-hover:bg-sky-800/40 transition-colors">
|
||
<i class="fa fa-terminal text-sky-500 text-xl"></i>
|
||
</div>
|
||
<h5 class="font-bold text-gray-900 dark:text-white mb-1">程序员</h5>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400">用代码构建无限可能</p>
|
||
</div>
|
||
<div class="group p-6 rounded-2xl border-2 border-emerald-100 dark:border-emerald-900/50 bg-emerald-50/50 dark:bg-emerald-900/10 hover:border-emerald-400 dark:hover:border-emerald-500 transition-all duration-300 hover:scale-105 cursor-default">
|
||
<div class="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center mx-auto mb-3 group-hover:bg-emerald-200 dark:group-hover:bg-emerald-800/40 transition-colors">
|
||
<i class="fa fa-bug text-emerald-500 text-xl"></i>
|
||
</div>
|
||
<h5 class="font-bold text-gray-900 dark:text-white mb-1">测试人员</h5>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400">用严谨保障每个细节</p>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="transition-delay:400ms">
|
||
<a href="mailto:hr@gvsds.com?subject=我申请加入银河锋锐软件开发工作室&body=您好!%0D%0A%0D%0A我是 [ 姓名 / 网名 ]，我期望加入银河锋锐软件开发工作室。%0D%0A我的联系方式是 [ 微信（必填） / QQ / TEL / X / 电报 / DISCORD ] %0D%0A我的兴趣爱好是 [ 选填 ]，我的能力是 [ 选填 ]。%0D%0A我能够作为 [ 画师 / 程序员 / 测试人员 ] 加入工作室。%0D%0A [ 您的更多个人信息（选填）（个人简历等） ] %0D%0A希望您能提供一个机会，感谢！%0D%0A—— [ 姓名 / 网名 ] [ 年-月-日 ]"
|
||
class="group relative inline-flex items-center gap-3 px-10 py-5 bg-gray-900 dark:bg-white rounded-2xl text-white dark:text-gray-900 font-bold text-lg transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_60px_rgba(0,0,0,0.2)] dark:hover:shadow-[0_20px_60px_rgba(255,255,255,0.15)] overflow-hidden">
|
||
<span class="absolute inset-0 bg-gradient-to-r from-violet-600 via-sky-500 to-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></span>
|
||
<i class="fa fa-paper-plane relative z-10 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform duration-300"></i>
|
||
<span class="relative z-10">发送申请邮件</span>
|
||
</a>
|
||
<p class="mt-4 text-xs text-gray-400 dark:text-gray-600"> 📮 hr@gvsds.com · 我们会尽快回复你的申请 </p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const counters = document.querySelectorAll('.counter');
|
||
const revealElements = document.querySelectorAll('.reveal');
|
||
const revealObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.transform = 'translateY(0)';
|
||
if (entry.target.querySelector('.counter')) {
|
||
const counterElements = entry.target.querySelectorAll('.counter');
|
||
counterElements.forEach(counter => {
|
||
const targetText = counter.textContent;
|
||
const numberMatch = targetText.match(/(\d+)/);
|
||
if (numberMatch) {
|
||
const targetNumber = parseInt(numberMatch[1]);
|
||
let currentNumber = 0;
|
||
const increment = Math.ceil(targetNumber / 40);
|
||
const timer = setInterval(() => {
|
||
currentNumber += increment;
|
||
if (currentNumber >= targetNumber) {
|
||
currentNumber = targetNumber;
|
||
clearInterval(timer);
|
||
}
|
||
const resultText = targetText.replace(/(\d+)/, currentNumber);
|
||
counter.textContent = resultText;
|
||
}, 25);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}, { threshold: 0.1 });
|
||
revealElements.forEach(el => {
|
||
el.style.opacity = '0';
|
||
el.style.transform = 'translateY(15px)';
|
||
el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
||
revealObserver.observe(el);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<section class="py-20 md:py-28 px-4 md:px-8">
|
||
<div class="container mx-auto">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<div class="reveal">
|
||
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 pl-4 border-l-4 border-gray-900 mb-8 text-fill">涉及领域</h2>
|
||
<div class="w-4/5 mx-auto md:mx-0 mb-8"><div class="border-b border-gray-200 pb-2"></div></div>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<h3 class="text-lg font-semibold text-gray-900 mb-4">开发类</h3>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-center"><div class="w-2 h-2 bg-gray-900 rounded-full mr-3"></div><span class="text-gray-700">Python 开发</span></li>
|
||
<li class="flex items-center"><div class="w-2 h-2 bg-gray-900 rounded-full mr-3"></div><span class="text-gray-700">C/C++ 开发</span></li>
|
||
<li class="flex items-center"><div class="w-2 h-2 bg-gray-900 rounded-full mr-3"></div><span class="text-gray-700">Web 前端（HTML/CSS/JS）</span></li>
|
||
<li class="flex items-center"><div class="w-2 h-2 bg-gray-900 rounded-full mr-3"></div><span class="text-gray-700">后端架构</span></li>
|
||
<li class="flex items-center"><div class="w-2 h-2 bg-gray-900 rounded-full mr-3"></div><span class="text-gray-700">数据库（SQL）</span></li>
|
||
<li class="flex items-center"><div class="w-2 h-2 bg-gray-900 rounded-full mr-3"></div><span class="text-gray-700">逆向反病毒</span></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-semibold text-gray-900 mb-4">设计类</h3>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-center"><div class="w-2 h-2 bg-gray-900 rounded-full mr-3"></div><span class="text-gray-700">UI / UX 设计</span></li>
|
||
<li class="flex items-center"><div class="w-2 h-2 bg-gray-900 rounded-full mr-3"></div><span class="text-gray-700">插画绘制</span></li>
|
||
<li class="flex items-center"><div class="w-2 h-2 bg-gray-900 rounded-full mr-3"></div><span class="text-gray-700">动效设计</span></li>
|
||
</ul>
|
||
<h3 class="text-lg font-semibold text-gray-900 mt-6 mb-4">其他</h3>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-center"><div class="w-2 h-2 bg-gray-900 rounded-full mr-3"></div><span class="text-gray-700">人工智能</span></li>
|
||
<li class="flex items-center"><div class="w-2 h-2 bg-gray-900 rounded-full mr-3"></div><span class="text-gray-700">操作系统优化</span></li>
|
||
<li class="flex items-center"><div class="w-2 h-2 bg-gray-900 rounded-full mr-3"></div><span class="text-gray-700">服务器部署</span></li>
|
||
<li class="flex items-center"><div class="w-2 h-2 bg-gray-900 rounded-full mr-3"></div><span class="text-gray-700">心理测评工具开发</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="transition-delay: 300ms;">
|
||
<div class="bg-white dark:bg-slate-800 rounded-xl p-8 md:p-10 shadow-[0_0_30px_rgba(0,0,0,0.08)] dark:shadow-[0_0_30px_rgba(0,0,0,0.4)] border border-gray-100 dark:border-slate-700">
|
||
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white pl-4 border-l-4 border-gray-900 dark:border-white mb-6">加入我们</h2>
|
||
<p class="text-gray-700 dark:text-gray-300 text-lg mb-8">无论你是谁，能力如何，只要你与我们有共同的理想，都能加入我们的团队，与我们共同努力。</p>
|
||
<div class="mb-8">
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">微信联系我们</h3>
|
||
<div class="flex items-center bg-gray-50 dark:bg-slate-700/50 p-4 rounded-lg border border-gray-100 dark:border-slate-600">
|
||
<i class="fa fa-envelope text-2xl text-gray-900 dark:text-white mr-4"></i>
|
||
<div>
|
||
<p class="text-gray-900 dark:text-white font-medium">GVSADS</p>
|
||
<p class="text-gray-500 dark:text-gray-400 text-sm mt-1">微信搜索添加 <span class="inline-block w-2 h-2 bg-gray-900 dark:bg-white animate-blink ml-1 align-middle"></span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="weixin://dl/add/?username=GVSADS" class="mt-4 inline-block bg-gray-900 dark:bg-white dark:text-gray-900 text-white font-semibold px-8 py-4 rounded-lg transition-all duration-300 hover:bg-gray-800 dark:hover:bg-gray-200 hover:shadow-[0_0_15px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_0_15px_rgba(255,255,255,0.2)] transform hover:-translate-y-1 active:scale-98">
|
||
申请加入（微信）
|
||
<i class="fa fa-arrow-right ml-2"></i></a>
|
||
<a href="mailto:hr@gvsds.com?subject=我申请加入银河锋锐软件开发工作室&body=您好!%0D%0A%0D%0A我是 [ 姓名 / 网名 ]，我期望加入银河锋锐软件开发工作室。%0D%0A我的联系方式是 [ 微信（必填） / QQ / TEL / X / 电报 / DISCORD ] %0D%0A我的兴趣爱好是 [ 选填 ]，我的能力是 [ 选填 ]。%0D%0A我能够作为 [ 画师 / 程序员 / 测试人员 ] 加入工作室。%0D%0A [ 您的更多个人信息（选填）（个人简历等） ] %0D%0A希望您能提供一个机会，感谢！%0D%0A—— [ 姓名 / 网名 ] [ 年-月-日 ]" class="mt-4 inline-block ml-4 bg-gray-900 dark:bg-white dark:text-gray-900 text-white font-semibold px-8 py-4 rounded-lg transition-all duration-300 hover:bg-gray-800 dark:hover:bg-gray-200 hover:shadow-[0_0_15px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_0_15px_rgba(255,255,255,0.2)] transform hover:-translate-y-1 active:scale-98">
|
||
申请加入（邮箱）
|
||
<i class="fa fa-arrow-right ml-2"></i></a>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
.animate-blink {animation: blink 1s step-start infinite;}
|
||
@keyframes blink {50% { opacity: 0; }}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
</section> |