diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/contact.svelte | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/src/components/contact.svelte b/src/components/contact.svelte new file mode 100644 index 0000000..c7b0be3 --- /dev/null +++ b/src/components/contact.svelte @@ -0,0 +1,46 @@ +<script lang="ts"> + export let address1: string; + export let address2: string; + export let address3: string; + export let email: string; + export let phone: string; + export let phoneHours: string; +</script> + +<section class="contact relative z-1"> + <div class="w-[calc(100%_-_2.5rem)] lg:w-[calc(100%_-_4rem)] mx-auto max-w-7xl"> + <div class="mb-8 lg:mb-12"> + <h1 class="text-center">Contact Us</h1> + </div> + + <div class="grid grid-cols-12 gap-8 lg:gap-12"> + <div class="col-span-12 lg:col-span-6"> + <dl class="details-list details-list--rows"> + <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between"> + <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">Address</dt> + <dd class="leading-snug lg:text-right"> + {address1}<br />{address2}<br />{address3} + </dd> + </div> + + <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between"> + <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">Email</dt> + <dd> + <a href="mailto:webmaster@example.com">{email}</a> + </dd> + </div> + + <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between"> + <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">Phone</dt> + <dd class="leading-snug lg:text-right"> + <p><a href="tel:+44 7656 6455">{phone}</a></p> + <p class="text-contrast-medium">{phoneHours}</p> + </dd> + </div> + </dl> + </div> + + <div class="rounded col-span-12 lg:col-span-6 lg:h-auto lg:pb-0" /> + </div> + </div> +</section> |