From baafafabdb32f3cde9bd52ed495dbf2b52227841 Mon Sep 17 00:00:00 2001 From: ponzischeme89 Date: Wed, 13 May 2026 20:44:01 +1200 Subject: [PATCH] Design language tweaks, improvements --- src/lib/components/AboutPage.svelte | 149 +------ src/lib/components/CtaCard.svelte | 122 ++++++ src/lib/components/ErrorModal.svelte | 113 +---- src/lib/components/FounderStorySection.svelte | 254 +++++++++++ src/lib/components/HowItWorksSection.svelte | 8 +- src/lib/components/LocationPage.svelte | 130 +----- src/lib/components/ModalShell.svelte | 101 +++++ src/lib/components/PricingPage.svelte | 191 +-------- src/lib/components/PricingPlanCard.svelte | 224 ++++++++++ src/lib/components/PromiseSection.svelte | 123 ------ src/lib/components/ServiceLandingPage.svelte | 404 +++++++++--------- src/lib/components/SuccessModal.svelte | 82 +--- src/lib/components/ValuesSection.svelte | 264 ++++++++++-- src/lib/content/homepage.ts | 13 +- src/lib/styles/base.css | 15 + src/lib/styles/layout.css | 9 +- src/lib/styles/responsive.css | 29 +- src/lib/styles/sections.css | 8 +- src/lib/styles/variables.css | 34 ++ src/lib/types.ts | 4 +- src/lib/utils/pricing.ts | 19 + src/routes/+page.svelte | 4 +- 22 files changed, 1302 insertions(+), 998 deletions(-) create mode 100644 src/lib/components/CtaCard.svelte create mode 100644 src/lib/components/FounderStorySection.svelte create mode 100644 src/lib/components/ModalShell.svelte create mode 100644 src/lib/components/PricingPlanCard.svelte delete mode 100644 src/lib/components/PromiseSection.svelte create mode 100644 src/lib/utils/pricing.ts diff --git a/src/lib/components/AboutPage.svelte b/src/lib/components/AboutPage.svelte index 0dce5fb..ea8bca7 100644 --- a/src/lib/components/AboutPage.svelte +++ b/src/lib/components/AboutPage.svelte @@ -1,7 +1,7 @@ + +
+ {eyebrow} +

{title}

+

{description}

+ {ctaLabel} + {#if email || phone} +
+ {#if email} + + {#if showIcons}{/if} + {email} + + {/if} + {#if phone && resolvedPhoneHref} + + {#if showIcons}{/if} + {phone} + + {/if} +
+ {/if} +
+ + diff --git a/src/lib/components/ErrorModal.svelte b/src/lib/components/ErrorModal.svelte index 8c6460e..db749e1 100644 --- a/src/lib/components/ErrorModal.svelte +++ b/src/lib/components/ErrorModal.svelte @@ -1,4 +1,6 @@ - + diff --git a/src/lib/components/HowItWorksSection.svelte b/src/lib/components/HowItWorksSection.svelte index bc01df4..0443421 100644 --- a/src/lib/components/HowItWorksSection.svelte +++ b/src/lib/components/HowItWorksSection.svelte @@ -50,7 +50,7 @@ diff --git a/src/lib/components/ModalShell.svelte b/src/lib/components/ModalShell.svelte new file mode 100644 index 0000000..53f7a0f --- /dev/null +++ b/src/lib/components/ModalShell.svelte @@ -0,0 +1,101 @@ + + + + + diff --git a/src/lib/components/PricingPage.svelte b/src/lib/components/PricingPage.svelte index 19af29f..f4bfac8 100644 --- a/src/lib/components/PricingPage.svelte +++ b/src/lib/components/PricingPage.svelte @@ -4,40 +4,21 @@ import BookingSection from '$lib/components/BookingSection.svelte'; import Icon from '$lib/components/Icon.svelte'; import PageHeader from '$lib/components/PageHeader.svelte'; + import PricingPlanCard from '$lib/components/PricingPlanCard.svelte'; import TestimonialsSection from '$lib/components/TestimonialsSection.svelte'; + import { decoratePlans } from '$lib/utils/pricing'; import type { PricingPageContent, SiteSharedContent } from '$lib/types'; export let content: SiteSharedContent; export let pageContent: PricingPageContent; - const scrollDepthThreshold = 0.65; - const desktopPromptMediaQuery = '(min-width: 769px)'; - - function numericPrice(price: string) { - const value = Number(price.replace(/[^0-9.]/g, '')); - return Number.isFinite(value) ? value : Number.POSITIVE_INFINITY; - } - - function decoratePlans(plans: T[]) { - const sorted = [...plans] - .map((plan, index) => ({ plan, index, value: numericPrice(plan.price) })) - .sort((a, b) => a.value - b.value || a.index - b.index); - - const cheapestIndex = sorted[0]?.index ?? -1; - const mobileOrder = new Map(sorted.map((entry, order) => [entry.index, order])); - - return plans.map((plan, index) => ({ - ...plan, - isPopular: index === cheapestIndex, - mobileOrder: mobileOrder.get(index) ?? index - })); - } - let showMeetGreetPrompt = false; let dismissMeetGreetPrompt = false; let bookingInView = false; let promptShown = false; let canShowDesktopPrompt = false; + const desktopPromptMediaQuery = '(min-width: 769px)'; + const scrollDepthThreshold = 0.65; function revealMeetGreetPrompt() { if (dismissMeetGreetPrompt || bookingInView || promptShown || !canShowDesktopPrompt) { @@ -138,7 +119,7 @@ {#each pageContent.sections as section, index}
-
+
{#if section.icon}
@@ -162,27 +143,7 @@
{#each decoratePlans(section.plans) as plan} -
- {#if plan.isPopular} - Popular - {/if} - -

{plan.title}

-
{plan.price}
-

{plan.period}

- -
    - {#each plan.features as feature} -
  • {feature}
    • - {/each} -
- - Book a Meet & Greet -
+ {/each}
@@ -241,12 +202,6 @@ background: var(--off-white); } - .pricing-inner { - max-width: var(--max-w); - margin: 0 auto; - padding: 0 50px; - } - .pricing-trust { display: inline-flex; align-items: center; @@ -351,87 +306,6 @@ grid-template-columns: repeat(3, minmax(0, 1fr)); } - .pricing-plan-card { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - background: #fff; - border-radius: 28px; - padding: 30px 26px; - box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05); - transition: - transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), - box-shadow 0.22s ease, - border-color 0.22s ease; - } - - .pricing-plan-popular { - border: 2px solid var(--yellow); - } - - .pricing-plan-ribbon { - position: absolute; - top: 0; - left: 50%; - transform: translate(-50%, -50%); - padding: 6px 12px; - border-radius: 999px; - background: var(--yellow); - color: #000; - font-family: var(--font-head); - font-size: 11px; - font-weight: 700; - letter-spacing: 0.04em; - text-transform: uppercase; - } - - .pricing-plan-card h3 { - margin: 0; - font-family: var(--font-head); - font-size: 22px; - line-height: 1.2; - color: #000; - } - - .pricing-plan-price { - margin-top: 22px; - font-family: var(--font-head); - font-size: 52px; - line-height: 0.95; - letter-spacing: -0.05em; - color: #000; - } - - .pricing-plan-period { - margin: 10px 0 0; - color: #5e6167; - font-size: 14px; - text-transform: uppercase; - letter-spacing: 0.08em; - } - - .pricing-plan-features { - width: 100%; - margin: 24px 0 0; - padding: 0; - list-style: none; - } - - .pricing-plan-features li { - padding: 15px 0; - border-top: 1px solid rgba(17, 20, 24, 0.08); - color: #34363a; - font-size: 16px; - line-height: 1.5; - } - - .pricing-plan-cta { - margin-top: 24px; - font-family: var(--font-head); - } - .pricing-section-mobile-cta, .pricing-mobile-consult { display: none; @@ -556,31 +430,6 @@ } } - @media (hover: hover) { - .pricing-plan-card:hover { - transform: translateY(-6px) scale(1.012); - box-shadow: 0 22px 44px rgba(17, 20, 24, 0.1); - } - } - - .pricing-plan-card:active { - transform: translateY(-2px) scale(0.992); - } - - :global(.reveal-ready.reveal-block) { - opacity: 0; - transform: translate3d(0, var(--reveal-distance, 24px), 0); - transition: - opacity 0.55s ease, - transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); - transition-delay: var(--reveal-delay, 0ms); - } - - :global(.reveal-visible.reveal-block) { - opacity: 1; - transform: translate3d(0, 0, 0); - } - @media (max-width: 1024px) { .pricing-plan-grid, .pricing-plan-grid-three { @@ -589,18 +438,6 @@ } @media (max-width: 768px) { - .pricing-inner { - padding: 0 24px; - } - - .pricing-page-hero { - padding: 56px 0 20px; - } - - .pricing-page-hero h1 { - font-size: 34px; - } - .pricing-trust { gap: 10px; padding: 10px 14px; @@ -635,22 +472,6 @@ gap: 18px; } - .pricing-plan-card { - order: var(--mobile-order, 0); - } - - .pricing-plan-card { - padding: 28px 22px; - } - - .pricing-plan-price { - font-size: 46px; - } - - .pricing-plan-cta { - display: none; - } - .pricing-section-mobile-cta { display: flex; width: fit-content; diff --git a/src/lib/components/PricingPlanCard.svelte b/src/lib/components/PricingPlanCard.svelte new file mode 100644 index 0000000..1c69b74 --- /dev/null +++ b/src/lib/components/PricingPlanCard.svelte @@ -0,0 +1,224 @@ + + +
+ {#if plan.isPopular} + Popular + {/if} +

{plan.title}

+
{plan.price}
+

{plan.period}

+
    + {#each plan.features as feature} +
  • {feature}
    • + {/each} +
+ Book a Meet & Greet +
+ + diff --git a/src/lib/components/PromiseSection.svelte b/src/lib/components/PromiseSection.svelte deleted file mode 100644 index 0abd04c..0000000 --- a/src/lib/components/PromiseSection.svelte +++ /dev/null @@ -1,123 +0,0 @@ - - -
-
-
-

- - {promise.title} -
- {promise.subtitle} - - - {promise.title} - {promise.subtitle} - -

- - {#each promise.body as paragraph, idx} -

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

- {/each} - - {promise.cta.label} -
- -
-
- {#if promiseEnhanced} - - {:else} - {promise.imageAlt} - {/if} -
-
-
-
- - diff --git a/src/lib/components/ServiceLandingPage.svelte b/src/lib/components/ServiceLandingPage.svelte index 899f279..8f86671 100644 --- a/src/lib/components/ServiceLandingPage.svelte +++ b/src/lib/components/ServiceLandingPage.svelte @@ -1,36 +1,21 @@
@@ -89,7 +150,7 @@ {#if pageContent.highlight}
-
+

{pageContent.highlight.eyebrow}

@@ -144,7 +205,7 @@ {/if}
-
+

{pageContent.benefits.title}

{#if pageContent.benefits.intro} @@ -154,8 +215,12 @@
- {#each benefitCards as benefit} -
+ {#each benefitCards as benefit, index} +
@@ -169,10 +234,34 @@
- -
+
@@ -181,7 +270,7 @@
-
+

{pageContent.pricing.title}

{#if pageContent.pricing.intro} @@ -191,27 +280,7 @@
{#each pricingPlans as plan} -
- {#if plan.isPopular} - Popular - {/if} - -

{plan.title}

-
{plan.price}
-

{plan.period}

- -
    - {#each plan.features as feature} -
  • {feature}
    • - {/each} -
- - Book a Meet & Greet -
+ {/each}
@@ -250,7 +319,7 @@ {#if showRelatedServices}
-
+

Explore our other services

@@ -294,14 +363,8 @@ background: var(--off-white); } - .service-inner { - max-width: var(--max-w); - margin: 0 auto; - padding: 0 50px; - } - .service-related { - padding: 0 0 96px; + padding: 0 0 var(--space-section-featured-y); } .service-related-grid { @@ -495,7 +558,7 @@ } .service-highlight { - padding: 80px 0 96px; + padding: var(--space-section-page-y) 0 var(--space-section-featured-y); } .service-highlight-layout { @@ -556,7 +619,7 @@ .service-pricing, .service-benefits { - padding: 0 0 96px; + padding: 0 0 var(--space-section-featured-y); } .service-benefit-shell { @@ -564,9 +627,10 @@ overflow: visible; } -.service-benefit-mobile-controls { - display: none; -} + .service-benefit-mobile-controls, + .service-benefit-mobile-pager { + display: none; + } .service-section-heading { text-align: center; @@ -588,7 +652,6 @@ grid-template-columns: repeat(3, minmax(0, 1fr)); } - .service-plan-card, .service-benefit-card { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 248, 246, 0.98) 100%); @@ -603,63 +666,10 @@ border-color 0.22s ease; } - .service-plan-card { - display: flex; - flex-direction: column; - align-items: stretch; - height: 100%; - } - - .service-plan-popular { - border: 2px solid var(--yellow); - } - - .service-plan-ribbon { - position: absolute; - top: 0; - left: 50%; - transform: translate(-50%, -50%); - padding: 6px 12px; - border-radius: 999px; - background: var(--yellow); - color: #000; - font-family: var(--font-head); - font-size: 11px; - font-weight: 700; - letter-spacing: 0.04em; - text-transform: uppercase; - } - - @media (hover: hover) { - .service-plan-card:hover { - transform: translateY(-2px); - box-shadow: - inset 0 0 0 1px rgba(17, 20, 24, 0.055), - 0 10px 40px rgba(0, 0, 0, 0.08); - filter: brightness(1.015); - } - } - - .service-plan-card:active, .service-benefit-card:active { transform: translateY(-2px) scale(0.992); } - :global(.reveal-ready.reveal-block) { - opacity: 0; - transform: translate3d(0, var(--reveal-distance, 24px), 0); - transition: - opacity 0.55s ease, - transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); - transition-delay: var(--reveal-delay, 0ms); - } - - :global(.reveal-visible.reveal-block) { - opacity: 1; - transform: translate3d(0, 0, 0); - } - - .service-plan-card h3, .service-benefit-card h3 { margin: 0; font-family: var(--font-head); @@ -668,59 +678,6 @@ color: #000; } - .service-plan-price { - margin-top: 20px; - font-family: var(--font-head); - font-size: 44px; - line-height: 1; - color: var(--gw-green); - } - - .service-plan-period { - margin: 8px 0 0; - color: #5d6166; - font-size: 14px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.06em; - } - - .service-plan-features { - margin: 24px 0 0; - padding: 0; - list-style: none; - flex: 1 1 auto; - } - - .service-plan-features li { - position: relative; - padding-left: 24px; - color: #34363a; - font-size: 15px; - line-height: 1.5; - } - - .service-plan-features li + li { - margin-top: 12px; - } - - .service-plan-features li::before { - content: '•'; - position: absolute; - left: 6px; - top: 0; - color: var(--yellow); - font-size: 20px; - line-height: 1; - } - - .service-plan-cta { - display: flex; - width: fit-content; - margin: 28px auto 0; - font-family: var(--font-head); - } - .service-plan-mobile-cta { display: none; } @@ -1030,9 +987,6 @@ } @media (max-width: 768px) { - .service-inner { - padding: 0 24px; - } .service-plan-grid, .service-plan-grid-three, @@ -1043,16 +997,18 @@ .service-benefit-grid { grid-auto-flow: column; - grid-auto-columns: minmax(272px, 84vw); + grid-auto-columns: calc(100% - 64px); grid-template-columns: none; - gap: 14px; + align-items: stretch; + gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; - scroll-snap-type: x proximity; - scroll-padding-left: 24px; - padding: 0 24px 8px 0; + scroll-snap-type: x mandatory; + scroll-padding-left: 8px; + padding: 0 14px 8px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; + touch-action: pan-x pinch-zoom; } .service-benefit-grid::-webkit-scrollbar { @@ -1060,20 +1016,34 @@ } .service-benefit-card { - padding: 24px 22px 22px; + min-height: clamp(230px, 42svh, 320px); + width: 100%; + min-width: 0; + padding: 20px 18px 22px; border-radius: 24px; scroll-snap-align: start; + scroll-snap-stop: always; + touch-action: pan-x; + user-select: none; + -webkit-user-select: none; + transition: + transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), + box-shadow 0.22s ease, + border-color 0.22s ease, + background 0.24s ease; } - .service-plan-card { - order: var(--mobile-order, 0); + .service-benefit-card.active { + box-shadow: + inset 0 0 0 1px rgba(17, 20, 24, 0.05), + 0 12px 24px rgba(17, 20, 24, 0.08); } - .service-highlight { - padding-top: 56px; - padding-bottom: 72px; + .service-benefit-card:last-child { + margin-right: 2px; } + .service-highlight-layout { gap: 24px; } @@ -1103,7 +1073,7 @@ .service-pricing, .service-benefits, .service-related { - padding-bottom: 72px; + padding-bottom: var(--space-section-featured-y); } .service-section-heading h2 { @@ -1111,27 +1081,30 @@ } .service-benefit-icon { - width: 50px; - height: 50px; - margin-bottom: 18px; + width: 56px; + height: 56px; + border-radius: 18px; + margin-bottom: 14px; } .service-benefit-card h3 { max-width: none; - font-size: 20px; + font-size: 21px; + line-height: 1.08; } .service-benefit-card p { - margin-top: 12px; - font-size: 15px; - line-height: 1.68; + margin-top: 8px; + font-size: 14px; + line-height: 1.55; } .service-benefit-mobile-controls { display: flex; - justify-content: flex-end; - gap: 12px; - margin-top: 16px; + align-items: center; + justify-content: space-between; + gap: 14px; + margin-top: 12px; } .service-benefit-mobile-button { @@ -1147,9 +1120,41 @@ box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.06); transition: background 0.18s ease, + opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } + .service-benefit-mobile-button:disabled { + opacity: 0.35; + } + + .service-benefit-mobile-pager { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + min-width: 0; + flex: 1; + } + + .service-benefit-mobile-dot { + width: 9px; + height: 9px; + padding: 0; + border: none; + border-radius: 999px; + background: rgba(33, 48, 33, 0.2); + transition: + width 0.22s ease, + background 0.22s ease, + transform 0.22s ease; + } + + .service-benefit-mobile-dot.active { + width: 28px; + background: var(--yellow); + } + .service-benefit-mobile-button:active { transform: scale(0.97); } @@ -1180,9 +1185,6 @@ align-items: flex-start; } - .service-plan-cta { - display: none; - } .service-plan-mobile-cta { display: flex; diff --git a/src/lib/components/SuccessModal.svelte b/src/lib/components/SuccessModal.svelte index fcce629..6ec8509 100644 --- a/src/lib/components/SuccessModal.svelte +++ b/src/lib/components/SuccessModal.svelte @@ -1,6 +1,7 @@ - + diff --git a/src/lib/components/ValuesSection.svelte b/src/lib/components/ValuesSection.svelte index 5180c60..03cb1cb 100644 --- a/src/lib/components/ValuesSection.svelte +++ b/src/lib/components/ValuesSection.svelte @@ -5,6 +5,8 @@ export let values: IconCard[]; let valuesScroller: HTMLDivElement | undefined; + let activeIndex = 0; + let mobileCardsObserver: IntersectionObserver | null = null; $: orderedValues = values .map((value, index) => ({ value, index })) @@ -24,30 +26,102 @@ return typeof window !== 'undefined' && window.innerWidth <= 768; } + function cardScrollLeft(card: HTMLElement) { + return Math.max(0, card.offsetLeft - 8); + } + async function scrollValues(direction: 1 | -1) { if (!valuesScroller || !isMobileViewport()) { return; } - const firstCard = valuesScroller.querySelector('.value-card'); - if (!firstCard) { - return; - } - - const cardStyle = window.getComputedStyle(valuesScroller); - const gap = Number.parseFloat(cardStyle.columnGap || cardStyle.gap || '0') || 0; - const step = firstCard.offsetWidth + gap; - - await tick(); - valuesScroller.scrollBy({ left: direction * step, behavior: 'smooth' }); + const nextIndex = Math.max(0, Math.min(activeIndex + direction, orderedValues.length - 1)); + await scrollToValue(nextIndex, 'smooth'); } - onMount(() => { + async function scrollToValue(index: number, behavior: ScrollBehavior = 'smooth') { if (!valuesScroller || !isMobileViewport()) { return; } - valuesScroller.scrollTo({ left: 0, behavior: 'auto' }); + const cards = valuesScroller.querySelectorAll('.value-card'); + const targetCard = cards[index]; + if (!targetCard) { + return; + } + + activeIndex = index; + await tick(); + valuesScroller.scrollTo({ + left: cardScrollLeft(targetCard), + behavior + }); + } + + function bindMobileCardObserver() { + mobileCardsObserver?.disconnect(); + + if (!valuesScroller || !isMobileViewport()) { + return; + } + + const cards = valuesScroller.querySelectorAll('.value-card'); + if (!cards.length) { + return; + } + + mobileCardsObserver = new IntersectionObserver( + (entries) => { + const visibleEntry = entries + .filter((entry) => entry.isIntersecting) + .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]; + + if (!visibleEntry) { + return; + } + + const nextIndex = cards.length ? [...cards].indexOf(visibleEntry.target as HTMLElement) : -1; + if (nextIndex >= 0) { + activeIndex = nextIndex; + } + }, + { + root: valuesScroller, + threshold: [0.6, 0.75, 0.9] + } + ); + + cards.forEach((card) => mobileCardsObserver?.observe(card)); + } + + onMount(() => { + const handleResize = () => { + if (!valuesScroller) { + return; + } + + if (isMobileViewport()) { + if (activeIndex === 0) { + valuesScroller.scrollTo({ left: 0, behavior: 'auto' }); + } + bindMobileCardObserver(); + void scrollToValue(activeIndex, 'auto'); + } else { + mobileCardsObserver?.disconnect(); + } + }; + + if (valuesScroller && isMobileViewport()) { + valuesScroller.scrollTo({ left: 0, behavior: 'auto' }); + bindMobileCardObserver(); + } + + window.addEventListener('resize', handleResize); + + return () => { + mobileCardsObserver?.disconnect(); + window.removeEventListener('resize', handleResize); + }; }); @@ -61,8 +135,8 @@
- {#each orderedValues as value} -
+ {#each orderedValues as value, index} +
@@ -75,10 +149,34 @@
- -
+
@@ -117,21 +215,27 @@ @media (max-width: 768px) { .values-shell { - margin-top: 32px; + margin-top: 24px; + overflow: hidden; } .values-grid { + display: grid; grid-auto-flow: column; - grid-auto-columns: minmax(272px, 84vw); + grid-auto-columns: calc(100% - 64px); grid-template-columns: none; - gap: 14px; + align-items: stretch; + gap: 10px; + margin-top: 0; + border-top: none; overflow-x: auto; overscroll-behavior-x: contain; - scroll-snap-type: x proximity; - scroll-padding-left: 24px; - padding: 0 24px 8px 0; + scroll-snap-type: x mandatory; + scroll-padding-left: 8px; + padding: 0 14px 8px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; + touch-action: pan-x pinch-zoom; } .values-grid::-webkit-scrollbar { @@ -140,9 +244,10 @@ .values-mobile-controls { display: flex; - justify-content: flex-end; - gap: 12px; - margin-top: 16px; + align-items: center; + justify-content: space-between; + gap: 14px; + margin-top: 12px; } .values-mobile-button { @@ -158,19 +263,116 @@ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); -webkit-tap-highlight-color: transparent; touch-action: manipulation; + transition: + background 0.18s ease, + opacity 0.18s ease, + transform 0.18s ease; + } + + .values-mobile-button:disabled { + opacity: 0.35; + } + + .values-mobile-pager { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + min-width: 0; + flex: 1; + } + + .values-mobile-dot { + width: 9px; + height: 9px; + padding: 0; + border: none; + border-radius: 999px; + background: rgba(255, 255, 255, 0.28); + transition: + width 0.22s ease, + background 0.22s ease, + transform 0.22s ease; + } + + .values-mobile-dot.active { + width: 28px; + background: var(--yellow); } .value-card { - min-height: 100%; - padding: 24px 22px; - border: 1px solid rgba(255, 255, 255, 0.1); + display: flex; + min-height: clamp(230px, 42svh, 320px); + width: 100%; + min-width: 0; + box-sizing: border-box; + padding: 20px 18px 22px; + border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 24px; - background: rgba(255, 255, 255, 0.05); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.07)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.08), + 0 6px 16px rgba(0, 0, 0, 0.06); scroll-snap-align: start; + scroll-snap-stop: always; + flex-direction: column; + justify-content: flex-start; + gap: 14px; + transition: + background 0.24s ease, + box-shadow 0.24s ease, + border-color 0.24s ease; + touch-action: pan-x; + user-select: none; + -webkit-user-select: none; + } + + .value-card.active { + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.09)); + border-color: rgba(255, 255, 255, 0.16); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.08), + 0 10px 22px rgba(0, 0, 0, 0.08); } .value-card:nth-child(odd) { - border-right: 1px solid rgba(255, 255, 255, 0.1); + border-right: none; + } + + .value-card:last-child { + margin-right: 2px; + } + + .value-icon-wrap { + width: 56px; + height: 56px; + border-radius: 18px; + margin-top: 0; + background: rgba(255, 255, 255, 0.1); + } + + .value-card .value-card-icon { + font-size: 23px; + } + + .value-text { + max-width: 30ch; + min-width: 0; + margin-top: 0; + } + + .value-text h3 { + margin-bottom: 8px; + font-size: 21px; + line-height: 1.08; + } + + .value-card p { + font-size: 14px; + line-height: 1.55; + opacity: 0.9; } .values-eyebrow { diff --git a/src/lib/content/homepage.ts b/src/lib/content/homepage.ts index eba383e..2f1954b 100644 --- a/src/lib/content/homepage.ts +++ b/src/lib/content/homepage.ts @@ -53,14 +53,15 @@ export const homepageContent: HomePageContent = { external: true } }, - promise: { - title: 'Meet Aless,', - subtitle: 'the heart of Goodwalk', + founderStory: { + title: 'Not just dog walking.', + subtitle: 'Built around trust.', body: [ - 'Goodwalk was built for owners who want more than a basic walk. Alessandra leads the business with a calm, hands-on approach shaped by years of experience, a love of small dogs, and a real focus on trust, routine, and safety.', - "From house keys to nervous first walks, we take the responsibility seriously. You'll know who is walking your dog, your dog will know who is at the door, and you'll get a reliable team that treats your dog like family. Ready to join the" + 'Most dog walking companies sell walks. Goodwalk was built for owners who want a calmer, more personal experience for their dog, especially small dogs who thrive on routine, familiarity, and gentle handling.', + 'That means familiar walkers, safe group dynamics, reliable communication, and a team your dog genuinely builds a relationship with. We know we are not just collecting dogs for a walk. We are being trusted with part of your family and access to your home.', + 'You know exactly who is caring for your dog. Your dog knows who is at the door. And you come home to a calmer, happier dog. Ready to' ], - emphasis: 'TINY GANG?', + emphasis: 'join the Tiny Gang?', cta: { label: 'Book a free Meet & Greet', href: '/contact-us', variant: 'green' }, imageUrl: '/images/goodwalk-dog-walker-alessandra.png', imageAlt: 'Alessandra from Goodwalk with a dog in Auckland' diff --git a/src/lib/styles/base.css b/src/lib/styles/base.css index 00439aa..c5c3d3d 100644 --- a/src/lib/styles/base.css +++ b/src/lib/styles/base.css @@ -84,3 +84,18 @@ textarea { transform: none; } } + +/* use:reveal action — applied via Svelte action on section elements */ +.reveal-ready.reveal-block { + opacity: 0; + transform: translate3d(0, var(--reveal-distance, 24px), 0); + transition: + opacity 0.55s ease, + transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); + transition-delay: var(--reveal-delay, 0ms); +} + +.reveal-visible.reveal-block { + opacity: 1; + transform: translate3d(0, 0, 0); +} diff --git a/src/lib/styles/layout.css b/src/lib/styles/layout.css index 4eb6a18..c4e47d7 100644 --- a/src/lib/styles/layout.css +++ b/src/lib/styles/layout.css @@ -91,11 +91,18 @@ nav, margin: 0 auto; } +/* Shared inner wrapper for page-level sections */ +.page-inner { + max-width: var(--max-w); + margin: 0 auto; + padding: 0 var(--space-container-x); +} + nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; - padding: 16px 50px; + padding: 16px var(--space-container-x); } .nav-links { diff --git a/src/lib/styles/responsive.css b/src/lib/styles/responsive.css index e450006..cd69d8a 100644 --- a/src/lib/styles/responsive.css +++ b/src/lib/styles/responsive.css @@ -1,8 +1,8 @@ @media (max-width: 1024px) { nav, .mobile-menu { - padding-left: 30px; - padding-right: 30px; + padding-left: var(--space-container-x-tablet); + padding-right: var(--space-container-x-tablet); } .promise-inner, @@ -11,13 +11,13 @@ .testimonials-inner, .info-inner, .form-inner { - padding-left: 30px; - padding-right: 30px; + padding-left: var(--space-container-x-tablet); + padding-right: var(--space-container-x-tablet); } footer { - padding-left: 30px; - padding-right: 30px; + padding-left: var(--space-container-x-tablet); + padding-right: var(--space-container-x-tablet); } .hero-text h1 { @@ -483,7 +483,7 @@ .promise-inner { flex-direction: column; - padding: 0 24px; + padding: 0 var(--space-container-x-mobile); } .promise-text { @@ -494,7 +494,7 @@ order: 2; flex: none; width: 100%; - max-width: 320px; + max-width: 360px; margin: 0 auto; } @@ -700,7 +700,11 @@ .testimonials-inner, .info-inner, .form-inner { - padding: 0 24px; + padding: 0 var(--space-container-x-mobile); + } + + .page-inner { + padding: 0 var(--space-container-x-mobile); } .section-heading { @@ -708,7 +712,7 @@ } footer { - padding: 40px 24px 24px; + padding: 40px var(--space-container-x-mobile) var(--space-container-x-mobile); } .footer-inner { @@ -820,4 +824,9 @@ :root { --sh-copy-left-pad: clamp(420px, 22vw, 550px); } + + .hero-img img { + width: 54%; + object-position: center 8%; + } } diff --git a/src/lib/styles/sections.css b/src/lib/styles/sections.css index 0132a13..716efed 100644 --- a/src/lib/styles/sections.css +++ b/src/lib/styles/sections.css @@ -1,19 +1,19 @@ /* Featured sections — more breathing room */ #promise, #services { - padding: 96px 0; + padding: var(--space-section-featured-y) 0; } /* Supporting sections */ #values, #testimonials, #info { - padding: 72px 0; + padding: var(--space-section-support-y) 0; } /* Booking / lead form — neutral */ #newlead { - padding: 80px 0; + padding: var(--space-section-form-y) 0; } #hero { @@ -53,7 +53,7 @@ width: 100%; max-width: 700px; margin: 0 auto; - padding: 0 50px 32px; + padding: 0 var(--space-container-x) var(--space-hero-inner-bottom); gap: 0; } diff --git a/src/lib/styles/variables.css b/src/lib/styles/variables.css index 0c36e9e..a9da6e6 100644 --- a/src/lib/styles/variables.css +++ b/src/lib/styles/variables.css @@ -1,4 +1,20 @@ :root { + /* Spacing scale */ + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-7: 32px; + --space-8: 40px; + --space-9: 48px; + --space-10: 56px; + --space-11: 64px; + --space-12: 72px; + --space-13: 80px; + --space-14: 96px; + /* Brand greens */ --gw-green: #213021; --green-mid: #2d4230; /* hover states, subtle accents */ @@ -17,12 +33,30 @@ /* Layout */ --max-w: 1280px; + --space-container-x: var(--space-9); + --space-container-x-tablet: 30px; + --space-container-x-mobile: var(--space-6); + --space-section-featured-y: var(--space-14); + --space-section-support-y: var(--space-12); + --space-section-form-y: var(--space-13); + --space-section-page-y: var(--space-13); + --space-section-mobile-y: var(--space-11); + --space-hero-inner-bottom: var(--space-7); /* Typography */ --font-body: 'Readex Pro', sans-serif; --font-head: 'Unbounded', sans-serif; } +@media (max-width: 768px) { + :root { + --space-section-featured-y: var(--space-section-mobile-y); + --space-section-support-y: var(--space-section-mobile-y); + --space-section-form-y: var(--space-section-mobile-y); + --space-section-page-y: var(--space-section-mobile-y); + } +} + @media (min-width: 1800px) { :root { --max-w: 1408px; diff --git a/src/lib/types.ts b/src/lib/types.ts index 6788091..88e3586 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -57,7 +57,7 @@ export interface IntroContent { reviewCta: CallToAction; } -export interface PromiseContent { +export interface FounderStoryContent { title: string; subtitle: string; body: string[]; @@ -290,7 +290,7 @@ export interface HomePageContent { navigation: NavigationContent; hero: HeroContent; intro: IntroContent; - promise: PromiseContent; + founderStory: FounderStoryContent; services: IconCard[]; howItWorks: HowItWorksContent; values: IconCard[]; diff --git a/src/lib/utils/pricing.ts b/src/lib/utils/pricing.ts new file mode 100644 index 0000000..ac51c5a --- /dev/null +++ b/src/lib/utils/pricing.ts @@ -0,0 +1,19 @@ +export function numericPrice(price: string): number { + const value = Number(price.replace(/[^0-9.]/g, '')); + return Number.isFinite(value) ? value : Number.POSITIVE_INFINITY; +} + +export function decoratePlans(plans: T[]) { + const sorted = [...plans] + .map((plan, index) => ({ plan, index, value: numericPrice(plan.price) })) + .sort((a, b) => a.value - b.value || a.index - b.index); + + const cheapestIndex = sorted[0]?.index ?? -1; + const mobileOrder = new Map(sorted.map((entry, order) => [entry.index, order])); + + return plans.map((plan, index) => ({ + ...plan, + isPopular: index === cheapestIndex, + mobileOrder: mobileOrder.get(index) ?? index + })); +} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 40798e0..1e3a27c 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -7,7 +7,7 @@ import InfoSection from '$lib/components/InfoSection.svelte'; import InstagramSection from '$lib/components/InstagramSection.svelte'; import BookingSection from '$lib/components/BookingSection.svelte'; - import PromiseSection from '$lib/components/PromiseSection.svelte'; + import FounderStorySection from '$lib/components/FounderStorySection.svelte'; import ServicesSection from '$lib/components/ServicesSection.svelte'; import TestimonialsSection from '$lib/components/TestimonialsSection.svelte'; import ValuesSection from '$lib/components/ValuesSection.svelte'; @@ -130,7 +130,7 @@
- +