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.
117 lines
5.8 KiB
117 lines
5.8 KiB
'use client';
|
|
import React from "react";
|
|
import { SimpleCarousel } from "./SimpleCarousel";
|
|
|
|
const heroImages = [
|
|
{
|
|
id: "hero-1",
|
|
src: "/img/Home_1.jpg",
|
|
alt: "户外智能无线多功能风险监测系统",
|
|
text: "户外智能无线多功能风险监测系统是一套技术领先的低成本、高集成、强兼容物联感知系统。系统包含高精度数据传感、智能数据传输以及云平台在内的整体解决方案，具有智能化、高度集成、绿色节能、易安装维护等核心特征。方案广泛应用于房屋、边坡、桥梁、塔杆、矿坑坝等基础设施的形变和结构健康监测，可实现对监测物异常动态（倾斜、位移、沉降、振动、崩塌、温湿度等）的24小时实时监测预警，实现传感、采集、传输、分析、推送、处置一体化闭环管理。",
|
|
},
|
|
{
|
|
id: "hero-2",
|
|
src: "/img/1.png",
|
|
alt: "衡感智能核心监测终端应用场景",
|
|
},
|
|
{
|
|
id: "hero-3",
|
|
src: "/img/2.png",
|
|
alt: "城市结构安全监测可视化示意图",
|
|
},
|
|
{
|
|
id: "hero-4",
|
|
src: "/img/3.png",
|
|
alt: "AI 驱动的监测硬件与平台联动",
|
|
},
|
|
{
|
|
id: "hero-5",
|
|
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) => {
|
|
// 如果有文字，使用左右布局（左边文字，右边图片）
|
|
if (item.text) {
|
|
return (
|
|
<div className="flex h-full w-full flex-col overflow-hidden rounded-[28px] border border-white/8 bg-gradient-to-br from-[#f0f9ff] to-[#e4f2ff] md:flex-row">
|
|
{/* 左边：文字内容 */}
|
|
<div className="flex flex-1 flex-col justify-center bg-gradient-to-br from-[#f0f9ff] to-[#e4f2ff] p-6 text-[#0f1f39] md:p-8">
|
|
<h3 className="mb-3 text-xl font-semibold text-[#0f1f39] md:mb-4 md:text-2xl">
|
|
户外智能无线多功能风险监测系统
|
|
</h3>
|
|
<div className="space-y-3 text-sm leading-relaxed text-[#1f2937] md:text-base md:leading-relaxed">
|
|
<p>
|
|
是一套技术领先的低成本、高集成、强兼容物联感知系统。系统包含高精度数据传感、智能数据传输以及云平台在内的整体解决方案，具有<strong className="text-[#118af4]">智能化、高度集成、绿色节能、易安装维护</strong>等核心特征。
|
|
</p>
|
|
<p>
|
|
方案广泛应用于<strong className="text-[#118af4]">房屋、边坡、桥梁、塔杆、矿坑坝</strong>等基础设施的形变和结构健康监测，可实现对监测物异常动态（倾斜、位移、沉降、振动、崩塌、温湿度等）的<strong className="text-[#118af4]">24小时实时监测预警</strong>，实现传感、采集、传输、分析、推送、处置一体化闭环管理。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* 右边：图片 */}
|
|
<div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-[#f0f9ff] to-[#e4f2ff] p-4 md:w-1/2 md:p-6">
|
|
<div className="relative flex h-full w-full max-w-[400px] items-center justify-center">
|
|
<div className="h-full w-full flex items-center justify-center bg-gradient-to-br from-[#f0f9ff] to-[#e4f2ff] rounded-lg">
|
|
<img
|
|
src={item.src}
|
|
alt={item.alt}
|
|
className="max-h-full max-w-full object-contain"
|
|
loading="lazy"
|
|
style={{
|
|
mixBlendMode: 'multiply',
|
|
filter: 'contrast(1.1) brightness(1.02)'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
// 没有文字，使用原来的全屏图片布局
|
|
return (
|
|
<div className="relative 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>
|
|
);
|
|
}
|
|
|
|
|
|
|