tatansol/codehaven-source-code-marketplace
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>CodeHaven - Premium Source Code Marketplace</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');12 body {13 font-family: 'Inter', sans-serif;14 background-color: #f8fafc;15 }16 .hero-bg {17 background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);18 }19 .product-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 .dropdown:hover .dropdown-menu {24 display: block;25 }26 </style>27</head>28<body class="antialiased">29 <!-- Navigation -->30 <nav class="bg-white shadow-sm sticky top-0 z-50">31 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">32 <div class="flex justify-between h-16">33 <div class="flex items-center">34 <div class="flex-shrink-0 flex items-center">35 <i data-feather="code" class="h-8 w-8 text-indigo-600"></i>36 <span class="ml-2 text-xl font-bold text-gray-900">CodeHaven</span>37 </div>38 <div class="hidden sm:ml-6 sm:flex sm:space-x-8">39 <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>40 <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Products</a>41 <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Categories</a>42 <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Authors</a>43 </div>44 </div>45 <div class="hidden sm:ml-6 sm:flex sm:items-center">46 <div class="relative ml-3">47 <div class="flex space-x-4">48 <button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-indigo-600 hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">49 Login50 </button>51 <button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">52 Register53 </button>54 </div>55 </div>56 </div>57 <div class="-mr-2 flex items-center sm:hidden">58 <button type="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 focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">59 <span class="sr-only">Open main menu</span>60 <i data-feather="menu" class="block h-6 w-6"></i>61 </button>62 </div>63 </div>64 </div>65 66 <!-- Mobile menu -->67 <div class="sm:hidden hidden" id="mobile-menu">68 <div class="pt-2 pb-3 space-y-1">69 <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>70 <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Products</a>71 <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Categories</a>72 <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Authors</a>73 </div>74 <div class="pt-4 pb-3 border-t border-gray-200">75 <div class="mt-3 space-y-1">76 <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Login</a>77 <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Register</a>78 </div>79 </div>80 </div>81 </nav>82 83 <!-- Hero Section -->84 <div class="hero-bg">85 <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">86 <div class="text-center">87 <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">88 <span class="block">Premium Source Code</span>89 <span class="block text-indigo-600">For Your Next Project</span>90 </h1>91 <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">92 Browse thousands of high-quality code templates, themes, and plugins created by our talented community.93 </p>94 <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">95 <div class="rounded-md shadow">96 <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">97 Browse Products98 </a>99 </div>100 <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">101 <a href="#" class="w-full 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-gray-50 md:py-4 md:text-lg md:px-10">102 Sell Your Code103 </a>104 </div>105 </div>106 </div>107 </div>108 </div>109 110 <!-- Featured Products -->111 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">112 <div class="lg:text-center">113 <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Featured Products</h2>114 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">115 Popular Source Codes116 </p>117 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">118 Check out our most popular products this week119 </p>120 </div>121 122 <div class="mt-10">123 <div class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">124 <!-- Product 1 -->125 <div class="group relative product-card transition-all duration-300 ease-in-out">126 <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">127 <img src="http://static.photos/technology/640x360/1" alt="Front of men's Basic Tee in black." class="w-full h-full object-center object-cover lg:w-full lg:h-full">128 </div>129 <div class="mt-4 flex justify-between">130 <div>131 <h3 class="text-sm text-gray-700">132 <a href="#">133 <span aria-hidden="true" class="absolute inset-0"></span>134 React Admin Dashboard135 </a>136 </h3>137 <p class="mt-1 text-sm text-gray-500">Complete admin template</p>138 </div>139 <p class="text-sm font-medium text-gray-900">$49</p>140 </div>141 <div class="mt-2 flex items-center">142 <div class="flex items-center">143 <svg class="text-yellow-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">144 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />145 </svg>146 <span class="text-gray-600 ml-1">4.8 (128)</span>147 </div>148 <div class="ml-4">149 <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">React</span>150 </div>151 </div>152 </div>153 154 <!-- Product 2 -->155 <div class="group relative product-card transition-all duration-300 ease-in-out">156 <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">157 <img src="http://static.photos/technology/640x360/2" alt="Front of men's Basic Tee in black." class="w-full h-full object-center object-cover lg:w-full lg:h-full">158 </div>159 <div class="mt-4 flex justify-between">160 <div>161 <h3 class="text-sm text-gray-700">162 <a href="#">163 <span aria-hidden="true" class="absolute inset-0"></span>164 Vue.js E-commerce Template165 </a>166 </h3>167 <p class="mt-1 text-sm text-gray-500">Complete online store</p>168 </div>169 <p class="text-sm font-medium text-gray-900">$79</p>170 </div>171 <div class="mt-2 flex items-center">172 <div class="flex items-center">173 <svg class="text-yellow-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">174 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />175 </svg>176 <span class="text-gray-600 ml-1">4.9 (256)</span>177 </div>178 <div class="ml-4">179 <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Vue.js</span>180 </div>181 </div>182 </div>183 184 <!-- Product 3 -->185 <div class="group relative product-card transition-all duration-300 ease-in-out">186 <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">187 <img src="http://static.photos/technology/640x360/3" alt="Front of men's Basic Tee in black." class="w-full h-full object-center object-cover lg:w-full lg:h-full">188 </div>189 <div class="mt-4 flex justify-between">190 <div>191 <h3 class="text-sm text-gray-700">192 <a href="#">193 <span aria-hidden="true" class="absolute inset-0"></span>194 Laravel CRM System195 </a>196 </h3>197 <p class="mt-1 text-sm text-gray-500">Customer relationship management</p>198 </div>199 <p class="text-sm font-medium text-gray-900">$129</p>200 </div>201 <div class="mt-2 flex items-center">202 <div class="flex items-center">203 <svg class="text-yellow-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">204 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />205 </svg>206 <span class="text-gray-600 ml-1">4.7 (89)</span>207 </div>208 <div class="ml-4">209 <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">Laravel</span>210 </div>211 </div>212 </div>213 214 <!-- Product 4 -->215 <div class="group relative product-card transition-all duration-300 ease-in-out">216 <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">217 <img src="http://static.photos/technology/640x360/4" alt="Front of men's Basic Tee in black." class="w-full h-full object-center object-cover lg:w-full lg:h-full">218 </div>219 <div class="mt-4 flex justify-between">220 <div>221 <h3 class="text-sm text-gray-700">222 <a href="#">223 <span aria-hidden="true" class="absolute inset-0"></span>224 Flutter Mobile App UI Kit225 </a>226 </h3>227 <p class="mt-1 text-sm text-gray-500">20+ ready screens</p>228 </div>229 <p class="text-sm font-medium text-gray-900">$59</p>230 </div>231 <div class="mt-2 flex items-center">232 <div class="flex items-center">233 <svg class="text-yellow-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">234 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />235 </svg>236 <span class="text-gray-600 ml-1">4.8 (176)</span>237 </div>238 <div class="ml-4">239 <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Flutter</span>240 </div>241 </div>242 </div>243 </div>244 </div>245 246 <div class="mt-12 text-center">247 <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">248 View All Products249 <i data-feather="arrow-right" class="ml-2 h-5 w-5"></i>250 </a>251 </div>252 </div>253 254 <!-- Categories Section -->255 <div class="bg-white">256 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">257 <div class="lg:text-center">258 <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Categories</h2>259 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">260 Browse by Technology261 </p>262 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">263 Find exactly what you need for your next project264 </p>265 </div>266 267 <div class="mt-10">268 <div class="grid grid-cols-2 gap-6 md:grid-cols-4 lg:grid-cols-6">269 <a href="#" class="col-span-1 flex flex-col text-center bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300">270 <div class="flex-shrink-0 mx-auto bg-indigo-100 rounded-full p-3">271 <i data-feather="react" class="h-8 w-8 text-indigo-600"></i>272 </div>273 <h3 class="mt-4 text-sm font-medium text-gray-900">React</h3>274 <p class="mt-1 text-sm text-gray-500">1,234 Products</p>275 </a>276 277 <a href="#" class="col-span-1 flex flex-col text-center bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300">278 <div class="flex-shrink-0 mx-auto bg-green-100 rounded-full p-3">279 <i data-feather="vue" class="h-8 w-8 text-green-600"></i>280 </div>281 <h3 class="mt-4 text-sm font-medium text-gray-900">Vue.js</h3>282 <p class="mt-1 text-sm text-gray-500">876 Products</p>283 </a>284 285 <a href="#" class="col-span-1 flex flex-col text-center bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300">286 <div class="flex-shrink-0 mx-auto bg-blue-100 rounded-full p-3">287 <i data-feather="angular" class="h-8 w-8 text-blue-600"></i>288 </div>289 <h3 class="mt-4 text-sm font-medium text-gray-900">Angular</h3>290 <p class="mt-1 text-sm text-gray-500">543 Products</p>291 </a>292 293 <a href="#" class="col-span-1 flex flex-col text-center bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300">294 <div class="flex-shrink-0 mx-auto bg-red-100 rounded-full p-3">295 <i data-feather="laravel" class="h-8 w-8 text-red-600"></i>296 </div>297 <h3 class="mt-4 text-sm font-medium text-gray-900">Laravel</h3>298 <p class="mt-1 text-sm text-gray-500">765 Products</p>299 </a>300 301 <a href="#" class="col-span-1 flex flex-col text-center bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300">302 <div class="flex-shrink-0 mx-auto bg-yellow-100 rounded-full p-3">303 <i data-feather="django" class="h-8 w-8 text-yellow-600"></i>304 </div>305 <h3 class="mt-4 text-sm font-medium text-gray-900">Django</h3>306 <p class="mt-1 text-sm text-gray-500">321 Products</p>307 </a>308 309 <a href="#" class="col-span-1 flex flex-col text-center bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300">310 <div class="flex-shrink-0 mx-auto bg-purple-100 rounded-full p-3">311 <i data-feather="flutter" class="h-8 w-8 text-purple-600"></i>312 </div>313 <h3 class="mt-4 text-sm font-medium text-gray-900">Flutter</h3>314 <p class="mt-1 text-sm text-gray-500">654 Products</p>315 </a>316 </div>317 </div>318 </div>319 </div>320 321 <!-- FAQ Section -->322 <div class="bg-gray-50">323 <div class="max-w-7xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8">324 <div class="max-w-3xl mx-auto divide-y-2 divide-gray-200">325 <h2 class="text-center text-3xl font-extrabold text-gray-900 sm:text-4xl">326 Frequently asked questions327 </h2>328 <dl class="mt-6 space-y-6 divide-y divide-gray-200">329 <div class="pt-6">330 <dt class="text-lg">331 <button class="text-left w-full flex justify-between items-start text-gray-400 focus:outline-none focus:text-gray-900">332 <span class="font-medium text-gray-900">333 How do I purchase a product?334 </span>335 <span class="ml-6 h-7 flex items-center">336 <svg class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">337 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />338 </svg>339 </span>340 </button>341 </dt>342 <dd class="mt-2 pr-12 hidden">343 <p class="text-base text-gray-500">344 To purchase a product, simply click on the "Buy Now" button on the product page. You'll be guided through the checkout process where you can complete your purchase using various payment methods including credit cards and PayPal.345 </p>346 </dd>347 </div>348 349 <div class="pt-6">350 <dt class="text-lg">351 <button class="text-left w-full flex justify-between items-start text-gray-400 focus:outline-none focus:text-gray-900">352 <span class="font-medium text-gray-900">353 What's included in a product purchase?354 </span>355 <span class="ml-6 h-7 flex items-center">356 <svg class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">357 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />358 </svg>359 </span>360 </button>361 </dt>362 <dd class="mt-2 pr-12 hidden">363 <p class="text-base text-gray-500">364 When you purchase a product, you'll receive the complete source code, documentation, and any additional assets specified in the product description. Most products also include free updates for a certain period and access to our support system.365 </p>366 </dd>367 </div>368 369 <div class="pt-6">370 <dt class="text-lg">371 <button class="text-left w-full flex justify-between items-start text-gray-400 focus:outline-none focus:text-gray-900">372 <span class="font-medium text-gray-900">373 Can I get a refund if I'm not satisfied?374 </span>375 <span class="ml-6 h-7 flex items-center">376 <svg class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">377 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />378 </svg>379 </span>380 </button>381 </dt>382 <dd class="mt-2 pr-12 hidden">383 <p class="text-base text-gray-500">384 We offer a 30-day money-back guarantee for all products. If you're not satisfied with your purchase for any reason, simply contact our support team within 30 days of purchase to request a refund.385 </p>386 </dd>387 </div>388 389 <div class="pt-6">390 <dt class="text-lg">391 <button class="text-left w-full flex justify-between items-start text-gray-400 focus:outline-none focus:text-gray-900">392 <span class="font-medium text-gray-900">393 How can I become a seller?394 </span>395 <span class="ml-6 h-7 flex items-center">396 <svg class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">397 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />398 </svg>399 </span>400 </button>401 </dt>402 <dd class="mt-2 pr-12 hidden">403 <p class="text-base text-gray-500">404 To become a seller, register for an account and then apply to become an author. Once approved, you can start uploading your products. We take a small commission on each sale, and you keep the majority of the revenue.405 </p>406 </dd>407 </div>408 409 <div class="pt-6">410 <dt class="text-lg">411 <button class="text-left w-full flex justify-between items-start text-gray-400 focus:outline-none focus:text-gray-900">412 <span class="font-medium text-gray-900">413 What license do I get with my purchase?414 </span>415 <span class="ml-6 h-7 flex items-center">416 <svg class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">417 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />418 </svg>419 </span>420 </button>421 </dt>422 <dd class="mt-2 pr-12 hidden">423 <p class="text-base text-gray-500">424 Most products come with a standard license that allows you to use the product in one end product which end users are not charged for. For extended usage (like SaaS applications or products you charge for), you may need an extended license which is available for purchase.425 </p>426 </dd>427 </div>428 </dl>429 </div>430 </div>431 </div>432 433 <!-- CTA Section -->434 <div class="bg-indigo-700">435 <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">436 <h2 class="text-3xl font-extrabold text-white sm:text-4xl">437 <span class="block">Ready to start selling your code?</span>438 <span class="block">Join our marketplace today.</span>439 </h2>440 <p class="mt-4 text-lg leading-6 text-indigo-200">441 Earn money by sharing your creations with thousands of developers worldwide.442 </p>443 <a href="#" 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">444 Become an Author445 </a>446 </div>447 </div>448 449 <!-- Footer -->450 <footer class="bg-white">451 <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">452 <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">453 <div class="px-5 py-2">454 <a href="#" class="text-base text-gray-500 hover:text-gray-900">455 About456 </a>457 </div>458 <div class="px-5 py-2">459 <a href="#" class="text-base text-gray-500 hover:text-gray-900">460 Blog461 </a>462 </div>463 <div class="px-5 py-2">464 <a href="#" class="text-base text-gray-500 hover:text-gray-900">465 Jobs466 </a>467 </div>468 <div class="px-5 py-2">469 <a href="#" class="text-base text-gray-500 hover:text-gray-900">470 Press471 </a>472 </div>473 <div class="px-5 py-2">474 <a href="#" class="text-base text-gray-500 hover:text-gray-900">475 Accessibility476 </a>477 </div>478 <div class="px-5 py-2">479 <a href="#" class="text-base text-gray-500 hover:text-gray-900">480 Partners481 </a>482 </div>483 </nav>484 <div class="mt-8 flex justify-center space-x-6">485 <a href="#" class="text-gray-400 hover:text-gray-500">486 <span class="sr-only">Facebook</span>487 <i data-feather="facebook" class="h-6 w-6"></i>488 </a>489 <a href="#" class="text-gray-400 hover:text-gray-500">490 <span class="sr-only">Instagram</span>491 <i data-feather="instagram" class="h-6 w-6"></i>492 </a>493 <a href="#" class="text-gray-400 hover:text-gray-500">494 <span class="sr-only">Twitter</span>495 <i data-feather="twitter" class="h-6 w-6"></i>496 </a>497 <a href="#" class="text-gray-400 hover:text-gray-500">498 <span class="sr-only">GitHub</span>499 <i data-feather="github" class="h-6 w-6"></i>500 </a>501 <a href="#" class="text-gray-400 hover:text-gray-500">502 <span class="sr-only">YouTube</span>503 <i data-feather="youtube" class="h-6 w-6"></i>504 </a>505 </div>506 <p class="mt-8 text-center text-base text-gray-400">507 © 2023 CodeHaven. All rights reserved.508 </p>509 </div>510 </footer>511 512 <script>513 feather.replace();514 515 // Mobile menu toggle516 document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() {517 const menu = document.getElementById('mobile-menu');518 menu.classList.toggle('hidden');519 });520 521 // FAQ accordion522 document.querySelectorAll('dt button').forEach(button => {523 button.addEventListener('click', () => {524 const dd = button.parentElement.nextElementSibling;525 const icon = button.querySelector('svg');526 527 dd.classList.toggle('hidden');528 icon.classList.toggle('rotate-180');529 });530 });531 532 // Vanta.js background effect533 VANTA.GLOBE({534 el: ".hero-bg",535 mouseControls: true,536 touchControls: true,537 gyroControls: false,538 minHeight: 200.00,539 minWidth: 200.00,540 scale: 1.00,541 scaleMobile: 1.00,542 color: "#818cf8",543 backgroundColor: "#f0f9ff",544 size: 0.8545 });546 </script>547</body>548</html>549 