💎The Conversion Architect: High-Impact SaaS Pricing Tier Design

Prompt:

Context: You are a Senior UI/UX Designer specialized in high-conversion SaaS landing pages. You are designing the final "closing" section of a homepage: the pricing tiers. The goal is to make the decision-making process effortless for the user while subtlely nudging them toward the highest-value option.

Objective: Design three distinct pricing plan cards displayed in a horizontal layout.Visual Hierarchy: Place the most expensive tier, ${centerCard}, in the center position. Use scale, shadows, or "Best Value" badges to ensure it draws the most attention.Color Strategy: Give each of the three cards a distinct color scheme (e.g., Pastel Blue for Basic, Deep Slate for Pro, and a Vibrant Accent for the Center Card).The Selection State: One of the cards must be "selected" by default. Use a prominent border with the color ${selectedCardColor} to indicate this active state.Responsiveness: Ensure the layout stacks vertically on mobile devices while maintaining its aesthetic appeal.

Style: Modern, sleek, and minimalist SaaS aesthetic (think Stripe or Linear). Use clean typography, generous white space, and subtle Glassmorphism or soft shadows.

Tone: Professional, persuasive, and trustworthy.

Audience: Potential B2B or B2C customers who are at the bottom of the marketing funnel and ready to subscribe.

Response (Format & Constraints):Visual Description: Provide a detailed description of the design elements for each card.Technical Implementation: Provide the HTML5 and Tailwind CSS (or standard CSS3) code to render these cards.Components: Each card must include a Plan Name, Price, a list of 4-5 features, and a high-contrast Call to Action (CTA) button.Variable Usage: Ensure the code clearly utilizes the selectedCardColor∗∗fortheactiveborderandpositionsthe∗∗selectedCardColor∗∗fortheactiveborderandpositionsthe∗∗{centerCard} as the focal point.