v4
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
export let services: IconCard[];
|
||||
export let heading = 'Choose the walk style that suits your dog best.';
|
||||
export let intro =
|
||||
'Dogs are social creatures. The Tiny Gang gives them their own little friendship group — older dogs guide the younger ones, playful dogs burn energy together, and everyone comes home happy, tired, and fulfilled. All the fun of doggy daycare, without the huge groups or price tag.';
|
||||
'Dogs are social creatures. The Tiny Gang gives them their own little friendship group: older dogs guide the younger ones, playful dogs burn energy together, and everyone comes home happy, tired, and fulfilled. All the fun of doggy daycare, without the huge groups or price tag.';
|
||||
|
||||
const sharedPromises = [
|
||||
'Familiar walkers',
|
||||
@@ -22,7 +22,6 @@
|
||||
{
|
||||
eyebrow: string;
|
||||
featured?: boolean;
|
||||
featuredLabel?: string;
|
||||
imageUrl: string;
|
||||
imageAlt: string;
|
||||
lead: string;
|
||||
@@ -32,22 +31,21 @@
|
||||
'Tiny Gang Pack Walks': {
|
||||
eyebrow: 'Good Walk Signature',
|
||||
featured: true,
|
||||
featuredLabel: 'Most loved',
|
||||
imageUrl: '/images/auckland-pack-walk-small-dogs-group.jpg',
|
||||
imageUrl: '/images/goodwalk-tiny-gang-pack-walk-small-dogs-auckland.webp',
|
||||
imageAlt: 'Small dogs together on a Tiny Gang pack walk',
|
||||
lead: 'The Tiny Gang is built for dogs who love company, big adventures, and coming home happily worn out!',
|
||||
cues: ['4-8 dogs', 'Pickup & drop-off', 'Tiny Gang matching']
|
||||
},
|
||||
'1:1 Walks': {
|
||||
eyebrow: 'Tailored support',
|
||||
imageUrl: '/images/one-on-one-dog-portrait-1.jpg',
|
||||
imageUrl: '/images/goodwalk-brown-curly-dog-one-on-one-walk-auckland.webp',
|
||||
imageAlt: 'Dog enjoying a one-on-one walk',
|
||||
lead: 'For nervous dogs, senior dogs, and little personalities who do better with extra attention.',
|
||||
cues: ['Solo focus', 'Custom pace', 'Confidence building']
|
||||
},
|
||||
'Puppy Visits': {
|
||||
eyebrow: 'Building Blocks For The Tiny Gang',
|
||||
imageUrl: '/images/auckland-puppy-home-visit.jpg',
|
||||
imageUrl: '/images/goodwalk-puppy-visit-cavalier-king-charles-spaniel-auckland.webp',
|
||||
imageAlt: 'Puppy during a calm home visit',
|
||||
lead: 'Early puppy visits designed to build confidence, routine, and good habits before Tiny Gang adventures begin!',
|
||||
cues: ['Home visits', 'Routine support', 'Play & company']
|
||||
@@ -91,9 +89,6 @@
|
||||
{#if meta}
|
||||
<img src={meta.imageUrl} alt={meta.imageAlt} loading="lazy" decoding="async" />
|
||||
{/if}
|
||||
{#if meta?.featuredLabel}
|
||||
<span class="service-card-badge">{meta.featuredLabel}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="service-card-body">
|
||||
@@ -116,7 +111,7 @@
|
||||
{/if}
|
||||
|
||||
<span class="service-card-cta">
|
||||
View service page
|
||||
More info
|
||||
<Icon name="fas fa-arrow-right" className="service-card-cta-arrow" />
|
||||
</span>
|
||||
</div>
|
||||
@@ -127,112 +122,52 @@
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.services-inner {
|
||||
max-width: min(1180px, calc(var(--max-w) - 40px));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.85fr);
|
||||
align-items: start;
|
||||
column-gap: clamp(32px, 5vw, 72px);
|
||||
row-gap: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.section-header .section-heading {
|
||||
max-width: 22ch;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.section-header .section-intro {
|
||||
margin: 0;
|
||||
padding-top: 14px;
|
||||
max-width: 44ch;
|
||||
justify-self: end;
|
||||
text-align: left;
|
||||
line-height: 1.72;
|
||||
color: var(--text-heading-soft, var(--text-muted));
|
||||
}
|
||||
|
||||
/* ── Section intro ── */
|
||||
.services-intro {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
/* ── Overview band ── */
|
||||
.services-overview {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
|
||||
gap: 18px;
|
||||
align-items: stretch;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.services-overview-copy,
|
||||
.services-overview-panel {
|
||||
border-radius: 28px;
|
||||
background: linear-gradient(180deg, #fff 0%, #fbf8f2 100%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(17, 20, 24, 0.06),
|
||||
0 12px 28px rgba(17, 20, 24, 0.05);
|
||||
}
|
||||
|
||||
.services-overview-copy {
|
||||
padding: 28px 30px;
|
||||
}
|
||||
|
||||
.services-overview-kicker,
|
||||
.services-overview-panel-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
width: fit-content;
|
||||
padding: 0 11px;
|
||||
border-radius: 999px;
|
||||
background: rgba(33, 48, 33, 0.08);
|
||||
color: var(--gw-green);
|
||||
font-family: var(--font-head);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.services-overview-copy h3 {
|
||||
margin: 14px 0 10px;
|
||||
color: #0d1a0d;
|
||||
font-size: clamp(26px, 2.6vw, 34px);
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.services-overview-copy p,
|
||||
.services-overview-panel {
|
||||
color: #4c5056;
|
||||
font-size: 15px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.services-overview-copy p {
|
||||
max-width: 44ch;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.services-overview-panel {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 16px;
|
||||
padding: 24px 24px 22px;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(255, 209, 0, 0.22), transparent 36%),
|
||||
linear-gradient(180deg, #fff 0%, #f8f3e7 100%);
|
||||
}
|
||||
|
||||
.services-overview-pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.services-overview-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 36px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
box-shadow: inset 0 0 0 1px rgba(33, 48, 33, 0.08);
|
||||
color: var(--gw-green);
|
||||
font-family: var(--font-head);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
max-width: 34ch;
|
||||
}
|
||||
|
||||
/* ── Service cards ── */
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 22px;
|
||||
margin-top: 30px;
|
||||
align-items: stretch;
|
||||
gap: 24px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
@@ -248,6 +183,8 @@
|
||||
border-color 0.28s ease;
|
||||
}
|
||||
|
||||
/* Featured emphasis lives in the chrome (border + glow + emblem shine),
|
||||
not the column span — keeps all three cards visually balanced. */
|
||||
.service-card-featured {
|
||||
border-color: rgba(242, 191, 47, 0.45);
|
||||
box-shadow:
|
||||
@@ -267,7 +204,7 @@
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.service-card:hover .service-card-cta-arrow {
|
||||
.service-card:hover :global(.service-card-cta-arrow) {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
@@ -297,21 +234,6 @@
|
||||
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.service-card-badge {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
padding: 6px 11px;
|
||||
border-radius: 999px;
|
||||
background: var(--gw-green);
|
||||
color: #fff6cf;
|
||||
font-family: var(--font-head);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.service-card-body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -389,11 +311,15 @@
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Push cues+CTA cluster to the bottom so it lines up across all cards
|
||||
regardless of how long each card's lead paragraph runs. */
|
||||
.service-card-cues {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
margin-top: 16px;
|
||||
margin-top: auto;
|
||||
padding-top: 18px;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
.service-card-cue {
|
||||
@@ -414,7 +340,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: auto;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(17, 20, 24, 0.08);
|
||||
color: var(--gw-green);
|
||||
@@ -423,64 +348,56 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.service-card-cta-arrow {
|
||||
:global(.service-card-cta-arrow) {
|
||||
font-size: 11px;
|
||||
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
/* ── Mobile ── */
|
||||
@media (max-width: 1024px) {
|
||||
.section-header {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-header .section-heading,
|
||||
.section-header .section-intro {
|
||||
max-width: 32rem;
|
||||
justify-self: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-header .section-intro {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
/* Featured card takes the full width on tablet so it sits on its own
|
||||
row above the other two — keeps the emphasis without the asymmetric
|
||||
desktop grid. */
|
||||
.service-card-featured {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.services-intro {
|
||||
max-width: 34ch;
|
||||
}
|
||||
|
||||
.services-overview {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.services-overview-copy,
|
||||
.services-overview-panel {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.services-overview-copy {
|
||||
padding: 22px 18px;
|
||||
}
|
||||
|
||||
.services-overview-copy h3 {
|
||||
font-size: clamp(24px, 8vw, 31px);
|
||||
line-height: 1.06;
|
||||
}
|
||||
|
||||
.services-overview-copy p,
|
||||
.services-overview-panel {
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.services-overview-panel {
|
||||
padding: 18px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.services-overview-pills {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.services-overview-pill {
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.service-card-featured {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.service-card-body {
|
||||
padding: 40px 22px 24px;
|
||||
}
|
||||
@@ -524,10 +441,10 @@
|
||||
/* ── Reveal ── */
|
||||
:global(.reveal-ready.reveal-block) {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, var(--reveal-distance, 24px), 0);
|
||||
transform: translate3d(0, var(--reveal-distance, 16px), 0);
|
||||
transition:
|
||||
opacity 0.55s ease,
|
||||
transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
opacity 0.3s ease,
|
||||
transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
transition-delay: var(--reveal-delay, 0ms);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user