feat(cms): 品牌叙事与结构性文案全站 CMS 化并补齐信任证据阶段 0

- 品牌叙事内核(价值主张/定位/承诺/三支柱/语气)下沉 site-config,经 SiteConfigProvider 注入全站
- 新增 page-copy 内容模型承载结构性文案(章节标题/眉标/描述/CTA/空状态),覆盖首页+服务/方案/产品/案例/新闻列表页,「CMS 优先 + 硬编码兜底」不白屏
- 首页「首批客户共创计划」板块(earlyAccessTitle/CtaLabel/Status 驱动)替代单行标签,如实呈现共创/内测/授权公开三档状态
- 关于页资质区数据空时如实展示「建设中」空态
- 零编造:不虚构客户/数据/资质
This commit is contained in:
2026-08-20 09:25:12 +08:00
parent 56be17b0ba
commit 337e1e60c0
34 changed files with 848 additions and 152 deletions
@@ -69,7 +69,16 @@ const SERVICE_MODES = [
},
];
function HeroSection() {
type PageCopy = Record<string, unknown>;
function HeroSection({ pageCopy }: { pageCopy?: PageCopy | null }) {
const heroTitle1 = (pageCopy?.servicesHeroTitle1 as string) || '从规划到运维';
const heroTitle2 = (pageCopy?.servicesHeroTitle2 as string) || '全程陪伴';
const heroDescriptionLines = ((pageCopy?.servicesHeroDescription as string) ||
'不只是技术供应商,更是您数字化转型的同行者。\n从第一次沟通到系统稳定运行,我们始终在您身边。').split('\n');
const ctaPrimary = (pageCopy?.servicesCtaPrimary as string) || '聊聊您的需求';
const ctaSecondary = (pageCopy?.servicesCtaSecondary as string) || '查看产品矩阵';
return (
<section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
@@ -80,11 +89,11 @@ function HeroSection() {
transition={{ duration: 1, delay: 0.2, ease: EASE_OUT }}
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.92] tracking-tightest mb-10 sm:mb-12 md:mb-16"
>
<div className="block">从规划到运维</div>
<div className="block">{heroTitle1}</div>
<div className="block mt-4 sm:mt-6">
<span className="relative inline-block">
<span className="relative text-brand font-black">
全程陪伴
{heroTitle2}
<motion.span
className="absolute -bottom-2 left-0 w-full h-[3px] bg-brand"
style={{ transformOrigin: 'left' }}
@@ -103,9 +112,12 @@ function HeroSection() {
transition={{ duration: 0.8, delay: 0.5, ease: EASE_OUT }}
className="text-lg md:text-xl text-text-secondary max-w-2xl leading-relaxed mb-12 sm:mb-16"
>
不只是技术供应商,更是您数字化转型的同行者。
<br className="hidden sm:block" />
从第一次沟通到系统稳定运行,我们始终在您身边。
{heroDescriptionLines.map((line, i) => (
<span key={i}>
{i > 0 && <br className="hidden sm:block" />}
{line}
</span>
))}
</motion.p>
<motion.div
@@ -118,14 +130,14 @@ function HeroSection() {
href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
>
聊聊您的需求
{ctaPrimary}
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</a>
<a
href="/products"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
>
查看产品矩阵
{ctaSecondary}
</a>
</motion.div>
@@ -160,15 +172,17 @@ function HeroSection() {
);
}
function ServicesGridSection({ services }: { services?: Service[] }) {
function ServicesGridSection({ services, pageCopy }: { services?: Service[]; pageCopy?: PageCopy | null }) {
const displayServices = services?.length ? mapServicesToCards(services) : [];
const gridTitle = (pageCopy?.servicesGridTitle as string) || '四大核心服务,覆盖数字化全链路';
const emptyState = (pageCopy?.servicesEmptyState as string) || '暂无服务数据';
if (displayServices.length === 0) {
return (
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-secondary">
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 text-center">
<p className="text-text-muted text-lg">暂无服务数据</p>
<p className="text-text-muted text-lg">{emptyState}</p>
</div>
</section>
);
@@ -187,7 +201,7 @@ function ServicesGridSection({ services }: { services?: Service[] }) {
className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
>
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
四大核心服务,<br className="sm:hidden" />覆盖数字化全链路
{gridTitle}
</h2>
</motion.div>
@@ -321,7 +335,11 @@ function ProcessModesSection() {
);
}
function CTASection() {
function CTASection({ pageCopy }: { pageCopy?: PageCopy | null }) {
const ctaTitle = (pageCopy?.servicesCtaTitle as string) || '准备好开始了吗?';
const ctaDescriptionLines = ((pageCopy?.servicesCtaDescription as string) ||
'无论是一个明确的项目,还是一个模糊的想法,我们都愿意坐下来和您一起理清楚。\n首次咨询免费,没有任何销售压力。').split('\n');
return (
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-secondary">
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
@@ -335,12 +353,15 @@ function CTASection() {
className="max-w-3xl"
>
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95] mb-8">
准备好开始了吗?
{ctaTitle}
</h2>
<p className="text-lg text-text-secondary leading-relaxed mb-10">
无论是一个明确的项目,还是一个模糊的想法,我们都愿意坐下来和您一起理清楚。
<br className="hidden sm:block" />
首次咨询免费,没有任何销售压力。
{ctaDescriptionLines.map((line, i) => (
<span key={i}>
{i > 0 && <br className="hidden sm:block" />}
{line}
</span>
))}
</p>
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
<a
@@ -363,13 +384,13 @@ function CTASection() {
);
}
export default function ServicesContentV3({ services }: { services?: Service[] }) {
export default function ServicesContentV3({ services, pageCopy }: { services?: Service[]; pageCopy?: PageCopy | null }) {
return (
<main className="bg-white text-ink">
<HeroSection />
<ServicesGridSection services={services} />
<HeroSection pageCopy={pageCopy} />
<ServicesGridSection services={services} pageCopy={pageCopy} />
<ProcessModesSection />
<CTASection />
<CTASection pageCopy={pageCopy} />
</main>
);
}