187 lines
10 KiB
TypeScript
187 lines
10 KiB
TypeScript
|
import Link from 'next/link';
|
|||
|
|
import {
|
|||
|
|
Building2,
|
|||
|
|
CreditCard,
|
|||
|
|
Wrench,
|
|||
|
|
Bell,
|
|||
|
|
ShieldCheck,
|
|||
|
|
Smartphone,
|
|||
|
|
} from 'lucide-react';
|
|||
|
|
|
|||
|
|
export function Hero() {
|
|||
|
|
return (
|
|||
|
|
<section className="relative overflow-hidden bg-[#0a0e27]">
|
|||
|
|
{/* ===== 背景 ===== */}
|
|||
|
|
<div className="pointer-events-none absolute inset-0">
|
|||
|
|
{/* 深色渐变底 */}
|
|||
|
|
<div className="absolute inset-0 bg-gradient-to-br from-[#0a0e27] via-[#0d1130] to-[#0a0e27]" />
|
|||
|
|
{/* 网格底纹 */}
|
|||
|
|
<div
|
|||
|
|
className="absolute inset-0 opacity-[0.07]"
|
|||
|
|
style={{
|
|||
|
|
backgroundImage:
|
|||
|
|
'linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)',
|
|||
|
|
backgroundSize: '48px 48px',
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
{/* 靛蓝辉光 - 左上（克制） */}
|
|||
|
|
<div className="absolute -left-20 top-0 h-80 w-80 rounded-full bg-brand-600/15 blur-[120px]" />
|
|||
|
|
{/* 靛蓝辉光 - 右下（克制） */}
|
|||
|
|
<div className="absolute -right-10 bottom-0 h-72 w-72 rounded-full bg-brand-700/15 blur-[120px]" />
|
|||
|
|
|
|||
|
|
{/* === 几何图形 === */}
|
|||
|
|
{/* 大圆环 - 左上 */}
|
|||
|
|
<div className="hero-anim-spin absolute -left-20 -top-20 h-72 w-72 rounded-full border border-white/10" />
|
|||
|
|
{/* 方块 - 左下 */}
|
|||
|
|
<div className="hero-anim-float absolute bottom-16 left-[8%] h-14 w-14 rounded-lg border border-white/10 bg-white/[0.03]" />
|
|||
|
|
{/* 小菱形 - 左中 */}
|
|||
|
|
<div className="hero-anim-float-rev absolute left-[5%] top-1/2 h-8 w-8 rotate-45 rounded-sm border border-white/10 bg-white/[0.03]" />
|
|||
|
|
{/* 加号 - 左中偏上 */}
|
|||
|
|
<div className="hero-anim-float absolute left-[3%] top-[25%] text-2xl font-light text-white/15">+</div>
|
|||
|
|
{/* 小方块 - 左中偏下 */}
|
|||
|
|
<div className="hero-anim-float-rev absolute left-[12%] bottom-[22%] h-6 w-6 rounded border border-white/10 bg-white/[0.03]" style={{ animationDelay: '2s' }} />
|
|||
|
|
{/* 小圆 - 左侧 */}
|
|||
|
|
<div className="hero-anim-pulse absolute left-[18%] top-[35%] h-2.5 w-2.5 rounded-full bg-brand-400/40" style={{ animationDelay: '0.8s' }} />
|
|||
|
|
|
|||
|
|
{/* === 右侧区域 === */}
|
|||
|
|
<div className="hero-anim-spin absolute right-10 top-12 h-32 w-32 rounded-full border-2 border-dashed border-white/10" style={{ animationDuration: '24s' }} />
|
|||
|
|
<div className="hero-anim-float-rev absolute right-[12%] top-1/3 h-10 w-10 rotate-45 rounded-sm border border-white/10 bg-white/[0.03]" />
|
|||
|
|
<div className="hero-anim-pulse absolute -bottom-16 right-[5%] h-48 w-48 rounded-full border border-white/8" />
|
|||
|
|
<div className="hero-anim-float absolute right-[6%] top-[28%] text-3xl font-light text-white/10">+</div>
|
|||
|
|
<div className="hero-anim-spin absolute right-[8%] bottom-[30%] h-16 w-16 rounded-full border border-white/10" style={{ animationDuration: '20s', animationDirection: 'reverse' }} />
|
|||
|
|
<div className="hero-anim-float-rev absolute right-[20%] bottom-[12%] h-0 w-0" style={{ borderLeft: '8px solid transparent', borderRight: '8px solid transparent', borderBottom: '14px solid rgba(255,255,255,0.1)' }} />
|
|||
|
|
|
|||
|
|
{/* === 中间区域 === */}
|
|||
|
|
<div className="hero-anim-pulse absolute left-[35%] top-[20%] h-3 w-3 rounded-full bg-brand-400/40" />
|
|||
|
|
<div className="hero-anim-pulse absolute right-[28%] bottom-[25%] h-2 w-2 rounded-full bg-white/20" style={{ animationDelay: '1.5s' }} />
|
|||
|
|
<div className="hero-anim-pulse absolute left-[15%] bottom-[30%] h-2.5 w-2.5 rounded-full bg-brand-400/30" style={{ animationDelay: '0.8s' }} />
|
|||
|
|
<div className="hero-anim-float absolute right-[40%] top-[15%] font-mono text-2xl font-bold text-white/10">{'{ }'}</div>
|
|||
|
|
<div className="hero-anim-float-rev absolute left-[60%] bottom-[20%] font-mono text-xl font-bold text-white/8">{'</>'}</div>
|
|||
|
|
<div className="hero-anim-float absolute left-[42%] top-[55%] h-7 w-7 rotate-12 rounded-md border border-white/10 bg-white/[0.03]" />
|
|||
|
|
<div className="hero-anim-float-rev absolute left-[55%] top-[18%] h-10 w-10 rounded-full border border-dashed border-white/10" style={{ animationDelay: '1s' }} />
|
|||
|
|
<div className="hero-anim-float-rev absolute left-[38%] bottom-[18%] text-xl font-light text-white/10">+</div>
|
|||
|
|
<div className="hero-anim-spin absolute left-[48%] top-[30%] h-5 w-5 rounded border border-white/10" style={{ animationDuration: '15s' }} />
|
|||
|
|
<div className="hero-anim-pulse absolute left-[50%] top-[65%] h-2 w-2 rounded-full bg-brand-400/30" style={{ animationDelay: '2.5s' }} />
|
|||
|
|
<div className="hero-anim-float absolute left-[30%] top-[12%] h-12 w-12 rounded-full border border-white/8" />
|
|||
|
|
<div className="hero-anim-float-rev absolute left-[45%] bottom-[10%] h-px w-16 bg-gradient-to-r from-transparent via-white/15 to-transparent" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* ===== 内容区 ===== */}
|
|||
|
|
<div className="container-page relative grid items-center gap-12 py-16 lg:grid-cols-2 lg:py-24">
|
|||
|
|
{/* 左：文案 */}
|
|||
|
|
<div className="text-center lg:text-left">
|
|||
|
|
<span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-sm text-gray-300 backdrop-blur-sm">
|
|||
|
|
<Smartphone className="h-4 w-4 text-brand-400" />
|
|||
|
|
物业管理系统 · 小程序 · SaaS
|
|||
|
|
</span>
|
|||
|
|
|
|||
|
|
<h1 className="mt-6 text-4xl font-bold leading-tight text-white sm:text-5xl">
|
|||
|
|
让物业管理
|
|||
|
|
<br />
|
|||
|
|
<span className="bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent">
|
|||
|
|
像发微信一样简单
|
|||
|
|
</span>
|
|||
|
|
</h1>
|
|||
|
|
|
|||
|
|
<p className="mt-5 text-xl font-medium text-gray-300">
|
|||
|
|
懂物业，更懂“省”心
|
|||
|
|
</p>
|
|||
|
|
<p className="mt-3 max-w-lg text-base leading-7 text-gray-400 lg:mx-0 mx-auto">
|
|||
|
|
一站式物业管理平台，覆盖缴费、报修、公告、巡检全流程，助力物业公司降本增效。
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div className="mt-8 flex flex-col gap-4 sm:flex-row lg:justify-start justify-center">
|
|||
|
|
<Link
|
|||
|
|
href="/contact"
|
|||
|
|
className="rounded-lg bg-brand-600 px-7 py-3 text-sm font-semibold text-white shadow-lg shadow-brand-900/50 transition-all hover:bg-brand-500"
|
|||
|
|
>
|
|||
|
|
预约演示
|
|||
|
|
</Link>
|
|||
|
|
<Link
|
|||
|
|
href="/manual"
|
|||
|
|
className="rounded-lg border border-white/15 bg-white/5 px-7 py-3 text-sm font-medium text-gray-200 backdrop-blur-sm transition-colors hover:bg-white/10"
|
|||
|
|
>
|
|||
|
|
使用手册
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 右：配图区 */}
|
|||
|
|
<div className="relative hidden lg:block">
|
|||
|
|
<div className="hero-anim-float relative mx-auto w-full max-w-md rounded-2xl border border-white/15 bg-white p-5 shadow-2xl">
|
|||
|
|
{/* 顶部状态栏 */}
|
|||
|
|
<div className="mb-4 flex items-center justify-between">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-brand-600">
|
|||
|
|
<Building2 className="h-4 w-4 text-white" />
|
|||
|
|
</span>
|
|||
|
|
<span className="text-sm font-semibold text-gray-800">智管物业</span>
|
|||
|
|
</div>
|
|||
|
|
<span className="text-xs text-gray-400">业主端</span>
|
|||
|
|
</div>
|
|||
|
|
{/* 功能卡片 */}
|
|||
|
|
<div className="grid grid-cols-3 gap-3">
|
|||
|
|
{[
|
|||
|
|
{ icon: CreditCard, label: '物业缴费' },
|
|||
|
|
{ icon: Wrench, label: '在线报修' },
|
|||
|
|
{ icon: Bell, label: '社区公告' },
|
|||
|
|
{ icon: ShieldCheck, label: '访客邀请' },
|
|||
|
|
{ icon: Building2, label: '投诉建议' },
|
|||
|
|
{ icon: Smartphone, label: '社区活动' },
|
|||
|
|
].map((item) => (
|
|||
|
|
<div
|
|||
|
|
key={item.label}
|
|||
|
|
className="flex flex-col items-center gap-1.5 rounded-lg border border-gray-100 bg-gray-50 p-3"
|
|||
|
|
>
|
|||
|
|
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-50">
|
|||
|
|
<item.icon className="h-4 w-4 text-brand-600" />
|
|||
|
|
</span>
|
|||
|
|
<span className="text-xs text-gray-600">{item.label}</span>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
{/* 缴费条 */}
|
|||
|
|
<div className="mt-4 rounded-lg bg-gray-50 p-3">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<span className="text-xs text-gray-500">本月物业费</span>
|
|||
|
|
<span className="text-xs font-medium text-brand-600">待缴费</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="mt-1 flex items-end justify-between">
|
|||
|
|
<span className="text-lg font-bold text-gray-900">¥286.00</span>
|
|||
|
|
<span className="rounded-md bg-brand-600 px-3 py-1 text-xs font-medium text-white">
|
|||
|
|
立即缴费
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 漂浮卡片 - 报修工单 */}
|
|||
|
|
<div className="hero-anim-float-rev absolute -left-6 top-8 rounded-xl border border-gray-100 bg-white p-3 shadow-xl">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-50">
|
|||
|
|
<Wrench className="h-4 w-4 text-brand-600" />
|
|||
|
|
</span>
|
|||
|
|
<div>
|
|||
|
|
<div className="text-xs font-medium text-gray-800">报修工单</div>
|
|||
|
|
<div className="text-xs text-gray-400">已完成 · 5分钟响应</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 漂浮卡片 - 收费率 */}
|
|||
|
|
<div className="hero-anim-float absolute -right-4 bottom-10 rounded-xl border border-gray-100 bg-white p-3 shadow-xl">
|
|||
|
|
<div className="text-xs text-gray-400">本月收费率</div>
|
|||
|
|
<div className="mt-0.5 flex items-baseline gap-1">
|
|||
|
|
<span className="text-xl font-bold text-brand-600">98.5</span>
|
|||
|
|
<span className="text-xs text-gray-400">%</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="mt-1.5 h-1.5 w-20 overflow-hidden rounded-full bg-gray-100">
|
|||
|
|
<div className="h-full w-[98%] rounded-full bg-brand-500" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
}
|