812 lines
66 KiB
HTML
812 lines
66 KiB
HTML
<div class="hidden">银河锋锐软件开发工作室 - Galactic Vorpal</div>
|
||
<div class="hidden">一站式解决所有项目问题。</div>
|
||
<div class="w-full h-[100vh] overflow-hidden flex relative z-[1] bg-cover bg-center bg-no-repeat bg-[url('/assets/img/Heroes/FUBG_R.png')]" style="min-height: 760px;">
|
||
<!--img src="/assets/img/Heroes/hongsexiaoma__.png" alt="" class="absolute xl:right-0 top-[120px] right-[-150px] h-[calc(100%-120px)] w-[480px] 2xl:w-[33%] 3xl:w-[40%] object-cover object-right-top pointer-events-none lg:block lg:opacity-100 opacity-0 hidden md:visible" style="z-index: 1; transform: scaleX(-1);"-->
|
||
<img src="/assets/img/Heroes/copyright.png" alt="" class="absolute right-[20px] bottom-[10px] h-[22px] pointer-events-none hidden lg:block opacity-0 lg:opacity-70" style="z-index: 2;">
|
||
<div class="flex-1 flex flex-col z-10 xl:px-[60px] 2xl:px-[174px] px-[16px] pl-[16px]">
|
||
<div class="flex-1 flex flex-col items-left justify-center text-[32px] 2xl:text-[50px] md:text-[42px] font-semibold">
|
||
<div class="hero-headline text-left w-fit rounded-lg relative">
|
||
<canvas class="absolute w-full h-full left-0 top-0 rounded-lg pointer-events-none hidden md:block" width="820" height="162" style="mask: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 820 162\'><path d=\'M 0,20 C 0,0 0,0 20,0 L 800,0 C 820,0 820,0 820,142 C 820,162 820,162 800,162 L 20,162 C 0,162 0,162 0,142 Z\' fill=\'white\'/></svg>'); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 820 162\'><path d=\'M 0,20 C 0,0 0,0 20,0 L 800,0 C 820,0 820,0 820,142 C 820,162 820,162 800,162 L 20,162 C 0,162 0,162 0,142 Z\' fill=\'white\'/></svg>');"></canvas>
|
||
<h1 class="z-10 relative leading-[40px] md:leading-[54px] px-[32px] md:px-0 mb-0 font-bold text-[#000] [text-shadow:0_2px_8px_rgba(0,0,0,0.6)]">
|
||
<div class="text-[20px] sm:text-[24px] md:text-[32px] text-[#FFF] leading-snug">你好 2026！ 部署项目:</div>
|
||
<div class="hidden md:block text-[#FFF]">一站式解决所有项目问题。</div>
|
||
<div class="hidden md:inline text-[#FFF]">结果不佳? 我们补偿！</div>
|
||
<div class="hidden md:block text-[18px] text-[#FFF]">相关负责人：<a class="text-[#667eea]" href="mailto:terminexus@gvsds.com">terminexus@gvsds.com</a></div>
|
||
</h1>
|
||
</div>
|
||
<div class="hero-actions mt-[40px] sm:mt-[60px] md:mt-[90px] px-[16px] sm:px-[32px] md:px-0 flex flex-col sm:flex-row gap-[10px] sm:gap-[12px] md:flex-row">
|
||
<a class="w-full sm:w-fit flex" href="/Project/Service/Service.html" target="_blank">
|
||
<button type="button" class="bg-[#000] w-full h-[44px] sm:h-[48px] 2xl:h-[56px] rounded-[12px] gap-1 py-[15px] pl-[24px] pr-[16px] flex items-center justify-center text-[#fff] hover:bg-[#333] active:scale-95 transition-all duration-150">
|
||
<span class="font-['PT_Sans'] font-bold text-[14px] sm:text-[15px] md:text-[18px] 2xl:text-[20px] leading-none tracking-normal align-middle">探索服务</span>
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="w-[18px] h-[18px] sm:w-[20px] sm:h-[20px]" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 9L7.5 6L4.5 3" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||
</button>
|
||
</a>
|
||
<a href="https://github.com/GVSDS/" target="_blank" rel="noopener noreferrer" class="w-full sm:w-fit flex !ml-0">
|
||
<button type="button" class="bg-[rgba(242,242,242,0.92)] w-full h-[44px] sm:h-[48px] 2xl:h-[56px] rounded-[12px] gap-1 py-[15px] pl-[24px] pr-[16px] flex items-center justify-center text-[#000] hover:bg-[#e6e6e6] active:scale-95 transition-all duration-150">
|
||
<span class="font-['PT_Sans'] font-bold text-[14px] sm:text-[15px] md:text-[18px] 2xl:text-[20px] leading-none tracking-normal align-middle">Github</span>
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="w-[18px] h-[18px] sm:w-[20px] sm:h-[20px] text-[#858585]" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 9L7.5 6L4.5 3" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||
</button>
|
||
</a>
|
||
<a href="https://invite.gvsds.com/RecruitingTalentedIndividuals/" target="_blank" rel="noopener noreferrer" class="w-full sm:w-fit flex !ml-0">
|
||
<button type="button" class="bg-[rgba(242,242,242,0.92)] w-full h-[44px] sm:h-[48px] 2xl:h-[56px] rounded-[12px] gap-1 py-[15px] pl-[24px] pr-[16px] flex items-center justify-center text-[#000] hover:bg-[#e6e6e6] active:scale-95 transition-all duration-150">
|
||
<span class="font-['PT_Sans'] font-bold text-[14px] sm:text-[15px] md:text-[18px] 2xl:text-[20px] leading-none tracking-normal align-middle">招贤纳士</span>
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="w-[18px] h-[18px] sm:w-[20px] sm:h-[20px] text-[#858585]" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 9L7.5 6L4.5 3" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||
</button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-stats 2xl:h-[198px] h-[100px] sm:h-[120px] pr-[16px] sm:pr-[30px] 2xl:pr-[174px] xl:pr-[100px] flex justify-between 2xl:justify-start md:justify-start md:gap-[80px] lg:gap-[160px] 2xl:gap-[267px] items-top hidden md:flex">
|
||
<div>
|
||
<div class="font-['DIN_Condensed'] font-bold leading-none tracking-normal uppercase mb-[8px] md:mb-[4px] 2xl:mb-[12px] text-[24px] sm:text-[23px] md:text-[24px] text-[#FFF] opacity-80 [text-shadow:0_2px_8px_rgba(0,0,0,0.6)]">Total Code Size (characters)</div>
|
||
<div class="flex gap-[3px] sm:gap-1 scale-[0.65] sm:scale-[0.8] 2xl:scale-[1] origin-left">
|
||
<div class="M-FlipCard down flip-win bg-bg-primary" style="--flipduration: 0.026242368233221722s;"><div class="digital front number0"></div><div class="digital back number0"></div></div>
|
||
<div class="M-FlipCard down flip-win bg-bg-primary" style="--flipduration: 0.029718667678514322s;"><div class="digital front number7"></div><div class="digital back number7"></div></div>
|
||
<div class="M-FlipCard down flip-win bg-bg-primary" style="--flipduration: 0.025401492287061424s;"><div class="digital front number3"></div><div class="digital back number3"></div></div>
|
||
<div class="M-FlipCard down flip-win bg-bg-primary" style="--flipduration: 0.03088231871236644s;"><div class="digital front number8"></div><div class="digital back number8"></div></div>
|
||
<div class="M-FlipCard down flip-win bg-bg-primary" style="--flipduration: 0.031675451149336446s;"><div class="digital front number5"></div><div class="digital back number5"></div></div>
|
||
<div class="M-FlipCard down flip-win bg-bg-primary" style="--flipduration: 0.03497610376846389s;"><div class="digital front number0"></div><div class="digital back number0"></div></div>
|
||
<div class="M-FlipCard down flip-win bg-bg-primary" style="--flipduration: 0.030530656690159304s;"><div class="digital front number9"></div><div class="digital back number9"></div></div>
|
||
<div class="M-FlipCard down flip-win bg-bg-primary" style="--flipduration: 0.02840509640985139s;"><div class="digital front number2"></div><div class="digital back number2"></div></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="font-['DIN_Condensed'] font-bold leading-none tracking-normal uppercase mb-[8px] md:mb-[4px] 2xl:mb-[12px] text-[24px] sm:text-[23px] md:text-[24px] text-[#FFF] opacity-80 [text-shadow:0_2px_8px_rgba(0,0,0,0.6)]">Maximum Insurance Amount (CNY)</div>
|
||
<div class="flex gap-[3px] sm:gap-1 scale-[0.65] sm:scale-[0.8] 2xl:scale-[1] origin-left">
|
||
<div class="M-FlipCard down flip-win bg-bg-primary" style="--flipduration: 0.02627530204186018s;"><div class="digital front number0"></div><div class="digital back number0"></div></div>
|
||
<div class="M-FlipCard down flip-win bg-bg-primary" style="--flipduration: 0.03200964712168997s;"><div class="digital front number0"></div><div class="digital back number0"></div></div>
|
||
<div class="M-FlipCard down flip-win bg-bg-primary" style="--flipduration: 0.03464767830776408s;"><div class="digital front number0"></div><div class="digital back number0"></div></div>
|
||
<div class="M-FlipCard down flip-win bg-bg-primary" style="--flipduration: 0.030824110890535515s;"><div class="digital front number0"></div><div class="digital back number0"></div></div>
|
||
<div class="M-FlipCard down flip-win bg-bg-primary" style="--flipduration: 0.02593196506159544s;"><div class="digital front number3"></div><div class="digital back number3"></div></div>
|
||
<div class="M-FlipCard down flip-win bg-bg-primary" style="--flipduration: 0.03374560321012195s;"><div class="digital front number8"></div><div class="digital back number8"></div></div>
|
||
<div class="M-FlipCard down flip-win bg-bg-primary" style="--flipduration: 0.03213503227905559s;"><div class="digital front number9"></div><div class="digital back number9"></div></div>
|
||
<div class="M-FlipCard down flip-win bg-bg-primary" style="--flipduration: 0.03463823789640608s;"><div class="digital front number9"></div><div class="digital back number9"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<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 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">
|
||
<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"> 下一世代的年轻开发团队 </p>
|
||
</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 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 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>
|
||
|
||
|
||
|
||
<!-- Projects Section -->
|
||
<section class="py-24 px-4 bg-gradient-to-b from-white to-slate-50">
|
||
<div class="max-w-7xl mx-auto">
|
||
<!-- Section Header -->
|
||
<div class="text-center mb-16">
|
||
<span class="inline-block px-4 py-1.5 bg-purple-50 text-purple-700 text-xs font-semibold tracking-widest uppercase rounded-full border border-purple-100 mb-4">开源成果</span>
|
||
<h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4 tracking-tight">我们做过什么</h2>
|
||
<p class="text-gray-500 text-lg max-w-xl mx-auto">沉淀技术，开放共享 — 探索我们的核心开源项目与工程实践</p>
|
||
</div>
|
||
|
||
<!-- Project Grid -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
|
||
<!-- Card 1 -->
|
||
<div class="group bg-white rounded-2xl p-7 border border-gray-100 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 flex flex-col">
|
||
<div class="flex items-center gap-4 mb-5">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-xl flex items-center justify-center shadow-md flex-shrink-0">
|
||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-base font-bold text-gray-900">FastProxyX</h3>
|
||
<span class="text-xs text-gray-400 font-medium">Network Infrastructure</span>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-500 text-sm leading-relaxed mb-5 flex-1">Python 实现的轻量级 Frp 反向代理工具，支持 TCP 端口转发，体积小巧，配置简单，可无缝嵌入 Python 工程项目。</p>
|
||
<div class="flex flex-wrap gap-2 mb-5">
|
||
<span class="px-2.5 py-1 bg-blue-50 text-blue-600 text-xs font-medium rounded-md border border-blue-100">Python</span>
|
||
<span class="px-2.5 py-1 bg-emerald-50 text-emerald-600 text-xs font-medium rounded-md border border-emerald-100">TCP</span>
|
||
<span class="px-2.5 py-1 bg-slate-50 text-slate-600 text-xs font-medium rounded-md border border-slate-200">网络代理</span>
|
||
</div>
|
||
<a href="https://github.com/GVSDS/FastProxyX" target="_blank" class="inline-flex items-center gap-1.5 text-purple-600 hover:text-purple-500 text-sm font-medium group-hover:gap-2.5 transition-all duration-200">
|
||
查看项目
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Card 2 -->
|
||
<div class="group bg-white rounded-2xl p-7 border border-gray-100 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 flex flex-col">
|
||
<div class="flex items-center gap-4 mb-5">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-yellow-400 rounded-xl flex items-center justify-center shadow-md flex-shrink-0">
|
||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-base font-bold text-gray-900">ResourceShare</h3>
|
||
<span class="text-xs text-gray-400 font-medium">Web Performance</span>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-500 text-sm leading-relaxed mb-5 flex-1">高性能跨资源共享系统，支持跨 iframe / 页面资源共享、智能缓存与加载顺序控制，全面解决 Web 应用资源管理难题。</p>
|
||
<div class="flex flex-wrap gap-2 mb-5">
|
||
<span class="px-2.5 py-1 bg-yellow-50 text-yellow-600 text-xs font-medium rounded-md border border-yellow-100">JavaScript</span>
|
||
<span class="px-2.5 py-1 bg-cyan-50 text-cyan-600 text-xs font-medium rounded-md border border-cyan-100">资源管理</span>
|
||
<span class="px-2.5 py-1 bg-slate-50 text-slate-600 text-xs font-medium rounded-md border border-slate-200">Web</span>
|
||
</div>
|
||
<a href="https://github.com/GVSDS/ResourceShare" target="_blank" class="inline-flex items-center gap-1.5 text-purple-600 hover:text-purple-500 text-sm font-medium group-hover:gap-2.5 transition-all duration-200">
|
||
查看项目
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Card 3 -->
|
||
<div class="group bg-white rounded-2xl p-7 border border-gray-100 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 flex flex-col">
|
||
<div class="flex items-center gap-4 mb-5">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-400 rounded-xl flex items-center justify-center shadow-md flex-shrink-0">
|
||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-base font-bold text-gray-900">PyFabricLoader</h3>
|
||
<span class="text-xs text-gray-400 font-medium">Game Modding</span>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-500 text-sm leading-relaxed mb-5 flex-1">Minecraft Fabric 的 Python 模组加载器，基于 Jython 实现，支持 Python 模组开发，兼容 1.18.1 – 1.21.10 全版本区间。</p>
|
||
<div class="flex flex-wrap gap-2 mb-5">
|
||
<span class="px-2.5 py-1 bg-green-50 text-green-600 text-xs font-medium rounded-md border border-green-100">Python</span>
|
||
<span class="px-2.5 py-1 bg-red-50 text-red-600 text-xs font-medium rounded-md border border-red-100">Minecraft</span>
|
||
<span class="px-2.5 py-1 bg-indigo-50 text-indigo-600 text-xs font-medium rounded-md border border-indigo-100">Java</span>
|
||
</div>
|
||
<a href="https://github.com/GVSDS/PyFabricLoader" target="_blank" class="inline-flex items-center gap-1.5 text-purple-600 hover:text-purple-500 text-sm font-medium group-hover:gap-2.5 transition-all duration-200">
|
||
查看项目
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Card 4 -->
|
||
<div class="group bg-white rounded-2xl p-7 border border-gray-100 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 flex flex-col">
|
||
<div class="flex items-center gap-4 mb-5">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-red-500 to-pink-400 rounded-xl flex items-center justify-center shadow-md flex-shrink-0">
|
||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-base font-bold text-gray-900">TransPyC</h3>
|
||
<span class="text-xs text-gray-400 font-medium">Compiler Toolchain</span>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-500 text-sm leading-relaxed mb-5 flex-1">作为自制语言 “Viper” 的编译器，其以类似 Python 的语法进行 AOT，性能和 C 相当，但可读性更高。</p>
|
||
<div class="flex flex-wrap gap-2 mb-5">
|
||
<span class="px-2.5 py-1 bg-blue-50 text-blue-600 text-xs font-medium rounded-md border border-blue-100">Python</span>
|
||
<span class="px-2.5 py-1 bg-slate-100 text-slate-600 text-xs font-medium rounded-md border border-slate-200">Viper</span>
|
||
<span class="px-2.5 py-1 bg-orange-50 text-orange-600 text-xs font-medium rounded-md border border-orange-100">编译器</span>
|
||
</div>
|
||
<a href="https://github.com/GVSDS/TransPyC" target="_blank" class="inline-flex items-center gap-1.5 text-purple-600 hover:text-purple-500 text-sm font-medium group-hover:gap-2.5 transition-all duration-200">
|
||
查看项目
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Card 5 -->
|
||
<div class="group bg-white rounded-2xl p-7 border border-gray-100 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 flex flex-col">
|
||
<div class="flex items-center gap-4 mb-5">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-violet-500 to-purple-400 rounded-xl flex items-center justify-center shadow-md flex-shrink-0">
|
||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-base font-bold text-gray-900">CreateE SpaceCCL</h3>
|
||
<span class="text-xs text-gray-400 font-medium">Spatial Computing</span>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-500 text-sm leading-relaxed mb-5 flex-1">专注于空间计算与创意工程的前沿技术探索项目，融合工程实践与创意思维，持续拓展技术边界。</p>
|
||
<div class="flex flex-wrap gap-2 mb-5">
|
||
<span class="px-2.5 py-1 bg-violet-50 text-violet-600 text-xs font-medium rounded-md border border-violet-100">空间计算</span>
|
||
<span class="px-2.5 py-1 bg-teal-50 text-teal-600 text-xs font-medium rounded-md border border-teal-100">创意工程</span>
|
||
</div>
|
||
<a href="https://github.com/GVSDS/CreateE_SpaceCCL" target="_blank" class="inline-flex items-center gap-1.5 text-purple-600 hover:text-purple-500 text-sm font-medium group-hover:gap-2.5 transition-all duration-200">
|
||
查看项目
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- More Projects CTA -->
|
||
<div class="bg-gradient-to-br from-purple-600 to-indigo-600 rounded-2xl p-7 flex flex-col items-center justify-center text-center shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
|
||
<div class="w-12 h-12 bg-white/15 rounded-xl flex items-center justify-center mb-4 border border-white/20">
|
||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-lg font-bold text-white mb-1.5">更多开源项目</h3>
|
||
<p class="text-purple-200 text-sm mb-6 leading-relaxed">持续构建中 — 探索我们在 GitHub 上的完整工程仓库</p>
|
||
<a href="https://github.com/GVSDS" target="_blank" class="inline-flex items-center gap-2 px-6 py-2.5 bg-white text-purple-700 font-semibold rounded-full text-sm hover:bg-purple-50 transition-colors shadow-sm">
|
||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.39.6.11.82-.26.82-.58v-2.03c-3.34.73-4.04-1.61-4.04-1.61-.54-1.38-1.33-1.75-1.33-1.75-1.09-.74.08-.73.08-.73 1.2.09 1.84 1.24 1.84 1.24 1.07 1.83 2.8 1.3 3.48 1 .11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 013-.4c1.02.005 2.04.14 3 .4 2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18.77.84 1.23 1.91 1.23 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.21.7.82.58C20.56 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z"/>
|
||
</svg>
|
||
访问 GitHub
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section class="py-20 px-4 from-slate-50 to-white dark:from-slate-900 dark:to-slate-800 overflow-hidden">
|
||
<div class="max-w-6xl mx-auto text-center mb-16">
|
||
<h2 class="text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-6">美术设计</h2>
|
||
<p class="text-gray-600 dark:text-gray-400 text-lg max-w-2xl mx-auto leading-relaxed">
|
||
我们拥有专业的美术设计团队，涵盖UI/UX设计、品牌视觉、插画创作、3D建模等多个领域。
|
||
每一件作品都凝聚着创意与匠心，为您的项目注入独特的视觉魅力。
|
||
</p>
|
||
<div class="flex justify-center gap-6 mt-8">
|
||
<div class="text-center">
|
||
<div class="text-3xl font-bold text-purple-600 dark:text-purple-400">50+</div>
|
||
<div class="text-sm text-gray-500 dark:text-gray-400">设计作品</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-3xl font-bold text-purple-600 dark:text-purple-400">5年+</div>
|
||
<div class="text-sm text-gray-500 dark:text-gray-400">美工画龄</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-3xl font-bold text-purple-600 dark:text-purple-400">100%</div>
|
||
<div class="text-sm text-gray-500 dark:text-gray-400">客户满意</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative h-[40vh] md:h-[50vh] overflow-hidden">
|
||
<div class="absolute left-0 top-0 bottom-0 w-24 pointer-events-none bg-gradient-to-r from-slate-50 to-transparent dark:from-slate-900 dark:to-transparent z-10"></div>
|
||
<div class="absolute right-0 top-0 bottom-0 w-24 pointer-events-none bg-gradient-to-l from-slate-50 to-transparent dark:from-slate-900 dark:to-transparent z-10"></div>
|
||
<div id="carousel-track" class="flex gap-6 absolute top-1/2 -translate-y-1/2"></div>
|
||
</div>
|
||
|
||
<div class="max-w-6xl mx-auto mt-16">
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<div class="bg-white dark:bg-slate-800 p-6 rounded-2xl border border-gray-200 dark:border-slate-700 shadow-sm">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-pink-500 to-rose-500 rounded-xl flex items-center justify-center mb-4">
|
||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">UI/UX设计</h3>
|
||
<p class="text-gray-600 dark:text-gray-400 text-sm">打造直观、美观的用户界面，提升用户体验与产品价值</p>
|
||
</div>
|
||
<div class="bg-white dark:bg-slate-800 p-6 rounded-2xl border border-gray-200 dark:border-slate-700 shadow-sm">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-violet-500 to-purple-500 rounded-xl flex items-center justify-center mb-4">
|
||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">个人艺术</h3>
|
||
<p class="text-gray-600 dark:text-gray-400 text-sm">来自画师本身独特的艺术风格</p>
|
||
</div>
|
||
<div class="bg-white dark:bg-slate-800 p-6 rounded-2xl border border-gray-200 dark:border-slate-700 shadow-sm">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-xl flex items-center justify-center mb-4">
|
||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">3D建模</h3>
|
||
<p class="text-gray-600 dark:text-gray-400 text-sm">高质量3D模型制作，适用于游戏、动画与产品展示</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<script>
|
||
const track = document.getElementById('carousel-track');
|
||
const images = [
|
||
'/Members/B-Smooth/assets/img/1.jpg',
|
||
'/Members/B-Smooth/assets/img/2.jpg',
|
||
'/Members/B-Smooth/assets/img/3.jpg',
|
||
'/Members/B-Smooth/assets/img/4.jpg',
|
||
'/Members/B-Smooth/assets/img/5.jpg',
|
||
'/Members/B-Smooth/assets/img/6.jpg',
|
||
'/Members/YuanZe/assets/img/A.jpg',
|
||
'/Members/YuanZe/assets/img/B.jpg',
|
||
'/Members/YuanZe/assets/img/C.jpg',
|
||
'/Members/YuanZe/assets/img/D.png',
|
||
'/Members/YuanZe/assets/img/E.jpg',
|
||
'/Members/YuanZe/assets/img/F.jpg'
|
||
];
|
||
const gradients = [
|
||
'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||
'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
|
||
'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
|
||
'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
|
||
'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
|
||
'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
|
||
'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
|
||
'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)'
|
||
];
|
||
images.forEach((src, i) => {
|
||
const item = document.createElement('div');
|
||
item.className = 'carousel-item flex-shrink-0 w-[35vh] h-[35vh] md:w-[40vh] md:h-[40vh] rounded-xl overflow-hidden shadow-lg';
|
||
const img = document.createElement('img');
|
||
img.src = src;
|
||
img.alt = `Art ${i + 1}`;
|
||
img.className = 'w-full h-full object-cover hover:scale-110 transition-transform duration-500';
|
||
img.onerror = function() { this.parentElement.style.background = gradients[i]; };
|
||
item.appendChild(img);
|
||
track.appendChild(item);
|
||
});
|
||
track.innerHTML += track.innerHTML;
|
||
let position = 0;
|
||
let isPaused = false;
|
||
function animate() {
|
||
if (!isPaused) {
|
||
position -= 1.5;
|
||
if (Math.abs(position) >= track.scrollWidth / 2) {
|
||
position = 0;
|
||
}
|
||
track.style.transform = `translateX(${position}px) translateY(-50%)`;
|
||
}
|
||
requestAnimationFrame(animate);
|
||
}
|
||
track.addEventListener('mouseenter', () => isPaused = true);
|
||
track.addEventListener('mouseleave', () => isPaused = false);
|
||
animate();
|
||
</script>
|
||
|
||
|
||
|
||
<section class="lg:h-[75vh] w-full bg-[#ffebed]/10 p-[2rem_1rem] relative mb-32">
|
||
<div class="absolute z-10 top-0 left-0 w-64 h-64 bg-[#d1c4ce]/60" style="clip-path: polygon(0 0, 100% 0, 100% 90%, 95% 100%, 0 100%);"></div>
|
||
<div class="absolute z-10 top-8 left-8 w-48 h-48 bg-[#a094aa]/60" style="clip-path: polygon(0 0, 100% 0, 100% 95%, 90% 100%, 0 100%);"></div>
|
||
<div class="absolute z-10 top-16 left-16 w-32 h-32 bg-[#678187]/50" style="clip-path: polygon(0 0, 100% 0, 100% 90%, 95% 100%, 0 100%);"></div>
|
||
|
||
<div class="absolute z-10 top-0 right-0 w-64 h-64 bg-[#d1c4ce]/60" style="clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 10%);"></div>
|
||
<div class="absolute z-10 top-8 right-8 w-48 h-48 bg-[#a094aa]/60" style="clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 5%);"></div>
|
||
<div class="absolute z-10 top-16 right-16 w-32 h-32 bg-[#678187]/50" style="clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 10%);"></div>
|
||
|
||
<div class="absolute z-10 bottom-0 left-0 w-64 h-64 bg-[#d1c4ce]/60" style="clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 10%);"></div>
|
||
<div class="absolute z-10 bottom-8 left-8 w-48 h-48 bg-[#a094aa]/60" style="clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 5%);"></div>
|
||
<div class="absolute z-10 bottom-16 left-16 w-32 h-32 bg-[#678187]/50" style="clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 10%);"></div>
|
||
|
||
<div class="absolute z-10 bottom-0 right-0 w-64 h-64 bg-[#d1c4ce]/60" style="clip-path: polygon(0 0, 100% 0, 100% 90%, 95% 100%, 0 100%);"></div>
|
||
<div class="absolute z-10 bottom-8 right-8 w-48 h-48 bg-[#a094aa]/60" style="clip-path: polygon(0 0, 100% 0, 100% 95%, 90% 100%, 0 100%);"></div>
|
||
<div class="absolute z-10 bottom-16 right-16 w-32 h-32 bg-[#678187]/50" style="clip-path: polygon(0 0, 100% 0, 100% 90%, 95% 100%, 0 100%);"></div>
|
||
|
||
<div class="relative max-w-7xl w-full mx-auto z-20">
|
||
|
||
<div class="p-4 bg-[#ffebed]/20 border-b border-[#d1c4ce]/30 mb-6 rounded-t-lg">
|
||
<div class="flex flex-wrap justify-between items-center gap-3">
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-[#491400] font-medium text-sm">
|
||
查看模式：
|
||
</span>
|
||
<button id="thumbnailMode" class="px-3 py-1.5 text-sm bg-[#678187] text-white rounded-md hover:bg-[#678187]/90 transition-all duration-300">
|
||
<i class="fa-solid fa-image mr-1"></i>
|
||
缩略图
|
||
</button>
|
||
<button id="originalMode" class="px-3 py-1.5 text-sm bg-[#d1c4ce] text-[#491400] rounded-md hover:bg-[#d1c4ce]/90 transition-all duration-300">
|
||
<i class="fa-solid fa-image mr-1"></i>
|
||
原图
|
||
</button>
|
||
</div>
|
||
<div class="flex flex-wrap gap-2">
|
||
<button class="version-btn px-2.5 py-1.5 text-sm bg-[#d1c4ce] text-[#491400] rounded-md hover:bg-[#d1c4ce]/90 transition-all duration-300" data-version="1">
|
||
初稿1
|
||
</button>
|
||
<button class="version-btn px-2.5 py-1.5 text-sm bg-[#d1c4ce] text-[#491400] rounded-md hover:bg-[#d1c4ce]/90 transition-all duration-300" data-version="2">
|
||
初稿2
|
||
</button>
|
||
<button class="version-btn px-2.5 py-1.5 text-sm bg-[#d1c4ce] text-[#491400] rounded-md hover:bg-[#d1c4ce]/90 transition-all duration-300" data-version="3">
|
||
完稿
|
||
</button>
|
||
<button class="version-btn px-2.5 py-1.5 text-sm bg-[#d1c4ce] text-[#491400] rounded-md hover:bg-[#d1c4ce]/90 transition-all duration-300" data-version="4">
|
||
材质优化
|
||
</button>
|
||
<button class="version-btn px-2.5 py-1.5 text-sm bg-[#678187] text-white rounded-md hover:bg-[#678187]/90 transition-all duration-300" data-version="5">
|
||
背景成图
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex flex-col lg:flex-row gap-8">
|
||
|
||
<div class="lg:w-2/3 relative flex justify-center items-center">
|
||
<div id="imageContainer" class="w-full max-w-[850px] lg:h-[700px] sm:h-[500px] xs:h-[300px] aspect-[17/22] overflow-hidden relative mx-auto p-4 border-0 rounded-lg">
|
||
<div id="loadingIndicator" class="absolute inset-0 flex items-center justify-center bg-[#ffebed]/20 z-50">
|
||
<div class="w-10 h-10 border-4 border-[#d1c4ce] border-t-4 border-t-[#678187] rounded-full animate-spin"></div>
|
||
</div>
|
||
<img
|
||
id="mainImage"
|
||
src="/assets/img/Mascot/resize/5.png"
|
||
alt="吉祥物海报-背景成图"
|
||
class="w-full h-full object-contain mx-auto my-0 block"
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lg:w-1/3 flex flex-col justify-center text-[#491400] bg-[#ffebed]/10 p-6 rounded-lg">
|
||
<div class="flex items-center gap-3 mb-5">
|
||
<div class="w-2.5 h-10 bg-[#491400]"></div>
|
||
<span class="text-[#678187] uppercase tracking-widest text-xs">
|
||
Silver Frost · Wind Fiend
|
||
</span>
|
||
</div>
|
||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#491400] to-[#d7aa66] mb-3 leading-tight">
|
||
工作室吉祥物
|
||
<br>
|
||
银霜 · 风獠
|
||
</h2>
|
||
<div class="h-0.5 w-20 bg-gradient-to-r from-[#491400] to-[#d7aa66] rounded-full mb-6"></div>
|
||
<div class="space-y-3 mb-6">
|
||
<div class="flex items-start gap-3">
|
||
<i class="fa-solid fa-cube text-[#491400] mt-1 text-sm"></i>
|
||
<div>
|
||
<h4 class="font-semibold text-[#491400] text-sm">
|
||
Furry
|
||
</h4>
|
||
<p class="text-[#678187]/80 text-xs mt-1">
|
||
贴合吉祥物特征的基本合理样式
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<i class="fa-solid fa-palette text-[#491400] mt-1 text-sm"></i>
|
||
<div>
|
||
<h4 class="font-semibold text-[#491400] text-sm">
|
||
画师原话
|
||
</h4>
|
||
<p class="text-[#678187]/80 text-xs mt-1">
|
||
我相信，优秀的画作不仅要有好看的人设，更需要经得起推敲的结构。我致力于在二次元的风格中融入严谨的透视逻辑，同时用富有感染力的色彩传达角色的情绪。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<i class="fa-solid fa-display text-[#491400] mt-1 text-sm"></i>
|
||
<div>
|
||
<h4 class="font-semibold text-[#491400] text-sm">
|
||
含义
|
||
</h4>
|
||
<p class="text-[#678187]/80 text-xs mt-1">
|
||
银霜是工作室精神的具象化体现。它代表着B-Smooth对画面"凌厉线条"与"清透质感"的追求。是对画师结构理解力的极致考验。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-auto pt-4 border-t border-[#d1c4ce]/50">
|
||
<p class="text-[#678187]/70 text-xs">
|
||
© 2025 Silver Frost · Wind Fiend · 版权归品牌方（组织）所有，作品权属原画师 B-Smooth，任何第三方未授权窃图皆为违法行为。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<section class="py-24 px-4 bg-white border-t border-gray-100">
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="text-center mb-14">
|
||
<span class="inline-block px-5 py-2 bg-slate-50 text-slate-600 text-sm font-semibold tracking-widest uppercase rounded-full border border-slate-200 mb-5">战略合作</span>
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3 tracking-tight">值得信赖的技术合作伙伴</h2>
|
||
<p class="text-gray-400 text-base">携手同行，共建技术生态</p>
|
||
</div>
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
|
||
<div class="group flex items-center gap-5 bg-white p-5 rounded-xl border border-gray-100 shadow-sm hover:shadow-md hover:border-purple-200 dark:bg-slate-800 dark:border-slate-700 dark:hover:border-purple-600 transition-all duration-300">
|
||
<img src="/assets/img/Cooperation/what.jpg" alt="Starfield Studio" class="w-16 h-16 rounded-lg object-cover shadow-sm flex-shrink-0 ring-1 ring-gray-100">
|
||
<div class="flex flex-col min-w-0">
|
||
<span class="font-semibold text-base text-gray-800 dark:text-white truncate">Starfield Studio</span>
|
||
<span class="text-sm text-gray-400 dark:text-neutral-400 truncate mt-1">软件开发子工作室</span>
|
||
</div>
|
||
</div>
|
||
<div class="group flex items-center gap-5 bg-white p-5 rounded-xl border border-gray-100 shadow-sm hover:shadow-md hover:border-purple-200 dark:bg-slate-800 dark:border-slate-700 dark:hover:border-purple-600 transition-all duration-300">
|
||
<img src="/assets/img/Cooperation/CodeCrafterStudio.jpg" alt="CodeCrafter Studio" class="w-16 h-16 rounded-lg object-cover shadow-sm flex-shrink-0 ring-1 ring-gray-100">
|
||
<div class="flex flex-col min-w-0">
|
||
<span class="font-semibold text-base text-gray-800 dark:text-white truncate">CodeCrafter Studio</span>
|
||
<span class="text-sm text-gray-400 dark:text-neutral-400 truncate mt-1">代码工匠工作室</span>
|
||
</div>
|
||
</div>
|
||
<div class="group flex items-center gap-5 bg-white p-5 rounded-xl border border-gray-100 shadow-sm hover:shadow-md hover:border-purple-200 dark:bg-slate-800 dark:border-slate-700 dark:hover:border-purple-600 transition-all duration-300">
|
||
<img src="/assets/img/Cooperation/May.png" alt="May Dev-Community" class="w-16 h-16 rounded-lg object-cover shadow-sm flex-shrink-0 ring-1 ring-gray-100">
|
||
<div class="flex flex-col min-w-0">
|
||
<span class="font-semibold text-base text-gray-800 dark:text-white truncate">May Dev-Community</span>
|
||
<span class="text-sm text-gray-400 dark:text-neutral-400 truncate mt-1">开发者社区</span>
|
||
</div>
|
||
</div>
|
||
<div class="group flex items-center gap-5 bg-white p-5 rounded-xl border border-gray-100 shadow-sm hover:shadow-md hover:border-purple-200 dark:bg-slate-800 dark:border-slate-700 dark:hover:border-purple-600 transition-all duration-300">
|
||
<img src="/assets/img/Cooperation/MHD.jpg" alt="MHD Community" class="w-16 h-16 rounded-lg object-cover shadow-sm flex-shrink-0 ring-1 ring-gray-100">
|
||
<div class="flex flex-col min-w-0">
|
||
<span class="font-semibold text-base text-gray-800 dark:text-white truncate">MHD Community</span>
|
||
<span class="text-sm text-gray-400 dark:text-neutral-400 truncate mt-1">技术社区</span>
|
||
</div>
|
||
</div>
|
||
<div class="group flex items-center gap-5 bg-white p-5 rounded-xl border border-gray-100 shadow-sm hover:shadow-md hover:border-purple-200 dark:bg-slate-800 dark:border-slate-700 dark:hover:border-purple-600 transition-all duration-300">
|
||
<img src="/assets/img/Cooperation/XINGJI.png" alt="XINGJI Studio" class="w-16 h-16 rounded-lg object-cover shadow-sm flex-shrink-0 ring-1 ring-gray-100">
|
||
<div class="flex flex-col min-w-0">
|
||
<span class="font-semibold text-base text-gray-800 dark:text-white truncate">XINGJI Studio</span>
|
||
<span class="text-sm text-gray-400 dark:text-neutral-400 truncate mt-1">软件开发工作室</span>
|
||
</div>
|
||
</div>
|
||
<div class="group flex items-center gap-5 bg-white p-5 rounded-xl border border-gray-100 shadow-sm hover:shadow-md hover:border-purple-200 dark:bg-slate-800 dark:border-slate-700 dark:hover:border-purple-600 transition-all duration-300">
|
||
<img src="/assets/img/Cooperation/what.jpg" alt="N.R.C. Plan" class="w-16 h-16 rounded-lg object-cover shadow-sm flex-shrink-0 ring-1 ring-gray-100">
|
||
<div class="flex flex-col min-w-0">
|
||
<span class="font-semibold text-base text-gray-800 dark:text-white truncate">N.R.C. Plan</span>
|
||
<span class="text-sm text-gray-400 dark:text-neutral-400 truncate mt-1">10 Years 计划项目</span>
|
||
</div>
|
||
</div>
|
||
<div class="group flex items-center gap-5 bg-white p-5 rounded-xl border border-gray-100 shadow-sm hover:shadow-md hover:border-purple-200 dark:bg-slate-800 dark:border-slate-700 dark:hover:border-purple-600 transition-all duration-300">
|
||
<img src="/assets/img/Cooperation/SunnyStudio.jpg" alt="Sunny Studio" class="w-16 h-16 rounded-lg object-cover shadow-sm flex-shrink-0 ring-1 ring-gray-100">
|
||
<div class="flex flex-col min-w-0">
|
||
<span class="font-semibold text-base text-gray-800 dark:text-white truncate">Sunny Studio</span>
|
||
<span class="text-sm text-gray-400 dark:text-neutral-400 truncate mt-1">晴天工作室</span>
|
||
</div>
|
||
</div>
|
||
<div class="group flex items-center gap-5 bg-white p-5 rounded-xl border border-gray-100 shadow-sm hover:shadow-md hover:border-purple-200 dark:bg-slate-800 dark:border-slate-700 dark:hover:border-purple-600 transition-all duration-300">
|
||
<img src="/assets/img/Cooperation/373.jpg" alt="373 [VP Studio]" class="w-16 h-16 rounded-lg object-cover shadow-sm flex-shrink-0 ring-1 ring-gray-100">
|
||
<div class="flex flex-col min-w-0">
|
||
<span class="font-semibold text-base text-gray-800 dark:text-white truncate">373 [VP Studio]</span>
|
||
<span class="text-sm text-gray-400 dark:text-neutral-400 truncate mt-1">视频制作工作室</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="py-16 px-4 border-t border-gray-100">
|
||
<div class="max-w-5xl mx-auto">
|
||
<div class="text-center mb-10">
|
||
<span class="inline-block px-4 py-1.5 bg-white text-slate-500 text-xs font-semibold tracking-widest uppercase rounded-full border border-slate-200 mb-4">致谢名录</span>
|
||
<h2 class="text-2xl font-bold text-gray-800 mb-2 tracking-tight">工程谢幕</h2>
|
||
<p class="text-gray-400 text-sm">感谢每一位参与者的贡献与支持</p>
|
||
</div>
|
||
<div class="w-12 h-px bg-gradient-to-r from-transparent via-purple-400 to-transparent mx-auto mb-10"></div>
|
||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-x-6 gap-y-5">
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">TermiNexus</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">悠然自得</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">Chindows</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">iamgyc</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">DevZylo</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">Mendelevium</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">红叶鸣秋</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">渊泽</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">B-Smooth</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">羊村哲学家</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">剑来</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">CodeyZhang</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">Markstollr_8651</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">Minecraft_2v</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">Microhard_1724</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">好运莲莲</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">dyjsgwist</span>
|
||
</div>
|
||
<div class="text-center">
|
||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">李</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section class="bg-gray-50 py-24 md:py-40">
|
||
<div class="container mx-auto px-6 flex flex-col md:flex-row gap-16 md:gap-24 max-w-7xl">
|
||
<div class="flex-1">
|
||
<span class="block text-xs font-bold uppercase tracking-[0.2em] text-gray-400 mb-4">Studio</span>
|
||
<h2 class="text-4xl md:text-6xl font-black tracking-tighter mb-8 leading-tight">不仅仅是代码。</h2>
|
||
<p class="text-gray-500 text-lg leading-loose">
|
||
GVSDS 是一个汇聚了设计师、开发者和程序员的工作室。我们拒绝平庸的模板，致力于为合作者打造独一无二的体验。
|
||
</p>
|
||
</div>
|
||
<div class="flex-1 flex flex-col justify-center">
|
||
<span class="block text-xs font-bold uppercase tracking-[0.2em] text-gray-400 mb-6">Contact</span>
|
||
<div class="space-y-6">
|
||
<p class="text-3xl font-medium text-black">support@gvsds.com</p>
|
||
<p class="text-gray-500 text-lg">+86 182 2215 2539</p>
|
||
<div class="flex gap-8 mt-10 text-sm font-bold uppercase tracking-wide text-gray-500">
|
||
<a href="https://space.bilibili.com/3546619129628868" target="_blank"class="hover:text-black transition-colors">BiliBili</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<script src="/assets/js/page/index.js"></script> |