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,98 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useReducedMotion } from '@/hooks/use-reduced-motion';
+import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
+
+export type ServiceColor = 'brand' | 'blue' | 'teal' | 'amber' | 'purple';
+
+interface ServiceCardProps {
+  number: string;
+  title: string;
+  description: string;
+  color?: ServiceColor;
+  href: string;
+  className?: string;
+  delay?: number;
+}
+
+const colorMap: Record<ServiceColor, string> = {
+  brand: 'var(--color-brand)',
+  blue: 'var(--color-accent-blue)',
+  teal: 'var(--color-accent-teal)',
+  amber: 'var(--color-accent-amber)',
+  purple: 'var(--color-accent-purple)',
+};
+
+export function ServiceCard({
+  number,
+  title,
+  description,
+  color = 'brand',
+  href,
+  className = '',
+  delay = 0,
+}: ServiceCardProps) {
+  const shouldReduceMotion = useReducedMotion();
+  const accentColor = colorMap[color];
+
+  return (
+    <motion.div
+      className={`group relative bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] rounded-[var(--radius-lg)] overflow-hidden transition-all duration-[var(--transition-normal)] ease-[var(--ease-ink)] hover:-translate-y-1 hover:shadow-[var(--shadow-lg)] hover:border-[var(--color-brand)]/30 ${className}`}
+      initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-40px' }}
+      transition={{ duration: 0.6, delay, ease: [0.22, 1, 0.36, 1] }}
+    >
+      {/* Left accent bar — grows from bottom on entry */}
+      <motion.div
+        className="absolute left-0 top-0 bottom-0 w-[3px] origin-bottom transition-all duration-[var(--transition-normal)] group-hover:w-1.5"
+        style={{ backgroundColor: accentColor }}
+        initial={shouldReduceMotion ? {} : { scaleY: 0 }}
+        whileInView={{ scaleY: 1 }}
+        viewport={{ once: true, margin: '-40px' }}
+        transition={{ duration: 0.4, delay: delay - 0.1 > 0 ? delay - 0.1 : 0, ease: [0.22, 1, 0.36, 1] }}
+      />
+
+      <div className="p-6 md:p-8 pl-6 md:pl-8">
+        {/* Large background number */}
+        <div
+          className="absolute top-4 right-6 text-[5rem] font-black leading-none select-none pointer-events-none transition-opacity duration-[var(--transition-normal)] group-hover:opacity-10"
+          style={{ color: 'var(--color-border-light)', opacity: 0.06 }}
+          aria-hidden="true"
+        >
+          {number}
+        </div>
+
+        {/* Number label */}
+        <div
+          className="text-xs font-bold tracking-[0.18em] uppercase mb-4"
+          style={{ color: accentColor }}
+        >
+          Service {number}
+        </div>
+
+        {/* Title */}
+        <h3 className="text-xl md:text-2xl font-bold mb-3 leading-tight text-[var(--color-text-primary)]">
+          {title}
+        </h3>
+
+        {/* Description */}
+        <p className="text-sm md:text-base leading-relaxed mb-6 text-[var(--color-text-secondary)]">
+          {description}
+        </p>
+
+        {/* Link */}
+        <Link
+          href={href}
+          className="inline-flex items-center text-sm font-medium transition-all duration-[var(--transition-fast)] group-hover:gap-2.5 text-[var(--color-brand)]"
+          style={{ minHeight: '44px', minWidth: '44px' }}
+        >
+          <span>了解详情</span>
+          <ArrowRight className="w-4 h-4 transform transition-transform duration-[var(--transition-fast)] group-hover:translate-x-1" />
+        </Link>
+      </div>
+    </motion.div>
+  );
+}