feat: add products list page

2026-02-26 21:27:49 +08:00
parent 2b08a536eb
commit 8cb5b7659f
1 changed files with 118 additions and 0 deletions
@@ -0,0 +1,118 @@
+'use client';
+
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { useInView } from 'framer-motion';
+import { useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { PageHeader } from '@/components/ui/page-header';
+import { ArrowRight, Check, TrendingUp } from 'lucide-react';
+import { PRODUCTS } from '@/lib/constants';
+
+export default function ProductsPage() {
+  const contentRef = useRef(null);
+  const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
+
+  return (
+    <div className="min-h-screen bg-white">
+      <PageHeader
+        title="产品服务"
+        description="自主研发的企业级产品，助力企业高效运营，实现数字化转型"
+      />
+
+      <div className="container-wide relative z-10 py-16" ref={contentRef}>
+        <div className="max-w-6xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {PRODUCTS.map((product, index) => (
+              <motion.div
+                key={product.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+              >
+                <Link href={`/products/${product.id}`}>
+                  <Card className="h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors">
+                    <CardHeader>
+                      <Badge variant="secondary" className="w-fit mb-3">
+                        {product.category}
+                      </Badge>
+                      <CardTitle className="group-hover:text-[#C41E3A] transition-colors">{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 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 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>
+        </div>
+      </div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+        transition={{ duration: 0.6, delay: 0.4 }}
+        className="bg-[#F5F5F5] py-16"
+      >
+        <div className="container-wide text-center">
+          <h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
+            需要定制化解决方案？
+          </h2>
+          <p className="text-lg text-[#5C5C5C] mb-8 max-w-2xl mx-auto">
+            我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
+          </p>
+          <Button 
+            size="lg" 
+            className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
+            asChild
+          >
+            <Link href="/contact">
+              联系我们
+              <ArrowRight className="ml-2 w-4 h-4" />
+            </Link>
+          </Button>
+        </div>
+      </motion.div>
+    </div>
+  );
+}