Initial commit

2026-05-02 08:26:18 +12:00
commit b7ea05f150
119 changed files with 13641 additions and 0 deletions
@@ -0,0 +1,112 @@
+<script lang="ts">
+  import BookingSection from '$lib/components/BookingSection.svelte';
+  import Icon from '$lib/components/Icon.svelte';
+  import type { BookingContent } from '$lib/types';
+
+  export let booking: BookingContent;
+
+  const email = 'info@goodwalk.co.nz';
+  const phone = '(022) 642 1011';
+</script>
+
+<main class="booking-page">
+  <section class="booking-page-hero">
+    <div class="booking-page-inner">
+      <h1>Book a Meet &amp; Greet</h1>
+      <p class="booking-page-sub">Fill in the form below and we'll be in touch to arrange a free introduction.</p>
+      <div class="booking-page-contact">
+        <a href="mailto:{email}" class="booking-contact-link">
+          <Icon name="fas fa-envelope" />
+          {email}
+        </a>
+        <a href="tel:{phone.replace(/[^0-9+]/g, '')}" class="booking-contact-link">
+          <Icon name="fas fa-phone" />
+          {phone}
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <BookingSection {booking} />
+</main>
+
+<style>
+  .booking-page {
+    background: var(--off-white);
+  }
+
+  .booking-page-hero {
+    background: var(--green);
+    color: #fff;
+    padding: 64px 0 72px;
+  }
+
+  .booking-page-inner {
+    max-width: var(--max-w);
+    margin: 0 auto;
+    padding: 0 50px;
+    text-align: center;
+  }
+
+  .booking-page-hero h1 {
+    margin: 0 0 14px;
+    font-family: var(--font-head);
+    font-size: clamp(32px, 4vw, 52px);
+    line-height: 1.05;
+    letter-spacing: -0.04em;
+    color: #fff;
+  }
+
+  .booking-page-sub {
+    margin: 0 auto 32px;
+    max-width: 480px;
+    font-size: 16px;
+    line-height: 1.6;
+    opacity: 0.8;
+  }
+
+  .booking-page-contact {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 24px;
+    flex-wrap: wrap;
+  }
+
+  .booking-contact-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.12);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    font-size: 14px;
+    font-weight: 600;
+    color: #fff;
+    transition: background 0.2s;
+  }
+
+  .booking-contact-link:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  @media (max-width: 768px) {
+    .booking-page-hero {
+      padding: 48px 0 56px;
+    }
+
+    .booking-page-inner {
+      padding: 0 24px;
+    }
+
+    .booking-page-contact {
+      gap: 12px;
+    }
+
+    .booking-contact-link {
+      font-size: 13px;
+      padding: 9px 16px;
+    }
+  }
+</style>