644 lines
16 KiB
Svelte
644 lines
16 KiB
Svelte
<script lang="ts">
|
|
import { reveal } from '$lib/actions/reveal';
|
|
import { getEnhancedImage } from '$lib/enhanced-images';
|
|
import Icon from '$lib/components/Icon.svelte';
|
|
import type { IconCard } from '$lib/types';
|
|
|
|
export let values: IconCard[];
|
|
const stakes = [
|
|
{
|
|
label: 'Without the right routine',
|
|
title: 'By the end of the day, everything feels harder than it should.',
|
|
body:
|
|
'Your dog still has energy to burn, you are carrying guilt through the workday, and home does not feel as calm as it could.',
|
|
points: [
|
|
'A dog who is restless, wired, or harder to settle at home',
|
|
'A workday shaped by guilt, logistics, and wondering how they are doing',
|
|
'Too much uncertainty around who is picking up your dog and what the walk will be like'
|
|
],
|
|
footer: 'The walk is not really the point. The evening is.'
|
|
},
|
|
{
|
|
label: 'With Goodwalk',
|
|
title: 'A good walk changes you & your dogs whole evening.',
|
|
body:
|
|
'Your dog comes home happier, the routine feels lighter, and you are not spending the day second-guessing whether they are okay.',
|
|
points: [
|
|
'A walker your dog recognises and is happy to see at the door',
|
|
'Small-group or one-on-one care that genuinely suits your dog',
|
|
'Clear updates, calmer evenings, and one less thing sitting on your mind'
|
|
],
|
|
footer: 'That is what people are really buying: peace of mind, routine, and a dog who feels cared for.'
|
|
}
|
|
];
|
|
const clientPhotos = [
|
|
{
|
|
imageUrl: '/images/dog.png',
|
|
alt: 'Two happy Goodwalk client dogs out on a walk in Auckland',
|
|
name: 'Happy clients',
|
|
detail: 'out with Goodwalk'
|
|
},
|
|
{
|
|
imageUrl: '/images/pack-walk-tiny-gang.png',
|
|
alt: 'Goodwalk Tiny Gang dogs together on a walk in Auckland',
|
|
name: 'Tiny Gang',
|
|
detail: 'small group pack walks'
|
|
},
|
|
{
|
|
imageUrl: '/images/tiny-gang-mt-albert-park.png',
|
|
alt: 'Goodwalk dogs together at Mt Albert Park in Auckland',
|
|
name: 'Mt Albert Park',
|
|
detail: 'Goodwalk regulars'
|
|
},
|
|
{
|
|
imageUrl: '/images/otis-auckland-dog-walking-review.jpg',
|
|
alt: 'Otis enjoying his Goodwalk routine in Auckland',
|
|
name: 'Otis',
|
|
detail: 'regular weekly walks'
|
|
},
|
|
{
|
|
imageUrl: '/images/wallace-auckland-dog-walking-review.jpg',
|
|
alt: 'Wallace during a Goodwalk puppy-to-pack journey',
|
|
name: 'Wallace',
|
|
detail: 'from puppy visits to pack walks'
|
|
}
|
|
];
|
|
|
|
$: clientPhotoCards = clientPhotos.map((photo) => ({
|
|
...photo,
|
|
enhanced: getEnhancedImage(photo.imageUrl)
|
|
}));
|
|
|
|
$: orderedValues = values
|
|
.map((value, index) => ({ value, index }))
|
|
.sort((a, b) => {
|
|
const aOrder = a.value.order ?? Number.POSITIVE_INFINITY;
|
|
const bOrder = b.value.order ?? Number.POSITIVE_INFINITY;
|
|
|
|
if (aOrder !== bOrder) {
|
|
return aOrder - bOrder;
|
|
}
|
|
|
|
return a.index - b.index;
|
|
})
|
|
.map(({ value }) => value);
|
|
</script>
|
|
|
|
<section id="values" use:reveal={{ delay: 30 }} class="reveal-block">
|
|
<div class="values-inner">
|
|
<div class="section-header">
|
|
<span class="eyebrow values-eyebrow">Why people come to us</span>
|
|
<h2 class="section-heading">Calmer dogs. Better routines. The Tiny Gang effect.</h2>
|
|
<p class="section-intro values-intro">
|
|
Goodwalk was created for busy owners who want reliable, relationship-led care their dog genuinely looks forward to.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="values-photo-grid" aria-label="Goodwalk client dogs">
|
|
{#each clientPhotoCards as photo, index}
|
|
<figure class:values-photo-card-featured={index === 0} class="values-photo-card">
|
|
{#if photo.enhanced}
|
|
<enhanced:img
|
|
class="values-photo-image"
|
|
src={photo.enhanced}
|
|
alt={photo.alt}
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
{:else}
|
|
<img
|
|
class="values-photo-image"
|
|
src={photo.imageUrl}
|
|
alt={photo.alt}
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
{/if}
|
|
<figcaption class="values-photo-caption">
|
|
<span class="values-photo-name">{photo.name}</span>
|
|
<span class="values-photo-detail">{photo.detail}</span>
|
|
</figcaption>
|
|
</figure>
|
|
{/each}
|
|
</div>
|
|
|
|
<div class="values-bento values-contrast">
|
|
{#each stakes as stake, index}
|
|
<article class:values-contrast-cell-good={index === 1} class="values-contrast-cell">
|
|
<div class="values-contrast-head">
|
|
<span class:values-contrast-label-good={index === 1} class="values-contrast-label">
|
|
{stake.label}
|
|
</span>
|
|
<span class="values-contrast-num">0{index + 1}</span>
|
|
</div>
|
|
<h3>{stake.title}</h3>
|
|
<p class="values-contrast-body">{stake.body}</p>
|
|
<ul class="values-contrast-list">
|
|
{#each stake.points as point}
|
|
<li>
|
|
<span class="values-contrast-bullet">
|
|
<Icon
|
|
name={index === 1 ? 'fas fa-check' : 'fas fa-minus'}
|
|
className="values-contrast-glyph"
|
|
/>
|
|
</span>
|
|
<span>{point}</span>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
<p class="values-contrast-footer">{stake.footer}</p>
|
|
</article>
|
|
{/each}
|
|
</div>
|
|
|
|
<div class="values-points-header">
|
|
<span class="eyebrow values-eyebrow">What we stand for</span>
|
|
<h3 class="values-points-title">The values behind every walk</h3>
|
|
<p class="values-points-intro">
|
|
Kind handling, small groups, proper safety training, and honest communication — not extras, just how Goodwalk works.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="values-bento values-points">
|
|
{#each orderedValues as value}
|
|
<div class="values-point">
|
|
<div class="values-point-icon">
|
|
<Icon name={value.icon} className="values-point-glyph" />
|
|
</div>
|
|
<h3>{value.title}</h3>
|
|
<p>{value.body}</p>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
/* Minimalist, grid-based layout (hairline "bento" cells) with Goodwalk
|
|
brand colour carried through the icons and the "With Goodwalk" cell. */
|
|
#values {
|
|
position: relative;
|
|
color: var(--text);
|
|
}
|
|
|
|
.values-inner {
|
|
max-width: var(--max-w);
|
|
margin: 0 auto;
|
|
padding: 0 50px;
|
|
}
|
|
|
|
.values-inner .section-heading {
|
|
color: #000;
|
|
text-align: center;
|
|
}
|
|
|
|
.values-eyebrow {
|
|
width: fit-content;
|
|
padding: 6px 12px;
|
|
border-radius: 999px;
|
|
background: rgba(33, 48, 33, 0.06);
|
|
box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.07);
|
|
}
|
|
|
|
.values-intro {
|
|
max-width: 720px;
|
|
}
|
|
|
|
/* ── Client photo gallery ── */
|
|
.values-photo-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.25fr 0.9fr 0.9fr;
|
|
grid-template-rows: repeat(2, clamp(170px, 18vw, 240px));
|
|
gap: 16px;
|
|
margin-top: 32px;
|
|
max-width: 1120px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.values-photo-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
border-radius: 28px;
|
|
background: #ede4d2;
|
|
box-shadow:
|
|
inset 0 0 0 1px rgba(17, 20, 24, 0.05),
|
|
0 18px 34px rgba(17, 20, 24, 0.08);
|
|
}
|
|
|
|
.values-photo-card-featured {
|
|
grid-row: 1 / span 2;
|
|
}
|
|
|
|
.values-photo-image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.values-photo-card:hover .values-photo-image {
|
|
transform: scale(1.06);
|
|
}
|
|
}
|
|
|
|
.values-photo-caption {
|
|
position: absolute;
|
|
left: 16px;
|
|
right: 16px;
|
|
bottom: 16px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 12px 14px;
|
|
border-radius: 18px;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.92));
|
|
box-shadow:
|
|
inset 0 0 0 1px rgba(17, 20, 24, 0.05),
|
|
0 12px 24px rgba(17, 20, 24, 0.08);
|
|
}
|
|
|
|
.values-photo-name,
|
|
.values-photo-detail {
|
|
display: block;
|
|
}
|
|
|
|
.values-photo-name {
|
|
color: #102010;
|
|
font-family: var(--font-head);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.values-photo-detail {
|
|
color: #5a605f;
|
|
font-size: 13px;
|
|
line-height: 1.3;
|
|
text-align: right;
|
|
}
|
|
|
|
/* ── Bento container: hairline grid via 1px gaps over a line-coloured base ── */
|
|
.values-bento {
|
|
max-width: 1120px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: grid;
|
|
gap: 1px;
|
|
background: rgba(17, 20, 24, 0.1);
|
|
border: 1px solid rgba(17, 20, 24, 0.1);
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
box-shadow: 0 14px 34px rgba(17, 20, 24, 0.06);
|
|
}
|
|
|
|
/* ── Before / after contrast ── */
|
|
.values-contrast {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
margin-top: 36px;
|
|
}
|
|
|
|
.values-contrast-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 38px 36px;
|
|
background: #fff;
|
|
}
|
|
|
|
.values-contrast-cell-good {
|
|
background: var(--gw-green);
|
|
}
|
|
|
|
.values-contrast-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.values-contrast-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 5px 11px;
|
|
border-radius: 999px;
|
|
background: rgba(17, 20, 24, 0.05);
|
|
color: var(--gray);
|
|
font-family: var(--font-head);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.values-contrast-label-good {
|
|
background: var(--yellow);
|
|
color: #000;
|
|
}
|
|
|
|
.values-contrast-num {
|
|
font-family: var(--font-head);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: rgba(17, 20, 24, 0.22);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.values-contrast-cell h3 {
|
|
margin: 0 0 12px;
|
|
font-family: var(--font-head);
|
|
font-size: clamp(20px, 1.9vw, 25px);
|
|
font-weight: 700;
|
|
line-height: 1.22;
|
|
letter-spacing: -0.02em;
|
|
color: #0d1a0d;
|
|
}
|
|
|
|
.values-contrast-body {
|
|
margin: 0 0 20px;
|
|
color: #4c5056;
|
|
font-size: 15px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.values-contrast-list {
|
|
display: grid;
|
|
margin: 0 0 22px;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.values-contrast-list li {
|
|
display: grid;
|
|
grid-template-columns: 20px minmax(0, 1fr);
|
|
gap: 12px;
|
|
align-items: start;
|
|
padding: 13px 0;
|
|
color: #3f4348;
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.values-contrast-list li + li {
|
|
border-top: 1px solid rgba(17, 20, 24, 0.08);
|
|
}
|
|
|
|
.values-contrast-bullet {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.values-contrast-list :global(.values-contrast-glyph) {
|
|
font-size: 10px;
|
|
color: var(--gray);
|
|
}
|
|
|
|
.values-contrast-cell-good .values-contrast-bullet {
|
|
border-radius: 50%;
|
|
background: var(--yellow);
|
|
}
|
|
|
|
.values-contrast-cell-good .values-contrast-list :global(.values-contrast-glyph) {
|
|
font-size: 9px;
|
|
color: var(--gw-green);
|
|
}
|
|
|
|
.values-contrast-footer {
|
|
margin: auto 0 0;
|
|
padding-top: 18px;
|
|
border-top: 1px solid rgba(17, 20, 24, 0.08);
|
|
color: var(--gw-green);
|
|
font-family: var(--font-head);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.values-contrast-cell-good .values-contrast-footer {
|
|
border-top-color: rgba(255, 255, 255, 0.18);
|
|
color: var(--yellow);
|
|
}
|
|
|
|
/* Light text for the gw-green "With Goodwalk" cell */
|
|
.values-contrast-cell-good h3 {
|
|
color: #fff;
|
|
}
|
|
|
|
.values-contrast-cell-good .values-contrast-num {
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.values-contrast-cell-good .values-contrast-body {
|
|
color: rgba(255, 255, 255, 0.82);
|
|
}
|
|
|
|
.values-contrast-cell-good .values-contrast-list li {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.values-contrast-cell-good .values-contrast-list li + li {
|
|
border-top-color: rgba(255, 255, 255, 0.14);
|
|
}
|
|
|
|
/* ── Values points header ── */
|
|
.values-points-header {
|
|
margin-top: 52px;
|
|
text-align: center;
|
|
}
|
|
|
|
.values-points-title {
|
|
max-width: 19ch;
|
|
margin: 12px auto 0;
|
|
font-family: var(--font-head);
|
|
font-size: clamp(24px, 2.4vw, 32px);
|
|
font-weight: 700;
|
|
line-height: 1.14;
|
|
letter-spacing: -0.03em;
|
|
color: #000;
|
|
}
|
|
|
|
.values-points-intro {
|
|
max-width: 560px;
|
|
margin: 14px auto 0;
|
|
color: #4c5056;
|
|
font-size: var(--body-copy-size);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
/* ── Values points ── */
|
|
.values-points {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
margin-top: 26px;
|
|
box-shadow: var(--shadow-panel-elevated);
|
|
}
|
|
|
|
.values-point {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 32px 30px;
|
|
background: #fff;
|
|
transition: background 0.18s ease;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.values-point:hover {
|
|
background: #fcfbf6;
|
|
}
|
|
}
|
|
|
|
.values-point-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-bottom: 18px;
|
|
border-radius: 11px;
|
|
background: var(--gw-green);
|
|
box-shadow: 0 6px 16px rgba(33, 48, 33, 0.18);
|
|
}
|
|
|
|
.values-point-icon :global(.values-point-glyph) {
|
|
font-size: 17px;
|
|
color: var(--yellow);
|
|
}
|
|
|
|
.values-point h3 {
|
|
margin: 0 0 9px;
|
|
font-family: var(--font-head);
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
line-height: 1.25;
|
|
color: #0d1a0d;
|
|
}
|
|
|
|
.values-point p {
|
|
margin: 0;
|
|
color: #4c5056;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
@media (min-width: 1600px) {
|
|
.values-photo-grid,
|
|
.values-bento {
|
|
max-width: 1180px;
|
|
}
|
|
}
|
|
|
|
/* ── Mobile ── */
|
|
@media (max-width: 768px) {
|
|
.values-inner {
|
|
padding: 0 var(--space-container-x-mobile);
|
|
}
|
|
|
|
.values-intro {
|
|
max-width: 32ch;
|
|
}
|
|
|
|
.values-eyebrow {
|
|
padding: 6px 10px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.values-photo-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
grid-template-rows: auto;
|
|
gap: 10px;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.values-photo-card,
|
|
.values-photo-card-featured {
|
|
grid-row: auto;
|
|
min-height: 178px;
|
|
border-radius: 22px;
|
|
}
|
|
|
|
.values-photo-caption {
|
|
left: 10px;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
padding: 10px 11px;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.values-photo-name {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.values-photo-detail {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.values-bento {
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.values-contrast {
|
|
grid-template-columns: 1fr;
|
|
margin-top: 26px;
|
|
}
|
|
|
|
.values-contrast-cell {
|
|
padding: 26px 22px;
|
|
}
|
|
|
|
.values-contrast-body {
|
|
font-size: var(--body-copy-size-mobile);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.values-contrast-list li {
|
|
font-size: var(--body-copy-size-mobile);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.values-points-header {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.values-points-title {
|
|
max-width: 16ch;
|
|
font-size: clamp(22px, 6.4vw, 27px);
|
|
}
|
|
|
|
.values-points-intro {
|
|
max-width: 36ch;
|
|
font-size: var(--body-lead-size-mobile);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.values-points {
|
|
grid-template-columns: 1fr;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.values-point {
|
|
padding: 26px 22px;
|
|
}
|
|
}
|
|
|
|
/* ── Reveal ── */
|
|
: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);
|
|
}
|
|
</style>
|