feat: 统一全站设计风格、导航组件与文案逻辑自洽性修复
- 新增 InkGlowCard 墨韵流光卡片组件,统一全站卡片交互风格 - 新增 PageNav 面包屑组件,统一全站页面导航 - 统一色彩体系、排版层级、间距节奏和动画风格 - 修复 CTA 区品牌名称错误(诺瓦隆→睿新致遠) - 修复 ERP 产品卖点与年费制定价矛盾 - 导航下拉补充 SDS 和 OA 产品 - 统一全站数据指标为 12+年核心团队经验、6自研产品、10+团队成员 - 移除不可靠的 100%客户满意度和 30+行业专家指标 - 修复新闻时间线不合理问题,调整里程碑节奏 - 统一响应承诺为工作日快速响应 - 服务第4项重命名为行业方案实施,厘清概念 - 服务详情页效果数据改为定性描述 - 删除 cases 模块,精简代码库
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { ArrowUpRight } from 'lucide-react';
|
||||
import { ArrowUpRight, Database, Users, BarChart3, FileText, Truck, Building2 } from 'lucide-react';
|
||||
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
|
||||
interface ProductCardProps {
|
||||
title: string;
|
||||
@@ -11,31 +11,69 @@ interface ProductCardProps {
|
||||
index: number;
|
||||
}
|
||||
|
||||
interface ProductStyleConfig {
|
||||
icon: LucideIcon;
|
||||
accentColor: string;
|
||||
accentColorRgb: string;
|
||||
glowStart: string;
|
||||
glowEnd: string;
|
||||
}
|
||||
|
||||
const productConfig: ProductStyleConfig[] = [
|
||||
{ icon: Database, accentColor: '#C41E3A', accentColorRgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706' },
|
||||
{ icon: Users, accentColor: '#D97706', accentColorRgb: '217, 119, 6', glowStart: '#D97706', glowEnd: '#16A34A' },
|
||||
{ icon: FileText, accentColor: '#2563EB', accentColorRgb: '37, 99, 235', glowStart: '#2563EB', glowEnd: '#7C3AED' },
|
||||
{ icon: BarChart3, accentColor: '#16A34A', accentColorRgb: '22, 163, 74', glowStart: '#16A34A', glowEnd: '#0891B2' },
|
||||
{ icon: Truck, accentColor: '#7C3AED', accentColorRgb: '124, 58, 237', glowStart: '#7C3AED', glowEnd: '#C41E3A' },
|
||||
{ icon: Building2, accentColor: '#0891B2', accentColorRgb: '8, 145, 178', glowStart: '#0891B2', glowEnd: '#2563EB' },
|
||||
];
|
||||
|
||||
const defaultConfig: ProductStyleConfig = {
|
||||
icon: Database, accentColor: '#C41E3A', accentColorRgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706',
|
||||
};
|
||||
|
||||
export function ProductCard({ title, description, href, index }: ProductCardProps) {
|
||||
const config = productConfig[index] ?? defaultConfig;
|
||||
const IconComponent = config.icon;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
|
||||
<InkGlowCard
|
||||
index={index}
|
||||
href={href}
|
||||
accentColorRgb={config.accentColorRgb}
|
||||
glowStart={config.glowStart}
|
||||
glowEnd={config.glowEnd}
|
||||
>
|
||||
<StaticLink
|
||||
href={href}
|
||||
className="group block p-6 rounded-xl border border-[#E5E5E5] bg-white hover:border-[#C41E3A]/40 hover:shadow-lg transition-all duration-300 h-full"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<span className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-[#FEF2F4] text-[#C41E3A] text-sm font-bold">
|
||||
<div className="p-6 md:p-8">
|
||||
<div className="flex items-start justify-between mb-5">
|
||||
<div
|
||||
className="w-11 h-11 rounded-xl flex items-center justify-center"
|
||||
style={{ backgroundColor: `rgba(${config.accentColorRgb}, 0.06)` }}
|
||||
>
|
||||
<IconComponent
|
||||
className="w-5 h-5"
|
||||
style={{ color: config.accentColor }}
|
||||
strokeWidth={1.8}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs font-mono tracking-widest text-[#A3A3A3]">
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<ArrowUpRight className="w-5 h-5 text-[#595959] group-hover:text-[#C41E3A] transition-colors" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
|
||||
|
||||
<h3 className="text-lg font-semibold mb-2 leading-snug tracking-tight text-[#1C1C1C]">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#595959] leading-relaxed">
|
||||
|
||||
<p className="text-sm text-[#595959] leading-relaxed line-clamp-3 mb-5">
|
||||
{description}
|
||||
</p>
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
|
||||
<div className="flex items-center gap-1.5 text-sm font-medium text-[#A3A3A3] group-hover:text-[#C41E3A] transition-colors">
|
||||
<span>了解详情</span>
|
||||
<ArrowUpRight className="w-4 h-4" strokeWidth={2} />
|
||||
</div>
|
||||
</div>
|
||||
</InkGlowCard>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user