37 lines
4.9 KiB
PHP
37 lines
4.9 KiB
PHP
<?php
|
||
get_header();
|
||
$cfg = gx_asset_config();
|
||
?>
|
||
<div class="pt-24 min-h-screen bg-white animate-fade-in">
|
||
<div class="max-w-7xl mx-auto px-6 py-20">
|
||
<div class="flex flex-col lg:flex-row items-center gap-20 lg:gap-24 mb-32 md:mb-40">
|
||
<div class="flex-1 text-center lg:text-left">
|
||
<div class="inline-block px-4 py-1.5 border border-blue-100 rounded-full bg-blue-50 text-apple-blue font-bold text-xs tracking-wider uppercase mb-8">Gongxue Question Bank V4.0</div>
|
||
<h1 class="text-5xl md:text-7xl font-semibold text-apple-dark mb-8 leading-[1.1]">刷题，<br><span class="text-apple-blue">从未如此智能。</span></h1>
|
||
<p class="text-lg md:text-2xl text-apple-text-gray mb-12 leading-relaxed max-w-lg mx-auto lg:mx-0 font-light">极致窄边框设计，视野全开。双端数据实时同步。天津专升本历年真题超过 100,000 道，全都在这儿。</p>
|
||
<div class="flex flex-col sm:flex-row gap-5 justify-center lg:justify-start">
|
||
<button data-gx-modal-open="#gx-qrcode-modal" class="bg-apple-dark text-white px-9 py-4 rounded-full font-bold hover:scale-105 transition-all shadow-xl text-lg">立即扫码刷题</button>
|
||
<button class="bg-gray-100 text-apple-dark px-9 py-4 rounded-full font-bold hover:bg-gray-200 transition-all text-lg">了解 SVIP 权益</button>
|
||
</div>
|
||
</div>
|
||
<div class="flex-1 w-full flex justify-center">
|
||
<div class="relative w-full max-w-[340px]"><div class="absolute inset-0 bg-gradient-to-tr from-blue-200 to-purple-200 rounded-full blur-[100px] opacity-50"></div><?php gx_phone_mockup($cfg['question_bank_mockup'], 'animate-float'); ?></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 lg:gap-12 mb-32 items-start">
|
||
<div class="bg-gray-50 rounded-[3rem] p-10 md:p-14 overflow-hidden relative group flex flex-col">
|
||
<div class="relative z-10 mb-8"><div class="inline-flex px-3 py-1 rounded-full bg-white border border-gray-200 text-xs font-bold text-gray-500 mb-5 uppercase tracking-wider">Focus Mode</div><h3 class="text-4xl font-bold text-apple-dark mb-4">沉浸刷题，<br>全屏专注。</h3><p class="text-gray-500 text-lg">进入刷题模式，我们移除了干扰元素。让视野完全回归题目本身。</p></div>
|
||
<div class="mt-8 flex justify-center"><div class="w-[85%] shadow-2xl rounded-[2.5rem] overflow-hidden border-[8px] border-white translate-y-10 group-hover:translate-y-5 transition-transform duration-500"><img src="<?php echo esc_url($cfg['question_bank_mockup']); ?>" class="w-full h-auto" alt="Focus Mode UI"></div></div>
|
||
</div>
|
||
<div class="bg-black rounded-[3rem] p-10 md:p-14 overflow-hidden relative text-white group flex flex-col">
|
||
<div class="relative z-10 mb-12"><div class="inline-flex px-3 py-1 rounded-full bg-white/10 border border-white/20 text-xs font-bold text-gray-300 mb-5 uppercase tracking-wider">Data Insight</div><h3 class="text-4xl font-bold mb-4">数据看板，<br>心中有数。</h3><p class="text-gray-400 text-lg">直观展示你的刷题量、正确率趋势以及薄弱知识点。</p></div>
|
||
<div class="grid grid-cols-2 gap-6 mb-8"><div class="bg-white/10 rounded-2xl p-6 border border-white/10"><div class="text-3xl font-bold mb-1">100<span class="text-sm text-gray-400">%</span></div><div class="text-xs text-gray-400 font-bold uppercase">真题覆盖</div></div><div class="bg-white/10 rounded-2xl p-6 border border-white/10"><div class="text-3xl font-bold mb-1 text-yellow-400">⚡</div><div class="text-xs text-gray-400 font-bold uppercase">智能错题本</div></div></div>
|
||
<div class="bg-white/5 rounded-2xl p-6 border border-white/5"><div class="flex justify-between items-end h-24 gap-2"><?php foreach (array(30,45,25,60,75,50,80) as $h): ?><div class="w-full bg-gray-700/50 rounded-t-sm relative overflow-hidden"><div style="height:<?php echo esc_attr($h); ?>%" class="absolute bottom-0 w-full bg-gradient-to-t from-apple-blue to-purple-500"></div></div><?php endforeach; ?></div><div class="flex justify-between mt-3 text-[10px] text-gray-500 uppercase font-bold"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="gx-qrcode-modal" class="gx-modal"><div class="gx-modal-backdrop"></div><div class="gx-modal-panel p-8 text-center"><button data-gx-modal-close class="absolute top-4 right-4 p-2 rounded-full hover:bg-gray-100">×</button><h3 class="text-2xl font-bold text-gray-900 mb-2">扫码添加客服</h3><p class="text-gray-500 mb-6">添加微信客服，获取刷题小程序</p><div class="bg-gray-50 rounded-2xl p-6 inline-block"><img src="<?php echo esc_url($cfg['customer_service_qrcode']); ?>" alt="客服微信二维码" class="w-64 h-64 rounded-lg"></div><p class="text-sm text-gray-400 mt-6">工作时间：周一至周日 9:00-21:00</p></div></div>
|
||
<?php get_footer(); ?>
|