refactor(website): fix mechanics card semantics and onSelect item signature

Author: Aparencia

website/components/feature/FeatureHero.tsx

@@ -31,7 +31,7 @@ export function FeatureHero({ eyebrow, title, subtitle, ctaText, ctaHref = "/dow
       <SectionReveal delay={0.15}>
         <Link
           href={ctaHref}
-          className="inline-block px-10 py-4 rounded-2xl text-white font-medium text-lg transition-all duration-500 hover:scale-[1.05] active:scale-[0.97]"
+          className="inline-block px-10 py-4 rounded-2xl text-white font-medium text-lg transition-all duration-500 hover:scale-[1.05] active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-kb-brand"
           style={{
             background: "linear-gradient(135deg, var(--kb-amber), var(--kb-accent-400))",
             boxShadow: "var(--kb-shadow-accent)",

website/components/feature/FeatureMechanics.tsx

@@ -10,9 +10,12 @@ interface FeatureMechanicsProps {
   title: string;
   hint?: string;
   items: FeatureMechanicsItem[];
-  onSelect?: (index: number) => void;
+  onSelect?: (item: FeatureMechanicsItem) => void;
 }
 
+const CARD_CLASS =
+  "w-full h-full text-left rounded-3xl p-6 transition-all duration-500 hover:-translate-y-1";
+
 export function FeatureMechanics({ title, hint, items, onSelect }: FeatureMechanicsProps) {
   return (
     <section className="max-w-4xl mx-auto px-6 mb-24">
@@ -23,20 +26,35 @@ export function FeatureMechanics({ title, hint, items, onSelect }: FeatureMechan
       <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
         {items.map((item, i) => (
           <SectionReveal key={item.key ?? item.name} delay={i * 0.06}>
-            <button
-              type="button"
-              onClick={() => onSelect?.(i)}
-              className="w-full h-full text-left rounded-3xl p-6 transition-all duration-500 hover:-translate-y-1 cursor-pointer"
-              style={{
-                background: "var(--kb-bg-elevated)",
-                border: "1px solid var(--kb-glass-border)",
-                boxShadow: "var(--kb-shadow-card)",
-              }}
-            >
-              <span className="text-2xl">{item.icon}</span>
-              <h3 className="font-serif text-lg font-semibold text-kb-text mt-3 mb-2">{item.name}</h3>
-              <p className="text-sm text-kb-text2 leading-relaxed">{item.desc}</p>
-            </button>
+            {onSelect ? (
+              <button
+                type="button"
+                onClick={() => onSelect(item)}
+                className={`${CARD_CLASS} cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-kb-brand`}
+                style={{
+                  background: "var(--kb-bg-elevated)",
+                  border: "1px solid var(--kb-glass-border)",
+                  boxShadow: "var(--kb-shadow-card)",
+                }}
+              >
+                <span className="text-2xl">{item.icon}</span>
+                <span className="font-serif text-lg font-semibold text-kb-text mt-3 mb-2 block">{item.name}</span>
+                <p className="text-sm text-kb-text2 leading-relaxed">{item.desc}</p>
+              </button>
+            ) : (
+              <div
+                className={CARD_CLASS}
+                style={{
+                  background: "var(--kb-bg-elevated)",
+                  border: "1px solid var(--kb-glass-border)",
+                  boxShadow: "var(--kb-shadow-card)",
+                }}
+              >
+                <span className="text-2xl">{item.icon}</span>
+                <span className="font-serif text-lg font-semibold text-kb-text mt-3 mb-2 block">{item.name}</span>
+                <p className="text-sm text-kb-text2 leading-relaxed">{item.desc}</p>
+              </div>
+            )}
           </SectionReveal>
         ))}
       </div>

website/components/feature/FeatureTrust.tsx

@@ -66,7 +66,7 @@ export function FeatureTrust() {
             href="https://github.com/Aparencia/Entropydecrease"
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center gap-2 text-kb-brand font-medium transition-all duration-400 hover:gap-3.5"
+            className="inline-flex items-center gap-2 text-kb-brand font-medium transition-all duration-400 hover:gap-3.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-kb-brand"
           >
             GitHub 仓库 · 开发全程公开 ↗
           </a>