1723 lines
130 KiB
HTML
1723 lines
130 KiB
HTML
<div class="hidden">银河锋锐软件开发工作室 - Galactic Vorpal</div>
|
||
<div class="hidden">一站式解决所有项目问题。</div>
|
||
<div class="w-full h-[calc(100vh-4rem)] overflow-hidden flex relative bg-cover bg-center bg-no-repeat bg-[url('https://cdn.marmot-cloud.com/storage/zenmux/2026/02/11/Q4C87fH/BG.jpg')]" 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="backdrop-filter: blur(4px); 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]">
|
||
<div class="text-[20px] sm:text-[24px] md:text-[32px] text-[#FFF] leading-snug">你好 2026！ 部署项目 with Galactic Vorpal:<span class="md:hidden"> 一站式解决所有项目问题。 结果不佳? 我们补偿！</span></div>
|
||
<div class="hidden md:block text-[#FFF]">一站式解决所有项目问题。</div>
|
||
<div class="hidden md:inline text-[#FFF]">结果不佳? 我们补偿！</div>
|
||
<div class="hidden md:block text-[12px] text-[#FFF]">项目总经理：<a class="text-[#667eea]" href="mailto:terminexus@gvsds.com">terminexus@gvsds.com</a></div>
|
||
</h1>
|
||
</div>
|
||
<!--div class="hero-input-wrap mt-[24px] md:mt-[30px] w-full md:w-fit relative flex items-center overflow-hidden px-[16px] sm:px-[32px] md:px-0">
|
||
<textarea rows="1" placeholder="输入一段项目需求发送给我们，我们会很快和您取得联系。" class="font-['PT_Sans'] font-normal backrop-blur text-[14px] md:text-base overflow-x-hidden overflow-y-auto md:leading-[1.5] pt-[12px] sm:py-[25px] tracking-[-0.02em] w-full md:w-[600px] 2xl:w-[680px] h-[68px] sm:h-[76px] md:h-[76px] bg-white border rounded-[20px] md:rounded-[24px] pl-[16px] sm:pl-[20px] pr-[120px] sm:pr-[160px] md:pr-[230px] md:px-[20px] resize-none outline-none border-[rgba(245,245,245,0.3)] focus:border-text-muted focus:ring-gray-100 placeholder:text-[#888] placeholder:text-[13px] md:placeholder:text-base" style="background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(4px);" id="tryTextarea"></textarea>
|
||
<div class="sendBtn absolute right-[24px] sm:right-[44px] md:right-[16px] cursor-pointer max-w-[120px] sm:max-w-[180px] md:max-w-[250px] h-[40px] sm:h-[44px] flex justify-center items-center rounded-[10px] p-[2px]" id="sendBtn">
|
||
<div class="bg-[#fed4d3] hover:bg-[rgba(254,212,211,0.8)] w-full h-full rounded-[8px] text-[13px] sm:text-[15px] md:text-[16px] text-[#000] tracking-tight text-center px-[8px] sm:px-[13px] flex items-center justify-center gap-[6px] sm:gap-[8px] whitespace-nowrap">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 20 20" class="zenmux-icon zenmux-icon-icon-wishlist_01 text-[16px] sm:text-[20px]">
|
||
<path fill="currentColor" d="M8.447 2.229a1.128 1.128 0 0 1 1.884 0l.084.156L12.5 6.999l4.615 2.086c.884.399.884 1.654 0 2.053L12.5 13.222l-2.085 4.615c-.399.884-1.654.884-2.053 0l-2.085-4.615-4.614-2.084c-.884-.4-.884-1.654 0-2.053l4.614-2.086 2.085-4.614zm-.778 5.6c-.113.25-.313.45-.563.562l-3.808 1.72 3.808 1.72c.25.113.45.313.563.563l1.72 3.807 1.72-3.807.046-.091c.117-.208.298-.373.516-.472l3.808-1.72-3.808-1.72a1.13 1.13 0 0 1-.562-.562L9.389 4.02zM15.861.943c.356-.633 1.33-.587 1.598.135l.477 1.29 1.29.478c.77.285.77 1.374 0 1.66l-1.29.477-.477 1.29c-.286.77-1.375.77-1.66 0l-.478-1.29-1.29-.478c-.77-.285-.77-1.374 0-1.66l1.29-.478.478-1.29zm.478 1.92a.88.88 0 0 1-.523.522l-.783.29.783.29a.89.89 0 0 1 .485.434l.038.09.29.782.29-.783.038-.089c.1-.2.273-.355.485-.433l.782-.29-.782-.29a.88.88 0 0 1-.523-.523l-.29-.784z" style="fill-opacity: 1;"></path>
|
||
</svg>试试吧
|
||
</div>
|
||
</div>
|
||
</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/GVSADS/" 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-[10px] sm:text-[11px] md:text-[12px] text-[#FFF] opacity-80">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-[10px] sm:text-[11px] md:text-[12px] text-[#FFF] opacity-80">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="w-full h-[40vh] md:h-[50vh] lg:h-[60vh] relative overflow-hidden cursor-pointer bg-cover bg-center bg-no-repeat bg-fixed" id="hero-section" style="background-image: url('/assets/img/heroes/1.png');">
|
||
<div class="absolute inset-0 flex items-center justify-end px-4 md:px-8 lg:px-64">
|
||
<div class="max-w-3xl text-right">
|
||
<h2 class="text-text-primary dark:text-white text-2xl md:text-4xl lg:text-5xl font-bold mb-3 transition-all duration-500 font-milky-han drop-shadow-md" id="random-title">你好，2026！</h2>
|
||
<p class="text-text-secondary dark:text-gray-200 text-base md:text-lg mb-1 max-w-xl ml-auto transition-all duration-500 font-milky-han drop-shadow-sm" id="hero-desc">银河锋锐软件开发工作室，致力于编程、美工设计等等方面。</p>
|
||
<p class="text-text-secondary dark:text-gray-200 text-base md:text-lg mb-6 max-w-xl ml-auto transition-all duration-500 font-milky-han drop-shadow-sm" id="hero-desc2">银河锋锐软件开发工作室</p>
|
||
<button class="bg-primary dark:bg-blue-600 text-white px-6 py-3 rounded-md text-sm md:text-base font-medium hover:bg-primary/90 dark:hover:bg-blue-500 transition-colors shadow-lg" onclick="window.open('https://github.com/GVSADS/')">
|
||
Github 仓库 <i class="fa fa-arrow-right ml-2"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section-->
|
||
|
||
|
||
|
||
|
||
<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"> 因热爱而聚，以技术为桥——<br> 一群年轻开发者的开源实验场 </p>
|
||
</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 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>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<section class="container mx-auto px-4 py-16 md:py-24 overflow-hidden">
|
||
<div class="max-w-7xl mx-auto relative">
|
||
<!-- 背景装饰 -->
|
||
<div class="absolute -top-16 -left-16 w-64 h-64 bg-primary/5 dark:bg-blue-900/10 rounded-full blur-3xl -z-10"></div>
|
||
<div class="absolute -bottom-24 -right-24 w-80 h-80 bg-primary/8 dark:bg-blue-900/10 rounded-full blur-3xl -z-10"></div>
|
||
|
||
<!-- 顶部标题区 -->
|
||
<div class="mb-12 md:mb-16 relative">
|
||
<div class="flex flex-wrap items-center gap-3 mb-5">
|
||
<span class="inline-flex items-center gap-1.5 px-3 py-1 text-xs font-semibold text-primary bg-primary/10 dark:bg-blue-900/20 dark:text-blue-300 rounded-sm border border-primary/20 dark:border-blue-500/20 tracking-wider uppercase">
|
||
<i class="fa fa-building text-[10px]"></i> Studio Report
|
||
</span>
|
||
<span class="inline-flex items-center gap-1.5 px-3 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-slate-700/50 rounded-sm border border-gray-200 dark:border-slate-600/50 tracking-wider">
|
||
<i class="fa fa-calendar text-[10px]"></i> 2025-10-25
|
||
</span>
|
||
<span class="inline-flex items-center gap-1.5 px-3 py-1 text-xs font-medium text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-900/20 rounded-sm border border-emerald-200 dark:border-emerald-700/30 tracking-wider">
|
||
<i class="fa fa-check-circle text-[10px]"></i> 已归档
|
||
</span>
|
||
</div>
|
||
<h2 class="text-[clamp(1.6rem,3.5vw,2.6rem)] font-bold text-text-primary dark:text-white mb-3 leading-tight tracking-tight">
|
||
银河锋锐软件开发工作室
|
||
<span class="text-primary dark:text-blue-400">第六次全体会议</span>
|
||
纪要
|
||
</h2>
|
||
<p class="text-gray-500 dark:text-gray-400 text-sm md:text-base max-w-3xl leading-relaxed">
|
||
本次会议围绕 <strong class="text-text-primary dark:text-white font-semibold">15 项关键议题</strong> 展开深度讨论，全面梳理工作室现状、部门制改革方向与长期发展战略，由工作室负责人 TermiNexus 主持并发表重要讲话。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 主内容区：左侧媒体 + 右侧信息 -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-10 items-start">
|
||
|
||
<!-- 左栏：视频 + 演讲者 + 关键数据 -->
|
||
<div class="lg:col-span-5 space-y-5">
|
||
<!-- 视频卡片 -->
|
||
<div class="group overflow-hidden rounded-lg border border-gray-200 dark:border-slate-700 shadow-sm hover:shadow-md dark:shadow-black/30 transition-all duration-500 card-hover">
|
||
<div class="aspect-video bg-gray-50 dark:bg-slate-800 flex flex-col items-center justify-center relative">
|
||
<div class="text-center px-6">
|
||
<div class="w-14 h-14 rounded-full bg-gray-100 dark:bg-slate-700 flex items-center justify-center mx-auto mb-4">
|
||
<i class="fa fa-exclamation text-gray-400 dark:text-gray-500 text-xl"></i>
|
||
</div>
|
||
<h4 class="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-1">媒体文件不可用</h4>
|
||
<p class="text-xs text-gray-400 dark:text-gray-500">录像文件已损坏或丢失，无法播放</p>
|
||
</div>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/5 to-transparent pointer-events-none"></div>
|
||
</div>
|
||
<div class="px-5 py-4 bg-white dark:bg-slate-800 border-t border-gray-100 dark:border-slate-700 flex items-center justify-between">
|
||
<div>
|
||
<p class="text-sm font-medium text-text-primary dark:text-white">会议全程录像</p>
|
||
<p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">原始录制：2025-10-25 · 16:07</p>
|
||
</div>
|
||
<span class="inline-flex items-center gap-1 px-2 py-1 text-xs text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-900/20 rounded border border-red-100 dark:border-red-800/30">
|
||
<i class="fa fa-times-circle text-[10px]"></i> 文件丢失
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主持人信息 -->
|
||
<div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg p-4 flex items-center gap-4 shadow-sm">
|
||
<div class="w-12 h-12 rounded-full overflow-hidden border-2 border-primary/20 dark:border-blue-500/20 flex-shrink-0">
|
||
<img src="/assets/members/terminexus.jpg" alt="TermiNexus" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p class="text-xs text-gray-400 dark:text-gray-500 mb-0.5 uppercase tracking-wider">主持 & 主讲</p>
|
||
<h3 class="text-base font-bold text-text-primary dark:text-white">TermiNexus</h3>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400">工作室负责人 · Studio Director</p>
|
||
</div>
|
||
<div class="flex-shrink-0 text-right">
|
||
<p class="text-xs text-gray-400 dark:text-gray-500">会议编号</p>
|
||
<p class="text-sm font-mono font-bold text-primary dark:text-blue-400">#GT2025（GX-006）</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关键数据面板 -->
|
||
<div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden shadow-sm">
|
||
<div class="px-5 py-3 border-b border-gray-100 dark:border-slate-700 flex items-center gap-2">
|
||
<i class="fa fa-bar-chart text-primary dark:text-blue-400 text-sm"></i>
|
||
<span class="text-sm font-semibold text-text-primary dark:text-white">会议关键指标</span>
|
||
</div>
|
||
<div class="grid grid-cols-3 divide-x divide-gray-100 dark:divide-slate-700">
|
||
<div class="px-4 py-4 text-center">
|
||
<p class="text-2xl font-bold text-primary dark:text-blue-400">15</p>
|
||
<p class="text-xs text-gray-400 dark:text-gray-500 mt-1">议题数量</p>
|
||
</div>
|
||
<div class="px-4 py-4 text-center">
|
||
<p class="text-2xl font-bold text-primary dark:text-blue-400">4</p>
|
||
<p class="text-xs text-gray-400 dark:text-gray-500 mt-1">核心项目</p>
|
||
</div>
|
||
<div class="px-4 py-4 text-center">
|
||
<p class="text-2xl font-bold text-primary dark:text-blue-400">6</p>
|
||
<p class="text-xs text-gray-400 dark:text-gray-500 mt-1">部门覆盖</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 查看纪要按钮 -->
|
||
<button
|
||
class="w-full bg-primary hover:bg-primary/90 dark:bg-blue-600 dark:hover:bg-blue-500 text-white px-5 py-3 rounded-lg font-medium text-sm transition-all duration-300 flex items-center justify-center gap-2 shadow-sm hover:shadow-md"
|
||
onclick="window.open('/Activity/Meeting/6/');"
|
||
>
|
||
<i class="fa fa-file-text-o"></i>
|
||
查看完整会议纪要
|
||
<i class="fa fa-arrow-right text-xs opacity-70"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 右栏：议题详情 -->
|
||
<div class="lg:col-span-7 space-y-4">
|
||
|
||
<!-- 区块标题 -->
|
||
<div class="flex items-center gap-3 mb-2">
|
||
<div class="h-px flex-1 bg-gray-200 dark:bg-slate-700"></div>
|
||
<span class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-widest">核心议题摘要</span>
|
||
<div class="h-px flex-1 bg-gray-200 dark:bg-slate-700"></div>
|
||
</div>
|
||
|
||
<!-- 议题卡片列表 -->
|
||
<!-- 议题 01 -->
|
||
<div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md dark:hover:shadow-black/30 transition-all duration-300 hover:-translate-y-0.5 card-hover">
|
||
<div class="flex items-stretch">
|
||
<div class="w-1 bg-blue-500 flex-shrink-0"></div>
|
||
<div class="flex-1 p-5">
|
||
<div class="flex items-start justify-between gap-3 mb-2">
|
||
<h4 class="text-sm font-bold text-text-primary dark:text-white leading-snug">成员发展与关怀</h4>
|
||
<span class="flex-shrink-0 text-xs font-mono text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-slate-700 px-2 py-0.5 rounded border border-gray-100 dark:border-slate-600">01</span>
|
||
</div>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">重点关注九年级成员发展，强调平衡学业、生活与工作室事务；关注成员身心健康，提醒做好冬季健康防护，体现以人为本的管理理念。</p>
|
||
<div class="flex flex-wrap gap-1.5 mt-3">
|
||
<span class="text-[11px] px-2 py-0.5 rounded-sm bg-blue-50 dark:bg-blue-900/20 text-blue-500 dark:text-blue-400 border border-blue-100 dark:border-blue-800/30">人员管理</span>
|
||
<span class="text-[11px] px-2 py-0.5 rounded-sm bg-blue-50 dark:bg-blue-900/20 text-blue-500 dark:text-blue-400 border border-blue-100 dark:border-blue-800/30">成员关怀</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 议题 02 -->
|
||
<div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md dark:hover:shadow-black/30 transition-all duration-300 hover:-translate-y-0.5 card-hover">
|
||
<div class="flex items-stretch">
|
||
<div class="w-1 bg-indigo-500 flex-shrink-0"></div>
|
||
<div class="flex-1 p-5">
|
||
<div class="flex items-start justify-between gap-3 mb-2">
|
||
<h4 class="text-sm font-bold text-text-primary dark:text-white leading-snug">组织架构改革 · 金字塔制 → 部门制</h4>
|
||
<span class="flex-shrink-0 text-xs font-mono text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-slate-700 px-2 py-0.5 rounded border border-gray-100 dark:border-slate-600">02</span>
|
||
</div>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">推进从金字塔式组委制到扁平化部门制的核心变革，明确各部门分工与职能边界。识别当前痛点：人手短缺、新部门建设滞后、执行效率不足，提出重启人才计划作为核心解决方案。</p>
|
||
<div class="flex flex-wrap gap-1.5 mt-3">
|
||
<span class="text-[11px] px-2 py-0.5 rounded-sm bg-indigo-50 dark:bg-indigo-900/20 text-indigo-500 dark:text-indigo-400 border border-indigo-100 dark:border-indigo-800/30">组织变革</span>
|
||
<span class="text-[11px] px-2 py-0.5 rounded-sm bg-indigo-50 dark:bg-indigo-900/20 text-indigo-500 dark:text-indigo-400 border border-indigo-100 dark:border-indigo-800/30">架构优化</span>
|
||
<span class="text-[11px] px-2 py-0.5 rounded-sm bg-red-50 dark:bg-red-900/20 text-red-400 dark:text-red-400 border border-red-100 dark:border-red-800/30">人才计划</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 议题 03 -->
|
||
<div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md dark:hover:shadow-black/30 transition-all duration-300 hover:-translate-y-0.5 card-hover">
|
||
<div class="flex items-stretch">
|
||
<div class="w-1 bg-violet-500 flex-shrink-0"></div>
|
||
<div class="flex-1 p-5">
|
||
<div class="flex items-start justify-between gap-3 mb-2">
|
||
<h4 class="text-sm font-bold text-text-primary dark:text-white leading-snug">部门重建与核心职能界定</h4>
|
||
<span class="flex-shrink-0 text-xs font-mono text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-slate-700 px-2 py-0.5 rounded border border-gray-100 dark:border-slate-600">03</span>
|
||
</div>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">系统梳理现有部门构成及缺岗情况，表彰工程部、美工部核心成员的突出贡献。明确各部门核心职能定位与跨部门协作规范，为后续规模化扩张奠定制度基础。</p>
|
||
<div class="flex flex-wrap gap-1.5 mt-3">
|
||
<span class="text-[11px] px-2 py-0.5 rounded-sm bg-violet-50 dark:bg-violet-900/20 text-violet-500 dark:text-violet-400 border border-violet-100 dark:border-violet-800/30">部门建设</span>
|
||
<span class="text-[11px] px-2 py-0.5 rounded-sm bg-violet-50 dark:bg-violet-900/20 text-violet-500 dark:text-violet-400 border border-violet-100 dark:border-violet-800/30">协作规范</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 议题 04 -->
|
||
<div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md dark:hover:shadow-black/30 transition-all duration-300 hover:-translate-y-0.5 card-hover">
|
||
<div class="flex items-stretch">
|
||
<div class="w-1 bg-sky-500 flex-shrink-0"></div>
|
||
<div class="flex-1 p-5">
|
||
<div class="flex items-start justify-between gap-3 mb-2">
|
||
<h4 class="text-sm font-bold text-text-primary dark:text-white leading-snug">品牌建设与长期战略规划</h4>
|
||
<span class="flex-shrink-0 text-xs font-mono text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-slate-700 px-2 py-0.5 rounded border border-gray-100 dark:border-slate-600">04</span>
|
||
</div>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">探讨工作室名称定位、商标体系与企业文化内核建设；明确项目推进分工、质量保障标准及测试机制，系统优化 GERP 任务追踪、工作复盘与成员考核机制，提出新项目精细化推进与弹性时间管理方案。</p>
|
||
<div class="flex flex-wrap gap-1.5 mt-3">
|
||
<span class="text-[11px] px-2 py-0.5 rounded-sm bg-sky-50 dark:bg-sky-900/20 text-sky-500 dark:text-sky-400 border border-sky-100 dark:border-sky-800/30">品牌战略</span>
|
||
<span class="text-[11px] px-2 py-0.5 rounded-sm bg-sky-50 dark:bg-sky-900/20 text-sky-500 dark:text-sky-400 border border-sky-100 dark:border-sky-800/30">质量管理</span>
|
||
<span class="text-[11px] px-2 py-0.5 rounded-sm bg-sky-50 dark:bg-sky-900/20 text-sky-500 dark:text-sky-400 border border-sky-100 dark:border-sky-800/30">GERP 优化</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 更多议题提示 -->
|
||
<div class="flex items-center gap-3 py-2">
|
||
<div class="h-px flex-1 bg-gray-100 dark:bg-slate-700/50"></div>
|
||
<button onclick="window.open('/Activity/Meeting/6/');" class="text-xs text-gray-400 dark:text-gray-500 hover:text-primary dark:hover:text-blue-400 transition-colors flex items-center gap-1.5 group">
|
||
<i class="fa fa-ellipsis-h"></i>
|
||
<span>另有 10 项议题，查看完整纪要</span>
|
||
<i class="fa fa-long-arrow-right text-[10px] opacity-0 group-hover:opacity-100 transition-opacity"></i>
|
||
</button>
|
||
<div class="h-px flex-1 bg-gray-100 dark:bg-slate-700/50"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 会议结语 · 金句区 -->
|
||
<div class="mt-16 md:mt-24 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
|
||
<!-- 金句一 -->
|
||
<div class="relative bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl p-8 shadow-sm overflow-hidden">
|
||
<div class="absolute top-0 left-0 w-1 h-full bg-gradient-to-b from-blue-500 to-indigo-500 rounded-l-xl"></div>
|
||
<div class="absolute -top-4 -right-4 w-24 h-24 bg-primary/5 dark:bg-blue-500/5 rounded-full blur-2xl"></div>
|
||
<i class="fa fa-quote-left text-primary/20 dark:text-blue-400/20 text-5xl absolute top-6 right-6"></i>
|
||
<div class="relative pl-4">
|
||
<p class="text-base md:text-lg font-semibold text-text-primary dark:text-white leading-relaxed mb-3 font-milky-han">
|
||
部门制核心是分工明确，更是心往一处想 —— 工程部铸骨，美工部赋魂。
|
||
</p>
|
||
<p class="text-sm text-gray-500 dark:text-gray-400 font-milky-han">团队的价值不止于项目成果，更在于让每个成员在成长中遇见更好的自己。</p>
|
||
<div class="flex items-center gap-3 mt-5 pt-4 border-t border-gray-100 dark:border-slate-700">
|
||
<div class="w-7 h-7 rounded-full overflow-hidden">
|
||
<img src="/assets/members/terminexus.jpg" alt="" class="w-full h-full object-cover">
|
||
</div>
|
||
<div>
|
||
<p class="text-xs font-semibold text-text-primary dark:text-white">TermiNexus</p>
|
||
<p class="text-xs text-gray-400 dark:text-gray-500">六会金句 · 2025-10-25</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 金句二 -->
|
||
<div class="relative bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl p-8 shadow-sm overflow-hidden">
|
||
<div class="absolute top-0 left-0 w-1 h-full bg-gradient-to-b from-violet-500 to-sky-500 rounded-l-xl"></div>
|
||
<div class="absolute -top-4 -right-4 w-24 h-24 bg-violet-500/5 dark:bg-violet-500/5 rounded-full blur-2xl"></div>
|
||
<i class="fa fa-quote-left text-violet-300/30 dark:text-violet-400/20 text-5xl absolute top-6 right-6"></i>
|
||
<div class="relative pl-4">
|
||
<p class="text-base md:text-lg font-semibold text-text-primary dark:text-white leading-relaxed mb-3 font-milky-han">
|
||
和而不同、创新为主、以人为本
|
||
</p>
|
||
<p class="text-sm md:text-base font-medium text-primary/70 dark:text-blue-300 leading-relaxed font-playlist-script">
|
||
Wishing you eternal happiness and joy, and thank you for bringing vitality to the organization.
|
||
</p>
|
||
<div class="flex items-center gap-3 mt-5 pt-4 border-t border-gray-100 dark:border-slate-700">
|
||
<div class="w-7 h-7 rounded-full bg-gradient-to-br from-blue-400 to-indigo-600 flex items-center justify-center flex-shrink-0">
|
||
<i class="fa fa-star text-white text-[10px]"></i>
|
||
</div>
|
||
<div>
|
||
<p class="text-xs font-semibold text-text-primary dark:text-white font-milky-han">银河锋锐软件开发工作室</p>
|
||
<p class="text-xs text-gray-400 dark:text-gray-500">组织寄语 · 2025-10-25</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 底部 CTA -->
|
||
<div class="mt-10 flex flex-col sm:flex-row items-center justify-between gap-4 px-6 py-5 bg-gray-50 dark:bg-slate-800/50 border border-gray-200 dark:border-slate-700 rounded-xl">
|
||
<div class="text-center sm:text-left">
|
||
<p class="text-sm font-semibold text-text-primary dark:text-white">本次会议已形成正式文件</p>
|
||
<p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">包含完整决议事项、部门任务分配及后续跟进计划</p>
|
||
</div>
|
||
<button
|
||
class="flex-shrink-0 bg-primary hover:bg-primary/90 dark:bg-blue-600 dark:hover:bg-blue-500 text-white px-6 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 flex items-center gap-2 shadow-sm hover:shadow-md"
|
||
onclick="window.open('/Activity/Meeting/6/');"
|
||
>
|
||
<i class="fa fa-file-text-o"></i>
|
||
访问完整会议纪要
|
||
<i class="fa fa-external-link text-xs opacity-70"></i>
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<style>
|
||
.card-hover { transition: all .35s cubic-bezier(.25, .8, .25, 1); }
|
||
.font-milky-han { font-family: "Milky Han", "PingFang SC", "Microsoft YaHei", sans-serif; }
|
||
.font-playlist-script { font-family: "Playlist Script", cursive; }
|
||
.text-text-primary { color: #1a1a1a; }
|
||
.text-primary { color: #165dff; }
|
||
.bg-primary { background-color: #165dff; }
|
||
.border-primary { border-color: #165dff; }
|
||
</style>
|
||
|
||
|
||
|
||
|
||
|
||
<section class="relative py-16 md:py-24 px-4 md:px-8 overflow-hidden" aria-labelledby="skills-section-title">
|
||
<div class="container mx-auto relative z-10">
|
||
<div class="mb-12 md:mb-16 reveal" data-reveal="fade-up">
|
||
<div class="flex items-center gap-3 mb-3">
|
||
<span class="inline-block w-8 h-[3px] rounded-full bg-primary"></span>
|
||
<span class="text-xs font-semibold uppercase tracking-[0.2em] text-primary dark:text-primary/90">Our Capabilities</span>
|
||
</div>
|
||
<h2 id="skills-section-title" class="text-2xl md:text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white"> 我们的<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-violet-500">能力</span>
|
||
</h2>
|
||
</div>
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-10">
|
||
<div class="reveal" data-reveal="fade-up" data-delay="0ms">
|
||
<div class="skills-card group relative bg-white/70 dark:bg-slate-800/70 backdrop-blur-md p-5 md:p-8 rounded-2xl h-full border border-white/80 dark:border-slate-700/60 shadow-xl shadow-gray-200/60 dark:shadow-slate-900/40 transition-all duration-500 hover:shadow-2xl hover:shadow-primary/10 dark:hover:shadow-primary/20 hover:-translate-y-1">
|
||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-3/4 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent"></div>
|
||
<div class="flex items-center gap-3 mb-6">
|
||
<div class="w-9 h-9 rounded-xl flex items-center justify-center bg-gradient-to-br from-primary/20 to-violet-500/20 dark:from-primary/30 dark:to-violet-500/30 ring-1 ring-primary/20 dark:ring-primary/30 group-hover:ring-primary/40 transition-all duration-300">
|
||
<i class="fa fa-cogs text-sm text-primary dark:text-primary/90" aria-hidden="true"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-base md:text-lg font-bold text-gray-900 dark:text-white leading-tight">能力评分</h3>
|
||
<p class="text-xs text-gray-400 dark:text-slate-500 mt-0.5"> Skill Radar </p>
|
||
</div>
|
||
<div class="ml-auto flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200/60 dark:border-emerald-700/40">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
|
||
<span class="text-[10px] font-semibold text-emerald-600 dark:text-emerald-400"> 多项技能 </span>
|
||
</div>
|
||
</div>
|
||
<div class="chart-container flex justify-center items-center h-[300px] md:h-[360px] lg:h-[420px] w-full relative" id="skillsChartContainer">
|
||
<div class="absolute inset-0 flex flex-col items-center justify-center rounded-xl hidden" id="skillsChartLoader">
|
||
<div class="w-8 h-8 rounded-full border-2 border-primary/30 border-t-primary animate-spin mb-2"></div>
|
||
<span class="text-xs text-gray-400">加载中</span>
|
||
</div>
|
||
<div class="absolute hidden pointer-events-none z-20 skill-tooltip" id="skillTooltip"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" data-reveal="fade-up" data-delay="300ms">
|
||
<div class="roles-card group relative bg-white/70 dark:bg-slate-800/70 backdrop-blur-md p-5 md:p-8 rounded-2xl h-full border border-white/80 dark:border-slate-700/60 shadow-xl shadow-gray-200/60 dark:shadow-slate-900/40 transition-all duration-500 hover:shadow-2xl hover:shadow-violet-500/10 dark:hover:shadow-violet-500/20 hover:-translate-y-1">
|
||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-3/4 h-px bg-gradient-to-r from-transparent via-violet-500/40 to-transparent"></div>
|
||
<div class="flex items-center gap-3 mb-6">
|
||
<div class="w-9 h-9 rounded-xl flex items-center justify-center bg-gradient-to-br from-violet-500/20 to-pink-500/20 dark:from-violet-500/30 dark:to-pink-500/30 ring-1 ring-violet-500/20 dark:ring-violet-500/30 group-hover:ring-violet-500/40 transition-all duration-300">
|
||
<i class="fa-solid fa-chart-pie text-sm text-violet-500 dark:text-violet-400" aria-hidden="true"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-base md:text-lg font-bold text-gray-900 dark:text-white leading-tight">角色分布</h3>
|
||
<p class="text-xs text-gray-400 dark:text-slate-500 mt-0.5"> Role Distribution </p>
|
||
</div>
|
||
<div class="ml-auto flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-violet-50 dark:bg-violet-900/20 border border-violet-200/60 dark:border-violet-700/40">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-violet-400 animate-pulse"></span>
|
||
<span class="text-[10px] font-semibold text-violet-600 dark:text-violet-400">16 名成员</span>
|
||
</div>
|
||
</div>
|
||
<div class="chart-container flex justify-center items-center h-[300px] md:h-[360px] lg:h-[420px] w-full relative" id="rolesChartContainer">
|
||
<div class="absolute inset-0 flex flex-col items-center justify-center rounded-xl hidden" id="rolesChartLoader">
|
||
<div class="w-8 h-8 rounded-full border-2 border-violet-500/30 border-t-violet-500 animate-spin mb-2"></div>
|
||
<span class="text-xs text-gray-400">加载中</span>
|
||
</div>
|
||
<div class="absolute bottom-0 left-0 right-0 flex justify-center flex-wrap gap-3 py-2 role-legend"></div>
|
||
<div class="absolute hidden pointer-events-none z-20 role-tooltip" id="roleTooltip"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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/GVSADS/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/GVSADS/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/GVSADS/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/GVSADS/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/GVSADS/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/GVSADS" 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/ChiSha/assets/img/A.jpg',
|
||
'/Members/ChiSha/assets/img/B.jpg',
|
||
'/Members/ChiSha/assets/img/C.jpg',
|
||
'/Members/ChiSha/assets/img/D.png',
|
||
'/Members/ChiSha/assets/img/E.jpg',
|
||
'/Members/ChiSha/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 id="about" class="py-24 md:py-32 relative overflow-hidden">
|
||
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_#7000FF08_0%,_transparent_60%),radial-gradient(ellipse_at_bottom_left,_#4258FF06_0%,_transparent_60%)] pointer-events-none"></div>
|
||
<div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[#7000FF]/30 to-transparent"></div>
|
||
<div class="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[#4258FF]/20 to-transparent"></div>
|
||
<div class="container mx-auto px-6 max-w-7xl">
|
||
<div class="flex flex-col gap-16 md:gap-24">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-20 items-end">
|
||
<div class="about-text">
|
||
<div class="inline-flex items-center gap-2 mb-6 px-3 py-1.5 border border-[#7000FF]/30 bg-[#7000FF]/5 rounded-sm">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-[#7000FF] animate-pulse inline-block"></span>
|
||
<span class="text-xs tracking-[0.2em] text-[#7000FF] font-medium uppercase">About Us</span>
|
||
</div>
|
||
<h2 class="text-5xl md:text-7xl mb-0 italic relative leading-tight">
|
||
打破
|
||
<span class="text-[#7000FF] relative inline-block hover:text-[#4258FF] transition-colors duration-300 cursor-default">
|
||
边界
|
||
<span class="absolute bottom-0 left-0 w-0 group-hover:w-full h-[2px] bg-[#7000FF] transition-all duration-500 inline-block"></span>
|
||
</span>
|
||
<br>
|
||
重塑定义
|
||
<span class="absolute -bottom-3 left-0 w-20 h-[3px] bg-gradient-to-r from-[#7000FF] to-transparent"></span>
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="about-desc flex flex-col gap-5">
|
||
<p class="text-base md:text-lg leading-loose text-gray-600 hover:text-gray-900 transition-colors duration-500 border-l-2 border-[#7000FF]/40 pl-4">
|
||
GVSDS 不仅是一个工作室，更是一个学习交流的平台。我们希望通过开源项目、技术分享与实践协作，让更多人感受到技术的价值与乐趣。
|
||
</p>
|
||
<p class="text-base md:text-lg leading-loose text-gray-600 hover:text-gray-900 transition-colors duration-500 border-l-2 border-[#4258FF]/40 pl-4">
|
||
我们相信，在日新月异不断发展的未来中，由极客、设计师与艺术家共同构建的多元团队，将拥有属于自己的一席之地。
|
||
</p>
|
||
<div class="flex items-center gap-6 mt-2 pt-4 border-t border-gray-100">
|
||
<div class="flex flex-col">
|
||
<span class="text-3xl font-black text-[#000] leading-none">12+</span>
|
||
<span class="text-xs text-gray-400 mt-1 tracking-wider">开源项目</span>
|
||
</div>
|
||
<div class="w-px h-10 bg-gray-200"></div>
|
||
<div class="flex flex-col">
|
||
<span class="text-3xl font-black text-[#000] leading-none">4</span>
|
||
<span class="text-xs text-gray-400 mt-1 tracking-wider">核心领域</span>
|
||
</div>
|
||
<div class="w-px h-10 bg-gray-200"></div>
|
||
<div class="flex flex-col">
|
||
<span class="text-3xl font-black text-[#000] leading-none">∞</span>
|
||
<span class="text-xs text-gray-400 mt-1 tracking-wider">可能性</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 能力卡片区域 -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-0 border border-[#000]">
|
||
|
||
<div class="group relative p-7 bg-white border-b sm:border-b-0 sm:border-r border-[#000] hover:bg-[#7000FF] transition-all duration-500 cursor-default overflow-hidden">
|
||
<div class="absolute inset-0 bg-[repeating-linear-gradient(45deg,transparent,transparent_10px,#7000FF08_10px,#7000FF08_11px)] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||
<div class="relative z-10">
|
||
<div class="w-10 h-10 border-2 border-[#7000FF] group-hover:border-white flex items-center justify-center mb-5 transition-colors duration-500">
|
||
<svg class="w-5 h-5 text-[#7000FF] group-hover:text-white transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
|
||
</div>
|
||
<div class="text-[10px] tracking-[0.2em] text-[#7000FF] group-hover:text-white/70 font-medium uppercase mb-2 transition-colors duration-500">01</div>
|
||
<h4 class="text-lg font-bold mb-3 text-[#000] group-hover:text-white transition-colors duration-500">Web 开发</h4>
|
||
<p class="text-xs text-gray-400 group-hover:text-white/80 leading-relaxed transition-colors duration-500">原生前端 / Python Flask & Django</p>
|
||
<div class="absolute bottom-0 left-0 w-0 group-hover:w-full h-[3px] bg-white transition-all duration-500"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="group relative p-7 bg-white border-b sm:border-b-0 lg:border-r border-[#000] hover:bg-[#4258FF] transition-all duration-500 cursor-default overflow-hidden">
|
||
<div class="absolute inset-0 bg-[repeating-linear-gradient(45deg,transparent,transparent_10px,#4258FF08_10px,#4258FF08_11px)] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||
<div class="relative z-10">
|
||
<div class="w-10 h-10 border-2 border-[#4258FF] group-hover:border-white flex items-center justify-center mb-5 transition-colors duration-500">
|
||
<svg class="w-5 h-5 text-[#4258FF] group-hover:text-white transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17H3a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2h-2"/></svg>
|
||
</div>
|
||
<div class="text-[10px] tracking-[0.2em] text-[#4258FF] group-hover:text-white/70 font-medium uppercase mb-2 transition-colors duration-500">02</div>
|
||
<h4 class="text-lg font-bold mb-3 text-[#000] group-hover:text-white transition-colors duration-500">终端开发</h4>
|
||
<p class="text-xs text-gray-400 group-hover:text-white/80 leading-relaxed transition-colors duration-500">Python / C# / Qt / WebView</p>
|
||
<div class="absolute bottom-0 left-0 w-0 group-hover:w-full h-[3px] bg-white transition-all duration-500"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="group relative p-7 bg-white border-b sm:border-r border-[#000] hover:bg-[#FF0055] transition-all duration-500 cursor-default overflow-hidden">
|
||
<div class="absolute inset-0 bg-[repeating-linear-gradient(45deg,transparent,transparent_10px,#FF005508_10px,#FF005508_11px)] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||
<div class="relative z-10">
|
||
<div class="w-10 h-10 border-2 border-[#FF0055] group-hover:border-white flex items-center justify-center mb-5 transition-colors duration-500">
|
||
<svg class="w-5 h-5 text-[#FF0055] group-hover:text-white transition-colors duration-500" 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>
|
||
<div class="text-[10px] tracking-[0.2em] text-[#FF0055] group-hover:text-white/70 font-medium uppercase mb-2 transition-colors duration-500">03</div>
|
||
<h4 class="text-lg font-bold mb-3 text-[#000] group-hover:text-white transition-colors duration-500">美术设计</h4>
|
||
<p class="text-xs text-gray-400 group-hover:text-white/80 leading-relaxed transition-colors duration-500">插画色彩理论 / 概念设计 / 色彩情绪</p>
|
||
<div class="absolute bottom-0 left-0 w-0 group-hover:w-full h-[3px] bg-white transition-all duration-500"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="group relative p-7 bg-white hover:bg-[#000] transition-all duration-500 cursor-default overflow-hidden">
|
||
<div class="absolute inset-0 bg-[repeating-linear-gradient(45deg,transparent,transparent_10px,#FFD70008_10px,#FFD70008_11px)] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||
<div class="relative z-10">
|
||
<div class="w-10 h-10 border-2 border-[#FFD700] group-hover:border-[#FFD700] flex items-center justify-center mb-5 transition-colors duration-500">
|
||
<svg class="w-5 h-5 text-[#FFD700] transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||
</div>
|
||
<div class="text-[10px] tracking-[0.2em] text-[#FFD700] group-hover:text-[#FFD700]/70 font-medium uppercase mb-2 transition-colors duration-500">04</div>
|
||
<h4 class="text-lg font-bold mb-3 text-[#000] group-hover:text-[#FFD700] transition-colors duration-500">全链路工程</h4>
|
||
<p class="text-xs text-gray-400 group-hover:text-white/60 leading-relaxed transition-colors duration-500">Github / Jenkins / TRAE SOLO</p>
|
||
<div class="absolute bottom-0 left-0 w-0 group-hover:w-full h-[3px] bg-[#FFD700] transition-all duration-500"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 底部 Marquee 跑马灯 -->
|
||
<div class="relative overflow-hidden border-y border-[#000]/10 py-4">
|
||
<div class="flex gap-12 animate-[marquee_20s_linear_infinite] whitespace-nowrap">
|
||
<span class="text-xs tracking-[0.3em] text-gray-300 uppercase font-medium">Web Development</span>
|
||
<span class="text-[#7000FF] text-xs">◆</span>
|
||
<span class="text-xs tracking-[0.3em] text-gray-300 uppercase font-medium">Terminal App</span>
|
||
<span class="text-[#4258FF] text-xs">◆</span>
|
||
<span class="text-xs tracking-[0.3em] text-gray-300 uppercase font-medium">Art & Design</span>
|
||
<span class="text-[#FF0055] text-xs">◆</span>
|
||
<span class="text-xs tracking-[0.3em] text-gray-300 uppercase font-medium">Full Pipeline</span>
|
||
<span class="text-[#FFD700] text-xs">◆</span>
|
||
<span class="text-xs tracking-[0.3em] text-gray-300 uppercase font-medium">Open Source</span>
|
||
<span class="text-[#7000FF] text-xs">◆</span>
|
||
<span class="text-xs tracking-[0.3em] text-gray-300 uppercase font-medium">Geek Culture</span>
|
||
<span class="text-[#4258FF] text-xs">◆</span>
|
||
<span class="text-xs tracking-[0.3em] text-gray-300 uppercase font-medium">Web Development</span>
|
||
<span class="text-[#7000FF] text-xs">◆</span>
|
||
<span class="text-xs tracking-[0.3em] text-gray-300 uppercase font-medium">Terminal App</span>
|
||
<span class="text-[#4258FF] text-xs">◆</span>
|
||
<span class="text-xs tracking-[0.3em] text-gray-300 uppercase font-medium">Art & Design</span>
|
||
<span class="text-[#FF0055] text-xs">◆</span>
|
||
<span class="text-xs tracking-[0.3em] text-gray-300 uppercase font-medium">Full Pipeline</span>
|
||
<span class="text-[#FFD700] text-xs">◆</span>
|
||
<span class="text-xs tracking-[0.3em] text-gray-300 uppercase font-medium">Open Source</span>
|
||
<span class="text-[#7000FF] text-xs">◆</span>
|
||
<span class="text-xs tracking-[0.3em] text-gray-300 uppercase font-medium">Geek Culture</span>
|
||
<span class="text-[#4258FF] text-xs">◆</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
@keyframes marquee {
|
||
from { transform: translateX(0); }
|
||
to { transform: translateX(-50%); }
|
||
}
|
||
</style>
|
||
</section>
|
||
|
||
|
||
|
||
<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 id="about" class="py-24 relative overflow-hidden z-10">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||
|
||
<div class="reveal active">
|
||
<h2 class="text-3xl font-extrabold text-slate-900 sm:text-4xl mb-6">
|
||
由极客驱动，
|
||
<br>
|
||
<span class="text-sky-600">为创新而生</span>
|
||
</h2>
|
||
<p class="text-lg text-slate-600 mb-6">
|
||
GVSDS 成立于2019年，我们因热爱技术、向往协作而聚在一起，是由年轻开发者组成的非营利技术团队。我们擅长用前沿的技术栈解决棘手的难题。
|
||
</p>
|
||
<ul class="space-y-4 mb-8">
|
||
<li class="flex items-start">
|
||
<div class="flex-shrink-0">
|
||
<div class="flex items-center justify-center h-6 w-6 rounded-full bg-sky-100 text-sky-600">
|
||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<p class="ml-3 text-base text-slate-600">
|
||
代码质量优先，注重可维护性与扩展性（面向对象编程）
|
||
</p>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<div class="flex-shrink-0">
|
||
<div class="flex items-center justify-center h-6 w-6 rounded-full bg-sky-100 text-sky-600">
|
||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<p class="ml-3 text-base text-slate-600">
|
||
敏捷开发流程，快速响应需求变化
|
||
</p>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<div class="flex-shrink-0">
|
||
<div class="flex items-center justify-center h-6 w-6 rounded-full bg-sky-100 text-sky-600">
|
||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<p class="ml-3 text-base text-slate-600">
|
||
注重用户体验，让技术服务于人
|
||
</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="relative reveal active">
|
||
<div class="absolute top-0 right-0 w-24 h-24 bg-sky-200 rounded-full blur-xl opacity-50"></div>
|
||
<div class="bg-white rounded-2xl shadow-2xl p-6 border border-slate-100 transform rotate-2 z-10 relative">
|
||
<div class="flex items-center gap-2 mb-4 border-b border-slate-100 pb-4">
|
||
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||
</div>
|
||
<pre class="text-xs sm:text-sm text-slate-600 overflow-x-auto"><code class="language-javascript"><span class="text-purple-600">const</span> <span class="text-blue-600">createFuture</span> = <span class="text-purple-600">async</span> (vision) => {
|
||
<span class="text-purple-600">try</span> {
|
||
<span class="text-purple-600">const</span> tech = <span class="text-purple-600">await</span> <span class="text-blue-600">innovation</span>.compile(vision);
|
||
<span class="text-purple-600">return</span> <span class="text-blue-600">Impact</span>.create(tech);
|
||
} <span class="text-purple-600">catch</span> (error) {
|
||
<span class="text-gray-500">// f**k, try again.</span>
|
||
<span class="text-blue-600">retry</span>();
|
||
}
|
||
};</code></pre>
|
||
</div>
|
||
<div class="bg-white rounded-2xl shadow-xl p-6 border border-slate-100 absolute -bottom-6 -left-6 w-3/4 z-20 transform -rotate-2">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-sky-500 to-cyan-500 rounded-lg flex-shrink-0 shadow-inner"></div>
|
||
<div>
|
||
<div class="h-4 bg-slate-200 rounded w-24 mb-2"></div>
|
||
<div class="h-3 bg-slate-100 rounded w-32"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<section class="py-20 px-4 bg-white border-t border-gray-100">
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="text-center mb-12">
|
||
<span class="inline-block px-4 py-1.5 bg-slate-50 text-slate-600 text-xs font-semibold tracking-widest uppercase rounded-full border border-slate-200 mb-4">战略合作</span>
|
||
<h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-2 tracking-tight">值得信赖的技术合作伙伴</h2>
|
||
<p class="text-gray-400 text-sm">携手同行，共建技术生态</p>
|
||
</div>
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
<div class="group flex items-center gap-4 bg-white p-4 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-12 h-12 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-sm text-gray-800 dark:text-white truncate">Starfield Studio</span>
|
||
<span class="text-xs text-gray-400 dark:text-neutral-400 truncate mt-0.5">游戏开发工作室</span>
|
||
</div>
|
||
</div>
|
||
<div class="group flex items-center gap-4 bg-white p-4 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-12 h-12 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-sm text-gray-800 dark:text-white truncate">CodeCrafter Studio</span>
|
||
<span class="text-xs text-gray-400 dark:text-neutral-400 truncate mt-0.5">代码工匠工作室</span>
|
||
</div>
|
||
</div>
|
||
<div class="group flex items-center gap-4 bg-white p-4 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-12 h-12 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-sm text-gray-800 dark:text-white truncate">May Dev-Community</span>
|
||
<span class="text-xs text-gray-400 dark:text-neutral-400 truncate mt-0.5">开发者社区</span>
|
||
</div>
|
||
</div>
|
||
<div class="group flex items-center gap-4 bg-white p-4 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-12 h-12 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-sm text-gray-800 dark:text-white truncate">MHD Community</span>
|
||
<span class="text-xs text-gray-400 dark:text-neutral-400 truncate mt-0.5">技术社区</span>
|
||
</div>
|
||
</div>
|
||
<div class="group flex items-center gap-4 bg-white p-4 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="创意未来" class="w-12 h-12 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-sm text-gray-800 dark:text-white truncate">创意未来</span>
|
||
<span class="text-xs text-gray-400 dark:text-neutral-400 truncate mt-0.5">美术设计团队</span>
|
||
</div>
|
||
</div>
|
||
<div class="group flex items-center gap-4 bg-white p-4 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-12 h-12 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-sm text-gray-800 dark:text-white truncate">N.R.C. Plan</span>
|
||
<span class="text-xs text-gray-400 dark:text-neutral-400 truncate mt-0.5">10 Years 计划项目</span>
|
||
</div>
|
||
</div>
|
||
<div class="group flex items-center gap-4 bg-white p-4 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-12 h-12 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-sm text-gray-800 dark:text-white truncate">Sunny Studio</span>
|
||
<span class="text-xs text-gray-400 dark:text-neutral-400 truncate mt-0.5">晴天工作室</span>
|
||
</div>
|
||
</div>
|
||
<div class="group flex items-center gap-4 bg-white p-4 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-12 h-12 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-sm text-gray-800 dark:text-white truncate">373 [VP Studio]</span>
|
||
<span class="text-xs text-gray-400 dark:text-neutral-400 truncate mt-0.5">视频制作工作室</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="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">
|
||
涉及领域
|
||
</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">Furry 绘画</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>
|
||
|
||
</div>
|
||
</div>
|
||
<style>
|
||
.animate-blink { animation: blink 1s step-start infinite; }
|
||
@keyframes blink { 50% { opacity: 0; } }
|
||
</style>
|
||
</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>
|
||
<!--a href="#" class="hover:text-black transition-colors">Behance</a>
|
||
<a href="#" class="hover:text-black transition-colors">Twitter</a-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script src="/assets/js/page/index.js"></script> |