feat(content): deepen Bain differentiation across product, solution and service pages
- Replace decorative numbering and side-stripe borders with structured copy - Add scenario positioning, capability metrics and verifiable dimensions - Refine service timelines, deliverables and case-study narratives - Update content constants to support CMS seeding
This commit is contained in:
@@ -55,7 +55,7 @@ function HeroSection({ data }: { data: AboutData }) {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
|
||||
className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-8"
|
||||
className="text-sm font-mono tracking-[0.15em] text-text-muted mb-8"
|
||||
>
|
||||
{data.heroSubtitle || ''}
|
||||
</motion.div>
|
||||
|
||||
@@ -41,6 +41,11 @@ export function CaseDetailClient({ item }: CaseDetailClientProps) {
|
||||
role: `${data.testimonial.role},${data.testimonial.company}`,
|
||||
}
|
||||
: undefined,
|
||||
projectDuration: data.projectDuration,
|
||||
departments: data.departments,
|
||||
dataScale: data.dataScale,
|
||||
businessProblem: data.businessProblem,
|
||||
verified: data.verified,
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -220,7 +220,7 @@ function ContactFormContent({ data }: { data: ContactData }) {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
|
||||
className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-8"
|
||||
className="text-sm font-mono tracking-[0.15em] text-text-muted mb-8"
|
||||
>
|
||||
{data.heroSubtitle || ''}
|
||||
</motion.div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState } from 'react';
|
||||
import { motion, useScroll, useTransform } from 'framer-motion';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { motion, useMotionValue, useTransform } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
@@ -57,12 +57,29 @@ function MagneticButton({ children, href, variant = 'primary', className }: { ch
|
||||
|
||||
function HeroSection({ heroData }: { heroData?: Record<string, any> | null }) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ['start start', 'end start'],
|
||||
});
|
||||
const y = useTransform(scrollYProgress, [0, 1], [0, 160]);
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.7], [1, 0.15]);
|
||||
const scrollProgress = useMotionValue(0);
|
||||
|
||||
useEffect(() => {
|
||||
const element = containerRef.current;
|
||||
if (!element) return;
|
||||
|
||||
const updateProgress = () => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const raw = rect.height > 0 ? -rect.top / rect.height : 0;
|
||||
scrollProgress.set(Math.max(0, Math.min(1, raw)));
|
||||
};
|
||||
|
||||
updateProgress();
|
||||
window.addEventListener('scroll', updateProgress, { passive: true });
|
||||
window.addEventListener('resize', updateProgress);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', updateProgress);
|
||||
window.removeEventListener('resize', updateProgress);
|
||||
};
|
||||
}, [scrollProgress]);
|
||||
|
||||
const y = useTransform(scrollProgress, [0, 1], [0, 160]);
|
||||
const opacity = useTransform(scrollProgress, [0, 0.7], [1, 0.15]);
|
||||
|
||||
const headingTop = heroData?.headingTop || '';
|
||||
const headingBottom = heroData?.headingBottom || '';
|
||||
@@ -376,6 +393,51 @@ function ServicesSection({ services }: { services?: Record<string, any>[] }) {
|
||||
);
|
||||
}
|
||||
|
||||
function TrustSection() {
|
||||
const items = [
|
||||
{ title: '私有化部署', desc: '核心数据不出境,满足金融、医疗、政务合规要求' },
|
||||
{ title: '资深团队', desc: '平均 10 年以上企业级系统交付经验' },
|
||||
{ title: '全栈自研', desc: '从底层架构到前端交互,核心技术自主可控' },
|
||||
{ title: '长期陪跑', desc: '上线不是终点,持续迭代陪伴业务成长' },
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-24 md:py-28 lg:py-32 overflow-hidden bg-bg-secondary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="mb-12 sm:mb-16 md:mb-20">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-px bg-brand" />
|
||||
<span className="text-[13px] tracking-[0.15em] font-medium text-brand">
|
||||
值得信赖
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="font-sans text-xl sm:text-2xl md:text-3xl lg:text-4xl font-black text-ink tracking-tight leading-tight">
|
||||
选择我们的理由
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-px bg-border-primary">
|
||||
{items.map((item, i) => (
|
||||
<StaggerReveal key={item.title} staggerDelay={0.05}>
|
||||
<div className="bg-bg-secondary p-8 sm:p-10 h-full transition-all duration-300 hover:bg-white group">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-8 h-8 flex items-center justify-center bg-brand/10 text-brand font-bold text-sm shrink-0 transition-colors duration-300 group-hover:bg-brand group-hover:text-white">
|
||||
{String(i + 1).padStart(2, '0')}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-ink mb-2">{item.title}</h3>
|
||||
<p className="text-sm text-text-secondary leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</StaggerReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CasesSection({ cases }: { cases?: Record<string, any>[] }) {
|
||||
const hasValidData = cases?.length && cases[0]?.metrics;
|
||||
const CASES = hasValidData ? cases : [];
|
||||
@@ -533,19 +595,23 @@ function CasesSection({ cases }: { cases?: Record<string, any>[] }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-10 sm:px-12 lg:px-16 pb-12 lg:pb-16 pt-10 border-t border-dark-border">
|
||||
<div className="flex items-start gap-4">
|
||||
<Quote className="w-8 h-8 shrink-0 mt-0.5 text-dark-text-muted" />
|
||||
<div>
|
||||
<p className="text-dark-text-secondary italic leading-relaxed mb-4 text-sm">
|
||||
“{caseItem.quote}”
|
||||
</p>
|
||||
<p className="text-xs text-dark-text-muted">
|
||||
— {caseItem.author},{caseItem.company}
|
||||
</p>
|
||||
{caseItem.testimonial?.quote && (
|
||||
<div className="px-10 sm:px-12 lg:px-16 pb-12 lg:pb-16 pt-10 border-t border-dark-border">
|
||||
<div className="flex items-start gap-4">
|
||||
<Quote className="w-8 h-8 shrink-0 mt-0.5 text-dark-text-muted" />
|
||||
<div>
|
||||
<p className="text-dark-text-secondary italic leading-relaxed mb-4 text-sm">
|
||||
“{caseItem.testimonial.quote}”
|
||||
</p>
|
||||
<p className="text-xs text-dark-text-muted">
|
||||
— {caseItem.testimonial.author}
|
||||
{caseItem.testimonial.role && `,${caseItem.testimonial.role}`}
|
||||
{caseItem.testimonial.company && ` · ${caseItem.testimonial.company}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
</ScrollReveal>
|
||||
@@ -663,6 +729,7 @@ export default function HomeContentV13({ services, cases, stats, heroData }: {
|
||||
<main>
|
||||
<HeroSection heroData={heroData} />
|
||||
<ServicesSection services={services} />
|
||||
<TrustSection />
|
||||
<CasesSection cases={cases} />
|
||||
<ApproachStrip stats={stats} />
|
||||
<CTASection heroData={heroData} />
|
||||
|
||||
@@ -3,22 +3,21 @@
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import { EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Package, Cpu, BarChart3, Users, Settings, FileText, CheckCircle2 } from 'lucide-react';
|
||||
import { ArrowRight, Package, Cpu, BarChart3, Users, Settings, FileText } from 'lucide-react';
|
||||
import type { Product } from '@/lib/constants/products';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const EASE_SPRING = { type: 'spring', stiffness: 300, damping: 30 } as const;
|
||||
|
||||
const PRODUCT_ICONS: Record<string, React.ReactNode> = {
|
||||
'睿新ERP管理系统': <Package className="w-7 h-7" />,
|
||||
'睿视商业智能分析平台': <BarChart3 className="w-7 h-7" />,
|
||||
'睿新客户关系管理系统': <Users className="w-7 h-7" />,
|
||||
'睿新协同办公平台': <Settings className="w-7 h-7" />,
|
||||
'睿新内容管理系统': <FileText className="w-7 h-7" />,
|
||||
'睿新供应链数字化平台': <Cpu className="w-7 h-7" />,
|
||||
'睿新ERP管理系统': <Package className="w-5 h-5" />,
|
||||
'睿新商业智能分析平台': <BarChart3 className="w-5 h-5" />,
|
||||
'睿新客户关系管理系统': <Users className="w-5 h-5" />,
|
||||
'睿新协同办公平台': <Settings className="w-5 h-5" />,
|
||||
'睿新内容管理系统': <FileText className="w-5 h-5" />,
|
||||
'睿新供应链数字化平台': <Cpu className="w-5 h-5" />,
|
||||
};
|
||||
|
||||
function useCountUp(target: number, start: boolean, duration: number = 2000) {
|
||||
@@ -80,25 +79,16 @@ function HeroSection() {
|
||||
<section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-24 sm:py-28 md:py-32 lg:py-40">
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 1.1, ease: EASE_OUT }}
|
||||
className="mb-10"
|
||||
>
|
||||
<SectionLabel>Product Matrix</SectionLabel>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 70 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1.2, delay: 0.15, ease: EASE_OUT }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-ink leading-[0.92] tracking-tighter mb-8 sm:mb-10 md:mb-12"
|
||||
>
|
||||
<div className="block">覆盖企业数字化</div>
|
||||
<div className="block">用自研产品组合</div>
|
||||
<div className="block mt-5">
|
||||
<span className="relative inline-block">
|
||||
<span className="text-brand font-extrabold">全场景的</span>
|
||||
<span className="text-brand font-extrabold">支撑企业</span>
|
||||
<motion.span
|
||||
className="absolute -bottom-3 left-0 w-full h-[3px] bg-brand"
|
||||
style={{ transformOrigin: 'left' }}
|
||||
@@ -108,7 +98,7 @@ function HeroSection() {
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div className="block mt-5">产品矩阵</div>
|
||||
<div className="block mt-5">核心系统升级</div>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
@@ -154,90 +144,130 @@ function HeroSection() {
|
||||
);
|
||||
}
|
||||
|
||||
function ProductCard({ product, index }: { product: Product; index: number }) {
|
||||
const productIcon = PRODUCT_ICONS[product.title] || <Package className="w-7 h-7" />;
|
||||
|
||||
const colorMap: Record<string, { color: string; bg: string; border: string }> = {
|
||||
enterprise: {
|
||||
color: '#C41E3A',
|
||||
bg: 'bg-brand-soft',
|
||||
border: 'group-hover:border-brand/30',
|
||||
},
|
||||
specialized: {
|
||||
color: '#3b82f6',
|
||||
bg: 'bg-accent-blue-soft',
|
||||
border: 'group-hover:border-accent-blue/30',
|
||||
},
|
||||
};
|
||||
|
||||
const colors = colorMap[product.categoryId] ?? colorMap.enterprise!;
|
||||
function ProductCard({ product }: { product: Product }) {
|
||||
const bundleLabel = product.bundle === 'enterprise' ? '企业套装' : '专业产品';
|
||||
|
||||
return (
|
||||
<a
|
||||
<motion.a
|
||||
href={`/products/${product.id}`}
|
||||
className="group relative block transition-all duration-600 hover:bg-bg-secondary overflow-hidden bg-white border border-border-primary hover:border-brand/30"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.6, ease: EASE_OUT }}
|
||||
className="group block overflow-hidden border border-border-primary hover:border-border-secondary bg-white hover:bg-bg-secondary transition-all duration-500 flex flex-col h-full"
|
||||
>
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full w-1 scale-y-0 group-hover:scale-y-100 transition-transform duration-700 origin-top"
|
||||
style={{ backgroundColor: colors.color }}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 p-8 lg:p-10">
|
||||
<div className="flex items-start justify-between mb-8">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.08, y: -3 }}
|
||||
transition={EASE_SPRING}
|
||||
className={cn('w-14 h-14 flex items-center justify-center rounded-2xl', colors.bg)}
|
||||
style={{ color: colors.color }}
|
||||
>
|
||||
{productIcon}
|
||||
</motion.div>
|
||||
<span className="text-7xl font-bold text-text-muted/10 group-hover:text-text-muted/20 transition-all duration-500 tracking-tighter leading-none">
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<div className="p-6 sm:p-7 lg:p-8 flex flex-col flex-1">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<div className="text-xs text-text-muted mb-1">{bundleLabel}</div>
|
||||
<h3 className="text-lg font-bold text-text-primary">{product.title}</h3>
|
||||
</div>
|
||||
<span className="px-2 py-1 text-xs bg-brand/10 text-brand">{bundleLabel}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{product.tags.slice(0, 2).map(tag => (
|
||||
<span key={tag} className="px-2.5 py-1 text-xs text-text-muted border border-border-primary group-hover:border-border-secondary group-hover:text-text-secondary transition-all duration-300">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl lg:text-2xl font-bold text-ink mb-4 group-hover:translate-x-1.5 transition-transform duration-500">
|
||||
{product.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-text-secondary leading-relaxed mb-8 text-[15px]">
|
||||
{product.description}
|
||||
<p className="text-sm text-text-secondary mb-4 leading-relaxed flex-1">
|
||||
{product.scenario || product.description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-8">
|
||||
{product.features.slice(0, 3).map((feature) => (
|
||||
<span key={feature} className="flex items-center gap-1.5 text-xs text-text-muted">
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-brand/70" />
|
||||
{feature}
|
||||
</span>
|
||||
<div className="grid grid-cols-3 gap-2 mb-4">
|
||||
{product.metrics?.map((m) => (
|
||||
<div key={m.label} className="text-center p-2 bg-bg-secondary">
|
||||
<div className="text-lg font-bold text-text-primary">{m.value}</div>
|
||||
<div className="text-xs text-text-muted">{m.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="inline-flex items-center gap-2.5 text-sm font-bold"
|
||||
style={{ color: colors.color }}
|
||||
whileHover={{ x: 6 }}
|
||||
transition={EASE_SPRING}
|
||||
>
|
||||
<span>了解详情</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</motion.div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{product.capabilities?.map((cap) => (
|
||||
<span key={cap} className="px-2 py-1 text-xs border border-border-primary text-text-secondary">
|
||||
{cap}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</motion.a>
|
||||
);
|
||||
}
|
||||
|
||||
function BundleOverview({ products }: { products: Product[] }) {
|
||||
const enterpriseProducts = products.filter((p) => p.bundle === 'enterprise');
|
||||
const standaloneProducts = products.filter((p) => p.bundle === 'standalone');
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-white">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="max-w-3xl mb-12 sm:mb-16 md:mb-20">
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95] mb-6">
|
||||
两套产品体系,<span className="text-brand">覆盖不同场景</span>
|
||||
</h2>
|
||||
<p className="text-lg text-text-secondary leading-relaxed">
|
||||
企业套装以组合形式解决核心管理问题,专业产品聚焦独立场景深度赋能。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-px bg-border-primary">
|
||||
<div className="bg-bg-secondary p-8 sm:p-10 lg:p-12">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-brand-soft flex items-center justify-center text-brand">
|
||||
<Package className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-ink">企业套装</h3>
|
||||
<span className="px-2 py-1 text-xs bg-brand/10 text-brand">6 款产品</span>
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary leading-relaxed mb-6">
|
||||
覆盖企业数字化核心场景,产品之间数据互通、能力互补,常以组合形式出现在行业解决方案中。
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
{enterpriseProducts.map((p) => (
|
||||
<div key={p.id} className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-white border border-border-primary flex items-center justify-center text-text-secondary">
|
||||
{PRODUCT_ICONS[p.title] || <Package className="w-4 h-4" />}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-ink">{p.title}</div>
|
||||
<div className="text-xs text-text-muted">{p.scenario}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-8 sm:p-10 lg:p-12">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-accent-blue-soft flex items-center justify-center text-accent-blue">
|
||||
<Cpu className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-ink">专业产品</h3>
|
||||
<span className="px-2 py-1 text-xs bg-accent-blue/10 text-accent-blue">独立部署</span>
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary leading-relaxed mb-6">
|
||||
聚焦特定领域的高复杂度需求,以独立产品形态提供专业能力,满足安全与合规的严苛要求。
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
{standaloneProducts.map((p) => (
|
||||
<div key={p.id} className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-bg-secondary border border-border-primary flex items-center justify-center text-text-secondary">
|
||||
{PRODUCT_ICONS[p.title] || <Cpu className="w-4 h-4" />}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-ink">{p.title}</div>
|
||||
<div className="text-xs text-text-muted">{p.scenario}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function EnterpriseProductsSection({ products }: { products: Product[] }) {
|
||||
const enterpriseProducts = products.filter(p => p.categoryId === 'enterprise');
|
||||
const enterpriseProducts = products.filter((p) => p.bundle === 'enterprise');
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-secondary">
|
||||
@@ -251,12 +281,9 @@ function EnterpriseProductsSection({ products }: { products: Product[] }) {
|
||||
<div className="w-16 h-16 rounded-2xl bg-brand-soft flex items-center justify-center text-brand">
|
||||
<Package className="w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<SectionLabel>Enterprise Suite</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
|
||||
企业套装
|
||||
</h2>
|
||||
</div>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
|
||||
企业套装
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-text-secondary text-lg leading-relaxed max-w-2xl">
|
||||
覆盖企业管理核心场景,从ERP到协同办公,六款产品互为补充,形成完整的企业数字化底座。
|
||||
@@ -269,8 +296,8 @@ function EnterpriseProductsSection({ products }: { products: Product[] }) {
|
||||
staggerDelay={0.08}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{enterpriseProducts.map((product, index) => (
|
||||
<ProductCard key={product.id} product={product} index={index} />
|
||||
{enterpriseProducts.map((product) => (
|
||||
<ProductCard key={product.id} product={product} />
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
@@ -279,7 +306,7 @@ function EnterpriseProductsSection({ products }: { products: Product[] }) {
|
||||
}
|
||||
|
||||
function SpecializedProductsSection({ products }: { products: Product[] }) {
|
||||
const specializedProducts = products.filter(p => p.categoryId === 'specialized');
|
||||
const specializedProducts = products.filter((p) => p.bundle === 'standalone');
|
||||
|
||||
if (specializedProducts.length === 0) return null;
|
||||
|
||||
@@ -295,12 +322,9 @@ function SpecializedProductsSection({ products }: { products: Product[] }) {
|
||||
<div className="w-16 h-16 rounded-2xl bg-accent-blue-soft flex items-center justify-center text-accent-blue">
|
||||
<Cpu className="w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<SectionLabel>Specialized Products</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
|
||||
专业产品
|
||||
</h2>
|
||||
</div>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
|
||||
专业产品
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-text-secondary text-lg leading-relaxed max-w-2xl">
|
||||
聚焦特定领域的深度产品,以独立部署和专业能力满足企业的专项需求。
|
||||
@@ -313,8 +337,8 @@ function SpecializedProductsSection({ products }: { products: Product[] }) {
|
||||
staggerDelay={0.08}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{specializedProducts.map((product, index) => (
|
||||
<ProductCard key={product.id} product={product} index={index} />
|
||||
{specializedProducts.map((product) => (
|
||||
<ProductCard key={product.id} product={product} />
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
@@ -337,15 +361,6 @@ function SuiteCombosSection({ products }: { products: Product[] }) {
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20 md:mb-20">
|
||||
<div className="flex justify-center mb-7">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Recommended Combos
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
|
||||
推荐产品组合
|
||||
</h2>
|
||||
@@ -361,18 +376,16 @@ function SuiteCombosSection({ products }: { products: Product[] }) {
|
||||
>
|
||||
{SUITE_COMBOS.map((combo, idx) => {
|
||||
const comboProducts = combo.products
|
||||
.map(pid => products.find(p => p.id === pid))
|
||||
.map((pid) => products.find((p) => p.id === pid))
|
||||
.filter(Boolean);
|
||||
|
||||
return (
|
||||
<a
|
||||
key={idx}
|
||||
href="/contact"
|
||||
className="group relative p-10 lg:p-12 bg-white hover:bg-bg-secondary transition-all duration-500 overflow-hidden"
|
||||
className="group p-10 lg:p-12 bg-white hover:bg-bg-secondary transition-all duration-500 overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div>
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="flex -space-x-3">
|
||||
{comboProducts.map((p, pIdx) => p && (
|
||||
@@ -424,16 +437,6 @@ function CTASection() {
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto">
|
||||
<div className="flex justify-center mb-7">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Get Started
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6 sm:mb-8">
|
||||
找到适合你的<br />
|
||||
<span className="text-brand">数字化方案</span>
|
||||
@@ -467,6 +470,7 @@ export default function ProductsContentV3({ products: productsProp }: { products
|
||||
return (
|
||||
<main>
|
||||
<HeroSection />
|
||||
<BundleOverview products={products} />
|
||||
<EnterpriseProductsSection products={products} />
|
||||
<SpecializedProductsSection products={products} />
|
||||
<SuiteCombosSection products={products} />
|
||||
|
||||
@@ -469,14 +469,12 @@ function RelatedServicesSection({ currentId }: { currentId: string }) {
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<StaggerReveal staggerDelay={0.1}>
|
||||
{related.map((s, i) => (
|
||||
{related.map((s) => (
|
||||
<ServiceCard
|
||||
key={s.id}
|
||||
number={String(i + 1).padStart(2, '0')}
|
||||
title={s.title}
|
||||
description={s.desc}
|
||||
href={`/services/${s.id}`}
|
||||
color="brand"
|
||||
/>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowUpRight, CheckCircle2 } from 'lucide-react';
|
||||
import { ScrollProgress } from '@/components/ui/scroll-progress';
|
||||
import type { Service, CaseStudy } from '@/lib/constants/services';
|
||||
|
||||
const EASE_OUT = [0.22, 1, 0.36, 1] as const;
|
||||
@@ -15,20 +16,11 @@ function DetailHero({ service }: { service: Service }) {
|
||||
<section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
|
||||
className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-8"
|
||||
>
|
||||
Professional Services
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.2, ease: EASE_OUT }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.88] tracking-tightest mb-10 sm:mb-12 md:mb-16"
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.92] tracking-tightest mb-10 sm:mb-12 md:mb-16"
|
||||
>
|
||||
<div className="block">{service.title}</div>
|
||||
<div className="block mt-4 sm:mt-6">
|
||||
@@ -123,9 +115,6 @@ function OverviewSection({ service }: { service: Service }) {
|
||||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||||
className="lg:col-span-5"
|
||||
>
|
||||
<div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
|
||||
Overview
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
|
||||
解决什么问题
|
||||
</h2>
|
||||
@@ -170,9 +159,6 @@ function FeaturesSection({ service }: { service: Service }) {
|
||||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||||
className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
|
||||
>
|
||||
<div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
|
||||
Capabilities
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
|
||||
核心能力
|
||||
</h2>
|
||||
@@ -193,10 +179,8 @@ function FeaturesSection({ service }: { service: Service }) {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.6, delay: index * 0.06, ease: EASE_OUT }}
|
||||
className="group relative p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary bg-white"
|
||||
className="group relative p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-white"
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-0 w-[2px] group-hover:h-full transition-all duration-500 origin-top bg-brand" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="text-3xl mb-6">{icon}</div>
|
||||
<h3 className="text-lg sm:text-xl font-bold mb-3 text-ink group-hover:text-brand transition-colors duration-300">
|
||||
@@ -231,9 +215,6 @@ function ProcessSection({ service }: { service: Service }) {
|
||||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||||
className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
|
||||
>
|
||||
<div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
|
||||
Process
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
|
||||
服务流程
|
||||
</h2>
|
||||
@@ -252,13 +233,12 @@ function ProcessSection({ service }: { service: Service }) {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.6, delay: index * 0.08, ease: EASE_OUT }}
|
||||
className="relative group p-6 sm:p-8 bg-white"
|
||||
className="relative group p-6 sm:p-8 bg-white hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 transition-all duration-500"
|
||||
>
|
||||
<div className={`text-4xl sm:text-5xl font-black font-mono mb-6 ${
|
||||
index === 0 ? 'text-brand' : 'text-ink/[0.06]'
|
||||
}`}>
|
||||
0{index + 1}
|
||||
</div>
|
||||
<div
|
||||
className="w-2 h-2 rounded-full mb-6"
|
||||
style={{ backgroundColor: index === 0 ? '#C41E3A' : 'var(--color-border-primary)' }}
|
||||
/>
|
||||
<h3 className="text-lg font-bold mb-2 text-ink group-hover:text-brand transition-colors duration-300">
|
||||
{desc ? title : step.slice(0, 6)}
|
||||
</h3>
|
||||
@@ -287,9 +267,6 @@ function CaseStudiesSection({ caseStudies = [] }: { caseStudies?: CaseStudy[] })
|
||||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||||
className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
|
||||
>
|
||||
<div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
|
||||
Case Studies
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
|
||||
真实案例,<br className="sm:hidden" />可衡量的成果
|
||||
</h2>
|
||||
@@ -304,13 +281,12 @@ function CaseStudiesSection({ caseStudies = [] }: { caseStudies?: CaseStudy[] })
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.6, delay: i * 0.08, ease: EASE_OUT }}
|
||||
className="group relative block p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary bg-white border border-transparent hover:border-border-primary"
|
||||
className="group relative block p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-white border border-transparent hover:border-border-primary"
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-0 w-[2px] group-hover:h-full transition-all duration-500 origin-top bg-brand" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<span className="text-[11px] tracking-[0.25em] uppercase font-medium text-brand">
|
||||
<span className="text-xs font-medium text-brand">
|
||||
{cs.industry}
|
||||
</span>
|
||||
<span className="text-border-primary">•</span>
|
||||
@@ -383,6 +359,7 @@ function CTASection() {
|
||||
export default function ServiceDetailContentV4({ service }: { service: Service }) {
|
||||
return (
|
||||
<main className="min-h-screen bg-white text-ink">
|
||||
<ScrollProgress />
|
||||
<DetailHero service={service} />
|
||||
<OverviewSection service={service} />
|
||||
<FeaturesSection service={service} />
|
||||
|
||||
@@ -1,48 +1,53 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowUpRight, Code, BarChart3, Lightbulb, Puzzle, type LucideIcon } from 'lucide-react';
|
||||
import { ArrowUpRight, CheckCircle2 } from 'lucide-react';
|
||||
import type { Service } from '@/lib/constants/services';
|
||||
|
||||
const EASE_OUT = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
/** Icon name-to-component mapping for CMS string-based icons */
|
||||
const ICON_MAP: Record<string, LucideIcon> = {
|
||||
Lightbulb,
|
||||
Code,
|
||||
BarChart3,
|
||||
Puzzle,
|
||||
};
|
||||
|
||||
/** UI metadata keyed by service ID — presentation-only fields not stored in CMS */
|
||||
const SERVICE_UI_META: Record<string, { subtitle: string; metrics: { value: string; label: string }[] }> = {
|
||||
consulting: { subtitle: 'Strategy Consulting', metrics: [{ value: '90%+', label: '方案落地率' }, { value: '50+', label: '咨询项目' }] },
|
||||
software: { subtitle: 'Enterprise Software', metrics: [{ value: '95%+', label: '准时交付率' }, { value: 'A+', label: '代码质量' }] },
|
||||
data: { subtitle: 'Technology Services', metrics: [{ value: '100+', label: '技术方案' }, { value: '24/7', label: '运维支持' }] },
|
||||
solutions: { subtitle: 'AI Empowerment', metrics: [{ value: '30+', label: 'AI 场景' }, { value: '85%', label: '效率提升' }] },
|
||||
const SERVICE_UI_META: Record<string, { metrics: { value: string; label: string }[] }> = {
|
||||
consulting: { metrics: [{ value: '90%+', label: '方案落地率' }, { value: '50+', label: '咨询项目' }] },
|
||||
software: { metrics: [{ value: '95%+', label: '准时交付率' }, { value: 'A+', label: '代码质量' }] },
|
||||
data: { metrics: [{ value: '100+', label: '技术方案' }, { value: '24/7', label: '运维支持' }] },
|
||||
solutions: { metrics: [{ value: '30+', label: 'AI 场景' }, { value: '85%', label: '效率提升' }] },
|
||||
};
|
||||
|
||||
function mapServicesToCards(services: Service[]) {
|
||||
return services.map((svc, i) => {
|
||||
return services.map((svc) => {
|
||||
const uiMeta = SERVICE_UI_META[svc.id];
|
||||
return {
|
||||
number: String(i + 1).padStart(2, '0'),
|
||||
id: svc.id,
|
||||
title: svc.title,
|
||||
subtitle: uiMeta?.subtitle ?? '',
|
||||
desc: svc.description,
|
||||
href: `/services/${svc.id}`,
|
||||
icon: ICON_MAP[svc.icon] ?? Lightbulb,
|
||||
highlights: svc.features?.slice(0, 4) ?? [],
|
||||
description: svc.description,
|
||||
capabilities: svc.capabilities?.slice(0, 4) ?? [],
|
||||
metrics: uiMeta?.metrics ?? [],
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const SERVICE_PROCESS = [
|
||||
{ step: '01', title: '需求分析', desc: '深入了解业务场景与真实痛点,而非凭空假设' },
|
||||
{ step: '02', title: '方案设计', desc: '量身定制技术路线,拒绝千篇一律的模板' },
|
||||
{ step: '03', title: '敏捷交付', desc: '快速迭代,每个冲刺周期都有可交付成果' },
|
||||
{ step: '04', title: '持续支持', desc: '上线不是终点,长期陪伴才是真正的承诺' },
|
||||
{
|
||||
phase: '需求分析',
|
||||
duration: '2-3 周',
|
||||
deliverables: ['业务痛点清单', '现状评估报告', '项目范围说明书'],
|
||||
},
|
||||
{
|
||||
phase: '方案设计',
|
||||
duration: '4-6 周',
|
||||
deliverables: ['系统架构设计', '实施路线图', '投资测算模型'],
|
||||
},
|
||||
{
|
||||
phase: '敏捷交付',
|
||||
duration: '3-6 个月',
|
||||
deliverables: ['分阶段上线版本', '用户培训材料', '数据迁移方案'],
|
||||
},
|
||||
{
|
||||
phase: '持续支持',
|
||||
duration: '长期',
|
||||
deliverables: ['运维监控体系', '迭代优化计划', '知识转移文档'],
|
||||
},
|
||||
];
|
||||
|
||||
const SERVICE_MODES = [
|
||||
@@ -68,20 +73,11 @@ function HeroSection() {
|
||||
<section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
|
||||
className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-8"
|
||||
>
|
||||
Professional Services
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.2, ease: EASE_OUT }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.88] tracking-tightest mb-10 sm:mb-12 md:mb-16"
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.92] tracking-tightest mb-10 sm:mb-12 md:mb-16"
|
||||
>
|
||||
<div className="block">从规划到运维</div>
|
||||
<div className="block mt-4 sm:mt-6">
|
||||
@@ -189,82 +185,56 @@ function ServicesGridSection({ services }: { services?: Service[] }) {
|
||||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||||
className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
|
||||
>
|
||||
<div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
|
||||
Service Capabilities
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
|
||||
四大核心服务,<br className="sm:hidden" />覆盖数字化全链路
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-px bg-border-primary">
|
||||
{displayServices.map((service, i) => {
|
||||
const Icon = service.icon;
|
||||
return (
|
||||
<motion.a
|
||||
key={i}
|
||||
href={service.href}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.6, delay: i * 0.08, ease: EASE_OUT }}
|
||||
className="group relative block p-8 sm:p-10 md:p-12 transition-all duration-500 hover:bg-bg-secondary bg-white border border-transparent hover:border-border-primary"
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-0 w-[2px] group-hover:h-full transition-all duration-500 origin-top bg-brand" />
|
||||
{displayServices.map((service, i) => (
|
||||
<motion.a
|
||||
key={service.id}
|
||||
href={`/services/${service.id}`}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.6, delay: i * 0.08, ease: EASE_OUT }}
|
||||
className="group relative block p-8 sm:p-10 md:p-12 transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-white border border-transparent hover:border-border-primary"
|
||||
>
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-xl sm:text-2xl font-bold text-ink group-hover:text-brand transition-colors duration-300 mb-3">
|
||||
{service.title}
|
||||
</h3>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-start justify-between mb-8">
|
||||
<div className={`w-12 h-12 flex items-center justify-center ${
|
||||
i === 0 ? 'text-brand' : 'text-text-secondary'
|
||||
}`}>
|
||||
<Icon className="w-6 h-6" strokeWidth={1.5} />
|
||||
<p className="text-text-secondary leading-relaxed mb-6 text-[15px]">
|
||||
{service.description}
|
||||
</p>
|
||||
|
||||
<ul className="space-y-2 mb-6">
|
||||
{service.capabilities.map((cap) => (
|
||||
<li key={cap} className="flex items-start gap-2 text-sm text-text-secondary">
|
||||
<CheckCircle2 className="w-4 h-4 text-brand shrink-0 mt-0.5" />
|
||||
{cap}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="flex gap-6 pt-5 border-t border-border-primary mb-6">
|
||||
{service.metrics.map((m) => (
|
||||
<div key={m.label}>
|
||||
<div className="text-xl font-bold text-ink">{m.value}</div>
|
||||
<div className="text-xs text-text-muted mt-1">{m.label}</div>
|
||||
</div>
|
||||
<span className="text-5xl sm:text-6xl font-black text-ink/[0.04] tracking-tighter leading-none">
|
||||
{service.number}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="text-[11px] tracking-[0.3em] uppercase text-text-muted mb-3 font-semibold">
|
||||
{service.subtitle}
|
||||
</div>
|
||||
<h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-ink group-hover:text-brand transition-colors duration-300">
|
||||
{service.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-text-secondary leading-relaxed mb-6 text-[15px]">
|
||||
{service.desc}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{service.highlights.map((h, j) => (
|
||||
<span
|
||||
key={j}
|
||||
className="px-3 py-1 text-xs text-text-secondary border border-border-primary group-hover:border-ink/20 group-hover:text-ink transition-all duration-300 font-medium"
|
||||
>
|
||||
{h}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8 pt-5 border-t border-border-primary mb-6">
|
||||
{service.metrics.map((m, j) => (
|
||||
<div key={j}>
|
||||
<div className="text-xl font-bold text-ink">{m.value}</div>
|
||||
<div className="text-xs text-text-muted mt-1">{m.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors duration-300">
|
||||
<span>了解详情</span>
|
||||
<ArrowUpRight className="w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.a>
|
||||
);
|
||||
})}
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors duration-300">
|
||||
<span>了解详情</span>
|
||||
<ArrowUpRight className="w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
</motion.a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -284,33 +254,26 @@ function ProcessModesSection() {
|
||||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||||
className="lg:col-span-7"
|
||||
>
|
||||
<div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
|
||||
Our Process
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-ink tracking-tight leading-[0.95] mb-10 sm:mb-14">
|
||||
我们的做事方式
|
||||
</h2>
|
||||
|
||||
<div className="space-y-0">
|
||||
{SERVICE_PROCESS.map((item, idx) => (
|
||||
<div
|
||||
key={item.step}
|
||||
className="relative pl-8 sm:pl-12 pb-8 sm:pb-10 last:pb-0"
|
||||
>
|
||||
<div className="absolute left-0 top-3 bottom-0 w-px bg-border-primary last:hidden" />
|
||||
<div className={`absolute left-0 top-3 w-2.5 h-2.5 rounded-full -translate-x-1/2 ${
|
||||
idx === 0 ? 'bg-brand' : 'bg-text-muted'
|
||||
}`} />
|
||||
<div className="relative">
|
||||
{SERVICE_PROCESS.map((step) => (
|
||||
<div key={step.phase} className="relative pl-8 sm:pl-12 pb-10 sm:pb-12 last:pb-0">
|
||||
<div className="absolute left-0 top-1.5 bottom-0 w-px bg-border-primary last:hidden" />
|
||||
<div className="absolute left-0 top-1.5 w-2.5 h-2.5 rounded-full -translate-x-1/2 bg-brand" />
|
||||
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="text-2xl sm:text-3xl font-black text-ink/[0.06] font-mono shrink-0 leading-none w-14">
|
||||
{item.step}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg sm:text-xl font-bold text-ink mb-2">{item.title}</h3>
|
||||
<p className="text-text-secondary leading-relaxed text-sm sm:text-base">{item.desc}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<h3 className="text-lg sm:text-xl font-bold text-ink">{step.phase}</h3>
|
||||
<span className="text-xs text-text-muted">{step.duration}</span>
|
||||
</div>
|
||||
<div className="text-xs text-text-muted mb-2">阶段产出</div>
|
||||
<ul className="space-y-1">
|
||||
{step.deliverables.map((d) => (
|
||||
<li key={d} className="text-sm text-text-secondary">{d}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -324,9 +287,6 @@ function ProcessModesSection() {
|
||||
transition={{ duration: 0.8, delay: 0.15, ease: EASE_OUT }}
|
||||
className="lg:col-span-5"
|
||||
>
|
||||
<div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
|
||||
Engagement Models
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-ink tracking-tight leading-[0.95] mb-10 sm:mb-14">
|
||||
合作方式
|
||||
</h2>
|
||||
@@ -335,10 +295,8 @@ function ProcessModesSection() {
|
||||
{SERVICE_MODES.map((mode) => (
|
||||
<div
|
||||
key={mode.title}
|
||||
className="group relative p-6 sm:p-7 border border-border-primary bg-white hover:bg-bg-secondary hover:border-ink/20 transition-all duration-300"
|
||||
className="group relative p-6 sm:p-7 border border-border-primary bg-white hover:bg-bg-secondary hover:border-brand/20 hover:shadow-md transition-all duration-300"
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-1 h-0 bg-brand group-hover:h-full transition-all duration-500" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-xl font-bold text-ink mb-3 group-hover:text-brand transition-colors duration-300">
|
||||
{mode.title}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowUpRight, Factory, ShoppingCart, Heart, GraduationCap, Sparkles, Shield, Truck, type LucideIcon } from 'lucide-react';
|
||||
import { ArrowUpRight, Factory, ShoppingCart, Heart, GraduationCap, Shield, Truck, type LucideIcon } from 'lucide-react';
|
||||
import { type Solution } from '@/lib/constants/solutions';
|
||||
import type { Product } from '@/lib/constants/products';
|
||||
|
||||
@@ -21,20 +21,11 @@ function HeroSection() {
|
||||
<section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
|
||||
className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-8"
|
||||
>
|
||||
Industry Solutions
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.2, ease: EASE_OUT }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.88] tracking-tightest mb-10 sm:mb-12 md:mb-16"
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.92] tracking-tightest mb-10 sm:mb-12 md:mb-16"
|
||||
>
|
||||
<div className="block">深耕行业场景的</div>
|
||||
<div className="block mt-4 sm:mt-6">
|
||||
@@ -59,9 +50,9 @@ function HeroSection() {
|
||||
transition={{ duration: 0.8, delay: 0.5, ease: EASE_OUT }}
|
||||
className="text-lg md:text-xl text-text-secondary max-w-2xl leading-relaxed mb-12 sm:mb-16"
|
||||
>
|
||||
端到端交付,推荐套装组合 + 配套服务包。
|
||||
端到端交付可量化的业务成果。
|
||||
<br className="hidden sm:block" />
|
||||
基于自研产品矩阵,为制造、零售、教育、医疗、金融、物流六大行业量身定制最佳实践。
|
||||
基于自研产品矩阵,为制造、零售、教育、医疗、金融、物流六大行业沉淀最佳实践。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
@@ -119,6 +110,9 @@ function HeroSection() {
|
||||
function SolutionCard({ solution, index, products }: { solution: Solution; index: number; products?: Product[] }) {
|
||||
const productLookup = products ?? [];
|
||||
const Icon = INDUSTRY_ICONS[solution.industry] || Factory;
|
||||
const recommendedProductNames = (solution.recommendedProducts ?? [])
|
||||
.map((pid) => productLookup.find((p) => p.id === pid)?.title)
|
||||
.filter(Boolean) as string[];
|
||||
|
||||
return (
|
||||
<motion.a
|
||||
@@ -127,69 +121,41 @@ function SolutionCard({ solution, index, products }: { solution: Solution; index
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.6, delay: index * 0.08, ease: EASE_OUT }}
|
||||
className="group relative block transition-all duration-500 hover:bg-bg-secondary bg-white border border-border-primary hover:border-ink/20"
|
||||
className="group relative block transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-white border border-border-primary hover:border-brand/20"
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-0 w-[2px] group-hover:h-full transition-all duration-500 origin-top bg-brand" />
|
||||
|
||||
<div className="relative z-10 p-8 sm:p-10 md:p-12">
|
||||
<div className="flex items-start justify-between mb-8">
|
||||
<div className="w-12 h-12 flex items-center justify-center text-text-secondary group-hover:text-brand transition-colors duration-300">
|
||||
<Icon className="w-6 h-6" strokeWidth={1.5} />
|
||||
</div>
|
||||
<span className="text-5xl sm:text-6xl font-black text-ink/[0.04] tracking-tighter leading-none">
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<span className="inline-block px-3 py-1 text-[11px] font-bold mb-4 text-brand border border-brand/20 bg-brand/[0.05]">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Icon className="w-5 h-5 text-text-muted" strokeWidth={1.5} />
|
||||
<h3 className="text-lg font-bold text-text-primary">
|
||||
{solution.industry}
|
||||
</span>
|
||||
<div className="text-text-muted text-sm tracking-widest uppercase mb-2">
|
||||
{solution.subtitle}
|
||||
</div>
|
||||
<h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-ink group-hover:text-brand transition-colors duration-300 leading-tight">
|
||||
{solution.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-text-secondary leading-relaxed mb-6 text-[15px]">
|
||||
{solution.description}
|
||||
</p>
|
||||
<div className="mb-4">
|
||||
<div className="text-xs text-text-muted mb-2">核心痛点</div>
|
||||
<p className="text-sm text-text-secondary leading-relaxed">
|
||||
{solution.painPoints?.join('、')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 mb-6">
|
||||
{solution.challenges.slice(0, 2).map((challenge, idx) => (
|
||||
<div key={idx} className="flex items-start gap-2.5 text-sm text-text-secondary">
|
||||
<span className="text-brand mt-0.5 font-bold">•</span>
|
||||
<span>{challenge}</span>
|
||||
<div className="grid grid-cols-2 gap-2 mb-4">
|
||||
{solution.outcomes?.map((o) => (
|
||||
<div key={o.label} className="p-2 bg-bg-secondary">
|
||||
<div className="text-base font-bold text-brand">{o.value}</div>
|
||||
<div className="text-xs text-text-muted">{o.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-border-primary">
|
||||
<p className="text-[11px] text-text-muted mb-3 uppercase tracking-widest font-bold flex items-center gap-2">
|
||||
<Sparkles className="w-3.5 h-3.5 text-brand" />
|
||||
推荐产品组合
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{solution.suiteCombination.primaryProducts.map(pid => {
|
||||
const prod = productLookup.find(p => p.id === pid);
|
||||
return prod ? (
|
||||
<span
|
||||
key={pid}
|
||||
className="px-3 py-1.5 text-xs font-medium text-ink bg-bg-secondary border border-border-primary"
|
||||
>
|
||||
{prod.title.replace('睿新', '').replace('睿视 ', '')}
|
||||
</span>
|
||||
) : null;
|
||||
})}
|
||||
<span className="px-3 py-1.5 text-xs font-bold text-brand border border-brand/20 bg-brand/[0.05]">
|
||||
+ 配套服务
|
||||
</span>
|
||||
<div className="pt-4 border-t border-border-primary">
|
||||
<div className="text-xs text-text-muted mb-2">推荐产品组合</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{recommendedProductNames.map((name) => (
|
||||
<span key={name} className="px-2 py-1 text-xs bg-bg-secondary text-text-secondary">
|
||||
{name.replace('睿新', '')}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-sm text-text-muted leading-relaxed">
|
||||
{solution.suiteCombination.rationale}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors duration-300 mt-6">
|
||||
@@ -215,9 +181,6 @@ function SolutionsGridSection({ solutions, products }: { solutions: Solution[];
|
||||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||||
className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
|
||||
>
|
||||
<div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
|
||||
Industry Expertise
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
|
||||
行业解决方案
|
||||
</h2>
|
||||
|
||||
+2
-2
@@ -57,8 +57,8 @@ body {
|
||||
--color-text-secondary: #334155;
|
||||
--color-text-tertiary: #475569;
|
||||
--color-text-muted: #64748B;
|
||||
--color-text-subtle: #94A3B8;
|
||||
--color-text-placeholder: #94A3B8;
|
||||
--color-text-subtle: #64748B;
|
||||
--color-text-placeholder: #64748B;
|
||||
--color-text-hint: #CBD5E1;
|
||||
--color-text-inverse: #FFFFFF;
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import { EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import { CheckCircle2, ChevronDown } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useState } from 'react';
|
||||
@@ -30,7 +30,6 @@ export function MethodologyFramework({
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-primary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-3xl">
|
||||
<SectionLabel>Methodology</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6">
|
||||
{title}
|
||||
</h2>
|
||||
@@ -53,13 +52,11 @@ export function MethodologyFramework({
|
||||
transition={{ duration: 0.6, delay: index * 0.08, ease: EASE_OUT }}
|
||||
>
|
||||
<div className="flex gap-6 lg:gap-10">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="flex flex-col items-center pt-2">
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center text-white font-bold text-lg shrink-0"
|
||||
className="w-3 h-3 rounded-full shrink-0"
|
||||
style={{ backgroundColor: accentColor }}
|
||||
>
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</div>
|
||||
/>
|
||||
{index < layers.length - 1 && (
|
||||
<div className="w-px flex-1 bg-gradient-to-b from-border-primary to-transparent mt-3" />
|
||||
)}
|
||||
@@ -109,7 +106,6 @@ export function TechStackShowcase({ title, subtitle, categories }: TechStackShow
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-secondary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-3xl">
|
||||
<SectionLabel>Tech Stack</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6">
|
||||
{title}
|
||||
</h2>
|
||||
@@ -125,9 +121,8 @@ export function TechStackShowcase({ title, subtitle, categories }: TechStackShow
|
||||
{categories.map((category, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative p-8 border border-border-primary bg-bg-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-500"
|
||||
className="group relative p-8 border border-border-primary bg-bg-primary hover:border-border-secondary hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 transition-all duration-500"
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-1 w-0 group-hover:w-full transition-all duration-700 bg-brand" />
|
||||
<h3 className="text-lg font-bold text-text-primary mb-5">{category.name}</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{category.items.map((item, i) => (
|
||||
@@ -173,7 +168,6 @@ export function DeliveryTimeline({
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-primary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-3xl">
|
||||
<SectionLabel>Delivery Process</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6">
|
||||
{title}
|
||||
</h2>
|
||||
@@ -206,11 +200,8 @@ export function DeliveryTimeline({
|
||||
index % 2 === 0 ? 'lg:ml-12' : 'lg:mr-12'
|
||||
)}>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span
|
||||
className="text-xs font-bold tracking-[0.2em] uppercase"
|
||||
style={{ color: accentColor }}
|
||||
>
|
||||
{step.phase}
|
||||
<span className="text-xs font-bold text-text-muted">
|
||||
{`第 ${index + 1} 阶段:${step.phase}`}
|
||||
</span>
|
||||
<span className="text-sm text-text-muted">
|
||||
{step.duration}
|
||||
@@ -221,8 +212,8 @@ export function DeliveryTimeline({
|
||||
{step.description}
|
||||
</p>
|
||||
<div className="pt-5 border-t border-border-primary">
|
||||
<div className="text-xs text-text-muted mb-3 font-medium uppercase tracking-wider">
|
||||
交付物
|
||||
<div className="text-xs text-text-muted mb-3 font-medium">
|
||||
阶段产出
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{step.deliverables.map((deliverable, i) => (
|
||||
@@ -266,7 +257,6 @@ export function FAQSection({ title, subtitle, items }: FAQSectionProps) {
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<div className="grid lg:grid-cols-12 gap-12 lg:gap-20">
|
||||
<ScrollReveal className="lg:col-span-4">
|
||||
<SectionLabel>FAQ</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6">
|
||||
{title}
|
||||
</h2>
|
||||
@@ -341,7 +331,6 @@ export function DataProofSection({ title, subtitle, metrics }: DataProofSectionP
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-primary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-3xl">
|
||||
<SectionLabel>Proven Results</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6">
|
||||
{title}
|
||||
</h2>
|
||||
@@ -357,9 +346,8 @@ export function DataProofSection({ title, subtitle, metrics }: DataProofSectionP
|
||||
{metrics.map((metric, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative p-10 lg:p-12 bg-bg-secondary hover:bg-bg-secondary transition-all duration-500"
|
||||
className="group relative p-10 lg:p-12 bg-bg-secondary hover:bg-bg-secondary hover:shadow-lg transition-all duration-500"
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-1 w-0 group-hover:w-full transition-all duration-700 bg-brand" />
|
||||
<div className="relative z-10">
|
||||
<div className="text-5xl lg:text-6xl font-bold tracking-tighter mb-4">
|
||||
<span className="text-text-primary">{metric.value}</span>
|
||||
|
||||
@@ -186,17 +186,6 @@ export function ProductValueSection({ product }: ProductValueSectionProps) {
|
||||
transition={{ duration: 0.85, ease: [0.22, 1, 0.36, 1] as const }}
|
||||
className="max-w-3xl mx-auto text-center mb-20"
|
||||
>
|
||||
<motion.span
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.15, duration: 0.5 }}
|
||||
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-brand-soft text-brand text-sm font-bold tracking-wider uppercase mb-5"
|
||||
>
|
||||
<Zap className="w-4 h-4" />
|
||||
核心能力
|
||||
</motion.span>
|
||||
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight text-ink mb-5">
|
||||
为企业打造的<span className="relative inline-block">
|
||||
{product.title}
|
||||
@@ -387,9 +376,6 @@ export function ProductValueSection({ product }: ProductValueSectionProps) {
|
||||
className="mt-24"
|
||||
>
|
||||
<div className="text-center mb-14">
|
||||
<span className="inline-block mb-4 text-sm font-bold text-brand tracking-wider uppercase">
|
||||
数据说话
|
||||
</span>
|
||||
<h3 className="text-2xl md:text-3xl font-bold tracking-tight text-ink">
|
||||
用真实效果证明价值
|
||||
</h3>
|
||||
|
||||
@@ -65,7 +65,7 @@ export function DetailTrustSection({
|
||||
caseStudies = [],
|
||||
dataProofs = [],
|
||||
certifications = [],
|
||||
accentColor = '#C41E3A',
|
||||
accentColor: _accentColor = '#C41E3A',
|
||||
}: DetailTrustSectionProps) {
|
||||
const hasContent = caseStudies.length > 0 || dataProofs.length > 0 || certifications.length > 0;
|
||||
if (!hasContent) return null;
|
||||
@@ -85,9 +85,6 @@ export function DetailTrustSection({
|
||||
transition={DESIGN_SYSTEM.effects.scroll.fadeInUp.transition}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<span className="inline-block mb-3 text-sm font-semibold text-brand tracking-wider uppercase">
|
||||
数据说话
|
||||
</span>
|
||||
<h2 className={`${DESIGN_SYSTEM.typography.section.title} text-ink`}>
|
||||
用真实效果证明价值
|
||||
</h2>
|
||||
@@ -135,9 +132,6 @@ export function DetailTrustSection({
|
||||
transition={DESIGN_SYSTEM.effects.scroll.fadeInUp.transition}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<span className="inline-block mb-3 text-sm font-semibold tracking-wider uppercase" style={{ color: accentColor }}>
|
||||
客户案例
|
||||
</span>
|
||||
<h2 className={`${DESIGN_SYSTEM.typography.section.title} text-ink`}>
|
||||
他们已经实现了转型突破
|
||||
</h2>
|
||||
|
||||
@@ -25,10 +25,8 @@ export function ServiceValueSection({ service }: ServiceValueSectionProps) {
|
||||
<section className="relative bg-white py-24 lg:py-32 overflow-hidden">
|
||||
<div className="container-wide relative">
|
||||
<SectionHeader
|
||||
badge="专业服务"
|
||||
title={`为什么选择我们的${service.title}?`}
|
||||
subtitle={service.overview}
|
||||
icon={Zap}
|
||||
/>
|
||||
|
||||
<div className="mt-16">
|
||||
@@ -159,10 +157,8 @@ export function ServiceValueSection({ service }: ServiceValueSectionProps) {
|
||||
}}
|
||||
className="relative flex gap-6 group"
|
||||
>
|
||||
<div className="relative z-10 shrink-0">
|
||||
<div className="w-16 h-16 rounded-full bg-white border-4 border-brand flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-300">
|
||||
<span className="text-lg font-bold text-brand">{String(index + 1).padStart(2, '0')}</span>
|
||||
</div>
|
||||
<div className="relative z-10 shrink-0 w-16 flex justify-center">
|
||||
<div className="w-4 h-4 rounded-full bg-brand group-hover:scale-110 transition-transform duration-300" />
|
||||
</div>
|
||||
|
||||
<TiltCard
|
||||
|
||||
@@ -20,14 +20,12 @@ export function SolutionValueSection({ solution }: SolutionValueSectionProps) {
|
||||
<section className="relative bg-white py-24 lg:py-32 overflow-hidden">
|
||||
<div className="container-wide relative">
|
||||
<SectionHeader
|
||||
badge="解决方案"
|
||||
title={
|
||||
<>
|
||||
为<span className="text-brand">{solution.industry}</span>量身定制
|
||||
</>
|
||||
}
|
||||
subtitle={solution.description}
|
||||
icon={Lightbulb}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10 mt-16">
|
||||
|
||||
@@ -26,6 +26,11 @@ export interface CaseDetailData {
|
||||
timeline: { phase: string; duration: string; description: string }[];
|
||||
services: { id: string; title: string; description: string }[];
|
||||
testimonial?: { quote: string; author: string; role: string };
|
||||
projectDuration?: string;
|
||||
departments?: string[];
|
||||
dataScale?: string;
|
||||
businessProblem?: string;
|
||||
verified?: boolean;
|
||||
}
|
||||
|
||||
interface CaseDetailHeroProps {
|
||||
@@ -60,7 +65,7 @@ function CaseDetailHero({ data }: CaseDetailHeroProps) {
|
||||
transition={{ duration: 0.6, ease: EASE }}
|
||||
>
|
||||
<span
|
||||
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-[11px] font-medium tracking-wider uppercase"
|
||||
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-medium"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-soft)',
|
||||
color: 'var(--color-brand)',
|
||||
@@ -136,11 +141,38 @@ function CaseDetailHero({ data }: CaseDetailHeroProps) {
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Verifiable dimensions */}
|
||||
<motion.div
|
||||
className="flex flex-wrap gap-x-6 gap-y-3 text-sm mb-10 border-y border-border-primary py-4"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.65, ease: EASE }}
|
||||
>
|
||||
{data.projectDuration && (
|
||||
<div style={{ color: 'var(--color-text-secondary)' }}>
|
||||
<span style={{ color: 'var(--color-text-muted)' }}>项目周期</span> {data.projectDuration}
|
||||
</div>
|
||||
)}
|
||||
{data.departments && data.departments.length > 0 && (
|
||||
<div style={{ color: 'var(--color-text-secondary)' }}>
|
||||
<span style={{ color: 'var(--color-text-muted)' }}>涉及部门</span> {data.departments.join('、')}
|
||||
</div>
|
||||
)}
|
||||
{data.dataScale && (
|
||||
<div style={{ color: 'var(--color-text-secondary)' }}>
|
||||
<span style={{ color: 'var(--color-text-muted)' }}>数据规模</span> {data.dataScale}
|
||||
</div>
|
||||
)}
|
||||
{data.verified && (
|
||||
<div style={{ color: 'var(--color-brand)' }}>✓ 客户授权公开</div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="flex flex-wrap gap-4"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.7, ease: EASE }}
|
||||
transition={{ duration: 0.8, delay: 0.8, ease: EASE }}
|
||||
>
|
||||
<Button size="lg" asChild>
|
||||
<a href="/contact">
|
||||
@@ -172,6 +204,25 @@ function ChallengeSection({ data }: { data: CaseDetailData }) {
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1} className="lg:col-span-7">
|
||||
{data.businessProblem && (
|
||||
<div
|
||||
className="mb-6 pl-4 border-l-2"
|
||||
style={{ borderColor: 'var(--color-brand)' }}
|
||||
>
|
||||
<div
|
||||
className="text-xs font-medium mb-2"
|
||||
style={{ color: 'var(--color-text-muted)' }}
|
||||
>
|
||||
具体业务问题
|
||||
</div>
|
||||
<p
|
||||
className="text-base md:text-lg leading-relaxed"
|
||||
style={{ color: 'var(--color-text-primary)' }}
|
||||
>
|
||||
{data.businessProblem}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="p-8 sm:p-10 lg:p-12"
|
||||
style={{
|
||||
@@ -181,7 +232,7 @@ function ChallengeSection({ data }: { data: CaseDetailData }) {
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Target className="w-6 h-6" style={{ color: 'var(--color-brand)' }} />
|
||||
<span
|
||||
className="text-sm font-semibold tracking-wider uppercase"
|
||||
className="text-sm font-semibold"
|
||||
style={{ color: 'var(--color-brand)' }}
|
||||
>
|
||||
面临的挑战
|
||||
@@ -224,7 +275,7 @@ function SolutionSection({ data }: { data: CaseDetailData }) {
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Lightbulb className="w-6 h-6" style={{ color: 'var(--color-brand)' }} />
|
||||
<span
|
||||
className="text-sm font-semibold tracking-wider uppercase"
|
||||
className="text-sm font-semibold"
|
||||
style={{ color: 'var(--color-brand)' }}
|
||||
>
|
||||
核心思路
|
||||
@@ -240,7 +291,7 @@ function SolutionSection({ data }: { data: CaseDetailData }) {
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<TrendingUp className="w-6 h-6" style={{ color: 'var(--color-brand)' }} />
|
||||
<span
|
||||
className="text-sm font-semibold tracking-wider uppercase"
|
||||
className="text-sm font-semibold"
|
||||
style={{ color: 'var(--color-brand)' }}
|
||||
>
|
||||
实施路径
|
||||
@@ -336,10 +387,10 @@ function ResultsSection({ data }: { data: CaseDetailData }) {
|
||||
<div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16 relative z-10">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 text-center max-w-3xl mx-auto">
|
||||
<div
|
||||
className="text-[10px] tracking-[4px] uppercase font-medium mb-4"
|
||||
className="text-xs font-medium mb-4"
|
||||
style={{ color: 'rgba(255,255,255,0.6)' }}
|
||||
>
|
||||
Results
|
||||
项目成果
|
||||
</div>
|
||||
<h2 className="font-sans text-3xl sm:text-4xl md:text-5xl font-bold text-white tracking-tight leading-tight mb-6">
|
||||
可量化的业务成果
|
||||
@@ -431,14 +482,12 @@ function RelatedServicesSection({ services }: { services: CaseDetailData['servic
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<StaggerReveal staggerDelay={0.08}>
|
||||
{services.slice(0, 3).map((s, i) => (
|
||||
{services.slice(0, 3).map((s) => (
|
||||
<ServiceCard
|
||||
key={s.id}
|
||||
number={String(i + 1).padStart(2, '0')}
|
||||
title={s.title}
|
||||
description={s.description}
|
||||
href={`/services/${s.id}`}
|
||||
color="brand"
|
||||
/>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
|
||||
@@ -8,7 +8,7 @@ import { ArrowRight } from 'lucide-react';
|
||||
export type ServiceColor = 'brand' | 'blue' | 'teal' | 'amber' | 'purple';
|
||||
|
||||
interface ServiceCardProps {
|
||||
number: string;
|
||||
number?: string;
|
||||
title: string;
|
||||
description: string;
|
||||
color?: ServiceColor;
|
||||
@@ -17,62 +17,26 @@ interface ServiceCardProps {
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
const colorMap: Record<ServiceColor, string> = {
|
||||
brand: 'var(--color-brand)',
|
||||
blue: 'var(--color-accent-blue)',
|
||||
teal: 'var(--color-accent-teal)',
|
||||
amber: 'var(--color-accent-amber)',
|
||||
purple: 'var(--color-accent-purple)',
|
||||
};
|
||||
|
||||
export function ServiceCard({
|
||||
number,
|
||||
number: _number,
|
||||
title,
|
||||
description,
|
||||
color = 'brand',
|
||||
color: _color = 'brand',
|
||||
href,
|
||||
className = '',
|
||||
delay = 0,
|
||||
}: ServiceCardProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const accentColor = colorMap[color];
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className={`group relative bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] rounded-[var(--radius-lg)] overflow-hidden transition-all duration-[var(--transition-normal)] ease-[var(--ease-ink)] hover:-translate-y-1 hover:shadow-[var(--shadow-lg)] hover:border-[var(--color-brand)]/30 ${className}`}
|
||||
className={`group relative bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] rounded-[var(--radius-lg)] overflow-hidden transition-all duration-[var(--transition-normal)] ease-[var(--ease-ink)] hover:-translate-y-1 hover:shadow-[var(--shadow-lg)] hover:border-[var(--color-brand)]/20 ${className}`}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-40px' }}
|
||||
transition={{ duration: 0.6, delay, ease: [0.22, 1, 0.36, 1] }}
|
||||
>
|
||||
{/* Left accent bar — grows from bottom on entry */}
|
||||
<motion.div
|
||||
className="absolute left-0 top-0 bottom-0 w-[3px] origin-bottom transition-all duration-[var(--transition-normal)] group-hover:w-1.5"
|
||||
style={{ backgroundColor: accentColor }}
|
||||
initial={shouldReduceMotion ? {} : { scaleY: 0 }}
|
||||
whileInView={{ scaleY: 1 }}
|
||||
viewport={{ once: true, margin: '-40px' }}
|
||||
transition={{ duration: 0.4, delay: delay - 0.1 > 0 ? delay - 0.1 : 0, ease: [0.22, 1, 0.36, 1] }}
|
||||
/>
|
||||
|
||||
<div className="p-6 md:p-8 pl-6 md:pl-8">
|
||||
{/* Large background number */}
|
||||
<div
|
||||
className="absolute top-4 right-6 text-[5rem] font-black leading-none select-none pointer-events-none transition-opacity duration-[var(--transition-normal)] group-hover:opacity-10"
|
||||
style={{ color: 'var(--color-border-light)', opacity: 0.06 }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{number}
|
||||
</div>
|
||||
|
||||
{/* Number label */}
|
||||
<div
|
||||
className="text-xs font-bold tracking-[0.18em] uppercase mb-4"
|
||||
style={{ color: accentColor }}
|
||||
>
|
||||
Service {number}
|
||||
</div>
|
||||
|
||||
<div className="p-6 md:p-8">
|
||||
{/* Title */}
|
||||
<h3 className="text-xl md:text-2xl font-bold mb-3 leading-tight text-[var(--color-text-primary)]">
|
||||
{title}
|
||||
|
||||
@@ -44,11 +44,9 @@ export function ServiceGrid({
|
||||
<div className={`grid grid-cols-1 ${gridCols[columns]} gap-6 md:gap-8`}>
|
||||
{items.map((item, index) => (
|
||||
<ServiceCard
|
||||
key={item.number}
|
||||
number={item.number}
|
||||
key={item.title}
|
||||
title={item.title}
|
||||
description={item.description}
|
||||
color={item.color}
|
||||
href={item.href}
|
||||
delay={index * 0.1}
|
||||
/>
|
||||
|
||||
@@ -40,6 +40,11 @@ export interface CaseStudy {
|
||||
testimonial?: CaseTestimonial;
|
||||
color: 'brand' | 'blue' | 'teal' | 'amber' | 'purple';
|
||||
featured?: boolean;
|
||||
projectDuration?: string;
|
||||
departments?: string[];
|
||||
dataScale?: string;
|
||||
businessProblem?: string;
|
||||
verified?: boolean;
|
||||
}
|
||||
|
||||
export const CASE_STUDIES: CaseStudy[] = [
|
||||
@@ -83,6 +88,11 @@ export const CASE_STUDIES: CaseStudy[] = [
|
||||
},
|
||||
color: 'brand',
|
||||
featured: true,
|
||||
projectDuration: '8 个月',
|
||||
departments: ['生产', '财务', '供应链', 'IT'],
|
||||
dataScale: '10 万级 SKU、日均 5 万笔生产工单',
|
||||
businessProblem: '月结耗时 5 天以上,库存准确率长期低于 95%,无法支撑多组织核算。',
|
||||
verified: false,
|
||||
},
|
||||
{
|
||||
id: 'case-002',
|
||||
@@ -124,6 +134,11 @@ export const CASE_STUDIES: CaseStudy[] = [
|
||||
},
|
||||
color: 'blue',
|
||||
featured: true,
|
||||
projectDuration: '6 个月',
|
||||
departments: ['运营', '门店管理', '供应链', '会员运营'],
|
||||
dataScale: '200+ 门店、日均 50 万笔订单、千万级会员',
|
||||
businessProblem: '线上线下库存不同步,会员体系割裂,促销无法跨渠道联动。',
|
||||
verified: false,
|
||||
},
|
||||
{
|
||||
id: 'case-003',
|
||||
@@ -158,6 +173,11 @@ export const CASE_STUDIES: CaseStudy[] = [
|
||||
],
|
||||
color: 'teal',
|
||||
featured: true,
|
||||
projectDuration: '10 个月',
|
||||
departments: ['信息科', '医务部', '运营管理部', '财务科'],
|
||||
dataScale: '20+ 业务系统、日均 100 万条诊疗记录',
|
||||
businessProblem: 'HIS、EMR、LIS、PACS 等系统数据分散,运营报表 T+1 且口径不一致。',
|
||||
verified: false,
|
||||
},
|
||||
{
|
||||
id: 'case-004',
|
||||
@@ -191,6 +211,11 @@ export const CASE_STUDIES: CaseStudy[] = [
|
||||
{ id: 'digital-consulting', title: '数字化转型咨询', description: '教育行业数字化转型规划与实施' },
|
||||
],
|
||||
color: 'amber',
|
||||
projectDuration: '5 个月',
|
||||
departments: ['招生部', '校区运营', '市场部', 'IT'],
|
||||
dataScale: '50+ 校区、日均 10 万条线索与跟进记录',
|
||||
businessProblem: '线索分配依赖人工,各校区独立运营,营销 ROI 无法追踪。',
|
||||
verified: false,
|
||||
},
|
||||
{
|
||||
id: 'case-005',
|
||||
@@ -224,6 +249,11 @@ export const CASE_STUDIES: CaseStudy[] = [
|
||||
{ id: 'rpa', title: 'RPA 智能自动化', description: '财务场景 RPA 机器人开发与运营' },
|
||||
],
|
||||
color: 'purple',
|
||||
projectDuration: '7 个月',
|
||||
departments: ['财务', '业务线', '合规', 'IT'],
|
||||
dataScale: '多业务线、多主体,月均 50 万笔财务凭证',
|
||||
businessProblem: '多业务线核算标准不统一,月结 10 天,合规风险高。',
|
||||
verified: false,
|
||||
},
|
||||
{
|
||||
id: 'case-006',
|
||||
@@ -257,6 +287,11 @@ export const CASE_STUDIES: CaseStudy[] = [
|
||||
{ id: 'digital-consulting', title: '数字化转型咨询', description: '物流行业数字化转型战略规划' },
|
||||
],
|
||||
color: 'brand',
|
||||
projectDuration: '9 个月',
|
||||
departments: ['调度中心', '仓储', '运输', 'IT'],
|
||||
dataScale: '日均 10 万单运输、100+ 仓库节点',
|
||||
businessProblem: '物流状态无法实时追踪,调度依赖人工经验,异常响应慢。',
|
||||
verified: false,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@@ -55,6 +55,10 @@ export interface Product {
|
||||
methodology?: MethodologyLayer[];
|
||||
techStack?: TechStackCategory[];
|
||||
faqs?: FAQItem[];
|
||||
scenario?: string;
|
||||
metrics?: { value: string; label: string }[];
|
||||
bundle: 'enterprise' | 'standalone';
|
||||
capabilities?: string[];
|
||||
}
|
||||
|
||||
export interface ProductCategory {
|
||||
@@ -87,6 +91,14 @@ export const PRODUCTS: Product[] = [
|
||||
tags: ['ERP', '资源管理', '全链路'],
|
||||
status: '研发中',
|
||||
heroThemeId: 'erp',
|
||||
scenario: '面向中大型制造与零售企业的核心运营系统',
|
||||
metrics: [
|
||||
{ value: '10 万级', label: 'SKU 支撑' },
|
||||
{ value: '200+', label: '标准报表模板' },
|
||||
{ value: '99.5%', label: '数据准确率' },
|
||||
],
|
||||
bundle: 'enterprise',
|
||||
capabilities: ['财务核算', '采购管理', '生产计划', '库存控制'],
|
||||
caseStudies: [
|
||||
{
|
||||
client: '某大型制造集团',
|
||||
@@ -106,7 +118,7 @@ export const PRODUCTS: Product[] = [
|
||||
{ name: 'ISO 27001', issuer: '国际标准化组织', link: '#' },
|
||||
{ name: '信创适配认证', issuer: '中国信息安全测评中心', link: '#' },
|
||||
],
|
||||
overview: '睿新ERP管理系统是我们正在打造的企业资源计划系统,旨在打通财务、采购、销售、库存、生产等核心模块,让各部门数据实时流转、业务流程自动协同,帮助企业告别信息孤岛。',
|
||||
overview: '睿新ERP管理系统是面向企业打造的一体化资源管理平台,打通财务、采购、销售、库存、生产等核心模块,让各部门数据实时流转、业务流程自动协同,帮助企业告别信息孤岛。',
|
||||
features: [
|
||||
'财务管理:总账、应收应付、成本核算、固定资产管理',
|
||||
'采购管理:供应商管理、采购订单、入库验收、采购分析',
|
||||
@@ -148,6 +160,14 @@ export const PRODUCTS: Product[] = [
|
||||
tags: ['CRM', '客户管理', '销售漏斗'],
|
||||
status: '研发中',
|
||||
heroThemeId: 'crm',
|
||||
scenario: '面向销售驱动型企业的一体化客户运营管理平台',
|
||||
metrics: [
|
||||
{ value: '360°', label: '客户画像' },
|
||||
{ value: '3x', label: '转化率提升' },
|
||||
{ value: '<2h', label: '线索响应' },
|
||||
],
|
||||
bundle: 'enterprise',
|
||||
capabilities: ['线索管理', '商机跟进', '合同审批', '售后工单'],
|
||||
caseStudies: [
|
||||
{
|
||||
client: '某连锁零售集团',
|
||||
@@ -166,7 +186,7 @@ export const PRODUCTS: Product[] = [
|
||||
{ name: '等保三级', issuer: '公安部', link: '#' },
|
||||
{ name: 'ISO 27001', issuer: '国际标准化组织', link: '#' },
|
||||
],
|
||||
overview: '睿新客户关系管理系统是我们正在打造的全渠道客户管理平台,从线索到成交全流程可视化管理,让销售团队清楚每一步该做什么、每个机会卡在哪里。系统支持多渠道客户数据整合,提供全面的客户画像和销售漏斗分析。',
|
||||
overview: '睿新客户关系管理系统是面向企业销售团队的全渠道客户管理平台,覆盖从线索到成交的全流程可视化管理,让销售团队清楚每一步该做什么、每个机会卡在哪里。系统支持多渠道客户数据整合,提供全面的客户画像和销售漏斗分析。',
|
||||
features: [
|
||||
'客户档案:完整的客户信息管理,支持自定义字段',
|
||||
'销售漏斗:可视化的销售机会管理,实时跟进销售进度',
|
||||
@@ -208,6 +228,14 @@ export const PRODUCTS: Product[] = [
|
||||
tags: ['CMS', '内容管理', '多站点'],
|
||||
status: '研发中',
|
||||
heroThemeId: 'cms',
|
||||
scenario: '面向多品牌、多站点企业的统一内容管理平台',
|
||||
metrics: [
|
||||
{ value: '50+', label: '站点统管' },
|
||||
{ value: '60%', label: '发布提效' },
|
||||
{ value: '等保二级', label: '安全合规' },
|
||||
],
|
||||
bundle: 'enterprise',
|
||||
capabilities: ['多站点管理', '工作流审批', '版本控制', 'SEO 优化'],
|
||||
caseStudies: [
|
||||
{
|
||||
client: '某教育集团',
|
||||
@@ -226,7 +254,7 @@ export const PRODUCTS: Product[] = [
|
||||
{ name: '等保二级', issuer: '公安部', link: '#' },
|
||||
{ name: 'ISO 27001', issuer: '国际标准化组织', link: '#' },
|
||||
],
|
||||
overview: '睿新内容管理系统是我们正在打造的企业级内容管理平台,提供所见即所得的编辑体验和多站点统一管理能力,让内容发布像写文档一样简单。系统提供强大的内容编辑功能和灵活的权限管理机制。',
|
||||
overview: '睿新内容管理系统是企业级内容管理平台,提供所见即所得的编辑体验和多站点统一管理能力,让内容发布像写文档一样简单。系统提供强大的内容编辑功能和灵活的权限管理机制。',
|
||||
features: [
|
||||
'内容编辑:所见即所得的富文本编辑器,支持多媒体内容',
|
||||
'多站点管理:统一管理多个站点的内容',
|
||||
@@ -268,6 +296,14 @@ export const PRODUCTS: Product[] = [
|
||||
tags: ['BI', '数据分析', '可视化'],
|
||||
status: '研发中',
|
||||
heroThemeId: 'bi',
|
||||
scenario: '面向业务人员的自助式数据洞察与决策支持平台',
|
||||
metrics: [
|
||||
{ value: '70%+', label: '自助分析' },
|
||||
{ value: '<1天', label: '决策响应' },
|
||||
{ value: '85%', label: '报表减负' },
|
||||
],
|
||||
bundle: 'enterprise',
|
||||
capabilities: ['拖拽分析', '实时看板', '智能预警', '移动报表'],
|
||||
caseStudies: [
|
||||
{
|
||||
client: '某快消品牌',
|
||||
@@ -286,7 +322,7 @@ export const PRODUCTS: Product[] = [
|
||||
{ name: '等保三级', issuer: '公安部', link: '#' },
|
||||
{ name: 'ISO 27001', issuer: '国际标准化组织', link: '#' },
|
||||
],
|
||||
overview: '睿新商业智能平台是我们正在打造的数据可视化分析平台,提供拖拽式自助分析能力,让业务人员无需写SQL也能从数据中找到答案。平台支持自助式数据分析和实时数据监控。',
|
||||
overview: '睿新商业智能平台是数据可视化分析平台,提供拖拽式自助分析能力,让业务人员无需写SQL也能从数据中找到答案。平台支持自助式数据分析和实时数据监控。',
|
||||
features: [
|
||||
'数据整合:对接多种数据源,统一数据平台',
|
||||
'可视化报表:丰富的图表类型,支持自定义报表',
|
||||
@@ -328,6 +364,14 @@ export const PRODUCTS: Product[] = [
|
||||
tags: ['供应链', '智能预测', '库存优化'],
|
||||
status: '研发中',
|
||||
heroThemeId: 'sds',
|
||||
scenario: '面向零售与制造企业的智能销量预测与库存优化系统',
|
||||
metrics: [
|
||||
{ value: '73%', label: '缺货率降低' },
|
||||
{ value: '38%', label: '周转提升' },
|
||||
{ value: '<6个月', label: 'ROI 周期' },
|
||||
],
|
||||
bundle: 'enterprise',
|
||||
capabilities: ['销量预测', '智能补货', '库存诊断', '供应商协同'],
|
||||
caseStudies: [
|
||||
{
|
||||
client: '某服装品牌',
|
||||
@@ -346,7 +390,7 @@ export const PRODUCTS: Product[] = [
|
||||
{ name: '等保三级', issuer: '公安部', link: '#' },
|
||||
{ name: 'ISO 27001', issuer: '国际标准化组织', link: '#' },
|
||||
],
|
||||
overview: '睿新供应链决策支持系统是我们正在打造的智能供应链管理平台,自动预测销量、智能补货建议,帮您把库存成本降下来、把缺货损失挽回来。系统采用智能算法,实现从经验驱动到数据驱动的供应链管理升级。',
|
||||
overview: '睿新供应链决策支持系统是智能供应链管理平台,自动预测销量、智能补货建议,帮您把库存成本降下来、把缺货损失挽回来。系统采用智能算法,实现从经验驱动到数据驱动的供应链管理升级。',
|
||||
features: [
|
||||
'智能销量预测:自动分析历史销售趋势、季节规律和促销影响,预测每个商品销量',
|
||||
'库存健康诊断:自动识别库存过多(积压资金)和即将缺货(错失销售)的商品',
|
||||
@@ -388,6 +432,14 @@ export const PRODUCTS: Product[] = [
|
||||
tags: ['OA', '协同办公', '流程审批'],
|
||||
status: '研发中',
|
||||
heroThemeId: 'oa',
|
||||
scenario: '面向中大型组织的一站式流程审批与协同办公平台',
|
||||
metrics: [
|
||||
{ value: '95%', label: '审批提效' },
|
||||
{ value: '100%', label: '移动覆盖' },
|
||||
{ value: '10万+', label: '日流程承载' },
|
||||
],
|
||||
bundle: 'enterprise',
|
||||
capabilities: ['流程审批', '公文管理', '知识中心', '移动办公'],
|
||||
caseStudies: [
|
||||
{
|
||||
client: '某中型制造企业',
|
||||
@@ -407,7 +459,7 @@ export const PRODUCTS: Product[] = [
|
||||
{ name: 'ISO 27001', issuer: '国际标准化组织', link: '#' },
|
||||
{ name: '信创适配认证', issuer: '中国信息安全测评中心', link: '#' },
|
||||
],
|
||||
overview: '睿新协同办公系统是我们正在打造的综合型企业协同办公平台,融合传统办公自动化与现代协作理念。集成流程审批、公文管理、即时通讯、知识管理、会议日程等核心模块,支持PC端与移动端全场景覆盖,帮助企业实现办公数字化、流程规范化、协作高效化。',
|
||||
overview: '睿新协同办公系统是综合型企业协同办公平台,融合传统办公自动化与现代协作理念。集成流程审批、公文管理、即时通讯、知识管理、会议日程等核心模块,支持PC端与移动端全场景覆盖,帮助企业实现办公数字化、流程规范化、协作高效化。',
|
||||
features: [
|
||||
'流程审批:请假、报销、采购、合同等全流程电子化审批,支持自定义审批流程和条件分支',
|
||||
'公文管理:收文登记、发文审批、公文流转、归档管理,满足政务合规和档案管理要求',
|
||||
@@ -449,6 +501,14 @@ export const PRODUCTS: Product[] = [
|
||||
tags: ['资金追踪', '关系图谱', 'AI分析', '离线运行', '执法情报'],
|
||||
status: '内测中',
|
||||
heroThemeId: 'novavis',
|
||||
scenario: '面向执法机关的离线智能数据分析与资金关系图谱平台',
|
||||
metrics: [
|
||||
{ value: '100万+', label: '秒级处理' },
|
||||
{ value: '<30秒', label: '分析耗时' },
|
||||
{ value: '20层+', label: '资金追踪' },
|
||||
],
|
||||
bundle: 'standalone',
|
||||
capabilities: ['资金追踪', '关系图谱', 'AI 分析', '离线运行'],
|
||||
caseStudies: [],
|
||||
dataProofs: [
|
||||
{ metric: '数据处理能力', value: '100万+', description: '百万级记录秒级处理' },
|
||||
|
||||
@@ -50,6 +50,7 @@ export interface Service {
|
||||
methodology?: MethodologyLayer[];
|
||||
techStack?: TechStackCategory[];
|
||||
faqs?: FAQItem[];
|
||||
capabilities?: string[];
|
||||
}
|
||||
|
||||
export const SERVICES: Service[] = [
|
||||
@@ -72,6 +73,12 @@ export const SERVICES: Service[] = [
|
||||
'提升技术团队整体能力',
|
||||
'加速数字化转型进程,抢占市场先机',
|
||||
],
|
||||
capabilities: [
|
||||
'现状诊断与数字化成熟度评估',
|
||||
'业务流程重构与路线图设计',
|
||||
'技术架构选型与投资回报测算',
|
||||
'变革管理与落地陪跑',
|
||||
],
|
||||
process: [
|
||||
'现状调研:深入了解企业现状和痛点',
|
||||
'需求分析:梳理业务需求和技术需求',
|
||||
@@ -160,6 +167,12 @@ export const SERVICES: Service[] = [
|
||||
'快速响应市场变化,保持竞争优势',
|
||||
'数据驱动决策,支持业务增长',
|
||||
],
|
||||
capabilities: [
|
||||
'ERP/CRM/BI 核心系统实施与优化',
|
||||
'企业级应用定制化开发',
|
||||
'系统集成与数据中台建设',
|
||||
'敏捷交付与质量保障',
|
||||
],
|
||||
process: [
|
||||
'需求分析:深入了解业务需求,制定详细需求文档',
|
||||
'方案设计:设计系统架构和技术方案',
|
||||
@@ -203,6 +216,12 @@ export const SERVICES: Service[] = [
|
||||
'优化业务流程,提升运营效率',
|
||||
'增强市场洞察力,把握市场趋势',
|
||||
],
|
||||
capabilities: [
|
||||
'多源数据整合与数据治理',
|
||||
'实时数据看板与可视化报表',
|
||||
'云原生架构设计与迁移',
|
||||
'7x24 运维保障与技术支持',
|
||||
],
|
||||
process: [
|
||||
'数据评估:评估数据质量和可用性',
|
||||
'平台搭建:构建数据中台与分析平台',
|
||||
@@ -246,6 +265,12 @@ export const SERVICES: Service[] = [
|
||||
'获得端到端的 AI 解决方案',
|
||||
'持续获得 AI 技术前沿能力与支持',
|
||||
],
|
||||
capabilities: [
|
||||
'AI 成熟度评估与场景筛选',
|
||||
'大模型应用开发与私有化部署',
|
||||
'RPA + AI 智能流程自动化',
|
||||
'AI 效果评估与持续迭代',
|
||||
],
|
||||
process: [
|
||||
'AI 成熟度评估:全面评估企业 AI 应用现状与机会',
|
||||
'场景筛选:识别高价值 AI 应用场景',
|
||||
|
||||
@@ -62,6 +62,9 @@ export interface Solution {
|
||||
caseStudies?: import('./cases').CaseStudy[];
|
||||
dataProofs?: import('./products').DataProof[];
|
||||
certifications?: import('./products').Certification[];
|
||||
painPoints?: string[];
|
||||
outcomes?: { value: string; label: string }[];
|
||||
recommendedProducts?: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -102,6 +105,12 @@ export const SOLUTIONS: Solution[] = [
|
||||
complementaryServices: ['consulting', 'solutions'],
|
||||
rationale: 'ERP打通生产-财务-供应链核心链路,BI提供实时生产看板和品质分析,配合咨询规划实施路径,确保方案落地见效。',
|
||||
},
|
||||
painPoints: ['生产数据孤岛,决策缺乏实时数据支撑', '库存管理粗放,资金占用成本高'],
|
||||
outcomes: [
|
||||
{ value: '30%', label: '库存周转提升' },
|
||||
{ value: '40%', label: '生产效率提升' },
|
||||
],
|
||||
recommendedProducts: ['erp', 'bi', 'sds'],
|
||||
},
|
||||
{
|
||||
id: 'retail',
|
||||
@@ -136,6 +145,12 @@ export const SOLUTIONS: Solution[] = [
|
||||
complementaryServices: ['data', 'solutions'],
|
||||
rationale: 'CRM构建全渠道客户统一视图和销售漏斗管理,BI提供经营分析和客户洞察,数据服务支撑CDP建设和预测模型开发。',
|
||||
},
|
||||
painPoints: ['线上线下渠道割裂,会员体验碎片化', '供应链响应慢,库存积压与缺货并存'],
|
||||
outcomes: [
|
||||
{ value: '25%', label: '营收增长' },
|
||||
{ value: '99%', label: '全渠道库存准确率' },
|
||||
],
|
||||
recommendedProducts: ['crm', 'bi', 'sds'],
|
||||
},
|
||||
{
|
||||
id: 'education',
|
||||
@@ -170,6 +185,12 @@ export const SOLUTIONS: Solution[] = [
|
||||
complementaryServices: ['software', 'consulting'],
|
||||
rationale: 'CMS管理多校区网站和教学资源,OA支撑招生流程审批和家校协同,配合软件开发定制特色功能模块。',
|
||||
},
|
||||
painPoints: ['招生线索管理分散,转化率难以提升', '教学资源管理混乱,优质内容难以沉淀'],
|
||||
outcomes: [
|
||||
{ value: '45%', label: '线索转化率提升' },
|
||||
{ value: '60%', label: '内容发布效率提升' },
|
||||
],
|
||||
recommendedProducts: ['cms', 'oa', 'crm'],
|
||||
},
|
||||
{
|
||||
id: 'healthcare',
|
||||
@@ -204,6 +225,12 @@ export const SOLUTIONS: Solution[] = [
|
||||
complementaryServices: ['software', 'data'],
|
||||
rationale: 'ERP管理医院运营核心(财务/采购/库存),SDS优化药品和耗材供应链,配合软件开发定制医疗特色模块。',
|
||||
},
|
||||
painPoints: ['临床数据分散,医生调阅效率低', '运营决策依赖人工统计,时效性差'],
|
||||
outcomes: [
|
||||
{ value: '10x', label: '决策效率提升' },
|
||||
{ value: '30%', label: '运营成本下降' },
|
||||
],
|
||||
recommendedProducts: ['erp', 'sds', 'bi'],
|
||||
},
|
||||
{
|
||||
id: 'finance',
|
||||
@@ -238,6 +265,12 @@ export const SOLUTIONS: Solution[] = [
|
||||
complementaryServices: ['data', 'software'],
|
||||
rationale: 'BI构建经营分析和监管报表体系,SDS支撑供应链金融和资产管理,数据服务助力风控模型和客户画像建设。',
|
||||
},
|
||||
painPoints: ['监管要求持续升级,合规管理成本高', '数据孤岛严重,客户画像难以落地'],
|
||||
outcomes: [
|
||||
{ value: '70%', label: '财务效率提升' },
|
||||
{ value: '0', label: '重大合规事故' },
|
||||
],
|
||||
recommendedProducts: ['bi', 'sds', 'erp'],
|
||||
},
|
||||
{
|
||||
id: 'logistics',
|
||||
@@ -272,5 +305,11 @@ export const SOLUTIONS: Solution[] = [
|
||||
complementaryServices: ['software', 'data'],
|
||||
rationale: 'ERP管理财务和核心业务,BI提供运营分析和成本核算,配合软件开发定制TMS/WMS等物流特色模块。',
|
||||
},
|
||||
painPoints: ['运输过程不透明,客户体验差', '调度依赖人工经验,车辆空驶率高'],
|
||||
outcomes: [
|
||||
{ value: '20%', label: '空驶率降低' },
|
||||
{ value: '95%+', label: '全程可视化率' },
|
||||
],
|
||||
recommendedProducts: ['erp', 'bi', 'sds'],
|
||||
},
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user