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,91 @@
+'use client';
+
+import { type ReactNode } from 'react';
+import { ArrowUpRight } from 'lucide-react';
+
+interface InsightCardProps {
+  /** Category tag (e.g. "白皮书", "观点") */
+  tag: string;
+  /** Title */
+  title: string;
+  /** Description */
+  desc: string;
+  /** Optional date string */
+  date?: string;
+  /** Whether this is a featured (large) card with image */
+  featured?: boolean;
+  /** Image URL for featured card */
+  image?: string;
+  /** Optional link element (avoid nesting <a> in <a>) */
+  link?: ReactNode;
+  className?: string;
+}
+
+export function InsightCard({
+  tag,
+  title,
+  desc,
+  date,
+  featured = false,
+  image,
+  link,
+  className = '',
+}: InsightCardProps) {
+  if (featured) {
+    return (
+      <div
+        className={`group relative overflow-hidden flex flex-col justify-end min-h-[260px] sm:min-h-[300px] md:min-h-[360px] p-8 sm:p-10 md:p-12 lg:p-14 rounded-sm cursor-pointer bg-[var(--color-bg-secondary)] border border-[var(--color-border-primary)] hover:bg-[var(--color-bg-tertiary)] ${className}`}
+      >
+        {/* Background image */}
+        {image && (
+          <img
+            src={image}
+            alt=""
+            className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 opacity-10"
+            loading="lazy"
+          />
+        )}
+
+        <div className="relative z-10">
+          <div className="text-[10px] tracking-[3px] uppercase font-medium mb-4 md:mb-5"
+            style={{ color: 'var(--color-brand)' }}>
+            {tag}
+          </div>
+          <h3 className="font-sans text-[20px] sm:text-[24px] md:text-[26px] font-bold leading-[1.3] text-[var(--color-text-primary)] mb-2 md:mb-3">
+            {title}
+          </h3>
+          <p className="text-[13px] sm:text-[14px] leading-relaxed max-w-[400px] mb-5 md:mb-6 text-[var(--color-text-secondary)]">
+            {desc}
+          </p>
+          <span className="text-[12px] inline-flex items-center gap-1.5 transition-colors duration-300 text-[var(--color-text-muted)] group-hover:text-[var(--color-brand)]">
+            阅读全文
+            <ArrowUpRight className="w-3 h-3" />
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`group p-6 sm:p-8 md:p-10 transition-all duration-400 cursor-pointer flex flex-col bg-[var(--color-bg-primary)] hover:bg-[var(--color-bg-secondary)] ${className}`}
+    >
+      <div className="text-[10px] tracking-[2px] uppercase font-medium mb-3 md:mb-4"
+        style={{ color: 'var(--color-brand)' }}>
+        {tag}
+      </div>
+      <h4 className="font-sans text-[16px] sm:text-[17px] font-semibold leading-[1.5] mb-2 text-[var(--color-text-primary)]">
+        {title}
+      </h4>
+      <p className="text-[13px] leading-relaxed flex-1 mb-4 md:mb-5 text-[var(--color-text-muted)]">
+        {desc}
+      </p>
+      <div className="flex items-center justify-between">
+        {date && (
+          <span className="text-[11px] text-[var(--color-text-subtle)]">{date}</span>
+        )}
+        {link && <span className="text-[12px] text-[var(--color-text-subtle)]">{link}</span>}
+      </div>
+    </div>
+  );
+}