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

Design Language tweaks

Browse Source
This commit is contained in:
ponzischeme89
2026-05-15 01:28:10 +12:00
parent baafafabdb
commit 580d600c47
52 changed files with 3465 additions and 1548 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/TestimonialsSection.svelte
+93 -43
View File
@@ -8,10 +8,10 @@
export let testimonials: TestimonialContent[];
export let eyebrow = '30+ five-star reviews';
export let heading = 'Proof your dog is in good hands';
export let blurb = 'Peace of mind for busy Auckland dog owners. Happier dogs, smoother routines, and a team owners trust with the important stuff.';
export let instagramHref = 'https://www.instagram.com/goodwalk.nz/';
export let instagramLabel = 'goodwalk.nz';
export let heading = 'What owners notice first';
export let blurb = 'Happier dogs. Calmer evenings. A routine that feels easier to trust and easier to keep.';
export let testimonialsHref = '/testimonials';
export let googleReviewsHref = 'https://g.page/r/CUsvrWPhkYrAEB0/';
export let seedKey = '';
type TestimonialSlide = TestimonialContent & { imageUrl: string };
@@ -265,12 +265,7 @@
</button>
</div>
<a
class="testimonial-google"
href="https://g.page/r/CUsvrWPhkYrAEB0/"
target="_blank"
rel="noopener"
>
<a class="testimonial-google" href={googleReviewsHref} target="_blank" rel="noopener">
<img
class="testimonial-google-logo"
src="/images/google-g-logo.svg"
@@ -296,10 +291,19 @@
</div>
{/if}
<a href={instagramHref} target="_blank" rel="noopener" class="testimonials-instagram-link">
<Icon name="fab fa-instagram" />
<span>{instagramLabel}</span>
</a>
<div class="testimonials-cta-row">
<a href={testimonialsHref} class="testimonials-cta testimonials-cta-primary">
<Icon name="fas fa-comment-dots" />
<span class="testimonials-cta-label-desktop">All testimonials</span>
<span class="testimonials-cta-label-mobile">Testimonials</span>
</a>
<a href={googleReviewsHref} target="_blank" rel="noopener" class="testimonials-cta testimonials-cta-secondary">
<img class="testimonials-cta-logo" src="/images/google-g-logo.svg" alt="" width="16" height="17" />
<span class="testimonials-cta-label-desktop">Google reviews</span>
<span class="testimonials-cta-label-mobile">Google</span>
</a>
</div>
</div>
</section>
@@ -328,45 +332,77 @@
.testimonials-intro p {
margin: 0;
color: #4c5056;
font-size: 17px;
font-size: var(--body-lead-size);
line-height: 1.65;
}
.testimonials-instagram-link {
display: flex;
width: fit-content;
.testimonials-cta-row {
display: grid;
grid-template-columns: repeat(2, max-content);
align-items: center;
gap: 10px;
margin: 18px auto 0;
padding: 10px 16px;
justify-content: center;
width: fit-content;
max-width: 100%;
gap: 12px;
margin: 22px auto 0;
}
.testimonials-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 42px;
padding: 9px 16px;
border-radius: 999px;
background: rgba(33, 48, 33, 0.06);
color: var(--gw-green);
font-weight: 700;
flex-shrink: 0;
text-decoration: none;
box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.06);
font-size: 14px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
transition:
transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
background 0.2s ease,
box-shadow 0.2s ease;
}
:global(.testimonials-instagram-link .icon) {
font-size: 18px;
.testimonials-cta-primary {
background: var(--gw-green);
color: #fff;
box-shadow: 0 10px 24px rgba(33, 48, 33, 0.16);
}
.testimonials-cta-secondary {
background: rgba(33, 48, 33, 0.06);
color: var(--gw-green);
box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.06);
}
.testimonials-cta-logo {
flex: 0 0 auto;
}
.testimonials-cta-label-mobile {
display: none;
}
@media (hover: hover) {
.testimonials-instagram-link:hover {
.testimonials-cta:hover {
transform: translateY(-2px);
}
.testimonials-cta-primary:hover {
box-shadow: 0 14px 30px rgba(33, 48, 33, 0.2);
}
.testimonials-cta-secondary:hover {
background: rgba(33, 48, 33, 0.09);
box-shadow:
inset 0 0 0 1px rgba(17, 20, 24, 0.06),
0 10px 22px rgba(17, 20, 24, 0.08);
}
}
.testimonials-instagram-link:active {
transform: translateY(1px) scale(0.985);
}
.testimonials-carousel {
@@ -387,14 +423,28 @@
}
.testimonials-intro p {
font-size: 15px;
font-size: var(--body-lead-size-mobile);
line-height: 1.55;
}
.testimonials-instagram-link {
margin: 14px auto 0;
padding: 9px 14px;
font-size: 15px;
.testimonials-cta-row {
gap: 8px;
margin-top: 16px;
}
.testimonials-cta {
min-height: 38px;
padding: 8px 10px;
font-size: 11px;
gap: 7px;
}
.testimonials-cta-label-desktop {
display: none;
}
.testimonials-cta-label-mobile {
display: inline;
}
}
@@ -672,7 +722,7 @@
@media (max-width: 767px) {
.testimonials-carousel {
margin-top: 32px;
margin-top: 26px;
padding: 0;
}
@@ -708,7 +758,7 @@
.testimonial-photo-wrap {
justify-content: center;
padding: 48px 22px 16px;
padding: 34px 20px 12px;
}
.testimonial-photo-frame {
@@ -720,7 +770,7 @@
}
.testimonial-copy {
padding: 8px 28px 32px;
padding: 4px 24px 24px;
align-self: start;
}
@@ -744,7 +794,7 @@
justify-content: flex-end;
width: 100%;
gap: 12px;
margin-top: 20px;
margin-top: 16px;
}
.testimonial-arrow-inline {
@@ -765,7 +815,7 @@
}
.testimonial-google {
margin-top: 20px;
margin-top: 16px;
font-size: 16px;
gap: 10px;
padding: 10px 14px;
@@ -776,8 +826,8 @@
}
.testimonial-woof {
top: 24px;
right: 22px;
top: 16px;
right: 18px;
}
.testimonial-woof-text {