feat(design): Vibe design optimization — Hero, Bento grids, trust layer, narrative

升级全站体验：首页 Hero 改为产品视觉 + 单一 CTA 转化布局；产品矩阵/服务/方案改为 Bento 非对称网格（ERP 2x2 大卡 + BI 1x2）；补齐信任层（可验证信号 + 来源标注）与「问题→方法→结果」章节式叙事；新增 hero-product-visual 与 bento-grid 可复用组件；统一动效与品牌视觉资产。新增对应单测、UJ-11 用户旅程测试并更新视觉回归基线快照。
2026-08-19 14:43:27 +08:00
parent f3f4e78c51
commit 713186d552
35 changed files with 1576 additions and 79 deletions
@@ -3,8 +3,7 @@
 import { motion } from 'framer-motion';
 import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
 import { Button } from '@/components/ui/button';
-import { ArrowRight, Factory, ShoppingCart, Heart, GraduationCap, Lightbulb, Settings, Users, TrendingUp, Package, BookOpen, MessageSquare, Calendar, Smartphone, Route, Shield, Truck } from 'lucide-react';
-import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
+import { ArrowRight, Factory, ShoppingCart, Heart, GraduationCap, Lightbulb, Settings, Users, TrendingUp, Package, BookOpen, MessageSquare, Calendar, Smartphone, Route, Shield, Truck } from 'lucide-react';import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
 import type { Solution } from '@/lib/constants/solutions';
 import type { Product } from '@/lib/constants/products';

@@ -341,6 +340,128 @@ interface CTASectionProps {
  solution: Solution;
 }

+// ===== L3 信任层：客户案例（有数据才渲染，无数据不显示，不虚构）=====
+interface CaseStudiesSectionProps {
+  caseStudies: Solution['caseStudies'];
+}
+
+function CaseStudiesSection({ caseStudies }: CaseStudiesSectionProps) {
+  if (!caseStudies || caseStudies.length === 0) return null;
+
+  return (
+    <section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-white">
+      <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">
+        <ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20 md:mb-20">
+          <SectionLabel className="justify-center">
+            <div className="flex items-center gap-5">
+              <div className="w-14 h-px bg-brand" />
+              <span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
+                客户案例
+              </span>
+              <div className="w-14 h-px bg-brand" />
+            </div>
+          </SectionLabel>
+          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
+            同行业落地案例
+          </h2>
+        </ScrollReveal>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border-primary">
+          <StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
+            {caseStudies.map((study) => (
+              <div
+                key={study.client}
+                className="group relative block overflow-hidden bg-white transition-all duration-500 hover:bg-bg-secondary"
+              >
+                <div className="aspect-[4/3] bg-gradient-to-br from-bg-secondary to-bg-tertiary relative overflow-hidden">
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <span className="text-6xl font-bold text-text-muted/10">
+                      {study.client.charAt(0)}
+                    </span>
+                  </div>
+                  <div className="absolute top-5 left-5">
+                    <span className="px-3 py-1.5 text-xs font-bold text-brand bg-brand-soft/80 backdrop-blur-sm">
+                      {study.industry}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="p-8">
+                  <h3 className="text-xl font-bold text-ink mb-3 group-hover:translate-x-2 transition-transform duration-500">
+                    {study.client}
+                  </h3>
+                  <p className="text-text-secondary text-sm leading-relaxed mb-6">
+                    {study.challenge}
+                  </p>
+                  <div className="pt-6 border-t border-border-primary">
+                    <div className="text-2xl font-bold text-brand mb-1">{study.result}</div>
+                    <div className="text-xs text-text-muted">核心成果</div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </StaggerReveal>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// ===== L3 信任层：资质认证（有数据才渲染，无数据不显示）=====
+interface CertificationsSectionProps {
+  certifications: Solution['certifications'];
+}
+
+function CertificationsSection({ certifications }: CertificationsSectionProps) {
+  if (!certifications || certifications.length === 0) return null;
+
+  return (
+    <section className="relative py-16 sm:py-20 md:py-24 lg:py-32 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">
+        <ScrollReveal className="text-center max-w-3xl mx-auto mb-16">
+          <SectionLabel className="justify-center">
+            <div className="flex items-center gap-5">
+              <div className="w-14 h-px bg-brand" />
+              <span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
+                资质认证
+              </span>
+              <div className="w-14 h-px bg-brand" />
+            </div>
+          </SectionLabel>
+          <h2 className="text-2xl md:text-3xl font-bold text-ink tracking-tight">
+            资质认证
+          </h2>
+        </ScrollReveal>
+
+        <div className="flex flex-wrap justify-center gap-px bg-border-primary">
+          <StaggerReveal staggerDelay={0.08} delayChildren={0.05}>
+            {certifications.map((cert, idx) => (
+              <div
+                key={idx}
+                className="group flex items-center gap-4 px-8 py-5 bg-white hover:bg-bg-secondary transition-all duration-500"
+              >
+                <div className="w-12 h-12 rounded-xl bg-brand-soft flex items-center justify-center text-brand">
+                  <Shield className="w-6 h-6" />
+                </div>
+                <div>
+                  <div className="text-ink font-bold">{cert.name}</div>
+                  <div className="text-sm text-text-muted">{cert.issuer}</div>
+                </div>
+              </div>
+            ))}
+          </StaggerReveal>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 function CTASection({ solution }: CTASectionProps) {
  return (
    <section className="relative py-36 lg:py-44 overflow-hidden bg-bg-secondary">
@@ -398,6 +519,8 @@ export default function SolutionDetailContentV3({ solution, products = [] }: Sol
      <SolutionsSection solutions={solution.solutions} />
      <ValuePropositionSection valueProposition={solution.valueProposition} />
      <SuiteCombinationSection suiteCombination={solution.suiteCombination} products={products} />
+      <CaseStudiesSection caseStudies={solution.caseStudies} />
+      <CertificationsSection certifications={solution.certifications} />
      <CTASection solution={solution} />
    </main>
  );