123 lines
2.7 KiB
Svelte
123 lines
2.7 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import Icon from '$lib/components/Icon.svelte';
|
||
|
|
|
||
|
|
export let eyebrow = 'Get in touch';
|
||
|
|
export let title: string;
|
||
|
|
export let description: string;
|
||
|
|
export let ctaHref: string;
|
||
|
|
export let ctaLabel: string;
|
||
|
|
export let email: string | undefined = undefined;
|
||
|
|
export let phone: string | undefined = undefined;
|
||
|
|
export let phoneHref: string | undefined = undefined;
|
||
|
|
export let showIcons = false;
|
||
|
|
|
||
|
|
$: resolvedPhoneHref = phoneHref ?? (phone ? `tel:${phone.replace(/[^0-9+]/g, '')}` : undefined);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="cta-card">
|
||
|
|
<span class="cta-card__eyebrow">{eyebrow}</span>
|
||
|
|
<h2>{title}</h2>
|
||
|
|
<p class="cta-card__desc">{description}</p>
|
||
|
|
<a class="btn btn-yellow btn-mobile-center cta-card__btn" href={ctaHref}>{ctaLabel}</a>
|
||
|
|
{#if email || phone}
|
||
|
|
<div class="cta-card__links">
|
||
|
|
{#if email}
|
||
|
|
<a class="cta-card__link" href="mailto:{email}">
|
||
|
|
{#if showIcons}<Icon name="fas fa-envelope" />{/if}
|
||
|
|
{email}
|
||
|
|
</a>
|
||
|
|
{/if}
|
||
|
|
{#if phone && resolvedPhoneHref}
|
||
|
|
<a class="cta-card__link" href={resolvedPhoneHref}>
|
||
|
|
{#if showIcons}<Icon name="fas fa-phone" />{/if}
|
||
|
|
{phone}
|
||
|
|
</a>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.cta-card {
|
||
|
|
background: var(--gw-green);
|
||
|
|
color: #fff;
|
||
|
|
border-radius: 28px;
|
||
|
|
padding: 56px 48px;
|
||
|
|
text-align: center;
|
||
|
|
box-shadow: 0 20px 48px rgba(33, 48, 33, 0.18);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-card__eyebrow {
|
||
|
|
display: inline-block;
|
||
|
|
margin-bottom: 14px;
|
||
|
|
padding: 7px 12px;
|
||
|
|
border-radius: 999px;
|
||
|
|
background: rgba(255, 255, 255, 0.14);
|
||
|
|
color: #fff;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 800;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-card h2 {
|
||
|
|
margin: 0 0 10px;
|
||
|
|
font-family: var(--font-head);
|
||
|
|
font-size: clamp(28px, 3vw, 42px);
|
||
|
|
font-weight: 800;
|
||
|
|
line-height: 1.08;
|
||
|
|
letter-spacing: -0.03em;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-card__desc {
|
||
|
|
max-width: 460px;
|
||
|
|
margin: 0 auto 28px;
|
||
|
|
color: rgba(255, 255, 255, 0.75);
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-card__btn {
|
||
|
|
display: flex;
|
||
|
|
width: fit-content;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-card__links {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 32px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin-top: 22px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-card__link {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
color: rgba(255, 255, 255, 0.72);
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: 500;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: color 0.18s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-card__link:hover {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.cta-card {
|
||
|
|
padding: 36px 24px;
|
||
|
|
border-radius: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-card__links {
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
gap: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|