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,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>
+  );
+}