WaveformBeatz/waveform-beatz
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>Beat Ideas - WaveStore.com</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/animejs@3.2.1/lib/anime.min.js"></script>11 <style>12 .beat-card:hover .beat-overlay {13 opacity: 1;14 }15 .sparkle {16 position: absolute;17 width: 10px;18 height: 10px;19 background: white;20 border-radius: 50%;21 filter: blur(1px);22 animation: sparkle 2s infinite;23 }24 @keyframes sparkle {25 0% { opacity: 0; transform: scale(0.5); }26 50% { opacity: 1; transform: scale(1.2); }27 100% { opacity: 0; transform: scale(0.5); }28 }29 </style>30</head>31<body class="bg-black text-purple-900 font-sans">32<!-- Navbar -->33 <header class="sticky top-0 z-50 bg-black/80 backdrop-blur-md border-b border-gray-800">34 <div class="container mx-auto px-4 py-3 flex justify-between items-center">35 <div class="menu relative">36 <button class="text-white hover:text-purple-300 transition flex items-center">37 Menu <i data-feather="chevron-down" class="ml-1 w-4 h-4"></i>38 </button>39 <div class="dropdown-menu hidden absolute top-full left-0 mt-2 bg-gray-900 rounded-lg shadow-lg py-2 z-50 min-w-[120px]">40 <a href="/" class="block px-4 py-2 text-white hover:bg-gray-800 hover:text-purple-300">Home</a>41 <a href="/checkout.html" class="block px-4 py-2 text-white hover:bg-gray-800 hover:text-purple-300">Checkout</a>42 <a href="/recent.html" class="block px-4 py-2 text-white hover:bg-gray-800 hover:text-purple-300">Most Recent</a>43 <a href="/contact.html" class="block px-4 py-2 text-white hover:bg-gray-800 hover:text-purple-300">Contact Form</a>44 </div>45 </div>46 <div class="logo absolute left-1/2 transform -translate-x-1/2 text-2xl font-bold text-white">47 <span class="flex items-center">48 <i data-feather="music" class="text-purple-500 mr-2"></i>49 Wavestore.Com50 </span>51 </div>52 <div class="user-icon flex items-center">53 <i data-feather="user" class="text-white w-6 h-6"></i>54 </div>55</div>56 </header>57 58 <!-- Beats Grid Section -->59 <section class="py-20 bg-black">60 <div class="container mx-auto px-4">61 <div class="text-center mb-16">62 <h1 class="text-3xl md:text-4xl font-bold mb-4">Premium Beat Ideas</h1>63 <p class="text-purple-700 max-w-2xl mx-auto">Choose from our curated collection of raw ideas ready for your creative touch</p>64</div>65 66 <!-- Filters -->67 <div class="flex flex-wrap justify-center gap-4 mb-12">68 <button class="px-4 py-2 bg-purple-900 text-purple-700 rounded-full hover:bg-purple-800 transition">All</button>69 <button class="px-4 py-2 bg-gray-800 text-purple-700 rounded-full hover:bg-gray-700 transition">Trap</button>70 <button class="px-4 py-2 bg-gray-800 text-purple-700 rounded-full hover:bg-gray-700 transition">Drill</button>71 <button class="px-4 py-2 bg-gray-800 text-purple-700 rounded-full hover:bg-gray-700 transition">Afrobeat</button>72 <button class="px-4 py-2 bg-gray-800 text-purple-700 rounded-full hover:bg-gray-700 transition">Lo-Fi</button>73</div>74 75 <!-- Grid -->76 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">77 <!-- Beat Card 1 -->78 <div class="beat-card relative group overflow-hidden rounded-xl bg-gray-800 hover:shadow-lg hover:shadow-purple-500/20 transition-all duration-300">79 <div class="relative overflow-hidden h-64">80 <img src="http://static.photos/black/640x360/1" alt="Gold Tier Beat" class="w-full h-full object-cover">81 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>82 <div class="beat-overlay absolute inset-0 flex flex-col justify-end p-4 opacity-0 transition-opacity duration-300 bg-black/60">83 <span class="text-xs font-medium bg-purple-600 text-white px-2 py-1 rounded-full self-start mb-2">Trap</span>84 <h3 class="text-xl font-bold mb-1">Midnight Cruisin'</h3>85 <p class="text-purple-300 text-sm mb-3">Dark melodic trap with haunting pianos</p>86<div class="flex justify-between items-center">87 <span class="text-yellow-400 font-medium">Gold Tier</span>88 <span class="text-white font-bold">$149</span>89 </div>90 </div>91 <div class="absolute top-2 right-2 bg-yellow-500 text-yellow-900 px-2 py-1 rounded-full text-xs font-bold">PREMIUM</div>92 </div>93 </div>94 95 <!-- Beat Card 2 -->96 <div class="beat-card relative group overflow-hidden rounded-xl bg-gray-800 hover:shadow-lg hover:shadow-purple-500/20 transition-all duration-300">97 <div class="relative overflow-hidden h-64">98 <img src="http://static.photos/blue/640x360/2" alt="Silver Tier Beat" class="w-full h-full object-cover">99 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>100 <div class="beat-overlay absolute inset-0 flex flex-col justify-end p-4 opacity-0 transition-opacity duration-300 bg-black/60">101 <span class="text-xs font-medium bg-blue-600 text-white px-2 py-1 rounded-full self-start mb-2">Drill</span>102 <h3 class="text-xl font-bold mb-1">London Nights</h3>103 <p class="text-purple-300 text-sm mb-3">Hard-hitting drill with eerie strings</p>104<div class="flex justify-between items-center">105 <span class="text-gray-300 font-medium">Silver Tier</span>106 <span class="text-white font-bold">$99</span>107 </div>108 </div>109 <div class="absolute top-2 right-2 bg-gray-300 text-gray-900 px-2 py-1 rounded-full text-xs font-bold">STANDARD</div>110 </div>111 </div>112 113 <!-- Beat Card 3 -->114 <div class="beat-card relative group overflow-hidden rounded-xl bg-gray-800 hover:shadow-lg hover:shadow-purple-500/20 transition-all duration-300">115 <div class="relative overflow-hidden h-64">116 <img src="http://static.photos/red/640x360/3" alt="Crystal Tier Beat" class="w-full h-full object-cover">117 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>118 <div class="beat-overlay absolute inset-0 flex flex-col justify-end p-4 opacity-0 transition-opacity duration-300 bg-black/60">119 <span class="text-xs font-medium bg-red-600 text-white px-2 py-1 rounded-full self-start mb-2">Afrobeat</span>120 <h3 class="text-xl font-bold mb-1">Sunshine Groove</h3>121 <p class="text-purple-300 text-sm mb-3">Upbeat afro with warm percussion</p>122<div class="flex justify-between items-center">123 <span class="text-purple-400 font-medium">Crystal Tier</span>124 <span class="text-white font-bold">$199</span>125 </div>126 </div>127 <div class="absolute top-2 right-2 bg-purple-500 text-white px-2 py-1 rounded-full text-xs font-bold">ELITE</div>128 <div class="sparkle" style="top: 20%; left: 30%; animation-delay: 0.3s;"></div>129 <div class="sparkle" style="top: 60%; left: 70%; animation-delay: 0.7s;"></div>130 <div class="sparkle" style="top: 40%; left: 50%; animation-delay: 1.1s;"></div>131 </div>132 </div>133 134 <!-- Beat Card 4 -->135 <div class="beat-card relative group overflow-hidden rounded-xl bg-gray-800 hover:shadow-lg hover:shadow-purple-500/20 transition-all duration-300">136 <div class="relative overflow-hidden h-64">137 <img src="http://static.photos/green/640x360/4" alt="Coal Tier Beat" class="w-full h-full object-cover">138 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>139 <div class="beat-overlay absolute inset-0 flex flex-col justify-end p-4 opacity-0 transition-opacity duration-300 bg-black/60">140 <span class="text-xs font-medium bg-green-600 text-white px-2 py-1 rounded-full self-start mb-2">Lo-Fi</span>141 <h3 class="text-xl font-bold mb-1">Coffee Shop</h3>142 <p class="text-purple-300 text-sm mb-3">Chill vibes with jazzy guitar</p>143<div class="flex justify-between items-center">144 <span class="text-gray-400 font-medium">Coal Tier</span>145 <span class="text-white font-bold">$49</span>146 </div>147 </div>148 </div>149 </div>150 151 <!-- Beat Card 5 -->152 <div class="beat-card relative group overflow-hidden rounded-xl bg-gray-800 hover:shadow-lg hover:shadow-purple-500/20 transition-all duration-300">153 <div class="relative overflow-hidden h-64">154 <img src="http://static.photos/purple/640x360/5" alt="Gold Tier Beat" class="w-full h-full object-cover">155 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>156 <div class="beat-overlay absolute inset-0 flex flex-col justify-end p-4 opacity-0 transition-opacity duration-300 bg-black/60">157 <span class="text-xs font-medium bg-purple-600 text-white px-2 py-1 rounded-full self-start mb-2">Trap</span>158 <h3 class="text-xl font-bold mb-1">Purple Haze</h3>159 <p class="text-purple-300 text-sm mb-3">Dreamy trap with lush synths</p>160<div class="flex justify-between items-center">161 <span class="text-yellow-400 font-medium">Gold Tier</span>162 <span class="text-white font-bold">$149</span>163 </div>164 </div>165 <div class="absolute top-2 right-2 bg-yellow-500 text-yellow-900 px-2 py-1 rounded-full text-xs font-bold">PREMIUM</div>166 </div>167 </div>168 169 <!-- Beat Card 6 -->170 <div class="beat-card relative group overflow-hidden rounded-xl bg-gray-800 hover:shadow-lg hover:shadow-purple-500/20 transition-all duration-300">171 <div class="relative overflow-hidden h-64">172 <img src="http://static.photos/yellow/640x360/6" alt="Crystal Tier Beat" class="w-full h-full object-cover">173 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>174 <div class="beat-overlay absolute inset-0 flex flex-col justify-end p-4 opacity-0 transition-opacity duration-300 bg-black/60">175 <span class="text-xs font-medium bg-yellow-600 text-white px-2 py-1 rounded-full self-start mb-2">Afrobeat</span>176 <h3 class="text-xl font-bold mb-1">Golden Hour</h3>177 <p class="text-purple-300 text-sm mb-3">Vibrant afro with rhythmic drums</p>178<div class="flex justify-between items-center">179 <span class="text-purple-400 font-medium">Crystal Tier</span>180 <span class="text-white font-bold">$199</span>181 </div>182 </div>183 <div class="absolute top-2 right-2 bg-purple-500 text-white px-2 py-1 rounded-full text-xs font-bold">ELITE</div>184 <div class="sparkle" style="top: 30%; left: 20%; animation-delay: 0.5s;"></div>185 <div class="sparkle" style="top: 70%; left: 60%; animation-delay: 0.9s;"></div>186 </div>187 </div>188 </div>189 190 <div class="text-center mt-16">191 <button class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-full font-medium transition">192 Load More Ideas193 </button>194 </div>195 </div>196 </section>197 198 <!-- Footer -->199 <footer class="bg-black border-t border-gray-800">200 <div class="container mx-auto px-4 py-12">201 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">202 <div>203 <h3 class="text-xl font-bold mb-4 flex items-center">204 <i data-feather="music" class="mr-2 text-purple-500"></i>205 Waveform Beatz206 </h3>207 <p class="text-purple-400 mb-4">Premium raw beat ideas for modern producers</p>208 <div class="flex space-x-4">209 <a href="https://instagram.com/waveformbeatz" class="text-purple-400 hover:text-white transition">210<i data-feather="instagram"></i>211 </a>212 <a href="https://twitter.com/waveformbeatz" class="text-gray-400 hover:text-white transition">213 <i data-feather="twitter"></i>214 </a>215 <a href="https://youtube.com/@waveformbeatz" class="text-gray-400 hover:text-white transition">216 <i data-feather="youtube"></i>217 </a>218 </div>219 </div>220 <div>221 <h3 class="font-bold mb-4">Explore</h3>222 <ul class="space-y-2">223 <li><a href="/" class="text-purple-400 hover:text-white transition">Home</a></li>224 <li><a href="/beats.html" class="text-purple-400 hover:text-white transition">Beat Ideas</a></li>225 <li><a href="/about.html" class="text-purple-400 hover:text-white transition">About Us</a></li>226 <li><a href="/contact.html" class="text-purple-400 hover:text-white transition">Contact</a></li>227</ul>228 </div>229 <div>230 <h3 class="font-bold mb-4">Legal</h3>231 <ul class="space-y-2">232 <li><a href="/legal/terms.html" class="text-purple-400 hover:text-white transition">Terms</a></li>233 <li><a href="/legal/privacy.html" class="text-purple-400 hover:text-white transition">Privacy</a></li>234 <li><a href="/legal/licensing.html" class="text-purple-400 hover:text-white transition">Licensing</a></li>235</ul>236 </div>237 <div>238 <h3 class="font-bold mb-4">Newsletter</h3>239 <p class="text-purple-400 mb-4">Get exclusive previews of new beats</p>240 <div class="flex">241 <input type="email" placeholder="Your email" class="bg-gray-800 text-purple-100 px-4 py-2 rounded-l-full focus:outline-none focus:ring-2 focus:ring-purple-500 w-full">242<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-r-full">243 <i data-feather="send"></i>244 </button>245 </div>246 </div>247 </div>248 <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm">249 <p>© 2025 Waveform Beatz. All rights reserved.</p>250 </div>251 </div>252 </footer>253 254 <script>255 // Initialize feather icons256 feather.replace();257 258 // Menu toggle259 document.querySelector('.menu button').addEventListener('click', () => {260 document.querySelector('.dropdown-menu').classList.toggle('hidden');261 });262 263 // Close menu when clicking outside264 document.addEventListener('click', (e) => {265 if (!e.target.closest('.menu')) {266 document.querySelector('.dropdown-menu').classList.add('hidden');267 }268 });269 270 // Add scroll animation to beat cards271 document.querySelectorAll('.beat-card').forEach((card, index) => {272 anime({273 targets: card,274 opacity: [0, 1],275 translateY: [50, 0],276 duration: 800,277 delay: index * 100,278 easing: 'easeOutExpo'279 });280 });281 </script>282</body>283</html>