From 9cdd55445450eeb7837e3fee95c249017f63f813 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= <xiangzhang1024@gmail.com>
Date: Thu, 26 Feb 2026 18:02:54 +0800
Subject: [PATCH] feat: add links to product detail pages

---
 src/components/sections/products-section.tsx | 93 ++++++++++----------
 1 file changed, 48 insertions(+), 45 deletions(-)

diff --git a/src/components/sections/products-section.tsx b/src/components/sections/products-section.tsx
index 38c2542..5308d23 100644
--- a/src/components/sections/products-section.tsx
+++ b/src/components/sections/products-section.tsx
@@ -3,6 +3,7 @@
 import { motion } from 'framer-motion';
 import { useInView } from 'framer-motion';
 import { useRef } from 'react';
+import Link from 'next/link';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -40,54 +41,56 @@ export function ProductsSection() {
               animate={isInView ? { opacity: 1, y: 0 } : {}}
               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]">
-                <CardHeader>
-                  <Badge variant="secondary" className="w-fit mb-3">
-                    {product.category}
-                  </Badge>
-                  <CardTitle>{product.title}</CardTitle>
-                </CardHeader>
-                <CardContent className="flex-1 flex flex-col">
-                  <CardDescription className="text-base leading-relaxed mb-4 flex-1">
-                    {product.description}
-                  </CardDescription>
-                  
-                  <div className="mb-4">
-                    <p className="text-sm font-medium text-[#1C1C1C] mb-2">核心功能</p>
-                    <div className="flex flex-wrap gap-1.5">
-                      {product.features.slice(0, 4).map((feature, idx) => (
-                        <span 
-                          key={idx} 
-                          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]" />
-                          {feature}
-                        </span>
-                      ))}
+              <Link href={`/products/${product.id}`}>
+                <Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C] transition-colors">
+                  <CardHeader>
+                    <Badge variant="secondary" className="w-fit mb-3">
+                      {product.category}
+                    </Badge>
+                    <CardTitle>{product.title}</CardTitle>
+                  </CardHeader>
+                  <CardContent className="flex-1 flex flex-col">
+                    <CardDescription className="text-base leading-relaxed mb-4 flex-1">
+                      {product.description}
+                    </CardDescription>
+                    
+                    <div className="mb-4">
+                      <p className="text-sm font-medium text-[#1C1C1C] mb-2">核心功能</p>
+                      <div className="flex flex-wrap gap-1.5">
+                        {product.features.slice(0, 4).map((feature, idx) => (
+                          <span 
+                            key={idx} 
+                            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]" />
+                            {feature}
+                          </span>
+                        ))}
+                      </div>
                     </div>
-                  </div>
 
-                  <div className="mb-4">
-                    <p className="text-sm font-medium text-[#1C1C1C] mb-2 flex items-center">
-                      <TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
-                      核心价值
-                    </p>
-                    <ul className="space-y-1">
-                      {product.benefits.map((benefit, idx) => (
-                        <li key={idx} className="text-xs text-[#5C5C5C] flex items-start">
-                          <span className="text-[#C41E3A] mr-1.5">•</span>
-                          {benefit}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
+                    <div className="mb-4">
+                      <p className="text-sm font-medium text-[#1C1C1C] mb-2 flex items-center">
+                        <TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
+                        核心价值
+                      </p>
+                      <ul className="space-y-1">
+                        {product.benefits.map((benefit, idx) => (
+                          <li key={idx} className="text-xs text-[#5C5C5C] flex items-start">
+                            <span className="text-[#C41E3A] mr-1.5">•</span>
+                            {benefit}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
 
-                  <Button variant="outline" className="w-full mt-auto">
-                    了解详情
-                    <ArrowRight className="ml-2 w-4 h-4" />
-                  </Button>
-                </CardContent>
-              </Card>
+                    <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" />
+                    </Button>
+                  </CardContent>
+                </Card>
+              </Link>
             </motion.div>
           ))}
         </div>