Bloom

Bloom is a site for anyone who sells something that grows, by the season: a florist, a flower farm, a garden centre or nursery, a wedding and event florist, a maker of herbal teas or cosmetics. It’s made like a botanical watercolour herbarium: the page is a sheet of watercolour paper with deckled edges, pictures are watercolour plates mounted with photo corners and typed specimen labels, and on the home page a plant grows from seed to bloom as the story scrolls past. Bouquets to order, a flower calendar, wedding flowers, workshops, a journal and a visit page complete it.

Bloom 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)
Shop, weddings, workshops, journal, visit, 404	Pages → the page’s own entry
Bouquets (price, size, season, stems, specimen label, ordering)	Content → Bouquets
Journal posts	Content → Journal
Name, description, email, phone, address, navigation, header button, profiles, social picture	Pages → Site settings
Buttons, labels, chat, search, emails, game texts	Content → Interface texts
Privacy, terms	Pages → Legal

In headlines, words wrapped in *stars* are set in the accent on a stroke of paint, as in “Flowers that *grew here*, cut this morning”.

The growing plant

The Story section (From seed to vase) keeps a plate on screen while its chapters scroll past, and the plant on it grows with them: the seed splits, the stem draws itself, six leaves unfurl, a bud swells and the flower opens petal by petal. It is drawn in code (src/components/Plant.astro) in the brand’s colours, so it follows any palette; the chapters (two to five) come from the content. Small buds beside each section heading open as the heading scrolls in, and on wide screens a vine climbs the edge of the sheet as you read. Visitors who prefer reduced motion see everything in full bloom.

Bouquets and ordering

• A bouquet has a tagline, summary, price, size, season, vase life, its stems, delivery, a tall picture (4:5), a specimen label and a colour.
• Ordering: turn on “Sell with Stripe Checkout” and put a one-time Price id there; the bouquet’s page gets a working button. Buyers come back to the shop, and the Stripe webhook (/api/stripe/webhook) emails them, where you can add your own steps.
• In season (home page): twelve months, each with what flowers then; the seasons wear their own colours and the current month is marked.
• Quotes on the home page: only real quotes with their source.

Integrations

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

Feature	Where	Service
Ordering bouquets	Each bouquet’s page	Stripe
Wedding consultations	Weddings page; a preview of the calendar until it’s connected	Cal.com
Newsletter and the workshop list	Home, journal and workshops pages, with a welcome email	Supabase
Contact form	Visit page; messages go to the email in Site settings	Resend
AI chat	On every page, answers from your bouquets, seasons, weddings, workshops, visit page and journal	Claude
Search	⌘K or the search button: bouquets, journal, weddings, workshops, visit	built in, or Algolia
Analytics	Every page; Google Analytics only after consent	Plausible, Umami, Google Analytics

Sections

The home page is built from these sections, in any order: The plate (opening), In season, The story, Bouquets, Feature (a picture and a text, e.g. weddings or workshops), Numbers, Quotes, From the journal, Newsletter sign-up and Closing call.

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (buttons, links and petals), the second (leaves and fresh fills) and the third (flower centres and sunny fills). Buttons are darkened until their white text is readable, the second and third are lightened until dark text on them is; a color that can’t get there stops the build with a message. The site opens in the day theme whatever the visitor’s system is set to; the night theme, a deep green garden after dark, comes on with the toggle (plates stay on paper). Brand also sets the fonts (an old-style book face for headings, the text font and the typewriter label font) and the corners.

Languages

Bloom is ready for more languages: see Languages.

The 404 page

A small game, Pipe the water: turn the pipe tiles so water from the rain barrel reaches every plant, and each one blooms as it’s watered. Tap or click a tile to turn it, or use the arrow keys and Enter; three gardens, each bigger, scored by how few turns you needed. The best score is kept in the visitor’s browser.

AI assistants and search engines

• AGENTS.md describes the project for coding assistants (Claude Code reads it through CLAUDE.md, Cursor through .cursor/rules/).
• /llms.txt lists your pages, bouquets and journal for AI assistants, in every language.
• Pages carry JSON-LD: the business as a Florist, bouquets as Products, workshops as Events, the visit questions as a FAQPage, and each post.

Commands

pnpm dev                     # local site, editor at /keystatic
pnpm build                   # production build
pnpm cms sanity schema|seed  # 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).