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 { motion } from 'framer-motion';
import { useInView } 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 { Code, Cloud, BarChart3, Shield, ArrowRight } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { SERVICES } from '@/lib/constants'; import { SERVICES } from '@/lib/constants';
import { ServiceDetailModal } from '@/components/services/service-detail-modal';
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = { const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
Code, Code,
@@ -19,17 +19,10 @@ const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
export function ServicesSection() { export function ServicesSection() {
const ref = useRef(null); const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: '-100px' }); 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 ( return (
<section id="solutions" aria-labelledby="solutions-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}> <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="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"> <div className="container-wide relative z-10">
@@ -57,17 +50,22 @@ export function ServicesSection() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.5, delay: index * 0.1 }} 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]"> <Link href={`/services/${service.id}`}>
<CardContent className="p-0"> <Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors">
<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"> <CardContent className="p-0">
{Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />} <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">
</div> {Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">{service.title}</h3> </div>
<p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p> <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">{service.title}</h3>
</CardContent> <p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
</Card> <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> </motion.div>
); );
})} })}
@@ -79,20 +77,14 @@ export function ServicesSection() {
transition={{ duration: 0.6, delay: 0.4 }} transition={{ duration: 0.6, delay: 0.4 }}
className="text-center mt-12" className="text-center mt-12"
> >
<Button variant="outline" size="lg" className="group"> <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" /> 查看全部服务
<ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
</Link>
</Button> </Button>
</motion.div> </motion.div>
</div> </div>
{selectedServiceId && (
<ServiceDetailModal
serviceId={selectedServiceId}
open={isModalOpen}
onOpenChange={setIsModalOpen}
/>
)}
</section> </section>
); );
} }