gw-svelte/src/lib/components/ServicesSection.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[];

</script>

<section id="services" use:reveal={{ delay: 20 }} class="reveal-block">
  <div class="services-inner">
    <h2 class="section-heading">What we do</h2>

    <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}
            <a href={service.href} class="btn btn-green">
              Learn more<span class="visually-hidden"> about {service.title}</span>
            </a>
          {/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);
    }
  }
</style>