Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Aquapod Colony | Hive of Activity - Prefecture Edition</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;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #f0f8ff; | |
| color: #1a365d; | |
| scroll-behavior: smooth; | |
| } | |
| .title-font { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #0077be 0%, #00b4d8 50%, #90e0ef 100%); | |
| } | |
| .wave-shape { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| overflow: hidden; | |
| line-height: 0; | |
| } | |
| .wave-shape svg { | |
| position: relative; | |
| display: block; | |
| width: calc(100% + 1.3px); | |
| height: 150px; | |
| } | |
| .wave-shape .shape-fill { | |
| fill: #f0f8ff; | |
| } | |
| .aquapod-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 10px 15px -3px rgba(0, 119, 190, 0.1); | |
| } | |
| .aquapod-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 119, 190, 0.2); | |
| } | |
| .feature-icon { | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background-color: rgba(0, 180, 216, 0.1); | |
| margin-bottom: 1rem; | |
| } | |
| .marine-bg { | |
| background-color: #1a365d; | |
| } | |
| .ocean-text { | |
| color: #0077be; | |
| } | |
| .honeycomb { | |
| display: flex; | |
| flex-wrap: wrap; | |
| width: 600px; | |
| margin: 0 auto; | |
| overflow: hidden; | |
| padding: 20px 0; | |
| } | |
| .honeycomb-cell { | |
| position: relative; | |
| width: 200px; | |
| height: 173.21px; | |
| margin: 0 -30px 0; | |
| clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); | |
| transition: all 0.3s ease; | |
| } | |
| .honeycomb-cell:hover { | |
| transform: scale(1.1); | |
| z-index: 10; | |
| } | |
| .honeycomb-cell__content { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| padding: 10px; | |
| box-sizing: border-box; | |
| } | |
| .honeycomb-cell__title { | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| font-size: 1.2rem; | |
| } | |
| .honeycomb-cell__description { | |
| font-size: 0.8rem; | |
| } | |
| .tier-1 { | |
| background-color: #90e0ef; | |
| } | |
| .tier-2 { | |
| background-color: #00b4d8; | |
| color: white; | |
| } | |
| .tier-3 { | |
| background-color: #0077be; | |
| color: white; | |
| } | |
| .aqua-oasis { | |
| background-color: #1a365d; | |
| color: white; | |
| } | |
| .honeycomb-container { | |
| position: relative; | |
| width: 100%; | |
| display: flex; | |
| justify-content: center; | |
| margin: 40px 0; | |
| } | |
| .honeycomb-legend { | |
| display: flex; | |
| justify-content: center; | |
| margin: 20px 0; | |
| gap: 20px; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .legend-color { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 4px; | |
| } | |
| /* 3D card effect */ | |
| .card-3d { | |
| transform-style: preserve-3d; | |
| transition: transform 0.5s ease; | |
| } | |
| .card-3d:hover { | |
| transform: rotateY(10deg) rotateX(5deg) translateY(-5px); | |
| } | |
| /* Floating button */ | |
| .floating-btn { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background-color: #0077be; | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 4px 20px rgba(0, 119, 190, 0.3); | |
| cursor: pointer; | |
| z-index: 100; | |
| transition: all 0.3s ease; | |
| } | |
| .floating-btn:hover { | |
| transform: scale(1.1); | |
| background-color: #005f9e; | |
| } | |
| .floating-btn i { | |
| font-size: 24px; | |
| } | |
| /* Modal */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| z-index: 200; | |
| overflow-y: auto; | |
| } | |
| .modal-content { | |
| background-color: white; | |
| margin: 5% auto; | |
| padding: 30px; | |
| border-radius: 10px; | |
| width: 80%; | |
| max-width: 800px; | |
| position: relative; | |
| animation: modalopen 0.5s; | |
| } | |
| @keyframes modalopen { | |
| from {opacity: 0; transform: translateY(-50px);} | |
| to {opacity: 1; transform: translateY(0);} | |
| } | |
| .close-btn { | |
| position: absolute; | |
| top: 15px; | |
| right: 15px; | |
| font-size: 24px; | |
| cursor: pointer; | |
| color: #777; | |
| } | |
| .close-btn:hover { | |
| color: #333; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-honeycomb text-3xl ocean-text mr-2"></i> | |
| <span class="title-font text-xl font-semibold ocean-text">Aquapod Hive</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#home" class="nav-link text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium">Home</a> | |
| <a href="#structure" class="nav-link text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium">Hive Structure</a> | |
| <a href="#tiers" class="nav-link text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium">Prefecture Tiers</a> | |
| <a href="#benefits" class="nav-link text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium">Benefits</a> | |
| <a href="#contact" class="nav-link text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium">Contact</a> | |
| </div> | |
| <div class="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-900 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> | |
| <!-- Mobile menu --> | |
| <div class="hidden md:hidden bg-white shadow-lg" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-900 hover:bg-gray-50">Home</a> | |
| <a href="#structure" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-900 hover:bg-gray-50">Hive Structure</a> | |
| <a href="#tiers" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-900 hover:bg-gray-50">Prefecture Tiers</a> | |
| <a href="#benefits" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-900 hover:bg-gray-50">Benefits</a> | |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-900 hover:bg-gray-50">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient pt-24 pb-32 relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8"> | |
| <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center"> | |
| <div> | |
| <h1 class="mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl title-font"> | |
| <span class="block">Aquapod Hive</span> | |
| <span class="block">Prefecture Edition</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"> | |
| Experience the future of sustainable ocean living with our innovative hexagonal prefecture system, inspired by nature's perfect design. | |
| </p> | |
| <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> | |
| <div class="rounded-md shadow"> | |
| <a href="#structure" 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"> | |
| Explore Hive Structure | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center"> | |
| <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md card-3d"> | |
| <div class="relative block w-full bg-white rounded-lg overflow-hidden"> | |
| <img class="w-full" src="aquapod.jpg" alt="Aquapod structure"> | |
| <div class="absolute inset-0 bg-blue-900 opacity-20"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="wave-shape"> | |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> | |
| <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21, 0,0,0,321.39,56.44Z" class="shape-fill"></path> | |
| </svg> | |
| </div> | |
| </section> | |
| <!-- Hive Structure Section --> | |
| <section id="structure" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl title-font"> | |
| Hexagonal Hive Structure | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Our innovative prefecture system organizes the Aquapod into efficient hexagonal zones, creating a harmonious and functional community. | |
| </p> | |
| </div> | |
| <div class="honeycomb-container"> | |
| <div class="honeycomb"> | |
| <!-- Tier 1 - Outer Ring (Harmony) --> | |
| <div class="honeycomb-cell tier-1"> | |
| <div class="honeycomb-cell__content"> | |
| <div class="honeycomb-cell__title">Harmony A1</div> | |
| <div class="honeycomb-cell__description">1-3 Bells</div> | |
| </div> | |
| </div> | |
| <div class="honeycomb-cell tier-1"> | |
| <div class="honeycomb-cell__content"> | |
| <div class="honeycomb-cell__title">Harmony B2</div> | |
| <div class="honeycomb-cell__description">1-3 Bells</div> | |
| </div> | |
| </div> | |
| <div class="honeycomb-cell tier-1"> | |
| <div class="honeycomb-cell__content"> | |
| <div class="honeycomb-cell__title">Harmony C3</div> | |
| <div class="honeycomb-cell__description">1-3 Bells</div> | |
| </div> | |
| </div> | |
| <!-- Tier 2 - Middle Ring (Industry) --> | |
| <div class="honeycomb-cell tier-2"> | |
| <div class="honeycomb-cell__content"> | |
| <div class="honeycomb-cell__title">Industry D4</div> | |
| <div class="honeycomb-cell__description">4-6 Bells</div> | |
| </div> | |
| </div> | |
| <div class="honeycomb-cell tier-2"> | |
| <div class="honeycomb-cell__content"> | |
| <div class="honeycomb-cell__title">Industry E5</div> | |
| <div class="honeycomb-cell__description">4-6 Bells</div> | |
| </div> | |
| </div> | |
| <!-- Aqua Oasis (Central Hub) --> | |
| <div class="honeycomb-cell aqua-oasis"> | |
| <div class="honeycomb-cell__content"> | |
| <div class="honeycomb-cell__title">Aqua Oasis</div> | |
| <div class="honeycomb-cell__description">Relaxation & Activities</div> | |
| </div> | |
| </div> | |
| <!-- Tier 2 - Middle Ring (Industry) --> | |
| <div class="honeycomb-cell tier-2"> | |
| <div class="honeycomb-cell__content"> | |
| <div class="honeycomb-cell__title">Industry F6</div> | |
| <div class="honeycomb-cell__description">4-6 Bells</div> | |
| </div> | |
| </div> | |
| <!-- Tier 3 - Inner Ring (Diligence) --> | |
| <div class="honeycomb-cell tier-3"> | |
| <div class="honeycomb-cell__content"> | |
| <div class="honeycomb-cell__title">Diligence G7</div> | |
| <div class="honeycomb-cell__description">7-8 Bells</div> | |
| </div> | |
| </div> | |
| <div class="honeycomb-cell tier-3"> | |
| <div class="honeycomb-cell__content"> | |
| <div class="honeycomb-cell__title">Diligence H8</div> | |
| <div class="honeycomb-cell__description">7-8 Bells</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="honeycomb-legend"> | |
| <div class="legend-item"> | |
| <div class="legend-color tier-3"></div> | |
| <span>Prefectures of Diligence (7-8 Bells)</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color tier-2"></div> | |
| <span>Prefectures of Industry (4-6 Bells)</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color tier-1"></div> | |
| <span>Prefectures of Harmony (1-3 Bells)</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color aqua-oasis"></div> | |
| <span>Aqua Oasis</span> | |
| </div> | |
| </div> | |
| <!-- Aqua Oasis Details Section --> | |
| <div class="mt-12 bg-blue-50 rounded-lg p-8 shadow-lg"> | |
| <h3 class="text-2xl font-bold text-blue-900 mb-6 title-font">Aqua Oasis: Central Relaxation & Activity Platform</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h4 class="text-lg font-semibold text-blue-800 mb-3">Concept</h4> | |
| <p class="text-gray-700 mb-6"> | |
| Located 12 nautical miles off the coast, Aqua Oasis is a multi-purpose platform designed for relaxation, water sports activities, and convenient access to supplies. | |
| Inspired by a honeycomb shape, it optimizes space utilization while maintaining structural integrity. | |
| </p> | |
| <h4 class="text-lg font-semibold text-blue-800 mb-3">Dimensions & Materials</h4> | |
| <ul class="list-disc pl-5 text-gray-700 space-y-2"> | |
| <li><strong>Size:</strong> Hexagonal platform with a diameter of 50 meters (164 ft)</li> | |
| <li><strong>Materials:</strong> Marine-grade materials (UC5B and UC5C classification)</li> | |
| <li><strong>Floatation:</strong> Closed-cell polyethylene (unsinkable and UV-resistant)</li> | |
| <li><strong>Decking:</strong> Marine-grade lumber or non-slip composite material</li> | |
| <li><strong>Superstructure:</strong> Aluminum or galvanized steel (corrosion-resistant)</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-blue-800 mb-3">Features</h4> | |
| <ul class="list-disc pl-5 text-gray-700 space-y-2"> | |
| <li>Solar panels for power generation</li> | |
| <li>Wi-Fi connectivity and USB charging ports</li> | |
| <li>Freshwater tanks housed underneath</li> | |
| <li>Central relaxation area with seating and hammocks</li> | |
| <li>Dedicated zones for water sports activities</li> | |
| <li>Refreshment area with basic supplies</li> | |
| <li>Docking stations for resident vessels</li> | |
| </ul> | |
| <h4 class="text-lg font-semibold text-blue-800 mt-6 mb-3">Sustainability</h4> | |
| <ul class="list-disc pl-5 text-gray-700 space-y-2"> | |
| <li>Rainwater harvesting systems</li> | |
| <li>Responsible waste management</li> | |
| <li>Low-flow fixtures for water conservation</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4"> | |
| <i class="fas fa-project-diagram"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">Hexagonal Efficiency</h3> | |
| <p class="mt-2 text-gray-500"> | |
| The honeycomb structure maximizes space utilization while minimizing material usage, creating the most efficient layout for ocean living. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4"> | |
| <i class="fas fa-arrows-alt-h"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">Modular Design</h3> | |
| <p class="mt-2 text-gray-500"> | |
| Each hexagonal prefecture can be added or reconfigured as needed, allowing the colony to grow organically over time. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">Structural Integrity</h3> | |
| <p class="mt-2 text-gray-500"> | |
| The hexagonal pattern provides exceptional strength against ocean currents and storms, distributing forces evenly throughout the structure. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Prefecture Tiers Section --> | |
| <section id="tiers" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl title-font"> | |
| Prefecture Tiers & Benefits | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Our tiered system rewards community participation with better positioning and amenities. | |
| </p> | |
| </div> | |
| <div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3"> | |
| <!-- Tier 1 --> | |
| <div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d"> | |
| <div class="bg-blue-200 px-6 py-4"> | |
| <h3 class="text-xl font-bold text-blue-900">Prefectures of Harmony</h3> | |
| <p class="text-blue-700">Tier 1 (1-3 Bells)</p> | |
| </div> | |
| <div class="p-6"> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-blue-500"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">Outer ring locations with ocean views</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-blue-500"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">Basic community amenities access</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-blue-500"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">Standard maintenance services</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-blue-500"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">Community event participation</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Tier 2 --> | |
| <div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d transform scale-105 z-10"> | |
| <div class="bg-blue-500 px-6 py-4 text-white"> | |
| <h3 class="text-xl font-bold">Prefectures of Industry</h3> | |
| <p>Tier 2 (4-6 Bells)</p> | |
| </div> | |
| <div class="p-6"> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-blue-300"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">Middle ring with quicker central access</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-blue-300"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">Priority amenities access</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-blue-300"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">Enhanced maintenance services</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-blue-300"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">Reserved event seating</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-blue-300"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">Monthly service credits</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Tier 3 --> | |
| <div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d"> | |
| <div class="bg-blue-800 px-6 py-4 text-white"> | |
| <h3 class="text-xl font-bold">Prefectures of Diligence</h3> | |
| <p>Tier 3 (7-8 Bells)</p> | |
| </div> | |
| <div class="p-6"> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-blue-300"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">Inner ring with immediate central access</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-blue-300"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">24/7 premium amenities access</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-blue-300"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">Expedited maintenance services</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-blue-300"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">VIP event access</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-blue-300"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">Generous monthly service credits</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-blue-300"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">Community leadership opportunities</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <div class="bg-white rounded-lg shadow-lg p-6 max-w-3xl mx-auto card-3d"> | |
| <h3 class="text-xl font-bold text-gray-900">Bell Commitment System</h3> | |
| <p class="mt-4 text-gray-600"> | |
| Residents earn "bells" through community service, maintenance contributions, and participation in colony governance. | |
| Your bell total determines your prefecture tier, which can be upgraded as you contribute more to the community. | |
| </p> | |
| <div class="mt-6 flex justify-center"> | |
| <a href="#contact" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> | |
| Learn How to Earn Bells | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits Section --> | |
| <section id="benefits" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl title-font"> | |
| Hive Community Benefits | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| The prefecture system creates a thriving, efficient ocean community. | |
| </p> | |
| </div> | |
| <div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4"> | |
| <div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4"> | |
| <i class="fas fa-heart"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">Thematic Harmony</h3> | |
| <p class="mt-2 text-gray-500"> | |
| The hexagonal layout and prefecture names reinforce our community's collaborative spirit and connection to nature. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4"> | |
| <i class="fas fa-trophy"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">Incentivized Participation</h3> | |
| <p class="mt-2 text-gray-500"> | |
| Residents offering more services (higher bell tiers) are positioned closer to the central platform with easier access to amenities. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">Operational Efficiency</h3> | |
| <p class="mt-2 text-gray-500"> | |
| Minimizes travel time within the platform for high-service residents, creating a more efficient community. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">Vibrant Community Core</h3> | |
| <p class="mt-2 text-gray-500"> | |
| Prefectures of Diligence create a dynamic center with easy access to services, fostering interaction and collaboration. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2"> | |
| <div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d"> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Transparent Slip Assignment</h3> | |
| <p class="mt-2 text-gray-500"> | |
| Slips within each prefecture are privately designated. | |
| Residents are assigned slips based on pod size, accessibility needs, and when possible, personal preference. | |
| </p> | |
| <div class="mt-4"> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">View Assignment Criteria →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d"> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Flexible Tier Advancement</h3> | |
| <p class="mt-2 text-gray-500"> | |
| Residents can adjust their bell commitment over time, potentially leading to a change in prefecture and slip assignment. | |
| Our system is designed to grow with you as your level of community participation evolves. | |
| </p> | |
| <div class="mt-4"> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn About Tier Progression →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-blue-900 relative overflow-hidden"> | |
| <div class="absolute inset-0"> | |
| <img class="w-full h-full object-cover opacity-20" src="aquapod.jpg" alt=""> | |
| <div class="absolute inset-0 bg-blue-900 mix-blend-multiply"></div> | |
| </div> | |
| <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl title-font"> | |
| Ready to Join Our Hive Community? | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-blue-100 mx-auto"> | |
| Become part of the most innovative ocean living community, where your contributions directly enhance your living experience. | |
| </p> | |
| <div class="mt-8 flex justify-center"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="#contact" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50"> | |
| Apply for Residence | |
| </a> | |
| </div> | |
| <div class="ml-3 inline-flex"> | |
| <a href="#structure" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 bg-opacity-60 hover:bg-opacity-70"> | |
| Tour Our Hive | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8"> | |
| <div class="lg:col-span-1"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl title-font"> | |
| Contact The Hive | |
| </h2> | |
| <p class="mt-3 text-lg text-gray-500"> | |
| Have questions about our prefecture system or the application process? Our team is here to help. | |
| </p> | |
| <div class="mt-8"> | |
| <div class="flex items-start mb-8"> | |
| <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-map-marker-alt"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg leading-6 font-medium text-gray-900">Hive Headquarters</h4> | |
| <p class="mt-1 text-base text-gray-500"> | |
| Los Angeles, California {By Appointment Only} | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-8"> | |
| <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-envelope"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <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-phone-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 lg:mt-0 lg:col-span-1"> | |
| <div class="bg-white shadow-lg rounded-lg overflow-hidden card-3d"> | |
| <div class="px-6 py-5 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium leading-6 text-gray-900"></h3> | |
| </div> | |
| <div class="px-6 py-5"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="marine-bg text-white pt-12 pb-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div class="col-span-2"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-honeycomb text-3xl text-blue-300 mr-2"></i> | |
| <span class="title-font text-xl font-semibold text-white">Aquapod Hive</span> | |
| </div> | |
| <p class="mt-4 text-blue-100"> | |
| Pioneering sustainable ocean living through innovative hexagonal community design. | |
| </p> | |
| <div class="mt-6 flex space-x-6"> | |
| <a href="#" class="text-blue-300 hover:text-white"> | |
| <i class="fab fa-telegram-t"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-blue-300 tracking-wider uppercase">Explore</h3> | |
| <div class="mt-4 space-y-4"> | |
| <a href="#home" class="footer-link text-base text-blue-100 block">Home</a> | |
| <a href="#structure" class="footer-link text-base text-blue-100 block">Hive Structure</a> | |
| <a href="#tiers" class="footer-link text-base text-blue-100 block">Prefecture Tiers</a> | |
| <a href="#benefits" class="footer-link text-base text-blue-100 block">Benefits</a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-blue-300 tracking-wider uppercase">Legal</h3> | |
| <div class="mt-4 space-y-4"> | |
| <a href="#" class="footer-link text-base text-blue-100 block">Privacy</a> | |
| <a href="#" class="footer-link text-base text-blue-100 block">Terms</a> | |
| <a href="#" class="footer-link text-base text-blue-100 block">FAQ</a> | |
| <a href="#contact" class="footer-link text-base text-blue-100 block">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-blue-800 pt-8"> | |
| <p class="text-base text-blue-300 text-center"> | |
| © 2023 Aquapod Hive Community. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Floating Benefits Button --> | |
| <div class="floating-btn" id="benefits-btn"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <!-- Benefits Modal --> | |
| <div class="modal" id="benefits-modal"> | |
| <div class="modal-content"> | |
| <span class="close-btn" id="close-modal">×</span> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-6 title-font">Hive Community Benefits</h2> | |
| <div class="grid grid-cols-1 gap-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-heart"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Thematic Harmony</h3> | |
| <p class="mt-1 text-gray-600"> | |
| The hexagonal layout and prefecture names reinforce our community's collaborative spirit and connection to nature. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-trophy"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Incentivized Participation</h3> | |
| <p class="mt-1 text-gray-600"> | |
| Residents offering more services (higher bell tiers) are positioned closer to the central platform with easier access to amenities. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Operational Efficiency</h3> | |
| <p class="mt-1 text-gray-600"> | |
| Minimizes travel time within the platform for high-service residents, creating a more efficient community. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Vibrant Community Core</h3> | |
| <p class="mt-1 text-gray-600"> | |
| Prefectures of Diligence create a dynamic center with easy access to services, fostering interaction and collaboration. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <a href="#benefits" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> | |
| View All Benefits | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| if (menu.classList.contains('hidden')) { | |
| menu.classList.remove('hidden'); | |
| } else { | |
| menu.classList.add('hidden'); | |
| } | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Add shadow to navbar on scroll | |
| window.addEventListener('scroll', function() { | |
| const nav = document.querySelector('nav'); | |
| if (window.scrollY > 10) { | |
| nav.classList.add('shadow-lg'); | |
| } else { | |
| nav.classList.remove('shadow-lg'); | |
| } | |
| }); | |
| // 3D effect for cards on mouse move | |
| document.querySelectorAll('.card-3d').forEach(card => { | |
| card.addEventListener('mousemove', (e) => { | |
| const rect = card.getBoundingClientRect(); | |
| const x = e.clientX - rect.left; | |
| const y = e.clientY - rect.top; | |
| const centerX = rect.width / 2; | |
| const centerY = rect.height / 2; | |
| const angleX = (y - centerY) / 20; | |
| const angleY = (centerX - x) / 20; | |
| card.style.transform = `rotateX(${angleX}deg) rotateY(${angleY}deg) translateY(-5px)`; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.style.transform = 'rotateY(0) rotateX(0) translateY(0)'; | |
| }); | |
| }); | |
| // Honeycomb cell animation | |
| document.querySelectorAll('.honeycomb-cell').forEach(cell => { | |
| cell.addEventListener('mouseenter', () => { | |
| cell.style.transform = 'scale(1.1)'; | |
| cell.style.zIndex = '10'; | |
| }); | |
| cell.addEventListener('mouseleave', () => { | |
| cell.style.transform = 'scale(1)'; | |
| cell.style.zIndex = '1'; | |
| }); | |
| }); | |
| // Floating benefits button functionality | |
| const benefitsBtn = document.getElementById('benefits-btn'); | |
| const benefitsModal = document.getElementById('benefits-modal'); | |
| const closeModal = document.getElementById('close-modal'); | |
| benefitsBtn.addEventListener('click', () => { | |
| benefitsModal.style.display = 'block'; | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| benefitsModal.style.display = 'none'; | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| window.addEventListener('click', (e) => { | |
| if (e.target === benefitsModal) { | |
| benefitsModal.style.display = 'none'; | |
| document.body.style.overflow = 'auto'; | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/privaqucolony2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |