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.
111 lines
3.9 KiB
111 lines
3.9 KiB
1 month ago
|
import React from "react";
|
||
|
|
|
||
|
|
interface AboutMarkdownSectionProps {
|
||
|
|
content: string;
|
||
|
|
title?: string;
|
||
|
|
ctaHref?: string;
|
||
|
|
ctaLabel?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function AboutMarkdownSection({
|
||
|
|
content,
|
||
|
|
title = "关于衡感智能",
|
||
|
|
ctaHref,
|
||
|
|
ctaLabel,
|
||
|
|
}: AboutMarkdownSectionProps) {
|
||
|
|
if (!content) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
const rawParagraphs = content
|
||
|
|
.split(/\r?\n+/)
|
||
|
|
.map((paragraph) => paragraph.trim())
|
||
|
|
.filter(Boolean);
|
||
|
|
|
||
|
|
const paragraphs = rawParagraphs.filter(
|
||
|
|
(paragraph, index) => rawParagraphs.indexOf(paragraph) === index,
|
||
|
|
);
|
||
|
|
|
||
|
|
if (paragraphs.length === 0) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
const [headline, ...rest] = paragraphs;
|
||
|
|
const coreIndex = rest.findIndex((item) => item.startsWith("核心定位"));
|
||
|
|
const coreLine =
|
||
|
|
coreIndex >= 0 ? rest.splice(coreIndex, 1).at(0) ?? undefined : undefined;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className="relative overflow-hidden bg-[#0b1629] py-16 text-white md:py-20">
|
||
|
|
<div className="absolute inset-0">
|
||
|
|
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(17,138,244,0.3),transparent_65%)]" />
|
||
|
|
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-[220px] bg-gradient-to-t from-[#0f1f39] via-transparent to-transparent opacity-60" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="relative mx-auto w-full max-w-5xl px-4 md:px-6">
|
||
|
|
<div className="max-w-3xl">
|
||
|
|
<p className="text-xs font-semibold uppercase tracking-[0.46em] text-[#7bc2ff]">
|
||
|
|
{title}
|
||
|
|
</p>
|
||
|
|
<h2 className="mt-4 text-3xl font-semibold leading-tight md:text-[38px] text-white">
|
||
|
|
{headline}
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-8 grid gap-6 md:grid-cols-[1.1fr_0.9fr] md:items-start md:gap-10">
|
||
|
|
<div className="space-y-5 text-sm leading-relaxed text-[#c6dcff] md:text-base md:leading-loose">
|
||
|
|
{rest.map((paragraph, index) => (
|
||
|
|
<p key={index}>{paragraph}</p>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{coreLine && (
|
||
|
|
<div className="rounded-3xl border border-[#163156] bg-[linear-gradient(135deg,rgba(17,138,244,0.22),rgba(8,18,32,0.65))] p-6 shadow-[0_24px_60px_rgba(12,30,58,0.35)]">
|
||
|
|
<span className="inline-flex items-center rounded-full bg-[#114075]/60 px-3.5 py-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-[#7bc2ff]">
|
||
|
|
Vision
|
||
|
|
</span>
|
||
|
|
<p className="mt-4 text-lg font-medium leading-relaxed text-white md:text-xl">
|
||
|
|
{coreLine}
|
||
|
|
</p>
|
||
|
|
<p className="mt-3 text-sm text-[#aecbfd]">
|
||
|
|
通过 AI 感知、智能硬件与数字孪生协同，让城市结构具备持续演化的自我防御能力，构建一体化的安全决策闭环。
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{ctaHref && (
|
||
|
|
<div className="mt-10 flex flex-wrap items-center gap-4">
|
||
|
|
<a
|
||
|
|
href={ctaHref}
|
||
|
|
download
|
||
|
|
className="inline-flex items-center gap-2 rounded-full border border-[#5aa9ff] bg-[#114075] px-6 py-2 text-sm font-medium tracking-[0.16em] text-white transition-colors hover:bg-[#0c3260] hover:text-white"
|
||
|
|
>
|
||
|
|
<span>{ctaLabel ?? "下载了解方案"}</span>
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
className="h-4 w-4"
|
||
|
|
fill="none"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
stroke="currentColor"
|
||
|
|
strokeWidth="1.5"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
d="M12 4v12m0 0l-4-4m4 4 4-4M4 20h16"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
<span className="text-xs uppercase tracking-[0.28em] text-[#7bc2ff]/80">
|
||
|
|
AI City Safety Initiative
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
|