feature/services-pages (#7)

Reviewed-on: #7
Co-authored-by: mifi <badmf@mifi.dev>
Co-committed-by: mifi <badmf@mifi.dev>

src/lib/components/Hero.svelte

@@ -1,41 +1,58 @@
 <script lang="ts">
-    import ExternalLinkIcon from './Icon/ExternalLink.svelte';
-    import FiletypePdfIcon from './Icon/FiletypePdf.svelte';
-    import Logo from './Logo.svelte';
+    import ExternalLinkIcon from '$lib/components/Icon/ExternalLink.svelte';
+
+    interface SecondaryCta {
+        href: string;
+        label: string;
+        umamiEventLabel: string;
+    }
+
+    const {
+        title,
+        subtitle,
+        bookingLinkTitle,
+        bookingLinkUrl,
+        secondaryCta,
+    }: {
+        title: string;
+        subtitle: string;
+        bookingLinkTitle: string;
+        bookingLinkUrl: string;
+        secondaryCta?: SecondaryCta;
+    } = $props();
 </script>
 
 <header id="header" class="hero">
     <div class="container">
-        <Logo />
-        <p class="headline">Software Engineering Consulting</p>
-        <p class="subhead">
-            Principal: Mike Fitzpatrick — senior full-stack engineer and architect helping
-            teams ship reliable, accessible, high-performance web products.
+        <h1 class="title">
+            {title}
+        </h1>
+        <p class="subtitle">
+            {subtitle}
         </p>
         <div class="cta-group">
             <a
-                href="https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_medium=hero_cta"
+                href={bookingLinkUrl}
                 class="btn btn-primary icon-button"
                 target="_blank"
                 rel="noopener noreferrer"
-                aria-label="Schedule a 30-minute intro call (opens in new tab)"
-                data-umami-event="schedule call"
-                data-umami-event-location="hero section"
+                aria-label={`${bookingLinkTitle} (opens in new tab)`}
+                data-umami-event="book discovery call"
+                data-umami-event-location="hero"
             >
-                Schedule a 30-minute intro call
+                {bookingLinkTitle}
                 <ExternalLinkIcon aria-label="Opens in new tab" size={17} />
             </a>
-            <a
-                href="/downloads/resume.pdf"
-                class="btn btn-secondary icon-button"
-                download
-                aria-label="Download Mike Fitzpatrick's resume as PDF"
-                data-umami-event="download resume"
-                data-umami-event-location="hero section"
-            >
-                Download resume
-                <FiletypePdfIcon aria-label="PDF format file" size={17} />
-            </a>
+            {#if secondaryCta}
+                <a
+                    href={secondaryCta.href}
+                    class="btn btn-secondary"
+                    data-umami-event={secondaryCta.umamiEventLabel}
+                    data-umami-event-location="hero"
+                >
+                    {secondaryCta.label}
+                </a>
+            {/if}
         </div>
     </div>
 </header>
@@ -46,26 +63,20 @@
         text-align: center;
         background-color: var(--color-bg);
         border-bottom: 1px solid var(--color-border);
-
-        @media (max-width: 768px) {
-            padding: var(--space-xxl) 0 var(--space-xl) 0;
-        }
-
-        @media (max-width: 480px) {
-            padding: var(--space-xl) 0 var(--space-lg) 0;
-        }
     }
 
-    .headline {
+    .title {
         margin-bottom: var(--space-lg);
         font-family: var(--font-family-heading);
-        font-size: var(--font-size-xl);
-        font-weight: var(--font-weight-semibold);
-        color: var(--color-text);
-        letter-spacing: -0.02em;
+        font-size: var(--font-size-xxl);
+        font-weight: var(--font-weight-bold);
+        letter-spacing: -0.03em;
+        max-width: var(--max-text-width);
+        margin-left: auto;
+        margin-right: auto;
     }
 
-    .subhead {
+    .subtitle {
         max-width: var(--max-narrow-width);
         margin: 0 auto var(--space-xl) auto;
         font-size: var(--font-size-large);
@@ -81,8 +92,10 @@
         justify-content: center;
         align-items: center;
         margin-top: var(--space-lg);
+    }
 
-        @media (max-width: 768px) {
+    @media (max-width: 768px) {
+        .cta-group {
             flex-direction: column;
             width: 100%;
         }