diff --git a/CHANGES.MD b/CHANGES.MD new file mode 100644 index 0000000..86edda2 --- /dev/null +++ b/CHANGES.MD @@ -0,0 +1,302 @@ +# Homepage Refinement Change Log + +This file tracks the conversion and design-system refinement pass applied to the Goodwalk marketing site. + +The aim is not a brand reset. The aim is to preserve the current warmth and premium positioning while moving the interface toward quieter confidence. + +## Goals + +- improve clarity +- improve trust pacing +- reduce decision friction +- improve conversion flow +- keep the existing brand emotionally recognizable + +## Implemented + +### Homepage sequence + +Proposed: + +- move the founder story later so visitors understand the offer before the personal narrative + +Implemented: + +- reordered the homepage to `Hero -> Services -> How It Works -> Testimonials -> Founder -> Values -> Booking -> Info` + +Files: + +- `src/routes/+page.svelte` + +Motive: + +- improves speed of understanding +- makes the founder section reinforce trust instead of carrying early explanation + +### Hero simplification + +Proposed: + +- reduce competing proof and CTA layers +- keep one dominant action and one quieter secondary action + +Implemented: + +- removed the floating pill from the rendered hero +- turned proof chips into a visible trust row +- softened the review CTA treatment +- changed the secondary CTA from a full outline button to a quieter text action +- softened the hero overlay for a calmer premium tone + +Files: + +- `src/lib/components/HeroSection.svelte` +- `src/lib/styles/sections.css` +- `src/lib/styles/responsive.css` + +Motive: + +- clearer hierarchy +- less visual competition +- more premium restraint + +### Service card decision reduction + +Proposed: + +- reduce the two-CTA pattern on each service card +- help users qualify the right service faster +- make the section feel like guidance toward the right care relationship, not a pricing grid + +Implemented: + +- added “best for” qualification copy to core services +- made the service title the detail path +- removed the explicit secondary detail CTA from the action stack +- kept one dominant CTA: `Book a Meet & Greet` +- added softer exploratory CTAs tailored to each service +- introduced a subtle featured treatment for Pack Walks as the signature Tiny Gang offer +- softened pricing so it reads as supporting information rather than the main focal point +- added a small in-card `What to expect` disclosure for progressive exploration +- rewrote service support copy to sound more experiential and more recognisably Goodwalk +- shifted the card reading pattern toward Apple-like editorial hierarchy: centred service titles, left-aligned supporting copy, left-aligned cues, and left-aligned disclosure content +- increased the presence of Goodwalk green and yellow in badges and icon treatments so the section feels more ownable +- tightened internal spacing so the left-aligned content reads more like an editorial card than a converted centred layout +- fixed the icon treatment so the icons inside the green bubbles render in Goodwalk yellow consistently +- changed the desktop card group to behave more like a connected service gateway surface, with clearer tile-level affordance toward the service pages and a separate booking action beneath +- added subtle per-card tinting so the joined desktop group still gives each service its own identity +- changed `What to expect` into a desktop popover-style disclosure so it no longer disturbs the surrounding card layout, while keeping a normal stacked disclosure on mobile + +Files: + +- `src/lib/components/ServicesSection.svelte` + +Motive: + +- lowers micro-decision fatigue +- improves service comprehension +- keeps the cards calmer and more conversion-oriented + +### Testimonials simplification + +Proposed: + +- replace the busier carousel treatment with calmer editorial proof +- remove decorative elements that weaken quiet confidence + +Implemented: + +- replaced the carousel structure with one featured testimonial plus two supporting testimonial cards +- removed arrows and the `WOOF` decorative motif +- kept the Google reviews CTA as the primary proof action +- demoted Instagram to a lower-emphasis follow-up link + +Files: + +- `src/lib/components/TestimonialsSection.svelte` + +Motive: + +- trust should feel effortless, not performative +- calmer proof improves credibility +- simpler structure improves readability on desktop and mobile + +### Founder section reframing + +Proposed: + +- frame the founder section around trust value instead of biography + +Implemented: + +- changed the kicker from `Founder story` to `Why owners trust Aless` +- adjusted the mobile supporting caption toward relationship-led care + +Files: + +- `src/lib/components/FounderStorySection.svelte` + +Motive: + +- preserves warmth +- makes the section more conversion-relevant + +### Booking step-one friction reduction + +Proposed: + +- make step one feel lighter +- avoid presenting general enquiry as equal-weight complexity +- reduce repeated service selection when intent is already known + +Implemented: + +- replaced the prominent enquiry-type radio group with lighter inline switching +- added a simpler general-enquiry alternate path +- added a locked service summary state when a service is preselected from a service card +- added a `Change` action instead of forcing the full selector immediately + +Files: + +- `src/lib/components/BookingSection.svelte` +- `src/lib/styles/forms.css` +- `src/lib/styles/responsive.css` + +Motive: + +- lowers perceived effort +- improves continuity from service card to form +- keeps flexibility without overloading first-time visitors + +### Navigation ribbon simplification + +Proposed: + +- reduce the ribbon from multiple simultaneous trust claims to one calm reassurance line + +Implemented: + +- replaced the three-part ribbon with one single message +- simplified ribbon spacing and mobile behavior + +Files: + +- `src/lib/components/Header.svelte` +- `src/lib/styles/layout.css` + +Motive: + +- reduces visual noise +- improves header calmness +- supports the “quiet confidence” direction + +### Sticky mobile CTA softening + +Proposed: + +- keep the mobile CTA behavior +- make the visual treatment less app-like + +Implemented: + +- reduced blur +- reduced shadow weight +- slightly reduced CTA scale +- softened spacing and prominence + +Files: + +- `src/lib/components/MobileBookBar.svelte` + +Motive: + +- preserves conversion utility +- reduces mobile pressure + +## Proposed But Not Implemented In This Pass + +### Full design-token normalization + +Proposed: + +- formalize card families +- normalize radius and shadow tokens site-wide +- standardize section spacing more broadly + +Status: + +- not fully implemented + +Reason: + +- requires a broader system sweep than this homepage-focused refinement pass + +### Values section copy rewrite + +Proposed: + +- make every value explicitly outcome-led for owners + +Status: + +- not implemented + +Reason: + +- content should be reviewed carefully rather than inferred too aggressively in code + +### FAQ and areas structural split + +Proposed: + +- separate service-area information from FAQs into clearer blocks + +Status: + +- not implemented + +Reason: + +- lower impact than upper-funnel and booking refinements + +### Deeper founder copy restructuring + +Proposed: + +- compress narrative into shorter paragraphs and trust-led bullets + +Status: + +- partially implemented through framing changes only + +Reason: + +- needs a more deliberate copy pass + +## Verification Notes + +Verified in this pass: + +- homepage section order +- changed component structure +- style/class consistency for edited sections + +Not fully verified in this pass: + +- unrestricted `npm run check` + +Reason: + +- previous full check attempts were interrupted by sandbox and permission-related environment issues rather than template-level errors + +## Summary + +This pass moves the site toward: + +- calmer hierarchy +- stronger service comprehension +- better trust pacing +- lower-friction action +- a more premium and less over-instrumented feel + +It does that without redesigning the brand from scratch. diff --git a/package-lock.json b/package-lock.json index 115a095..09b1be0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "@types/canvas-confetti": "^1.9.0", "@types/node": "^22.10.5", "@types/pg": "^8.11.10", + "embla-carousel-svelte": "^8.6.0", "jsdom": "^29.1.1", "svelte": "^5.16.0", "svelte-check": "^4.1.1", @@ -2505,6 +2506,37 @@ "dev": true, "license": "MIT" }, + "node_modules/embla-carousel": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz", + "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==", + "dev": true, + "license": "MIT" + }, + "node_modules/embla-carousel-reactive-utils": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz", + "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "embla-carousel": "8.6.0" + } + }, + "node_modules/embla-carousel-svelte": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/embla-carousel-svelte/-/embla-carousel-svelte-8.6.0.tgz", + "integrity": "sha512-ZDsKk8Sdv+AUTygMYcwZjfRd1DTh+JSUzxkOo8b9iKAkYjg+39mzbY/lwHsE3jXSpKxdKWS69hPSNuzlOGtR2Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "embla-carousel": "8.6.0", + "embla-carousel-reactive-utils": "8.6.0" + }, + "peerDependencies": { + "svelte": "^3.49.0 || ^4.0.0 || ^5.0.0" + } + }, "node_modules/entities": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz", diff --git a/package.json b/package.json index 386bfea..0e625c5 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "@types/canvas-confetti": "^1.9.0", "@types/node": "^22.10.5", "@types/pg": "^8.11.10", + "embla-carousel-svelte": "^8.6.0", "jsdom": "^29.1.1", "svelte": "^5.16.0", "svelte-check": "^4.1.1", diff --git a/src/lib/components/AboutPage.svelte b/src/lib/components/AboutPage.svelte index ea8bca7..7e1d85e 100644 --- a/src/lib/components/AboutPage.svelte +++ b/src/lib/components/AboutPage.svelte @@ -391,12 +391,21 @@ padding: 60px 0; } + .about-eyebrow { + display: block; + width: fit-content; + margin-left: auto; + margin-right: auto; + text-align: center; + } + .about-section-grid { gap: 28px; } .about-copy h2 { font-size: 28px; + text-align: center; } .about-copy p { @@ -415,6 +424,7 @@ .about-founder-copy h2 { font-size: 26px; line-height: 1.02; + text-align: center; } .about-founder-heading-desktop { diff --git a/src/lib/components/BookingSection.svelte b/src/lib/components/BookingSection.svelte index 5cf0a46..8ecc8ae 100644 --- a/src/lib/components/BookingSection.svelte +++ b/src/lib/components/BookingSection.svelte @@ -21,10 +21,10 @@ messagePlaceholder: string; } > = { - 'Pack Walks': { + 'Tiny Gang Pack Walks': { intro: - 'Tell us about your dog, your area, and how they feel around other dogs so we can see if Pack Walks are the right fit.', - messageLabel: 'Pack Walks fit', + 'Tell us about your dog, your area, and how they feel around other dogs so we can see if Tiny Gang Pack Walks are the right fit.', + messageLabel: 'Tiny Gang Pack Walks fit', messagePlaceholder: 'How old is your dog, how do they feel in groups, and is there anything about confidence, recall, or social behaviour we should know?' }, @@ -75,6 +75,7 @@ let submitted = false; let showErrorModal = false; let submitErrorDetail = ''; + let showServicePicker = false; function validateEmail(raw: string): string { const value = raw.trim(); @@ -134,6 +135,7 @@ ? 'Tell us if this is feedback, a complaint, a business enquiry, or anything else we should know.' : activeServicePrompt?.messagePlaceholder || 'Describe your pet, any special needs, or anything we should know.'; $: successPetName = petName.trim() || 'your dog'; + $: serviceChoiceLocked = !isGeneralEnquiry && selectedServices.length === 1 && !showServicePicker; onMount(() => { const now = Date.now(); @@ -241,6 +243,7 @@ } selectedServices = [requestedService]; + showServicePicker = false; try { window.sessionStorage.removeItem(requestedServiceStorageKey); @@ -283,6 +286,7 @@ petName = ''; location = ''; selectedServices = []; + showServicePicker = false; } errors = {}; } @@ -438,7 +442,7 @@ {/if}
- {bookingEyebrow} + {bookingEyebrow}

{headingParts.plain}{' '} {headingParts.highlight} @@ -510,38 +514,12 @@ class:booking-card-grid-with-banner={Boolean(detailsStepIntro)} class="booking-card-grid booking-card-grid-dog" > - {#if allowGeneralEnquiry} -
- -
- - -
-

- General enquiries cover feedback, complaints, business enquiries, and other non-booking messages. -

+ {#if allowGeneralEnquiry && !isGeneralEnquiry} +
+ Need help with something else? +
{/if} @@ -594,6 +572,40 @@ {/if}
+ {#if hasServices} +
+
+  Service + {#if serviceChoiceLocked} + + {/if} +
+ + {#if serviceChoiceLocked} +
{selectedServices[0]}
+ {:else} +
+ {#each booking.serviceOptions as service} + + {/each} +
+ {/if} +
+ {/if} +
{/if}
- - {#if hasServices} -
-  Services -
- {#each booking.serviceOptions as service} - - {/each} -
-
- {/if}

{/if} {#if isGeneralEnquiry} +
+ Want to book a Meet & Greet instead? + +
- @@ -784,7 +780,7 @@ > Back -
diff --git a/src/lib/components/FounderStorySection.svelte b/src/lib/components/FounderStorySection.svelte index 972b7e4..456f034 100644 --- a/src/lib/components/FounderStorySection.svelte +++ b/src/lib/components/FounderStorySection.svelte @@ -1,254 +1,246 @@ -
-
-
- Founder story -
-
+
+
+
+ A note from Aless + +

+ Hi, Welcome to Goodwalk. +

+ +
+ {#each founderStoryParagraphs as paragraph} +

{paragraph}

+ {/each} +
+ +
+
{#if founderStoryEnhanced} {:else} - {founderStory.imageAlt} + {founderStory.imageAlt} {/if}
-

Auckland Central walks led personally by Aless.

+
+ Aless + Goodwalk founder +
-

- - {founderStory.title} -
- {founderStory.subtitle} - - - {founderStory.title} - {founderStory.subtitle} - -

+ + + If you are unsure about anything, feel free to email me anytime. + - {#each founderStory.body as paragraph, idx} -

- {paragraph} - {#if idx === founderStory.body.length - 1} - {founderStory.emphasis} - {/if} -

- {/each} - - {founderStory.cta.label} -
- -
-
- {#if founderStoryEnhanced} - - {:else} - {founderStory.imageAlt} - {/if} -
-
+ + {founderStory.cta.label} + + +
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index 8fca6fb..beca094 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -12,6 +12,10 @@ export let navigation: NavigationContent; + // Desktop nav is split either side of the centre logo. + $: leftLinks = navigation.desktopLinks.slice(0, 2); + $: rightLinks = navigation.desktopLinks.slice(2); + let mobileMenuOpen = false; let headerElement: HTMLElement; let mobileMenuTop = 0; @@ -44,6 +48,7 @@ if (href === '/pack-walks') return 'fas fa-paw'; if (href === '/dog-walking') return 'fas fa-person-walking'; if (href === '/puppy-visits') return 'fas fa-dog'; + if (href === '/testimonials') return 'fas fa-star'; if (href === '/our-pricing') return 'fas fa-tags'; if (href === '/about') return 'fas fa-heart'; if (href === '/contact-us') return 'fas fa-envelope'; @@ -130,8 +135,8 @@