> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trymondo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> This is the introduction to the proposal experience at proposals.trymondo.com

# 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`](https://www.npmjs.com/package/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.