​

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.