49 lines
3.0 KiB
HTML
49 lines
3.0 KiB
HTML
<div class="bg-gradient-to-br from-indigo-50 to-purple-50 min-h-screen flex flex-col">
|
|
<main class="flex-grow flex flex-col items-center justify-center px-6 py-12 relative overflow-hidden">
|
|
<div class="hidden lg:block absolute left-0 top-1/8 -translate-y-1/2 w-1/3 max-w-md animate-float c-furry" style="animation-delay: 0s;"><img src="https://www.gvsds.com/assets/img/Background/ChiSha_Left.png" alt="左侧插画"
|
|
class="w-full h-auto object-contain transform hover:scale-105 transition-transform duration-300"></div>
|
|
<div class="text-center max-w-3xl z-10">
|
|
<h1 class="text-[clamp(2rem,5vw,4rem)] font-bold text-gray-800 leading-tight mb-6"> 加入我们，<br class="md:hidden"><span class="text-primary">创造未来</span></h1>
|
|
<p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-600 mb-10 max-w-2xl mx-auto"> 我们正在寻找充满激情、创意和才华的你。 加入我们，与我们一同创作。 </p>
|
|
<button id="Apply" class="bg-primary hover:bg-primary/90 text-white font-bold py-4 px-10 rounded-full text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 animate-pulse-slow">
|
|
提交简历 <i class="fa fa-arrow-right ml-2"></i>
|
|
</button>
|
|
<div class="mt-12 grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
<div class="bg-white/70 backdrop-blur-sm p-4 rounded-xl shadow-sm"><i class="fa fa-users text-primary text-2xl mb-2"></i>
|
|
<p class="text-gray-700 font-medium">多元团队</p>
|
|
</div>
|
|
<div class="bg-white/70 backdrop-blur-sm p-4 rounded-xl shadow-sm"><i class="fa fa-lightbulb text-primary text-2xl mb-2"></i>
|
|
<p class="text-gray-700 font-medium">创新文化</p>
|
|
</div>
|
|
<div class="bg-white/70 backdrop-blur-sm p-4 rounded-xl shadow-sm"><i class="fa fa-graduation-cap text-primary text-2xl mb-2"></i>
|
|
<p class="text-gray-700 font-medium">成长机会</p>
|
|
</div>
|
|
<div class="bg-white/70 backdrop-blur-sm p-4 rounded-xl shadow-sm"><i class="fa fa-coffee text-primary text-2xl mb-2"></i>
|
|
<p class="text-gray-700 font-medium">舒适环境</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hidden lg:block absolute right-0 top-1/8 -translate-y-1/2 w-1/3 max-w-md animate-float c-furry" style="animation-delay: 1s;"><img src="https://www.gvsds.com/assets/img/Background/Ying_Right.png" alt="右侧插画"
|
|
class="w-full h-auto object-contain transform hover:scale-105 transition-transform duration-300"></div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById("Apply").addEventListener("click", function () {
|
|
this.classList.add("scale-95");
|
|
setTimeout(() => {
|
|
this.classList.remove("scale-95");
|
|
window.open("/Apply/");
|
|
}, 200);
|
|
});
|
|
window.addEventListener("scroll", function () {
|
|
const nav = document.querySelector("nav");
|
|
if (window.scrollY > 50) {
|
|
nav.classList.add("shadow-md");
|
|
nav.classList.remove("shadow-sm");
|
|
} else {
|
|
nav.classList.remove("shadow-md");
|
|
nav.classList.add("shadow-sm");
|
|
}
|
|
});
|
|
</script> |