gcoder824/subdocflow-smooth-document-request-system
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>SubDocFlow - Document Request System</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');13 body {14 font-family: 'Poppins', sans-serif;15 }16 .hero-gradient {17 background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%);18 }19 .document-card:hover {20 transform: translateY(-5px);21 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);22 }23 </style>24</head>25<body class="bg-gray-50">26 <!-- Navigation -->27 <nav class="bg-white shadow-lg">28 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">29 <div class="flex justify-between h-16">30 <div class="flex items-center">31 <div class="flex-shrink-0 flex items-center">32 <i data-feather="file-text" class="text-indigo-600 h-8 w-8"></i>33 <span class="ml-2 text-xl font-bold text-gray-900">SubDocFlow</span>34 </div>35 </div>36 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">37 <a href="#" class="text-indigo-600 border-b-2 border-indigo-600 px-3 py-2 text-sm font-medium">Home</a>38 <a href="#features" class="text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Features</a>39 <a href="#documents" class="text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Documents</a>40 <a href="login.php" class="text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Login</a>41 <a href="register.php" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700">Register</a>42</div>43 <div class="-mr-2 flex items-center md:hidden">44 <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">45 <i data-feather="menu"></i>46 </button>47 </div>48 </div>49 </div>50 <!-- Mobile menu -->51 <div class="hidden md:hidden" id="mobile-menu">52 <div class="pt-2 pb-3 space-y-1">53 <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>54 <a href="#features" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Features</a>55 <a href="#documents" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Documents</a>56 <a href="login.php" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Login</a>57 <a href="register.php" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Register</a>58</div>59 </div>60 </nav>61 62 <!-- Hero Section -->63 <div class="hero-gradient">64 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-24">65 <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">66 <div>67 <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">68 Streamlined Document Requests for Your Subdivision69 </h1>70 <p class="mt-3 max-w-3xl text-lg text-indigo-100">71 Submit, track, and manage all your subdivision document requests in one place. Fast, secure, and convenient for residents and administrators.72 </p>73 <div class="mt-8 flex flex-col sm:flex-row gap-4">74 <a href="register.html" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 md:py-4 md:text-lg md:px-10">75 Get Started76 </a>77 <a href="#documents" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10">78 View Documents79 </a>80 </div>81 </div>82 <div class="mt-12 lg:mt-0">83 <div class="relative mx-auto w-full rounded-lg shadow-lg overflow-hidden">84 <div class="relative bg-white p-6">85 <img src="http://static.photos/office/1024x576/1" alt="Document management dashboard" class="rounded-lg shadow-md">86 <div class="absolute -bottom-2 -right-2 bg-indigo-600 text-white px-3 py-1 rounded-lg text-sm font-medium">87 Dashboard Preview88 </div>89 </div>90 </div>91 </div>92 </div>93 </div>94 </div>95 96 <!-- Features Section -->97 <div class="py-12 bg-white" id="features">98 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">99 <div class="lg:text-center">100 <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>101 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">102 A better way to manage documents103 </p>104 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">105 Our system is designed to simplify the document request process for both residents and administrators.106 </p>107 </div>108 109 <div class="mt-10">110 <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">111 <div class="relative">112 <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">113 <i data-feather="clock"></i>114 </div>115 <div class="ml-16">116 <h3 class="text-lg leading-6 font-medium text-gray-900">24/7 Request Submission</h3>117 <p class="mt-2 text-base text-gray-500">118 Submit your document requests anytime, anywhere. No need to visit the office during working hours.119 </p>120 </div>121 </div>122 123 <div class="relative">124 <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">125 <i data-feather="check-circle"></i>126 </div>127 <div class="ml-16">128 <h3 class="text-lg leading-6 font-medium text-gray-900">Real-time Tracking</h3>129 <p class="mt-2 text-base text-gray-500">130 Track the status of your requests in real-time. Get notifications when your documents are ready.131 </p>132 </div>133 </div>134 135 <div class="relative">136 <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">137 <i data-feather="bell"></i>138 </div>139 <div class="ml-16">140 <h3 class="text-lg leading-6 font-medium text-gray-900">Automated Notifications</h3>141 <p class="mt-2 text-base text-gray-500">142 Receive email and SMS notifications for important updates about your document requests.143 </p>144 </div>145 </div>146 147 <div class="relative">148 <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">149 <i data-feather="shield"></i>150 </div>151 <div class="ml-16">152 <h3 class="text-lg leading-6 font-medium text-gray-900">Secure Processing</h3>153 <p class="mt-2 text-base text-gray-500">154 Your personal information and documents are protected with bank-level security measures.155 </p>156 </div>157 </div>158 </div>159 </div>160 </div>161 </div>162 163 <!-- Documents Section -->164 <div class="py-12 bg-gray-50" id="documents">165 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">166 <div class="lg:text-center">167 <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Available Documents</h2>168 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">169 Request these documents online170 </p>171 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">172 Select from our list of commonly requested subdivision documents.173 </p>174 </div>175 176 <div class="mt-10 grid gap-10 md:grid-cols-2 lg:grid-cols-3">177 <div class="document-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out">178 <div class="px-4 py-5 sm:p-6">179 <div class="flex items-center">180 <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">181 <i data-feather="briefcase" class="h-6 w-6 text-white"></i>182 </div>183 <div class="ml-4">184 <h3 class="text-lg leading-6 font-medium text-gray-900">Business Permit</h3>185 <p class="mt-1 text-sm text-gray-500">186 For businesses operating within the subdivision187 </p>188 </div>189 </div>190 <div class="mt-6">191 <a href="request_form.html?document=business_permit" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">192 Request Now193 </a>194 </div>195 </div>196 </div>197 198 <div class="document-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out">199 <div class="px-4 py-5 sm:p-6">200 <div class="flex items-center">201 <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">202 <i data-feather="home" class="h-6 w-6 text-white"></i>203 </div>204 <div class="ml-4">205 <h3 class="text-lg leading-6 font-medium text-gray-900">Amenities Permit</h3>206 <p class="mt-1 text-sm text-gray-500">207 For using subdivision amenities and facilities208 </p>209 </div>210 </div>211 <div class="mt-6">212 <a href="request_form.html?document=amenities_permit" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">213 Request Now214 </a>215 </div>216 </div>217 </div>218 219 <div class="document-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out">220 <div class="px-4 py-5 sm:p-6">221 <div class="flex items-center">222 <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">223 <i data-feather="map-pin" class="h-6 w-6 text-white"></i>224 </div>225 <div class="ml-4">226 <h3 class="text-lg leading-6 font-medium text-gray-900">Lot Title</h3>227 <p class="mt-1 text-sm text-gray-500">228 Official documents for your property229 </p>230 </div>231 </div>232 <div class="mt-6">233 <a href="request_form.html?document=lot_title" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">234 Request Now235 </a>236 </div>237 </div>238 </div>239 240 <div class="document-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out">241 <div class="px-4 py-5 sm:p-6">242 <div class="flex items-center">243 <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">244 <i data-feather="truck" class="h-6 w-6 text-white"></i>245 </div>246 <div class="ml-4">247 <h3 class="text-lg leading-6 font-medium text-gray-900">Vehicle Ticket</h3>248 <p class="mt-1 text-sm text-gray-500">249 For vehicle access and parking within the subdivision250 </p>251 </div>252 </div>253 <div class="mt-6">254 <a href="request_form.html?document=vehicle_ticket" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">255 Request Now256 </a>257 </div>258 </div>259 </div>260 261 <div class="document-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out">262 <div class="px-4 py-5 sm:p-6">263 <div class="flex items-center">264 <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">265 <i data-feather="user-check" class="h-6 w-6 text-white"></i>266 </div>267 <div class="ml-4">268 <h3 class="text-lg leading-6 font-medium text-gray-900">Residency Certificate</h3>269 <p class="mt-1 text-sm text-gray-500">270 Proof of residency within the subdivision271 </p>272 </div>273 </div>274 <div class="mt-6">275 <a href="request_form.html?document=residency_certificate" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">276 Request Now277 </a>278 </div>279 </div>280 </div>281 282 <div class="document-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out">283 <div class="px-4 py-5 sm:p-6">284 <div class="flex items-center">285 <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">286 <i data-feather="file-text" class="h-6 w-6 text-white"></i>287 </div>288 <div class="ml-4">289 <h3 class="text-lg leading-6 font-medium text-gray-900">Other Documents</h3>290 <p class="mt-1 text-sm text-gray-500">291 Request other subdivision-related documents292 </p>293 </div>294 </div>295 <div class="mt-6">296 <a href="request_form.html?document=other" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">297 Request Now298 </a>299 </div>300 </div>301 </div>302 </div>303 </div>304 </div>305 306 <!-- CTA Section -->307 <div class="bg-indigo-700">308 <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">309 <h2 class="text-3xl font-extrabold text-white sm:text-4xl">310 <span class="block">Ready to request your document?</span>311 <span class="block">Register now to get started.</span>312 </h2>313 <p class="mt-4 text-lg leading-6 text-indigo-200">314 Join hundreds of residents who are managing their documents the easy way.315 </p>316 <a href="register.html" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto">317 Sign up for free318 </a>319 </div>320 </div>321 322 <!-- Footer -->323 <footer class="bg-gray-800">324 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">325 <div class="grid grid-cols-2 md:grid-cols-4 gap-8">326 <div>327 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Navigation</h3>328 <ul class="mt-4 space-y-4">329 <li><a href="#" class="text-base text-gray-300 hover:text-white">Home</a></li>330 <li><a href="#features" class="text-base text-gray-300 hover:text-white">Features</a></li>331 <li><a href="#documents" class="text-base text-gray-300 hover:text-white">Documents</a></li>332 <li>333 <a href="login.php" class="text-base text-gray-300 hover:text-white">Login</a>334</li>335 </ul>336 </div>337 <div>338 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>339 <ul class="mt-4 space-y-4">340 <li><a href="contact.html" class="text-base text-gray-300 hover:text-white">Contact Us</a></li>341 <li><a href="faq.html" class="text-base text-gray-300 hover:text-white">FAQs</a></li>342 <li><a href="privacy.html" class="text-base text-gray-300 hover:text-white">Privacy Policy</a></li>343 <li><a href="terms.html" class="text-base text-gray-300 hover:text-white">Terms of Service</a></li>344 </ul>345 </div>346 <div>347 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>348 <ul class="mt-4 space-y-4">349 <li><a href="#" class="text-base text-gray-300 hover:text-white">Business Permit</a></li>350 <li><a href="#" class="text-base text-gray-300 hover:text-white">Amenities Permit</a></li>351 <li><a href="#" class="text-base text-gray-300 hover:text-white">Lot Title</a></li>352 <li><a href="#" class="text-base text-gray-300 hover:text-white">Vehicle Ticket</a></li>353 </ul>354 </div>355 <div>356 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>357 <ul class="mt-4 space-y-4">358 <li class="flex">359 <a href="#" class="text-gray-300 hover:text-white">360 <i data-feather="facebook" class="h-6 w-6"></i>361 </a>362 <a href="#" class="ml-6 text-gray-300 hover:text-white">363 <i data-feather="twitter" class="h-6 w-6"></i>364 </a>365 <a href="#" class="ml-6 text-gray-300 hover:text-white">366 <i data-feather="instagram" class="h-6 w-6"></i>367 </a>368 </li>369 <li><a href="tel:+1234567890" class="text-base text-gray-300 hover:text-white">+1 (234) 567-890</a></li>370 <li><a href="mailto:info@subdocflow.com" class="text-base text-gray-300 hover:text-white">info@subdocflow.com</a></li>371 </ul>372 </div>373 </div>374 <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">375 <div class="flex space-x-6 md:order-2">376 <a href="#" class="text-gray-400 hover:text-gray-300">377 <i data-feather="facebook" class="h-6 w-6"></i>378 </a>379 <a href="#" class="text-gray-400 hover:text-gray-300">380 <i data-feather="twitter" class="h-6 w-6"></i>381 </a>382 <a href="#" class="text-gray-400 hover:text-gray-300">383 <i data-feather="instagram" class="h-6 w-6"></i>384 </a>385 </div>386 <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">387 © 2023 SubDocFlow. All rights reserved.388 </p>389 </div>390 </div>391 </footer>392 393 <script>394 // Mobile menu toggle395 document.getElementById('mobile-menu-button').addEventListener('click', function() {396 const menu = document.getElementById('mobile-menu');397 if (menu.classList.contains('hidden')) {398 menu.classList.remove('hidden');399 } else {400 menu.classList.add('hidden');401 }402 });403 404 // Smooth scrolling for anchor links405 document.querySelectorAll('a[href^="#"]').forEach(anchor => {406 anchor.addEventListener('click', function (e) {407 e.preventDefault();408 document.querySelector(this.getAttribute('href')).scrollIntoView({409 behavior: 'smooth'410 });411 });412 });413 414 // Initialize feather icons415 feather.replace();416 </script>417</body>418</html>419