Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

```html

Deploying a Dynamic Charter Proposal Page: S3, CloudFront, and Content Templating at Scale

What Was Done

A charter proposal page that previously existed only as a template was deployed to production at queenofsandiego.com/proposals/jada-charter-proposal-sue.html. The page consolidates pricing options, regulatory compliance language, historical context, and a contact form into a single, decision-optimized HTML artifact. This required:

  • Creating the first complete proposal HTML file in the proposals directory
  • Implementing a two-option pricing model with explicit recommendation to reduce decision fatigue
  • Embedding regulatory compliance boilerplate (USCG/EPA/MPRSA ash scattering guidance)
  • Publishing to S3 and invalidating CloudFront edge caches
  • Verifying live deployment via curl and browser inspection

Technical Details: File Structure and Content Strategy

The proposal file was written to /Users/cb/Documents/repos/sites/queenofsandiego.com/proposals/jada-charter-proposal-sue.html. This path mirrors the production S3 key structure, enabling direct replication during the deploy phase.

Content Architecture:

  • Pricing Section: Two discrete options, labeled A (recommended) and B, with flat rates ($750 and $1,575 respectively). This binary choice reduces cognitive load compared to four-option matrices and improves conversion by removing ambiguity.
  • Regulatory Boilerplate: Explicit statement that the charter is not a bareboat rental but a crewed captain-led event, with compliance notes for USCG licensing, EPA ash-scattering regulations (MPRSA), and memorial event protocols. This language protects against legal exposure and sets client expectations.
  • Historical Context: A curated Hollywood history section referencing Golden Age figures (Humphrey Bogart, Lauren Bacall, Errol Flynn, John Wayne) that contextualizes San Diego as a historic maritime entertainment hub. This narrative positioning differentiates the service.
  • Contact/Inquiry Form: A bottom-of-page form directed to bookings@queenofsandiego.com, replacing personal contact information to centralize communication and maintain operational flexibility.

Markup Decisions:

  • HTML5 semantic structure with proper heading hierarchy (h1/h2/h3)
  • CSS class naming conventions aligned with existing site stylesheets (e.g., greeting-sub, proposal-title, vessel-banner)
  • Inline form handling via standard <form> elements with method="POST" targeting backend form processors

Infrastructure: S3, CloudFront, and Deployment Pipeline

Storage Layer:

The S3 bucket queenofsandiego.com serves as the authoritative source for all static assets and HTML. The proposal file was uploaded via the AWS CLI:

aws s3 cp proposals/jada-charter-proposal-sue.html s3://queenofsandiego.com/proposals/jada-charter-proposal-sue.html --content-type text/html

This command ensures proper MIME type declaration, preventing browsers from downloading rather than rendering the HTML.

Edge Caching Layer:

CloudFront distribution (ID: referenced in /Users/cb/Documents/repos/.secrets/repos.env) caches the proposal page at edge locations. After S3 upload, cache invalidation was required:

aws cloudfront create-invalidation --distribution-id $CLOUDFRONT_DIST_ID --paths "/proposals/jada-charter-proposal-sue.html"

Why invalidation matters: CloudFront's default cache TTL can range from 24 hours to several days. Without explicit invalidation, clients would receive stale HTML from edge caches for hours, defeating the purpose of deployment. The invalidation command forces all edge nodes to fetch fresh content from S3 on the next request.

Deployment Verification:

curl -s "https://queenofsandiego.com/proposals/jada-charter-proposal-sue.html" | grep -E "greeting-sub|proposal-title|Option A"

This command verifies that (a) the page is publicly accessible, (b) CloudFront invalidation completed, and (c) content matches expectations. The grep patterns target unique strings known to be in the proposal, confirming HTML integrity.

Key Decisions and Rationale

1. Single HTML File vs. Template System

The proposal could have been generated from a Jinja/Handlebars template with environment variables injected. Instead, a static HTML file was authored directly. Rationale: charter proposals are infrequent, highly customized legal documents. Template overhead introduces unnecessary abstraction and increases maintenance surface area. A static file is easier to audit, version, and sign off legally.

2. Two Pricing Options (Not Four)

Initial analysis surfaced four possible pricing tiers. The final proposal presents exactly two: 2-hour with captain only ($750) and 3-hour with full crew ($1,575). This reflects research on decision psychology: beyond two options, humans experience choice paralysis. By clearly marking Option A as recommended, the design nudges users toward the higher-margin offering while preserving autonomy.

3. Regulatory Language Placement

Compliance boilerplate was embedded mid-page rather than hidden in fine print. Users must encounter USCG, EPA, and MPRSA language before they reach the booking form. This transparent approach reduces post-sale disputes and demonstrates good-faith regulatory adherence.

4. Routing Through Functional Email Address

The form targets bookings@queenofsandiego.com rather than individual crew member addresses. This creates a single point of contact, enables load balancing across team members, and allows for future automation (auto-responders, Slack integrations, CRM hooks) without changing the published page.

What's Next

  • Image Integration: Proposal awaits vessel photography (banner, interior stills, historical reference images). Pending file paths will be integrated via <img src="/assets/images/..."> tags and committed to the repository.
  • A/B Testing: Once live traffic accumulates, measure form submission rate under different pricing presentations. CloudFront logs can be queried to track page views; form backend metrics will reveal conversion rates.
  • Localization: Consider Spanish language variant at proposals/jada-charter-proposal-sue-es.html to serve San Diego's bilingual market.
  • Mobile Optimization: Audit responsive behavior on iOS/Android. If form fields stack poorly, implement CSS media queries or migrate to a dedicated form library (e.g., Typeform, Formspree).

Deployment Completion: The proposal page is now live and accessible via direct URL. Share https://queenofsandiego.com/proposals/jada-charter-proposal-sue.html with stakeholders; CloudFront propagation across global edge nodes typically completes within 60 seconds.

```