57 lines
		
	
	
		
			2.1 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			57 lines
		
	
	
		
			2.1 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<div class="relative isolate overflow-hidden h-screen bg-white">
 | 
						|
  <div class="flex flex-col justify-center items-center mx-auto max-w-2xl py-32 lg:py-48 text-center h-full">
 | 
						|
    <div class="text-center">
 | 
						|
      <img src="./images/logo.svg"
 | 
						|
     alt="Hero Image"
 | 
						|
     width="210"
 | 
						|
     height="210"
 | 
						|
     class="mx-auto rounded-md">
 | 
						|
 | 
						|
      <p class="text-base font-semibold leading-7 text-blue-600">WELCOME TO</p>
 | 
						|
        <div class="max-w-4xl">
 | 
						|
         <h1 class="mt-4 text-3xl lg:text-5xl font-bold leading-8 tracking-tight text-black mb-4">OurWorld Digital Freezone</h1>
 | 
						|
        </div>
 | 
						|
      <p class="mt-6 text-lg sm:text-xl leading-7 sm:leading-8 text-gray-600 font-light mx-4 sm:mx-0">ODFZ OurWorld Digital FreeZone is a collaboration between the Government of Zanzibar and OurWorld Venture Creator. We are the world's first 100% digital free zone, accessible and affordable for all. Removing complexity from doing business.</p>
 | 
						|
      <div class="mt-10 flex items-center justify-center gap-x-6">
 | 
						|
        <a href="/about" 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">
 | 
						|
            Get Started
 | 
						|
        </a>
 | 
						|
        
 | 
						|
        <a href="/about" class="rounded-xl border border-gray-800 px-4 py-2.5 font-medium text-gray-900 bg-transparent shadow-sm hover:bg-blue-700 hover:text-blue-700 transition-all duration-300">
 | 
						|
            Learn More →
 | 
						|
        </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>
 |