Add honeypot, spam protection to contact form

src/lib/components/ServicesSection.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { reveal } from '$lib/actions/reveal';
   import Icon from '$lib/components/Icon.svelte';
   import type { IconCard } from '$lib/types';
 
@@ -6,7 +7,7 @@
 
 </script>
 
-<section id="services">
+<section id="services" use:reveal={{ delay: 20 }} class="reveal-block">
   <div class="services-inner">
     <h2 class="section-heading">What we do</h2>
 
@@ -27,3 +28,49 @@
     </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>