56 lines
		
	
	
		
			2.3 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			56 lines
		
	
	
		
			2.3 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!-- Hero Section -->
 | 
						|
<div 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">COMPANY LICENSE PRESALE</h2>
 | 
						|
              <p class="mt-2 text-3xl font-bold tracking-tight text-black sm:text-4xl">🚀 Secure Your Spot with a Special Offer Price</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">Be among the first to secure your company license with our exclusive presale offer at a special price. Embrace the future of digital entrepreneurship with OurWorld FreeZone and kickstart your business journey with unprecedented advantages.
 | 
						|
                </p>
 | 
						|
              </div>
 | 
						|
              <div class="mt-10 flex lg:gap-x-6 gap-x-3">
 | 
						|
                <a href="/about" class="rounded-xl bg-blue-700 px-4 py-2.5 lg:text-base text-sm font-semibold text-white shadow-sm hover:bg-blue-800 hover:text-blue-200 transition-colors duration-300">
 | 
						|
                    Join Presale
 | 
						|
                </a>
 | 
						|
                
 | 
						|
                <a href="/about" class="rounded-xl border border-gray-800 border-r-2 px-4 py-2.5 font-medium text-gray-900 bg-transparent hover:bg-white hover:text-blue-700 transition-all duration-300">
 | 
						|
                    Learn More →
 | 
						|
                </a>
 | 
						|
            </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>
 | 
						|
   |