From b9502290034b20ba50266209a5271bed7b0d0d2f Mon Sep 17 00:00:00 2001 From: ponzischeme89 Date: Fri, 15 May 2026 16:27:39 +1200 Subject: [PATCH] Design language tweaks v3 --- src/lib/components/AboutPage.svelte | 180 +++- src/lib/components/BookingPage.svelte | 2 +- src/lib/components/BookingSection.svelte | 645 +++++++++++- src/lib/components/Footer.svelte | 26 +- src/lib/components/PricingPage.svelte | 167 +++- src/lib/components/PricingPlanCard.svelte | 213 +++- src/lib/components/ServiceLandingPage.svelte | 2 +- src/lib/components/TestimonialsPage.svelte | 2 +- src/lib/components/TestimonialsSection.svelte | 91 -- .../VariantApplicationFields.svelte | 694 +++++++++++++ src/lib/styles/responsive.css | 13 + src/lib/styles/sections.css | 33 + src/routes/+page.svelte | 2 +- src/routes/variants-contact-form/+page.svelte | 922 ++++++++++++++++++ 14 files changed, 2746 insertions(+), 246 deletions(-) create mode 100644 src/lib/components/contact-form-variants/VariantApplicationFields.svelte create mode 100644 src/routes/variants-contact-form/+page.svelte diff --git a/src/lib/components/AboutPage.svelte b/src/lib/components/AboutPage.svelte index 7e1d85e..74c9160 100644 --- a/src/lib/components/AboutPage.svelte +++ b/src/lib/components/AboutPage.svelte @@ -3,6 +3,7 @@ import { reveal } from '$lib/actions/reveal'; import CtaCard from '$lib/components/CtaCard.svelte'; import PageHeader from '$lib/components/PageHeader.svelte'; + import Icon from '$lib/components/Icon.svelte'; import { getEnhancedImage } from '$lib/enhanced-images'; import type { AboutPageContent } from '$lib/types'; @@ -90,24 +91,49 @@ {/if}
- {#if founderSection.eyebrow} - {founderSection.eyebrow} - {/if} -

- - {founderHeadingLead} -
- {founderHeadingHighlight} - - - {founderHeadingLead} - {founderHeadingHighlight} - -

- {#each founderSection.body as paragraph} -

{paragraph}

- {/each} - Book a free Meet & Greet +
@@ -267,6 +293,20 @@ color: #0d1a0d; } + .about-founder-note { + padding: 40px 42px 34px; + background: linear-gradient(180deg, rgba(251, 251, 251, 0.98) 0%, rgba(247, 248, 246, 1) 100%); + border: 1px solid rgba(17, 20, 24, 0.08); + border-radius: 28px; + box-shadow: var(--shadow-panel-elevated); + } + + .about-founder-kicker { + display: block; + width: fit-content; + margin-bottom: 18px; + } + .about-founder-heading-desktop { display: block; } @@ -321,16 +361,91 @@ } .about-founder-copy p { - margin: 14px 0 0; + margin: 0; color: #34363a; font-size: 17px; line-height: 1.75; } - .about-founder-copy .btn { + .about-founder-body { + display: grid; + gap: 14px; + } + + .about-founder-signoff { + display: flex; + align-items: center; + gap: 14px; + margin-top: 28px; + padding-top: 24px; + border-top: 1px solid rgba(17, 20, 24, 0.08); + } + + .about-founder-signoff-text { + display: flex; + flex-direction: column; + gap: 2px; + } + + .about-founder-name { + color: #0d1a0d; + font-family: var(--font-head); + font-size: 16px; + font-weight: 700; + line-height: 1.2; + } + + .about-founder-role { + color: var(--gray); + font-size: 13px; + line-height: 1.3; + } + + .about-founder-contact-note { + display: inline-flex; + align-items: center; + gap: 10px; + margin-top: 20px; + padding: 12px 16px; + border-radius: 18px; + background: rgba(33, 48, 33, 0.05); + box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.06); + color: var(--gw-green); + font-size: 14px; + font-weight: 600; + line-height: 1.5; + text-decoration: none; + transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; + } + + .about-founder-contact-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border-radius: 50%; + background: #fff; + box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.07); + color: var(--gw-green); + font-size: 13px; + flex: 0 0 auto; + } + + .about-founder-cta { display: flex; width: fit-content; - margin: 28px auto 0; + margin: 28px 0 0; + } + + @media (hover: hover) { + .about-founder-contact-note:hover { + background: rgba(33, 48, 33, 0.08); + box-shadow: + inset 0 0 0 1px rgba(17, 20, 24, 0.08), + 0 10px 22px rgba(17, 20, 24, 0.05); + transform: translateY(-1px); + } } /* ── FAQs ── */ @@ -421,6 +536,11 @@ gap: 28px; } + .about-founder-note { + padding: 26px 24px 24px; + border-radius: 24px; + } + .about-founder-copy h2 { font-size: 26px; line-height: 1.02; @@ -440,6 +560,24 @@ line-height: 1.7; } + .about-founder-kicker { + margin-left: auto; + margin-right: auto; + } + + .about-founder-contact-note { + display: flex; + width: 100%; + font-size: 13px; + padding: 11px 14px; + text-align: center; + } + + .about-founder-cta { + width: 100%; + justify-content: center; + } + .about-faq { padding: 60px 0; } diff --git a/src/lib/components/BookingPage.svelte b/src/lib/components/BookingPage.svelte index 640d32f..560fc41 100644 --- a/src/lib/components/BookingPage.svelte +++ b/src/lib/components/BookingPage.svelte @@ -34,7 +34,7 @@ - + diff --git a/src/lib/components/BookingSection.svelte b/src/lib/components/BookingSection.svelte index 8ecc8ae..28b416e 100644 --- a/src/lib/components/BookingSection.svelte +++ b/src/lib/components/BookingSection.svelte @@ -8,6 +8,7 @@ export let booking: BookingContent; export let allowGeneralEnquiry = false; + export let variant: 'default' | 'minimal-premium' | 'card-stepper' = 'default'; type EnquiryType = 'booking' | 'general'; const visitStartedStorageKey = 'goodwalk_visit_started_at'; const journeyStorageKey = 'goodwalk_journey'; @@ -43,6 +44,11 @@ 'Tell us your puppy’s age, routine, toilet needs, feeding schedule, and anything important we should know before visiting.' } }; + const bookingAvatarDogs = [ + { image: '/images/archie-auckland-dog-walking-review.jpg', alt: 'Archie' }, + { image: '/images/monty-auckland-dog-walking-review.jpg', alt: 'Monty' }, + { image: '/images/otis-auckland-dog-walking-review.jpg', alt: 'Otis' } + ]; let step = 1; $: headingParts = splitBookingTitle(booking.title); @@ -136,6 +142,7 @@ : activeServicePrompt?.messagePlaceholder || 'Describe your pet, any special needs, or anything we should know.'; $: successPetName = petName.trim() || 'your dog'; $: serviceChoiceLocked = !isGeneralEnquiry && selectedServices.length === 1 && !showServicePicker; + $: isCardStepper = variant === 'card-stepper'; onMount(() => { const now = Date.now(); @@ -420,7 +427,13 @@ } -
+
{#if submitted} {headingParts.highlight}

{bookingIntro}

-
- - - Reply within 24 hours - - - - Free, no-obligation Meet & Greet - -
+ {#if !isCardStepper} +
+ + + Reply within 24 hours + + + + Free, no-obligation Meet & Greet + +
-
- - - -
+
+ + + +
+ {/if}
+
+ {#if isCardStepper} +
+ +

Join other happy Goodwalk dog owners across Auckland.

+
+ +
+
+ + + +
+
+ {/if} + {#if step === 1}
- {#if detailsStepIntro} + {#if detailsStepIntro && !isCardStepper}
{detailsStepIntro}
{/if}
{#if allowGeneralEnquiry && !isGeneralEnquiry} @@ -684,12 +737,12 @@
- {#if ownerIntro} + {#if ownerIntro && !isCardStepper}
{ownerIntro}
{/if}
@@ -791,6 +844,8 @@
{/if} + +
@@ -820,4 +875,522 @@ opacity: 0; pointer-events: none; } + + .booking-shell--card-stepper { + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(248, 247, 242, 0.9)); + } + + .booking-shell--card-stepper :global(.form-inner) { + max-width: 1040px; + } + + .booking-shell--card-stepper .booking-header { + max-width: 840px; + margin: 0 auto 34px; + } + + .booking-shell--card-stepper .booking-eyebrow { + padding: 7px 14px; + background: rgba(33, 48, 33, 0.05); + box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.05); + text-transform: none; + letter-spacing: 0.04em; + } + + .booking-shell--card-stepper .booking-title { + margin-bottom: 20px; + font-size: clamp(38px, 5vw, 58px); + line-height: 1.02; + } + + .booking-shell--card-stepper .booking-intro { + max-width: 42rem; + margin: 0 auto; + } + + .booking-shell--card-stepper .booking-form-shell { + max-width: 900px; + margin: 0 auto; + padding: 0 24px 28px; + border-radius: 30px; + background: rgba(255, 255, 255, 0.94); + box-shadow: + inset 0 0 0 1px rgba(17, 20, 24, 0.06), + 0 22px 52px rgba(17, 20, 24, 0.08); + } + + .booking-shell--card-stepper .booking-social-proof { + display: flex; + align-items: center; + justify-content: center; + gap: 16px; + margin: 0 -24px; + padding: 16px 24px; + border-radius: 30px 30px 0 0; + background: + linear-gradient(180deg, rgba(33, 48, 33, 0.06), rgba(33, 48, 33, 0.035)); + box-shadow: inset 0 -1px 0 rgba(17, 20, 24, 0.08); + } + + .booking-shell--card-stepper .booking-form-shell-top { + padding: 22px 0; + border-bottom: 1px solid rgba(17, 20, 24, 0.08); + } + + .booking-shell--card-stepper .booking-social-proof p { + margin: 0; + color: var(--gw-green); + font-family: var(--font-head); + font-size: 17px; + font-weight: 600; + line-height: 1.3; + text-wrap: balance; + text-align: center; + } + + .booking-shell--card-stepper .booking-avatar-group { + display: flex; + align-items: center; + flex: none; + padding-left: 14px; + } + + .booking-shell--card-stepper .booking-avatar-bubble { + display: inline-flex; + width: 50px; + height: 50px; + margin-left: -14px; + overflow: hidden; + border: 3px solid rgba(255, 255, 255, 0.96); + border-radius: 50%; + background: rgba(255, 255, 255, 0.16); + box-shadow: 0 8px 18px rgba(17, 20, 24, 0.08); + } + + .booking-shell--card-stepper .booking-avatar-bubble img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .booking-shell--card-stepper .booking-stepper { + gap: 20px; + margin-top: 24px; + padding: 0; + background: transparent; + box-shadow: none; + } + + .booking-shell--card-stepper .booking-step { + min-height: 50px; + padding: 10px 16px; + border-radius: 999px; + } + + .booking-shell--card-stepper .booking-step.active { + background: rgba(33, 48, 33, 0.06); + } + + .booking-shell--card-stepper .booking-step-number { + width: 42px; + height: 42px; + border: none; + border-radius: 13px; + background: var(--gw-green); + color: var(--yellow); + font-size: 18px; + } + + .booking-shell--card-stepper .booking-step.active .booking-step-number { + background: linear-gradient(135deg, var(--gw-green), var(--green-mid)); + border: none; + } + + .booking-shell--card-stepper .booking-step-divider { + width: 48px; + height: 1px; + background: rgba(17, 20, 24, 0.12); + } + + .booking-shell--card-stepper .booking-panel { + max-width: none; + margin: 24px 0 0; + padding: 0; + background: transparent; + box-shadow: none; + } + + .booking-shell--card-stepper .booking-panel-banner { + margin-bottom: 18px; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + color: #4f555c; + font-size: 16px; + line-height: 1.65; + } + + .booking-shell--card-stepper .booking-card-grid { + gap: 14px; + } + + .booking-shell--card-stepper .booking-card-grid-with-banner .booking-field-card { + border-radius: 26px; + } + + .booking-shell--card-stepper .booking-field-card { + border-radius: 0; + background: transparent; + box-shadow: none; + padding: 0; + } + + .booking-shell--card-stepper .booking-field-card-group { + padding: 0; + } + + .booking-shell--card-stepper .booking-inline-switch { + justify-content: flex-start; + padding: 0 4px; + margin-bottom: 0; + color: #5d636a; + background: transparent; + box-shadow: none; + } + + .booking-shell--card-stepper .booking-field-card label, + .booking-shell--card-stepper .booking-service-label { + color: #171b20; + font-size: 15px; + font-weight: 600; + letter-spacing: 0; + text-transform: none; + } + + .booking-shell--card-stepper .booking-field-card input, + .booking-shell--card-stepper .booking-field-card textarea { + border: 1px solid rgba(17, 20, 24, 0.1); + background: #fff; + box-shadow: none; + } + + .booking-shell--card-stepper .booking-field-card input:hover, + .booking-shell--card-stepper .booking-field-card textarea:hover { + border-color: rgba(17, 20, 24, 0.18); + background: #fff; + box-shadow: none; + } + + .booking-shell--card-stepper .booking-field-card input:focus, + .booking-shell--card-stepper .booking-field-card textarea:focus { + border-color: rgba(33, 48, 33, 0.45); + background: #fff; + box-shadow: 0 0 0 4px rgba(255, 209, 0, 0.12); + } + + .booking-shell--card-stepper .booking-selected-service-chip, + .booking-shell--card-stepper .booking-check-option { + background: transparent; + } + + .booking-shell--card-stepper .booking-actions { + max-width: none; + margin-left: 0; + margin-right: 0; + } + + .booking-shell--card-stepper .booking-actions-next, + .booking-shell--card-stepper .booking-actions-final { + margin-top: 18px; + } + + .booking-shell--card-stepper .booking-next-note { + color: #687076; + } + + .booking-shell--card-stepper .booking-submit-button, + .booking-shell--card-stepper .booking-next-button { + box-shadow: + inset 0 -2px 0 rgba(0, 0, 0, 0.08), + 0 12px 24px rgba(17, 20, 24, 0.1); + } + + .booking-shell--minimal-premium { + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 247, 242, 0.72)); + } + + .booking-shell--minimal-premium :global(.form-inner) { + max-width: 980px; + } + + .booking-shell--minimal-premium .booking-header { + max-width: 760px; + margin: 0 auto 34px; + } + + .booking-shell--minimal-premium .booking-eyebrow { + background: rgba(33, 48, 33, 0.06); + box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.05); + color: var(--gw-green); + } + + .booking-shell--minimal-premium .booking-title { + margin-bottom: 18px; + color: #11171b; + } + + .booking-shell--minimal-premium .booking-intro { + max-width: 38rem; + margin: 0 auto; + color: #59606d; + font-size: 16px; + line-height: 1.65; + } + + .booking-shell--minimal-premium .booking-trust-row { + justify-content: center; + gap: 10px; + margin-top: 20px; + } + + .booking-shell--minimal-premium .booking-trust-chip { + background: rgba(33, 48, 33, 0.05); + box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.05); + color: var(--gw-green); + } + + .booking-shell--minimal-premium .booking-stepper { + justify-content: center; + margin-top: 24px; + } + + .booking-shell--minimal-premium .booking-step { + background: rgba(255, 255, 255, 0.86); + box-shadow: + inset 0 0 0 1px rgba(17, 20, 24, 0.06), + 0 8px 18px rgba(17, 20, 24, 0.05); + } + + .booking-shell--minimal-premium .booking-step.active { + background: rgba(33, 48, 33, 0.08); + } + + .booking-shell--minimal-premium .booking-panel { + max-width: 860px; + margin: 0 auto; + padding: 30px; + border-radius: 32px; + background: rgba(251, 251, 251, 0.92); + box-shadow: + inset 0 0 0 1px rgba(17, 20, 24, 0.05), + 0 22px 52px rgba(17, 20, 24, 0.08); + } + + .booking-shell--minimal-premium .booking-panel-banner { + margin-bottom: 22px; + padding: 0; + border-radius: 0; + background: transparent; + box-shadow: none; + color: #59606d; + font-size: 15px; + line-height: 1.65; + } + + .booking-shell--minimal-premium .booking-card-grid { + gap: 18px; + } + + .booking-shell--minimal-premium .booking-field-card, + .booking-shell--minimal-premium .booking-inline-switch { + border-radius: 24px; + background: linear-gradient(180deg, rgba(251, 251, 251, 0.98), rgba(247, 248, 246, 1)); + box-shadow: + inset 0 0 0 1px rgba(17, 20, 24, 0.05), + 0 12px 26px rgba(17, 20, 24, 0.05); + } + + .booking-shell--minimal-premium .booking-field-card { + padding: 24px; + } + + .booking-shell--minimal-premium .booking-field-card-group { + padding: 24px; + } + + .booking-shell--minimal-premium .booking-inline-switch { + padding: 16px 18px; + } + + .booking-shell--minimal-premium .booking-field-card label, + .booking-shell--minimal-premium .booking-service-label { + color: #171b20; + } + + .booking-shell--minimal-premium .booking-field-card input, + .booking-shell--minimal-premium .booking-field-card textarea { + border: none; + background: rgba(255, 255, 255, 0.96); + box-shadow: + inset 0 0 0 1px rgba(17, 20, 24, 0.08), + 0 1px 0 rgba(255, 255, 255, 0.3); + } + + .booking-shell--minimal-premium .booking-field-card input:hover, + .booking-shell--minimal-premium .booking-field-card textarea:hover { + border: none; + background: #fff; + box-shadow: + inset 0 0 0 1px rgba(17, 20, 24, 0.12), + 0 4px 12px rgba(17, 20, 24, 0.04); + } + + .booking-shell--minimal-premium .booking-field-card input:focus, + .booking-shell--minimal-premium .booking-field-card textarea:focus { + border: none; + background: #fff; + box-shadow: + inset 0 0 0 2px rgba(255, 209, 0, 0.6), + 0 0 0 4px rgba(255, 209, 0, 0.14); + } + + .booking-shell--minimal-premium .booking-selected-service-chip, + .booking-shell--minimal-premium .booking-check-option { + background: rgba(255, 255, 255, 0.9); + } + + .booking-shell--minimal-premium .booking-actions { + max-width: 860px; + margin-left: auto; + margin-right: auto; + } + + .booking-shell--minimal-premium .booking-actions-next { + margin-top: 18px; + } + + .booking-shell--minimal-premium .booking-actions-final { + margin-top: 18px; + } + + .booking-shell--minimal-premium .booking-next-note { + color: #687076; + } + + .booking-shell--minimal-premium .booking-submit-button, + .booking-shell--minimal-premium .booking-next-button { + box-shadow: + inset 0 -2px 0 rgba(0, 0, 0, 0.08), + 0 12px 24px rgba(17, 20, 24, 0.1); + } + + @media (max-width: 768px) { + .booking-shell--card-stepper .booking-header { + margin-bottom: 26px; + } + + .booking-shell--card-stepper .booking-title { + margin-bottom: 18px; + font-size: 34px; + } + + .booking-shell--card-stepper .booking-form-shell { + padding: 0 18px 22px; + border-radius: 24px; + } + + .booking-shell--card-stepper .booking-social-proof { + align-items: center; + flex-direction: column; + gap: 10px; + margin: 0 -18px; + padding: 14px 18px; + border-radius: 24px 24px 0 0; + } + + .booking-shell--card-stepper .booking-form-shell-top { + padding: 18px 0; + } + + .booking-shell--card-stepper .booking-social-proof p { + font-size: 16px; + } + + .booking-shell--card-stepper .booking-stepper { + gap: 10px; + padding: 0; + } + + .booking-shell--card-stepper .booking-step { + min-width: 0; + flex: 1 1 0; + justify-content: center; + gap: 8px; + padding: 10px; + } + + .booking-shell--card-stepper .booking-step-number { + width: 38px; + height: 38px; + font-size: 15px; + } + + .booking-shell--card-stepper .booking-step-label { + font-size: 13px; + } + + .booking-shell--card-stepper .booking-step-divider { + display: none; + } + + .booking-shell--card-stepper .booking-panel { + margin-top: 20px; + } + + .booking-shell--card-stepper .booking-panel-banner { + font-size: 15px; + } + + .booking-shell--card-stepper .booking-field-card, + .booking-shell--card-stepper .booking-field-card-group { + padding: 0; + border-radius: 0; + } + + .booking-shell--card-stepper .booking-inline-switch { + border-radius: 20px; + } + + .booking-shell--minimal-premium .booking-header { + margin-bottom: 26px; + } + + .booking-shell--minimal-premium .booking-intro { + font-size: 15px; + line-height: 1.58; + } + + .booking-shell--minimal-premium .booking-stepper { + gap: 8px; + } + + .booking-shell--minimal-premium .booking-panel { + padding: 18px; + border-radius: 24px; + } + + .booking-shell--minimal-premium .booking-field-card, + .booking-shell--minimal-premium .booking-field-card-group { + padding: 20px; + border-radius: 22px; + } + + .booking-shell--minimal-premium .booking-inline-switch { + border-radius: 20px; + } + } diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte index 03cf698..dde46f4 100644 --- a/src/lib/components/Footer.svelte +++ b/src/lib/components/Footer.svelte @@ -46,16 +46,22 @@ decoding="async" />

{footer.brandText}

-