feat: add links to product detail pages

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,7 +41,8 @@ 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]">
+              <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}
@@ -82,12 +84,13 @@ export function ProductsSection() {
                       </ul>
                     </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" />
                     </Button>
                   </CardContent>
                 </Card>
+              </Link>
             </motion.div>
           ))}
         </div>