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

refactor: remove modal, add link navigation for services

Browse Source
This commit is contained in:
张翔
2026-02-26 21:24:38 +08:00
parent bbd3930e7f
commit 686a02b233
1 changed files with 23 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/services-section.tsx
+23 -31
View File
@@ -2,12 +2,12 @@
import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef, useState } from 'react';
import { useRef } from 'react';
import Link from 'next/link';
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';
import { ServiceDetailModal } from '@/components/services/service-detail-modal';
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
Code,
@@ -19,17 +19,10 @@ const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
export function ServicesSection() {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: '-100px' });
const [selectedServiceId, setSelectedServiceId] = useState<string | null>(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const handleServiceClick = (serviceId: string) => {
setSelectedServiceId(serviceId);
setIsModalOpen(true);
};
return (
<section id="solutions" aria-labelledby="solutions-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
<div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(79,70,229,0.03)] rounded-full blur-3xl" />
<div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(196,30,58,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">
@@ -57,17 +50,22 @@ export function ServicesSection() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: index * 0.1 }}
onClick={() => handleServiceClick(service.id)}
>
<Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
<CardContent className="p-0">
<div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[#C41E3A] 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">{service.title}</h3>
<p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
</CardContent>
</Card>
<Link href={`/services/${service.id}`}>
<Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors">
<CardContent className="p-0">
<div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[#C41E3A] 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-[#C41E3A] transition-colors">{service.title}</h3>
<p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
<div className="mt-4 flex items-center text-[#C41E3A] text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
了解详情
<ArrowRight className="ml-1 w-4 h-4" />
</div>
</CardContent>
</Card>
</Link>
</motion.div>
);
})}
@@ -79,20 +77,14 @@ export function ServicesSection() {
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 variant="outline" size="lg" className="group" asChild>
<Link href="/services">
查看全部服务
<ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
</Link>
</Button>
</motion.div>
</div>
{selectedServiceId && (
<ServiceDetailModal
serviceId={selectedServiceId}
open={isModalOpen}
onOpenChange={setIsModalOpen}
/>
)}
</section>
);
}