feature/services-pages (#7)

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

src/lib/components/ScheduleSection.svelte

@@ -1,27 +1,65 @@
 <script lang="ts">
     import ExternalLinkIcon from './Icon/ExternalLink.svelte';
+
+    const {
+        title,
+        subtitle,
+        bookingLinkTitle,
+        bookingLinkUrl = 'https://cal.mifi.ventures/the-mifi/30min',
+        showEmailLink = false,
+        showServicesLink = false,
+        sectionId = 'contact',
+        headingId = 'contact-heading',
+    }: {
+        title: string;
+        subtitle: string;
+        bookingLinkTitle: string;
+        bookingLinkUrl?: string;
+        showEmailLink?: boolean;
+        showServicesLink?: boolean;
+        sectionId?: string;
+        headingId?: string;
+    } = $props();
 </script>
 
-<section
-    id="schedule"
-    class="section schedule-section"
-    aria-labelledby="schedule-heading"
->
+<section id={sectionId} class="section schedule-section" aria-labelledby={headingId}>
     <div class="container">
-        <h2 id="schedule-heading" class="section-title">Let's Talk</h2>
-        <p class="schedule-text">Ready to discuss your project?</p>
-        <a
-            href="https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_medium=schedule_section_cta"
-            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="schedule section"
-        >
-            Schedule a 30-minute intro call
-            <ExternalLinkIcon aria-label="Opens in new tab" size={17} />
-        </a>
+        <h2 id={headingId} class="section-title">{title}</h2>
+        <p class="schedule-text">{subtitle}</p>
+        <div class="cta-group">
+            <a
+                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="contact section"
+            >
+                {bookingLinkTitle}
+                <ExternalLinkIcon aria-label="Opens in new tab" size={17} />
+            </a>
+            {#if showEmailLink}
+                <a
+                    href="mailto:hello@mifi.ventures"
+                    class="btn btn-secondary"
+                    data-umami-event="email"
+                    data-umami-event-location="contact section"
+                >
+                    Email me
+                </a>
+            {/if}
+            {#if showServicesLink}
+                <a
+                    href="/services"
+                    class="btn btn-secondary"
+                    data-umami-event="view services"
+                    data-umami-event-location="contact section"
+                >
+                    View services
+                </a>
+            {/if}
+        </div>
     </div>
 </section>
 
@@ -37,10 +75,23 @@
         font-weight: var(--font-weight-normal);
         color: var(--color-text-secondary);
         line-height: var(--line-height-relaxed);
-        max-width: 100%;
+        max-width: var(--max-text-width);
+        margin-left: auto;
+        margin-right: auto;
     }
 
-    .btn {
-        margin: 0 auto;
+    .cta-group {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-md);
+        justify-content: center;
+        align-items: center;
+    }
+
+    @media (max-width: 768px) {
+        .cta-group {
+            flex-direction: column;
+            width: 100%;
+        }
     }
 </style>