feat: add case detail pages with SSG and dynamic routing

2026-02-13 14:53:52 +08:00
parent 7914decdaf
commit 34c96c119d
3 changed files with 411 additions and 0 deletions
@@ -0,0 +1,150 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+import { GlassCard } from '@/components/ui/glass-card';
+import { CASES } from '@/lib/constants';
+import { ArrowRight, Building2, TrendingUp } from 'lucide-react';
+
+export function CasesSection() {
+  const [isVisible, setIsVisible] = useState(false);
+  const sectionRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <section
+      ref={sectionRef}
+      id="cases"
+      className="py-24 md:py-32 relative overflow-hidden bg-[#FAFAFA]"
+    >
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[#E5E5E5] to-transparent" />
+        <div className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[#E5E5E5] to-transparent" />
+      </div>
+
+      <div className="container-wide relative z-10">
+        <div className="text-center mb-16">
+          <div
+            className={`
+              opacity-0 translate-y-4
+              ${isVisible ? 'animate-fade-in-up' : ''}
+            `}
+          >
+            <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#C41E3A]/10 text-[#C41E3A] text-sm font-medium mb-4">
+              <TrendingUp className="w-4 h-4" />
+              成功案例
+            </span>
+          </div>
+
+          <h2
+            className={`
+              text-3xl sm:text-4xl font-semibold text-[#171717] mb-4
+              opacity-0 translate-y-4
+              ${isVisible ? 'animate-fade-in-up stagger-1' : ''}
+            `}
+          >
+            客户成功案例
+          </h2>
+
+          <p
+            className={`
+              text-lg text-[#525252] max-w-2xl mx-auto
+              opacity-0 translate-y-4
+              ${isVisible ? 'animate-fade-in-up stagger-2' : ''}
+            `}
+          >
+            以专业实力赢得客户信赖，用技术创新创造商业价值
+          </p>
+        </div>
+
+        <div className="grid lg:grid-cols-3 gap-6 md:gap-8">
+          {CASES.map((caseItem, index) => (
+            <Link key={caseItem.id} href={`/cases/${caseItem.id}`}>
+              <GlassCard
+                variant="elevated"
+                className="overflow-hidden group cursor-pointer"
+              >
+                <div
+                  className={`
+                    opacity-0 translate-y-4
+                    ${isVisible ? 'animate-fade-in-up' : ''}
+                  `}
+                  style={{ animationDelay: `${(index + 3) * 100}ms` }}
+                >
+                  <div className="relative h-48 bg-gradient-to-br from-[#C41E3A]/10 to-[#D4A574]/10 overflow-hidden">
+                    <div className="absolute inset-0 flex items-center justify-center">
+                      <Building2 className="w-16 h-16 text-[#C41E3A]/30 group-hover:scale-110 transition-transform duration-500" />
+                    </div>
+                    <div className="absolute top-4 left-4">
+                      <span className="px-3 py-1 bg-white/90 backdrop-blur-sm rounded-full text-xs font-medium text-[#C41E3A]">
+                        {caseItem.industry}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="p-6">
+                    <h3 className="text-lg font-semibold text-[#171717] mb-2 group-hover:text-[#C41E3A] transition-colors duration-300">
+                      {caseItem.title}
+                    </h3>
+
+                    <p className="text-sm text-[#525252] mb-4 line-clamp-2">
+                      {caseItem.description}
+                    </p>
+
+                    <div className="grid grid-cols-3 gap-2 mb-4">
+                      {caseItem.results.map((result) => (
+                        <div
+                          key={result.label}
+                          className="text-center p-2 bg-[#FAFAFA] rounded-lg"
+                        >
+                          <div className="text-sm font-semibold text-[#C41E3A]">
+                            {result.value}
+                          </div>
+                          <div className="text-xs text-[#737373] truncate">
+                            {result.label}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+
+                    <div className="flex flex-wrap gap-2 mb-4">
+                      {caseItem.tags.map((tag) => (
+                        <span
+                          key={tag}
+                          className="px-2 py-1 bg-[#171717]/5 rounded text-xs text-[#525252]"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+
+                    <div className="flex items-center justify-center text-sm font-medium text-[#C41E3A] group-hover:gap-2 transition-all">
+                      查看详情
+                      <ArrowRight className="w-4 h-4 ml-1" />
+                    </div>
+                  </div>
+                </div>
+              </GlassCard>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}