Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PresetShare - Discover & Share Audio Presets</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> | |
| .preset-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .filter-checkbox:checked + .filter-label { | |
| background-color: #6366f1; | |
| color: white; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #6366f1, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .nav-link:hover { | |
| background: linear-gradient(90deg, #6366f1, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 font-sans"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-8"> | |
| <a href="#" class="flex items-center"> | |
| <img src="https://presetshare.com/img/brand-logo.svg" alt="PresetShare" class="h-8"> | |
| </a> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="nav-link font-medium">Library</a> | |
| <a href="#" class="nav-link font-medium">Bundles</a> | |
| <a href="#" class="nav-link font-medium">Quests</a> | |
| <a href="#" class="nav-link font-medium">Tracks</a> | |
| <a href="#" class="nav-link font-medium">Samples</a> | |
| <a href="#" class="nav-link font-medium">Community</a> | |
| </nav> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <div class="hidden md:flex space-x-2"> | |
| <a href="#" class="px-4 py-2 rounded-full bg-gray-100 hover:bg-gray-200 text-sm font-medium">Sign In</a> | |
| <a href="#" class="px-4 py-2 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium">Join Free</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Sidebar Filters --> | |
| <aside class="lg:w-1/4"> | |
| <div class="bg-white rounded-xl shadow-sm p-6 sticky top-24"> | |
| <h3 class="text-lg font-bold mb-4 gradient-text">Filters</h3> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-2">Keywords</label> | |
| <input type="text" placeholder="Search presets..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-2">Synthesizer</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>All Synths</option> | |
| <option>Vital</option> | |
| <option>Serum</option> | |
| <option>Serum 2</option> | |
| <option>Massive</option> | |
| <option>Phase Plant</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-2">Genre</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>All Genres</option> | |
| <option>Drum and Bass</option> | |
| <option>Hardcore / Hardstyle</option> | |
| <option>Future Bass</option> | |
| <option>House</option> | |
| <option>Psytrance</option> | |
| <option>Cinematic</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-2">Sound Type</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>All Types</option> | |
| <option>Lead</option> | |
| <option>Bass</option> | |
| <option>Pad</option> | |
| <option>Pluck</option> | |
| <option>Atmosphere</option> | |
| <option>Drone</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-2">Options</label> | |
| <div class="space-y-2"> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="filter-checkbox hidden"> | |
| <span class="filter-label px-3 py-1 border border-gray-300 rounded-full text-sm">With MIDI</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="filter-checkbox hidden"> | |
| <span class="filter-label px-3 py-1 border border-gray-300 rounded-full text-sm">Used in tracks</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-2">Sorting</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>Relevance</option> | |
| <option>Newest</option> | |
| <option>Most liked</option> | |
| <option>Most downloaded</option> | |
| <option>Most commented</option> | |
| <option>Random</option> | |
| </select> | |
| </div> | |
| <button class="w-full py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium">Apply Filters</button> | |
| </div> | |
| </aside> | |
| <!-- Presets Grid --> | |
| <div class="lg:w-3/4"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-2xl font-bold gradient-text">Latest Presets</h1> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium">Grid</button> | |
| <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium">List</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Preset Card 1 --> | |
| <div class="preset-card bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-lg"><a href="#" class="hover:text-indigo-600">The Silent Knife</a></h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-indigo-600"><i class="far fa-heart"></i></button> | |
| <button class="text-gray-400 hover:text-indigo-600"><i class="fas fa-download"></i></button> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-600 mb-3"> | |
| <a href="#" class="text-indigo-600 hover:underline">Vital</a> > | |
| <a href="#" class="text-indigo-600 hover:underline">Hardcore / Hardstyle</a> > | |
| <a href="#" class="text-indigo-600 hover:underline">Lead</a> | |
| </div> | |
| <div class="flex items-center justify-between text-sm text-gray-500"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://presetshare.com/avatars/user/151043/small-1897f2b7ae096b1723c009952a41f5d4.png" alt="T-LIQER" class="w-6 h-6 rounded-full"> | |
| <a href="#" class="hover:text-indigo-600">T-LIQER</a> | |
| </div> | |
| <span>Today</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 flex justify-between text-xs text-gray-500 border-t"> | |
| <span><i class="far fa-heart mr-1"></i> 0</span> | |
| <span><i class="fas fa-download mr-1"></i> 0</span> | |
| <span><i class="far fa-comment mr-1"></i> 0</span> | |
| </div> | |
| </div> | |
| <!-- Preset Card 2 --> | |
| <div class="preset-card bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-lg"><a href="#" class="hover:text-indigo-600">Oldschool Stab</a></h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-indigo-600"><i class="far fa-heart"></i></button> | |
| <button class="text-gray-400 hover:text-indigo-600"><i class="fas fa-download"></i></button> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-600 mb-3"> | |
| <a href="#" class="text-indigo-600 hover:underline">Vital</a> > | |
| <a href="#" class="text-indigo-600 hover:underline">Hardcore / Hardstyle</a> > | |
| <a href="#" class="text-indigo-600 hover:underline">Lead</a> | |
| </div> | |
| <div class="flex items-center justify-between text-sm text-gray-500"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://presetshare.com/avatars/user/151043/small-1897f2b7ae096b1723c009952a41f5d4.png" alt="T-LIQER" class="w-6 h-6 rounded-full"> | |
| <a href="#" class="hover:text-indigo-600">T-LIQER</a> | |
| </div> | |
| <span>Yesterday</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 flex justify-between text-xs text-gray-500 border-t"> | |
| <span><i class="far fa-heart mr-1"></i> 0</span> | |
| <span><i class="fas fa-download mr-1"></i> 0</span> | |
| <span><i class="far fa-comment mr-1"></i> 0</span> | |
| </div> | |
| </div> | |
| <!-- Preset Card 3 --> | |
| <div class="preset-card bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-lg"><a href="#" class="hover:text-indigo-600">Angelcore lead #2</a></h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-indigo-600"><i class="far fa-heart"></i></button> | |
| <button class="text-gray-400 hover:text-indigo-600"><i class="fas fa-download"></i></button> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-600 mb-3"> | |
| <a href="#" class="text-indigo-600 hover:underline">Serum</a> > | |
| <a href="#" class="text-indigo-600 hover:underline">Other</a> > | |
| <a href="#" class="text-indigo-600 hover:underline">Lead</a> | |
| </div> | |
| <div class="flex items-center justify-between text-sm text-gray-500"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://presetshare.com/avatars/user/221315/small-a0f7535c79341c422b57ef655125554b.png" alt="Fxreyxs" class="w-6 h-6 rounded-full"> | |
| <a href="#" class="hover:text-indigo-600">Fxreyxs</a> | |
| </div> | |
| <span>Yesterday</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 flex justify-between text-xs text-gray-500 border-t"> | |
| <span><i class="far fa-heart mr-1"></i> 3</span> | |
| <span><i class="fas fa-download mr-1"></i> 11</span> | |
| <span><i class="far fa-comment mr-1"></i> 0</span> | |
| </div> | |
| </div> | |
| <!-- Preset Card 4 --> | |
| <div class="preset-card bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-lg"><a href="#" class="hover:text-indigo-600">Digital LD</a></h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-indigo-600"><i class="far fa-heart"></i></button> | |
| <button class="text-gray-400 hover:text-indigo-600"><i class="fas fa-download"></i></button> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-600 mb-3"> | |
| <a href="#" class="text-indigo-600 hover:underline">Serum</a> > | |
| <a href="#" class="text-indigo-600 hover:underline">Other</a> > | |
| <a href="#" class="text-indigo-600 hover:underline">Lead</a> | |
| </div> | |
| <div class="flex items-center justify-between text-sm text-gray-500"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://presetshare.com/avatars/user/221315/small-a0f7535c79341c422b57ef655125554b.png" alt="Fxreyxs" class="w-6 h-6 rounded-full"> | |
| <a href="#" class="hover:text-indigo-600">Fxreyxs</a> | |
| </div> | |
| <span>Yesterday</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 flex justify-between text-xs text-gray-500 border-t"> | |
| <span><i class="far fa-heart mr-1"></i> 0</span> | |
| <span><i class="fas fa-download mr-1"></i> 4</span> | |
| <span><i class="far fa-comment mr-1"></i> 0</span> | |
| </div> | |
| </div> | |
| <!-- Preset Card 5 --> | |
| <div class="preset-card bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-lg"><a href="#" class="hover:text-indigo-600">l_smurfette</a></h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-indigo-600"><i class="far fa-heart"></i></button> | |
| <button class="text-gray-400 hover:text-indigo-600"><i class="fas fa-download"></i></button> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-600 mb-3"> | |
| <a href="#" class="text-indigo-600 hover:underline">Vital</a> > | |
| <a href="#" class="text-indigo-600 hover:underline">Multigenre</a> > | |
| <a href="#" class="text-indigo-600 hover:underline">Lead</a> | |
| </div> | |
| <div class="flex items-center justify-between text-sm text-gray-500"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://presetshare.com/avatars/user/8904/small-6e4e1f191e85e0f4af5b3c7f500e106c.png" alt="GrindGrig" class="w-6 h-6 rounded-full"> | |
| <a href="#" class="hover:text-indigo-600">GrindGrig</a> | |
| </div> | |
| <span>Yesterday</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 flex justify-between text-xs text-gray-500 border-t"> | |
| <span><i class="far fa-heart mr-1"></i> 0</span> | |
| <span><i class="fas fa-download mr-1"></i> 5</span> | |
| <span><i class="far fa-comment mr-1"></i> 0</span> | |
| </div> | |
| </div> | |
| <!-- Preset Card 6 --> | |
| <div class="preset-card bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-lg"><a href="#" class="hover:text-indigo-600">b_smurf</a></h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-indigo-600"><i class="far fa-heart"></i></button> | |
| <button class="text-gray-400 hover:text-indigo-600"><i class="fas fa-download"></i></button> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-600 mb-3"> | |
| <a href="#" class="text-indigo-600 hover:underline">Vital</a> > | |
| <a href="#" class="text-indigo-600 hover:underline">Drum and Bass</a> > | |
| <a href="#" class="text-indigo-600 hover:underline">Bass</a> | |
| </div> | |
| <div class="flex items-center justify-between text-sm text-gray-500"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://presetshare.com/avatars/user/8904/small-6e4e1f191e85e0f4af5b3c7f500e106c.png" alt="GrindGrig" class="w-6 h-6 rounded-full"> | |
| <a href="#" class="hover:text-indigo-600">GrindGrig</a> | |
| </div> | |
| <span>Yesterday</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 flex justify-between text-xs text-gray-500 border-t"> | |
| <span><i class="far fa-heart mr-1"></i> 0</span> | |
| <span><i class="fas fa-download mr-1"></i> 2</span> | |
| <span><i class="far fa-comment mr-1"></i> 0</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex justify-center mt-8"> | |
| <nav class="flex items-center space-x-2"> | |
| <a href="#" class="px-3 py-1 bg-indigo-600 text-white rounded-lg">1</a> | |
| <a href="#" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg">2</a> | |
| <a href="#" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg">3</a> | |
| <a href="#" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg">4</a> | |
| <a href="#" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg">5</a> | |
| <span class="px-3 py-1">...</span> | |
| <a href="#" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg">646</a> | |
| <a href="#" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-lg">Next</a> | |
| </nav> | |
| </div> | |
| <!-- Quests Section --> | |
| <div class="mt-12"> | |
| <h2 class="text-xl font-bold mb-6 gradient-text">Featured Quests</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Quest 1 --> | |
| <div class="bg-white rounded-xl shadow-sm p-5"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <h3 class="font-bold text-lg">Cult Member- Fantastic Life Pluck</h3> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-gem text-purple-500"></i> | |
| <i class="fas fa-gem text-purple-500"></i> | |
| <i class="fas fa-gem text-purple-500"></i> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-600 mb-4"> | |
| <span class="text-indigo-600">Vital</span> > | |
| <span class="text-indigo-600">House</span> > | |
| <span class="text-indigo-600">Pluck</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://secure.gravatar.com/avatar/ec0764da632a6bc53b631f322c2657a5?r=g&s=64&d=retro" alt="chaosprod125" class="w-6 h-6 rounded-full"> | |
| <span>chaosprod125</span> | |
| </div> | |
| <a href="#" class="text-indigo-600 hover:underline">View quest</a> | |
| </div> | |
| </div> | |
| <!-- Quest 2 --> | |
| <div class="bg-white rounded-xl shadow-sm p-5"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <h3 class="font-bold text-lg">Euphoric HC Lead So In Love</h3> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-gem text-purple-500"></i> | |
| <i class="fas fa-gem text-purple-500"></i> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-600 mb-4"> | |
| <span class="text-indigo-600">Serum</span> > | |
| <span class="text-indigo-600">Hardcore / Hardstyle</span> > | |
| <span class="text-indigo-600">Lead</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://presetshare.com/avatars/user/130049/small-84f38425d043cdbf45ba4223810169de.png" alt="TheShowboat" class="w-6 h-6 rounded-full"> | |
| <span>TheShowboat</span> | |
| </div> | |
| <a href="#" class="text-indigo-600 hover:underline">View quest</a> | |
| </div> | |
| </div> | |
| <!-- Quest 3 --> | |
| <div class="bg-white rounded-xl shadow-sm p-5"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <h3 class="font-bold text-lg">Presets</h3> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-gem text-purple-500"></i> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-600 mb-4"> | |
| <span class="text-indigo-600">Various</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://secure.gravatar.com/avatar/abd8495a80b626e77329a2f53a9d9796?r=g&s=64&d=retro" alt="Retrospectre" class="w-6 h-6 rounded-full"> | |
| <span>Retrospectre</span> | |
| </div> | |
| <a href="#" class="text-indigo-600 hover:underline">View quest</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bundles Section --> | |
| <div class="mt-12"> | |
| <h2 class="text-xl font-bold mb-6 gradient-text">Popular Bundles</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Bundle 1 --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="relative h-40 bg-gray-200"> | |
| <img src="https://presetshare.com/covers/bundle/9746/4537eb6356daec1700ab7d6c9dd79696.png" alt="Lo-Fi Essentials" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-xs"> | |
| 33 <i class="fas fa-share-alt ml-1"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Lo-Fi Essentials</h3> | |
| <div class="flex justify-between items-center text-sm text-gray-600"> | |
| <span>37 presets</span> | |
| <a href="#" class="text-indigo-600 hover:underline">View bundle</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bundle 2 --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="relative h-40 bg-gray-200"> | |
| <img src="https://presetshare.com/covers/bundle/4054/d56685b92f2d54803792442479e7f33a.png" alt="Xmas sounds vol. 1" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-xs"> | |
| 52 <i class="fas fa-share-alt ml-1"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Xmas sounds vol. 1</h3> | |
| <div class="flex justify-between items-center text-sm text-gray-600"> | |
| <span>19 presets</span> | |
| <a href="#" class="text-indigo-600 hover:underline">View bundle</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bundle 3 --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="relative h-40 bg-gray-200"> | |
| <img src="https://presetshare.com/covers/bundle/6703/8283c04224a739a992222ce625731269.png" alt="Hardstyle Drums" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-xs"> | |
| 73 <i class="fas fa-share-alt ml-1"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Hardstyle Drums</h3> | |
| <div class="flex justify-between items-center text-sm text-gray-600"> | |
| <span>36 presets</span> | |
| <a href="#" class="text-indigo-600 hover:underline">View bundle</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-400 py-12 mt-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <img src="https://presetshare.com/img/brand-logo.svg" alt="PresetShare" class="h-8 mb-4"> | |
| <p class="text-sm mb-4">©2025 Copyright by DsgDnB. All rights reserved.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-vk text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord text-xl"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-medium mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Library</a></li> | |
| <li><a href="#" class="hover:text-white">Quests</a></li> | |
| <li><a href="#" class="hover:text-white">Bundles</a></li> | |
| <li><a href="#" class="hover:text-white">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-medium mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">About</a></li> | |
| <li><a href="#" class="hover:text-white">Terms of use</a></li> | |
| <li><a href="#" class="hover:text-white">Privacy policy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-medium mb-4">Join Our Community</h3> | |
| <p class="text-sm mb-4">Sign up to discover and share audio presets with producers worldwide.</p> | |
| <div class="space-y-3"> | |
| <a href="#" class="block w-full px-4 py-2 bg-white text-gray-900 rounded-lg font-medium text-center hover:bg-gray-200">Sign Up Free</a> | |
| <a href="#" class="block w-full px-4 py-2 border border-white text-white rounded-lg font-medium text-center hover:bg-white hover:text-gray-900">Sign In</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Cookie Consent --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-gray-800 text-white p-4 shadow-lg"> | |
| <div class="container mx-auto flex flex-col md:flex-row items-center justify-between"> | |
| <p class="mb-4 md:mb-0 text-sm">By continuing to browse this site you are agreeing to our use of cookies 🍪</p> | |
| <div class="flex space-x-3"> | |
| <a href="#" class="px-4 py-2 text-sm border border-gray-600 rounded-lg hover:bg-gray-700">Privacy Policy</a> | |
| <a href="#" class="px-4 py-2 text-sm bg-indigo-600 rounded-lg hover:bg-indigo-700">OK</a> | |
| </div> | |
| </div> | |
| </div> | |
| <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=whoarewe/presetshare-clone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |