Interactive Product Landing

Do you want to turn your static landing page into an interactive conversion machine? In this project, you'll transform your Product Landing Page from Module 1 into an experience that captures leads, answers questions, and closes sales automatically.

You'll add professional interactive components: dynamic plan comparator, smart multi-step form, FAQ accordion, and filterable testimonials. All while mastering advanced prompting and collaborative debugging with AI.

🌱 How to start this project?

1. Open Cursor and load your Product Landing Page project
2. If you didn't keep the project, create a new one following the previous exercise
3. Get ready to add interactivity that boosts conversions

👉 Important: This project builds on your previous work. We're expanding, not starting from scratch.

Instructions

1. Interactive Plan Comparator

Initial prompt for dynamic pricing:

I want to turn my static pricing section into an interactive comparator.

REQUIRED FEATURES:
- Annual/monthly toggle that updates prices dynamically
- Show "Save X%" when annual is selected
- Quantity/users slider that updates price in real time
- Visual highlight of plan differences on hover
- "Recommended plan for you" button that highlights the middle plan
- Side-by-side comparison when clicking "Compare plans"

INTEGRATION:
- Keep the existing visual design
- Add these features without breaking the layout
- Smooth animations for all changes
- Mobile-friendly (slider must work on touch)

TECHNICAL DETAILS:
- Vanilla JavaScript for calculations
- CSS transitions for animations
- LocalStorage to remember annual/monthly preference
- Accessibility: fully functional keyboard navigation

Keep the code clean and well commented.

2. Smart Multi-Step Form

Prompt for advanced form:

I want to replace the simple CTA with a smart multi-step form.

FORM STRUCTURE:
Step 1 - Basic info:
- Full name
- Email (with validation)
- Company (optional)

Step 2 - Needs:
- "What are you looking for?" (multiple checkboxes based on product)
- "How many users?" (if applicable)
- "When do you want to start?" (radio buttons: immediately/this month/next month)

Step 3 - Plan selection:
- Show all 3 plans with the recommended one pre-selected
- Summary of entered information
- Final confirmation

FEATURES:
- Visual progress bar (Step X of 3)
- "Next" and "Back" buttons
- Real-time validation with clear messages
- Save draft in localStorage (restore on refresh)
- Smooth animation between steps
- Loading state on final button
- Success message on completion

INTEGRATION:
- Replace the "Start now" button in the hero
- Also in the pricing section
- Elegant modal/overlay for the form
- Close with X or click outside

Make it professional and conversion-optimized.

3. FAQ Accordion

Prompt for FAQ section:

I want to add a FAQ section before pricing with an interactive accordion.

CONTENT:
Create 6-8 relevant frequently asked questions for [product type].
Generic examples:
- How does [product] work?
- Can I cancel anytime?
- Do you offer a money-back guarantee?
- Do I need technical knowledge?
- What's included in the free plan?
- Are there discounts for large teams?

FEATURES:
- Accordion: click to expand/collapse
- Only one question open at a time
- Smooth open/close animation
- + and - icons that change by state
- Search box above: filter questions in real time
- "Did this answer help?" with thumbs up/down
- Counter for how many times each question was opened

DESIGN:
- Elegant cards with subtle shadows
- Hover effects
- Responsive: works perfectly on mobile
- Colors consistent with the rest of the landing

Add it as a new section between Features and Pricing.

4. Dynamic Testimonials

Prompt to improve testimonials:

I want to turn static testimonials into a dynamic, interactive system.

FEATURES:
- Automatic carousel (every 5 seconds)
- Pause on hover
- Manual prev/next buttons
- Dots indicator (which testimonial is active)
- Filters by category: "All" / "Entrepreneurs" / "Companies" / "Freelancers"
- Smooth transition between testimonials when filtering

ADDITIONAL ELEMENTS:
- Rating stars (5 stars) for each testimonial
- Testimonial date
- Link to profile/company (optional)
- "Active users now" - animated counter that increases

VISUAL IMPROVEMENTS:
- Cards with subtle 3D effect on hover
- Decorative quotes icon
- Circular profile photo with elegant border
- Fade-in animation when a new testimonial appears

TECHNICAL DETAILS:
- Auto-play with pause/resume
- Touch-friendly for mobile (swipe gestures)
- Keyboard navigation (arrows)
- Smooth animations at 60fps

Keep the design professional and credible.

5. Collaborative Debugging

During this phase, you will intentionally encounter errors. Use these prompts when something fails:

For pricing calculation errors:

My dynamic pricing isn't calculating correctly.

Specific error: [describe what happens]
Example: "When switching from monthly to annual, the price isn't multiplied by 12"

Relevant code:
[paste the calculation function]

What's wrong with the logic and how do I fix it?

For form validation issues:

My multi-step form has validation problems.

Expected behavior: [description]
Current behavior: [what happens]

Code for the failing step:
[relevant HTML + JavaScript]

Where's the error and how do I validate correctly?

For accordion issues:

My FAQ accordion doesn't open/close correctly.

Problem: [specific description]
Example: "Multiple questions open at once" or "Animation looks choppy"

Code:
[paste accordion code]

How do I fix it so it works smoothly?

6. Integration and Polish

Final optimization prompt:

I want to optimize my Interactive Product Landing for maximum conversion and performance.

OPTIMIZATIONS:
- Lazy loading for heavy components
- Smooth scroll between sections on navigation click
- Visible loading states for all interactions
- Robust error handling in forms
- Analytics events: tracking CTA clicks, form completion, etc.

ACCESSIBILITY:
- Aria labels on all interactive components
- Full keyboard navigation
- Clear, visible focus states
- Screen reader friendly
- Sufficient contrast in both themes

TESTING:
- Works in Chrome, Firefox, Safari
- Responsive at 320px, 768px, 1024px+
- Touch gestures on mobile
- Performance: fast load, 60fps animations

CONVERSION:
- CTAs always visible
- Form easily accessible
- FAQ addresses main objections
- Prominent social proof
- Zero-friction to get started

Give me an optimization checklist and the necessary code.

Integrated Debugging

Unlike the first project, this one includes intentional debugging moments. When you encounter errors (and you will), you'll use the methodology you learned in the debugging article to solve them collaboratively with AI.

Every error is an opportunity to practice:

• Clearly describe problems
• Provide relevant context
• Iterate on solutions
• Understand the "why" behind each fix

Share your creation

When you finish:

• Record a short video of your voice assistant in action
• Share on social media with #VibeCoding #IA
• Send the link to friends and get ready for their reactions
• Document what was most challenging about debugging