张翔
85 lines
3.5 KiB
TypeScript
85 lines
3.5 KiB
TypeScript
'use client';
|
||
|
||
import { motion } from 'framer-motion';
|
||
import { useInView } from 'framer-motion';
|
||
import { useRef } from 'react';
|
||
import { Code, Cloud, BarChart3, Shield, ArrowRight } from 'lucide-react';
|
||
import { Card, CardContent } from '@/components/ui/card';
|
||
import { Button } from '@/components/ui/button';
|
||
import { SERVICES } from '@/lib/constants';
|
||
|
||
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
||
Code,
|
||
Cloud,
|
||
BarChart3,
|
||
Shield,
|
||
};
|
||
|
||
export function ServicesSection() {
|
||
const ref = useRef(null);
|
||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||
|
||
return (
|
||
<section id="services" className="py-24 bg-white relative overflow-hidden" ref={ref}>
|
||
<div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(0,94,184,0.03)] rounded-full blur-3xl" />
|
||
<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"
|
||
>
|
||
<span className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#005EB8]/30 bg-[#E8F4FD] text-[#005EB8] text-sm font-medium mb-4">
|
||
核心业务
|
||
</span>
|
||
<h2 className="text-4xl md:text-5xl font-bold text-[#1A1A2E] mb-4">
|
||
我们的 <span className="text-[#005EB8]">核心服务</span>
|
||
</h2>
|
||
<p className="text-lg text-[#718096] max-w-2xl mx-auto">
|
||
专业技术团队，为您提供全方位的数字化解决方案
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{SERVICES.map((service, index) => {
|
||
const Icon = iconMap[service.icon];
|
||
return (
|
||
<motion.div
|
||
key={service.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||
>
|
||
<Card className="p-6 h-full group cursor-pointer border-[#E2E8F0] hover:border-[#005EB8]">
|
||
<CardContent className="p-0">
|
||
<div className="w-12 h-12 rounded-xl bg-[#E8F4FD] flex items-center justify-center mb-4 group-hover:bg-[#005EB8] transition-all duration-300">
|
||
{Icon && <Icon className="w-6 h-6 text-[#005EB8] group-hover:text-white transition-colors" />}
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-[#1A1A2E] mb-3">{service.title}</h3>
|
||
<p className="text-[#718096] text-sm leading-relaxed">{service.description}</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.6, delay: 0.4 }}
|
||
className="text-center mt-12"
|
||
>
|
||
<Button variant="outline" size="lg" className="group">
|
||
查看全部服务
|
||
<ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||
</Button>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|