feat(ui): 营销站 UI/UE/UX 治理 P0→P3 收官
复评（impeccable critique）全部 Priority Issues 与 Minor Observations 落地： - P0 数字口径：MetricsBasisNote 单一真源 + metrics-basis.test fs 防线，接入 products/solutions/services/home/about；纯渲染端加角注，不动 DB/seed 值 - P1 转化断头路：敬请期待态 + 404 语境出口 + services 空态双出口 - P1 首页并卡：TrustSection 早鸟横幅并入 CasesSection 单张深色共创卡 - P2 CTA 治理：CONSULT_CTA_ALLOWLIST 白名单 + 逐字符扫描器，/contact CTA 全归一 - P3 polish：footer 补 服务/公司列、contact 死三元/空槽/toast、GlobalErrorTracker 幂等日志 - 文档同源：PRODUCT/CONTEXT 动效带统一 180–280ms；DESIGN.md 立 The 10px Floor； font-floor.test 守卫禁止再引入 <10px（保留 10/11px 有意 Bain 微标签） Gates: type-check 0 · jest 1581/132 · lint 0e/126w · contrast 7/7 · headings 10/10
This commit is contained in:
@@ -4,6 +4,8 @@ import { motion } from 'framer-motion';
|
||||
import { ArrowUpRight, Factory, ShoppingCart, Heart, GraduationCap, Shield, Truck, type LucideIcon } from 'lucide-react';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { CTAButton } from '@/components/ui/cta-button';
|
||||
import { MetricsBasisNote } from '@/components/ui/metrics-basis-note';
|
||||
import { CTA_LABELS, canonicalCtaLabel } from '@/lib/constants/cta-labels';
|
||||
import { type Solution } from '@/lib/constants/solutions';
|
||||
import type { Product } from '@/lib/constants/products';
|
||||
|
||||
@@ -25,18 +27,18 @@ function HeroSection({ pageCopy }: { pageCopy?: PageCopy | null }) {
|
||||
const heroTitle2 = (pageCopy?.solutionsHeroTitle2 as string) || '解决方案';
|
||||
const heroDescriptionLines = ((pageCopy?.solutionsHeroDescription as string) ||
|
||||
'端到端交付可量化的业务成果。\n基于自研产品矩阵，为制造、零售、教育、医疗、金融、物流六大行业沉淀最佳实践。').split('\n');
|
||||
const ctaPrimary = (pageCopy?.solutionsCtaPrimary as string) || '立即咨询';
|
||||
const ctaPrimary = canonicalCtaLabel(pageCopy?.solutionsCtaPrimary as string) || '预约咨询';
|
||||
const ctaSecondary = (pageCopy?.solutionsCtaSecondary as string) || '浏览产品';
|
||||
|
||||
return (
|
||||
<section className="relative min-h-[85vh] flex items-center overflow-hidden bg-bg-primary">
|
||||
<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">
|
||||
<section className="relative overflow-hidden bg-bg-primary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-16 sm:py-20 lg:py-28">
|
||||
<div className="max-w-4xl">
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, 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"
|
||||
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-black text-ink leading-[0.95] tracking-tightest mb-8 sm:mb-10 md:mb-12"
|
||||
>
|
||||
<div className="block">{heroTitle1}</div>
|
||||
<div className="block mt-4 sm:mt-6">
|
||||
@@ -59,7 +61,7 @@ function HeroSection({ pageCopy }: { pageCopy?: PageCopy | null }) {
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, 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"
|
||||
className="text-lg md:text-xl text-text-secondary max-w-2xl leading-relaxed mb-10 sm:mb-12"
|
||||
>
|
||||
{heroDescriptionLines.map((line, i) => (
|
||||
<span key={i}>
|
||||
@@ -82,32 +84,6 @@ function HeroSection({ pageCopy }: { pageCopy?: PageCopy | null }) {
|
||||
{ctaSecondary}
|
||||
</CTAButton>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, delay: 0.9, ease: EASE_OUT }}
|
||||
className="grid grid-cols-3 gap-8 mt-20 pt-12 border-t border-border-primary max-w-xl"
|
||||
>
|
||||
<div>
|
||||
<div className="text-3xl sm:text-4xl font-black text-ink tracking-tight leading-none mb-2">
|
||||
6<span className="text-brand-ink">大</span>
|
||||
</div>
|
||||
<div className="text-sm text-text-muted">行业覆盖</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl sm:text-4xl font-black text-ink tracking-tight leading-none mb-2">
|
||||
端到<span className="text-brand-ink">端</span>
|
||||
</div>
|
||||
<div className="text-sm text-text-muted">交付模式</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl sm:text-4xl font-black text-ink tracking-tight leading-none mb-2">
|
||||
定制<span className="text-brand-ink">化</span>
|
||||
</div>
|
||||
<div className="text-sm text-text-muted">方案特点</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -158,6 +134,9 @@ function SolutionCard({ solution, index, products, featured = false }: { solutio
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{solution.outcomes && solution.outcomes.length > 0 && (
|
||||
<MetricsBasisNote className="-mt-2 mb-4" />
|
||||
)}
|
||||
|
||||
<div className="pt-4 border-t border-border-primary">
|
||||
<div className="text-xs text-text-muted mb-2">推荐产品组合</div>
|
||||
@@ -235,7 +214,7 @@ function CTASection({ pageCopy }: { pageCopy?: PageCopy | null }) {
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
|
||||
<CTAButton href="/contact" dataTestId="solutions-bottom-primary" className="min-h-[52px]">
|
||||
获取定制方案
|
||||
{CTA_LABELS.consult}
|
||||
</CTAButton>
|
||||
<CTAButton href="/products" variant="secondary" dataTestId="solutions-bottom-secondary" className="min-h-[52px]">
|
||||
浏览产品
|
||||
@@ -251,10 +230,10 @@ export default function SolutionsContentV3({ solutions: solutionsProp, products,
|
||||
const solutions = solutionsProp ?? [];
|
||||
|
||||
return (
|
||||
<main className="bg-bg-primary text-ink">
|
||||
<div className="bg-bg-primary text-ink">
|
||||
<HeroSection pageCopy={pageCopy} />
|
||||
<SolutionsGridSection solutions={solutions} products={products} pageCopy={pageCopy} />
|
||||
<CTASection pageCopy={pageCopy} />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user