From 8def29630107e80db13630b6b5c2f6b1a209390c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Tue, 7 Jul 2026 06:54:10 +0800 Subject: [PATCH] =?UTF-8?q?chore(cleanup):=20=E6=B8=85=E7=90=86=E5=BA=9F?= =?UTF-8?q?=E5=BC=83=E7=BB=84=E4=BB=B6=E4=B8=8E=E6=97=A7=E7=89=88=E6=9C=AC?= =?UTF-8?q?=E5=BD=92=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 删除 detail-v2 旧版叙事组件 - 删除 narrative 旧版区块组件 - 删除 theme-toggle 主题切换与 theme-context 上下文 - 删除 detail-data-proof/service-value/solution-value 旧版组件 - 删除 home-content-v2/v3 旧版首页 - 归档旧版营销页面内容至 _archive 目录 --- .../(marketing)/_archive/home-content-v10.tsx | 1193 +++++++++++++++++ .../{ => _archive}/home-content-v2.tsx | 0 .../{ => _archive}/home-content-v3.tsx | 38 +- .../(marketing)/_archive/home-content-v4.tsx | 1044 +++++++++++++++ .../(marketing)/_archive/home-content-v5.tsx | 599 +++++++++ .../(marketing)/_archive/home-content-v6.tsx | 497 +++++++ .../(marketing)/_archive/home-content-v7.tsx | 767 +++++++++++ .../(marketing)/_archive/home-content-v8.tsx | 964 +++++++++++++ .../(marketing)/_archive/home-content-v9.tsx | 1117 +++++++++++++++ src/components/detail-v2/brand-elements.tsx | 188 --- .../detail-v2/detail-cta-section-v2.tsx | 98 -- src/components/detail-v2/detail-hero-v2.tsx | 182 --- src/components/detail-v2/detail-hero-v3.tsx | 318 ----- .../detail-v2/detail-product-value-v2.tsx | 171 --- .../detail-v2/detail-product-value-v3.tsx | 435 ------ .../detail-v2/detail-trust-section-v2.tsx | 180 --- .../detail-v2/list-page-hero-v3.tsx | 166 --- .../detail-v2/micro-interactions.tsx | 139 -- src/components/detail-v2/product-card-v3.tsx | 87 -- src/components/detail-v2/service-value-v3.tsx | 191 --- .../detail-v2/solution-service-card-v3.tsx | 163 --- .../detail-v2/solution-value-v3.tsx | 223 --- src/components/detail/detail-data-proof.tsx | 35 - .../detail/detail-service-value.tsx | 128 -- .../detail/detail-solution-value.tsx | 158 --- .../sections/narrative/NarrativeCTA.tsx | 122 -- .../sections/narrative/NarrativeHero.tsx | 169 --- .../sections/narrative/NarrativeTrust.tsx | 97 -- .../sections/narrative/NarrativeValue.tsx | 117 -- src/components/sections/narrative/index.ts | 8 - src/components/ui/theme-toggle.tsx | 73 - src/contexts/theme-context.test.tsx | 70 - src/contexts/theme-context.tsx | 108 -- 33 files changed, 6200 insertions(+), 3645 deletions(-) create mode 100644 src/app/(marketing)/_archive/home-content-v10.tsx rename src/app/(marketing)/{ => _archive}/home-content-v2.tsx (100%) rename src/app/(marketing)/{ => _archive}/home-content-v3.tsx (90%) create mode 100644 src/app/(marketing)/_archive/home-content-v4.tsx create mode 100644 src/app/(marketing)/_archive/home-content-v5.tsx create mode 100644 src/app/(marketing)/_archive/home-content-v6.tsx create mode 100644 src/app/(marketing)/_archive/home-content-v7.tsx create mode 100644 src/app/(marketing)/_archive/home-content-v8.tsx create mode 100644 src/app/(marketing)/_archive/home-content-v9.tsx delete mode 100644 src/components/detail-v2/brand-elements.tsx delete mode 100644 src/components/detail-v2/detail-cta-section-v2.tsx delete mode 100644 src/components/detail-v2/detail-hero-v2.tsx delete mode 100644 src/components/detail-v2/detail-hero-v3.tsx delete mode 100644 src/components/detail-v2/detail-product-value-v2.tsx delete mode 100644 src/components/detail-v2/detail-product-value-v3.tsx delete mode 100644 src/components/detail-v2/detail-trust-section-v2.tsx delete mode 100644 src/components/detail-v2/list-page-hero-v3.tsx delete mode 100644 src/components/detail-v2/micro-interactions.tsx delete mode 100644 src/components/detail-v2/product-card-v3.tsx delete mode 100644 src/components/detail-v2/service-value-v3.tsx delete mode 100644 src/components/detail-v2/solution-service-card-v3.tsx delete mode 100644 src/components/detail-v2/solution-value-v3.tsx delete mode 100644 src/components/detail/detail-data-proof.tsx delete mode 100644 src/components/detail/detail-service-value.tsx delete mode 100644 src/components/detail/detail-solution-value.tsx delete mode 100644 src/components/sections/narrative/NarrativeCTA.tsx delete mode 100644 src/components/sections/narrative/NarrativeHero.tsx delete mode 100644 src/components/sections/narrative/NarrativeTrust.tsx delete mode 100644 src/components/sections/narrative/NarrativeValue.tsx delete mode 100644 src/components/sections/narrative/index.ts delete mode 100644 src/components/ui/theme-toggle.tsx delete mode 100644 src/contexts/theme-context.test.tsx delete mode 100644 src/contexts/theme-context.tsx diff --git a/src/app/(marketing)/_archive/home-content-v10.tsx b/src/app/(marketing)/_archive/home-content-v10.tsx new file mode 100644 index 0000000..386dbb9 --- /dev/null +++ b/src/app/(marketing)/_archive/home-content-v10.tsx @@ -0,0 +1,1193 @@ +'use client'; + +import { useRef, useState, useEffect } from 'react'; +import { motion, useScroll, useTransform, useInView } from 'framer-motion'; +import { StaticLink } from '@/components/ui/static-link'; +import { + ArrowRight, ArrowUpRight, ChevronDown, + Target, Briefcase, Cpu, Brain, + BarChart3, + Building2, Factory, ShoppingBag, Heart, + GraduationCap, Globe2, + Quote, CheckCircle2, + Sparkles, Zap, TrendingUp, Award, +} from 'lucide-react'; +import { useReducedMotion } from '@/hooks/use-reduced-motion'; + +const INK = '#0A0E14'; +const INK_LIGHT = '#0F1419'; +const INK_LIGHTER = '#151B23'; + +const CINNABAR = '#C41E3A'; +const CINNABAR_SOFT = 'rgba(196, 30, 58, 0.12)'; + +const BLUE = '#3B82F6'; +const BLUE_SOFT = 'rgba(59, 130, 246, 0.12)'; + +const TEAL = '#14B8A6'; +const TEAL_SOFT = 'rgba(20, 184, 166, 0.12)'; + +const AMBER = '#F59E0B'; +const AMBER_SOFT = 'rgba(245, 158, 11, 0.12)'; + +const EASE_OUT = [0.22, 1, 0.36, 1] as const; +const EASE_SPRING = { type: 'spring', stiffness: 300, damping: 30 } as const; + +const CONTAINER = 'max-w-[1360px] mx-auto px-6 lg:px-10'; + +const SERVICES = [ + { + number: '01', + title: '战略咨询', + subtitle: 'Strategy Consulting', + desc: '数字化转型战略规划与落地路径设计，让技术投资真正驱动业务增长。从愿景制定到执行落地，陪伴企业穿越转型周期。', + href: '/services/consulting', + icon: , + color: CINNABAR, + softColor: CINNABAR_SOFT, + highlights: ['数字化成熟度评估', '转型路线图设计', '组织变革管理', '技术选型顾问'], + metrics: [ + { value: '200+', label: '战略项目' }, + { value: '95%', label: '落地成功率' }, + ], + }, + { + number: '02', + title: '企业软件', + subtitle: 'Enterprise Software', + desc: 'ERP、CRM、BI 等核心系统的评估、实施与定制化开发。基于行业最佳实践，打造适配企业实际的数字化底座。', + href: '/products', + icon: , + color: BLUE, + softColor: BLUE_SOFT, + highlights: ['ERP 实施与优化', 'CRM 客户关系管理', 'BI 商业智能', '低代码平台'], + metrics: [ + { value: '300+', label: '系统实施' }, + { value: '85%', label: '准时交付' }, + ], + }, + { + number: '03', + title: '技术服务', + subtitle: 'Technology Services', + desc: '系统集成、数据中台、云原生架构设计与技术外包服务。以工程化能力保障系统的稳定性、可扩展性与持续迭代。', + href: '/services', + icon: , + color: TEAL, + softColor: TEAL_SOFT, + highlights: ['系统集成与架构', '数据中台建设', '云原生迁移', '研发效能提升'], + metrics: [ + { value: '500+', label: '技术项目' }, + { value: '99.9%', label: '系统可用性' }, + ], + }, + { + number: '04', + title: 'AI 赋能', + subtitle: 'AI Empowerment', + desc: 'AI 成熟度评估、场景落地与大模型应用开发。帮助企业找到 AI 与业务的最佳结合点，实现智能化升级。', + href: '/services/ai', + icon: , + color: AMBER, + softColor: AMBER_SOFT, + highlights: ['AI 战略规划', '大模型应用开发', '智能流程自动化', '数据治理'], + metrics: [ + { value: '50+', label: 'AI 项目' }, + { value: '3x', label: '效率提升' }, + ], + }, +]; + +const INDUSTRIES = [ + { icon: , name: '智能制造', desc: '工业4.0、智能工厂、供应链数字化', count: '120+', color: CINNABAR }, + { icon: , name: '贸易零售', desc: '全渠道零售、会员体系、数字营销', count: '80+', color: BLUE }, + { icon: , name: '医疗健康', desc: '医院信息化、医疗数据合规、智慧医疗', count: '60+', color: TEAL }, + { icon: , name: '教育科技', desc: '在线教育、学习管理、教育数字化', count: '50+', color: AMBER }, + { icon: , name: '金融服务', desc: '金融科技、风控合规、数据中台', count: '40+', color: CINNABAR }, + { icon: , name: '跨境电商', desc: '独立站、跨境支付、全球化运营', count: '30+', color: BLUE }, +]; + +const STATS = [ + { value: 500, suffix: '+', label: '企业客户', sub: '累计服务' }, + { value: 12, suffix: '年', label: '行业经验', sub: '深耕积累' }, + { value: 98, suffix: '%', label: '客户满意度', sub: '持续服务' }, + { value: 200, suffix: '+', label: '专业顾问', sub: '技术专家' }, +]; + +const CASES = [ + { + industry: '智能制造', + title: '大型制造企业 ERP 全面升级项目', + challenge: '该企业原有 ERP 系统已运行 8 年，无法支撑新业务模式，数据孤岛严重，决策效率低下。', + solution: '采用分步迁移策略，以数据中台为核心，重构业务流程，实现从生产到财务的全链路数字化。', + result: '项目一次性上线成功，业务中断时间控制在 48 小时内，关键指标全面超越预期。', + metrics: [ + { value: '40%', label: '生产效率提升' }, + { value: '25%', label: '库存成本下降' }, + { value: '99.5%', label: '数据准确率' }, + ], + quote: '睿新团队不仅完成了系统升级，更帮助我们建立了数据驱动的运营体系，这是超出预期的价值。', + author: 'CTO', + company: '某上市制造企业', + color: CINNABAR, + }, + { + industry: '贸易零售', + title: '连锁零售全渠道数字化升级', + challenge: '线上线下渠道割裂，会员体系不统一，库存数据不同步，导致客户体验差、运营成本高。', + solution: '构建全渠道中台，打通会员、库存、订单、营销体系，实现线上线下一体化运营。', + result: '6 个月内完成 200+ 门店的系统切换，营收实现快速增长，会员复购率显著提升。', + metrics: [ + { value: '25%', label: '营收增长' }, + { value: '50%', label: '库存周转优化' }, + { value: '3x', label: '会员复购率' }, + ], + quote: '从咨询到落地，睿新团队展现出了超出预期的专业能力和责任心，是值得信赖的合作伙伴。', + author: 'CEO', + company: '某区域零售龙头', + color: BLUE, + }, +]; + +const INSIGHTS = [ + { + category: '研究报告', + date: '2026.06.15', + title: '2026 中国企业数字化转型趋势报告', + excerpt: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。报告共 120 页，包含 23 个行业标杆案例。', + readTime: '12 分钟', + featured: true, + }, + { + category: '行业洞察', + date: '2026.05.28', + title: 'AI 浪潮下的企业数字化升级路径', + excerpt: '探讨企业如何在 AI 时代找到最适合的技术投入方向，避免盲目跟风，实现务实落地。', + readTime: '8 分钟', + featured: false, + }, + { + category: '实践指南', + date: '2026.04.20', + title: 'ERP 选型避坑指南：从需求到落地全流程', + excerpt: '总结 200+ ERP 实施项目经验，给出完整的选型方法论与风险控制框架。', + readTime: '15 分钟', + featured: false, + }, +]; + +const APPROACH = [ + { + step: '01', + title: '诊断评估', + desc: '全面调研企业现状，识别数字化痛点与机会点，输出可执行的转型路线图。', + duration: '2-4 周', + deliverables: ['现状评估报告', '转型路线图', '优先级排序'], + icon: , + }, + { + step: '02', + title: '方案设计', + desc: '基于行业最佳实践与企业实际，定制技术架构与实施计划，确保方案可落地、可演进。', + duration: '4-6 周', + deliverables: ['技术架构设计', '实施计划', '成本收益分析'], + icon: , + }, + { + step: '03', + title: '交付落地', + desc: '以敏捷迭代方式推进项目实施，全程透明沟通，确保质量、进度与成本可控。', + duration: '3-9 月', + deliverables: ['系统上线', '知识转移', '运维手册'], + icon: , + }, + { + step: '04', + title: '持续运营', + desc: '项目交付后提供持续的技术支持与优化建议，陪伴企业数字化能力持续成长。', + duration: '长期陪伴', + deliverables: ['运维支持', '持续优化', '定期复盘'], + icon: , + }, +]; + +function useCountUp(target: number, start: boolean, duration: number = 2000) { + const [count, setCount] = useState(0); + const prefersReducedMotion = useReducedMotion(); + + useEffect(() => { + if (!start || prefersReducedMotion) { + setCount(target); + return; + } + + const startTime = performance.now(); + let animationId: number; + + const animate = (currentTime: number) => { + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); + const easeOutQuart = 1 - Math.pow(1 - progress, 4); + setCount(Math.floor(target * easeOutQuart)); + + if (progress < 1) { + animationId = requestAnimationFrame(animate); + } else { + setCount(target); + } + }; + + animationId = requestAnimationFrame(animate); + return () => cancelAnimationFrame(animationId); + }, [target, start, duration, prefersReducedMotion]); + + return count; +} + +function GrainOverlay() { + return ( +
+ ); +} + +function GridLines() { + return ( +
+
+
+ ); +} + +function DiagonalLines({ className = '' }: { className?: string }) { + return ( +
+ + + + + +
+ ); +} + +function FadeIn({ children, delay = 0, className = '', y = 40 }: { children: React.ReactNode; delay?: number; className?: string; y?: number }) { + return ( + + {children} + + ); +} + +function SectionLabel({ children, color = CINNABAR }: { children: React.ReactNode; color?: string }) { + return ( +
+
+ + {children} + +
+ ); +} + +function StatItem({ value, suffix, label, sub, start, delay }: { value: number; suffix: string; label: string; sub: string; start: boolean; delay: number }) { + const count = useCountUp(value, start); + return ( + +
+
+ {count} + {suffix} +
+
+
+
+
{label}
+
{sub}
+
+
+
+ + ); +} + +function MagneticButton({ children, href, variant = 'primary' }: { children: React.ReactNode; href: string; variant?: 'primary' | 'secondary' }) { + const ref = useRef(null); + const [position, setPosition] = useState({ x: 0, y: 0 }); + + const handleMouseMove = (e: React.MouseEvent) => { + if (!ref.current) return; + const rect = ref.current.getBoundingClientRect(); + const x = (e.clientX - rect.left - rect.width / 2) * 0.15; + const y = (e.clientY - rect.top - rect.height / 2) * 0.15; + setPosition({ x, y }); + }; + + const handleMouseLeave = () => { + setPosition({ x: 0, y: 0 }); + }; + + const baseClasses = "group relative inline-flex items-center gap-3 px-12 py-6 font-semibold text-base overflow-hidden transition-transform duration-200"; + + return ( + + {variant === 'primary' && ( +
+ )} + {children} + + + ); +} + +function HeroSection() { + const containerRef = useRef(null); + const { scrollYProgress } = useScroll({ + target: containerRef, + offset: ['start start', 'end start'], + }); + const y = useTransform(scrollYProgress, [0, 1], [0, 220]); + const opacity = useTransform(scrollYProgress, [0, 0.7], [1, 0.15]); + const gridY = useTransform(scrollYProgress, [0, 1], [0, -80]); + const scale = useTransform(scrollYProgress, [0, 1], [1, 1.05]); + + return ( +
+ + +
+ + + + +
+ +
+ +
+ + +
+ + +
+
+ + Digital Transformation Partner + + + +
以战略远见
+
+ 驱动数字化 + + + 未来 + + + +
+ + + + 睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。 + 我们以务实的方法和深度的行业洞见，帮助您构建面向未来的数字竞争力。 + + + + 预约咨询 + + 了解我们的服务 + + + +
+ + +
+
+
+
+
+ +
+
+ EST. 2014 +
+
+ 12年 +
+
深耕企业数字化服务
+
+
+ 服务企业 + 500+ +
+
+ 专业团队 + 200+ +
+
+ 行业覆盖 + 6+ +
+
+
+
+
+ +
+ + + + + Scroll to explore + + + + + +
+ ); +} + +function StatsSection() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-120px' }); + + return ( +
+ + +
+
+ +
+
+ + Proven Results +

+ 用数据说话
的专业实力 +

+

+ 十二年深耕，五百余家企业的共同选择。我们用实实在在的业务成果，赢得客户的长期信赖与持续合作。 +

+ + +
+
+ {STATS.map((stat, i) => ( + + ))} +
+
+
+
+
+ ); +} + +function ServicesSection() { + return ( +
+ + +
+
+ + Our Services +

+ 四位一体的数字化服务体系 +

+ + +

+ 从战略规划到技术落地，为企业数字化转型提供全链路专业服务，每一步都有资深专家陪伴。 +

+ +
+ +
+ ); +} + +function IndustriesSection() { + return ( +
+ + + +
+
+ + Industries +

+ 深耕六大
核心行业 +

+

+ 专注垂直领域，积累丰富的行业 Know-How，提供更贴合业务实际的解决方案。 + 每一个行业都有专属的专家团队与成熟的方法论。 +

+ + 查看全部行业方案 + + + + +
+
+ {INDUSTRIES.map((ind, i) => ( + +
+
+
+
+ + + {ind.icon} + +
+

{ind.name}

+ + {ind.count} 案例 + +
+

{ind.desc}

+
+ + ))} +
+
+
+
+
+ ); +} + +function CasesSection() { + return ( +
+ + +
+
+ + Case Studies +

+ 可衡量的业务成果 +

+ + + + 查看全部案例 + + + +
+ +
+ {CASES.map((caseItem, i) => ( + +
+
+
+
+ +
+ +
+
+ + {caseItem.industry} + + + CASE #{String(i + 1).padStart(2, '0')} + +
+ +

+ {caseItem.title} +

+ +
+
+
+
+ 挑战 +
+

{caseItem.challenge}

+
+
+
+
+ 方案 +
+

{caseItem.solution}

+
+
+
+
+ 成果 +
+

{caseItem.result}

+
+
+ +
+ +
+

+ "{caseItem.quote}" +

+

+ — {caseItem.author}，{caseItem.company} +

+
+
+
+
+ +
+
+ Key Results +
+
+ {caseItem.metrics.map((metric, j) => ( +
+ + {metric.value} + +
+
+
{metric.label}
+
+
+ ))} +
+
+
+
+ + ))} +
+
+
+ ); +} + +function ApproachSection() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-100px' }); + + return ( +
+ + +
+ + Our Approach +

+ 四步交付法，
确保每一个项目成功落地 +

+

+ 基于 500+ 项目经验沉淀的方法论体系。从诊断评估到持续运营，每一步都有清晰的目标和交付物，让数字化转型可见、可控、可衡量。 +

+ + +
+
+ +
+ {APPROACH.map((step, i) => ( + +
+
+ +
+ +
+ + {step.icon} + + + {step.step} + +
+

{step.title}

+

{step.desc}

+ +
+
+ 交付物 +
+
    + {step.deliverables.map((d, j) => ( +
  • + + {d} +
    • + ))} +
+
+ +
+ 周期：{step.duration} +
+
+ + ))} +
+
+
+
+ ); +} + +function InsightsSection() { + return ( +
+ + + +
+
+ + Insights +

+ 思想领导力 +

+ + + + 查看全部 + + + +
+ +
+ {INSIGHTS.map((insight, i) => ( + +
+
+
+ +
+
+
+ + {insight.category} + +
+ {insight.featured && ( +
+ + 精选推荐 + +
+ )} +
+ +
+
+ {insight.date} + + {insight.readTime}阅读 +
+

+ {insight.title} +

+

+ {insight.excerpt} +

+
+ + 阅读全文 + + +
+
+
+ + ))} +
+
+
+ ); +} + +function CTASection() { + return ( +
+ + +
+
+
+ +
+ +
+ +
+
+ + Let's Talk + +
+
+

+ 准备好开启您的 +
+ + 数字化转型 + + + + + 之旅了吗？ +

+

+ 与我们的专家团队交流，获取针对您业务的专属数字化建议与实施路径。 + 首次咨询完全免费，无任何商业承诺。 +

+
+ 立即预约咨询 + + 了解更多 + + +
+ +
+
+ ); +} + +export default function HomeContentV10() { + return ( +
+ + + + + + + + +
+ ); +} diff --git a/src/app/(marketing)/home-content-v2.tsx b/src/app/(marketing)/_archive/home-content-v2.tsx similarity index 100% rename from src/app/(marketing)/home-content-v2.tsx rename to src/app/(marketing)/_archive/home-content-v2.tsx diff --git a/src/app/(marketing)/home-content-v3.tsx b/src/app/(marketing)/_archive/home-content-v3.tsx similarity index 90% rename from src/app/(marketing)/home-content-v3.tsx rename to src/app/(marketing)/_archive/home-content-v3.tsx index 83dce51..9b4bcb8 100644 --- a/src/app/(marketing)/home-content-v3.tsx +++ b/src/app/(marketing)/_archive/home-content-v3.tsx @@ -59,8 +59,8 @@ const enterpriseProducts = PRODUCTS.filter(p => p.categoryId === 'enterprise'); function HomeHeroRight() { return ( -
- +
+

@@ -81,8 +81,8 @@ function HomeHeroRight() { key={item.step} className="flex items-center gap-4 p-3 rounded-lg bg-[var(--color-bg-section)]/60" > -
- {item.step} +
+ {item.step}
{item.label} @@ -109,12 +109,12 @@ function ProductMatrixPreview() { transition={{ duration: 0.6, ease: EASE }} className="mb-14" > -
- - 产品矩阵 +
+ + 产品矩阵

- 覆盖企业数字化全场景 + 覆盖企业数字化全场景

6 大自研产品互为补充，从数据智能到业务协同，每一款都经过实战验证 @@ -131,8 +131,8 @@ function ProductMatrixPreview() { transition={{ duration: 0.5, delay: idx * 0.06, ease: EASE }} > - -

+ +

{product.title}

@@ -152,7 +152,7 @@ function ProductMatrixPreview() { > 浏览完整产品矩阵 @@ -177,12 +177,12 @@ function SolutionsPreview() { transition={{ duration: 0.6, ease: EASE }} className="mb-14" > -

- - 行业方案 +
+ + 行业方案

- 深耕行业场景 + 深耕行业场景

基于自研产品矩阵，为不同行业量身定制端到端的数字化解决方案 @@ -200,11 +200,11 @@ function SolutionsPreview() { >

- + {solution.industry}
-

+

{solution.title}

@@ -219,7 +219,7 @@ function SolutionsPreview() { ) : null; })} - + + 配套服务

@@ -237,7 +237,7 @@ function SolutionsPreview() { > 查看全部行业方案 diff --git a/src/app/(marketing)/_archive/home-content-v4.tsx b/src/app/(marketing)/_archive/home-content-v4.tsx new file mode 100644 index 0000000..b224f81 --- /dev/null +++ b/src/app/(marketing)/_archive/home-content-v4.tsx @@ -0,0 +1,1044 @@ +'use client'; + +import { useState, useEffect, useRef } from 'react'; +import { motion, useScroll, useTransform } from 'framer-motion'; +import { StaticLink } from '@/components/ui/static-link'; +import { useReducedMotion } from '@/hooks/use-reduced-motion'; +import { + ArrowRight, ChevronRight, + BarChart3, Cpu, Globe, Factory, ShoppingCart, Stethoscope, + GraduationCap, Building, ArrowUpRight, +} from 'lucide-react'; + +// ============================================================ +// Design Tokens — Consulting Grade +// ============================================================ +const TOKENS = { + ink: '#0F1419', + inkLight: '#1A2332', + inkSurface: '#1E2938', + gold: '#B8944C', + goldDim: 'rgba(184,148,76,0.18)', + goldText: '#C9A84C', + red: '#C41E3A', + redHover: '#A01830', + redGlow: 'rgba(196,30,58,0.18)', + white: '#FFFFFF', + cream: '#FAF8F5', + creamDark: '#F3F0EB', + gray50: '#F8F9FA', + gray100: '#F1F3F5', + gray200: '#E9ECEF', + gray300: '#DEE2E6', + gray400: '#ADB5BD', + gray500: '#868E96', + gray600: '#495057', + gray700: '#343A40', +} as const; + +// Animation easing — natural deceleration (quint-out) +const EASE = [0.22, 1, 0.36, 1] as const; + +// ============================================================ +// Shared Tailwind utility classes for Mobile First +// ============================================================ +const SECTION_PADDING = 'py-20 md:py-36 lg:py-44'; +const CONTAINER = 'max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16'; +const TOUCH_TARGET = 'min-h-[44px] min-w-[44px]'; +const TAP_FEEDBACK = 'active:scale-[0.98] transition-transform duration-150'; + +// ============================================================ +// Data +// ============================================================ +const STRATEGIC_QUESTIONS = [ + { + question: '我们的数字化投入，是否真正带来了业务增长？', + description: '许多企业在数字化上投入巨大，却难以量化 ROI。我们帮助您建立可衡量的数字化价值评估体系，让每一分投入都可见、可追踪、可优化。', + link: '/services/consulting', + }, + { + question: '数据资产已经积累多年，但如何让它真正驱动决策？', + description: '数据是新时代的石油，但未经提炼无法使用。我们从数据治理到 AI 应用，帮助您构建从数据到洞察到行动的完整闭环。', + link: '/products', + }, + { + question: '技术团队和业务团队，如何打破沟通壁垒？', + description: '技术不懂业务痛点，业务不懂技术可能——这是数字化转型最常见的死结。我们用复合型团队和标准化方法论，架起两端的桥梁。', + link: '/solutions', + }, + { + question: '面对 AI 浪潮，我们的企业准备好了吗？', + description: 'AI 不是选择题，而是必答题。我们从 AI 成熟度评估到场景落地，帮助您找到最适合的 AI 应用路径，避免盲目跟风。', + link: '/services/ai', + }, +]; + +const CASE_STUDIES = [ + { + industry: '制造业', + title: '某大型制造企业 ERP 升级', + context: '原有系统无法支撑业务增长，数据孤岛严重，生产排程效率低下。', + impact: [{ value: '40%', label: '生产效率提升' }, { value: '60%', label: '数据准确率提升' }], + quote: '睿新团队不仅完成了系统升级，更帮助我们建立了数据驱动的运营体系。', + author: 'CTO，某上市制造企业', + image: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800&q=80', + }, + { + industry: '零售业', + title: '连锁零售全渠道数字化', + context: '线上线下数据割裂，库存管理混乱，会员体系无法统一。', + impact: [{ value: '25%', label: '营收增长' }, { value: '50%', label: '库存周转优化' }], + quote: '从咨询到落地，睿新团队展现出了超出预期的专业能力和责任心。', + author: 'CEO，某区域零售龙头', + image: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=800&q=80', + }, + { + industry: '金融业', + title: '金融机构风控平台建设', + context: '监管要求升级，传统风控手段无法满足实时性要求，合规成本高企。', + impact: [{ value: '70%', label: '风控响应提速' }, { value: '99.9%', label: '系统可用性' }], + quote: '睿新的技术方案让我们在监管检查中获得了高度评价。', + author: '风控总监，某持牌金融机构', + image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80', + }, +]; + +const INSIGHTS = [ + { + tag: '白皮书', + title: '2026 中国企业数字化转型趋势报告', + desc: '基于 500+ 企业调研数据，深度解读制造业、零售业、金融业的数字化转型路径与 ROI 分析。', + type: 'featured' as const, + image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&q=80', + }, + { + tag: '案例研究', + title: '从数据孤岛到智能决策：一家制造企业的三年数字化之路', + desc: '深度复盘某上市制造企业如何通过分阶段数字化实现 40% 效率提升。', + type: 'featured' as const, + image: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&q=80', + }, + { + tag: '观点', + title: 'AI 时代，中小企业如何避免"为了数字化而数字化"', + desc: '从投入产出比出发，讨论中小企业在 AI 浪潮中的务实策略。', + date: '2026-06-15', + }, + { + tag: '方法论', + title: '数字化转型的四个阶段：评估、规划、实施、优化', + desc: '我们总结的经过 500+ 项目验证的数字化转型方法论。', + date: '2026-06-08', + }, + { + tag: '行业洞察', + title: '制造业数字化转型的五大误区', + desc: '避开常见陷阱，让数字化投入真正转化为业务价值。', + date: '2026-05-28', + }, +]; + +const INDUSTRIES = [ + { icon: Factory, name: '制造业', count: '120+ 案例' }, + { icon: ShoppingCart, name: '零售业', count: '80+ 案例' }, + { icon: Building, name: '金融业', count: '60+ 案例' }, + { icon: Stethoscope, name: '医疗健康', count: '40+ 案例' }, + { icon: GraduationCap, name: '教育', count: '30+ 案例' }, + { icon: Globe, name: '政务', count: '50+ 案例' }, + { icon: BarChart3, name: '能源', count: '35+ 案例' }, + { icon: Cpu, name: '科技', count: '90+ 案例' }, +]; + +const TRUST_SIGNALS = [ + { number: '12', unit: '年', label: '行业深耕', desc: '核心团队平均从业经验 12 年以上' }, + { number: '500', unit: '+', label: '企业客户', desc: '覆盖制造、零售、金融、政务等多个行业' }, + { number: '98', unit: '%', label: '客户续约率', desc: '年度客户续约率行业领先' }, + { number: '150', unit: '+', label: '专业顾问', desc: '技术+业务复合型团队' }, + { number: '6', unit: '款', label: '自研产品', desc: '覆盖数据、协同、AI 等核心领域' }, + { number: '30', unit: '天', label: '平均交付周期', desc: '敏捷迭代，快速验证业务价值' }, +]; + +const PROCESS_STEPS = [ + { step: '01', title: '需求诊断', desc: '深入业务场景，精准定位痛点与机会点' }, + { step: '02', title: '方案设计', desc: '量身定制技术路径与实施路线图' }, + { step: '03', title: '敏捷交付', desc: '快速迭代、持续验证，确保方案可落地' }, + { step: '04', title: '效果评估', desc: '基于数据量化评估，确保 ROI 可衡量' }, + { step: '05', title: '长期陪跑', desc: '持续优化迭代，陪伴企业长期成长' }, +]; + +// ============================================================ +// Hooks +// ============================================================ +function useCountUp(end: number, duration = 2000, startCounting: boolean) { + const [count, setCount] = useState(0); + const frameRef = useRef(0); + + useEffect(() => { + if (!startCounting) return; + const startTime = performance.now(); + const animate = (now: number) => { + const progress = Math.min((now - startTime) / duration, 1); + // ease-out cubic + const eased = 1 - Math.pow(1 - progress, 3); + setCount(Math.floor(end * eased)); + if (progress < 1) { + frameRef.current = requestAnimationFrame(animate); + } else { + setCount(end); + } + }; + frameRef.current = requestAnimationFrame(animate); + return () => cancelAnimationFrame(frameRef.current); + }, [end, duration, startCounting]); + + return count; +} + +// ============================================================ +// Sub-components +// ============================================================ + +function SectionHeader({ label, title, highlight, desc, light = false }: { + label: string; + title: string; + highlight?: string; + desc?: string; + light?: boolean; +}) { + return ( +
+
+ {label} +
+

+ {title}{highlight && {highlight}} +

+ {desc && ( +

+ {desc} +

+ )} +
+ ); +} + +function FadeInView({ children, className = '', delay = 0 }: { + children: React.ReactNode; + className?: string; + delay?: number; +}) { + const shouldReduceMotion = useReducedMotion(); + return ( + + {children} + + ); +} + +// ============================================================ +// Module 1: Hero — Mobile First +// ============================================================ +function HeroSection() { + const shouldReduceMotion = useReducedMotion(); + const heroRef = useRef(null); + const { scrollYProgress } = useScroll({ + target: heroRef, + offset: ['start start', 'end start'], + }); + const opacity = useTransform(scrollYProgress, [0, 0.6], [1, 0]); + const scale = useTransform(scrollYProgress, [0, 0.6], [1, 0.95]); + const y = useTransform(scrollYProgress, [0, 0.6], [0, 30]); + + return ( +
+ {/* Hero Image Background */} +
+ + {/* Gradient overlays */} +
+
+
+ + {/* Grid texture overlay */} +
+ + {/* Content */} + +
+ {/* Eyebrow */} + + 企业数字化转型 + + + {/* Title — fluid clamp: 36px mobile → 88px desktop */} + + 让每一次数字化
+ 转型掷地有声 + + + {/* Subtitle */} + + 12 年深耕，为 500+ 中国企业提供从战略到落地的全链路数字化服务 + + + {/* Strategic Question */} + + 您的企业，准备好迎接下一阶段的增长了吗？ + + + {/* CTAs — touch-friendly */} + + { + e.currentTarget.style.background = TOKENS.redHover; + e.currentTarget.style.boxShadow = `0 8px 32px ${TOKENS.redGlow}`; + }} + onMouseLeave={e => { + e.currentTarget.style.background = TOKENS.red; + e.currentTarget.style.boxShadow = 'none'; + }} + > + 预约咨询 + + + + 了解我们的方法 + + + + {/* Metrics Row */} + + {[ + { value: '12', unit: '', label: '年行业深耕' }, + { value: '500', unit: '+', label: '企业客户信任' }, + { value: '98', unit: '%', label: '客户年度续约率' }, + ].map(item => ( +
+
+ {item.value} + {item.unit} +
+
+ {item.label} +
+
+ ))} + +
+ + + {/* Scroll indicator — hidden on mobile */} +
+
+ +
+ SCROLL +
+
+ ); +} + +// ============================================================ +// Module 2: Strategic Questions — Mobile First +// ============================================================ +function StrategicQuestionsSection() { + return ( +
+
+ + + + +
+ {STRATEGIC_QUESTIONS.map((item, i) => ( + +
+ {/* Left accent bar — visible on hover via CSS */} +
{ e.currentTarget.style.transform = 'scaleY(1)'; }} + /> + + {/* Question */} +
+

+ {item.question} +

+
+ + {/* Answer */} +
+

+ {item.description} +

+ { + e.currentTarget.style.color = TOKENS.red; + e.currentTarget.style.gap = '14px'; + }} + onMouseLeave={e => { + e.currentTarget.style.color = TOKENS.ink; + e.currentTarget.style.gap = '8px'; + }} + > + 了解详情 + + +
+
+ + ))} +
+
+
+ ); +} + +// ============================================================ +// Module 3: Case Studies — Mobile First +// ============================================================ +function CaseStudiesSection() { + const [activeIndex, setActiveIndex] = useState(0); + + return ( +
+
+ + + + + {/* Case Cards Grid */} +
+ {CASE_STUDIES.map((cs, i) => ( + +
setActiveIndex(i)} + onMouseEnter={() => setActiveIndex(i)} + > + {/* Top accent line */} +
+ + {/* Background image */} +
+ +
+ +
+
+ {cs.industry} +
+ +

+ {cs.title} +

+ +

+ {cs.context} +

+ + {/* Impact Numbers */} +
+ {cs.impact.map((imp, j) => ( +
+
+ {imp.value} +
+
+ {imp.label} +
+
+ ))} +
+ + {/* Quote */} +
+ “{cs.quote}” +
+ + {cs.author} + +
+
+ + ))} +
+ + {/* View all link */} + +
+ { e.currentTarget.style.color = TOKENS.white; }} + onMouseLeave={e => { e.currentTarget.style.color = 'rgba(255,255,255,0.5)'; }} + > + 查看全部案例 + + +
+ +
+
+ ); +} + +// ============================================================ +// Module 4: Insights — Mobile First +// ============================================================ +function InsightsSection() { + return ( +
+
+ + + + + {/* Featured Insights */} +
+ {INSIGHTS.filter(i => i.type === 'featured').map((insight, i) => ( + +
+ {/* Background Image */} + + {/* Gradient Overlay */} +
+ +
+
+ {insight.tag} +
+

+ {insight.title} +

+

+ {insight.desc} +

+ + 阅读全文 + + +
+
+ + ))} +
+ + {/* Secondary Insights Grid */} +
+ {INSIGHTS.filter(i => !i.type).map((insight, i) => ( + +
{ e.currentTarget.style.background = TOKENS.cream; }} + onMouseLeave={e => { e.currentTarget.style.background = TOKENS.white; }} + > +
+ {insight.tag} +
+

+ {insight.title} +

+

+ {insight.desc} +

+ {insight.date && ( +
+ {insight.date} +
+ )} +
+ + ))} +
+
+
+ ); +} + +// ============================================================ +// Module 5: Industry Selector — Mobile First +// ============================================================ +function IndustrySelectorSection() { + return ( +
+
+ + + + + +

+ 选择您的行业，查看相关案例与解决方案 +

+ + +
+ {INDUSTRIES.map((ind, i) => ( + +
{ + e.currentTarget.style.background = TOKENS.ink; + }} + onMouseLeave={e => { + e.currentTarget.style.background = TOKENS.white; + }} + > +
+ { e.currentTarget.style.color = TOKENS.white; }} + onMouseLeave={e => { e.currentTarget.style.color = TOKENS.ink; }} + /> +
{ e.currentTarget.style.color = TOKENS.white; }} + onMouseLeave={e => { e.currentTarget.style.color = TOKENS.ink; }} + > + {ind.name} +
+
{ e.currentTarget.style.color = 'rgba(255,255,255,0.4)'; }} + onMouseLeave={e => { e.currentTarget.style.color = TOKENS.gray400; }} + > + {ind.count} +
+
+
+ + ))} +
+
+
+ ); +} + +// ============================================================ +// Module 6: Trust Signals — Mobile First +// ============================================================ +function TrustSection() { + const [inView, setInView] = useState(false); + const sectionRef = useRef(null); + + useEffect(() => { + const el = sectionRef.current; + if (!el) return; + const observer = new IntersectionObserver( + ([entry]) => { if (entry?.isIntersecting) { setInView(true); observer.disconnect(); } }, + { threshold: 0.1 } + ); + observer.observe(el); + return () => observer.disconnect(); + }, []); + + return ( +
+
+ + + + +
+ {TRUST_SIGNALS.map((item, i) => ( +
+
+ {inView ? : item.number} + {item.unit} +
+
+ {item.label} +
+
+ {item.desc} +
+
+ ))} +
+
+
+ ); +} + +function CountUpNumber({ end }: { end: number }) { + const count = useCountUp(end, 2000, true); + return <>{count}; +} + +// ============================================================ +// Module 7: Process — Mobile First +// ============================================================ +function ProcessSection() { + return ( +
+
+ + + + + {/* Mobile: stacked with connecting line; Desktop: 5-column grid */} +
+ {PROCESS_STEPS.map((step, i) => ( + +
+ {/* Mobile: left border connecting line */} +
+ {/* Mobile: active dot */} +
+ +
+ {step.step} +
+

+ {step.title} +

+

+ {step.desc} +

+ + {/* Desktop: right arrow connector */} + {i < 4 && ( +
+ +
+ )} +
+ + ))} +
+
+
+ ); +} + +// ============================================================ +// Module 8: CTA — Mobile First +// ============================================================ +function CTASection() { + return ( +
+ {/* Background atmosphere */} +
+
+
+
+ +
+ +
+ Let's Talk +
+

+ 准备好让每一次数字化
+ 转型掷地有声了吗？ +

+

+ 预约一次免费咨询，让我们了解您的业务挑战，一起探讨数字化转型的最优路径。 +

+
+ { + e.currentTarget.style.background = TOKENS.redHover; + e.currentTarget.style.boxShadow = `0 8px 32px ${TOKENS.redGlow}`; + }} + onMouseLeave={e => { + e.currentTarget.style.background = TOKENS.red; + e.currentTarget.style.boxShadow = 'none'; + }} + > + 预约免费咨询 + + + { + e.currentTarget.style.borderColor = 'rgba(255,255,255,0.25)'; + e.currentTarget.style.color = 'rgba(255,255,255,0.8)'; + }} + onMouseLeave={e => { + e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)'; + e.currentTarget.style.color = 'rgba(255,255,255,0.45)'; + }} + > + 浏览产品矩阵 + +
+ +
+
+ ); +} + +// ============================================================ +// Main Export +// ============================================================ +export default function HomeContentV4() { + return ( +
+ + + + + + + + +
+ ); +} \ No newline at end of file diff --git a/src/app/(marketing)/_archive/home-content-v5.tsx b/src/app/(marketing)/_archive/home-content-v5.tsx new file mode 100644 index 0000000..27995f9 --- /dev/null +++ b/src/app/(marketing)/_archive/home-content-v5.tsx @@ -0,0 +1,599 @@ +'use client'; + +import { useRef, useEffect, useState } from 'react'; +import { motion, useScroll, useTransform, useInView } from 'framer-motion'; +import { StaticLink } from '@/components/ui/static-link'; +import { + ArrowRight, Cpu, Globe, Factory, ShoppingCart, Stethoscope, + GraduationCap, Building, Shield, Users, Brain, + ChevronRight, TrendingUp, Target, Briefcase, +} from 'lucide-react'; +import { useReducedMotion } from '@/hooks/use-reduced-motion'; + +const INK = '#0A0E14'; +const CINNABAR = '#C41E3A'; +const EASE = [0.22, 1, 0.36, 1] as const; + +const CONTAINER = 'max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16'; + +const SERVICES = [ + { icon: , title: '战略咨询', desc: '数字化转型战略规划与落地路径设计，让技术投资真正驱动业务增长', href: '/services/consulting' }, + { icon: , title: '企业软件', desc: 'ERP、CRM、BI 等核心系统的评估、实施与定制化开发', href: '/products' }, + { icon: , title: '技术服务', desc: '系统集成、数据中台、云原生架构设计与技术外包服务', href: '/services' }, + { icon: , title: 'AI 赋能', desc: 'AI 成熟度评估、场景落地与大模型应用开发', href: '/services/ai' }, +]; + +const INDUSTRIES = [ + { icon: , name: '智能制造' }, + { icon: , name: '贸易零售' }, + { icon: , name: '医疗健康' }, + { icon: , name: '教育科技' }, + { icon: , name: '金融服务' }, + { icon: , name: '政务合规' }, + { icon: , name: '跨境电商' }, + { icon: , name: '专业服务' }, +]; + +const CASES = [ + { + industry: '智能制造', + title: '大型制造企业 ERP 全面升级', + impact: [{ value: 40, suffix: '%', label: '生产效率提升' }, { value: 30, suffix: '天', label: '核心系统上线' }], + quote: '睿新团队不仅完成了系统升级，更帮助我们建立了数据驱动的运营体系。', + author: 'CTO，某上市制造企业', + }, + { + industry: '贸易零售', + title: '连锁零售全渠道数字化升级', + impact: [{ value: 25, suffix: '%', label: '营收增长' }, { value: 50, suffix: '%', label: '库存周转优化' }], + quote: '从咨询到落地，睿新团队展现出了超出预期的专业能力和责任心。', + author: 'CEO，某区域零售龙头', + }, + { + industry: '医疗健康', + title: '三甲医院数据合规与患者服务', + impact: [{ value: 100, suffix: '%', label: '合规达标' }, { value: 60, suffix: '%', label: '患者满意度提升' }], + quote: '在医疗数据合规领域，睿新的专业度在行业中非常难得。', + author: '信息科主任，某三甲医院', + }, +]; + +const STATS = [ + { value: 500, suffix: '+', label: '服务企业客户' }, + { value: 12, suffix: '年', label: '行业深耕经验' }, + { value: 98, suffix: '%', label: '客户满意度' }, + { value: 200, suffix: '+', label: '专业技术团队' }, +]; + +const INSIGHTS = [ + { tag: '白皮书', title: '2026 中国企业数字化转型趋势报告', desc: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。' }, + { tag: '行业洞察', title: 'AI 浪潮下的企业数字化升级路径', desc: '探讨企业如何在 AI 时代找到最适合的技术投入方向，避免盲目跟风。' }, + { tag: '实践指南', title: 'ERP 选型避坑指南：从需求到落地全流程', desc: '总结 200+ ERP 实施项目经验，给出完整的选型方法论与风险控制框架。' }, +]; + +function useCountUp(target: number, start: boolean, duration: number = 2000) { + const [count, setCount] = useState(0); + const prefersReducedMotion = useReducedMotion(); + + useEffect(() => { + if (!start || prefersReducedMotion) { + setCount(target); + return; + } + + const startTime = performance.now(); + let animationId: number; + + const animate = (currentTime: number) => { + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); + const easeOutQuart = 1 - Math.pow(1 - progress, 4); + setCount(Math.floor(target * easeOutQuart)); + + if (progress < 1) { + animationId = requestAnimationFrame(animate); + } else { + setCount(target); + } + }; + + animationId = requestAnimationFrame(animate); + return () => cancelAnimationFrame(animationId); + }, [target, start, duration, prefersReducedMotion]); + + return count; +} + +function StatCard({ value, suffix, label, delay = 0 }: { value: number; suffix: string; label: string; delay?: number }) { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-50px' }); + const count = useCountUp(value, isInView); + + return ( + +
+ {count}{suffix} +
+
{label}
+ + ); +} + +function HeroSection() { + const containerRef = useRef(null); + const { scrollYProgress } = useScroll({ + target: containerRef, + offset: ['start start', 'end start'], + }); + + const y = useTransform(scrollYProgress, [0, 1], [0, 100]); + const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0.2]); + + return ( +
+
+
+
+
+
+ + +
+ + + 专注企业数字化转型 12 年 + + + + 以战略远见， +
+ 驱动 数字化未来 + + + + 睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。 + 我们以务实的方法和深度的行业洞见，帮助您构建面向未来的数字竞争力。 + + + + + 预约咨询 + + + + 了解服务 + + + + + {STATS.map((stat, i) => ( + + ))} + +
+ + + + 向下滚动 + + + + +
+ ); +} + +function QuestionsSection() { + const questions = [ + { + question: '我们的数字化投入，是否真正带来了业务增长？', + description: '许多企业在数字化上投入巨大，却难以量化 ROI。我们帮助您建立可衡量的数字化价值评估体系，让每一分投入都可见、可追踪、可优化。', + href: '/services/consulting', + }, + { + question: '核心系统如何选型、落地与集成，才能支撑业务持续增长？', + description: 'ERP、BI、CRM 等核心系统的评估、实施与无缝集成，确保技术架构稳健可扩展，避免「上线即落后」的困境。', + href: '/products', + }, + ]; + + return ( +
+
+ +
+ 核心命题 +
+

+ 企业数字化的关键问题 +

+ + +
+ {questions.map((q, i) => ( + +
+
0{i + 1}
+

+ {q.question} +

+

+ {q.description} +

+
+ 深入了解 + +
+ + ))} +
+
+
+ ); +} + +function ServicesSection() { + return ( +
+
+
+ +
+ 核心服务 +
+

+ 四大服务板块 +

+ + + 从战略规划到技术落地，为企业数字化转型提供全链路专业服务 + +
+ +
+ {SERVICES.map((service, i) => ( + +
+ {service.icon} +
+

{service.title}

+

{service.desc}

+
+ 了解更多 + +
+ + ))} +
+ + +
+

覆盖八大行业

+

深耕垂直领域，提供行业专属解决方案

+
+
+ {INDUSTRIES.map((ind, i) => ( +
+ {ind.icon} + {ind.name} +
+ ))} +
+ +
+
+ ); +} + +function CasesSection() { + return ( +
+
+
+ +
+ 客户案例 +
+

+ 可衡量的业务成果 +

+ + + 查看全部案例 + + +
+ +
+ {CASES.map((caseItem, i) => ( + +
+ +
+
+ {caseItem.industry} +
+

+ {caseItem.title} +

+ +
+ {caseItem.impact.map((imp, j) => ( +
+
+ {imp.value}{imp.suffix} +
+
{imp.label}
+
+ ))} +
+ +
+ 「{caseItem.quote}」 +
+

— {caseItem.author}

+
+ + ))} +
+
+
+ ); +} + +function InsightsSection() { + return ( +
+
+
+ +
+ 行业洞察 +
+

+ 思想领导力 +

+ + + 查看全部洞察 + + +
+ +
+ {INSIGHTS.map((insight, i) => ( + +
+
+ +
+
+ + {insight.tag} + +
+
+

+ {insight.title} +

+

+ {insight.desc} +

+ + ))} +
+
+
+ ); +} + +function CTASection() { + return ( +
+
+
+
+ +
+ +

+ 准备好开启您的 + 数字化转型 + 之旅了吗？ +

+

+ 与我们的专家团队交流，获取针对您业务的专属数字化建议与实施路径。 +

+
+ + 立即咨询 + + + + 关于我们 + +
+ +
+
+ ); +} + +export default function HomeContentV5() { + return ( +
+ + + + + + +
+ ); +} diff --git a/src/app/(marketing)/_archive/home-content-v6.tsx b/src/app/(marketing)/_archive/home-content-v6.tsx new file mode 100644 index 0000000..a480ffe --- /dev/null +++ b/src/app/(marketing)/_archive/home-content-v6.tsx @@ -0,0 +1,497 @@ +'use client'; + +import { useRef, useState, useEffect } from 'react'; +import { motion, useInView } from 'framer-motion'; +import { StaticLink } from '@/components/ui/static-link'; +import { + ArrowUpRight, ChevronDown, + Target, Briefcase, Cpu, Brain, + BarChart2, + Building, Factory, ShoppingCart, Stethoscope, + GraduationCap, Globe, +} from 'lucide-react'; +import { useReducedMotion } from '@/hooks/use-reduced-motion'; + +const INK = '#0A0E14'; +const INK_LIGHT = '#0F1419'; +const CINNABAR = '#C41E3A'; +const EASE = [0.22, 1, 0.36, 1] as const; + +const CONTAINER = 'max-w-[1200px] mx-auto px-6 lg:px-8'; + +const SERVICES = [ + { + number: '01', + title: '战略咨询', + desc: '数字化转型战略规划与落地路径设计，让技术投资真正驱动业务增长。从愿景制定到执行落地，陪伴企业穿越转型周期。', + href: '/services/consulting', + icon: , + }, + { + number: '02', + title: '企业软件', + desc: 'ERP、CRM、BI 等核心系统的评估、实施与定制化开发。基于行业最佳实践，打造适配企业实际的数字化底座。', + href: '/products', + icon: , + }, + { + number: '03', + title: '技术服务', + desc: '系统集成、数据中台、云原生架构设计与技术外包服务。以工程化能力保障系统的稳定性、可扩展性与持续迭代。', + href: '/services', + icon: , + }, + { + number: '04', + title: 'AI 赋能', + desc: 'AI 成熟度评估、场景落地与大模型应用开发。帮助企业找到 AI 与业务的最佳结合点，实现智能化升级。', + href: '/services/ai', + icon: , + }, +]; + +const INDUSTRIES = [ + { icon: , name: '智能制造', desc: '工业4.0、智能工厂、供应链数字化' }, + { icon: , name: '贸易零售', desc: '全渠道零售、会员体系、数字营销' }, + { icon: , name: '医疗健康', desc: '医院信息化、医疗数据合规、智慧医疗' }, + { icon: , name: '教育科技', desc: '在线教育、学习管理、教育数字化' }, + { icon: , name: '金融服务', desc: '金融科技、风控合规、数据中台' }, + { icon: , name: '跨境电商', desc: '独立站、跨境支付、全球化运营' }, +]; + +const STATS = [ + { value: 500, suffix: '+', label: '企业客户服务' }, + { value: 12, suffix: '年', label: '行业深耕经验' }, + { value: 98, suffix: '%', label: '客户满意度' }, + { value: 200, suffix: '+', label: '专业技术顾问' }, +]; + +const INSIGHTS = [ + { + tag: '研究报告', + date: '2026.06', + title: '2026 中国企业数字化转型趋势报告', + desc: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。', + readTime: '12 分钟阅读', + }, + { + tag: '行业洞察', + date: '2026.05', + title: 'AI 浪潮下的企业数字化升级路径', + desc: '探讨企业如何在 AI 时代找到最适合的技术投入方向，避免盲目跟风，实现务实落地。', + readTime: '8 分钟阅读', + }, + { + tag: '实践指南', + date: '2026.04', + title: 'ERP 选型避坑指南：从需求到落地全流程', + desc: '总结 200+ ERP 实施项目经验，给出完整的选型方法论与风险控制框架。', + readTime: '15 分钟阅读', + }, +]; + +const APPROACH_STEPS = [ + { + step: '01', + title: '诊断评估', + desc: '全面调研企业现状，识别数字化痛点与机会点，输出可执行的转型路线图。', + }, + { + step: '02', + title: '方案设计', + desc: '基于行业最佳实践与企业实际，定制技术架构与实施计划，确保方案可落地、可演进。', + }, + { + step: '03', + title: '交付落地', + desc: '以敏捷迭代方式推进项目实施，全程透明沟通，确保质量、进度与成本可控。', + }, + { + step: '04', + title: '持续运营', + desc: '项目交付后提供持续的技术支持与优化建议，陪伴企业数字化能力持续成长。', + }, +]; + +function useCountUp(target: number, start: boolean, duration: number = 2000) { + const [count, setCount] = useState(0); + const prefersReducedMotion = useReducedMotion(); + + useEffect(() => { + if (!start || prefersReducedMotion) { + setCount(target); + return; + } + + const startTime = performance.now(); + let animationId: number; + + const animate = (currentTime: number) => { + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); + const easeOutQuart = 1 - Math.pow(1 - progress, 4); + setCount(Math.floor(target * easeOutQuart)); + + if (progress < 1) { + animationId = requestAnimationFrame(animate); + } else { + setCount(target); + } + }; + + animationId = requestAnimationFrame(animate); + return () => cancelAnimationFrame(animationId); + }, [target, start, duration, prefersReducedMotion]); + + return count; +} + +function FadeIn({ children, delay = 0, className = '' }: { children: React.ReactNode; delay?: number; className?: string }) { + return ( + + {children} + + ); +} + +function HeroSection() { + return ( +
+
+
+ + 数字化转型伙伴 + + + + 以战略远见， +
+ 驱动数字化未来 + + + + 睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。 + 我们以务实的方法和深度的行业洞见，帮助您构建面向未来的数字竞争力。 + + + + + 预约咨询 + + + + 了解我们的服务 + + + +
+
+ + + Scroll + + + + +
+ ); +} + +function StatItem({ value, suffix, label, start, delay }: { value: number; suffix: string; label: string; start: boolean; delay: number }) { + const count = useCountUp(value, start); + return ( + +
+ {count}{suffix} +
+
{label}
+ + ); +} + +function StatsSection() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-100px' }); + + return ( +
+
+
+ {STATS.map((stat, i) => ( + + ))} +
+
+
+ ); +} + +function ServicesSection() { + return ( +
+
+ +
+ 核心服务 +
+

+ 四位一体的数字化服务体系 +

+ + + +
+ ); +} + +function IndustriesSection() { + return ( +
+
+
+ +
+ 行业覆盖 +
+

+ 深耕六大行业 +

+

+ 专注垂直领域，积累丰富的行业 Know-How，提供更贴合业务实际的解决方案。 +

+ + +
+
+ {INDUSTRIES.map((ind, i) => ( + +
+
+ {ind.icon} +
+

{ind.name}

+

{ind.desc}

+
+ + ))} +
+
+
+
+
+ ); +} + +function ApproachSection() { + return ( +
+
+ +
+ 方法论 +
+

+ 四步交付法，确保每一个项目成功落地 +

+ + +
+ {APPROACH_STEPS.map((step, i) => ( + +
+
+ {step.step} +
+

{step.title}

+

{step.desc}

+
+ + ))} +
+
+
+ ); +} + +function InsightsSection() { + return ( +
+
+
+ +
+ 思想领导力 +
+

+ 最新洞察 +

+ + + + 查看全部 + + + +
+ +
+ {INSIGHTS.map((insight, i) => ( + +
+
+
+ +
+
+
+ + {insight.tag} + + {insight.date} +
+

+ {insight.title} +

+

+ {insight.desc} +

+ {insight.readTime} +
+ + ))} +
+
+
+ ); +} + +function CTASection() { + return ( +
+
+ +

+ 准备好开启您的数字化转型之旅了吗？ +

+

+ 与我们的专家团队交流，获取针对您业务的专属数字化建议与实施路径。 +

+
+ + 预约咨询 + + + + 关于我们 + + +
+ +
+
+ ); +} + +export default function HomeContentV6() { + return ( +
+ + + + + + + +
+ ); +} diff --git a/src/app/(marketing)/_archive/home-content-v7.tsx b/src/app/(marketing)/_archive/home-content-v7.tsx new file mode 100644 index 0000000..997304e --- /dev/null +++ b/src/app/(marketing)/_archive/home-content-v7.tsx @@ -0,0 +1,767 @@ +'use client'; + +import { useRef, useState, useEffect } from 'react'; +import { motion, useScroll, useTransform, useInView } from 'framer-motion'; +import { StaticLink } from '@/components/ui/static-link'; +import { + ArrowRight, ArrowUpRight, ChevronDown, + Target, Briefcase, Cpu, Brain, + BarChart2, + Building, Factory, ShoppingCart, Stethoscope, + GraduationCap, Globe, + Quote, +} from 'lucide-react'; +import { useReducedMotion } from '@/hooks/use-reduced-motion'; + +const INK = '#0A0E14'; +const INK_LIGHT = '#0F1419'; +const INK_LIGHTER = '#151B23'; +const CINNABAR = '#C41E3A'; +const EASE = [0.22, 1, 0.36, 1] as const; + +const CONTAINER = 'max-w-[1280px] mx-auto px-6 lg:px-8'; + +const SERVICES = [ + { + number: '01', + title: '战略咨询', + desc: '数字化转型战略规划与落地路径设计，让技术投资真正驱动业务增长。从愿景制定到执行落地，陪伴企业穿越转型周期。', + href: '/services/consulting', + icon: , + highlights: ['数字化成熟度评估', '转型路线图设计', '组织变革管理'], + }, + { + number: '02', + title: '企业软件', + desc: 'ERP、CRM、BI 等核心系统的评估、实施与定制化开发。基于行业最佳实践，打造适配企业实际的数字化底座。', + href: '/products', + icon: , + highlights: ['ERP 实施与优化', 'CRM 客户关系管理', 'BI 商业智能'], + }, + { + number: '03', + title: '技术服务', + desc: '系统集成、数据中台、云原生架构设计与技术外包服务。以工程化能力保障系统的稳定性、可扩展性与持续迭代。', + href: '/services', + icon: , + highlights: ['系统集成与架构', '数据中台建设', '云原生迁移'], + }, + { + number: '04', + title: 'AI 赋能', + desc: 'AI 成熟度评估、场景落地与大模型应用开发。帮助企业找到 AI 与业务的最佳结合点，实现智能化升级。', + href: '/services/ai', + icon: , + highlights: ['AI 战略规划', '大模型应用开发', '智能流程自动化'], + }, +]; + +const INDUSTRIES = [ + { icon: , name: '智能制造', desc: '工业4.0、智能工厂、供应链数字化', count: '120+' }, + { icon: , name: '贸易零售', desc: '全渠道零售、会员体系、数字营销', count: '80+' }, + { icon: , name: '医疗健康', desc: '医院信息化、医疗数据合规、智慧医疗', count: '60+' }, + { icon: , name: '教育科技', desc: '在线教育、学习管理、教育数字化', count: '50+' }, + { icon: , name: '金融服务', desc: '金融科技、风控合规、数据中台', count: '40+' }, + { icon: , name: '跨境电商', desc: '独立站、跨境支付、全球化运营', count: '30+' }, +]; + +const STATS = [ + { value: 500, suffix: '+', label: '企业客户', sub: '累计服务' }, + { value: 12, suffix: '年', label: '行业经验', sub: '深耕积累' }, + { value: 98, suffix: '%', label: '客户满意度', sub: '持续服务' }, + { value: 200, suffix: '+', label: '专业顾问', sub: '技术专家' }, +]; + +const CASES = [ + { + industry: '智能制造', + title: '大型制造企业 ERP 全面升级项目', + description: '为某上市制造企业实施 ERP 系统升级，覆盖生产、供应链、财务等核心模块，实现业务流程全面数字化。', + metrics: [ + { value: '40%', label: '生产效率提升' }, + { value: '30天', label: '核心系统上线' }, + { value: '99.5%', label: '数据准确率' }, + ], + quote: '睿新团队不仅完成了系统升级，更帮助我们建立了数据驱动的运营体系，这是超出预期的价值。', + author: 'CTO', + company: '某上市制造企业', + }, + { + industry: '贸易零售', + title: '连锁零售全渠道数字化升级', + description: '助力区域零售龙头构建全渠道零售体系，打通线上线下会员、库存、营销体系，实现营收快速增长。', + metrics: [ + { value: '25%', label: '营收增长' }, + { value: '50%', label: '库存周转优化' }, + { value: '3x', label: '会员复购率' }, + ], + quote: '从咨询到落地，睿新团队展现出了超出预期的专业能力和责任心，是值得信赖的合作伙伴。', + author: 'CEO', + company: '某区域零售龙头', + }, +]; + +const INSIGHTS = [ + { + category: '研究报告', + date: '2026.06', + title: '2026 中国企业数字化转型趋势报告', + excerpt: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。', + readTime: '12 分钟', + featured: true, + }, + { + category: '行业洞察', + date: '2026.05', + title: 'AI 浪潮下的企业数字化升级路径', + excerpt: '探讨企业如何在 AI 时代找到最适合的技术投入方向，避免盲目跟风，实现务实落地。', + readTime: '8 分钟', + featured: false, + }, + { + category: '实践指南', + date: '2026.04', + title: 'ERP 选型避坑指南：从需求到落地全流程', + excerpt: '总结 200+ ERP 实施项目经验，给出完整的选型方法论与风险控制框架。', + readTime: '15 分钟', + featured: false, + }, +]; + +const APPROACH = [ + { + step: '01', + title: '诊断评估', + desc: '全面调研企业现状，识别数字化痛点与机会点，输出可执行的转型路线图。', + duration: '2-4 周', + }, + { + step: '02', + title: '方案设计', + desc: '基于行业最佳实践与企业实际，定制技术架构与实施计划，确保方案可落地、可演进。', + duration: '4-6 周', + }, + { + step: '03', + title: '交付落地', + desc: '以敏捷迭代方式推进项目实施，全程透明沟通，确保质量、进度与成本可控。', + duration: '3-9 月', + }, + { + step: '04', + title: '持续运营', + desc: '项目交付后提供持续的技术支持与优化建议，陪伴企业数字化能力持续成长。', + duration: '长期陪伴', + }, +]; + +function useCountUp(target: number, start: boolean, duration: number = 2000) { + const [count, setCount] = useState(0); + const prefersReducedMotion = useReducedMotion(); + + useEffect(() => { + if (!start || prefersReducedMotion) { + setCount(target); + return; + } + + const startTime = performance.now(); + let animationId: number; + + const animate = (currentTime: number) => { + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); + const easeOutQuart = 1 - Math.pow(1 - progress, 4); + setCount(Math.floor(target * easeOutQuart)); + + if (progress < 1) { + animationId = requestAnimationFrame(animate); + } else { + setCount(target); + } + }; + + animationId = requestAnimationFrame(animate); + return () => cancelAnimationFrame(animationId); + }, [target, start, duration, prefersReducedMotion]); + + return count; +} + +function FadeIn({ children, delay = 0, className = '' }: { children: React.ReactNode; delay?: number; className?: string }) { + return ( + + {children} + + ); +} + +function StatItem({ value, suffix, label, sub, start, delay }: { value: number; suffix: string; label: string; sub: string; start: boolean; delay: number }) { + const count = useCountUp(value, start); + return ( + +
+
+ {count}{suffix} +
+
{label}
+
{sub}
+
+ + ); +} + +function HeroSection() { + const containerRef = useRef(null); + const { scrollYProgress } = useScroll({ + target: containerRef, + offset: ['start start', 'end start'], + }); + const y = useTransform(scrollYProgress, [0, 1], [0, 120]); + const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0.3]); + + return ( +
+
+
+
+
+
+ + +
+ +
+ + Digital Transformation Partner + + + + + 以战略远见 +
+ + 驱动 + 数字化 + + + + +
+ 未来 + + + + 睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。 + 我们以务实的方法和深度的行业洞见，帮助您构建面向未来的数字竞争力。 + + + + + 预约咨询 + +
+ + + 了解服务 + + + +
+ + + + 探索更多 + + + + +
+ ); +} + +function StatsSection() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-100px' }); + + return ( +
+
+ +
+
+ + 实力验证 + +
+

+ 数据印证专业 +

+ + +
+ {STATS.map((stat, i) => ( + + ))} +
+
+
+ ); +} + +function ServicesSection() { + return ( +
+
+
+ +
+
+ + 核心服务 + +
+

+ 四位一体的
数字化服务体系 +

+ + +

+ 从战略规划到技术落地，为企业数字化转型提供全链路专业服务，每一步都有专家陪伴。 +

+ +
+ + +
+ ); +} + +function IndustriesSection() { + return ( +
+
+
+ +
+
+ + 行业覆盖 + +
+

+ 深耕六大行业 +

+

+ 专注垂直领域，积累丰富的行业 Know-How，提供更贴合业务实际的解决方案。 + 每一个行业都有专属的专家团队与成熟的方法论。 +

+ + +
+
+ {INDUSTRIES.map((ind, i) => ( + +
+
+ {ind.icon} +
+
+

{ind.name}

+ + {ind.count} + +
+

{ind.desc}

+
+ + ))} +
+
+
+
+
+ ); +} + +function CasesSection() { + return ( +
+
+
+ +
+
+ + 客户案例 + +
+

+ 可衡量的业务成果 +

+ + + + 查看全部案例 + + + +
+ +
+ {CASES.map((caseItem, i) => ( + +
+
+
+
+ + {caseItem.industry} + +
+

+ {caseItem.title} +

+

+ {caseItem.description} +

+
+ +
+

+ "{caseItem.quote}" +

+

+ — {caseItem.author}，{caseItem.company} +

+
+
+
+ +
+
核心成果
+
+ {caseItem.metrics.map((metric, j) => ( +
+
+ {metric.value} +
+
{metric.label}
+
+ ))} +
+
+
+ +
+
+ + ))} +
+
+
+ ); +} + +function ApproachSection() { + return ( +
+
+ +
+
+ + 方法论 + +
+

+ 四步交付法 +

+

+ 确保每一个项目成功落地的方法论体系。从诊断评估到持续运营，每一步都有清晰的目标和交付物。 +

+ + +
+
+ +
+ {APPROACH.map((step, i) => ( + +
+
+ + {step.step} + +
+
+

{step.title}

+

{step.desc}

+
+ 周期：{step.duration} +
+
+
+ + ))} +
+
+
+
+ ); +} + +function InsightsSection() { + return ( +
+
+
+ +
+
+ + 思想领导力 + +
+

+ 最新洞察 +

+ + + + 查看全部 + + + +
+ +
+ {INSIGHTS.map((insight, i) => ( + +
+
+
+ +
+
+
+ + {insight.category} + +
+ {insight.featured && ( +
+ + 精选推荐 + +
+ )} +
+ +
+
+ {insight.date} + · + {insight.readTime} +
+

+ {insight.title} +

+

+ {insight.excerpt} +

+
+ + 阅读全文 + + +
+
+
+ + ))} +
+
+
+ ); +} + +function CTASection() { + return ( +
+
+
+
+ +
+ +
+
+ + 开启合作 + +
+
+

+ 准备好开启您的 +
+ 数字化转型之旅了吗？ +

+

+ 与我们的专家团队交流，获取针对您业务的专属数字化建议与实施路径。 +

+
+ + 立即咨询 + +
+ + + 关于我们 + + +
+ +
+
+ ); +} + +export default function HomeContentV7() { + return ( +
+ + + + + + + + +
+ ); +} diff --git a/src/app/(marketing)/_archive/home-content-v8.tsx b/src/app/(marketing)/_archive/home-content-v8.tsx new file mode 100644 index 0000000..f09bd41 --- /dev/null +++ b/src/app/(marketing)/_archive/home-content-v8.tsx @@ -0,0 +1,964 @@ +'use client'; + +import { useRef, useState, useEffect } from 'react'; +import { motion, useScroll, useTransform, useInView } from 'framer-motion'; +import { StaticLink } from '@/components/ui/static-link'; +import { + ArrowRight, ArrowUpRight, ChevronDown, + Target, Briefcase, Cpu, Brain, + BarChart3, + Building2, Factory, ShoppingBag, Heart, + GraduationCap, Globe2, + Quote, ArrowDownRight, +} from 'lucide-react'; +import { useReducedMotion } from '@/hooks/use-reduced-motion'; + +const INK = '#0A0E14'; +const INK_LIGHT = '#0F1419'; +const INK_LIGHTER = '#151B23'; +const CINNABAR = '#C41E3A'; +const EASE_OUT = [0.22, 1, 0.36, 1] as const; + +const CONTAINER = 'max-w-[1320px] mx-auto px-6 lg:px-10'; + +const SERVICES = [ + { + number: '01', + title: '战略咨询', + subtitle: 'Strategy Consulting', + desc: '数字化转型战略规划与落地路径设计，让技术投资真正驱动业务增长。从愿景制定到执行落地，陪伴企业穿越转型周期。', + href: '/services/consulting', + icon: , + highlights: ['数字化成熟度评估', '转型路线图设计', '组织变革管理', '技术选型顾问'], + }, + { + number: '02', + title: '企业软件', + subtitle: 'Enterprise Software', + desc: 'ERP、CRM、BI 等核心系统的评估、实施与定制化开发。基于行业最佳实践，打造适配企业实际的数字化底座。', + href: '/products', + icon: , + highlights: ['ERP 实施与优化', 'CRM 客户关系管理', 'BI 商业智能', '低代码平台'], + }, + { + number: '03', + title: '技术服务', + subtitle: 'Technology Services', + desc: '系统集成、数据中台、云原生架构设计与技术外包服务。以工程化能力保障系统的稳定性、可扩展性与持续迭代。', + href: '/services', + icon: , + highlights: ['系统集成与架构', '数据中台建设', '云原生迁移', '研发效能提升'], + }, + { + number: '04', + title: 'AI 赋能', + subtitle: 'AI Empowerment', + desc: 'AI 成熟度评估、场景落地与大模型应用开发。帮助企业找到 AI 与业务的最佳结合点，实现智能化升级。', + href: '/services/ai', + icon: , + highlights: ['AI 战略规划', '大模型应用开发', '智能流程自动化', '数据治理'], + }, +]; + +const INDUSTRIES = [ + { icon: , name: '智能制造', desc: '工业4.0、智能工厂、供应链数字化', count: '120+' }, + { icon: , name: '贸易零售', desc: '全渠道零售、会员体系、数字营销', count: '80+' }, + { icon: , name: '医疗健康', desc: '医院信息化、医疗数据合规、智慧医疗', count: '60+' }, + { icon: , name: '教育科技', desc: '在线教育、学习管理、教育数字化', count: '50+' }, + { icon: , name: '金融服务', desc: '金融科技、风控合规、数据中台', count: '40+' }, + { icon: , name: '跨境电商', desc: '独立站、跨境支付、全球化运营', count: '30+' }, +]; + +const STATS = [ + { value: 500, suffix: '+', label: '企业客户', sub: '累计服务' }, + { value: 12, suffix: '年', label: '行业经验', sub: '深耕积累' }, + { value: 98, suffix: '%', label: '客户满意度', sub: '持续服务' }, + { value: 200, suffix: '+', label: '专业顾问', sub: '技术专家' }, +]; + +const CASES = [ + { + industry: '智能制造', + title: '大型制造企业 ERP 全面升级项目', + description: '为某上市制造企业实施 ERP 系统升级，覆盖生产、供应链、财务等核心模块，实现业务流程全面数字化。项目周期 9 个月，核心系统一次性上线成功。', + metrics: [ + { value: '40%', label: '生产效率提升' }, + { value: '25%', label: '库存成本下降' }, + { value: '99.5%', label: '数据准确率' }, + ], + quote: '睿新团队不仅完成了系统升级，更帮助我们建立了数据驱动的运营体系，这是超出预期的价值。', + author: 'CTO', + company: '某上市制造企业', + }, + { + industry: '贸易零售', + title: '连锁零售全渠道数字化升级', + description: '助力区域零售龙头构建全渠道零售体系，打通线上线下会员、库存、营销体系，实现营收快速增长。项目覆盖 200+ 门店。', + metrics: [ + { value: '25%', label: '营收增长' }, + { value: '50%', label: '库存周转优化' }, + { value: '3x', label: '会员复购率' }, + ], + quote: '从咨询到落地，睿新团队展现出了超出预期的专业能力和责任心，是值得信赖的合作伙伴。', + author: 'CEO', + company: '某区域零售龙头', + }, +]; + +const INSIGHTS = [ + { + category: '研究报告', + date: '2026.06.15', + title: '2026 中国企业数字化转型趋势报告', + excerpt: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。报告共 120 页，包含 23 个行业标杆案例。', + readTime: '12 分钟', + featured: true, + }, + { + category: '行业洞察', + date: '2026.05.28', + title: 'AI 浪潮下的企业数字化升级路径', + excerpt: '探讨企业如何在 AI 时代找到最适合的技术投入方向，避免盲目跟风，实现务实落地。', + readTime: '8 分钟', + featured: false, + }, + { + category: '实践指南', + date: '2026.04.20', + title: 'ERP 选型避坑指南：从需求到落地全流程', + excerpt: '总结 200+ ERP 实施项目经验，给出完整的选型方法论与风险控制框架。', + readTime: '15 分钟', + featured: false, + }, +]; + +const APPROACH = [ + { + step: '01', + title: '诊断评估', + desc: '全面调研企业现状，识别数字化痛点与机会点，输出可执行的转型路线图。', + duration: '2-4 周', + deliverables: ['现状评估报告', '转型路线图', '优先级排序'], + }, + { + step: '02', + title: '方案设计', + desc: '基于行业最佳实践与企业实际，定制技术架构与实施计划，确保方案可落地、可演进。', + duration: '4-6 周', + deliverables: ['技术架构设计', '实施计划', '成本收益分析'], + }, + { + step: '03', + title: '交付落地', + desc: '以敏捷迭代方式推进项目实施，全程透明沟通，确保质量、进度与成本可控。', + duration: '3-9 月', + deliverables: ['系统上线', '知识转移', '运维手册'], + }, + { + step: '04', + title: '持续运营', + desc: '项目交付后提供持续的技术支持与优化建议，陪伴企业数字化能力持续成长。', + duration: '长期陪伴', + deliverables: ['运维支持', '持续优化', '定期复盘'], + }, +]; + +function useCountUp(target: number, start: boolean, duration: number = 2000) { + const [count, setCount] = useState(0); + const prefersReducedMotion = useReducedMotion(); + + useEffect(() => { + if (!start || prefersReducedMotion) { + setCount(target); + return; + } + + const startTime = performance.now(); + let animationId: number; + + const animate = (currentTime: number) => { + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); + const easeOutQuart = 1 - Math.pow(1 - progress, 4); + setCount(Math.floor(target * easeOutQuart)); + + if (progress < 1) { + animationId = requestAnimationFrame(animate); + } else { + setCount(target); + } + }; + + animationId = requestAnimationFrame(animate); + return () => cancelAnimationFrame(animationId); + }, [target, start, duration, prefersReducedMotion]); + + return count; +} + +function NoiseOverlay() { + return ( +
+ ); +} + +function DiagonalLine({ className = '', color = 'rgba(255,255,255,0.06)' }: { className?: string; color?: string }) { + return ( +
+ + + +
+ ); +} + +function FadeIn({ children, delay = 0, className = '', y = 30 }: { children: React.ReactNode; delay?: number; className?: string; y?: number }) { + return ( + + {children} + + ); +} + +function StatItem({ value, suffix, label, sub, start, delay }: { value: number; suffix: string; label: string; sub: string; start: boolean; delay: number }) { + const count = useCountUp(value, start); + return ( + +
+
+ {count} + {suffix} +
+
+
+
+
{label}
+
{sub}
+
+
+
+ + ); +} + +function HeroSection() { + const containerRef = useRef(null); + const { scrollYProgress } = useScroll({ + target: containerRef, + offset: ['start start', 'end start'], + }); + const y = useTransform(scrollYProgress, [0, 1], [0, 180]); + const opacity = useTransform(scrollYProgress, [0, 0.7], [1, 0.2]); + const gridY = useTransform(scrollYProgress, [0, 1], [0, -80]); + + return ( +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+ +
+ + Digital Transformation Partner + + + + +
+ 以战略远见 +
+
+ 驱动 + + 数字化 + + + + + 未来 +
+ + + + 睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。 + 我们以务实的方法和深度的行业洞见，帮助您构建面向未来的数字竞争力。 + + + + + 预约咨询 + +
+ + + 了解我们的服务 + + + +
+ + +
+
+
+
Est. 2014
+
12年
+
深耕企业数字化服务
+
+
+ 服务企业 + 500+ +
+
+ 专业团队 + 200+ +
+
+
+
+ +
+ + + + Scroll to explore + + + + +
+ ); +} + +function StatsSection() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-120px' }); + + return ( +
+ + +
+
+ +
+
+ +
+
+ + Proven Results + +
+

+ 用数据说话
的专业实力 +

+

+ 十二年深耕，五百余家企业的共同选择。我们用实实在在的业务成果，赢得客户的长期信赖。 +

+ + +
+
+ {STATS.map((stat, i) => ( + + ))} +
+
+
+
+
+ ); +} + +function ServicesSection() { + return ( +
+ + +
+
+ +
+
+ + Our Services + +
+

+ 四位一体的数字化服务体系 +

+ + +

+ 从战略规划到技术落地，为企业数字化转型提供全链路专业服务，每一步都有资深专家陪伴。 +

+ +
+ + +
+ ); +} + +function IndustriesSection() { + return ( +
+ + +
+
+ +
+
+ + Industries + +
+

+ 深耕六大
核心行业 +

+

+ 专注垂直领域，积累丰富的行业 Know-How，提供更贴合业务实际的解决方案。 + 每一个行业都有专属的专家团队与成熟的方法论。 +

+ + 查看全部行业方案 + + + + +
+
+ {INDUSTRIES.map((ind, i) => ( + +
+
+
+
+ +
+ {ind.icon} +
+
+

{ind.name}

+ + {ind.count} 案例 + +
+

{ind.desc}

+
+ + ))} +
+
+
+
+
+ ); +} + +function CasesSection() { + return ( +
+ + +
+
+ +
+
+ + Case Studies + +
+

+ 可衡量的业务成果 +

+ + + + 查看全部案例 + + + +
+ +
+ {CASES.map((caseItem, i) => ( + +
+
+
+
+ +
+ + {caseItem.industry} + + CASE #{String(i + 1).padStart(2, '0')} +
+ +

+ {caseItem.title} +

+

+ {caseItem.description} +

+ +
+ +
+

+ "{caseItem.quote}" +

+

+ — {caseItem.author}，{caseItem.company} +

+
+
+
+ +
+
Key Results
+
+ {caseItem.metrics.map((metric, j) => ( +
+
+ {metric.value} +
+
+
+
{metric.label}
+
+
+ ))} +
+
+
+
+ + ))} +
+
+
+ ); +} + +function ApproachSection() { + return ( +
+ + +
+ +
+
+ + Our Approach + +
+

+ 四步交付法，
确保每一个项目成功落地 +

+

+ 基于 500+ 项目经验沉淀的方法论体系。从诊断评估到持续运营，每一步都有清晰的目标和交付物，让数字化转型可见、可控、可衡量。 +

+ + +
+
+ +
+ {APPROACH.map((step, i) => ( + +
+
+
+
+ +
+ + {step.step} + +
+

{step.title}

+

{step.desc}

+ +
+
交付物
+
    + {step.deliverables.map((d, j) => ( +
  • + + {d} +
    • + ))} +
+
+ +
+ 周期：{step.duration} +
+
+ + ))} +
+
+
+
+ ); +} + +function InsightsSection() { + return ( +
+ + +
+
+ +
+
+ + Insights + +
+

+ 思想领导力 +

+ + + + 查看全部 + + + +
+ +
+ {INSIGHTS.map((insight, i) => ( + +
+
+
+ +
+
+
+ + {insight.category} + +
+ {insight.featured && ( +
+ + 精选推荐 + +
+ )} +
+ +
+
+ {insight.date} + + {insight.readTime}阅读 +
+

+ {insight.title} +

+

+ {insight.excerpt} +

+
+ + 阅读全文 + + +
+
+
+ + ))} +
+
+
+ ); +} + +function CTASection() { + return ( +
+ + +
+
+
+
+ +
+ +
+
+ + Let's Talk + +
+
+

+ 准备好开启您的 +
+ + 数字化转型 + + + + + 之旅了吗？ +

+

+ 与我们的专家团队交流，获取针对您业务的专属数字化建议与实施路径。 + 首次咨询完全免费，无任何商业承诺。 +

+
+ + 立即预约咨询 + +
+ + + 了解更多 + + +
+ +
+
+ ); +} + +export default function HomeContentV8() { + return ( +
+ + + + + + + + +
+ ); +} diff --git a/src/app/(marketing)/_archive/home-content-v9.tsx b/src/app/(marketing)/_archive/home-content-v9.tsx new file mode 100644 index 0000000..a30b8b3 --- /dev/null +++ b/src/app/(marketing)/_archive/home-content-v9.tsx @@ -0,0 +1,1117 @@ +'use client'; + +import { useRef, useState, useEffect } from 'react'; +import { motion, useScroll, useTransform, useInView } from 'framer-motion'; +import { StaticLink } from '@/components/ui/static-link'; +import { + ArrowRight, ArrowUpRight, ChevronDown, + Target, Briefcase, Cpu, Brain, + BarChart3, + Building2, Factory, ShoppingBag, Heart, + GraduationCap, Globe2, + Quote, CheckCircle2, + Sparkles, Zap, TrendingUp, Award, +} from 'lucide-react'; +import { useReducedMotion } from '@/hooks/use-reduced-motion'; + +const INK = '#0A0E14'; +const INK_LIGHT = '#0F1419'; +const INK_LIGHTER = '#151B23'; + +const CINNABAR = '#C41E3A'; +const CINNABAR_SOFT = 'rgba(196, 30, 58, 0.12)'; + +const BLUE = '#3B82F6'; +const BLUE_SOFT = 'rgba(59, 130, 246, 0.12)'; + +const TEAL = '#14B8A6'; +const TEAL_SOFT = 'rgba(20, 184, 166, 0.12)'; + +const AMBER = '#F59E0B'; +const AMBER_SOFT = 'rgba(245, 158, 11, 0.12)'; + +const EASE_OUT = [0.22, 1, 0.36, 1] as const; + +const CONTAINER = 'max-w-[1360px] mx-auto px-6 lg:px-10'; + +const SERVICES = [ + { + number: '01', + title: '战略咨询', + subtitle: 'Strategy Consulting', + desc: '数字化转型战略规划与落地路径设计，让技术投资真正驱动业务增长。从愿景制定到执行落地，陪伴企业穿越转型周期。', + href: '/services/consulting', + icon: , + color: CINNABAR, + softColor: CINNABAR_SOFT, + highlights: ['数字化成熟度评估', '转型路线图设计', '组织变革管理', '技术选型顾问'], + metrics: [ + { value: '200+', label: '战略项目' }, + { value: '95%', label: '落地成功率' }, + ], + }, + { + number: '02', + title: '企业软件', + subtitle: 'Enterprise Software', + desc: 'ERP、CRM、BI 等核心系统的评估、实施与定制化开发。基于行业最佳实践，打造适配企业实际的数字化底座。', + href: '/products', + icon: , + color: BLUE, + softColor: BLUE_SOFT, + highlights: ['ERP 实施与优化', 'CRM 客户关系管理', 'BI 商业智能', '低代码平台'], + metrics: [ + { value: '300+', label: '系统实施' }, + { value: '85%', label: '准时交付' }, + ], + }, + { + number: '03', + title: '技术服务', + subtitle: 'Technology Services', + desc: '系统集成、数据中台、云原生架构设计与技术外包服务。以工程化能力保障系统的稳定性、可扩展性与持续迭代。', + href: '/services', + icon: , + color: TEAL, + softColor: TEAL_SOFT, + highlights: ['系统集成与架构', '数据中台建设', '云原生迁移', '研发效能提升'], + metrics: [ + { value: '500+', label: '技术项目' }, + { value: '99.9%', label: '系统可用性' }, + ], + }, + { + number: '04', + title: 'AI 赋能', + subtitle: 'AI Empowerment', + desc: 'AI 成熟度评估、场景落地与大模型应用开发。帮助企业找到 AI 与业务的最佳结合点，实现智能化升级。', + href: '/services/ai', + icon: , + color: AMBER, + softColor: AMBER_SOFT, + highlights: ['AI 战略规划', '大模型应用开发', '智能流程自动化', '数据治理'], + metrics: [ + { value: '50+', label: 'AI 项目' }, + { value: '3x', label: '效率提升' }, + ], + }, +]; + +const INDUSTRIES = [ + { icon: , name: '智能制造', desc: '工业4.0、智能工厂、供应链数字化', count: '120+', color: CINNABAR }, + { icon: , name: '贸易零售', desc: '全渠道零售、会员体系、数字营销', count: '80+', color: BLUE }, + { icon: , name: '医疗健康', desc: '医院信息化、医疗数据合规、智慧医疗', count: '60+', color: TEAL }, + { icon: , name: '教育科技', desc: '在线教育、学习管理、教育数字化', count: '50+', color: AMBER }, + { icon: , name: '金融服务', desc: '金融科技、风控合规、数据中台', count: '40+', color: CINNABAR }, + { icon: , name: '跨境电商', desc: '独立站、跨境支付、全球化运营', count: '30+', color: BLUE }, +]; + +const STATS = [ + { value: 500, suffix: '+', label: '企业客户', sub: '累计服务' }, + { value: 12, suffix: '年', label: '行业经验', sub: '深耕积累' }, + { value: 98, suffix: '%', label: '客户满意度', sub: '持续服务' }, + { value: 200, suffix: '+', label: '专业顾问', sub: '技术专家' }, +]; + +const CASES = [ + { + industry: '智能制造', + title: '大型制造企业 ERP 全面升级项目', + challenge: '该企业原有 ERP 系统已运行 8 年，无法支撑新业务模式，数据孤岛严重，决策效率低下。', + solution: '采用分步迁移策略，以数据中台为核心，重构业务流程，实现从生产到财务的全链路数字化。', + result: '项目一次性上线成功，业务中断时间控制在 48 小时内，关键指标全面超越预期。', + metrics: [ + { value: '40%', label: '生产效率提升' }, + { value: '25%', label: '库存成本下降' }, + { value: '99.5%', label: '数据准确率' }, + ], + quote: '睿新团队不仅完成了系统升级，更帮助我们建立了数据驱动的运营体系，这是超出预期的价值。', + author: 'CTO', + company: '某上市制造企业', + color: CINNABAR, + }, + { + industry: '贸易零售', + title: '连锁零售全渠道数字化升级', + challenge: '线上线下渠道割裂，会员体系不统一，库存数据不同步，导致客户体验差、运营成本高。', + solution: '构建全渠道中台，打通会员、库存、订单、营销体系，实现线上线下一体化运营。', + result: '6 个月内完成 200+ 门店的系统切换，营收实现快速增长，会员复购率显著提升。', + metrics: [ + { value: '25%', label: '营收增长' }, + { value: '50%', label: '库存周转优化' }, + { value: '3x', label: '会员复购率' }, + ], + quote: '从咨询到落地，睿新团队展现出了超出预期的专业能力和责任心，是值得信赖的合作伙伴。', + author: 'CEO', + company: '某区域零售龙头', + color: BLUE, + }, +]; + +const INSIGHTS = [ + { + category: '研究报告', + date: '2026.06.15', + title: '2026 中国企业数字化转型趋势报告', + excerpt: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。报告共 120 页，包含 23 个行业标杆案例。', + readTime: '12 分钟', + featured: true, + }, + { + category: '行业洞察', + date: '2026.05.28', + title: 'AI 浪潮下的企业数字化升级路径', + excerpt: '探讨企业如何在 AI 时代找到最适合的技术投入方向，避免盲目跟风，实现务实落地。', + readTime: '8 分钟', + featured: false, + }, + { + category: '实践指南', + date: '2026.04.20', + title: 'ERP 选型避坑指南：从需求到落地全流程', + excerpt: '总结 200+ ERP 实施项目经验，给出完整的选型方法论与风险控制框架。', + readTime: '15 分钟', + featured: false, + }, +]; + +const APPROACH = [ + { + step: '01', + title: '诊断评估', + desc: '全面调研企业现状，识别数字化痛点与机会点，输出可执行的转型路线图。', + duration: '2-4 周', + deliverables: ['现状评估报告', '转型路线图', '优先级排序'], + icon: , + }, + { + step: '02', + title: '方案设计', + desc: '基于行业最佳实践与企业实际，定制技术架构与实施计划，确保方案可落地、可演进。', + duration: '4-6 周', + deliverables: ['技术架构设计', '实施计划', '成本收益分析'], + icon: , + }, + { + step: '03', + title: '交付落地', + desc: '以敏捷迭代方式推进项目实施，全程透明沟通，确保质量、进度与成本可控。', + duration: '3-9 月', + deliverables: ['系统上线', '知识转移', '运维手册'], + icon: , + }, + { + step: '04', + title: '持续运营', + desc: '项目交付后提供持续的技术支持与优化建议，陪伴企业数字化能力持续成长。', + duration: '长期陪伴', + deliverables: ['运维支持', '持续优化', '定期复盘'], + icon: , + }, +]; + +function useCountUp(target: number, start: boolean, duration: number = 2000) { + const [count, setCount] = useState(0); + const prefersReducedMotion = useReducedMotion(); + + useEffect(() => { + if (!start || prefersReducedMotion) { + setCount(target); + return; + } + + const startTime = performance.now(); + let animationId: number; + + const animate = (currentTime: number) => { + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); + const easeOutQuart = 1 - Math.pow(1 - progress, 4); + setCount(Math.floor(target * easeOutQuart)); + + if (progress < 1) { + animationId = requestAnimationFrame(animate); + } else { + setCount(target); + } + }; + + animationId = requestAnimationFrame(animate); + return () => cancelAnimationFrame(animationId); + }, [target, start, duration, prefersReducedMotion]); + + return count; +} + +function GrainOverlay() { + return ( +
+ ); +} + +function FadeIn({ children, delay = 0, className = '', y = 40 }: { children: React.ReactNode; delay?: number; className?: string; y?: number }) { + return ( + + {children} + + ); +} + +function SectionLabel({ children, color = CINNABAR }: { children: React.ReactNode; color?: string }) { + return ( +
+
+ + {children} + +
+ ); +} + +function StatItem({ value, suffix, label, sub, start, delay }: { value: number; suffix: string; label: string; sub: string; start: boolean; delay: number }) { + const count = useCountUp(value, start); + return ( + +
+
+ {count} + {suffix} +
+
+
+
+
{label}
+
{sub}
+
+
+
+ + ); +} + +function HeroSection() { + const containerRef = useRef(null); + const { scrollYProgress } = useScroll({ + target: containerRef, + offset: ['start start', 'end start'], + }); + const y = useTransform(scrollYProgress, [0, 1], [0, 200]); + const opacity = useTransform(scrollYProgress, [0, 0.7], [1, 0.2]); + const gridY = useTransform(scrollYProgress, [0, 1], [0, -60]); + + return ( +
+ + +
+ +
+ + +
+ +
+ +
+
+ + +
+
+ + Digital Transformation Partner + + + +
以战略远见
+
+ 驱动数字化 + + 未来 + + + + +
+ + + + 睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。 + 我们以务实的方法和深度的行业洞见，帮助您构建面向未来的数字竞争力。 + + + + + 预约咨询 + +
+ + + 了解我们的服务 + + + +
+ + +
+
+
+
+
+ EST. 2014 +
+
+ 12年 +
+
深耕企业数字化服务
+
+
+ 服务企业 + 500+ +
+
+ 专业团队 + 200+ +
+
+ 行业覆盖 + 6+ +
+
+
+
+ +
+ + + + + Scroll to explore + + + + + +
+ ); +} + +function StatsSection() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-120px' }); + + return ( +
+ + +
+
+ +
+
+ + Proven Results +

+ 用数据说话
的专业实力 +

+

+ 十二年深耕，五百余家企业的共同选择。我们用实实在在的业务成果，赢得客户的长期信赖与持续合作。 +

+ + +
+
+ {STATS.map((stat, i) => ( + + ))} +
+
+
+
+
+ ); +} + +function ServicesSection() { + return ( +
+ + +
+
+ + Our Services +

+ 四位一体的数字化服务体系 +

+ + +

+ 从战略规划到技术落地，为企业数字化转型提供全链路专业服务，每一步都有资深专家陪伴。 +

+ +
+ + +
+ ); +} + +function IndustriesSection() { + return ( +
+ + +
+
+ + Industries +

+ 深耕六大
核心行业 +

+

+ 专注垂直领域，积累丰富的行业 Know-How，提供更贴合业务实际的解决方案。 + 每一个行业都有专属的专家团队与成熟的方法论。 +

+ + 查看全部行业方案 + + + + +
+
+ {INDUSTRIES.map((ind, i) => ( + +
+
+
+
+ +
+ {ind.icon} +
+
+

{ind.name}

+ + {ind.count} 案例 + +
+

{ind.desc}

+
+ + ))} +
+
+
+
+
+ ); +} + +function CasesSection() { + return ( +
+ + +
+
+ + Case Studies +

+ 可衡量的业务成果 +

+ + + + 查看全部案例 + + + +
+ +
+ {CASES.map((caseItem, i) => ( + +
+
+
+
+ +
+ + {caseItem.industry} + + + CASE #{String(i + 1).padStart(2, '0')} + +
+ +

+ {caseItem.title} +

+ +
+
+
+
+ 挑战 +
+

{caseItem.challenge}

+
+
+
+
+ 方案 +
+

{caseItem.solution}

+
+
+
+
+ 成果 +
+

{caseItem.result}

+
+
+ +
+ +
+

+ "{caseItem.quote}" +

+

+ — {caseItem.author}，{caseItem.company} +

+
+
+
+ +
+
+ Key Results +
+
+ {caseItem.metrics.map((metric, j) => ( +
+
+ {metric.value} +
+
+
+
{metric.label}
+
+
+ ))} +
+
+
+
+ + ))} +
+
+
+ ); +} + +function ApproachSection() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-100px' }); + + return ( +
+ + +
+ + Our Approach +

+ 四步交付法，
确保每一个项目成功落地 +

+

+ 基于 500+ 项目经验沉淀的方法论体系。从诊断评估到持续运营，每一步都有清晰的目标和交付物，让数字化转型可见、可控、可衡量。 +

+ + +
+
+ +
+ {APPROACH.map((step, i) => ( + +
+
+ +
+ +
+
+ {step.icon} +
+ + {step.step} + +
+

{step.title}

+

{step.desc}

+ +
+
+ 交付物 +
+
    + {step.deliverables.map((d, j) => ( +
  • + + {d} +
    • + ))} +
+
+ +
+ 周期：{step.duration} +
+
+ + ))} +
+
+
+
+ ); +} + +function InsightsSection() { + return ( +
+ + +
+
+ + Insights +

+ 思想领导力 +

+ + + + 查看全部 + + + +
+ +
+ {INSIGHTS.map((insight, i) => ( + +
+
+
+ +
+
+
+ + {insight.category} + +
+ {insight.featured && ( +
+ + 精选推荐 + +
+ )} +
+ +
+
+ {insight.date} + + {insight.readTime}阅读 +
+

+ {insight.title} +

+

+ {insight.excerpt} +

+
+ + 阅读全文 + + +
+
+
+ + ))} +
+
+
+ ); +} + +function CTASection() { + return ( +
+ + +
+
+
+
+ +
+ +
+
+ + Let's Talk + +
+
+

+ 准备好开启您的 +
+ + 数字化转型 + + + + + 之旅了吗？ +

+

+ 与我们的专家团队交流，获取针对您业务的专属数字化建议与实施路径。 + 首次咨询完全免费，无任何商业承诺。 +

+
+ + 立即预约咨询 + +
+ + + 了解更多 + + +
+ +
+
+ ); +} + +export default function HomeContentV9() { + return ( +
+ + + + + + + + +
+ ); +} diff --git a/src/components/detail-v2/brand-elements.tsx b/src/components/detail-v2/brand-elements.tsx deleted file mode 100644 index ab963e3..0000000 --- a/src/components/detail-v2/brand-elements.tsx +++ /dev/null @@ -1,188 +0,0 @@ -'use client'; - -import { motion } from 'framer-motion'; -import { type LucideIcon } from 'lucide-react'; -import type { ReactNode } from 'react'; - -interface BrandSealProps { - text?: string; - variant?: 'red' | 'gold' | 'blue'; - size?: 'sm' | 'md' | 'lg'; -} - -export function BrandSeal({ text = '旗舰', variant = 'red', size = 'md' }: BrandSealProps) { - const sizes = { - sm: 'w-14 h-14 text-xs', - md: 'w-20 h-20 text-sm', - lg: 'w-28 h-28 text-base', - }; - - const colors = { - red: { - border: '#C41E3A', - bg: 'rgba(196, 30, 58, 0.06)', - text: '#C41E3A', - shadow: 'rgba(196, 30, 58, 0.2)', - }, - gold: { - border: '#d97706', - bg: 'rgba(217, 119, 6, 0.06)', - text: '#d97706', - shadow: 'rgba(217, 119, 6, 0.2)', - }, - blue: { - border: '#2563eb', - bg: 'rgba(37, 99, 235, 0.06)', - text: '#2563eb', - shadow: 'rgba(37, 99, 235, 0.2)', - }, - }; - - const color = colors[variant]; - - return ( - -
- - {text} - -
- - ); -} - -interface CalligraphyTextProps { - children: ReactNode; - className?: string; - as?: 'h1' | 'h2' | 'h3' | 'span'; -} - -export function CalligraphyText({ - children, - className = '', - as: Tag = 'span', -}: CalligraphyTextProps) { - return ( - - {children} - - ); -} - -interface InkDividerProps { - variant?: 'subtle' | 'bold' | 'decorative'; -} - -export function InkDivider({ variant = 'subtle' }: InkDividerProps) { - if (variant === 'subtle') { - return ( -
-
-
-
-
- ); - } - - if (variant === 'bold') { - return ( -
-
- -
-
- ); - } - - return ( -
- - - - - - -
- ); -} - -interface SectionHeaderProps { - badge?: string; - title: ReactNode; - subtitle?: string; - align?: 'left' | 'center'; - icon?: LucideIcon; -} - -export function SectionHeader({ - badge, - title, - subtitle, - align = 'center', - icon: Icon, -}: SectionHeaderProps) { - return ( - - {(badge || Icon) && ( -
- {Icon && } - {badge} -
- )} - -

- {title} -

- - {subtitle && ( -

{subtitle}

- )} - - ); -} diff --git a/src/components/detail-v2/detail-cta-section-v2.tsx b/src/components/detail-v2/detail-cta-section-v2.tsx deleted file mode 100644 index 2b213ea..0000000 --- a/src/components/detail-v2/detail-cta-section-v2.tsx +++ /dev/null @@ -1,98 +0,0 @@ -'use client'; - -import { motion } from 'framer-motion'; -import { ArrowRight, MessageCircle, Download } from 'lucide-react'; -import type { HeroTheme } from '@/lib/constants/hero-themes'; -import { DESIGN_SYSTEM } from '@/lib/constants/design-system'; - -interface DetailCTASectionV2Props { - theme: HeroTheme; - title?: string; - description?: string; - primaryAction: { label: string; href: string }; - secondaryAction?: { label: string; href: string }; -} - -export function DetailCTASectionV2({ - theme, - title = '准备好开始了吗？', - description = '联系我们，获取专属方案和报价', - primaryAction, - secondaryAction, -}: DetailCTASectionV2Props) { - return ( -
-
-
-
-
-
- -
- -
- - 免费咨询 -
- -

- {title} -

- -

- {description} -

- -
- - {primaryAction.label} - -
- - - {secondaryAction && ( - - - {secondaryAction.label} - - )} -
- - - 平均响应时间 < 2小时 · 7×24小时技术支持 · 无需预付费用 - - -
-
- ); -} diff --git a/src/components/detail-v2/detail-hero-v2.tsx b/src/components/detail-v2/detail-hero-v2.tsx deleted file mode 100644 index 58c122a..0000000 --- a/src/components/detail-v2/detail-hero-v2.tsx +++ /dev/null @@ -1,182 +0,0 @@ -'use client'; - -import { motion } from 'framer-motion'; -import { ArrowRight, Sparkles } from 'lucide-react'; -import type { HeroTheme, HeroTexture } from '@/lib/constants/hero-themes'; -import { DESIGN_SYSTEM } from '@/lib/constants/design-system'; - -interface DetailHeroV2Props { - theme: HeroTheme; - badge?: string; - title: string; - subtitle: string; - description?: string; - primaryAction?: { label: string; href: string }; - secondaryAction?: { label: string; href: string }; -} - -function TextureOverlay({ texture }: { texture: HeroTexture }) { - if (texture.type === 'none') return null; - - const textureStyles: Record = { - grid: { - backgroundImage: - 'linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px)', - backgroundSize: '60px 60px', - }, - 'data-flow': { - backgroundImage: - 'radial-gradient(circle at 20% 50%, rgba(0,0,0,.03) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(0,0,0,.02) 0%, transparent 40%)', - }, - layers: { - backgroundImage: - 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,.01) 50%, transparent 100%)', - }, - 'shield-hex': { - backgroundImage: - 'repeating-linear-gradient(60deg, transparent, transparent 30px, rgba(0,0,0,.02) 30px, rgba(0,0,0,.02) 31px)', - }, - circuit: { - backgroundImage: - 'linear-gradient(90deg, transparent 49%, rgba(0,0,0,.02) 49%, rgba(0,0,0,.02) 51%, transparent 51%)', - backgroundSize: '40px 40px', - }, - }; - - return ( -
- ); -} - -function InkWashBackground() { - return ( - <> -
-
-
- - ); -} - -export function DetailHeroV2({ - theme, - badge, - title, - subtitle, - description, - primaryAction, - secondaryAction, -}: DetailHeroV2Props) { - const isCenterLayout = theme.layout === 'center' || theme.layout === 'wide'; - - const containerClasses = theme.layout === 'wide' - ? 'container-wide py-32 lg:py-40' - : 'container-wide py-28 lg:py-36'; - - return ( -
- - - -
- - {(badge || theme.badge) && ( - - - {badge || theme.badge} - - )} - - - {title} - - - - {subtitle} - - - {description && ( - - {description} - - )} - - {(primaryAction || secondaryAction) && ( - - {primaryAction && ( - - {primaryAction.label} - -
- - )} - {secondaryAction && ( - - {secondaryAction.label} - - )} - - )} - -
- -
-
- ); -} diff --git a/src/components/detail-v2/detail-hero-v3.tsx b/src/components/detail-v2/detail-hero-v3.tsx deleted file mode 100644 index b91f721..0000000 --- a/src/components/detail-v2/detail-hero-v3.tsx +++ /dev/null @@ -1,318 +0,0 @@ -'use client'; - -import { motion, useScroll, useTransform } from 'framer-motion'; -import { useRef } from 'react'; -import { ArrowRight, Sparkles, ChevronDown } from 'lucide-react'; -import type { HeroTheme, HeroTexture } from '@/lib/constants/hero-themes'; -import { PressableButton } from './micro-interactions'; - -interface DetailHeroV3Props { - theme: HeroTheme; - badge?: string; - title: string; - subtitle: string; - description?: string; - primaryAction?: { label: string; href: string }; - secondaryAction?: { label: string; href: string }; -} - -function InkWashBackgroundV3({ theme }: { theme: HeroTheme }) { - const ref = useRef(null); - const { scrollYProgress } = useScroll({ - target: ref, - offset: ['start start', 'end start'], - }); - const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0.3]); - const scale = useTransform(scrollYProgress, [0, 0.8], [1, 1.1]); - - return ( - - {/* 水墨雅致浅色渐变底 */} -
- - {/* 墨韵光晕 — 品牌色淡染 */} -
-
-
- - {/* 宣纸纹理 */} -
- - {theme.texture.type !== 'none' && ( - - )} - - {/* 底部渐变融入页面背景 */} -
- - ); -} - -function TextureOverlayV3({ texture }: { texture: HeroTexture }) { - if (texture.type === 'none') return null; - - const textures: Record = { - grid: { - backgroundImage: - 'linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px)', - backgroundSize: '80px 80px', - }, - 'data-flow': { - backgroundImage: - 'radial-gradient(circle at 15% 45%, rgba(0,0,0,.03) 0%, transparent 55%), radial-gradient(circle at 85% 25%, rgba(0,0,0,.02) 0%, transparent 45%)', - }, - layers: { - backgroundImage: - 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,.01) 35%, rgba(0,0,0,.02) 65%, transparent 100%)', - }, - 'shield-hex': { - backgroundImage: - 'repeating-linear-gradient(55deg, transparent, transparent 28px, rgba(0,0,0,.02) 28px, rgba(0,0,0,.02) 29px)', - }, - circuit: { - backgroundImage: - 'linear-gradient(90deg, transparent 49.5%, rgba(0,0,0,.02) 49.5%, rgba(0,0,0,.02) 50.5%, transparent 50.5%)', - backgroundSize: '50px 50px', - }, - }; - - return ( -
- ); -} - -function FloatingParticles() { - const particles = [ - { x: 15, y: 25, scale: 0.7, duration: 8, delay: 0, startY: 100, endY: -20 }, - { x: 75, y: 60, scale: 0.5, duration: 10, delay: 1.5, startY: 80, endY: 15 }, - { x: 45, y: 35, scale: 0.9, duration: 9, delay: 0.8, startY: 90, endY: -10 }, - { x: 85, y: 20, scale: 0.6, duration: 11, delay: 2.2, startY: 70, endY: 5 }, - { x: 25, y: 75, scale: 0.8, duration: 7.5, delay: 1.0, startY: 85, endY: -15 }, - { x: 65, y: 45, scale: 0.55, duration: 12, delay: 2.8, startY: 95, endY: 10 }, - ]; - - return ( -
- {particles.map((particle, i) => ( - - ))} -
- ); -} - -export function DetailHeroV3({ - theme, - badge, - title, - subtitle, - description, - primaryAction, - secondaryAction, -}: DetailHeroV3Props) { - const isCenterLayout = theme.layout === 'center' || theme.layout === 'wide'; - - return ( -
- - - -
- - {(badge || theme.badge) && ( - - - - - {badge || theme.badge} - - )} - - - {title} - - - - {subtitle} - - - {description && ( - - {description} - - )} - - {(primaryAction || secondaryAction) && ( - - {primaryAction && ( - - - {primaryAction.label} - -
- - - )} - {secondaryAction && ( - - - {secondaryAction.label} - - - )} - - )} - - - - - - - -
-
- ); -} diff --git a/src/components/detail-v2/detail-product-value-v2.tsx b/src/components/detail-v2/detail-product-value-v2.tsx deleted file mode 100644 index 82537f4..0000000 --- a/src/components/detail-v2/detail-product-value-v2.tsx +++ /dev/null @@ -1,171 +0,0 @@ -'use client'; - -import { motion } from 'framer-motion'; -import { - CheckCircle2, - ArrowRight, - Zap, - Shield, - BarChart3, - Cpu, - type LucideIcon, -} from 'lucide-react'; -import { DESIGN_SYSTEM } from '@/lib/constants/design-system'; -import type { Product } from '@/lib/constants/products'; - -interface ProductValueSectionV2Props { - product: Product; -} - -const featureIcons: LucideIcon[] = [Zap, Shield, BarChart3, Cpu]; - -const containerVariants = { - hidden: { opacity: 0 }, - visible: { - opacity: 1, - transition: { - staggerChildren: DESIGN_SYSTEM.animation.delay.stagger, - delayChildren: 0.1, - }, - }, -}; - -const itemVariants = { - hidden: { opacity: 0, y: 20 }, - visible: { - opacity: 1, - y: 0, - transition: { - duration: 0.4, - ease: [0.4, 0, 0.2, 1] as const, - }, - }, -}; - -export function ProductValueSectionV2({ product }: ProductValueSectionV2Props) { - return ( -
-
- -
- - - 核心能力 - -

- 为企业打造的{product.title} -

-

- {product.overview} -

- - -
- -
-
- -
-

功能模块

-
- -
- {product.features.map((feature, index) => { - const Icon = featureIcons[index % featureIcons.length]!; - const [title, ...descParts] = feature.split('：'); - const desc = descParts.join('：'); - - return ( - -
-
- -
-
-

{title}

- {desc &&

{desc}

} -
-
- - ); - })} -
- - - -
-
- -
-

核心优势

-
- -
- {product.benefits.map((benefit, index) => ( - - -

{benefit}

- - ))} -
- -
-

- - 技术规格 -

-
    - {product.specs.slice(0, 4).map((spec, index) => ( - - - {spec} - - ))} -
-
- -
-
-
- ); -} diff --git a/src/components/detail-v2/detail-product-value-v3.tsx b/src/components/detail-v2/detail-product-value-v3.tsx deleted file mode 100644 index ef8fb5e..0000000 --- a/src/components/detail-v2/detail-product-value-v3.tsx +++ /dev/null @@ -1,435 +0,0 @@ -'use client'; - -import { motion, useInView } from 'framer-motion'; -import { useRef, useState } from 'react'; -import { - CheckCircle2, - ArrowRight, - Zap, - Shield, - BarChart3, - Cpu, - TrendingUp, - Clock, - Award, - Users, - type LucideIcon, -} from 'lucide-react'; -import { TiltCard, InkGlowCard } from './micro-interactions'; -import type { Product } from '@/lib/constants/products'; - -interface ProductValueSectionV3Props { - product: Product; -} - -const featureIcons: LucideIcon[] = [Zap, Shield, BarChart3, Cpu]; - -function FeatureTags({ text }: { text: string }) { - const [title, ...descParts] = text.split('：'); - const desc = descParts.join('：'); - - if (!desc) return {title}; - - const tags = desc.split('、').map((tag) => tag.trim()).filter(Boolean); - - return ( -
-

{title}

-
- {tags.map((tag, i) => ( - - {tag} - - ))} -
-
- ); -} - -function CircularProgress({ value, label, color = '#C41E3A' }: { value: number; label: string; color?: string }) { - const ref = useRef(null); - const isInView = useInView(ref, { once: true }); - const [progress, setProgress] = useState(0); - - if (isInView && progress === 0) { - setTimeout(() => setProgress(value), 300); - } - - const circumference = 2 * Math.PI * 45; - const strokeDashoffset = circumference - (progress / 100) * circumference; - - return ( -
-
- - - - -
- {value}% -
-
-

{label}

-
- ); -} - -function MetricCard({ - icon: Icon, - value, - metric, - description, - index: _index, - accent = false, -}: { - icon: LucideIcon; - value: string; - metric: string; - description: string; - index: number; - accent?: boolean; -}) { - const ref = useRef(null); - const isInView = useInView(ref, { once: true }); - - const numericValue = parseFloat(value.replace(/[^0-9.]/g, '')); - const suffix = value.replace(/[0-9.]/g, ''); - const [displayValue, setDisplayValue] = useState('0'); - - if (isInView && displayValue === '0') { - let startTime: number; - const animate = (currentTime: number) => { - if (!startTime) startTime = currentTime; - const progress = Math.min((currentTime - startTime) / 2000, 1); - const easeOutQuart = 1 - Math.pow(1 - progress, 4); - setDisplayValue( - Number.isInteger(numericValue) - ? Math.floor(numericValue * easeOutQuart).toString() + suffix - : (numericValue * easeOutQuart).toFixed(1) + suffix - ); - if (progress < 1) requestAnimationFrame(animate); - }; - requestAnimationFrame(animate); - } - - return ( - - {accent && ( -
- )} - -
-
- -
- -
- {displayValue} -
- -

{metric}

-

{description}

-
- - ); -} - -export function ProductValueSectionV3({ product }: ProductValueSectionV3Props) { - return ( -
-
- -
- - - - 核心能力 - - -

- 为企业打造的 - {product.title} - - -

- -

- {product.overview} -

- - -
- -
-
- -
-
-

功能模块

-

六大核心业务领域全覆盖

-
-
- -
- {product.features.map((feature, index) => { - const Icon = featureIcons[index % featureIcons.length]!; - - return ( - - -
-
- -
-
- -
-
- - - ); - })} -
- - - -
-
- -
-
-

核心优势

-

为什么选择我们

-
-
- -
- {product.benefits.map((benefit, index) => ( - -
- -

{benefit}

-
- - ))} -
- - -

- - 技术规格 -

-
    - {product.specs.slice(0, 5).map((spec, index) => ( - - - {spec} - - ))} -
- - -
- - {product.dataProofs && product.dataProofs.length > 0 && ( - -
- - 数据说话 - -

- 用真实效果证明价值 -

-
- -
- {product.dataProofs.map((proof, index) => { - const icons: LucideIcon[] = [TrendingUp, Clock, Award, Users]; - const Icon = icons[index % icons.length]!; - - return ( - - ); - })} -
- - - - - - - - )} -
-
- ); -} diff --git a/src/components/detail-v2/detail-trust-section-v2.tsx b/src/components/detail-v2/detail-trust-section-v2.tsx deleted file mode 100644 index 91c1d91..0000000 --- a/src/components/detail-v2/detail-trust-section-v2.tsx +++ /dev/null @@ -1,180 +0,0 @@ -'use client'; - -import { motion, useInView } from 'framer-motion'; -import { useRef, useEffect, useState } from 'react'; -import { CaseStudyCard } from '../detail/detail-case-study'; -import { CertificationList } from '../detail/detail-certification'; -import type { CaseStudy, DataProof, Certification } from '@/lib/constants/products'; -import { DESIGN_SYSTEM } from '@/lib/constants/design-system'; - -interface DetailTrustSectionV2Props { - caseStudies?: CaseStudy[]; - dataProofs?: DataProof[]; - certifications?: Certification[]; - accentColor?: string; -} - -function AnimatedCounter({ value, duration = 2000 }: { value: string; duration?: number }) { - const [displayValue, setDisplayValue] = useState('0'); - const ref = useRef(null); - const isInView = useInView(ref, { once: true }); - - useEffect(() => { - if (!isInView) return; - - const numericValue = parseFloat(value.replace(/[^0-9.]/g, '')); - const suffix = value.replace(/[0-9.]/g, ''); - let startTime: number; - let animationFrame: number; - - const animate = (currentTime: number) => { - if (!startTime) startTime = currentTime; - const progress = Math.min((currentTime - startTime) / duration, 1); - const easeOutQuart = 1 - Math.pow(1 - progress, 4); - const currentValue = numericValue * easeOutQuart; - - setDisplayValue( - Number.isInteger(numericValue) - ? Math.floor(currentValue).toString() + suffix - : currentValue.toFixed(1) + suffix - ); - - if (progress < 1) { - animationFrame = requestAnimationFrame(animate); - } - }; - - animationFrame = requestAnimationFrame(animate); - - return () => cancelAnimationFrame(animationFrame); - }, [isInView, value, duration]); - - return ( -
- {displayValue} -
- ); -} - -export function DetailTrustSectionV2({ - caseStudies = [], - dataProofs = [], - certifications = [], - accentColor = '#C41E3A', -}: DetailTrustSectionV2Props) { - const hasContent = caseStudies.length > 0 || dataProofs.length > 0 || certifications.length > 0; - if (!hasContent) return null; - - return ( -
-
- -
- {dataProofs.length > 0 && ( -
- - - 数据说话 - -

- 用真实效果证明价值 -

-

- 来自真实客户的使用数据，让效果可衡量、可验证 -

- - -
- {dataProofs.map((proof, index) => ( - - {index === 0 && ( -
- )} - -

{proof.metric}

-

{proof.description}

- - ))} -
-
- )} - - {caseStudies.length > 0 && ( -
- - - 客户案例 - -

- 他们已经实现了转型突破 -

- - -
- {caseStudies.map((study, index) => ( - - - - ))} -
-
- )} - - {certifications.length > 0 && ( - -

资质认证

- - - )} -
-
- ); -} diff --git a/src/components/detail-v2/list-page-hero-v3.tsx b/src/components/detail-v2/list-page-hero-v3.tsx deleted file mode 100644 index bea61fb..0000000 --- a/src/components/detail-v2/list-page-hero-v3.tsx +++ /dev/null @@ -1,166 +0,0 @@ -'use client'; - -import { motion } from 'framer-motion'; -import { useReducedMotion } from '@/hooks/use-reduced-motion'; - -interface ListPageHeroV3Props { - title: string; - subtitle: string; - description?: string; - stats?: Array<{ value: string; label: string }>; - badge?: { - text: string; - variant?: 'brand' | 'blue' | 'green' | 'neutral'; - }; -} - -const BADGE_VARIANTS = { - brand: { - bg: 'var(--color-brand-primary-bg)', - text: 'var(--color-brand-primary)', - border: 'rgba(var(--color-brand-primary-rgb), 0.15)', - dot: 'var(--color-brand-primary)', - }, - blue: { - bg: 'rgba(var(--color-accent-blue-rgb), 0.08)', - text: 'var(--color-accent-blue)', - border: 'rgba(var(--color-accent-blue-rgb), 0.15)', - dot: 'var(--color-accent-blue)', - }, - green: { - bg: 'rgba(34, 197, 94, 0.08)', - text: '#16a34a', - border: 'rgba(34, 197, 94, 0.15)', - dot: '#22c55e', - }, - neutral: { - bg: 'var(--color-bg-section)', - text: 'var(--color-text-secondary)', - border: 'var(--color-border-primary)', - dot: 'var(--color-text-subtle)', - }, -}; - -export function ListPageHeroV3({ - title, - subtitle, - description, - stats, - badge, -}: ListPageHeroV3Props) { - const shouldReduceMotion = useReducedMotion(); - const badgeStyle = BADGE_VARIANTS[badge?.variant || 'brand']; - - return ( -
- {/* Multi-layer background */} -
-
-
- - {/* Subtle grid texture */} -
- ); -} diff --git a/src/components/detail-v2/micro-interactions.tsx b/src/components/detail-v2/micro-interactions.tsx deleted file mode 100644 index 88db9a2..0000000 --- a/src/components/detail-v2/micro-interactions.tsx +++ /dev/null @@ -1,139 +0,0 @@ -'use client'; - -import { motion, useMotionValue, useTransform, useSpring } from 'framer-motion'; -import { useRef, ReactNode } from 'react'; - -interface TiltCardProps { - children: ReactNode; - className?: string; - tiltAmount?: number; - glareEnable?: boolean; - glareMaxOpacity?: number; -} - -export function TiltCard({ - children, - className = '', - tiltAmount = 10, - glareEnable = true, - glareMaxOpacity = 0.15, -}: TiltCardProps) { - const ref = useRef(null); - const x = useMotionValue(0.5); - const y = useMotionValue(0.5); - - const rotateX = useSpring(useTransform(y, [0, 1], [tiltAmount, -tiltAmount]), { - stiffness: 300, - damping: 30, - }); - const rotateY = useSpring(useTransform(x, [0, 1], [-tiltAmount, tiltAmount]), { - stiffness: 300, - damping: 30, - }); - - const handleMouseMove = (e: React.MouseEvent) => { - if (!ref.current) return; - const rect = ref.current.getBoundingClientRect(); - x.set((e.clientX - rect.left) / rect.width); - y.set((e.clientY - rect.top) / rect.height); - }; - - const handleMouseLeave = () => { - x.set(0.5); - y.set(0.5); - }; - - return ( - - {children} - {glareEnable && ( -
- )} - - ); -} - -interface PressableButtonProps { - children: ReactNode; - className?: string; - onClick?: () => void; - variant?: 'primary' | 'secondary' | 'ghost'; -} - -export function PressableButton({ - children, - className = '', - onClick, - variant = 'primary', -}: PressableButtonProps) { - const baseStyles = { - primary: - 'bg-gradient-to-r from-[#C41E3A] to-[#99182d] text-white shadow-lg shadow-red-500/25 hover:shadow-xl hover:shadow-red-500/40', - secondary: - 'bg-white text-gray-700 border-2 border-gray-200 hover:border-gray-300 shadow-md hover:shadow-lg', - ghost: - 'bg-transparent text-[#C41E3A] hover:bg-red-50', - }; - - return ( - - {children} - - ); -} - -interface InkGlowCardProps { - children: ReactNode; - className?: string; - active?: boolean; -} - -export function InkGlowCard({ children, className = '', active = false }: InkGlowCardProps) { - return ( - - {active && ( -
- )} -
-
-
-
{children}
- - ); -} diff --git a/src/components/detail-v2/product-card-v3.tsx b/src/components/detail-v2/product-card-v3.tsx deleted file mode 100644 index 73d4fdf..0000000 --- a/src/components/detail-v2/product-card-v3.tsx +++ /dev/null @@ -1,87 +0,0 @@ -'use client'; - -import { motion } from 'framer-motion'; -import Link from 'next/link'; -import Image from 'next/image'; -import { ArrowRight, CheckCircle2 } from 'lucide-react'; - -interface ProductCardV3Props { - product: { - id: string; - title: string; - description: string; - image: string; - category: string; - status: string; - features?: string[]; - }; -} - -export function ProductCardV3({ product }: ProductCardV3Props) { - return ( - - -
-
- {product.title} -
- -
- - {product.category} - - {product.status === '已发布' && ( - - - 已发布 - - )} -
-
- -
-

- {product.title} -

- -

- {product.description} -

- - {product.features && product.features.length > 0 && ( -
- {product.features.slice(0, 3).map((feature) => ( - - {feature} - - ))} -
- )} - -
- 了解详情 - -
-
-
- - - ); -} diff --git a/src/components/detail-v2/service-value-v3.tsx b/src/components/detail-v2/service-value-v3.tsx deleted file mode 100644 index 9dd64da..0000000 --- a/src/components/detail-v2/service-value-v3.tsx +++ /dev/null @@ -1,191 +0,0 @@ -'use client'; - -import { motion } from 'framer-motion'; -import { - CheckCircle2, - Zap, - Clock, - Users, - Award, - TrendingUp, - type LucideIcon, -} from 'lucide-react'; -import { TiltCard, InkGlowCard } from './micro-interactions'; -import { SectionHeader, InkDivider } from './brand-elements'; -import type { Service } from '@/lib/constants/services'; - -interface ServiceValueSectionV3Props { - service: Service; -} - -export function ServiceValueSectionV3({ service }: ServiceValueSectionV3Props) { - const icons: LucideIcon[] = [Zap, Clock, Users, Award, TrendingUp]; - - return ( -
-
- -
- - -
-
-
- -
-
-

核心能力

-

我们提供的服务特色

-
-
- -
- {service.features.map((feature, index) => { - const Icon = icons[index % icons.length]!; - - return ( - - -
-
- -
-

- {feature.split('：')[1] || feature} -

-
- - - ); - })} -
-
- - - - -
-
- -
-
-

服务优势

-

选择我们的理由

-
-
- -
- {service.benefits.map((benefit, index) => ( - -
- -

{benefit}

-
- - ))} -
- - - {service.process && service.process.length > 0 && ( - - - -
-

- 服务流程 -

-

标准化流程保障服务质量

-
- -
-
- -
- {service.process.map((step, index) => ( - -
-
- {String(index + 1).padStart(2, '0')} -
-
- - -

- {step.split('：')[0]} -

-

- {step.split('：')[1] || step} -

- - - ))} -
-
- - )} -
-
- ); -} diff --git a/src/components/detail-v2/solution-service-card-v3.tsx b/src/components/detail-v2/solution-service-card-v3.tsx deleted file mode 100644 index f34a9b8..0000000 --- a/src/components/detail-v2/solution-service-card-v3.tsx +++ /dev/null @@ -1,163 +0,0 @@ -'use client'; - -import { motion } from 'framer-motion'; -import Link from 'next/link'; -import Image from 'next/image'; -import { ArrowRight, Building2, Users, Cpu, Package } from 'lucide-react'; - -interface SolutionCardV3Props { - solution: { - id: string; - title: string; - industry: string; - description: string; - image?: string; - challenges?: string[]; - suiteCombination?: { - primaryProducts: string[]; - complementaryServices: string[]; - rationale: string; - }; - }; -} - -export function SolutionCardV3({ solution }: SolutionCardV3Props) { - const industryIcons = { - 制造业: Building2, - 零售: Users, - 金融: Cpu, - 政务: Building2, - }; - - const Icon = industryIcons[solution.industry as keyof typeof industryIcons] || Building2; - - return ( - - -
-
- {solution.image ? ( - {solution.title} - ) : ( - - )} -
- -
- - - {solution.industry} - - {solution.suiteCombination && solution.suiteCombination.primaryProducts.length > 0 && ( - - - {solution.suiteCombination.primaryProducts.length} 产品组合 - - )} -
-
- -
-

- {solution.title} -

- -

- {solution.description} -

- - {solution.challenges && solution.challenges.length > 0 && ( -
- {solution.challenges.slice(0, 2).map((challenge) => ( -
- - {challenge} -
- ))} -
- )} - -
- 查看方案 - -
-
-
- - - ); -} - -interface ServiceCardV3Props { - service: { - id: string; - title: string; - description: string; - features?: string[]; - }; -} - -export function ServiceCardV3({ service }: ServiceCardV3Props) { - return ( - - -
-
-
- -
- -

- {service.title} -

- -

- {service.description} -

- - {service.features && service.features.length > 0 && ( -
- {service.features.slice(0, 3).map((feature) => ( - - {feature.split('：')[0]} - - ))} -
- )} - -
- 了解服务 - -
-
-
- - - ); -} diff --git a/src/components/detail-v2/solution-value-v3.tsx b/src/components/detail-v2/solution-value-v3.tsx deleted file mode 100644 index 0ad5970..0000000 --- a/src/components/detail-v2/solution-value-v3.tsx +++ /dev/null @@ -1,223 +0,0 @@ -'use client'; - -import { motion } from 'framer-motion'; -import { - CheckCircle2, - Lightbulb, - Target, - TrendingUp, -} from 'lucide-react'; -import { TiltCard } from './micro-interactions'; -import { SectionHeader, InkDivider } from './brand-elements'; -import type { Solution } from '@/lib/constants/solutions'; - -interface SolutionValueSectionV3Props { - solution: Solution; -} - -export function SolutionValueSectionV3({ solution }: SolutionValueSectionV3Props) { - return ( -
-
- -
- - 为{solution.industry}量身定制 - - } - subtitle={solution.description} - icon={Lightbulb} - /> - -
- -
-

- - - - 行业痛点挑战 -

- -
    - {solution.challenges.map((challenge, index) => ( - - - {challenge} - - ))} -
-
- - - -
-

- - - - Novalon解决方案 -

- -
    - {solution.solutions.map((solutionItem, index) => ( - - - {solutionItem} - - ))} -
-
- -
- - {solution.valueProposition && ( - - - -
-

- {solution.valueProposition.headline} -

-
- -
- {solution.valueProposition.points.map((point, index) => ( - -
- -
-

{point.title}

-

{point.description}

- - ))} -
- - )} - - {solution.suiteCombination && ( - - - -
-
-
-

- - 核 - - 核心产品组合 -

-
- {solution.suiteCombination.primaryProducts.map((product, index) => ( - - {product} - - ))} -
-
- -
-

- - 配 - - 配套专业服务 -

-
- {solution.suiteCombination.complementaryServices.map((service, index) => ( - - {service} - - ))} -
-
-
- - - 💡 组合逻辑：{solution.suiteCombination.rationale} - -
- - )} -
-
- ); -} diff --git a/src/components/detail/detail-data-proof.tsx b/src/components/detail/detail-data-proof.tsx deleted file mode 100644 index da7dc1d..0000000 --- a/src/components/detail/detail-data-proof.tsx +++ /dev/null @@ -1,35 +0,0 @@ -'use client'; - -import { motion } from 'framer-motion'; -import type { DataProof } from '@/lib/constants/products'; - -interface DataProofGridProps { - proofs: DataProof[]; - accentColor?: string; -} - -export function DataProofGrid({ proofs, accentColor = '#C41E3A' }: DataProofGridProps) { - return ( -
- {proofs.map((proof, index) => ( - -

- {proof.value} -

-

{proof.metric}

-

{proof.description}

- - ))} -
- ); -} diff --git a/src/components/detail/detail-service-value.tsx b/src/components/detail/detail-service-value.tsx deleted file mode 100644 index 6b3e0a5..0000000 --- a/src/components/detail/detail-service-value.tsx +++ /dev/null @@ -1,128 +0,0 @@ -'use client'; - -import { motion } from 'framer-motion'; -import { - CheckCircle2, - Clock, - Target, - Rocket, - ClipboardCheck, - Headphones, - type LucideIcon, -} from 'lucide-react'; -import type { Service } from '@/lib/constants/services'; - -interface ServiceValueSectionProps { - service: Service; -} - -const processIcons: LucideIcon[] = [Target, Rocket, ClipboardCheck, Headphones]; - -export function ServiceValueSection({ service }: ServiceValueSectionProps) { - return ( -
-
- -

{service.overview}

- - -
- -

服务能力

-
    - {service.features.map((feature, index) => ( - - - {feature} - - ))} -
- -

核心价值

-
- {service.benefits.map((benefit, index) => ( - -

{benefit}

- - ))} -
- - - -

- - 服务流程 -

-
- {service.process.map((step, index) => { - const Icon = processIcons[index % processIcons.length]!; - const isLast = index === service.process.length - 1; - - return ( - - {!isLast && ( -
- )} -
- -
-
-
- - 步骤 {index + 1} - -
-

- {step.split('：')[0]} -

-

- {step.split('：')[1] || step.split(':')[1] || ''} -

-
- - ); - })} -
- -
-
-
- ); -} diff --git a/src/components/detail/detail-solution-value.tsx b/src/components/detail/detail-solution-value.tsx deleted file mode 100644 index 091dbaa..0000000 --- a/src/components/detail/detail-solution-value.tsx +++ /dev/null @@ -1,158 +0,0 @@ -'use client'; - -import { motion } from 'framer-motion'; -import { AlertTriangle, CheckCircle2, ArrowRight, Package, Wrench } from 'lucide-react'; -import type { Solution } from '@/lib/constants/solutions'; -import { PRODUCTS } from '@/lib/constants/products'; -import { SERVICES } from '@/lib/constants/services'; - -interface SolutionValueSectionProps { - solution: Solution; -} - -export function SolutionValueSection({ solution }: SolutionValueSectionProps) { - const primaryProducts = solution.suiteCombination.primaryProducts - .map((id) => PRODUCTS.find((p) => p.id === id)) - .filter(Boolean); - - const complementaryServices = solution.suiteCombination.complementaryServices - .map((id) => SERVICES.find((s) => s.id === id)) - .filter(Boolean); - - return ( -
-
- -

- {solution.valueProposition.headline} -

- - -
- {solution.valueProposition.points.map((point, index) => ( - -
- {point.icon} -
-

{point.title}

-

{point.description}

- - ))} -
- -
- -

- - 行业挑战 -

-
    - {solution.challenges.map((challenge, index) => ( - - - {challenge} - - ))} -
- - - -

- - 解决方案 -

-
    - {solution.solutions.map((sol, index) => ( - - - {sol} - - ))} -
- -
- - {(primaryProducts.length > 0 || complementaryServices.length > 0) && ( - -

推荐套装组合

-

- {solution.suiteCombination.rationale} -

- -
- {primaryProducts.map((product) => - product ? ( - - - {product.title} - - - ) : null, - )} - {complementaryServices.map((service) => - service ? ( - - - {service.title} - - - ) : null, - )} -
- - )} -
-
- ); -} diff --git a/src/components/sections/narrative/NarrativeCTA.tsx b/src/components/sections/narrative/NarrativeCTA.tsx deleted file mode 100644 index ebebd99..0000000 --- a/src/components/sections/narrative/NarrativeCTA.tsx +++ /dev/null @@ -1,122 +0,0 @@ -'use client'; - -import { useRef, useState } from 'react'; -import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion'; -import { StaticLink } from '@/components/ui/static-link'; -import { Button } from '@/components/ui/button'; -import { ArrowRight, MessageCircle } from 'lucide-react'; -import { useReducedMotion } from '@/hooks/use-reduced-motion'; - -export interface NarrativeCTAProps { - title?: string; - description?: string; - primaryLabel?: string; - primaryHref?: string; - secondaryLabel?: string; - secondaryHref?: string; -} - -/** - * 第四层：行动号召 - * 全宽深色背景 + 水墨纹理 + 双CTA按钮 - */ -export function NarrativeCTA({ - title = '一起聊聊您的数字化需求', - description = '无论您处于数字化转型的哪个阶段，我们都愿意坐下来一起想办法。首次咨询免费，无任何销售压力。', - primaryLabel = '预约免费咨询', - primaryHref = '/contact', - secondaryLabel = '了解我们的方法', - secondaryHref = '/team', -}: NarrativeCTAProps) { - const shouldReduceMotion = useReducedMotion(); - const containerRef = useRef(null); - const mouseX = useMotionValue(0); - const mouseY = useMotionValue(0); - const [isHovered, setIsHovered] = useState(false); - - const springX = useSpring(mouseX, { stiffness: 80, damping: 20 }); - const springY = useSpring(mouseY, { stiffness: 80, damping: 20 }); - - const glowX = useTransform(springX, [0, 1], ['-10%', '110%']); - const glowY = useTransform(springY, [0, 1], ['-10%', '110%']); - - function handleMouseMove(e: React.MouseEvent) { - if (!containerRef.current || shouldReduceMotion) return; - const rect = containerRef.current.getBoundingClientRect(); - mouseX.set((e.clientX - rect.left) / rect.width); - mouseY.set((e.clientY - rect.top) / rect.height); - } - - return ( -
setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} - className="relative py-24 md:py-32 overflow-hidden" - style={{ backgroundColor: 'var(--color-cta-bg)' }} - > - {/* Ink texture background */} -
- {!shouldReduceMotion && ( - - )} -
-
- -
- -

- {title} -

-

- {description} -

- -
- - -
- -
-
- ); -} diff --git a/src/components/sections/narrative/NarrativeHero.tsx b/src/components/sections/narrative/NarrativeHero.tsx deleted file mode 100644 index 5ebd68b..0000000 --- a/src/components/sections/narrative/NarrativeHero.tsx +++ /dev/null @@ -1,169 +0,0 @@ -'use client'; - -import { motion } from 'framer-motion'; -import { StaticLink } from '@/components/ui/static-link'; -import { Button } from '@/components/ui/button'; -import { InkWashBackground } from '@/components/ui/ink-wash'; -import { ArrowRight } from 'lucide-react'; -import { useReducedMotion } from '@/hooks/use-reduced-motion'; -import type { ReactNode } from 'react'; - -export interface NarrativeHeroProps { - /** Page badge/tag */ - badge?: { text: string; variant?: 'brand' | 'blue' | 'green' | 'purple' }; - /** Main headline */ - title: string; - /** Keyword highlighted in calligraphy font + brand red */ - highlight?: string; - /** Subtitle / one-line value proposition */ - subtitle: string; - /** Description paragraph */ - description?: string; - /** Primary CTA */ - primaryCta?: { label: string; href: string }; - /** Secondary CTA */ - secondaryCta?: { label: string; href: string }; - /** Right side content (card, image, etc.) */ - rightContent?: ReactNode; - /** Stats row */ - stats?: { value: string; label: string }[]; - /** Extra content below description */ - extraContent?: ReactNode; -} - -const EASE = [0.25, 1, 0.5, 1] as const; - -export function NarrativeHero({ - badge, - title, - highlight, - subtitle, - description, - primaryCta, - secondaryCta, - rightContent, - stats, - extraContent, -}: NarrativeHeroProps) { - const shouldReduceMotion = useReducedMotion(); - - const fadeUp = (delay: number) => ({ - initial: shouldReduceMotion ? {} : { opacity: 0, y: 20 }, - animate: { opacity: 1, y: 0 }, - transition: { duration: 0.6, delay, ease: EASE }, - }); - - return ( -
- - -
-
-
- {/* Badge */} - {badge && ( - - - {badge.text} - - - )} - - {/* Subtitle above title */} - - {subtitle} - - - {/* Title with calligraphy highlight */} - - {highlight ? ( - <> - {title}{' '} - {highlight} - - ) : ( - title - )} - - - {/* Description */} - {description && ( - - {description} - - )} - - {/* CTAs */} - {(primaryCta || secondaryCta) && ( - - {primaryCta && ( - - )} - {secondaryCta && ( - - )} - - )} - - {/* Extra content */} - {extraContent} -
- - {/* Right side content */} - {rightContent && ( - - {rightContent} - - )} -
-
- - {/* Stats row */} - {stats && stats.length > 0 && ( - -
-
- {stats.map((stat) => ( -
-
- {stat.value} -
-
{stat.label}
-
- ))} -
- - )} -
- ); -} diff --git a/src/components/sections/narrative/NarrativeTrust.tsx b/src/components/sections/narrative/NarrativeTrust.tsx deleted file mode 100644 index 2bd416b..0000000 --- a/src/components/sections/narrative/NarrativeTrust.tsx +++ /dev/null @@ -1,97 +0,0 @@ -'use client'; - -import { motion } from 'framer-motion'; -import { InkWashBackground } from '@/components/ui/ink-wash'; -import { useReducedMotion } from '@/hooks/use-reduced-motion'; -import type { ReactNode } from 'react'; - -export interface NarrativeTrustProps { - /** Section badge */ - badge?: string; - /** Section title */ - title: string; - /** Title highlight */ - highlight?: string; - /** Stat metrics */ - metrics?: { value: string; label: string; description?: string }[]; - /** Custom content (e.g., case studies, testimonials) */ - children?: ReactNode; - /** Background variant */ - bgVariant?: 'default' | 'section'; -} - -/** - * 第三层：信任证明 - * 数据指标 + 案例摘要 + 资质认证 - */ -export function NarrativeTrust({ - badge, - title, - highlight, - metrics, - children, - bgVariant = 'default', -}: NarrativeTrustProps) { - const shouldReduceMotion = useReducedMotion(); - - return ( -
- - -
- {/* Header */} - - {badge && ( -
- - {badge} -
- )} -

- {title} - {highlight && {highlight}} -

- - - {/* Metrics strip */} - {metrics && metrics.length > 0 && ( - - {metrics.map((metric, idx) => ( - -
- {metric.value} -
-
{metric.label}
- {metric.description && ( -
{metric.description}
- )} - - ))} - - )} - - {/* Custom content */} - {children} -
-
- ); -} diff --git a/src/components/sections/narrative/NarrativeValue.tsx b/src/components/sections/narrative/NarrativeValue.tsx deleted file mode 100644 index 10828b5..0000000 --- a/src/components/sections/narrative/NarrativeValue.tsx +++ /dev/null @@ -1,117 +0,0 @@ -'use client'; - -import { motion } from 'framer-motion'; -import { InkCard } from '@/components/ui/ink-wash'; -import { InkWashBackground } from '@/components/ui/ink-wash'; -import { useReducedMotion } from '@/hooks/use-reduced-motion'; -import type { LucideIcon } from 'lucide-react'; - -export interface ValuePoint { - icon: LucideIcon; - title: string; - description: string; - /** Optional stat number shown in corner */ - stat?: string; - statLabel?: string; -} - -export interface NarrativeValueProps { - /** Section badge */ - badge?: string; - /** Section title */ - title: string; - /** Title highlight (calligraphy) */ - highlight?: string; - /** Subtitle */ - subtitle?: string; - /** Value points */ - points: ValuePoint[]; - /** Grid columns */ - columns?: 2 | 3 | 4 | 5; - /** Background variant */ - bgVariant?: 'default' | 'section'; -} - -export function NarrativeValue({ - badge, - title, - highlight, - subtitle, - points, - columns = 3, - bgVariant = 'section', -}: NarrativeValueProps) { - const shouldReduceMotion = useReducedMotion(); - - const gridCols = { - 2: 'md:grid-cols-2', - 3: 'md:grid-cols-2 lg:grid-cols-3', - 4: 'md:grid-cols-2 lg:grid-cols-4', - 5: 'md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5', - }; - - return ( -
- - -
- {/* Header */} - - {badge && ( -
- - {badge} -
- )} -

- {title} - {highlight && {highlight}} -

- {subtitle && ( -

{subtitle}

- )} - - - {/* Value cards grid */} -
- {points.map((point, idx) => { - const Icon = point.icon; - return ( - - -
-
- -
- {point.stat && ( -
-
{point.stat}
- {point.statLabel && ( -
{point.statLabel}
- )} -
- )} -
-

{point.title}

-

{point.description}

- - - ); - })} -
-
-
- ); -} diff --git a/src/components/sections/narrative/index.ts b/src/components/sections/narrative/index.ts deleted file mode 100644 index effe16a..0000000 --- a/src/components/sections/narrative/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -export { NarrativeHero } from './NarrativeHero'; -export type { NarrativeHeroProps } from './NarrativeHero'; -export { NarrativeValue } from './NarrativeValue'; -export type { NarrativeValueProps, ValuePoint } from './NarrativeValue'; -export { NarrativeTrust } from './NarrativeTrust'; -export type { NarrativeTrustProps } from './NarrativeTrust'; -export { NarrativeCTA } from './NarrativeCTA'; -export type { NarrativeCTAProps } from './NarrativeCTA'; diff --git a/src/components/ui/theme-toggle.tsx b/src/components/ui/theme-toggle.tsx deleted file mode 100644 index 620fd36..0000000 --- a/src/components/ui/theme-toggle.tsx +++ /dev/null @@ -1,73 +0,0 @@ -'use client'; - -import { useTheme } from '@/contexts/theme-context'; -import { Sun, Moon, Monitor } from 'lucide-react'; -import { useCallback, useState, useRef, useEffect } from 'react'; - -const THEME_OPTIONS = [ - { value: 'light' as const, label: '浅色', icon: Sun }, - { value: 'dark' as const, label: '深色', icon: Moon }, - { value: 'system' as const, label: '跟随系统', icon: Monitor }, -]; - -export function ThemeToggle() { - const { theme, setTheme } = useTheme(); - const [open, setOpen] = useState(false); - const ref = useRef(null); - - useEffect(() => { - function handleClick(e: MouseEvent) { - if (ref.current && !ref.current.contains(e.target as Node)) { - setOpen(false); - } - } - document.addEventListener('mousedown', handleClick); - return () => document.removeEventListener('mousedown', handleClick); - }, []); - - const handleSelect = useCallback( - (value: 'light' | 'dark' | 'system') => { - setTheme(value); - setOpen(false); - }, - [setTheme], - ); - - const CurrentIcon = - THEME_OPTIONS.find((o) => o.value === theme)?.icon ?? Monitor; - - return ( -
- - - {open && ( -
- {THEME_OPTIONS.map((opt) => { - const Icon = opt.icon; - const isActive = theme === opt.value; - return ( - - ); - })} -
- )} -
- ); -} diff --git a/src/contexts/theme-context.test.tsx b/src/contexts/theme-context.test.tsx deleted file mode 100644 index cccddf1..0000000 --- a/src/contexts/theme-context.test.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { renderHook, act } from '@testing-library/react'; -import { ThemeProvider, useTheme } from './theme-context'; - -describe('theme-context', () => { - beforeEach(() => { - localStorage.clear(); - document.documentElement.removeAttribute('data-theme'); - }); - - it('应该提供默认 system 主题', () => { - const wrapper = ({ children }: { children: React.ReactNode }) => ( - {children} - ); - - const { result } = renderHook(() => useTheme(), { wrapper }); - - expect(result.current.theme).toBe('system'); - expect(['light', 'dark']).toContain(result.current.resolvedTheme); - }); - - it('应该支持切换到深色模式', () => { - const wrapper = ({ children }: { children: React.ReactNode }) => ( - {children} - ); - - const { result } = renderHook(() => useTheme(), { wrapper }); - - act(() => { - result.current.setTheme('dark'); - }); - - expect(result.current.theme).toBe('dark'); - expect(result.current.resolvedTheme).toBe('dark'); - expect(document.documentElement.getAttribute('data-theme')).toBe('dark'); - }); - - it('应该支持切换到浅色模式', () => { - const wrapper = ({ children }: { children: React.ReactNode }) => ( - {children} - ); - - const { result } = renderHook(() => useTheme(), { wrapper }); - - act(() => { - result.current.setTheme('dark'); - }); - - act(() => { - result.current.setTheme('light'); - }); - - expect(result.current.theme).toBe('light'); - expect(result.current.resolvedTheme).toBe('light'); - expect(document.documentElement.getAttribute('data-theme')).toBeNull(); - }); - - it('应该持久化主题选择到 localStorage', () => { - const wrapper = ({ children }: { children: React.ReactNode }) => ( - {children} - ); - - const { result } = renderHook(() => useTheme(), { wrapper }); - - act(() => { - result.current.setTheme('dark'); - }); - - expect(localStorage.getItem('novalon-theme')).toBe('dark'); - }); -}); diff --git a/src/contexts/theme-context.tsx b/src/contexts/theme-context.tsx deleted file mode 100644 index f692800..0000000 --- a/src/contexts/theme-context.tsx +++ /dev/null @@ -1,108 +0,0 @@ -'use client'; - -import { - createContext, - useCallback, - useContext, - useEffect, - useRef, - useState, - type ReactNode, -} from 'react'; - -type Theme = 'light' | 'dark' | 'system'; - -interface ThemeContextType { - theme: Theme; - resolvedTheme: 'light' | 'dark'; - setTheme: (theme: Theme) => void; -} - -const ThemeContext = createContext(undefined); - -const STORAGE_KEY = 'novalon-theme'; - -function getSystemTheme(): 'light' | 'dark' { - if (typeof window === 'undefined') {return 'light';} - return window.matchMedia('(prefers-color-scheme: dark)').matches - ? 'dark' - : 'light'; -} - -function applyTheme(resolved: 'light' | 'dark') { - const root = document.documentElement; - if (resolved === 'dark') { - root.setAttribute('data-theme', 'dark'); - } else { - root.removeAttribute('data-theme'); - } -} - -function getInitialTheme(): Theme { - if (typeof window === 'undefined') {return 'system';} - try { - const stored = localStorage.getItem(STORAGE_KEY); - if (stored === 'light' || stored === 'dark' || stored === 'system') { - return stored; - } - } catch { /* localStorage unavailable */ } - return 'system'; -} - -export function ThemeProvider({ children }: { children: ReactNode }) { - const [theme, setThemeState] = useState(getInitialTheme); - const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>(() => { - const initial = getInitialTheme(); - return initial === 'system' ? getSystemTheme() : initial; - }); - const mounted = useRef(false); - - useEffect(() => { - if (mounted.current) {return;} - mounted.current = true; - const initial = getInitialTheme(); - const resolved = initial === 'system' ? getSystemTheme() : initial; - setResolvedTheme(resolved); - applyTheme(resolved); - }, []); - - useEffect(() => { - if (theme !== 'system') {return;} - - const mql = window.matchMedia('(prefers-color-scheme: dark)'); - const handler = () => { - const resolved = getSystemTheme(); - setResolvedTheme(resolved); - applyTheme(resolved); - }; - mql.addEventListener('change', handler); - return () => mql.removeEventListener('change', handler); - }, [theme]); - - const setTheme = useCallback( - (t: Theme) => { - setThemeState(t); - const resolved = t === 'system' ? getSystemTheme() : t; - setResolvedTheme(resolved); - applyTheme(resolved); - try { - localStorage.setItem(STORAGE_KEY, t); - } catch { /* localStorage unavailable */ } - }, - [], - ); - - return ( - - {children} - - ); -} - -export function useTheme() { - const context = useContext(ThemeContext); - if (context === undefined) { - throw new Error('useTheme must be used within a ThemeProvider'); - } - return context; -}