​
Building a proposal experience like no other.

A modern, visually striking landing page for customers to review, select, and purchase proposals, including contract signature and Stripe checkout.

​
Features

  • View and select proposal options (with prices)
  • Dynamic total calculation (one-time and subscription charges separated)
  • All options pre-selected on page load for user convenience
  • Sticky totals section: Totals remain visible and become sticky at the bottom on scroll
  • Interactive process timeline: Visual guide from Pick Options → Sign Agreement → Pay → Success 🚀
  • Estimated Timelines panel: Shows how long each selected service will take (placeholders, ready for Supabase data)
  • Digital contract signature: User must sign before payment
  • Confetti celebration: Confetti flies across the screen when the contract is signed
  • Captivating payment button: Green, full-width, animated, and only enabled after signature (with lawyer tooltip if not signed)
  • Stripe Checkout integration
  • Supabase for data storage
  • Fully responsive UI: Optimized for mobile and desktop
  • Dark/light mode
  • Modern gradients and alternating black/white sections

​
Tech Stack

  • Next.js (React)
  • Tailwind CSS
  • Supabase
  • Stripe
  • canvas-confetti (for signature celebration)

​
Getting Started

  1. npm install
  2. Set up .env.local with Supabase and Stripe keys
  3. npm run dev

​
Logo Customization

  • Replace /public/mondo-white.svg with your own logo (SVG/PNG/JPG) and update the <img src="..." /> in pages/index.js if needed.

​
Confetti Effect

  • The confetti animation on contract signature uses canvas-confetti. This is installed automatically with npm install.

​
Deployment

Ready for Ubuntu 24.04 VPS. See deployment instructions in this README after setup.

​
Usage Guidance

  • Select/deselect services: All are checked by default; uncheck what you don’t need.
  • Estimated timelines: Shown for each selected service.
  • Sign the contract: Enter your name and sign to unlock payment.
  • Proceed to payment: Button becomes active after signing. If not signed, a tooltip explains why.
  • Celebrate!: Confetti will fly when you sign the contract.