company-website/src/components/sections/Policy.astro

---
---
		<section class="px-4 lg:px-0 mt-12 bg-slate-50/50 overflow-hidden">
			<div class="max-w-7xl mx-auto relative">

				<div class="text-center mt-10 mb-16 relative">
					<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-red-100/50 blur-3xl rounded-full -z-10"></div>
					<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight">
						<span class="text-red-600">系统平台紧跟政策导向</span>
					</h3>
					<div class="w-24 h-1.5 bg-red-600 mx-auto mt-8 rounded-full shadow-sm shadow-red-200"></div>
				</div>

				<div class="mb-12 bg-white rounded-[2rem] border border-red-100 p-5 md:p-6 shadow-sm hover:shadow-xl hover:shadow-red-500/10 transition-all duration-300">
					<div class="flex flex-col">
							<div class="inline-flex items-center self-start px-3 py-1 rounded-full bg-red-100 text-red-700 text-sm font-bold tracking-wide mb-3">重点政策解读</div>
							<h5 class="text-2xl md:text-3xl font-extrabold text-gray-900 leading-tight mb-3">各地加快高层建筑消防物联感知设备统筹接入</h5>
							<div class="mb-5 pb-4 border-b border-red-100">
								<p class="text-base md:text-lg text-red-700 font-bold mb-3">全国政策共性要求</p>
								<p class="text-base text-gray-700 leading-relaxed">近年来，全国高层建筑消防安全数字化治理工作统筹推进，各地积极探索实践。</p>
								<p class="text-base text-gray-700 leading-relaxed mt-2 mb-3">上海、重庆、广州、杭州等重点城市相继落地实施，核心聚焦物联感知监测、智能实时预警、数据平台汇聚、全链条闭环处置，着力构建现代化智慧消防治理体系。</p>
								<div class="flex flex-wrap gap-2">
									<span class="px-2.5 py-1 rounded-full bg-red-50 border border-red-100 text-xs font-bold text-red-700">消防设施联网</span>
									<span class="px-2.5 py-1 rounded-full bg-red-50 border border-red-100 text-xs font-bold text-red-700">24小时在线监测</span>
									<span class="px-2.5 py-1 rounded-full bg-red-50 border border-red-100 text-xs font-bold text-red-700">异常事件预警</span>
									<span class="px-2.5 py-1 rounded-full bg-red-50 border border-red-100 text-xs font-bold text-red-700">监管平台数据接入</span>
								</div>
							</div>
							<p class="text-base md:text-lg text-red-700 font-bold mb-4">四项“必须加装”要求</p>
							<ul class="grid grid-cols-1 md:grid-cols-2 gap-3">
								<li class="flex items-start gap-3 bg-red-50/70 border border-red-100 rounded-xl p-3">
									<span class="w-2.5 h-2.5 rounded-full bg-red-600 mt-1.5 shrink-0"></span>
									<p class="text-base text-gray-700 leading-relaxed">对设有室内消火栓、自动喷水灭火系统的，必须加装水压水位监测设备</p>
								</li>
								<li class="flex items-start gap-3 bg-red-50/70 border border-red-100 rounded-xl p-3">
									<span class="w-2.5 h-2.5 rounded-full bg-red-600 mt-1.5 shrink-0"></span>
									<p class="text-base text-gray-700 leading-relaxed">对设有火灾自动报警系统的，必须加装用户传输装置设备</p>
								</li>
								<li class="flex items-start gap-3 bg-red-50/70 border border-red-100 rounded-xl p-3">
									<span class="w-2.5 h-2.5 rounded-full bg-red-600 mt-1.5 shrink-0"></span>
									<p class="text-base text-gray-700 leading-relaxed">对设有建筑消防车通道的，在占堵路段必须加装占道监测设备</p>
								</li>
								<li class="flex items-start gap-3 bg-red-50/70 border border-red-100 rounded-xl p-3">
									<span class="w-2.5 h-2.5 rounded-full bg-red-600 mt-1.5 shrink-0"></span>
									<p class="text-base text-gray-700 leading-relaxed">对设有消防控制室的，必须加装值班人员脱岗离岗监测设备</p>
								</li>
							</ul>
					</div>
				</div>

				<div class="mb-20">
					<div class="flex items-center space-x-3 mb-10 border-l-4 border-red-600 pl-4">
						<h4 class="text-2xl font-extrabold text-gray-800 tracking-tight">国家强制性安全生产标准</h4>
					</div>

					<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
						<div class="group bg-white rounded-[2.5rem] p-6 border border-red-100 shadow-sm hover:shadow-2xl hover:shadow-red-500/10 transition-all duration-500 flex flex-col md:flex-row gap-8">
							<div class="md:w-[45%] aspect-[21/29.7] rounded-[1.5rem] overflow-hidden shadow-md bg-slate-100 border border-gray-100">
								<img src="/img/policy-1.webp" class="w-full h-full object-cover object-top group-hover:scale-110 transition-transform duration-1000" />
							</div>
							<div class="md:w-[55%] flex flex-col justify-center py-4">
								<h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-red-600 transition-colors leading-tight">大中型企业安全生产标准化管理体系要求</h3>
								<p class="text-base text-gray-600 leading-relaxed bg-red-50/50 p-5 rounded-2xl border-red-600 mb-4">
									企业应利用<span class="text-red-700 font-bold">数字化、信息化、智能化</span>等手段,提高安全生产台账管理、安全风险分级管控、事故隐患排查治理、应急管理等效能。
								</p>
								<div class="text-sm font-bold text-red-600">GB/T 33000-2025</div>
							</div>
						</div>
						<div class="group bg-white rounded-[2.5rem] p-6 border border-red-100 shadow-sm hover:shadow-2xl hover:shadow-red-500/10 transition-all duration-500 flex flex-col md:flex-row gap-8">
							<div class="md:w-[45%] aspect-[21/29.7] rounded-[1.5rem] overflow-hidden shadow-md bg-slate-100 border border-gray-100">
								<img src="/img/policy-2.webp" class="w-full h-full object-cover object-top group-hover:scale-110 transition-transform duration-1000" />
							</div>
							<div class="md:w-[55%] flex flex-col justify-center py-4">
								<h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-red-600 transition-colors leading-tight">工业互联网平台<br />安全生产数字化管理</h3>
								<p class="text-base text-gray-600 leading-relaxed bg-red-50/50 p-5 rounded-2xl border-red-600 mb-4">
									企业应基于工业互联网平台开展<span class="text-red-700 font-bold">安全风险管控</span>,包括安全风险辨识、安全风险分级管控和风险预警。
								</p>
								<div class="text-sm font-bold text-red-600">GB/T46884.1—2025</div>
							</div>
						</div>
					</div>
				</div>

				<div class="relative mb-12 md:mb-0">
					<div class="mb-10">
						<div class="flex items-center border-l-4 border-red-600 pl-4">
							<h4 class="text-2xl font-extrabold text-gray-800 tracking-tight">数字化与应急管理指引</h4>
						</div>

						<div class="flex md:hidden items-center space-x-2 mt-4 ml-5 text-red-600 font-bold animate-pulse">
							<span class="text-base tracking-widest">向左滑动查看更多政策</span>
							<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="M13 7l5 5m0 0l-5 5m5-5H6"></path>
							</svg>
						</div>
					</div>

					<div id="policy-hint" class="md:hidden absolute right-2 top-1/2 transform -translate-y-1/2 z-30 transition-opacity duration-500 pointer-events-none">
						<div class="bg-red-600 text-white p-3 rounded-full shadow-xl animate-bounce-x">
							<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
							</svg>
						</div>
					</div>

					<div id="policy-container" class="flex md:grid md:grid-cols-3 lg:grid-cols-5 gap-6 overflow-x-auto snap-x no-scrollbar">

						<div class="min-w-[280px] md:min-w-0 snap-center group">
							<div class="bg-white rounded-[1.8rem] p-4 border border-slate-100 shadow-sm hover:shadow-xl hover:border-red-200 transition-all duration-300 flex flex-col h-full">
								<div class="relative aspect-[21/29.7] w-full rounded-xl overflow-hidden mb-5 border border-slate-50 shadow-inner">
									<img src="/img/policy-3.webp" class="w-full h-full object-cover object-top" />
								</div>
								<h3 class="text-base font-bold text-gray-900 mb-3 line-clamp-2 leading-snug group-hover:text-red-600 transition-colors">防范电动车棚火灾事故措施</h3>
								<p class="text-[13px] text-gray-500 leading-relaxed mb-6 flex-grow border-l-2 border-red-100 pl-3">
									应具有<span class="text-red-600 font-bold">24小时视频监控</span>，鼓励接入电气火灾监控。
								</p>
								<div class="mt-auto pt-4 border-t border-slate-50 text-[10px] text-gray-400 font-mono">FIRE-001</div>
							</div>
						</div>

						<div class="min-w-[280px] md:min-w-0 snap-center group">
							<div class="bg-white rounded-[1.8rem] p-4 border border-slate-100 shadow-sm hover:shadow-xl hover:border-red-200 transition-all duration-300 flex flex-col h-full">
								<div class="relative aspect-[21/29.7] w-full rounded-xl overflow-hidden mb-5 border border-slate-50 shadow-inner">
									<img src="/img/policy-4.webp" class="w-full h-full object-cover object-top" />
								</div>
								<h3 class="text-base font-bold text-gray-900 mb-3 line-clamp-2 leading-snug group-hover:text-red-600 transition-colors">应急管理科技信息化任务书</h3>
								<p class="text-[13px] text-gray-500 leading-relaxed mb-6 flex-grow border-l-2 border-red-100 pl-3">
									企业端健全监测体系，政府端<span class="text-red-600 font-bold">加强数据汇聚</span>应用。
								</p>
								<div class="mt-auto pt-4 border-t border-slate-50 text-[10px] text-gray-400 font-mono">TASK-002</div>
							</div>
						</div>

						<div class="min-w-[280px] md:min-w-0 snap-center group">
							<div class="bg-white rounded-[1.8rem] p-4 border border-slate-100 shadow-sm hover:shadow-xl hover:border-red-200 transition-all duration-300 flex flex-col h-full">
								<div class="relative aspect-[21/29.7] w-full rounded-xl overflow-hidden mb-5 border border-slate-50 shadow-inner">
									<img src="/img/policy-5.webp" class="w-full h-full object-cover object-top" />
								</div>
								<h3 class="text-base font-bold text-gray-900 mb-3 line-clamp-2 leading-snug group-hover:text-red-600 transition-colors">餐饮业促进和管理办法</h3>
								<p class="text-[13px] text-gray-500 leading-relaxed mb-6 flex-grow border-l-2 border-red-100 pl-3">
									落实餐饮经营者安全责任，明确<span class="text-red-600 font-bold">数字化监管</span>支持。
								</p>
								<div class="mt-auto pt-4 border-t border-slate-50 text-[10px] text-gray-400 font-mono">CATER-003</div>
							</div>
						</div>

						<div class="min-w-[280px] md:min-w-0 snap-center group">
							<div class="bg-white rounded-[1.8rem] p-4 border border-slate-100 shadow-sm hover:shadow-xl hover:border-red-200 transition-all duration-300 flex flex-col h-full">
								<div class="relative aspect-[21/29.7] w-full rounded-xl overflow-hidden mb-5 border border-slate-50 shadow-inner">
									<img src="/img/policy-6.webp" class="w-full h-full object-cover object-top" />
								</div>
								<h3 class="text-base font-bold text-gray-900 mb-3 line-clamp-2 leading-snug group-hover:text-red-600 transition-colors">安全生产责任指导意见</h3>
								<p class="text-[13px] text-gray-500 leading-relaxed mb-6 flex-grow border-l-2 border-red-100 pl-3">
									单位须落实责任主体，并严格执行<span class="text-red-600 font-bold">五项到位</span>要求。
								</p>
								<div class="mt-auto pt-4 border-t border-slate-50 text-[10px] text-gray-400 font-mono">DUTY-004</div>
							</div>
						</div>

						<div class="min-w-[280px] md:min-w-0 snap-center group">
							<div class="bg-white rounded-[1.8rem] p-4 border border-slate-100 shadow-sm hover:shadow-xl hover:border-red-200 transition-all duration-300 flex flex-col h-full">
								<div class="relative aspect-[21/29.7] w-full rounded-xl overflow-hidden mb-5 border border-slate-50 shadow-inner">
									<img src="/img/policy-7.webp" class="w-full h-full object-cover object-top" />
								</div>
								<h3 class="text-base font-bold text-gray-900 mb-3 line-clamp-2 leading-snug group-hover:text-red-600 transition-colors">推进新型工业数字化意见</h3>
								<p class="text-[13px] text-gray-500 leading-relaxed mb-6 flex-grow border-l-2 border-red-100 pl-3">
									鼓励智能化改造，符合条件单项最高获<span class="text-red-600 font-bold">100万元补助</span>。
								</p>
								<div class="mt-auto pt-4 border-t border-slate-50 text-[10px] text-gray-400 font-mono">SUB-005</div>
							</div>
						</div>

					</div>
				</div>
			</div>