Features: remove Card containers and circular icon backgrounds.
Clean icon (brand colour) + heading + description in open grid.
Feels authentic, not template-generated.
CTA: remove warm bg, use default surface with subtle divider above.
Heading in display3, understated placement between testimonials and FAQ.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Top: 35% → 55% opacity (darker reading zone for white text)
Middle: 15% → 10% at 60% (landscape stays vibrant)
Bottom: 40% → 30% (lighter, less needed with dark landscape)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
pt: 6→20 (xs), 10→24 (md) so "See what you'll discover" heading
sits below the finder card, not underneath it.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Hero flex-direction: row → column so finder sits below the text,
centred, with bottom half overlapping into the white section.
Matches reference layout: text on image, finder straddles boundary.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- FuneralFinder now renders inside the hero Box (V2 only)
- mb: -18 pulls the next section up so finder straddles hero/content
- No more white gap between hero image and finder
- V1 standalone finder preserved with conditional render
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Hero text: alignItems center → flex-start, pt 8 (top of image)
- FuneralFinder: mt -10 → -22 (sits on the hero image, not white bg)
- Heading + subheading + finder all visible above the fold
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New layout inspired by reference designs:
- Full-bleed hero with parsonshero.png + gradient overlay (heroImageUrl prop)
- Trust stats bar: 1,500+ families, 4.9 rating, 300+ directors
- "See what you'll discover" section: map placeholder + featured ProviderCards
- Editorial testimonials: alternating left/right with quote marks (no cards)
- Minimal FAQ: borderless accordion with divider lines
- V1 split hero preserved when heroImage prop used instead
New types: TrustStat, FeaturedProvider.
New props: heroImageUrl, stats, featuredProviders, discoverMapSlot,
onSelectFeaturedProvider.
V1 stories unchanged, new V2 story added.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Matches PackagesStep pattern:
- Left panel: ProviderCardCompact + badge + details + recommendations
- Right panel: warm header band + available info + enquiry CTA
(mirrors PackageDetail structure)
Users navigating between verified/unverified providers see the same
page structure — left panel for browsing, right panel for action.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Page shown when user selects an unverified provider from ProvidersStep.
Displays whatever data we have, offers enquiry CTA, recommends verified
alternatives.
Sections (all conditional based on available data):
- Provider header: ProviderCardCompact + "Listing" info badge
- What we know: definition list grid (pricing, services, area)
- Enquiry CTA: warm-bg card with "Make an Enquiry" button
- Verified recommendations: 2-col grid of ProviderCards
4 story variants: Default (full data), MinimalData, NoData, NoRecommendations.
Uses centered-form WizardLayout.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Sort button: remove fontSize override so it inherits Button small size
- Results count: mt 2 → 3 for more breathing room below controls
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- View toggle: floating in top-left of map panel with shadow + paper bg
- Control bar: just Filters + Sort (consistent heights, no overflow)
- Results count: bumped mt from 1 to 2 for more breathing room
- Both ProvidersStep and VenueStep updated
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- All controls on one line: [List|Map] [Filters] [↕ Recommended]
- Sort: compact menu button replaces bulky TextField select
- View toggle: "List" / "Map" text labels alongside icons
- Results count: own line below controls
- Sort pushed right with ml:auto for visual separation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New control bar below search on both listing pages:
- Left: results count (passive)
- Right: sort select (Recommended/Nearest/Price), list/map toggle, filters
Sort: compact TextField select with 4 options, 0.813rem font.
View toggle: MUI ToggleButtonGroup with list/map icons, brand highlight.
Control bar wraps gracefully on narrow panels (flex-wrap).
New types: ProviderSortBy, VenueSortBy, ListViewMode.
Stories updated with interactive sort + view state.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Funeral type chips: wrap instead of horizontal scroll (stacks to 2 rows)
- Price slider: px 1 → 2.5 to accommodate MUI thumb radius (10px)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Price slider: overflow hidden on container prevents horizontal scrollbar
- Funeral type chips: overflow hidden on parent prevents clipping through
- Location: chip-in-input using Autocomplete multiple+freeSolo (real estate
site pattern — chip with X sits inside the search field)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Navigation: hamburger minWidth/minHeight 44px, drawer items minHeight 44px
- Footer: contact links, link group links, legal links all minHeight 44px
- Footer: tagline maxWidth responsive (100% on xs, 280 on md)
- ProviderCard/VenueCard: no changes needed (card is the touch target, not meta items)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- StepperBar: stepper centred at 700px max-width, cart hugs right edge
- StepIndicator: bump desktop label fontSize to 0.875rem for readability
- DateTimeStep story: demo progress bar + cart in context
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- New CartButton molecule: outlined pill trigger with receipt icon,
"Your Plan" label + formatted total in brand colour. Click opens
DialogShell with items grouped by section via LineItem, total row,
empty state. Mobile collapses to icon + price.
- WizardLayout: remove STEPPER_VARIANTS whitelist — stepper bar now
renders on any layout variant when progressStepper/runningTotal props
are provided (StepperBar already returns null when both empty)
- Thread progressStepper + runningTotal props to DateTimeStep, VenueStep,
SummaryStep, PaymentStep (joins 8 pages that already had them)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Share this plan: right-aligned below divider, clear spacing before content
- Save and continue later: outlined button, full width, under confirm CTA
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Visual cart-style cards with image thumbnails for provider, venue,
crematorium, coffin (replaces accordion text lists)
- Arrangement details section at top: arranger name, deceased name,
service tradition, preferred dates/times
- Location pin icons on all location-based cards
- Allowance display: fully covered shows "Included in your package",
partially covered shows price/allowance/remaining breakdown
- Share dialog: "Share this plan" button opens DialogShell with multi-email
input, add/remove recipients, send confirmation state
- Included services as checkmark list, extras as priced list (consistent
tick logic — only in sections with no priced items)
- Full-width CTA, deposit deferred to payment step
- Edit buttons with pencil icon in secondary colour
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Switch from wide-form to grid-sidebar (viewport-locked, independent scroll)
- Sidebar: heading, allowance info bubble (conditional), category menu with
expandable subcategories, dual-knob price slider with editable inputs,
sort by dropdown, clear all filters, save-and-exit link
- Grid: coffin cards with thumbnail hover preview, equal-height cards,
subtle bg for white-bg product photos, colour count, Most Popular badge
- Card click navigates to CoffinDetailsStep (no Continue button)
- 20 coffins per page max before pagination
- WizardLayout grid-sidebar: wider sidebar (28%), overflowX hidden,
vertical scroll at all breakpoints, viewport-lock on desktop only
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- MUI Autocomplete with static list replaced by Input atom with
search icon — parent wires to Google Places or geocoding API
- Optional searchSlot prop for custom autocomplete integration
- Removed CemeteryOption type and cemeteries prop
- cemeterySearch field stores freetext, not a selected ID
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Select dropdown replaced with MUI Autocomplete (type-to-search
with search icon) — scalable for large cemetery lists
- Heavy h5 headings replaced with body1 contextual text
- In production, parent can wire this to Google Places API
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Drop state/postcode from addresses, round distances to whole numbers,
use generic "from service venue" instead of provider name in distance.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Horizontal compact card was cramped with long addresses/distances.
Stacked layout gives full width to both image and text. Icons bumped
to 18px with flex-start alignment for proper baseline alignment.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Grief-sensitive third option — users shouldn't feel forced into a
hearse attendance decision during a difficult time. Captures intent
as unresolved so the funeral arranger can follow up.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Simplified from over-engineered multi-card selection to two clean
variants based on funeral type:
- Service & Cremation: compact card + witness Yes/No (ToggleButtonGroup)
- Cremation Only: compact card + badge + "Included in Package" notice
Removed: multi-card grid, priority dropdown, special instructions,
crematoriums array prop. Crematorium is always pre-selected by provider.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- New VenueServicesStep (step 7c): venue-specific service toggles
with compact venue card, availability notices, AddOnOption toggles
with "View more" for long descriptions, conditional tally total
- AddOnOption: price colour changed from text.secondary to primary
(copper) for consistency with all other price displays in the system
- 5 stories: Default, WithNotice, PrePlanning, WithSelections, Minimal
- Component registry updated with VenueDetailStep + VenueServicesStep
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Thumbnails now 4:3 aspect ratio instead of square
- Renamed thumbnailSize → thumbnailHeight, width calculated from ratio
- Default 64px height × 85px width
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New ImageGallery molecule:
- Hero display area with thumbnail strip below
- Hover thumbnail to preview in hero, click to lock selection
- First image selected by default, brand border on active thumb
- Keyboard accessible (Enter/Space to select)
- Single image mode (no thumbnails), horizontal scroll for many
- Stories: Default, SingleImage, TwoImages, CustomSizes
VenueDetailStep + CoffinDetailsStep:
- Replaced static hero Box with ImageGallery component
- Added optional images[] field to VenueDetail and CoffinProfile types
- Falls back to single imageUrl when images not provided
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Added maxWidth: 1200px + mx: auto to constrain content width
- Increased panel padding (px: 5 both sides)
- Left 58% / right 42% split for better reading width
- No longer edge-to-edge — content is readable and centered
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
