|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Aquahive Sea Port | Premium Port Services for Aquapod Colony</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@400;600;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #005f8f; |
|
|
--secondary: #0088cc; |
|
|
--accent: #00b4ff; |
|
|
--light: #f0f9ff; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
background-color: #f8fafc; |
|
|
} |
|
|
|
|
|
.title-font { |
|
|
font-family: 'Playfair Display', serif; |
|
|
} |
|
|
|
|
|
.wave-bg { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
overflow: hidden; |
|
|
line-height: 0; |
|
|
transform: rotate(180deg); |
|
|
} |
|
|
|
|
|
.wave-bg svg { |
|
|
position: relative; |
|
|
display: block; |
|
|
width: calc(100% + 1.3px); |
|
|
height: 150px; |
|
|
} |
|
|
|
|
|
.wave-bg .shape-fill { |
|
|
fill: #f0f9ff; |
|
|
} |
|
|
|
|
|
.service-card { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
|
|
border-radius: 12px; |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 15px 20px rgba(0, 180, 255, 0.1); |
|
|
} |
|
|
|
|
|
.harmony { |
|
|
border-left: 4px solid #48bb78; |
|
|
background: linear-gradient(to right, rgba(72, 187, 120, 0.05), white); |
|
|
} |
|
|
|
|
|
.industry { |
|
|
border-left: 4px solid #f6ad55; |
|
|
background: linear-gradient(to right, rgba(246, 173, 85, 0.05), white); |
|
|
} |
|
|
|
|
|
.diligence { |
|
|
border-left: 4px solid #4299e1; |
|
|
background: linear-gradient(to right, rgba(66, 153, 225, 0.05), white); |
|
|
} |
|
|
|
|
|
.notification-bell { |
|
|
animation: ring 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes ring { |
|
|
0% { transform: rotate(0deg); } |
|
|
5% { transform: rotate(15deg); } |
|
|
10% { transform: rotate(-15deg); } |
|
|
15% { transform: rotate(15deg); } |
|
|
20% { transform: rotate(-15deg); } |
|
|
25% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(0deg); } |
|
|
} |
|
|
|
|
|
.nfc-badge { |
|
|
background: linear-gradient(135deg, #005f8f 0%, #00b4ff 100%); |
|
|
box-shadow: 0 4px 15px rgba(0, 180, 255, 0.3); |
|
|
} |
|
|
|
|
|
.schedule-card { |
|
|
background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%); |
|
|
border: 1px solid rgba(0, 180, 255, 0.2); |
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%); |
|
|
box-shadow: 0 4px 6px rgba(0, 180, 255, 0.2); |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%); |
|
|
} |
|
|
|
|
|
.hero-image { |
|
|
object-fit: cover; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav class="bg-white shadow-lg sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-20"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-anchor text-blue-500 mr-2 text-xl"></i> |
|
|
<span class="title-font text-xl font-semibold text-gray-900">Aquahive Sea Port</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
|
|
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-blue-600 border-b-2 border-blue-500">Home</a> |
|
|
<a href="#about" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600">About</a> |
|
|
<a href="#services" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600">Services</a> |
|
|
<a href="#nfc" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600">NFC Access</a> |
|
|
<a href="#schedule" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600">Schedule</a> |
|
|
<a href="#contact" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600">Contact</a> |
|
|
<a href="#" class="px-4 py-2 rounded-md text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 transition duration-300"> |
|
|
<i class="fas fa-user-circle mr-1"></i> Resident Portal |
|
|
</a> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center md:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-blue-600 hover:bg-gray-100 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden hidden" id="mobile-menu"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white"> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-600 bg-blue-50">Home</a> |
|
|
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">About</a> |
|
|
<a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">Services</a> |
|
|
<a href="#nfc" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">NFC Access</a> |
|
|
<a href="#schedule" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">Schedule</a> |
|
|
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">Contact</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-blue-500 hover:bg-blue-600"> |
|
|
<i class="fas fa-user-circle mr-1"></i> Resident Portal |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="relative bg-gradient-to-r from-blue-900 to-blue-700 overflow-hidden"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32"> |
|
|
<div class="pt-16 sm:pt-24 lg:pt-16 lg:pb-14 lg:overflow-hidden"> |
|
|
<div class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28"> |
|
|
<div class="sm:text-center lg:text-left"> |
|
|
<h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl title-font"> |
|
|
<span class="block">Aquahive Sea Port</span> |
|
|
<span class="block text-blue-200">Elevated Maritime Services</span> |
|
|
</h1> |
|
|
<p class="mt-3 text-base text-blue-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> |
|
|
Premium port services for Aquapod Colony residents. MMSI 338514619 | Registered 12/22/2024 | FCC Registered |
|
|
</p> |
|
|
<div class="mt-8 sm:mt-10 sm:flex sm:justify-center lg:justify-start"> |
|
|
<div class="rounded-md shadow"> |
|
|
<a href="#services" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50 md:py-4 md:text-lg md:px-10 transition duration-300"> |
|
|
<i class="fas fa-ship mr-2"></i> Explore Services |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-3 sm:mt-0 sm:ml-3"> |
|
|
<a href="#schedule" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10 transition duration-300"> |
|
|
<i class="far fa-calendar-alt mr-2"></i> Schedule Visit |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> |
|
|
<img class="hero-image" src="AquahiveSeaPort.PNG" alt="Aquahive Sea Port with Aquapod Colony with modern facilities"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-16 bg-white" id="about"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">About Aquahive</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl title-font"> |
|
|
Premier Port Services for Aquapod Colony |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
|
Combining maritime efficiency with premium hospitality for our distinguished residents. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12"> |
|
|
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> |
|
|
<div class="relative bg-gray-50 p-6 rounded-lg"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> |
|
|
<i class="fas fa-ship text-xl"></i> |
|
|
</div> |
|
|
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Strategic Maritime Hub</p> |
|
|
<p class="mt-2 ml-16 text-base text-gray-500"> |
|
|
Aquahive Sea Port serves as the primary maritime gateway for Aquapod Colony, offering direct access to global shipping lanes with premium amenities. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative bg-gray-50 p-6 rounded-lg"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> |
|
|
<i class="fas fa-shield-alt text-xl"></i> |
|
|
</div> |
|
|
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Enhanced Security Protocols</p> |
|
|
<p class="mt-2 ml-16 text-base text-gray-500"> |
|
|
Our concierge-level security includes 24/7 monitoring, biometric access, and dedicated security personnel to ensure complete peace of mind. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative bg-gray-50 p-6 rounded-lg"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> |
|
|
<i class="fas fa-bolt text-xl"></i> |
|
|
</div> |
|
|
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Streamlined Operations</p> |
|
|
<p class="mt-2 ml-16 text-base text-gray-500"> |
|
|
The proprietary slip assignment system ensures rapid processing with personalized service for all resident deliveries. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative bg-gray-50 p-6 rounded-lg"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> |
|
|
<i class="fas fa-concierge-bell text-xl"></i> |
|
|
</div> |
|
|
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Concierge Services</p> |
|
|
<p class="mt-2 ml-16 text-base text-gray-500"> |
|
|
Our dedicated port concierge team provides white-glove service for all maritime needs, from delivery coordination to vessel services. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-blue-50 py-16" id="services"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Port Services</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl title-font"> |
|
|
Slip Drop Shipment Assignments |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
|
Our tiered service system ensures personalized delivery solutions |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="service-card harmony"> |
|
|
<div class="px-6 py-7"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-green-100 rounded-md p-3"> |
|
|
<i class="fas fa-spa text-green-600 text-2xl"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Harmony Tier</h3> |
|
|
<p class="mt-1 text-sm text-gray-500">Residential Slips A100-A500</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-5"> |
|
|
<p class="text-sm text-gray-600"> |
|
|
Premium residential service with priority handling, climate-controlled storage, and personal delivery coordination. |
|
|
</p> |
|
|
<div class="mt-6"> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800"> |
|
|
<i class="fas fa-clock mr-1"></i> 96-hour storage |
|
|
</span> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 ml-2"> |
|
|
<i class="fas fa-concierge-bell mr-1"></i> Concierge service |
|
|
</span> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<ul class="space-y-2 text-sm text-gray-600"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
|
|
<span>Personal delivery coordinator</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
|
|
<span>Climate-controlled storage options</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
|
|
<span>Priority customs clearance</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card industry"> |
|
|
<div class="px-6 py-7"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-yellow-100 rounded-md p-3"> |
|
|
<i class="fas fa-industry text-yellow-600 text-2xl"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Industry Tier</h3> |
|
|
<p class="mt-1 text-sm text-gray-500">Commercial Slips B100-B500</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-5"> |
|
|
<p class="text-sm text-gray-600"> |
|
|
Comprehensive commercial solutions with bulk handling, dedicated loading teams, and expedited processing. |
|
|
</p> |
|
|
<div class="mt-6"> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"> |
|
|
<i class="fas fa-pallet mr-1"></i> Bulk storage |
|
|
</span> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 ml-2"> |
|
|
<i class="fas fa-truck-loading mr-1"></i> Dedicated docks |
|
|
</span> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<ul class="space-y-2 text-sm text-gray-600"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> |
|
|
<span>24/7 loading bay access</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> |
|
|
<span>Customs brokerage services</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> |
|
|
<span>Dedicated freight handlers</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card diligence"> |
|
|
<div class="px-6 py-7"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-blue-100 rounded-md p-3"> |
|
|
<i class="fas fa-tools text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Diligence Tier</h3> |
|
|
<p class="mt-1 text-sm text-gray-500">Service Slips C100-C500</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-5"> |
|
|
<p class="text-sm text-gray-600"> |
|
|
Specialized service for essential operations with priority routing, technical support, and secure storage solutions. |
|
|
</p> |
|
|
<div class="mt-6"> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> |
|
|
<i class="fas fa-bolt mr-1"></i> Priority processing |
|
|
</span> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 ml-2"> |
|
|
<i class="fas fa-lock mr-1"></i> Secure storage |
|
|
</span> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<ul class="space-y-2 text-sm text-gray-600"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-500 mt-1 mr-2"></i> |
|
|
<span>Emergency response protocols</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-500 mt-1 mr-2"></i> |
|
|
<span>Technical support teams</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-500 mt-1 mr-2"></i> |
|
|
<span>Hazardous materials handling</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 bg-white shadow overflow-hidden sm:rounded-lg"> |
|
|
<div class="px-6 py-5 border-b border-gray-200"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900"> |
|
|
Slip Assignment Portal |
|
|
</h3> |
|
|
<p class="mt-1 text-sm text-gray-500"> |
|
|
Access your personalized slip information and delivery status |
|
|
</p> |
|
|
</div> |
|
|
<div class="px-6 py-6"> |
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2"> |
|
|
<div> |
|
|
<label for="prefecture" class="block text-sm font-medium text-gray-700">Prefecture</label> |
|
|
<select id="prefecture" name="prefecture" class="mt-1 block w-full pl-3 pr-10 py-3 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md border"> |
|
|
<option>Select your prefecture</option> |
|
|
<option>North Aquapod</option> |
|
|
<option>South Aquapod</option> |
|
|
<option>East Aquapod</option> |
|
|
<option>West Aquapod</option> |
|
|
<option>Central Aquapod</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="tier" class="block text-sm font-medium text-gray-700">Service Tier</label> |
|
|
<select id="tier" name="tier" class="mt-1 block w-full pl-3 pr-10 py-3 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md border"> |
|
|
<option>Select your service tier</option> |
|
|
<option>Harmony</option> |
|
|
<option>Industry</option> |
|
|
<option>Diligence</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<label for="residence-id" class="block text-sm font-medium text-gray-700">Residence ID</label> |
|
|
<input type="text" name="residence-id" id="residence-id" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md border py-3 px-4" placeholder="Enter your residence ID"> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex items-center"> |
|
|
<input id="terms-check" name="terms-check" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
|
|
<label for="terms-check" class="ml-2 block text-sm text-gray-900"> |
|
|
I authorize Aquahive Sea Port to access my delivery records |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<button type="button" class="btn-primary inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300"> |
|
|
<i class="fas fa-search mr-2"></i> Retrieve Slip Information |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-16 bg-white" id="nfc"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Resident Access</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl title-font"> |
|
|
NFC Port Access System |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
|
Seamless, secure access for Aquapod Colony residents |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center"> |
|
|
<div class="relative"> |
|
|
<div class="nfc-badge rounded-2xl p-8 max-w-md mx-auto text-white"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold">Aquapod Colony</h3> |
|
|
<p class="text-blue-100 text-sm mt-1">Resident Access Badge</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-full p-2 text-blue-600"> |
|
|
<i class="fas fa-wifi text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 flex justify-center"> |
|
|
<div class="bg-white rounded-full p-4 text-blue-600"> |
|
|
<i class="fas fa-ship text-4xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-blue-100 text-xs">RESIDENT ID</p> |
|
|
<p class="font-mono">APC-338514619</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="text-blue-100 text-xs">TIER</p> |
|
|
<p class="font-medium">HARMONY</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 pt-4 border-t border-blue-300 flex justify-between"> |
|
|
<div> |
|
|
<p class="text-blue-100 text-xs">ISSUED</p> |
|
|
<p class="text-sm">12/22/2024</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="text-blue-100 text-xs">EXPIRES</p> |
|
|
<p class="text-sm">12/22/2025</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10 lg:mt-0"> |
|
|
<div class="space-y-8"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> |
|
|
<i class="fas fa-mobile-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Mobile Integration</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Your NFC access is integrated with the Aquapod Colony mobile app, allowing digital badge functionality on your smartphone. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> |
|
|
<i class="fas fa-fingerprint"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Biometric Verification</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
All NFC access points include optional biometric verification for enhanced security when accessing restricted areas. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Real-time Notifications</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Receive instant notifications on your mobile device whenever your NFC badge is used to access port facilities. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<a href="#" class="btn-primary inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300"> |
|
|
<i class="fas fa-id-card mr-2"></i> Request NFC Access Badge |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-blue-50 py-16" id="schedule"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Port Visits</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl title-font"> |
|
|
Arrival & Departure Scheduling |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
|
Reserve your preferred time slots for port access and tender services |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-8"> |
|
|
<div class="schedule-card rounded-xl p-8"> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-6">Schedule Your Visit</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<label for="visit-purpose" class="block text-sm font-medium text-gray-700">Visit Purpose</label> |
|
|
<select id="visit-purpose" name="visit-purpose" class="mt-1 block w-full pl-3 pr-10 py-3 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md border"> |
|
|
<option>Select purpose</option> |
|
|
<option>Delivery Pickup</option> |
|
|
<option>Package Drop-off</option> |
|
|
<option>Vessel Arrival</option> |
|
|
<option>Vessel Departure</option> |
|
|
<option>Tender Services</option> |
|
|
<option>Port Services</option> |
|
|
<option>Other Business</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2"> |
|
|
<div> |
|
|
<label for="arrival-date" class="block text-sm font-medium text-gray-700">Arrival Date</label> |
|
|
<input type="date" id="arrival-date" name="arrival-date" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md border py-3 px-4"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="arrival-time" class="block text-sm font-medium text-gray-700">Preferred Time</label> |
|
|
<select id="arrival-time" name="arrival-time" class="mt-1 block w-full pl-3 pr-10 py-3 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md border"> |
|
|
<option>Select time slot</option> |
|
|
<option>06:00 - 08:00</option> |
|
|
<option>08:00 - 10:00</option> |
|
|
<option>10:00 - 12:00</option> |
|
|
<option>12:00 - 14:00</option> |
|
|
<option>14:00 - 16:00</option> |
|
|
<option>16:00 - 18:00</option> |
|
|
<option>18:00 - 20:00</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="estimated-duration" class="block text-sm font-medium text-gray-700">Estimated Duration</label> |
|
|
<select id="estimated-duration" name="estimated-duration" class="mt-1 block w-full pl-3 pr-10 py-3 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md border"> |
|
|
<option>Select duration</option> |
|
|
<option>30 minutes</option> |
|
|
<option>1 hour</option> |
|
|
<option>2 hours</option> |
|
|
<option>3 hours</option> |
|
|
<option>4+ hours</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="special-requests" class="block text-sm font-medium text-gray-700">Special Requests</label> |
|
|
<textarea id="special-requests" name="special-requests" rows="3" class="mt-1 shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border border-gray-300 rounded-md p-3" placeholder="Dock assistance, equipment needs, tender requirements, etc."></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<input id="nfc-check" name="nfc-check" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
|
|
<label for="nfc-check" class="ml-2 block text-sm text-gray-900"> |
|
|
I will be using my NFC access badge |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<button type="button" class="btn-primary w-full flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300"> |
|
|
<i class="far fa-calendar-check mr-2"></i> Confirm Reservation |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10 lg:mt-0"> |
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="p-6 bg-blue-800 text-white"> |
|
|
<h3 class="text-xl font-bold">Port Schedule Guidelines</h3> |
|
|
<p class="mt-2 text-blue-100">Important information for your visit</p> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<h4 class="text-lg font-medium text-gray-900">Operating Hours</h4> |
|
|
<p class="mt-2 text-sm text-gray-600"> |
|
|
Main Port: 06:00 - 20:00 daily<br> |
|
|
VIP Lounge: 08:00 - 18:00 by appointment<br> |
|
|
Cargo Operations: 24/7 with prior authorization<br> |
|
|
Tender Services: 07:00 - 19:00 (extended hours available) |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-medium text-gray-900">Peak Times</h4> |
|
|
<p class="mt-2 text-sm text-gray-600"> |
|
|
Weekdays 10:00-12:00 and 14:00-16:00 tend to be busiest. For faster service, consider scheduling during off-peak hours. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-medium text-gray-900">Required Documentation</h4> |
|
|
<ul class="mt-2 text-sm text-gray-600 space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-500 mt-1 mr-2"></i> |
|
|
<span>Valid Aquapod Colony ID</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-500 mt-1 mr-2"></i> |
|
|
<span>NFC access badge or mobile app</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-500 mt-1 mr-2"></i> |
|
|
<span>Commercial invoices for cargo</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-500 mt-1 mr-2"></i> |
|
|
<span>Tender service requests (if applicable)</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-medium text-gray-900">Cancellation Policy</h4> |
|
|
<p class="mt-2 text-sm text-gray-600"> |
|
|
Please cancel or reschedule at least 12 hours before your appointment. Repeated no-shows may result in scheduling restrictions. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-500 text-sm font-medium"> |
|
|
<i class="fas fa-file-pdf mr-1"></i> Download Complete Port Guidelines (PDF) |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-blue-900 text-white py-16"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-blue-300 font-semibold tracking-wide uppercase">Why Choose Aquahive</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl title-font"> |
|
|
Premium Port Advantages |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-blue-200 lg:mx-auto"> |
|
|
The Aquapod Colony standard for maritime services |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10"> |
|
|
<div class="relative bg-blue-800 p-6 rounded-lg"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-white text-blue-800"> |
|
|
<i class="fas fa-tachometer-alt text-xl"></i> |
|
|
</div> |
|
|
<p class="ml-16 text-lg leading-6 font-medium text-white">Expedited Processing</p> |
|
|
<p class="mt-2 ml-16 text-base text-blue-200"> |
|
|
Our tiered slip system reduces wait times by 40% compared to conventional port operations. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative bg-blue-800 p-6 rounded-lg"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-white text-blue-800"> |
|
|
<i class="fas fa-lock text-xl"></i> |
|
|
|
|
|
</html> |
