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

Design language tweaks v3

Browse Source
This commit is contained in:
ponzischeme89
2026-05-15 16:27:39 +12:00
parent 580d600c47
commit b950229003
14 changed files with 2746 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/PricingPage.svelte
+116 -51
View File
@@ -14,14 +14,12 @@
let showMeetGreetPrompt = false;
let dismissMeetGreetPrompt = false;
let bookingInView = false;
let promptShown = false;
let canShowDesktopPrompt = false;
const desktopPromptMediaQuery = '(min-width: 769px)';
const scrollDepthThreshold = 0.65;
function revealMeetGreetPrompt() {
if (dismissMeetGreetPrompt || bookingInView || promptShown || !canShowDesktopPrompt) {
if (dismissMeetGreetPrompt || promptShown || !canShowDesktopPrompt) {
return;
}
@@ -39,7 +37,7 @@
dismissMeetGreetPrompt = true;
}
$: if ((!canShowDesktopPrompt || bookingInView) && showMeetGreetPrompt) {
$: if (!canShowDesktopPrompt && showMeetGreetPrompt) {
showMeetGreetPrompt = false;
}
@@ -51,42 +49,27 @@
canShowDesktopPrompt = event.matches;
};
const firstPricingSection = document.querySelector<HTMLElement>('.pricing-section');
const handleScroll = () => {
if (promptShown || dismissMeetGreetPrompt || bookingInView || !canShowDesktopPrompt) {
if (promptShown || dismissMeetGreetPrompt || !canShowDesktopPrompt || !firstPricingSection) {
return;
}
const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
if (scrollableHeight <= 0) return;
const scrollPercent = window.scrollY / scrollableHeight;
if (scrollPercent >= scrollDepthThreshold) {
const firstSectionBottom = firstPricingSection.getBoundingClientRect().bottom;
if (firstSectionBottom <= 0) {
revealMeetGreetPrompt();
}
};
window.addEventListener('scroll', handleScroll, { passive: true });
const bookingSection = document.getElementById('newlead');
const bookingObserver = bookingSection
? new IntersectionObserver(
([entry]) => {
bookingInView = entry.isIntersecting;
},
{ threshold: 0.2 }
)
: null;
if (bookingObserver && bookingSection) {
bookingObserver.observe(bookingSection);
}
desktopPromptQuery.addEventListener('change', handleDesktopPromptViewportChange);
handleScroll();
return () => {
window.removeEventListener('scroll', handleScroll);
desktopPromptQuery.removeEventListener('change', handleDesktopPromptViewportChange);
bookingObserver?.disconnect();
};
});
</script>
@@ -174,7 +157,7 @@
testimonials={content.testimonials}
seedKey="/our-pricing"
/>
<BookingSection booking={pageContent.booking} />
<BookingSection booking={pageContent.booking} variant="card-stepper" />
{#if showMeetGreetPrompt}
<aside class="meet-greet-prompt" aria-label="Free meet and greet reminder">
@@ -183,16 +166,36 @@
</button>
<div class="meet-greet-copy">
<span class="meet-greet-kicker">
<Icon name="fas fa-comment-dots" />
Free Meet & Greet
</span>
<div class="meet-greet-top">
<span class="meet-greet-kicker">
<Icon name="fas fa-comment-dots" />
Free Meet & Greet
</span>
<div class="meet-greet-profile" aria-label="Aless from Goodwalk">
<img
class="meet-greet-avatar"
src="/images/founder-image-aless-goodwalk.jpg"
alt="Aless from Goodwalk"
width="52"
height="52"
/>
<div class="meet-greet-profile-copy">
<strong>Talk it through with Aless</strong>
<span>Founder, Goodwalk</span>
</div>
</div>
</div>
<p>
Not sure which option fits best? We can talk it through together and make sure your dog ends up happy.
Not sure which option fits best? Aless can help you choose the right walk or visit for your dog, routine, and temperament.
</p>
</div>
<a class="meet-greet-cta" href="#newlead" on:click={handleMeetGreetCta}>Book a Meet &amp; Greet</a>
<a class="meet-greet-cta" href="#newlead" on:click={handleMeetGreetCta}>
<span>Book a Meet &amp; Greet</span>
<Icon name="fas fa-arrow-right" />
</a>
</aside>
{/if}
</main>
@@ -276,8 +279,8 @@
height: 56px;
margin-bottom: 16px;
border-radius: 16px;
background: var(--gw-green);
color: #fff;
background: linear-gradient(135deg, var(--gw-green), var(--green-mid));
color: var(--yellow);
font-size: 22px;
}
@@ -304,6 +307,8 @@
.pricing-plan-grid-three {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: calc(((var(--max-w) - (var(--space-container-x) * 2) - (22px * 3)) / 4 * 3) + (22px * 2));
margin-inline: auto;
}
.pricing-section-mobile-cta,
@@ -317,23 +322,30 @@
bottom: 24px;
z-index: 30;
display: flex;
align-items: flex-end;
flex-direction: column;
gap: 18px;
width: min(420px, calc(100vw - 32px));
padding: 18px 18px 18px 20px;
border-radius: 28px;
width: min(430px, calc(100vw - 32px));
padding: 20px;
border-radius: 30px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 243, 232, 0.98));
radial-gradient(circle at top right, rgba(255, 209, 0, 0.12), rgba(255, 209, 0, 0) 34%),
linear-gradient(180deg, rgba(251, 251, 251, 0.98), rgba(247, 248, 246, 0.98));
box-shadow:
0 20px 40px rgba(17, 20, 24, 0.16),
0 0 0 1px rgba(17, 20, 24, 0.06);
0 20px 40px rgba(17, 20, 24, 0.14),
inset 0 0 0 1px rgba(17, 20, 24, 0.06);
animation: meet-greet-rise 0.28s cubic-bezier(0.22, 1, 0.36, 1);
backdrop-filter: blur(10px);
}
.meet-greet-copy {
min-width: 0;
flex: 1;
}
.meet-greet-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.meet-greet-kicker {
@@ -355,22 +367,69 @@
font-size: 12px;
}
.meet-greet-profile {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 8px 10px 8px 8px;
border-radius: 18px;
background: rgba(33, 48, 33, 0.05);
box-shadow: inset 0 0 0 1px rgba(33, 48, 33, 0.07);
}
.meet-greet-avatar {
width: 52px;
height: 52px;
border-radius: 16px;
object-fit: cover;
object-position: center top;
flex: 0 0 auto;
box-shadow:
0 8px 20px rgba(17, 20, 24, 0.12),
inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.meet-greet-profile-copy {
display: flex;
flex-direction: column;
min-width: 0;
}
.meet-greet-profile-copy strong {
color: #16181d;
font-family: var(--font-head);
font-size: 12px;
font-weight: 700;
line-height: 1.3;
}
.meet-greet-profile-copy span {
color: #59606d;
font-size: 12px;
line-height: 1.35;
}
.meet-greet-copy p {
margin: 0;
margin: 14px 0 0;
color: #2f3134;
font-size: 15px;
line-height: 1.55;
}
.meet-greet-cta {
flex-shrink: 0;
align-self: center;
padding: 12px 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 18px;
border-radius: 999px;
background: var(--yellow);
background: linear-gradient(135deg, #ffd54a, var(--yellow-soft));
color: #111;
font-family: var(--font-head);
font-size: 14px;
font-weight: 700;
text-decoration: none;
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);
transition:
@@ -401,7 +460,7 @@
@media (hover: hover) {
.meet-greet-cta:hover {
transform: translateY(-2px);
background: #ffd100;
background: linear-gradient(135deg, #ffdc66, #f4c94f);
box-shadow:
inset 0 -2px 0 rgba(0, 0, 0, 0.08),
0 12px 24px rgba(17, 20, 24, 0.12);
@@ -434,6 +493,7 @@
.pricing-plan-grid,
.pricing-plan-grid-three {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: none;
}
}
@@ -470,6 +530,7 @@
.pricing-plan-grid-three {
grid-template-columns: 1fr;
gap: 18px;
max-width: none;
}
.pricing-section-mobile-cta {
@@ -518,13 +579,17 @@
left: 16px;
bottom: 16px;
width: auto;
flex-direction: column;
align-items: stretch;
gap: 14px;
padding: 18px 18px 16px;
border-radius: 28px;
}
.meet-greet-top {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.meet-greet-copy p {
font-size: 14px;
line-height: 1.5;
@@ -532,7 +597,7 @@
}
.meet-greet-cta {
align-self: flex-start;
width: 100%;
}
}
</style>