I understand! You want users to be able to click on different plans (Starter, Pro, Enterprise) on the right side to change which plan is selected for signup. Let me update the signup page to make this interactive.

Now let me read the PricingCard component to see its structure:

Now I'll update the signup page to add plan selection functionality. I'll make the cards clickable and update the selected plan dynamically:

I've updated the signup page with interactive plan selection. Here's what changed:

Key Features Added:

1. Plan Selection State - Uses selectedPlanId state to track which plan the user chose (defaults to Free)
2. Clickable Plan Cards - All pricing cards on the right are now clickable buttons that update the selected plan
3. Dynamic Form Header - The left sidebar shows which plan is currently selected with pricing details
4. Success Message - When a paid plan is selected, a green confirmation message appears
5. Visual Feedback - Cards have hover effects (hover:scale-105) and focus states for better UX

Now when users click on "Starter Plan", "Pro Plan", or "Enterprise Plan", the form on the left updates to show their selection, and they can proceed with signup for that plan.

I can see the design mockup you want. It shows:

Layout:

• Left side: Signup form with "Free Plan" badge at top, all form fields, and sign-up button
• Right side: "Select your plan" header with a 2x2 grid of plan cards
• Free Plan card: has blue border, checkmark, and is pre-selected
• Other plans: Starter (with POPULAR badge), Pro, and Enterprise in a 2x2 grid
• Cards show pricing, features with checkmarks, and are clickable to switch plans

Let me convert this to Bootstrap 5 with custom CSS styling. I'll update the signup page and components to use Bootstrap instead of Tailwind.

Now let me update the layout.tsx to include Bootstrap 5:

Now let me update the globals.css to include Bootstrap and custom CSS:

Now let me update the Header component for Bootstrap:

Now let me create a Bootstrap version of the PricingCard component:

Now let me update the SignupForm component for Bootstrap:

Now let me update the signup page with Bootstrap 5 styling:

Now let me update the pricing page to Bootstrap 5:

I've successfully converted your entire signup and pricing flow to Bootstrap 5 with custom CSS. Here's what I've implemented:

Key Updates:

1. Layout.tsx - Added Bootstrap 5 CDN links (CSS and JS bundle)
2. globals.css - Created comprehensive Bootstrap 5 custom styling with color variables and component-specific classes
3. Header Component - Converted to Bootstrap navbar with responsive toggle and proper styling
4. PricingCard Component - Uses Bootstrap classes with custom .pricing-card styling, selected state indicator with checkmark, and responsive grid
5. SignupForm Component - Bootstrap form controls with validation feedback, password visibility toggles, and proper spacing
6. Signup Page - 2-column layout using Bootstrap grid (left: form, right: 2x2 plan grid) with sticky form positioning
7. Pricing Page - Bootstrap grid layout with hero section, billing toggle, and floating CTA button

Features:

• Responsive design that stacks on mobile
• Interactive plan selection on signup page
• Custom CSS with proper hover effects and transitions
• Bootstrap utilities for spacing, typography, and alignment
• Sticky sidebar form for easy access while scrolling plans

The design matches your mockup with the free plan prominently displayed on the left, other plans in a 2x2 grid on the right, and clickable cards to switch plans before signup.