Implement use cases page

app/components/cards/Icon/Icon.view.tsx

@@ -7,30 +7,41 @@ export function IconView({
   title,
   description,
   className,
+  interactive,
+  layoutTitleId,
   onClick,
   onKeyDown,
 }: IconViewProps) {
+  const interactionClass = interactive
+    ? "cursor-pointer transition-all duration-200 hover:scale-[1.02] hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-2"
+    : "cursor-default";
+
   return (
     <div
-      className={`border border-[var(--color-border-default-primary)] flex flex-col h-[350px] items-start justify-between p-[var(--measures-spacing-020)] relative w-[288px] bg-transparent cursor-pointer transition-all duration-200 hover:scale-[1.02] hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-2 ${className}`}
-      tabIndex={0}
-      role="button"
-      aria-label={`${title}: ${description}`}
-      onClick={onClick}
-      onKeyDown={onKeyDown}
+      data-figma-node="22084-859659"
+      className={`relative flex h-[350px] w-full min-w-[240px] max-w-[480px] flex-col items-start justify-between border border-solid border-[var(--color-border-default-secondary)] bg-transparent p-[var(--measures-spacing-020)] ${interactionClass} ${className}`}
+      tabIndex={interactive ? 0 : undefined}
+      role={interactive ? "button" : "article"}
+      aria-label={interactive ? `${title}: ${description}` : undefined}
+      aria-labelledby={interactive ? undefined : layoutTitleId}
+      onClick={interactive ? onClick : undefined}
+      onKeyDown={interactive ? onKeyDown : undefined}
     >
       {/* Icon */}
-      <div className="shrink-0 w-[36px] h-[36px] flex items-center justify-center">
+      <div className="flex h-9 w-9 shrink-0 items-center justify-center">
         {icon}
       </div>
 
-      {/* Title - Centered with auto space above and below */}
-      <h3 className="font-inter font-normal text-[32px] leading-[36px] text-[var(--color-content-default-primary)] w-full">
+      {/* Title — Figma XX Large / Label (32 / 36) */}
+      <h3
+        id={interactive ? undefined : layoutTitleId}
+        className="w-full text-left font-inter text-[32px] font-normal leading-[36px] text-[var(--color-content-default-primary)]"
+      >
         {title}
       </h3>
 
-      {/* Description */}
-      <p className="font-inter font-medium text-[10px] leading-[14px] uppercase text-[var(--color-content-default-primary)] w-full">
+      {/* Body: X Small / Paragraph (12/16) per Figma; 14/20 on md–<lg only (Section 22084-859062) */}
+      <p className="w-full text-left font-inter font-normal text-[length:var(--text-x-small-paragraph)] leading-[length:var(--text-x-small-paragraph--line-height)] text-[var(--color-content-default-primary)] md:text-[length:var(--text-small-paragraph)] md:leading-[length:var(--text-small-paragraph--line-height)] lg:text-[length:var(--text-x-small-paragraph)] lg:leading-[length:var(--text-x-small-paragraph--line-height)]">
         {description}
       </p>
     </div>