StyleSeed
online · Sonnet 4.6
Refactor my pricing card so each tier highlights its CTA differently. Use the brand gradient for the popular one.
On it. I'll extract a `TierCard` component and route the highlighted tier through the StyleSeed brand gradient token. One sec — checking your existing setup.
Readapp/pricing/page.tsx
Found it. Here's the cleaned-up component — gradient is wired to `var(--gradient-brand)` so it morphs automatically when you swap skins:
tsx
<motion.button
  whileHover={{ scale: 1.02 }}
  whileTap={{ scale: 0.98 }}
  className="w-full py-3 font-semibold"
  style={{
    background: tier.highlighted
      ? "var(--gradient-brand)"
      : "var(--card)",
    color: tier.highlighted
      ? "var(--brand-foreground)"
      : "var(--brand)",
    borderRadius: "var(--radius-lg)",
  }}
>
  {tier.cta}
</motion.button>
Perfect. Can you also add a hover lift?
View pricing demo →