admin/gw-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design language tweaks, improvements

Browse Source
This commit is contained in:
admin
2026-05-13 20:44:01 +12:00
parent de8b60b9c3
commit baafafabdb
22 changed files with 1302 additions and 998 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/LocationPage.svelte
+19 -111
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import { sharedServices } from '$lib/content/services';
import { reveal } from '$lib/actions/reveal';
import CtaCard from '$lib/components/CtaCard.svelte';
import Icon from '$lib/components/Icon.svelte';
import { getEnhancedImage } from '$lib/enhanced-images';
import { getSeededTestimonialIndex } from '$lib/testimonials';
@@ -55,7 +56,7 @@
<!-- ── Hero ── -->
<section class="loc-hero">
<div class="loc-inner">
<div class="page-inner">
<span class="loc-hero-eyebrow">Auckland Central Dog Walking</span>
<h1>Dog walkers in {location.suburb}</h1>
<p class="loc-hero-desc">{location.intro}</p>
@@ -80,7 +81,7 @@
</section>
<section class="loc-highlights" aria-label={`Goodwalk highlights in ${location.suburb}`}>
<div class="loc-inner">
<div class="page-inner">
<div class="loc-highlights-grid">
{#each locationHighlights as highlight}
<div class="loc-highlight-card">
@@ -100,7 +101,7 @@
<!-- ── Parks ── -->
<section use:reveal={{ delay: 30 }} class="loc-parks reveal-block">
<div class="loc-inner">
<div class="page-inner">
<div class="loc-section-header">
<span class="loc-eyebrow">Where we walk</span>
<h2>Parks &amp; walks in {location.suburb}</h2>
@@ -125,7 +126,7 @@
{#if parksWithImages.length > 0}
<section use:reveal={{ delay: 30 }} class="loc-gallery reveal-block">
<div class="loc-inner">
<div class="page-inner">
<div class="loc-section-header">
<span class="loc-eyebrow">Local parks</span>
<h2>Park photos from {location.suburb}</h2>
@@ -158,7 +159,7 @@
<!-- ── Services ── -->
<section use:reveal={{ delay: 30 }} class="loc-services reveal-block">
<div class="loc-inner">
<div class="page-inner">
<div class="loc-section-header">
<span class="loc-eyebrow">What we offer</span>
<h2>Goodwalk services in {location.suburb}</h2>
@@ -184,7 +185,7 @@
<!-- ── Testimonial ── -->
{#if featuredTestimonial}
<section use:reveal={{ delay: 30 }} class="loc-review reveal-block">
<div class="loc-inner">
<div class="page-inner">
<div class="loc-review-card">
<span class="loc-review-stars" aria-hidden="true">★★★★★</span>
<blockquote class="loc-review-quote">"{featuredTestimonial.quote}"</blockquote>
@@ -201,19 +202,16 @@
<!-- ── CTA ── -->
<section use:reveal={{ delay: 30 }} class="loc-cta reveal-block">
<div class="loc-inner">
<div class="loc-cta-card">
<span class="loc-cta-eyebrow">Get in touch</span>
<h2>Ready to get started in {location.suburb}?</h2>
<p class="loc-cta-desc">
A free Meet &amp; Greet is the first step — no commitment, no pressure. We meet your dog, answer your questions, and see if Goodwalk is the right fit.
</p>
<a class="btn btn-yellow btn-mobile-center loc-cta-btn" href="/contact-us">Book a free Meet &amp; Greet</a>
<div class="loc-cta-links">
<a class="loc-cta-link" href="mailto:info@goodwalk.co.nz">info@goodwalk.co.nz</a>
<a class="loc-cta-link" href="tel:+64226421011">(022) 642 1011</a>
</div>
</div>
<div class="page-inner">
<CtaCard
title="Ready to get started in {location.suburb}?"
description="A free Meet & Greet is the first step — no commitment, no pressure. We meet your dog, answer your questions, and see if Goodwalk is the right fit."
ctaHref="/contact-us"
ctaLabel="Book a free Meet & Greet"
email="info@goodwalk.co.nz"
phone="(022) 642 1011"
phoneHref="tel:+64226421011"
/>
</div>
</section>
@@ -224,16 +222,9 @@
background: var(--off-white);
}
.loc-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 50px;
}
/* ── Eyebrow ── */
.loc-eyebrow,
.loc-hero-eyebrow,
.loc-cta-eyebrow {
.loc-hero-eyebrow {
display: inline-block;
margin-bottom: 14px;
padding: 7px 12px;
@@ -250,8 +241,7 @@
box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.05);
}
.loc-hero-eyebrow,
.loc-cta-eyebrow {
.loc-hero-eyebrow {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
@@ -696,74 +686,6 @@
padding: 0 0 88px;
}
.loc-cta-card {
background: var(--gw-green);
color: #fff;
border-radius: 28px;
padding: 56px 48px;
text-align: center;
box-shadow: 0 20px 48px rgba(33, 48, 33, 0.18);
}
.loc-cta-card h2 {
margin: 0 0 10px;
font-family: var(--font-head);
font-size: clamp(26px, 3vw, 40px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.03em;
color: #fff;
}
.loc-cta-desc {
max-width: 460px;
margin: 0 auto 28px;
color: rgba(255, 255, 255, 0.75);
font-size: 16px;
line-height: 1.6;
}
.loc-cta-btn {
display: flex;
width: fit-content;
margin: 0 auto;
}
.loc-cta-links {
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
margin-top: 22px;
}
.loc-cta-link {
color: rgba(255, 255, 255, 0.72);
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: color 0.18s ease;
}
.loc-cta-link:hover {
color: #fff;
}
/* ── 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);
}
/* ── Tablet ── */
@media (max-width: 1024px) {
.loc-highlights-grid,
@@ -775,10 +697,6 @@
/* ── Mobile ── */
@media (max-width: 768px) {
.loc-inner {
padding: 0 24px;
}
.loc-hero {
padding: 56px 0 48px;
}
@@ -849,15 +767,5 @@
padding-bottom: 60px;
}
.loc-cta-card {
padding: 36px 24px;
border-radius: 24px;
}
.loc-cta-links {
flex-direction: column;
align-items: center;
gap: 14px;
}
}
</style>