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

Onboarding / Deployment Scripts / Marketing updates

Browse Source
This commit is contained in:
admin
2026-05-11 21:02:24 +12:00
parent a90dfb7c66
commit 955a563d14
110 changed files with 9803 additions and 937 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/ServiceLandingPage.svelte
+91 -95
View File
@@ -3,7 +3,7 @@
import { reveal } from '$lib/actions/reveal';
import BookingSection from '$lib/components/BookingSection.svelte';
import TestimonialsSection from '$lib/components/TestimonialsSection.svelte';
import { getImageMetadata } from '$lib/image-metadata';
import { getEnhancedImage } from '$lib/enhanced-images';
import type { ServicePageContent, SiteSharedContent } from '$lib/types';
export let content: SiteSharedContent;
@@ -30,12 +30,12 @@
}));
}
$: heroImage = getImageMetadata(pageContent.hero.imageUrl);
$: highlightImage = pageContent.highlight ? getImageMetadata(pageContent.highlight.imageUrl) : null;
$: heroEnhanced = getEnhancedImage(pageContent.hero.imageUrl);
$: highlightEnhanced = pageContent.highlight ? getEnhancedImage(pageContent.highlight.imageUrl) : null;
$: highlightCollageImages =
pageContent.highlight?.collageImages?.map((image) => ({
...image,
meta: getImageMetadata(image.imageUrl)
enhanced: getEnhancedImage(image.imageUrl)
})) ?? [];
$: relatedServices = content.services.filter((s) => s.href && s.href !== currentPath);
$: pricingPlans = decoratePlans(pageContent.pricing.plans);
@@ -73,15 +73,23 @@
</div>
<div class="service-hero-media">
<img
src={pageContent.hero.imageUrl}
alt={pageContent.hero.imageAlt}
width={heroImage?.width}
height={heroImage?.height}
loading="eager"
fetchpriority="high"
decoding="async"
/>
{#if heroEnhanced}
<enhanced:img
src={heroEnhanced}
alt={pageContent.hero.imageAlt}
loading="eager"
fetchpriority="high"
decoding="async"
/>
{:else}
<img
src={pageContent.hero.imageUrl}
alt={pageContent.hero.imageAlt}
loading="eager"
fetchpriority="high"
decoding="async"
/>
{/if}
</div>
</div>
</section>
@@ -98,27 +106,31 @@
<div class="service-highlight-collage" aria-label={pageContent.highlight.title}>
{#each highlightCollageImages as image, index}
<figure class={`service-collage-card service-collage-card-${index + 1}`}>
<img
src={image.imageUrl}
alt={image.imageAlt}
width={image.meta?.width}
height={image.meta?.height}
loading="lazy"
decoding="async"
/>
{#if image.enhanced}
<enhanced:img src={image.enhanced} alt={image.imageAlt} loading="lazy" decoding="async" />
{:else}
<img src={image.imageUrl} alt={image.imageAlt} loading="lazy" decoding="async" />
{/if}
</figure>
{/each}
</div>
{:else}
<div class="service-highlight-image">
<img
src={pageContent.highlight.imageUrl}
alt={pageContent.highlight.imageAlt}
width={highlightImage?.width}
height={highlightImage?.height}
loading="lazy"
decoding="async"
/>
{#if highlightEnhanced}
<enhanced:img
src={highlightEnhanced}
alt={pageContent.highlight.imageAlt}
loading="lazy"
decoding="async"
/>
{:else}
<img
src={pageContent.highlight.imageUrl}
alt={pageContent.highlight.imageAlt}
loading="lazy"
decoding="async"
/>
{/if}
</div>
{/if}
</div>
@@ -172,7 +184,7 @@
Every booking starts with a free, no-obligation Meet &amp; Greet.
</p>
<a class="btn btn-yellow service-plan-mobile-cta" href="#newlead">Book a Meet &amp; Greet</a>
<a class="btn btn-yellow btn-mobile-center service-plan-mobile-cta" href="#newlead">Book a Meet &amp; Greet</a>
{#if pageContent.pricing.extras?.length}
<div class="service-extras">
@@ -246,7 +258,11 @@
</section>
{/if}
<TestimonialsSection heading={pageContent.testimonialsHeading} testimonials={content.testimonials} />
<TestimonialsSection
heading={pageContent.testimonialsHeading}
testimonials={content.testimonials}
seedKey={currentPath}
/>
<BookingSection booking={pageContent.booking} />
</main>
@@ -276,67 +292,26 @@
}
.service-related-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 28px 26px;
align-items: center;
text-align: center;
gap: 0;
padding: 34px 28px 30px;
border-radius: 28px;
background: #fff;
box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05);
background: var(--off-white);
box-shadow: 0 10px 28px rgba(17, 20, 24, 0.05);
color: #000;
text-decoration: none;
overflow: hidden;
transition:
transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.22s ease;
}
.service-related-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--card-accent, var(--yellow));
}
.service-related-tint-0 {
--card-accent: var(--yellow);
}
.service-related-tint-0 .service-related-icon {
background: #fff3c6;
color: #5a4500;
}
.service-related-tint-1 {
--card-accent: var(--gw-green);
}
.service-related-tint-1 .service-related-icon {
background: #dce6dc;
color: var(--gw-green);
}
.service-related-tint-2 {
--card-accent: #c98a3f;
}
.service-related-tint-2 .service-related-icon {
background: #efe4d1;
color: var(--gw-green);
}
.service-related-tint-3 {
--card-accent: #9ca3af;
}
.service-related-tint-3 .service-related-icon {
background: #f3f4f6;
color: #4b5563;
}
@media (hover: hover) {
.service-related-card:hover {
transform: translateY(-6px) scale(1.012);
box-shadow: 0 20px 40px rgba(17, 20, 24, 0.09);
box-shadow: 0 18px 38px rgba(17, 20, 24, 0.1);
}
}
@@ -348,19 +323,22 @@
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
width: 72px;
height: 72px;
border-radius: 50%;
background: #efe4d1;
background: linear-gradient(180deg, #ffe173 0%, #ffd54a 100%);
color: var(--gw-green);
font-size: 18px;
margin-bottom: 8px;
font-size: 28px;
margin-bottom: 22px;
box-shadow:
inset 0 0 0 1px rgba(17, 20, 24, 0.05),
0 10px 24px rgba(17, 20, 24, 0.08);
}
.service-related-card h3 {
margin: 0;
margin: 0 0 10px;
font-family: var(--font-head);
font-size: 22px;
font-size: 20px;
line-height: 1.2;
}
@@ -368,37 +346,44 @@
margin: 0;
color: #34363a;
font-size: 15px;
line-height: 1.55;
line-height: 1.65;
}
.service-related-meta {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
}
.service-related-price {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: rgba(33, 48, 33, 0.06);
font-family: var(--font-head);
font-weight: 700;
color: var(--gw-green);
font-size: 14px;
letter-spacing: 0.02em;
}
.service-related-pill {
display: inline-block;
padding: 4px 12px;
padding: 6px 14px;
border-radius: 999px;
background: #f3f4f6;
color: #4b5563;
background: rgba(33, 48, 33, 0.06);
color: var(--gw-green);
font-family: var(--font-head);
font-size: 12px;
font-weight: 600;
font-weight: 700;
letter-spacing: 0.02em;
}
.service-related-link {
margin-top: auto;
padding-top: 6px;
margin-top: 18px;
color: var(--gw-green);
font-family: var(--font-head);
font-weight: 700;
@@ -418,9 +403,20 @@
margin: 0;
font-family: var(--font-head);
font-size: clamp(34px, 4vw, 56px);
color: #000;
}
.service-hero-copy h1 {
line-height: 1.05;
letter-spacing: -0.04em;
color: #000;
}
.service-section-heading h2,
.service-highlight-copy h2 {
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.03em;
text-wrap: balance;
}
.service-hero-copy p,
@@ -834,7 +830,7 @@
gap: 24px;
}
.service-plan-popular {
.service-plan-card {
order: var(--mobile-order, 0);
}