mifi
7012f0fdd2
Reviewed-on: #7 Co-authored-by: mifi <badmf@mifi.dev> Co-committed-by: mifi <badmf@mifi.dev>
98 lines
2.8 KiB
Svelte
98 lines
2.8 KiB
Svelte
<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={sectionId} class="section schedule-section" aria-labelledby={headingId}>
|
|
<div class="container">
|
|
<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>
|
|
|
|
<style>
|
|
.schedule-section {
|
|
text-align: center;
|
|
background-color: var(--color-bg-subtle);
|
|
}
|
|
|
|
.schedule-text {
|
|
margin-bottom: var(--space-lg);
|
|
font-size: var(--font-size-large);
|
|
font-weight: var(--font-weight-normal);
|
|
color: var(--color-text-secondary);
|
|
line-height: var(--line-height-relaxed);
|
|
max-width: var(--max-text-width);
|
|
margin-left: auto;
|
|
margin-right: 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>
|