feat: add ProductCard, ProductMatrixSection, ChallengeCard, and ChallengeSection components

2026-04-30 19:18:07 +08:00
parent 84501fda14
commit a6e1761b3d
4 changed files with 261 additions and 0 deletions
@@ -0,0 +1,64 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { StaticLink } from '@/components/ui/static-link';
+import { ArrowRight } from 'lucide-react';
+
+interface ChallengeCardProps {
+  title: string;
+  description: string;
+  scenario: 'isolation' | 'growth' | 'compliance';
+  href: string;
+  index: number;
+}
+
+const scenarioStyles = {
+  isolation: {
+    bg: 'bg-[var(--color-challenge-isolation)]',
+    hoverBg: 'hover:bg-[var(--color-challenge-isolation-hover)]',
+    accent: 'border-l-[#C41E3A]',
+    icon: '🔒',
+  },
+  growth: {
+    bg: 'bg-[var(--color-challenge-growth)]',
+    hoverBg: 'hover:bg-[var(--color-challenge-growth-hover)]',
+    accent: 'border-l-[#D97706]',
+    icon: '📈',
+  },
+  compliance: {
+    bg: 'bg-[var(--color-challenge-compliance)]',
+    hoverBg: 'hover:bg-[var(--color-challenge-compliance-hover)]',
+    accent: 'border-l-[#16A34A]',
+    icon: '🛡️',
+  },
+};
+
+export function ChallengeCard({ title, description, scenario, href, index }: ChallengeCardProps) {
+  const style = scenarioStyles[scenario];
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
+    >
+      <StaticLink
+        href={href}
+        className={`group block p-6 rounded-xl border-l-4 ${style.accent} ${style.bg} ${style.hoverBg} transition-all duration-300 hover:shadow-md h-full`}
+      >
+        <div className="text-2xl mb-3">{style.icon}</div>
+        <h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
+          {title}
+        </h3>
+        <p className="text-sm text-[#595959] leading-relaxed mb-4">
+          {description}
+        </p>
+        <span className="inline-flex items-center gap-1 text-sm font-medium text-[#C41E3A] group-hover:gap-2 transition-all">
+          了解方案
+          <ArrowRight className="w-4 h-4" />
+        </span>
+      </StaticLink>
+    </motion.div>
+  );
+}
@@ -0,0 +1,41 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { StaticLink } from '@/components/ui/static-link';
+import { ArrowUpRight } from 'lucide-react';
+
+interface ProductCardProps {
+  title: string;
+  description: string;
+  href: string;
+  index: number;
+}
+
+export function ProductCard({ title, description, href, index }: ProductCardProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
+    >
+      <StaticLink
+        href={href}
+        className="group block p-6 rounded-xl border border-[#E5E5E5] bg-white hover:border-[#C41E3A]/40 hover:shadow-lg transition-all duration-300 h-full"
+      >
+        <div className="flex items-start justify-between mb-4">
+          <span className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-[#FEF2F4] text-[#C41E3A] text-sm font-bold">
+            {String(index + 1).padStart(2, '0')}
+          </span>
+          <ArrowUpRight className="w-5 h-5 text-[#595959] group-hover:text-[#C41E3A] transition-colors" />
+        </div>
+        <h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
+          {title}
+        </h3>
+        <p className="text-sm text-[#595959] leading-relaxed">
+          {description}
+        </p>
+      </StaticLink>
+    </motion.div>
+  );
+}