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.
113 lines
4.6 KiB
113 lines
4.6 KiB
'use client';
|
|
|
|
import React from "react";
|
|
import type { SolutionItem } from "../types";
|
|
import { SimpleCarousel } from "./SimpleCarousel";
|
|
|
|
interface SolutionsCarouselProps {
|
|
items: SolutionItem[];
|
|
title?: string;
|
|
eyebrow?: string;
|
|
description?: string;
|
|
}
|
|
|
|
export function SolutionsCarousel({
|
|
items,
|
|
title = "行业安全监测解决方案矩阵",
|
|
eyebrow = "Solutions Suite",
|
|
description = "覆盖房屋、边坡、交通、能源等多场景的安全监测方案，联动多源感知与云端智能决策。",
|
|
}: SolutionsCarouselProps) {
|
|
if (!items || items.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<section className="relative bg-white py-16 text-[#0f1f39] md:py-20">
|
|
<div className="absolute inset-0">
|
|
<div className="pointer-events-none absolute right-[-160px] top-[-160px] h-[340px] w-[340px] rounded-full bg-[radial-gradient(circle,rgba(17,138,244,0.18)_0%,rgba(17,138,244,0)_78%)] blur-3xl opacity-80" />
|
|
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-[240px] bg-gradient-to-t from-[#f5f7fb] via-white to-transparent opacity-60" />
|
|
</div>
|
|
|
|
<div className="relative mx-auto w-full max-w-5xl px-4 text-center md:px-6">
|
|
{eyebrow && (
|
|
<p className="mb-3 text-xs font-semibold uppercase tracking-[0.46em] text-[#118af4]">
|
|
{eyebrow}
|
|
</p>
|
|
)}
|
|
<h2 className="text-3xl font-semibold leading-tight md:text-[34px]">
|
|
{title}
|
|
</h2>
|
|
{description && (
|
|
<p className="mx-auto mt-3 max-w-3xl text-sm leading-relaxed text-[#4b5565] md:text-base">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="relative mx-auto mt-10 w-full max-w-6xl px-4 md:mt-12 md:px-6">
|
|
<SimpleCarousel
|
|
items={items}
|
|
keyExtractor={(item) => item.id}
|
|
className="w-full rounded-[28px] bg-white/95 p-6 shadow-[0_24px_48px_rgba(17,138,244,0.08)] min-h-[520px] md:min-h-[460px] md:p-10"
|
|
renderItem={(item) => (
|
|
<div className="grid items-center gap-10 md:grid-cols-[1.05fr_0.95fr] md:gap-14">
|
|
<div className="order-2 text-left md:order-1">
|
|
{item.tag && (
|
|
<span className="inline-flex items-center rounded-full bg-[#e4f2ff] px-3.5 py-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-[#118af4]">
|
|
{item.tag}
|
|
</span>
|
|
)}
|
|
<h3 className="mt-4 text-[26px] font-semibold leading-tight text-[#0f1f39] md:text-[30px]">
|
|
{item.title}
|
|
</h3>
|
|
<p className="mt-4 text-sm leading-relaxed text-[#4b5565] md:text-base">
|
|
{item.summary}
|
|
</p>
|
|
{item.bullets && item.bullets.length > 0 && (
|
|
<ul className="mt-5 space-y-2 text-sm text-[#1f2937] md:text-base">
|
|
{item.bullets.map((bullet, index) => (
|
|
<li key={index} className="flex items-start gap-2">
|
|
<span className="mt-[6px] inline-block h-1.5 w-1.5 rounded-full bg-[#118af4]" />
|
|
<span>{bullet}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
{item.badges && item.badges.length > 0 && (
|
|
<div className="mt-6 flex flex-wrap gap-2.5">
|
|
{item.badges.map((badge, index) => (
|
|
<span
|
|
key={index}
|
|
className={`rounded-full border px-4 py-2 text-xs font-semibold ${
|
|
index === 0
|
|
? "border-[#d8e8fb] bg-[#f0f9ff] text-[#118af4]"
|
|
: "border-transparent bg-[#f7f8fb] text-[#4b5565]"
|
|
}`}
|
|
>
|
|
{badge}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="order-1 flex items-center justify-center md:order-2">
|
|
<div className="relative flex aspect-[4/3] w-full max-w-[420px] items-center justify-center overflow-hidden rounded-3xl border border-[#dfe9f8] bg-gradient-to-br from-[#f5f9ff] via-white to-[#eaf3ff] shadow-inner">
|
|
<img
|
|
src={item.image}
|
|
alt={item.title}
|
|
className="h-full w-full object-cover"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
interval={6500}
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
|
|
|