feat: add nano banana pro cost simulator

[smakosh]

Summary

• Add /nano-banana-simulator marketing page showing savings on Gemini 3 Pro image generation via LLM Gateway vs Google AI Studio direct pricing
• Discount % is configurable via URL path segment (e.g. /nano-banana-simulator/40 for 40%), defaulting to 20%
• Includes dynamic OpenGraph image that reflects the discount for correct social media previews
• Interactive cost calculator with spend slider, side-by-side price comparison cards, savings banner, and detailed pricing breakdown table

Test plan

• Visit /nano-banana-simulator — should redirect to /nano-banana-simulator/20
• Visit /nano-banana-simulator/40 — page shows 40% discount throughout
• Verify slider + number input update costs correctly
• Visit /nano-banana-simulator/40/opengraph-image — should render OG image with "40% Off"
• Inspect page source for correct og:image meta tag
• Test invalid discount values (e.g. /nano-banana-simulator/0, /nano-banana-simulator/abc) — should fall back to 20%

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Added Nano Banana Simulator—an interactive cost calculator showing savings with dynamic discount pricing (1-99%)
  • Includes adjustable monthly spend slider, detailed pricing comparison table, and shareable OpenGraph images
  • Launched with promotional CTAs and dedicated landing pages

[coderabbitai]

Walkthrough

Introduces a new Nano Banana Simulator feature with dynamic discount-based pricing pages, OpenGraph image generation, and interactive UI components for cost calculation and pricing comparison between LLM Gateway and Google AI Studio direct pricing.

Changes

Cohort / File(s)	Summary
Routing & Pages apps/ui/src/app/nano-banana-simulator/page.tsx, apps/ui/src/app/nano-banana-simulator/[discount]/page.tsx	Establishes simulator routing with base redirect to default discount (20%) and dynamic discount parameter page that generates metadata with discount-aware descriptions.
OpenGraph Image apps/ui/src/app/nano-banana-simulator/[discount]/opengraph-image.tsx	Generates OpenGraph preview images displaying pricing comparison and discount information for social sharing, with validated discount parsing (range 1-99).
Simulator Components apps/ui/src/components/nano-banana-simulator/simulator-hero.tsx, apps/ui/src/components/nano-banana-simulator/cost-calculator.tsx, apps/ui/src/components/nano-banana-simulator/pricing-breakdown.tsx, apps/ui/src/components/nano-banana-simulator/simulator-cta.tsx	Interactive and display components featuring hero section, dynamic cost calculator with synchronized input/slider (100–500,000 range), detailed pricing table with computed discounts, and promotional CTA buttons.

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly Related PRs

• chore: enhance dashboard components #1304 — The CostCalculator component uses a Slider with min/max/step controls that may depend on updates to the Slider UI component.

Suggested Reviewers

• steebchen

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding a new marketing feature called the Nano Banana Pro Cost Simulator.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/nano-banana-simulator

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

apps/ui/src/components/nano-banana-simulator/cost-calculator.tsx (1)

39-53: Minor UX: user cannot clear the input field to type a new value.

When the user clears the input, parseFloat("") returns NaN, so the state update is skipped and the old value snaps back. Consider allowing empty/intermediate states or using an uncontrolled input pattern for smoother editing.

apps/ui/src/app/nano-banana-simulator/[discount]/opengraph-image.tsx (1)

9-15: parseDiscount is duplicated between this file and [discount]/page.tsx.

Both files define identical parseDiscount logic. Extract it into a shared utility (e.g., utils/parse-discount.ts) to keep things DRY and ensure validation stays consistent if requirements change.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}