How We Built a Real-Time Wedding Package Calculator That Turns Browsers Into Qualified Leads in 10 Minutes

Every other project in this portfolio uses a website to start a conversation. Punta Cana Wedding Packages uses a calculator to finish one.

Most destination wedding websites follow the same model: present beautiful photography, describe services in general terms, and ask couples to fill in a "Request Information" form. Then the sales team emails back, asks what they're looking for, receives a vague response, schedules a consultation call, talks through options, produces a quote document, and eventually — days or weeks later — the couple has a price. The funnel is long, the friction is high, and the lead quality at the top is low.

The Punta Cana Wedding Packages platform inverts that model entirely. Couples arrive, work through a guided 13-step configuration wizard, watch their real price update in real time after every selection, and submit a complete lead that includes their date, guest count, hotel pickup area, every service they want, and a precise total — all in under 10 minutes. The planning team receives a fully-qualified inquiry that arrives ready for a closing conversation, not an opening one.

This is the most technically innovative project in the DR Web Studio portfolio. Here's exactly how it works.

The Client: Punta Cana Wedding Packages

Punta Cana Wedding Packages provides destination weddings at a fixed venue in Cabeza de Toro, Punta Cana — a beachfront location chosen deliberately for its combination of accessibility and beauty. The fixed venue is a strategic business decision as well as a logistical one: it allows the service to know every detail of the setting in advance, price every element with precision, and eliminate the "it depends on the venue" ambiguity that makes most wedding quotes feel unreliable.

The service covers everything a couple needs for their destination wedding: venue and coordination, menu selection from multiple catering options, bar packages with configurable hours, furniture and linen choices, full decor and floral packages, photography, videography, transport vehicles from their hotel area to the venue, entertainment options, and additional experiences for the day. Starting from $4,100, every element is priced transparently — visible to the couple before they commit to anything.

This transparency is the product's core positioning: "Transparent pricing, real choices, zero stress." In a market where couples routinely experience sticker shock at the end of a wedding planning process, being the service that shows you the full price upfront is a genuine competitive differentiator.

The Problem With How Destination Weddings Are Sold

Understanding what we built requires understanding what we were replacing.

The traditional destination wedding sales process has multiple structural problems. Couples cannot make a meaningful comparison between services without going through a full sales process with each one — by the time you have quotes from three wedding services in Punta Cana, you have had three consultations, answered three sets of intake questions, and waited for three custom quote documents. The process selects for patience rather than genuine interest.

From the wedding service's perspective, the traditional model is equally inefficient. Sales team time is consumed by couples who are "just browsing" — who want to know if the price range is right before committing to a real consultation. Qualifying those leads takes hours of calls and emails for every couple who eventually books.

The calculator solves both problems simultaneously. Couples get instant, real pricing that allows genuine comparison without sales pressure. The planning team gets leads that have already self-qualified — if a couple has completed all 13 steps and submitted, they have already decided they want this service at this price point. The conversation that follows is about timing and logistics, not budget discovery.

The 13-Step Calculator: Architecture for Radical Transparency

The wedding calculator is the center of the platform — the feature that defines the entire product and differentiates it from every competitor.

The wizard walks couples through thirteen sequential decisions, each building on the previous ones:

Step 1 — Wedding Date: Date selection with built-in guidance (book at least 6 months in advance; peak season is November through April) and a real-time availability check against the minimum advance booking requirement configured in Sanity.

Step 2 — Guest Count: The number that drives pricing across nearly every subsequent category — menu costs, furniture quantities, transport capacity, and venue coordination fees all scale with guest count.

Step 3 — Hotel/Area: The pickup location for transport, mapped to transportation zones configured in Sanity. This step determines which transport vehicle options and pricing are relevant to the couple's specific situation.

Step 4 — Venue and Coordination: Always included. The base cost of the Cabeza de Toro venue and a dedicated wedding coordinator is presented transparently as the foundation of every package — couples see what they are getting and what it costs before any optional selections begin.

Step 5 — Menu Selection: Multiple catering options with per-person pricing that automatically calculates against the guest count from Step 2. Couples see total menu cost, not per-person cost — removing the mental math that makes wedding budget tracking confusing.

Step 6 — Bar Package and Hours: Bar packages priced by the hour with extension options. The calculator handles the multiplication automatically — select a premium open bar for 5 hours for 60 guests, and the total updates instantly.

Step 7 — Furniture and Linens: Table configurations, chair styles, linen selections. Each option includes per-unit pricing that the calculator scales against the guest count automatically.

Step 8 — Decor and Floral Packages: The most visually rich step. Each decor package in Sanity includes two images: a card thumbnail for the selection interface and a full wedding preview showing exactly what the complete setup will look like. Couples do not select a package name — they select a visual, which is a meaningfully different and more confident decision. The decor selection also triggers the "Your Wedding Style" preview that persists in the interface sidebar for the remainder of the calculator.

Step 9 — Photography: Package tiers differentiated by coverage hours, delivery format, number of photographers, and editing scope. Pricing structured to help couples understand what they are getting at each level rather than presenting an opaque premium/standard/basic hierarchy.

Step 10 — Videography: Same tier structure as photography, presented separately to allow couples to mix and match rather than bundling them at a fixed ratio.

Step 11 — Transport Vehicles: Sourced from the transportation zones and vehicles configured in Sanity, with vehicle types and capacities matched to the guest count and pickup area from earlier steps. Couples are not shown transport options irrelevant to their situation.

Step 12 — Entertainment: Musical and performance options with pricing, allowing couples to choose between a DJ, live musicians, traditional Dominican performers, or combinations.

Step 13 — Extra Experiences: Additional elements to enhance the day — late-night snacks, special arrival moments, fireworks, floral add-ons, personalized details. Each presented as an optional enhancement rather than a default expectation.

After completing all 13 steps, the couple sees a full configuration summary — every selection they made, every line item with its cost, and the total. Then they submit. The lead captured by Netlify Forms includes this complete configuration, giving the planning team a structured brief rather than a blank inquiry.

Every Price Comes From Sanity — The Calculator Never Invents Numbers

The technical integrity of the calculator depends on one architectural principle: pricing is stored in Sanity and the calculator only multiplies. It never invents numbers.

When the planning team needs to update the price of a photography package, add a new menu option, or create a new transport vehicle, they make the change in Sanity Studio. The calculator reflects those changes immediately on the next page load — no code deployment required, no developer intervention needed. This is the headless CMS architecture applied to a genuinely dynamic pricing problem.

The seed scripts (npm run seed and seed-transport-vehicles.ts) populate a fresh Sanity dataset with complete starter pricing data — all calculator categories seeded with real options, real prices, and real content. This means the platform can be deployed to a new Sanity project and have a working calculator with real pricing within minutes. The data architecture is as carefully designed as the user interface.

GROQ queries in src/sanity/queries/WeddingCalculator/ fetch pricing data with TypeScript types generated from the Sanity schema, ensuring that when a pricing option changes shape in the CMS, the TypeScript compiler flags the mismatch before it reaches production. For a pricing calculator where an incorrect multiplication affects a real couple's wedding budget decision, this type safety is not optional.

The Technology Stack

Next.js 16 with App Router handles the rendering architecture. The calculator page itself uses client-side React state — the 13-step wizard requires interactive state management that updates the price total on every selection, and this kind of real-time UI requires client components. The surrounding pages (home, how it works, stories, blog, about, contact) are server-rendered for SEO and performance. The Core Web Vitals characteristics of the surrounding pages do not suffer because the calculator is interactive.

Sanity 5.x with next-sanity 12.x is the most current version of the CMS in the entire portfolio. The jump from Sanity v4 to v5 brought improved real-time content delivery and better TypeScript integration. Combined with next-sanity 12.x's improved data fetching patterns, pricing data arrives at the calculator with minimal latency — important when the calculator is updating prices on every user interaction.

next-intl handles bilingual routing for the main site in English and Spanish. The blog adds French, German, and Russian — a 5-language editorial presence that captures the European couples who make up a significant portion of the destination wedding market in Punta Cana. Blog translations are stored directly in Sanity documents rather than in the messages/ files, which means adding a new blog language requires no code changes — a content editor creates the translated fields in the CMS and the route handles it automatically.

Netlify Forms handles the lead capture at the end of the calculator, with data-netlify="true" on the submission form. This is an elegant architectural choice: the platform requires no backend server, no API endpoint, no database for form data. Netlify receives the form submission, notifies the planning team, and stores the entry in the Netlify dashboard — all without running a single server-side process. The entire platform runs as a static/edge-rendered application with zero backend infrastructure costs.

Tailwind CSS 4 styles the calculator interface — a UI challenge unlike anything else in the portfolio. The calculator has to be visually engaging enough to keep couples invested through 13 steps, clear enough that pricing is always legible, and flexible enough to display fundamentally different UI patterns for each step type (date picker, quantity input, image selection grid, multi-select with prices, summary table). Tailwind's utility-first approach made iterating on each step's specific layout requirements fast and consistent.

CLAUDE.md and AGENTS.md in the repository root are a signal worth noting: this project was explicitly designed for development with Claude Code assistance, with documented conventions and patterns for AI-assisted development. The repository structure, naming conventions, and code patterns were designed to be readable and extensible by both humans and AI coding agents — a workflow that reflects how professional web development increasingly operates.

The Decor Preview: Selling With Images, Not Words

One design decision in the calculator deserves particular attention because it demonstrates the level of UX thinking that distinguishes this platform from a simple form wizard.

Wedding decor is extremely difficult to describe in words. "Romantic garden setting with cascading floral arrangements" means something different to every couple who reads it. The traditional approach — name the package and describe it — forces couples to make an emotional decision (what their wedding will look like) with only rational information (a description).

Each decor package in Sanity stores two images: a card thumbnail for the selection grid and a full wedding preview showing the actual setup at the actual Cabeza de Toro venue. When a couple selects a decor package, they are not choosing a name or a description — they are choosing a visual that shows exactly what their reception will look like. And once they have made that choice, the "Your Wedding Style" preview persists in the interface sidebar throughout the remaining steps, keeping their emotional investment in the selected aesthetic present in every subsequent decision.

This is conversion design applied at the level of individual interaction patterns, not just page layouts. The couple who has seen their wedding setup visualized and committed to it emotionally is a fundamentally different lead than one who has selected options from a list.

SEO Architecture: Competing for the Destination Wedding Planner

The search landscape for "wedding packages Punta Cana" and "destination wedding Dominican Republic" is competitive — resort websites, wedding blogs, and planning services all compete for the same queries. The platform's SEO advantage comes from a combination of content depth and technical architecture.

Next.js server rendering ensures every page is fully indexed — the home page explaining the calculator, the How It Works page detailing the process, the Stories section featuring real couples, the About page establishing the team's credibility, and the blog generating ongoing editorial content. Each page has independently crafted meta titles, descriptions, and JSON-LD structured data.

The blog's 5-language coverage creates parallel organic traffic streams in English, Spanish, French, German, and Russian — the primary source markets for Punta Cana destination weddings. A German couple researching "Hochzeit Punta Cana" finds a German blog post. A French couple searching "mariage destination Punta Cana" finds a French article. Each language blog independently accumulates search authority over time, compounding the platform's overall organic visibility.

The calculator page itself is a unique SEO asset: it has interactive elements and real pricing data that no other page in the market has. Couples who land on it from a search for "wedding packages Punta Cana price" find exactly what they were looking for — a page that answers the pricing question immediately and completely. Time-on-page and engagement metrics for a calculator that couples spend 10 minutes with send strong quality signals to search algorithms.

What This Project Demonstrates About Lead Generation

The Punta Cana Wedding Packages calculator represents the most sophisticated lead generation architecture in the DR Web Studio portfolio — and it illuminates a principle that applies across industries.

Most service businesses treat their website as a brochure that collects generic inquiries. The best service businesses treat their website as a pre-sales tool that qualifies leads before the sales team invests time. The gap between these two approaches is the gap between a sales team that spends most of their time on conversations that do not close and one that spends most of their time on conversations that do.

The 13-step calculator does not just collect contact information. It collects a complete configuration: date, guest count, location, every service selected, and a precise total. The planning team knows exactly what the couple wants, what they are willing to spend, and when they want to get married — before the first conversation begins. That is not a lead. That is a brief.

The modern web development approach — Next.js 16 for performance, Sanity 5 for real-time pricing management, Netlify Forms for zero-backend lead capture, TypeScript for pricing accuracy — is what makes this level of lead qualification possible without custom backend infrastructure. The entire system runs on edge compute and static files. There is no server to maintain, no database to secure, no API to monitor. Just a calculator that sells, and a CMS that keeps the pricing current.

View the live platform at puntacanaweddingpackages.com and experience the wedding calculator yourself. See the full project in our portfolio.

If your business sells a service where pricing depends on multiple configuration choices — a wedding, an event, a construction project, a tour package, a custom product — and your current website sends a generic "contact us" form that generates low-quality inquiries, contact us for a consultation. The calculator model is applicable to any service where the price is a function of customer choices. We have built it. We know how to build it for you.