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

feat: add links to product detail pages

Browse Source
This commit is contained in:
张翔
2026-02-26 18:02:54 +08:00
parent 97f581f08b
commit 9cdd554454
1 changed files with 48 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/products-section.tsx
+47 -44
View File
@@ -3,6 +3,7 @@
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useInView } from 'framer-motion'; import { useInView } from 'framer-motion';
import { useRef } from 'react'; import { useRef } from 'react';
import Link from 'next/link';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
@@ -40,54 +41,56 @@ export function ProductsSection() {
animate={isInView ? { opacity: 1, y: 0 } : {}} animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }} transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
> >
<Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]"> <Link href={`/products/${product.id}`}>
<CardHeader> <Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C] transition-colors">
<Badge variant="secondary" className="w-fit mb-3"> <CardHeader>
{product.category} <Badge variant="secondary" className="w-fit mb-3">
</Badge> {product.category}
<CardTitle>{product.title}</CardTitle> </Badge>
</CardHeader> <CardTitle>{product.title}</CardTitle>
<CardContent className="flex-1 flex flex-col"> </CardHeader>
<CardDescription className="text-base leading-relaxed mb-4 flex-1"> <CardContent className="flex-1 flex flex-col">
{product.description} <CardDescription className="text-base leading-relaxed mb-4 flex-1">
</CardDescription> {product.description}
</CardDescription>
<div className="mb-4"> <div className="mb-4">
<p className="text-sm font-medium text-[#1C1C1C] mb-2">核心功能</p> <p className="text-sm font-medium text-[#1C1C1C] mb-2">核心功能</p>
<div className="flex flex-wrap gap-1.5"> <div className="flex flex-wrap gap-1.5">
{product.features.slice(0, 4).map((feature, idx) => ( {product.features.slice(0, 4).map((feature, idx) => (
<span <span
key={idx} key={idx}
className="inline-flex items-center text-xs px-2 py-1 bg-[#FAFAFA] text-[#3D3D3D] rounded border border-[#E5E5E5]" className="inline-flex items-center text-xs px-2 py-1 bg-[#FAFAFA] text-[#3D3D3D] rounded border border-[#E5E5E5]"
> >
<Check className="w-3 h-3 mr-1 text-[#C41E3A]" /> <Check className="w-3 h-3 mr-1 text-[#C41E3A]" />
{feature} {feature}
</span> </span>
))} ))}
</div>
</div> </div>
</div>
<div className="mb-4"> <div className="mb-4">
<p className="text-sm font-medium text-[#1C1C1C] mb-2 flex items-center"> <p className="text-sm font-medium text-[#1C1C1C] mb-2 flex items-center">
<TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" /> <TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
核心价值 核心价值
</p> </p>
<ul className="space-y-1"> <ul className="space-y-1">
{product.benefits.map((benefit, idx) => ( {product.benefits.map((benefit, idx) => (
<li key={idx} className="text-xs text-[#5C5C5C] flex items-start"> <li key={idx} className="text-xs text-[#5C5C5C] flex items-start">
<span className="text-[#C41E3A] mr-1.5">•</span> <span className="text-[#C41E3A] mr-1.5">•</span>
{benefit} {benefit}
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
<Button variant="outline" className="w-full mt-auto"> <Button variant="outline" className="w-full mt-auto group-hover:bg-[#C41E3A] group-hover:text-white group-hover:border-[#C41E3A] transition-colors">
了解详情 了解详情
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </Button>
</CardContent> </CardContent>
</Card> </Card>
</Link>
</motion.div> </motion.div>
))} ))}
</div> </div>