From ad9df7578ad69edca3c6b32b2e2cf0049e79fbd7 Mon Sep 17 00:00:00 2001 From: ponzischeme89 Date: Wed, 6 May 2026 17:42:43 +1200 Subject: [PATCH] 4.2.3 - CTA footer, How it works --- DEPLOYMENT.md | 2 +- Dockerfile | 2 +- deploy.env.template | 2 +- docker-compose.prod.yml | 8 +- docker-compose.yml | 8 +- mail-api/Dockerfile | 2 +- package-lock.json | 4 +- package.json | 2 +- src/app.html | 94 ++++--- src/lib/components/Footer.svelte | 8 +- src/lib/components/HowItWorksSection.svelte | 259 ++++++++++++++++++++ src/lib/components/InfoSection.svelte | 148 ++++++++++- src/lib/content/homepage.ts | 21 ++ src/lib/styles/buttons.css | 6 +- src/lib/styles/layout.css | 4 +- src/lib/styles/responsive.css | 37 ++- src/lib/styles/sections.css | 85 +++++-- src/lib/types.ts | 13 + src/routes/+page.svelte | 2 + 19 files changed, 621 insertions(+), 86 deletions(-) create mode 100644 src/lib/components/HowItWorksSection.svelte diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md index d24b912..64caf53 100644 --- a/DEPLOYMENT.md +++ b/DEPLOYMENT.md @@ -73,7 +73,7 @@ mkdir -p /docker/goodwalk-svelte It is created from [deploy.env.template](deploy.env.template). Current template contents: ```env -APP_VERSION=4.2.2 +APP_VERSION=4.2.3 ENABLE_GENERAL_ENQUIRIES=false TZ=Pacific/Auckland diff --git a/Dockerfile b/Dockerfile index 3066721..a3afe7f 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -ARG APP_VERSION=4.2.2 +ARG APP_VERSION=4.2.3 FROM node:22-alpine AS builder ARG APP_VERSION diff --git a/deploy.env.template b/deploy.env.template index 588c2c5..71a03a3 100644 --- a/deploy.env.template +++ b/deploy.env.template @@ -1,4 +1,4 @@ -APP_VERSION=4.2.2 +APP_VERSION=4.2.3 TZ=Pacific/Auckland POSTGRES_DB=goodwalk diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml index 6496bee..eee542a 100644 --- a/docker-compose.prod.yml +++ b/docker-compose.prod.yml @@ -3,10 +3,10 @@ services: build: context: . args: - APP_VERSION: ${APP_VERSION:-4.2.2} + APP_VERSION: ${APP_VERSION:-4.2.3} container_name: goodwalk_svelte_app environment: - APP_VERSION: ${APP_VERSION:-4.2.2} + APP_VERSION: ${APP_VERSION:-4.2.3} DATABASE_URL: postgresql://${POSTGRES_USER:-goodwalk}:${POSTGRES_PASSWORD_URLENCODED:-goodwalk}@db:5432/${POSTGRES_DB:-goodwalk} NODE_ENV: production PORT: 3000 @@ -25,10 +25,10 @@ services: build: context: ./mail-api args: - APP_VERSION: ${APP_VERSION:-4.2.2} + APP_VERSION: ${APP_VERSION:-4.2.3} container_name: goodwalk_svelte_mail_api environment: - APP_VERSION: ${APP_VERSION:-4.2.2} + APP_VERSION: ${APP_VERSION:-4.2.3} RESEND_API_KEY: ${RESEND_API_KEY} OWNER_EMAIL: ${OWNER_EMAIL} OWNER_BCC: ${OWNER_BCC:-} diff --git a/docker-compose.yml b/docker-compose.yml index 5bf1a1d..c0e572a 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -3,9 +3,9 @@ services: build: context: . args: - APP_VERSION: ${APP_VERSION:-4.2.2} + APP_VERSION: ${APP_VERSION:-4.2.3} environment: - APP_VERSION: ${APP_VERSION:-4.2.2} + APP_VERSION: ${APP_VERSION:-4.2.3} DATABASE_URL: postgresql://${POSTGRES_USER:-goodwalk}:${POSTGRES_PASSWORD:-goodwalk}@db:5432/${POSTGRES_DB:-goodwalk} NODE_ENV: production PORT: ${APP_PORT:-3000} @@ -19,9 +19,9 @@ services: build: context: ./mail-api args: - APP_VERSION: ${APP_VERSION:-4.2.2} + APP_VERSION: ${APP_VERSION:-4.2.3} environment: - APP_VERSION: ${APP_VERSION:-4.2.2} + APP_VERSION: ${APP_VERSION:-4.2.3} RESEND_API_KEY: ${RESEND_API_KEY} OWNER_EMAIL: ${OWNER_EMAIL} OWNER_BCC: ${OWNER_BCC:-} diff --git a/mail-api/Dockerfile b/mail-api/Dockerfile index 8a161a9..97c803c 100644 --- a/mail-api/Dockerfile +++ b/mail-api/Dockerfile @@ -1,4 +1,4 @@ -ARG APP_VERSION=4.2.2 +ARG APP_VERSION=4.2.3 FROM python:3.12-slim ARG APP_VERSION diff --git a/package-lock.json b/package-lock.json index 1b8bdb5..c357b87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "goodwalk-svelte-port", - "version": "4.2.2", + "version": "4.2.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "goodwalk-svelte-port", - "version": "4.2.2", + "version": "4.2.3", "dependencies": { "canvas-confetti": "^1.9.4", "pg": "^8.13.1" diff --git a/package.json b/package.json index 23331f5..f6c3cd3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "goodwalk-svelte-port", - "version": "4.2.2", + "version": "4.2.3", "private": true, "type": "module", "scripts": { diff --git a/src/app.html b/src/app.html index 6168892..055f333 100644 --- a/src/app.html +++ b/src/app.html @@ -9,51 +9,21 @@ - - - - + %sveltekit.head% +
%sveltekit.body%
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte index e689a85..43854be 100644 --- a/src/lib/components/Footer.svelte +++ b/src/lib/components/Footer.svelte @@ -72,13 +72,15 @@ -
+

Get Started

+

Ready when you are

+

Questions, pricing, or your first Meet & Greet. Start here and we’ll reply within 24 hours.

- Book a Meet & Greet + Contact Us -

Free, no-obligation introduction

+

Friendly, no-pressure first step

+ import { reveal } from '$lib/actions/reveal'; + import Icon from '$lib/components/Icon.svelte'; + import type { HowItWorksContent } from '$lib/types'; + + export let content: HowItWorksContent; + + +
+
+
+

{content.title}

+ {#if content.intro} +

{content.intro}

+ {/if} +
+ +
+ {#each content.steps as step, index} +
+ + {#if step.icon} +
+ +
+ {/if} +

{step.title}

+

{step.body}

+
+ + {#if index < content.steps.length - 1} + + {/if} + {/each} +
+
+
+ + diff --git a/src/lib/components/InfoSection.svelte b/src/lib/components/InfoSection.svelte index 489efbd..cbce8a1 100644 --- a/src/lib/components/InfoSection.svelte +++ b/src/lib/components/InfoSection.svelte @@ -3,20 +3,38 @@ import type { InfoContent } from '$lib/types'; export let info: InfoContent; + + $: suburbChips = info.suburbs + .split(',') + .map((suburb) => suburb.trim()) + .filter(Boolean);

{info.title}

-

{info.intro}

-

{info.suburbs}

-

- {info.nearbyText} - {info.nearbyCta.label} -

-

{info.hoursLabel}

-

{info.hours}

+

{info.intro}

+

Regular walks across the inner-west and nearby suburbs.

+ +
+ {#each suburbChips as suburb} + {suburb} + {/each} +
+ +
+
+ Nearby but not listed? +

{info.nearbyText} There's a good chance we can still help.

+
+ {info.nearbyCta.label} +
+ +
+

{info.hoursLabel}

+

{info.hours}

+
@@ -32,3 +50,117 @@
+ + diff --git a/src/lib/content/homepage.ts b/src/lib/content/homepage.ts index 351ec93..da67059 100644 --- a/src/lib/content/homepage.ts +++ b/src/lib/content/homepage.ts @@ -83,6 +83,27 @@ export const homepageContent: HomePageContent = { href: '/puppy-visits' } ], + howItWorks: { + title: 'How it works', + //intro: 'A simple onboarding flow designed to make sure the fit is right for both you and your dog.', + steps: [ + { + title: 'Meet & Greet', + body: 'We meet you and your dog first, talk through routine, temperament, and what support you need.', + icon: 'fas fa-handshake' + }, + { + title: 'Two assessment walks', + body: 'We ease your dog in with two assessment walks so we can check confidence, handling, and group fit.', + icon: 'fas fa-clipboard-check' + }, + { + title: 'Happy dogs, happy humans', + body: 'Once approved, your dog joins regular walks and comes home tired, settled, and ready for a nap.', + icon: 'fas fa-heart' + } + ] + }, values: [ { icon: 'fas fa-heart', diff --git a/src/lib/styles/buttons.css b/src/lib/styles/buttons.css index f1a2885..8fcfeb7 100644 --- a/src/lib/styles/buttons.css +++ b/src/lib/styles/buttons.css @@ -2,9 +2,9 @@ display: inline-flex; align-items: center; justify-content: center; - gap: 12px; - padding: 14px 32px; - font-size: 15px; + gap: 10px; + padding: 13px 28px; + font-size: 14px; font-weight: 600; border-radius: 40px; cursor: pointer; diff --git a/src/lib/styles/layout.css b/src/lib/styles/layout.css index b3d056e..7526dc8 100644 --- a/src/lib/styles/layout.css +++ b/src/lib/styles/layout.css @@ -385,8 +385,8 @@ nav { .footer-inner { display: grid; - grid-template-columns: 2fr 1.4fr 2fr; - gap: 60px; + grid-template-columns: 1.25fr 0.95fr 1.15fr; + gap: 24px; margin-bottom: 48px; align-items: start; } diff --git a/src/lib/styles/responsive.css b/src/lib/styles/responsive.css index e565970..37913cb 100644 --- a/src/lib/styles/responsive.css +++ b/src/lib/styles/responsive.css @@ -254,12 +254,13 @@ flex: 1 1 0; width: 0; min-width: 0; - padding: 15px 12px; - font-size: 13.5px; + padding: 14px 10px; + font-size: 12.5px; font-weight: 700; text-align: center; border-radius: 999px; - line-height: 1.25; + line-height: 1.15; + letter-spacing: -0.01em; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } @@ -552,13 +553,31 @@ } .footer-inner { - gap: 36px; + grid-template-columns: 1fr; + gap: 16px; } .footer-action { order: -1; } + .footer-panel { + padding: 22px 18px; + border-radius: 24px; + } + + .footer-nav { + columns: 1; + } + + .footer-action-title { + font-size: 22px; + } + + .footer-action-copy { + font-size: 14px; + } + .footer-book-note { text-align: left; } @@ -567,6 +586,10 @@ padding: 11px 0; } + .footer-contact { + gap: 6px; + } + .footer-bottom { flex-direction: column; align-items: flex-start; @@ -610,8 +633,8 @@ flex: 1 1 0; width: 0; margin-right: 0 !important; - padding: 14px 10px; - font-size: 13px; - line-height: 1.2; + padding: 13px 9px; + font-size: 12px; + line-height: 1.1; } } diff --git a/src/lib/styles/sections.css b/src/lib/styles/sections.css index 6850aca..98e7c09 100644 --- a/src/lib/styles/sections.css +++ b/src/lib/styles/sections.css @@ -526,34 +526,60 @@ footer { .footer-logo { display: block; - height: 22px; + height: 24px; width: auto; - margin-bottom: 20px; + margin-bottom: 18px; +} + +.footer-panel { + min-height: 100%; + padding: 28px 26px; + border-radius: 28px; + background: rgba(255, 255, 255, 0.06); + box-shadow: + inset 0 0 0 1px rgba(255, 255, 255, 0.08), + 0 18px 34px rgba(0, 0, 0, 0.08); + backdrop-filter: blur(6px); +} + +.footer-panel-accent { + background: + radial-gradient(circle at top right, rgba(255, 209, 71, 0.22), transparent 38%), + linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.06) 100%); + box-shadow: + inset 0 0 0 1px rgba(255, 255, 255, 0.1), + 0 20px 40px rgba(0, 0, 0, 0.12); } .footer-brand p { font-size: 14px; - line-height: 1.6; - opacity: 0.65; + line-height: 1.7; + opacity: 0.76; margin-bottom: 24px; white-space: pre-line; + max-width: 34ch; } .social-links a { - width: 40px; - height: 40px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.1); + width: 44px; + height: 44px; + border-radius: 16px; + background: rgba(255, 255, 255, 0.08); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; font-size: 16px; - transition: background 0.2s, color 0.2s; + transition: + background 0.2s, + color 0.2s, + transform 0.16s cubic-bezier(0.22, 1, 0.36, 1); } .social-links a:hover { background: var(--yellow); color: #000; + transform: translateY(-1px); } .footer-col-label { @@ -568,15 +594,18 @@ footer { .footer-nav { list-style: none; + columns: 2; + column-gap: 24px; } .footer-nav li { margin: 0; + break-inside: avoid; } .footer-nav a { display: block; - padding: 8px 0; + padding: 9px 0; font-size: 15px; font-weight: 500; opacity: 0.75; @@ -587,13 +616,29 @@ footer { opacity: 1; } +.footer-action-title { + margin: 0 0 10px; + color: #fff; + font-size: 28px; + line-height: 1; + letter-spacing: -0.04em; +} + +.footer-action-copy { + margin: 0 0 22px; + max-width: 34ch; + color: rgba(255, 255, 255, 0.78); + font-size: 14px; + line-height: 1.65; +} + .footer-book-btn { - display: flex; + display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; - padding: 15px 22px; + padding: 16px 22px; border-radius: 999px; background: var(--yellow); color: #000; @@ -611,14 +656,16 @@ footer { .footer-book-note { margin: 0 0 20px; font-size: 13px; - opacity: 0.5; - text-align: center; + opacity: 0.68; + text-align: left; } .footer-reviews { display: inline-flex; align-items: center; + justify-content: center; gap: 8px; + width: 100%; padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); @@ -640,8 +687,7 @@ footer { } .footer-contact { - display: flex; - flex-direction: column; + display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; @@ -652,6 +698,8 @@ footer { display: inline-flex; align-items: center; gap: 8px; + min-height: 42px; + padding: 0 2px; font-size: 13px; font-weight: 500; opacity: 0.7; @@ -674,14 +722,15 @@ footer { flex-wrap: wrap; gap: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); - padding-top: 24px; + padding-top: 28px; font-size: 13px; - opacity: 0.5; + opacity: 0.6; } .footer-legal { display: flex; gap: 20px; + flex-wrap: wrap; } .footer-legal a { diff --git a/src/lib/types.ts b/src/lib/types.ts index 91b5182..26f9394 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -74,6 +74,18 @@ export interface TestimonialContent { imageUrl?: string; } +export interface ProcessStep { + title: string; + body: string; + icon?: string; +} + +export interface HowItWorksContent { + title: string; + intro?: string; + steps: ProcessStep[]; +} + export interface BookingContent { title: string; subtitle: string; @@ -219,6 +231,7 @@ export interface HomePageContent { intro: IntroContent; promise: PromiseContent; services: IconCard[]; + howItWorks: HowItWorksContent; values: IconCard[]; testimonials: TestimonialContent[]; booking: BookingContent; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index ff91b43..8b1b38b 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -3,6 +3,7 @@ import Footer from '$lib/components/Footer.svelte'; import Header from '$lib/components/Header.svelte'; import HeroSection from '$lib/components/HeroSection.svelte'; + import HowItWorksSection from '$lib/components/HowItWorksSection.svelte'; import InfoSection from '$lib/components/InfoSection.svelte'; import InstagramSection from '$lib/components/InstagramSection.svelte'; import BookingSection from '$lib/components/BookingSection.svelte'; @@ -139,6 +140,7 @@ +