52 lines
2.1 KiB
HTML
52 lines
2.1 KiB
HTML
<div class="relative isolate overflow-hidden h-screen">
|
|
<video autoplay loop muted playsinline class="absolute z-0 w-full h-full object-cover">
|
|
<source src="/videos/zanzibar.mp4" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
<div class="absolute inset-0 bg-black opacity-40 z-0"></div>
|
|
<div class="flex flex-col justify-center items-center mx-auto max-w-2xl py-32 text-center h-full relative z-10">
|
|
<div class="text-center">
|
|
<p class="text-base font-semibold leading-7 text-blue-600 hero-subtitle">WELCOME TO</p>
|
|
<div class="max-w-4xl">
|
|
<h1 class="mt-4 text-3xl lg:text-5xl font-bold leading-8 tracking-tight text-white mb-4 hero-title">Zanzibar Digital Free Zone</h1>
|
|
</div>
|
|
<p class="mt-6 text-lg sm:text-xl leading-7 sm:leading-8 text-white font-light mx-4 sm:mx-0">The Zanzibar Digital Free Zone is a collaboration between the Revolutionary Government of Zanzibar (through ZICTIA) and OurWorld Venture Creator. We are the world's first 100% digital free zone, accessible and affordable for all. Removing complexity from doing business.<br/><br/>Launching Soon.</p>
|
|
<div class="mt-10 flex items-center justify-center">
|
|
<a href="#contact" class="rounded-xl bg-blue-700 px-4 py-2.5 font-semibold text-white shadow-sm hover:bg-blue-800 hover:text-blue-200 transition-colors duration-300 hero-button">
|
|
Get Started
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.relative.isolate.overflow-hidden.h-screen {
|
|
height: 100vh;
|
|
}
|
|
|
|
|
|
/* Custom styles for smaller font, margin adjustments, and line spacing for mobile */
|
|
@media (max-width: 640px) {
|
|
h1 {
|
|
font-size: 2rem; /* Smaller font for mobile */
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.25rem; /* Smaller font for mobile */
|
|
}
|
|
|
|
p {
|
|
font-size: 1rem; /* Smaller font for mobile */
|
|
margin-left: 1rem; /* Margin left for mobile */
|
|
margin-right: 1rem; /* Margin right for mobile */
|
|
line-height: 1.5; /* Smaller line spacing */
|
|
}
|
|
}
|
|
</style>
|