feat(ui): own responsive marketing layout APIs

packages/ui/components/FeatureIconCard.wrn

@@ -15,13 +15,17 @@ component FeatureIconCard {
     variant: string = "default"
     align: string = "left"
     hover: string = "lift"
+    radius: string = "default"
+    shadow: string = "default"
+    clickableSurface: boolean = false
+    descriptionTone: string = "default"
     class: string = ""
   }
 
   view {
     <article
       data-ui-component="FeatureIconCard"
-      data-size='{size}' data-variant='{variant}' data-hover='{hover}' data-align='{align}'
+      data-size='{size}' data-variant='{variant}' data-hover='{hover}' data-align='{align}' data-radius='{radius}' data-shadow='{shadow}' data-clickable-surface='{clickableSurface ? "true" : "false"}' data-description-tone='{descriptionTone}'
       class='wrn-feature-icon-card {class}'
     >
       <div
@@ -62,6 +66,11 @@ component FeatureIconCard {
   style {
     .wrn-feature-icon-card { position: relative; display: flex; height: 100%; flex-direction: column; padding: 1.5rem; border: 1px solid var(--wrn-color-border); border-radius: calc(var(--wrn-radius) * 2); background: var(--wrn-color-surface-raised); box-shadow: var(--wrn-shadow-1); transition: transform var(--wrn-motion-base), border-color var(--wrn-motion-base), box-shadow var(--wrn-motion-base); }
     .wrn-feature-icon-card[data-size="sm"] { padding: 1.25rem; } .wrn-feature-icon-card[data-size="lg"] { padding: 2rem; }
+    .wrn-feature-icon-card[data-size="compact"] { min-height: 0; padding: 1.25rem; }
+    .wrn-feature-icon-card[data-radius="lg"] { border-radius: 1rem; }
+    .wrn-feature-icon-card[data-shadow="sm"] { box-shadow: 0 5px 18px rgb(15 23 42 / 0.06); }
+    .wrn-feature-icon-card[data-description-tone="muted"] .wrn-feature-icon-card__description { color: var(--wrn-color-text-muted); font-weight: 500; }
+    .wrn-feature-icon-card[data-clickable-surface="true"] .wrn-feature-icon-card__action::after { position: absolute; inset: 0; content: ""; }
     .wrn-feature-icon-card[data-variant="soft"] { background: var(--wrn-color-surface-soft); }
     .wrn-feature-icon-card[data-variant="ghost"] { border-color: transparent; background: transparent; box-shadow: none; }
     .wrn-feature-icon-card[data-hover="lift"]:hover { transform: translateY(-0.25rem); }