Files
gongxue-wp-theme/page-online-school.php
2026-06-25 15:57:22 +08:00

38 lines
5.7 KiB
PHP

<?php
get_header();
$cfg = gx_asset_config();
?>
<div class="pt-20 min-h-screen bg-slate-50 animate-fade-in pb-20">
<div class="relative bg-white border-b border-gray-100 overflow-hidden">
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-50 rounded-full blur-[100px] opacity-60 pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-6 py-16 md:py-24 relative z-10 text-center">
<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-100 text-apple-blue text-xs font-bold tracking-wider uppercase mb-6"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.42 10.92a1 1 0 0 0-.02-1.84l-8.98-4a1 1 0 0 0-.84 0l-8.98 4a1 1 0 0 0-.02 1.84l8.98 4.2a1 1 0 0 0 .88 0z"/><path d="M22 10v6"/><path d="M6 12.5V16c0 1.1 2.69 2 6 2s6-.9 6-2v-3.5"/></svg>Gongxue Online</span>
<h1 class="text-4xl md:text-6xl font-bold text-apple-dark mb-6 leading-tight">线上好课,<span class="text-apple-blue">APP 随身学</span></h1>
<p class="text-lg md:text-xl text-gray-500 max-w-2xl mx-auto mb-10">不论在宿舍还是图书馆,打开恭学网校 APP 即可开始学习。最新考纲课程同步更新。</p>
<div class="flex flex-col md:flex-row justify-center items-center gap-6 mb-12">
<div class="flex gap-4 md:gap-8"><div class="text-center bg-white px-6 py-4 rounded-2xl shadow-sm border border-gray-100 min-w-[120px]"><div class="text-2xl md:text-3xl font-bold text-apple-dark">10W+</div><div class="text-xs text-gray-400">APP 下载量</div></div><div class="text-center bg-white px-6 py-4 rounded-2xl shadow-sm border border-gray-100 min-w-[120px]"><div class="text-2xl md:text-3xl font-bold text-apple-dark">4.9</div><div class="text-xs text-gray-400">学员好评</div></div></div>
<a href="https://www.gongxue100.com/mobile" target="_blank" rel="noreferrer" class="px-8 py-4 bg-apple-blue hover:bg-apple-blue-hover text-white rounded-full font-bold shadow-lg shadow-blue-200 transition-all hover:scale-105 flex items-center gap-2"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>下载恭学网校 APP</a>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto px-6 mt-12 grid grid-cols-1 lg:grid-cols-12 gap-12">
<div class="lg:col-span-7 space-y-8">
<div class="bg-white p-8 rounded-[2rem] shadow-sm border border-gray-100 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1"><div class="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center text-apple-blue mb-4"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg></div><h3 class="text-2xl font-bold text-apple-dark mb-2">移动端学习系统</h3><p class="text-gray-500 text-sm mb-6">专为碎片化学习打造。支持倍速播放、离线缓存、后台播放。课程更新实时推送到手机。</p><a href="https://www.gongxue100.com/mobile" target="_blank" rel="noreferrer" class="inline-flex items-center text-apple-blue font-semibold text-sm hover:underline">前往下载 APP <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg></a></div>
<div class="w-full md:w-48 flex justify-center"><?php gx_phone_mockup($cfg['online_school_mockup'], 'scale-75 origin-center'); ?></div>
</div>
<div class="bg-white p-8 rounded-[2rem] shadow-sm border border-gray-100 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1"><div class="w-12 h-12 bg-purple-50 rounded-2xl flex items-center justify-center text-purple-600 mb-4"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg></div><h3 class="text-2xl font-bold text-apple-dark mb-2">万人模考大赛</h3><p class="text-gray-500 text-sm mb-4">APP 内定期举办大型模拟考试,全真模拟考场环境。考后自动生成六维能力分析报告。</p><button class="text-purple-600 font-semibold text-sm hover:underline flex items-center gap-1">查看模考安排 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg></button></div>
<div class="w-full md:w-48 h-32 bg-gray-50 rounded-xl flex items-end justify-center px-4 pb-4 gap-2"><div class="w-3 h-[40%] bg-purple-200 rounded-t"></div><div class="w-3 h-[60%] bg-purple-300 rounded-t"></div><div class="w-3 h-[80%] bg-purple-500 rounded-t shadow-lg"></div><div class="w-3 h-[50%] bg-purple-200 rounded-t"></div></div>
</div>
</div>
<div class="lg:col-span-5">
<div class="bg-white p-8 rounded-[2rem] shadow-xl border border-blue-50 sticky top-24">
<div class="flex items-center gap-3 mb-6"><div class="p-2 bg-gradient-to-br from-orange-100 to-amber-100 text-orange-600 rounded-xl"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg></div><div><h3 class="font-bold text-xl text-apple-dark">咨询课程顾问</h3><p class="text-xs text-gray-500">线上/线下班型 1对1 规划</p></div></div>
<iframe src="https://baoming.gongxue100.com/f/xFYow5?background=white&banner=show&embedded=true&inner_redirect=false" width="100%" height="800" frameborder="0" style="border:none;border-radius:1rem;background:#f9fafb"></iframe>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>