153 lines
3.7 KiB
Svelte
153 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import { reveal } from '$lib/actions/reveal';
|
|
import Icon from '$lib/components/Icon.svelte';
|
|
import type { IconCard } from '$lib/types';
|
|
|
|
export let services: IconCard[];
|
|
export let heading = 'What we do';
|
|
export let intro =
|
|
'Choose the walk style that fits your dog best, then book a free Meet & Greet when you are ready.';
|
|
|
|
const requestedServiceStorageKey = 'goodwalk_requested_service';
|
|
|
|
function bookingHref() {
|
|
return '#newlead';
|
|
}
|
|
|
|
function primeBookingService(serviceTitle: string) {
|
|
try {
|
|
window.sessionStorage.setItem(requestedServiceStorageKey, serviceTitle);
|
|
} catch {
|
|
// Ignore storage failures and continue with the link target.
|
|
}
|
|
|
|
window.dispatchEvent(
|
|
new CustomEvent('goodwalk:service-selected', {
|
|
detail: { service: serviceTitle }
|
|
})
|
|
);
|
|
}
|
|
|
|
</script>
|
|
|
|
<section id="services" use:reveal={{ delay: 20 }} class="reveal-block">
|
|
<div class="services-inner">
|
|
<h2 class="section-heading">{heading}</h2>
|
|
<p class="services-intro">{intro}</p>
|
|
|
|
<div class="services-grid">
|
|
{#each services as service}
|
|
<div class="service-card">
|
|
<div class="service-icon-bubble">
|
|
<Icon name={service.icon} className="service-card-icon" />
|
|
</div>
|
|
<h3>{service.title}</h3>
|
|
<p>{service.body}</p>
|
|
|
|
{#if service.priceFrom}
|
|
<p class="service-card-price">{service.priceFrom}</p>
|
|
{/if}
|
|
|
|
{#if service.href}
|
|
<div class="service-card-actions">
|
|
<a href={bookingHref()} class="btn btn-green" on:click={() => primeBookingService(service.title)}>
|
|
<span>Book {service.title}</span>
|
|
<Icon name="fas fa-arrow-right" />
|
|
</a>
|
|
|
|
<a href={service.href} class="service-card-link">
|
|
View details & pricing
|
|
</a>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
: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);
|
|
}
|
|
|
|
@media (hover: hover) and (min-width: 769px) {
|
|
:global(.reveal-visible.reveal-block) .service-card {
|
|
animation: service-card-settle 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
|
|
}
|
|
|
|
:global(.reveal-visible.reveal-block) .service-card:nth-child(1) {
|
|
animation-delay: 0.02s;
|
|
}
|
|
|
|
:global(.reveal-visible.reveal-block) .service-card:nth-child(2) {
|
|
animation-delay: 0.06s;
|
|
}
|
|
|
|
:global(.reveal-visible.reveal-block) .service-card:nth-child(3) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
}
|
|
|
|
@keyframes service-card-settle {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(6px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.services-intro {
|
|
max-width: 700px;
|
|
margin: 18px auto 0;
|
|
text-align: center;
|
|
color: #4c5056;
|
|
font-size: 17px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.service-card-actions {
|
|
display: grid;
|
|
gap: 12px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.service-card-actions :global(.btn) {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.service-card-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 28px;
|
|
color: var(--gw-green);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.service-card-link:hover {
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.18em;
|
|
}
|
|
}
|
|
|
|
</style>
|