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

feat: update services section with dark tech theme

Browse Source
This commit is contained in:
张翔
2026-02-21 22:59:32 +08:00
parent 554011f0e7
commit d2f92b8a55
1 changed files with 10 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/services-section.tsx
+10 -13
View File
@@ -20,27 +20,25 @@ export function ServicesSection() {
const isInView = useInView(ref, { once: true, margin: '-100px' }); const isInView = useInView(ref, { once: true, margin: '-100px' });
return ( return (
<section id="services" className="py-24 bg-white" ref={ref}> <section id="services" className="py-24 bg-[var(--color-bg-secondary)]" ref={ref}>
<div className="container-custom"> <div className="container-custom">
{/* Section Header */}
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}} animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
className="text-center max-w-3xl mx-auto mb-16" className="text-center max-w-3xl mx-auto mb-16"
> >
<span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4"> <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-tech-blue)]/30 bg-[var(--color-tech-blue)]/5 text-[var(--color-tech-blue)] text-sm font-medium mb-4">
核心业务 核心业务
</span> </span>
<h2 className="text-3xl sm:text-4xl font-bold text-[#1A1A1A] mb-4"> <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
专业服务，<span className="text-[#C41E3A]">助力发展</span> 专业服务，<span className="tech-gradient-text">助力发展</span>
</h2> </h2>
<p className="text-lg text-[#4A4A4A]"> <p className="text-lg text-gray-400">
我们提供全方位的技术解决方案，帮助企业实现数字化转型 我们提供全方位的技术解决方案，帮助企业实现数字化转型
</p> </p>
</motion.div> </motion.div>
{/* Services Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{SERVICES.map((service, index) => { {SERVICES.map((service, index) => {
const Icon = iconMap[service.icon]; const Icon = iconMap[service.icon];
@@ -51,15 +49,15 @@ export function ServicesSection() {
animate={isInView ? { opacity: 1, y: 0 } : {}} animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: index * 0.1 }} transition={{ duration: 0.5, delay: index * 0.1 }}
> >
<Card className="h-full border-[#E8E0E0] bg-white hover:border-[#C41E3A]/30 hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300 hover:-translate-y-1 group"> <Card className="h-full group cursor-pointer">
<CardHeader> <CardHeader>
<div className="w-12 h-12 bg-[#C41E3A] rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300"> <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-[var(--color-tech-blue)] to-[var(--color-tech-purple)] flex items-center justify-center mb-4 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-[var(--color-tech-blue)]/30 transition-all duration-300">
{Icon && <Icon className="w-6 h-6 text-white" />} {Icon && <Icon className="w-7 h-7 text-white" />}
</div> </div>
<CardTitle className="text-xl text-[#1A1A1A]">{service.title}</CardTitle> <CardTitle>{service.title}</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<CardDescription className="text-base text-[#6B6B6B]"> <CardDescription className="text-base">
{service.description} {service.description}
</CardDescription> </CardDescription>
</CardContent> </CardContent>
@@ -69,7 +67,6 @@ export function ServicesSection() {
})} })}
</div> </div>
{/* CTA */}
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}} animate={isInView ? { opacity: 1, y: 0 } : {}}