You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
2.3 KiB
71 lines
2.3 KiB
1 month ago
|
'use client';
|
||
|
|
import React from "react";
|
||
|
|
import { SimpleCarousel } from "./SimpleCarousel";
|
||
|
|
|
||
|
|
const heroImages = [
|
||
|
|
{
|
||
|
|
id: "hero-1",
|
||
|
|
src: "/img/1.png",
|
||
|
|
alt: "衡感智能核心监测终端应用场景",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "hero-2",
|
||
|
|
src: "/img/2.png",
|
||
|
|
alt: "城市结构安全监测可视化示意图",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "hero-3",
|
||
|
|
src: "/img/3.png",
|
||
|
|
alt: "AI 驱动的监测硬件与平台联动",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "hero-4",
|
||
|
|
src: "/img/4.png",
|
||
|
|
alt: "智慧城市结构安全解决方案",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
export function HomeHeroCarousel() {
|
||
|
|
return (
|
||
|
|
<section className="relative overflow-hidden bg-[#0f1f39] pb-14 pt-10 text-white md:pb-20 md:pt-16">
|
||
|
|
<div className="absolute inset-0">
|
||
|
|
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(17,138,244,0.3),transparent_55%)]" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="relative mx-auto flex w-full max-w-6xl flex-col items-center gap-6 px-4 text-center md:px-6">
|
||
|
|
<div className="max-w-3xl space-y-3">
|
||
|
|
<p className="text-xs font-semibold uppercase tracking-[0.46em] text-[#7bc2ff]">
|
||
|
|
Intelligent Urban Safety
|
||
|
|
</p>
|
||
|
|
<h1 className="text-3xl font-semibold leading-tight md:text-[40px]">
|
||
|
|
AI 驱动的城市结构安全数字底座
|
||
|
|
</h1>
|
||
|
|
<p className="text-sm leading-relaxed text-[#bed9ff] md:text-base">
|
||
|
|
结合 AI 感知、数字孪生与智能硬件，构建设备—数据—AI—决策一体化安全体系，
|
||
|
|
为城市提供可持续的“自我防御力”。
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<SimpleCarousel
|
||
|
|
items={heroImages}
|
||
|
|
className="mt-4 h-[320px] w-full max-w-5xl rounded-[28px] bg-[#0b1629] md:h-[420px]"
|
||
|
|
renderItem={(item) => (
|
||
|
|
<div className="flex h-full w-full items-center justify-center overflow-hidden rounded-[28px] border border-white/8 bg-gradient-to-br from-[#102b55] via-[#0b1629] to-[#081220]">
|
||
|
|
<img
|
||
|
|
src={item.src}
|
||
|
|
alt={item.alt}
|
||
|
|
className="h-full w-full object-cover"
|
||
|
|
loading="lazy"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
keyExtractor={(item) => item.id}
|
||
|
|
interval={6000}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
|