130 lines
4.8 KiB
TypeScript
130 lines
4.8 KiB
TypeScript
import {
|
||
CreditCard,
|
||
Wrench,
|
||
Megaphone,
|
||
ClipboardCheck,
|
||
Users,
|
||
BarChart3,
|
||
ArrowRight,
|
||
type LucideIcon,
|
||
} from 'lucide-react';
|
||
|
||
interface Feature {
|
||
icon: LucideIcon;
|
||
title: string;
|
||
desc: string;
|
||
tags: string[];
|
||
}
|
||
|
||
const FEATURES: Feature[] = [
|
||
{
|
||
icon: CreditCard,
|
||
title: '物业缴费',
|
||
desc: '支持微信/支付宝在线缴费，自动账单生成，逾期智能提醒，财务报表一键导出，收费率提升40%+。',
|
||
tags: ['微信支付', '自动账单', '财务报表'],
|
||
},
|
||
{
|
||
icon: Wrench,
|
||
title: '在线报修',
|
||
desc: '业主一键报修，工单自动派发，维修进度实时追踪，评价闭环管理，平均响应时间缩短至5分钟。',
|
||
tags: ['智能派单', '进度追踪', '评价闭环'],
|
||
},
|
||
{
|
||
icon: Megaphone,
|
||
title: '社区公告',
|
||
desc: '图文通知一键群发，已读未读精准统计，分类管理历史可追溯，触达率达99%以上。',
|
||
tags: ['一键群发', '已读统计', '分类管理'],
|
||
},
|
||
{
|
||
icon: ClipboardCheck,
|
||
title: '巡检管理',
|
||
desc: '设备设施巡检打卡，隐患上报闭环，NFC/二维码防作弊巡更，确保安保无死角。',
|
||
tags: ['NFC打卡', '隐患上报', '防作弊'],
|
||
},
|
||
{
|
||
icon: Users,
|
||
title: '业主服务',
|
||
desc: '访客邀请、投诉建议、投票表决、社区活动，业主自治一站式平台，满意度提升60%。',
|
||
tags: ['访客邀请', '投票表决', '满意度+60%'],
|
||
},
|
||
{
|
||
icon: BarChart3,
|
||
title: '数据看板',
|
||
desc: '收费率、报修响应、满意度等核心指标可视化，管理驾驶舱实时呈现，辅助科学决策。',
|
||
tags: ['实时大屏', '多维分析', '决策辅助'],
|
||
},
|
||
];
|
||
|
||
export function FeatureGrid() {
|
||
return (
|
||
<section className="relative overflow-hidden bg-gradient-to-b from-white to-slate-50 py-20">
|
||
{/* 顶部柔光 */}
|
||
<div className="pointer-events-none absolute left-1/2 top-0 h-64 w-[700px] -translate-x-1/2 rounded-full bg-brand-200/20 blur-[120px]" />
|
||
|
||
<div className="container-page relative">
|
||
{/* 标题区 */}
|
||
<div className="mb-12 text-center">
|
||
<span className="text-xs font-semibold uppercase tracking-widest text-brand-600">
|
||
Core Features
|
||
</span>
|
||
<h2 className="mt-3 text-3xl font-bold text-slate-900 sm:text-4xl">
|
||
核心功能
|
||
</h2>
|
||
<div className="mx-auto mt-4 h-1 w-12 rounded-full bg-slate-900" />
|
||
<p className="mx-auto mt-4 max-w-xl text-base text-slate-500">
|
||
六大核心模块覆盖物业管理全流程，让每一个环节都简单、高效、可控
|
||
</p>
|
||
</div>
|
||
|
||
{/* 功能卡片 */}
|
||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||
{FEATURES.map((f, i) => (
|
||
<div
|
||
key={f.title}
|
||
className="group relative rounded-2xl border border-slate-200/70 bg-white p-7 shadow-[0_1px_3px_rgba(15,23,42,0.04),0_8px_24px_-12px_rgba(79,70,229,0.12)] transition-all duration-300 hover:-translate-y-1 hover:border-brand-200 hover:shadow-[0_4px_12px_rgba(15,23,42,0.06),0_20px_40px_-16px_rgba(79,70,229,0.25)]"
|
||
>
|
||
{/* 序号 */}
|
||
<span className="absolute right-5 top-5 font-mono text-2xl font-bold text-slate-100 transition-colors group-hover:text-brand-100">
|
||
{String(i + 1).padStart(2, '0')}
|
||
</span>
|
||
|
||
{/* 图标 - 靛蓝渐变 */}
|
||
<div className="relative flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-brand-600 text-white shadow-lg shadow-brand-600/30 transition-transform duration-300 group-hover:scale-110">
|
||
<f.icon className="h-6 w-6" />
|
||
</div>
|
||
|
||
{/* 标题 */}
|
||
<h3 className="mt-5 text-lg font-bold text-slate-900">
|
||
{f.title}
|
||
</h3>
|
||
|
||
{/* 描述 */}
|
||
<p className="mt-2 text-sm leading-7 text-slate-500">
|
||
{f.desc}
|
||
</p>
|
||
|
||
{/* 标签 */}
|
||
<div className="mt-4 flex flex-wrap gap-2">
|
||
{f.tags.map((tag) => (
|
||
<span
|
||
key={tag}
|
||
className="rounded-md bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600"
|
||
>
|
||
{tag}
|
||
</span>
|
||
))}
|
||
</div>
|
||
|
||
{/* 底部箭头 */}
|
||
<div className="mt-4 flex items-center gap-1.5 text-brand-600 opacity-0 transition-all duration-300 group-hover:opacity-100">
|
||
<span className="text-xs font-medium">了解详情</span>
|
||
<ArrowRight className="h-3.5 w-3.5" />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|