Vow

Vow is a site for a wedding planner: full and partial planning, wedding-month coordination, elopements, destination weddings and design. It also fits event designers, day-of coordinators and elopement specialists. It looks like a fairy-tale invitation: the home page opens on a short film of a candlelit table under a wisteria arch, on an island of blossoms floating above golden clouds, with lanterns rising and the headline centred in the arch. Behind everything is ivory paper with a wash of wisteria and blush and a few petals drifting down; at night a plum twilight with paper lanterns. The demo is a fictional studio, Juniper & Lace, in Charleston, South Carolina.

Vow comes in two variants, chosen when you create the site: files/Sanity (static pages, any host) and EmDash (--cms emdash, rendered on request on Cloudflare). The pages are the same in both.

Pages and their content

Page	Edit it in
Home	Pages → Home page (a list of sections)
Services, weddings, planners, journal, 404	Pages → the page’s own entry
Pricing (the estimate’s guest counts and extras, the consultation, the retainer and gift, questions)	Pages → Pricing page
Contact (studio hours, details, map, contact form, questions)	Pages → Contact page
Services (category, fee, when it starts, guests, right for you if, what’s included, how it unfolds, questions, photo)	Content → Services
Real weddings (couple, date, venue, place, style, guests, service, planner, palette, story, photo)	Content → Weddings
Planners (role, loves planning, experience, languages, services, portrait, biography)	Content → Planners
Journal (guides; one can be for members only)	Content → Journal
Name, phone, address, currency, navigation, header button, profiles	Pages → Site settings
Buttons, labels, style names, chat, emails, game texts	Content → Interface texts
Privacy, terms, planning agreement	Pages → Legal

In headlines, words wrapped in *stars* are set in italic in the accent color, as in “Let’s set *the date*”. The opening’s headline has its two lines in separate fields.

The film in the opening

The opening plays a short muted film across the whole window (Pages → Home page → Opening → Film, a file in public/, e.g. /media/hero.mp4), with its first frame as the photo. The photo shows at once; the film is fetched after the page has loaded and fades in when it plays, so the page stays fast. With reduced motion or a data saver the photo stays. Keep the middle of the picture bright and calm: the headline sits there on a soft ivory halo, in the day’s ink in both themes.

To make your own: film a slow, dreamy shot (or generate one), 10 to 20 seconds, then export it about 1280 pixels wide as H.264 MP4 without sound, ideally under 2 MB. A clip played forward and then backward loops without a cut. Replace the photo with its first frame.

The day, services and the estimate

• The day, hour by hour (Pages → Home page) runs a ribbon down the page with up to ten moments of a wedding day. Beside each one a small disc of sky shows the light at that hour: the sun sinks from afternoon gold to a garnet sunset, and the last disc is night with a lantern. The colors come from your brand, so they follow your accent.
• Services are invitation cards with an arched photo, the category, the line, when it starts, the guests and the fee. On wide screens they lie at slight angles and straighten as you point at them.
• The estimate (home and pricing pages) is a small calculator: pick a service, a guest count and any extras, and the planning fee adds itself up. Services come from Content → Services in their categories; guest counts and extras live on the pricing page. Fees are whole numbers, written without the currency (Site settings → Currency adds it), with an optional note like “from”.

Real weddings

Each wedding has a page with its photo in an arch, the couple, the date, venue and place, its palette (name and color), the style and guests, the service, the planner and its story. The weddings page shows them all with a filter by style (garden, coastal, ballroom, estate and vineyard, destination; the names are in Interface texts → Weddings); a service’s page and a planner’s page show the weddings planned with them.

Booking and payments

The pricing page holds a free consultation booked with Cal.com, a date retainer and a planning session gift. Each payment option takes a one-time Stripe Price id (or a Lemon Squeezy variant). Without keys, the booking shows a preview of the calendar and the payment buttons explain how to switch them on.

The map

The contact page shows the streets round the studio, drawn from OpenStreetMap in your colors, with a pin, your address and directions links. It is part of the page (no embed, no cookies) and follows the theme and your accent. To draw your own, put the studio’s coordinates in map.config.json and run npm run map -- fetch.

Integrations

Everything works without keys; each feature switches on with its variables in .env.example.

Feature	Where	Service
Free consultation	Pricing page, loads on click; a preview of the calendar until connected	Cal.com
Date retainer and planning session gift	Pricing page (one-time prices)	Stripe or Lemon Squeezy
Newsletter	Home and journal pages, with a welcome email	Supabase or Mailchimp
Contact form	Contact page; messages go to the email in Site settings	Resend
AI chat	Every page; answers about services, fees, weddings and visiting, never promises a date is free	Claude or OpenAI
Members-only guide	A journal post marked “Members only”	Clerk
Search	⌘K or the search button: services, weddings, planners, guides, pricing, contact	built in, or Algolia
Analytics	Every page; Google Analytics only after consent	Plausible, Umami, Google Analytics, PostHog
Photos	Served by Cloudinary when it is set	Cloudinary

Sections

The home page is built from these sections, in any order: Opening (the film, the headline, the buttons and up to three numbers of proof), The day hour by hour, Services, Estimate, Real weddings, Planners, Reviews (thank-you notes with a wax seal in the couple’s color), Questions, Journal, Newsletter and Closing call (a save-the-date card). With reduced motion everything stands still.

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (garnet rose: the button, links, marked words), the second (wisteria: the wash on the page, soft fills, the night sky) and the third (champagne gold: the foil rules inside cards, seals and lantern light). A deep plum for the footer, the hours and the closing card is derived from them. Buttons are deepened until their ivory text is readable and links are adjusted until they read on the page; a color that can’t get there stops the build with a message. Brand also sets the corners (crisp like stationery or rounded) and two fonts: one for headings (Cormorant Garamond, Playfair Display, Bodoni Moda, Fraunces or DM Serif Display) and one for text (Jost, DM Sans, Figtree or Manrope). The site opens in its day theme; the toggle switches to the night, and the browser remembers the choice.

Languages

Vow is ready for more languages: see Languages.

The 404 page

A small game, Tier by tier (the Tower of Hanoi as a wedding cake): move the cake from the left-hand stand to the right-hand one a tier at a time, never putting a bigger tier on a smaller one. Tap a stand to lift its top tier and tap where it goes (or press 1, 2 and 3). Three cakes of 3, 4 and 5 tiers; the fewest moves (53 is perfect) is kept as the best score in the visitor’s browser.

AI assistants and search engines

• AGENTS.md describes the project and its design rules for coding assistants (Claude Code reads it through CLAUDE.md, Cursor through .cursor/rules/).
• /llms.txt lists your pages, services, weddings, planners and guides for AI assistants, in every language.
• Pages carry JSON-LD: the studio as a ProfessionalService with its hours and offers, services as Services with their fee, weddings as Events, planners as Persons, questions as a FAQPage, and each guide as a BlogPosting.

Commands

npm run dev                     # local site, editor at /keystatic
npm run build                   # production build
npm run map -- fetch            # draw the map round map.config.json from OpenStreetMap
npm run cms -- sanity schema    # move content to Sanity (see Content → Sanity)

In the EmDash variant: npm run dev, npm run deploy (Cloudflare) and npm run emdash:schema (after changing the content model).