114 lines
4.5 KiB
TypeScript
114 lines
4.5 KiB
TypeScript
import Image from 'next/image';
|
||
|
||
interface Scenario {
|
||
num: string;
|
||
tag: string;
|
||
title: string;
|
||
subtitle: string;
|
||
desc: string;
|
||
image: string;
|
||
}
|
||
|
||
const SCENARIOS: Scenario[] = [
|
||
{
|
||
num: '01',
|
||
tag: '业主端',
|
||
title: '指尖上的物业',
|
||
subtitle: '服务触手可及',
|
||
desc: '无需下载 APP，微信一键直达。支持在线缴费、手机报修、投诉建议及社区公告查看。',
|
||
image: '/customer.png',
|
||
},
|
||
{
|
||
num: '02',
|
||
tag: '员工端',
|
||
title: '口袋里的管家',
|
||
subtitle: '告别纸质办公',
|
||
desc: '专为一线人员打造。工单秒级响应，巡检拍照留痕，抄表自动计算，随时随地处理现场事务。',
|
||
image: '/staff.png',
|
||
},
|
||
{
|
||
num: '03',
|
||
tag: '管理后台',
|
||
title: '全景驾驶舱',
|
||
subtitle: '盈亏一目了然',
|
||
desc: '聚合财务、工单、人员数据。支持多项目集中管理，多维度经营报表。算清每一笔账，管好每一个人。',
|
||
image: '/dashboard.png',
|
||
},
|
||
];
|
||
|
||
export function SolutionShowcase() {
|
||
return (
|
||
<section className="bg-white py-16">
|
||
<div className="container-page">
|
||
<div className="mx-auto mb-12 max-w-2xl text-center">
|
||
<span className="text-xs font-semibold uppercase tracking-widest text-brand-600">
|
||
Product
|
||
</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="space-y-12">
|
||
{SCENARIOS.map((s, i) => {
|
||
const reversed = i % 2 === 1;
|
||
return (
|
||
<div
|
||
key={s.num}
|
||
className="grid items-center gap-8 lg:grid-cols-12 lg:gap-10"
|
||
>
|
||
{/* 文案区 */}
|
||
<div className={`lg:col-span-5 ${reversed ? 'lg:order-2 lg:col-start-8' : ''}`}>
|
||
{/* 序号 + 端标签 */}
|
||
<div className="flex items-center gap-3">
|
||
<span className="font-mono text-sm font-bold text-brand-600">
|
||
{s.num}
|
||
</span>
|
||
<span className="h-px w-6 bg-slate-300" />
|
||
<span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||
{s.tag}
|
||
</span>
|
||
</div>
|
||
|
||
<h3 className="mt-4 text-2xl font-bold text-slate-900">
|
||
{s.title}
|
||
</h3>
|
||
<p className="mt-1.5 text-lg font-medium text-slate-900">
|
||
{s.subtitle}
|
||
</p>
|
||
<div className="mt-3 h-0.5 w-12 rounded-full bg-slate-900" />
|
||
<p className="mt-4 text-sm leading-7 text-slate-600">
|
||
{s.desc}
|
||
</p>
|
||
</div>
|
||
|
||
{/* 配图区 */}
|
||
<div className={`lg:col-span-7 ${reversed ? 'lg:order-1 lg:col-start-1' : ''}`}>
|
||
<div className="group relative flex items-center justify-center overflow-hidden rounded-2xl border border-slate-200/70 bg-gradient-to-br from-slate-50 to-white py-8 shadow-[0_4px_12px_rgba(15,23,42,0.04),0_24px_48px_-20px_rgba(15,23,42,0.12)] transition-all duration-500 hover:shadow-[0_8px_20px_rgba(15,23,42,0.06),0_32px_64px_-24px_rgba(15,23,42,0.2)]">
|
||
{/* 卡片内辉光 */}
|
||
<div className="pointer-events-none absolute left-1/2 top-1/2 h-48 w-80 -translate-x-1/2 -translate-y-1/2 rounded-full bg-slate-200/40 blur-[80px] transition-all duration-500 group-hover:bg-slate-300/50" />
|
||
<div className="showcase-anim-float relative z-10 flex items-center justify-center transition-transform duration-500 group-hover:scale-[1.03]">
|
||
<Image
|
||
src={s.image}
|
||
alt={`${s.title} - ${s.subtitle}`}
|
||
width={500}
|
||
height={700}
|
||
className="h-[340px] w-auto max-w-full rounded-lg"
|
||
unoptimized
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|