feat(marketing): 重构营销页面与四层叙事组件体系

- 重构 About、Contact、Team 等静态营销页面 - 重构 News 新闻列表与详情页 - 重构 Products 产品目录、详情与独立产品页面 - 重构 Services 与 Solutions 服务/解决方案页面 - 重构 Detail 四层叙事组件 (Hero → Value → Trust → CTA) - 重构 Sections 页面区块组件 (Hero, CTA, SocialProof, WhyUs 等) - 新增 SectionHeader、ServiceCard、CaseCard 等可复用组件
2026-07-07 06:53:40 +08:00
parent 767931202d
commit 829d83522c
57 changed files with 3912 additions and 2380 deletions
@@ -0,0 +1,86 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import Image from 'next/image';
+import { ArrowRight, CheckCircle2 } from 'lucide-react';
+
+interface ProductCardProps {
+  product: {
+    id: string;
+    title: string;
+    description: string;
+    image: string;
+    category: string;
+    status: string;
+    features?: string[];
+  };
+}
+
+export function ProductCard({ product }: ProductCardProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{
+        duration: 0.65,
+        ease: [0.22, 1, 0.36, 1] as const,
+      }}
+      className="group"
+    >
+      <Link href={`/products/${product.id}`} className="block">
+        <div className="relative h-full rounded-2xl bg-white border border-border-primary overflow-hidden hover:border-brand/30 hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
+          <div className="aspect-video relative overflow-hidden bg-bg-secondary">
+            <Image
+              src={product.image}
+              alt={product.title}
+              fill
+              className="object-cover group-hover:scale-105 transition-transform duration-500"
+            />
+
+            <div className="absolute top-4 left-4 flex gap-2">
+              <span className="px-3 py-1 rounded-full text-xs font-semibold bg-brand text-white shadow-md">
+                {product.category}
+              </span>
+              {product.status === '已发布' && (
+                <span className="px-3 py-1 rounded-full text-xs font-medium bg-green-500 text-white shadow-md flex items-center gap-1">
+                  <CheckCircle2 className="w-3 h-3" />
+                  已发布
+                </span>
+              )}
+            </div>
+          </div>
+
+          <div className="p-6">
+            <h3 className="text-xl font-bold text-ink mb-3 group-hover:text-brand transition-colors">
+              {product.title}
+            </h3>
+
+            <p className="text-sm text-text-muted leading-relaxed mb-5 line-clamp-2">
+              {product.description}
+            </p>
+
+            {product.features && product.features.length > 0 && (
+              <div className="flex flex-wrap gap-2 mb-5">
+                {product.features.slice(0, 3).map((feature) => (
+                  <span
+                    key={feature}
+                    className="px-2.5 py-1 rounded-md text-xs font-medium bg-bg-secondary text-text-muted border border-border-primary"
+                  >
+                    {feature}
+                  </span>
+                ))}
+              </div>
+            )}
+
+            <div className="flex items-center gap-2 text-sm font-semibold text-brand group-hover:gap-3 transition-all">
+              了解详情
+              <ArrowRight className="w-4 h-4" />
+            </div>
+          </div>
+        </div>
+      </Link>
+    </motion.div>
+  );
+}