Testimonails and Introscript updates

This commit is contained in:
2026-05-03 11:16:53 +12:00
parent 751c2d7e98
commit f27e0fed07
13 changed files with 191 additions and 23 deletions
+16 -4
View File
@@ -10,9 +10,21 @@
<div id="intro">
<div class="intro-inner">
<div class="intro-trust-badge">
<div class="intro-trust-mark" aria-hidden="true">
<Icon name="fab fa-google" />
</div>
<a
class="intro-trust-mark intro-trust-mark-link"
href={intro.reviewCta.href}
target="_blank"
rel="noopener"
aria-label="Read our Google reviews"
>
<img
class="intro-google-logo"
src="/images/google-g-logo.svg"
alt=""
width="28"
height="29"
/>
</a>
<div class="intro-trust-copy">
<p>{intro.text}</p>
@@ -24,7 +36,7 @@
{/each}
</div>
<a href={intro.reviewCta.href} target="_blank" rel="noopener">
<a class="intro-trust-cta" href={intro.reviewCta.href} target="_blank" rel="noopener">
{intro.reviewCta.label}
</a>
</div>
+1 -1
View File
@@ -67,7 +67,7 @@
<div class="modal-divider"></div>
<p class="modal-sub">
In the meantime, feel free to follow along on Instagram for daily walks and happy dogs.
In the meantime, feel free to follow along on Instagram for daily walks and happy dogs!
</p>
<button class="modal-btn" type="button" on:click={onClose}>
@@ -8,9 +8,9 @@
export let testimonials: TestimonialContent[];
export let heading = 'Why people choose us!';
export let blurb =
'Real dogs, real routines, trusted by happy owners. Follow along on Instagram to see the Tiny Gang out on their daily adventures.';
"Happy owners, even happier dogs. Our Auckland dog walking clients love what the Tiny Gang brings to their dog's routine — and you can see why. Follow along on Instagram for daily adventures, wagging tails and the odd zoomie";
export let instagramHref = 'https://www.instagram.com/goodwalk.nz/';
export let instagramLabel = '@goodwalk.nz';
export let instagramLabel = 'goodwalk.nz';
type TestimonialSlide = TestimonialContent & { imageUrl: string };
+2 -2
View File
@@ -50,8 +50,8 @@ export const homepageContent: HomePageContent = {
title: 'Happy pets,',
subtitle: 'happy humans',
body:
'Offering tailored pack walks for small and medium dogs, and one-on-one walks for large breeds. Our walkers give personalised attention to each dog, easing stress, anxiety and ensuring a quality experience. Our expertise in small-medium breeds ensures tailored care for their unique needs. Join our',
emphasis: 'TINY GANG!',
'Professional dog walking services in Auckland for small, medium and large breeds. Our experienced walkers provide tailored pack walks for smaller dogs and one-on-one walks for larger breeds - giving every dog the personalised attention they deserve. We specialise in understanding the unique needs of small-to-medium breeds, helping to ease stress and anxiety while keeping tails wagging. Ready to join our',
emphasis: 'TINY GANG?',
cta: { label: 'Book now', href: '#newlead', variant: 'green' },
imageUrl: '/images/auckland-dog-walking-happy-dogs-happy-humans.webp',
imageAlt: 'Woman cuddling a dog for Goodwalk Auckland dog walking services'
+5 -1
View File
@@ -299,6 +299,10 @@
font-size: 21px;
}
.intro-google-logo {
width: 24px;
}
#intro p {
font-size: 17px;
line-height: 1.45;
@@ -312,7 +316,7 @@
gap: 10px;
}
#intro a {
.intro-trust-cta {
gap: 8px;
padding: 8px 14px;
font-size: 15px;
+70 -2
View File
@@ -67,6 +67,7 @@ section {
.intro-trust-mark {
display: inline-flex;
position: relative;
align-items: center;
justify-content: center;
width: 56px;
@@ -75,9 +76,50 @@ section {
background: #fff;
color: #e00706;
font-size: 24px;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(14, 27, 41, 0.08);
}
.intro-trust-mark-link {
text-decoration: none;
isolation: isolate;
transition:
transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.22s ease;
}
.intro-trust-mark-link::after {
content: '';
position: absolute;
inset: -30% 35%;
background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.92) 50%, rgba(255, 255, 255, 0.2) 70%, transparent 100%);
transform: translateX(-220%) rotate(18deg);
opacity: 0;
pointer-events: none;
animation: introGoogleShine 4.8s ease-in-out infinite;
}
.intro-trust-mark-link:hover,
.intro-trust-mark-link:focus-visible {
transform: translateY(-1px) scale(1.04);
box-shadow:
inset 0 0 0 1px rgba(14, 27, 41, 0.08),
0 10px 24px rgba(17, 20, 24, 0.12);
}
.intro-trust-mark-link:focus-visible {
outline: 2px solid rgba(10, 48, 78, 0.28);
outline-offset: 3px;
}
.intro-google-logo {
display: block;
position: relative;
z-index: 1;
width: 28px;
height: auto;
}
.intro-trust-copy {
min-width: 0;
}
@@ -107,7 +149,7 @@ section {
font-size: 14px;
}
#intro a {
.intro-trust-cta {
display: inline-flex;
align-items: center;
gap: 8px;
@@ -121,11 +163,37 @@ section {
box-shadow: inset 0 0 0 1px rgba(14, 27, 41, 0.08);
}
#intro a .icon {
.intro-trust-cta .icon {
color: #e00706;
font-size: 20px;
}
@keyframes introGoogleShine {
0%,
64%,
100% {
transform: translateX(-220%) rotate(18deg);
opacity: 0;
}
72% {
opacity: 1;
}
84% {
transform: translateX(220%) rotate(18deg);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.intro-trust-mark-link,
.intro-trust-mark-link::after {
animation: none;
transition: none;
}
}
#promise,
#testimonials,
#info {