novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 页面组件优化与墨韵分割线组件化

Browse Source 
- 提取 AnimatedInkDivider 组件替代硬编码 ink-divider div
- 重构各营销页面组件代码结构优化
- 修正统计数据：自研产品 4 -> 6
- 更新 about 页面测试用例
This commit is contained in:
张翔
2026-04-29 19:15:58 +08:00
parent ec3e89f591
commit 6ae0f1274f
17 changed files with 914 additions and 1010 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/services-section.tsx
+28 -32
View File
@@ -1,13 +1,12 @@
'use client';
import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
import { StaticLink } from '@/components/ui/static-link';
import { Code, BarChart3, Lightbulb, Puzzle, ArrowRight } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { RippleButton } from '@/components/ui/ripple-button';
import { InkCard } from '@/lib/animations';
import { InkCard, InkReveal, StaggerContainer, StaggerItem } from '@/lib/animations';
import { SERVICES } from '@/lib/constants';
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -27,12 +26,8 @@ export function ServicesSection() {
<div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
<div className="container-wide relative z-10">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6 }}
className="text-center max-w-3xl mx-auto mb-16"
>
{/* 标题 - InkReveal 墨迹揭示 */}
<InkReveal className="text-center max-w-3xl mx-auto mb-16">
<div className="w-16 h-1 bg-[var(--color-brand-primary)] rounded-full mb-6" />
<h2 id="services-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
我们的 <span className="text-[var(--color-brand-primary)] font-calligraphy">核心业务</span>
@@ -40,36 +35,37 @@ export function ServicesSection() {
<p className="text-lg text-[#5C5C5C] max-w-2xl">
专业技术团队，为您提供全方位的数字化解决方案
</p>
</motion.div>
</InkReveal>
{SERVICES.length > 0 ? (
<div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6">
<StaggerContainer className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6" staggerDelay={0.12}>
{SERVICES.map((service) => {
const Icon = iconMap[service.icon];
return (
<InkCard
key={service.id}
className="rounded-xl border border-[#E5E5E5] bg-white p-6 hover:border-[var(--color-brand-primary)] transition-colors"
>
<StaticLink href={`/services/${service.id}`}>
<Card className="p-0 h-full border-0 shadow-none bg-transparent group cursor-pointer">
<CardContent className="p-0">
<div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[var(--color-brand-primary)] transition-all duration-300">
{Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
</div>
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[var(--color-brand-primary)] transition-colors">{service.title}</h3>
<p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
<div className="mt-4 flex items-center text-[var(--color-brand-primary)] text-sm font-medium opacity-0 md:group-hover:opacity-100 md:opacity-0 transition-opacity">
了解详情
<ArrowRight className="ml-1 w-4 h-4" />
</div>
</CardContent>
</Card>
</StaticLink>
</InkCard>
<StaggerItem key={service.id}>
<InkCard
className="rounded-xl border border-[#E5E5E5] bg-white p-6 hover:border-[var(--color-brand-primary)] transition-colors"
>
<StaticLink href={`/services/${service.id}`}>
<Card className="p-0 h-full border-0 shadow-none bg-transparent group cursor-pointer">
<CardContent className="p-0">
<div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[var(--color-brand-primary)] transition-all duration-300">
{Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
</div>
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[var(--color-brand-primary)] transition-colors">{service.title}</h3>
<p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
<div className="mt-4 flex items-center text-[var(--color-brand-primary)] text-sm font-medium opacity-0 md:group-hover:opacity-100 md:opacity-0 transition-opacity">
了解详情
<ArrowRight className="ml-1 w-4 h-4" />
</div>
</CardContent>
</Card>
</StaticLink>
</InkCard>
</StaggerItem>
);
})}
</div>
</StaggerContainer>
) : (
<div className="text-center py-12">
<p className="text-lg text-[#5C5C5C]">暂无服务信息</p>