Add card shadow
MODIFY
src/components/contact/card.svelte
src/components/contact/card.svelte
}
</style>
-<div class="card text-center">
+<div class="card text-center shadow-xl">
<!-- TOOD: Display the image -->
<img
src="/images/contact/{contactCard.image}"
alt=""
role="presentation"
/>
- <h2>{contactCard.title}</h2>
+ <h3>{contactCard.title}</h3>
<p>{contactCard.description}</p>
<a href={contactCard.btnHref} class="btn btn-conversion m-8"
>{contactCard.btnText}</a

MODIFY
src/routes/contact.svelte
src/routes/contact.svelte
</p>
</header>
-<div class="cards double">
+<div class="cards double mx-8">
{#each contactCards as contactCard}
<Card {contactCard} />
{/each}
</div>
-<section class="card">
+<section class="card shadow-xl mb-32 mx-8">
<form on:submit|preventDefault={handleSubmit} novalidate>
<h3 class="text-center mb-8">Send us a message</h3>
<ul>
>
</li>
<li>
- <button
- type="submit"
- class="btn-conversion"
- disabled={isFormDirty && !isFormValid}>Send message</button
+ <button type="submit" class="btn" disabled={isFormDirty && !isFormValid}
+ >Send message</button
>
</li>
</ul>

Add card shadow