feat(cms): 品牌叙事与结构性文案全站 CMS 化并补齐信任证据阶段 0
- 品牌叙事内核(价值主张/定位/承诺/三支柱/语气)下沉 site-config,经 SiteConfigProvider 注入全站 - 新增 page-copy 内容模型承载结构性文案(章节标题/眉标/描述/CTA/空状态),覆盖首页+服务/方案/产品/案例/新闻列表页,「CMS 优先 + 硬编码兜底」不白屏 - 首页「首批客户共创计划」板块(earlyAccessTitle/CtaLabel/Status 驱动)替代单行标签,如实呈现共创/内测/授权公开三档状态 - 关于页资质区数据空时如实展示「建设中」空态 - 零编造:不虚构客户/数据/资质
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user