Create a responsive, animated pricing card section in Framer that showcases interactivity, smart component behavior, and clean layout principles.

Start with the pre-built pricing section Ryan uses. It includes a basic structure with text and layout already in place, your job is to make it interactive and polished. Find this in your Host Project remix.

Steps:

1. Section Setup

• Open the Host project and locate the pricing_card section.

• Familiarize yourself with its structure (frame, layout, spacing).

• This is your starting point, no need to build it from scratch.

2. Create the PricingCard Component

• Select the full pricing section and convert it into a component named Pricing.

• Create two variants: one for Annual (default) and one for Monthly.
  
  

• In the Monthly variant:
  1. Remove or hide the “Billed annually” text.
  2. Increase the pricing numbers.
  3. Change the visual style of the toggle to indicate the current selection.

Add a Toggle

• Create a toggle element above the cards (as shown in the video).

• Hook it up using component transitions so that clicking it switches between the Annual and Monthly variants.

Hover Effects (Optional Enhancement)

• If you want to extend the interaction, you can create hover states for individual cards using variants.

Responsive Layout

• Ensure the layout works across breakpoints (Ryan stacks cards on smaller screens).

• Use a grid or stack layout, and adjust for mobile views.

Submission Checklist

• At least 3 pricing cards with hover interactions

• One card marked as "Recommended"

• Responsive layout across breakpoints

• Smooth transitions between states

• Optional: pricing toggle feature