60 lines
2.6 KiB
HTML
60 lines
2.6 KiB
HTML
<!-- Hero Section -->
|
|
<div id="contact" class="relative bg-white">
|
|
<div class="mx-auto max-w-7xl px-4 grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-8 items-start pt-24 mt-12 pb-12">
|
|
<!-- Right Column (Text Section) -->
|
|
<div class="relative sm:py-24 lg:py-12 lg:px-8 px-4">
|
|
<div class="max-w-xl mx-auto">
|
|
<h2 class="text-base font-semibold leading-7 text-blue-600">CONTACT</h2>
|
|
<p class="mt-2 text-3xl font-bold tracking-tight text-black sm:text-4xl">Get in Touch</p>
|
|
<div class="mt-4 font-light text-lg leading-7 tracking-tight text-gray-600">
|
|
<p class="text-base font-light lg:text-xl text-gray-600 mb-10 mt-6">The Zanzibar Digital Free Zone (ZDFZ) platform is coming alive. In the meantime, we invite you to get in touch with any comments, questions, or collaboration opportunities. We are here to help!
|
|
</p>
|
|
</div>
|
|
<div class="mt-10 flex lg:gap-x-6 gap-x-3">
|
|
<dl class=" space-y-4 text-base leading-7 text-gray-600">
|
|
<div class="flex gap-x-4">
|
|
<dt class="flex-none">
|
|
<span class="sr-only">Email</span>
|
|
<svg class="h-7 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
|
|
</svg>
|
|
</dt>
|
|
<dd><a class="hover:text-gray-600" href="mailto:info@ourworld.tf"><u>info@ourworld.tf</u></a></dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Left Column (Image Section) -->
|
|
<div class="relative overflow-hidden lg:h-full">
|
|
<div class="image-container">
|
|
<img class="object-cover w-full h-full rounded-md mx-1" src="/images/presale.jpg" alt="Image description">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.image-container {
|
|
position: relative;
|
|
left: 0;
|
|
width: 90%;
|
|
height: 90%;
|
|
}
|
|
|
|
.image-container::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 90%;
|
|
height: 90%;
|
|
}
|
|
|
|
/* Reset margin and padding for the entire page if needed */
|
|
body, html {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
|