Create a fresh niche concept called “LoopLodge – A Members’ Hideout for Indie Loops & Tracks.” It focuses on indie producers sharing loop packs, stems, and full tracks. Vibe: modern, minimal, premium.

Tech & File Structure

Pure HTML5, CSS, and vanilla JavaScript only.

All CSS in css/styles.css

All JS in js/ (use ES modules where sensible).

Provide a tidy, documented codebase.

/
index.html
explore.html
track.html (single track view)
profile.html (artist profile)
pricing.html
about.html
terms.html
privacy.html
assets/
img/ (placeholder logos, covers, avatars)
audio/ (sample demo tracks)
css/
styles.css
js/
app.js (bootstraps, routing helpers, state)
player.js (audio player component)
library.js (render grids/lists, filters, search)
modals.js (reusable dialog/toast)
mock-api.js (JSON mocks, localStorage helpers)
downloads.js (safe download handling)

Pages & Sections

Home (index.html)

Hero: brand logo, tagline, CTA buttons (Explore / Join).

Featured carousel (new & trending loops/tracks).

“Why LoopLodge” features grid (royalty terms, curated quality, creator tools).

Newsletter signup (mock).

Explore (explore.html)

Search bar with tags/filters: Genre, Mood, BPM, Key, Vocals (Y/N), License (Free/Member).

Responsive masonry/grid of releases with cover art, quick-play preview, like/save.

Sort: Trending, New, Most Downloaded, Editor’s Picks.

Track Detail (track.html)

Large cover + metadata (Artist, BPM, Key, Genre, Mood, Release date, License).

Pro Audio Player console (see “Player Features” below).

Download buttons (Full Track, Stems, Loop Pack). If membership-only, show lock UI with “Join to Download.”

Related tracks carousel.

Artist Profile (profile.html)

Banner, avatar, bio, socials, location.

Tabs: Releases, Loop Packs, Playlists, About.

Follow/Message (mock).

Pricing (pricing.html)

Free vs Member+ tiers table.

Member features: unlimited streaming, downloads of member-only packs, creator analytics (future), ad-free.

“Join Now” CTA (mock modal for signup).

About / Terms / Privacy

Professional copy skeletons; clearly mark license model (“Royalty-free for end users; creators retain ownership,” etc.—placeholder text).

Player Features (Professional Console)

Build a polished, accessible audio player component used across pages:

Large play/pause, next/prev, seek bar with waveform-style progress (CSS/Canvas faux waveform is fine—no external libs required).

Volume, mute, loop (A–B optional), shuffle, repeat.

Current time / total duration.

Keyboard shortcuts: Space (play/pause), ←/→ (seek), ↑/↓ (volume).

Playlist queue (next up), cover thumbnail, track title/artist.

Mobile-first controls (thumb-friendly).

Persist last position & volume in localStorage.

Downloads

Download buttons that:

Trigger file save for demo assets in assets/audio/.

Use download attribute and safe filename formatting.

Show a confirmation toast (“Thanks! Counting 1 download.”) and increment a local mock counter.

If user not “Member+” (mock flag), show locked state with upgrade prompt.

Membership (Front-end Mock)

Use localStorage to simulate auth + tier:

user: { id, name, avatar, tier: "free" | "member" }

“Join Now” opens a modal with email/password fields and a “Simulate Upgrade” button that sets tier to member.

If tier is free, downloads of Member-only files show locked UI; streaming always allowed.

Data Model (Mock JSON)

Create a js/mock-api.js exporting sample data:

export const tracks = [
{
id: "trk_001",
title: "Neon Alley",
artist: "Kora Vale",
bpm: 124,
key: "Am",
genre: "Synthwave",
mood: ["Driving","Retro"],
cover: "assets/img/covers/neon-alley.jpg",
audio: "assets/audio/neon-alley-demo.mp3",
stems: [
{ label: "Drums", file: "assets/audio/neon-alley-drums.mp3" },
{ label: "Bass", file: "assets/audio/neon-alley-bass.mp3" }
],
license: "member", // "free" or "member"
downloads: 1520,
likes: 342,
date: "2025-08-11"
},
// add 10–15 varied examples across genres/BPM/keys
];
export const artists = [
{ id: "art_001", name: "Kora Vale", avatar: "assets/img/avatars/kora.jpg", bio: "…" }
];

UI/UX Requirements

Design: modern, minimal, premium; glassy cards, soft shadows, rounded corners, smooth hover/focus states, micro-interactions.

Dark/Light mode toggle with prefers-color-scheme support.

Responsive from 360px up; grid/list switches gracefully.

Accessibility: semantic HTML5, aria labels for player controls, focus rings, sufficient contrast, visible skip-to-content.

Performance: lazy-load images, loading="lazy", compress demo assets, defer JS, no blocking CSS/JS.

SEO: unique titles/meta per page, Open Graph/Twitter tags, JSON-LD for MusicRecording/Person where relevant.

Analytics hooks (mock): window.llTrack(eventName, payload) called on play, pause, download, like, follow.

CSS (in css/styles.css)

Variables for color system (light/dark), spacing, radii, elevation.

Utility classes for grid, flex, buttons, badges, chips (genre/mood), cards, toasts, skeleton loaders.

Player console styles: large central controls, animated progress, accessible sliders.

JS (in js/)

app.js: router-ish helpers for page init, theme toggle, auth mock, global toasts.

player.js: class AudioPlayer(el, options) with public methods: load(track), play(), pause(), seek(seconds), setVolume(v).

library.js: render explore grid; search, filter, sort; debounce input; empty state UI.

modals.js: open/close animations, focus trap.

downloads.js: initDownloadButtons(user, track); gate by tier; increment local counters; show toast.

Inline page bootstraps should be minimal; import modules.

Nice-to-Haves (include if time permits)

Service Worker for offline caching of UI + last played track (PWA install prompt).

“Create Playlist” (local only).

Waveform preview rendered from <canvas> based on precomputed amplitude array included in mock data.

Deliverables

Fully working front-end with demo assets and mocks—no external frameworks.

Clean comments explaining where to wire real APIs later.

A brief README (top of index.html as an HTML comment is fine) describing setup and structure.

Remember: - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Looplodge
-emoji: 🏢
-colorFrom: pink
-colorTo: red
+title: looplodge
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

explore.html

@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Explore - LoopLodge</title>
+    <meta name="description" content="Browse our collection of indie loops, stems, and full tracks. Filter by genre, mood, BPM and more.">
+    <link rel="icon" type="image/x-icon" href="/assets/img/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link href="/css/styles.css" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        dark: {
+                            800: '#1e293b',
+                            900: '#0f172a',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50 dark:bg-dark-900 text-gray-800 dark:text-gray-200 min-h-screen flex flex-col">
+    <!-- Navigation -->
+    <nav class="bg-white dark:bg-dark-800 shadow-sm">
+        <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">
+                    <a href="/" class="flex items-center space-x-2">
+                        <svg class="w-8 h-8 text-primary-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2"/>
+                            <path d="M8 16C8 16 9.5 14 12 14C14.5 14 16 16 16 16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                            <path d="M8 8H8.01M16 8H16.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                        <span class="text-xl font-bold text-primary-600">LoopLodge</span>
+                    </a>
+                </div>
+                <div class="hidden md:flex items-center space-x-8">
+                    <a href="/explore.html" class="text-primary-600 dark:text-primary-400 px-3 py-2 text-sm font-medium border-b-2 border-primary-600">Explore</a>
+                    <a href="/pricing.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Pricing</a>
+                    <a href="/about.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">About</a>
+                    <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-dark-700">
+                        <i data-feather="moon" class="hidden dark:block"></i>
+                        <i data-feather="sun" class="dark:hidden"></i>
+                    </button>
+                    <a href="#" class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-md text-sm font-medium">Sign In</a>
+                </div>
+                <div class="md:hidden flex items-center">
+                    <button id="mobile-menu-button" class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-dark-700">
+                        <i data-feather="menu"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Mobile menu -->
+        <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-dark-800 pb-3 px-4">
+            <div class="pt-2 space-y-1">
+                <a href="/explore.html" class="block px-3 py-2 text-base font-medium text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900 rounded">Explore</a>
+                <a href="/pricing.html" class="block px-3 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Pricing</a>
+                <a href="/about.html" class="block px-3 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">About</a>
+                <button id="mobile-theme-toggle" class="w-full text-left px-3 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 flex items-center">
+                    <span class="mr-2">Toggle Theme</span>
+                    <i data-feather="moon" class="hidden dark:block"></i>
+                    <i data-feather="sun" class="dark:hidden"></i>
+                </button>
+                <a href="#" class="block w-full text-center bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-md text-base font-medium mt-2">Sign In</a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="flex-grow">
+        <!-- Search & Filters -->
+        <section class="bg-white dark:bg-dark-800 shadow-sm">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                <div class="flex flex-col md:flex-row justify-between items-start md:items-center space-y-4 md:space-y-0">
+                    <h1 class="text-2xl font-bold">Explore Library</h1>
+                    <div class="relative w-full md:w-64">
+                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                            <i data-feather="search" class="w-5 h-5 text-gray-400"></i>
+                        </div>
+                        <input type="text" placeholder="Search tracks..." class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-dark-700 rounded-md leading-5 bg-white dark:bg-dark-800 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+                    </div>
+                </div>
+                
+                <div class="mt-6">
+                    <div class="flex flex-wrap gap-2">
+                        <button class="px-3 py-1 bg-primary-600 text-white text-sm rounded-full flex items-center">
+                            <span>All</span>
+                        </button>
+                        <button class="px-3 py-1 bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 text-sm rounded-full flex items-center hover:bg-gray-200 dark:hover:bg-dark-600">
+                            <span>Synthwave</span>
+                        </button>
+                        <button class="px-3 py-1 bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 text-sm rounded-full flex items-center hover:bg-gray-200 dark:hover:bg-dark-600">
+                            <span>Lo-fi</span>
+                        </button>
+                        <button class="px-3 py-1 bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 text-sm rounded-full flex items-center hover:bg-gray-200 dark:hover:bg-dark-600">
+                            <span>Hip Hop</span>
+                        </button>
+                        <button class="px-3 py-1 bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 text-sm rounded-full flex items-center hover:bg-gray-200 dark:hover:bg-dark-600">
+                            <span>EDM</span>
+                        </button>
+                        <button class="px-3 py-1 bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 text-sm rounded-full flex items-center hover:bg-gray-200 dark:hover:bg-dark-600">
+                            <span>Ambient</span>
+                        </button>
+                        <button class="px-3 py-1 bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 text-sm rounded-full flex items-center hover:bg-gray-200 dark:hover:bg-dark-600">
+                            <span>Jazz</span>
+                        </button>
+                        <button class="px-3 py-1 bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 text-sm rounded-full flex items-center hover:bg-gray-200 dark:hover:bg-dark-600">
+                            <span>Rock</span>
+                        </button>
+                    </div>
+                    
+                    <div class="mt-4 flex flex-wrap items-center gap-4">
+                        <div class="flex items-center space-x-2">
+                            <span class="text-sm text-gray-600 dark:text-gray-400">BPM:</span>
+                            <select class="block w-24 pl-3 pr-10 py-2 text-base border border-gray-300 dark:border-dark-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent sm:text-sm rounded-md bg-white dark:bg-dark-800">
+                                <option>Any</option>
+                                <option>60-80</option>
+                                <option>80-100</option>
+                                <option>100-120</option>
+                                <option>120-140</option>
+                                <option>140+</option>
+                            </select>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <span class="text-sm text-gray-600 dark:text-gray-400">Key:</span>
+                            <select class="block w-24 pl-3 pr-10 py-2 text-base border border-gray-300 dark:border-dark-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent sm:text-sm rounded-md bg-white dark:bg-dark-800">
+                                <option>Any</option>
+                                <option>C</option>
+                                <option>C#</option>
+                                <option>D</option>
+                                <option>D#</option>
+                                <option>E</option>
+                                <option>F</option>
+                                <option>F#</option>
+                                <option>G</option>
+                                <option>G#</option>
+                                <option>A</option>
+                                <option>A#</option>
+                                <option>B</option>
+                            </select>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <span class="text-sm text-gray-600 dark:text-gray-400">License:</span>
+                            <select class="block w-24 pl-3 pr-10 py-2 text-base border border-gray-300 dark:border-dark-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent sm:text-sm rounded-md bg-white dark:bg-dark-800">
+                                <option>Any</option>
+                                <option>Free</option>
+                                <option>Member</option>
+                            </select>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <span class="text-sm text-gray-600 dark:text-gray-400">Sort by:</span>
+                            <select class="block w-32 pl-3 pr-10 py-2 text-base border border-gray-300 dark:border-dark-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent sm:text-sm rounded-md bg-white dark:bg-dark-800">
+                                <option>Trending</option>
+                                <option>Newest</option>
+                                <option>Most Downloads</option>
+                                <option>Editor's Picks</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        
+        <!-- Tracks Grid -->
+        <section class="py-8">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                    <!-- Track Card 1 -->
+                    <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
+                        <div class="relative">
+                            <img src="https://source.unsplash.com/random/400x400/?music,synthwave" alt="Track cover" class="w-full h-48 object-cover">
+                            <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600">
+                                <i data-feather="play" class="w-4 h-4 text-primary-600"></i>
+                            </button>
+                        </div>
+                        <div class="p-4">
+                            <h3 class="font-bold text-lg mb-1">Midnight Drive</h3>
+                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Nova Beats</p>
+                            <div class="flex justify-between items-center">
+                                <div class="flex space-x-2">
+                                    <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Synthwave</span>
+                                    <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">128 BPM</span>
+                                </div>
+                                <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
+                                    <i data-feather="download" class="w-4 h-4 mr-1"></i>
+                                    <span>1.2K</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Track Card 2 -->
+                    <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
+                        <div class="relative">
+                            <img src="https://source.unsplash.com/random/400x400/?music,lofi" alt="Track cover" class="w-full h-48 object-cover">
+                            <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600">
+                                <i data-feather="play" class="w-4 h-4 text-primary-600"></i>
+                            </button>
+                        </div>
+                        <div class="p-4">
+                            <h3 class="font-bold text-lg mb-1">Coffee Shop</h3>
+                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Chill Pill</p>
+                            <div class="flex justify-between items-center">
+                                <div class="flex space-x-2">
+                                    <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Lo-fi</span>
+                                    <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">85 BPM</span>
+                                </div>
+                                <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
+                                    <i data-feather="download" class="w-4 h-4 mr-1"></i>
+                                    <span>856</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Track Card 3 -->
+                    <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
+                        <div class="relative">
+                            <img src="https://source.unsplash.com/random/400x400/?music,hiphop" alt="Track cover" class="w-full h-48 object-cover">
+                            <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600">
+                                <i data-feather="play" class="w-4 h-4 text-primary-600"></i>
+                            </button>
+                        </div>
+                        <div class="p-4">
+                            <h3 class="font-bold text-lg mb-1">Urban Flow</h3>
+                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Metro Sounds</p>
+                            <div class="flex justify-between items-center">
+                                <div class="flex space-x-2">
+                                    <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Hip Hop</span>
+                                    <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">95 BPM</span>
+                                </div>
+                                <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
+                                    <i data-feather="download" class="w-4 h-4 mr-1"></i>
+                                    <span>1.5K</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Track Card 4 -->
+                    <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
+                        <div class="relative">
+                            <img src="https://source.unsplash.com/random/400x400/?music,electronic" alt="Track cover" class="w-full h-48 object-cover">
+                            <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600">
+                                <i data-feather="play" class="w-4 h-4 text-primary-600"></i>
+                            </button>
+                        </div>
+                        <div class="p-4">
+                            <h3 class="font-bold text-lg mb-1">Digital Dreams</h3>
+                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Electro Nova</p>
+                            <div class="flex justify-between items-center">
+                                <div class="flex space-x-2">
+                                    <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">EDM</span>
+                                    <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">128 BPM</span>
+                                </div>
+                                <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
+                                    <i data-feather="download" class="w-4 h-4 mr-1"></i>
+                                    <span>2.1K</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Track Card 5 -->
+                    <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
+                        <div class="relative">
+                            <img src="https://source.unsplash.com/random/400x400/?music,ambient" alt="Track cover" class="w-full h-48 object-cover">
+                            <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600">
+                                <i data-feather="play" class="w-4 h-4 text-primary-600"></i>
+                            </button>
+                        </div>
+                        <div class="p-4">
+                            <h3 class="font-bold text-lg mb-1">Floating Clouds</h3>
+                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Aether</p>
+                            <div class="flex justify-between items-center">
+                                <div class="flex space-x-2">
+                                    <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Ambient</span>
+                                    <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">60 BPM</span>
+                                </div>
+                                <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
+                                    <i data-feather="download" class="w-4 h-4 mr-1"></i>
+                                    <span>723</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Track Card 6 -->
+                    <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
+                        <div class="relative">
+                            <img src="https://source.unsplash.com/random/400x400/?music,jazz" alt="Track cover" class="w-full h-48 object-cover">
+                            <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600">
+                                <i data-feather="play" class="w-4 h-4 text-primary-600"></i>
+                            </button>
+                        </div>
+                        <div class="p-4">
+                            <h3 class="font-bold text-lg mb-1">Smooth Groove</h3>
+                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Jazz Cat</p>
+                            <div class="flex justify-between items-center">
+                                <div class="flex space-x-2">
+                                    <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Jazz</span>
+                                    <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">90 BPM</span>
+                                </div>
+                                <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
+                                    <i data-feather="download" class="w-4 h-4 mr-1"></i>
+                                    <span>612</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Track Card 7 -->
+                    <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
+                        <div class="relative">
+                            <img src="https://source.unsplash.com/random/400x400/?music,rock" alt="Track cover" class="w-full h-48 object-cover">
+                            <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600">
+                                <i data-feather="play" class="w-4 h-4 text-primary-600"></i>
+                            </button>
+                        </div>
+                        <div class="p-4">
+                            <h3 class="font-bold text-lg mb-1">Electric Storm</h3>
+                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Rock Titan</p>
+                            <div class="flex justify-between items-center">
+                                <div class="flex space-x-2">
+                                    <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Rock</span>
+                                    <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">140 BPM</span>
+                                </div>
+                                <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
+                                    <i data-feather="download" class="w-4 h-4 mr-1"></i>
+                                    <span>932</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Track Card 8 -->
+                    <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
+                        <div class="relative">
+                            <img src="https://source.unsplash.com/random/400x400/?music,pop" alt="Track cover" class="w-full h-48 object-cover">
+                            <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600">
+                                <i data-feather="play" class="w-4 h-4 text-primary-600"></i>
+                            </button>
+                        </div>
+                        <div class="p-4">
+                            <h3 class="font-bold text-lg mb-1">Summer Vibes</h3>
+                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Pop Star</p>
+                            <div class="flex justify-between items-center">
+                                <div class="flex space-x-2">
+                                    <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Pop</span>
+                                    <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">100 BPM</span>
+                                </div>
+                                <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
+                                    <i data-feather="download" class="w-4 h-4 mr-1"></i>
+                                    <span>1.8K</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Pagination -->
+                <div class="mt-10 flex justify-center">
+                    <nav class="flex items-center space-x-2">
+                        <button class="px-3 py-1 rounded border border-gray-300 dark:border-dark-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-700">
+                            <i data-feather="chevron-left" class="w-4 h-4"></i>
+                        </button>
+                        <button class="px-3 py-1 rounded bg-primary-600 text-white">1</button>
+                        <button class="px-3 py-1 rounded border border-gray-300 dark:border-dark-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-700">2</button>
+                        <button class="px-3 py-1 rounded border border-gray-300 dark:border-dark-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-700">3</button>
+                        <span class="px-2 text-gray-500">...</span>
+                        <button class="px-3 py-1 rounded border border-gray-300 dark:border-dark-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-700">8</button>
+                        <button class="px-3 py-1 rounded border border-gray-300 dark:border-dark-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-700">
+                            <i data-feather="chevron-right" class="w-4 h-4"></i>
+                        </button>
+                    </nav>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-white dark:bg-dark-800 border-t border-gray-200 dark:border-dark-700 mt-auto">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                <div class="col-span-2">
+                    <a href="/" class="flex items-center space-x-2">
+                        <svg class="w-8 h-8 text-primary-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2"/>
+                            <path d="M8 16C8 16 9.5 14 12 14C14.5 14 16 16 16 16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                            <path d="M8 8H8.01M16 8H16.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                        <span class="text-xl font-bold text-primary-600">LoopLodge</span>
+                    </a>
+                    <p class="mt-4 text-gray-600 dark:text-gray-400 max-w-xs">
+                        A members' hideout for indie producers to share loops, stems, and tracks.
+                    </p>
+                </div>
+                <div>
+                    <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 tracking-wider uppercase">Explore</h3>
+                    <ul class="mt-4 space-y-2">
+                        <li><a href="/explore.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Browse Library</a></li>
+                        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Top Charts</a></li>
+                        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">New Releases</a></li>
+                        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Genres</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 tracking-wider uppercase">Company</h3>
+                    <ul class="mt-4 space-y-2">
+                        <li><a href="/about.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">About</a></li>
+                        <li><a href="/pricing.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Pricing</a></li>
+                        <li><a href="/terms.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Terms</a></li>
+                        <li><a href="/privacy.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Privacy</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="mt-12 border-t border-gray-200 dark:border-dark-700 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-500 dark:text-gray-400 text-sm">&copy; 2023 LoopLodge. All rights reserved.</p>
+                <div class="mt-4 md:mt-0 flex space-x-6">
+                    <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                        <i data-feather="twitter" class="w-5 h-5"></i>
+                    </a>
+                    <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                        <i data-feather="instagram" class="w-5 h-5"></i>
+                    </a>
+                    <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                        <i data-feather="facebook" class="w-5 h-5"></i>
+                    </a>
+                    <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                        <i data-feather="youtube" class="w-5 h-5"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Audio Player (fixed to bottom) -->
+    <div class="fixed bottom-0 left-0 right-0 bg-white dark:bg-dark-800 shadow-lg border-t border-gray-200 dark:border-dark-700">
+        <div class="max-w-7xl mx-auto px-4 py-2">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-4 w-1/4">
+                    <img src="https://source.unsplash.com/random/80x80/?music" alt="Now playing" class="w-12 h-12 rounded">
+                    <div>
+                        <h4 class="font-medium text-sm">Neon Dreams</h4>
+                        <p class="text-xs text-gray-500 dark:text-gray-400">Kora Vale</p>
+                    </div>
+                    <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
+                        <i data-feather="heart" class="w-4 h-4"></i>
+                    </button>
+                </div>
+                <div class="flex-1 max-w-2xl">
+                    <div class="flex items-center justify-center space-x-6">
+                        <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
+                            <i data-feather="shuffle" class="w-4 h-4"></i>
+                        </button>
+                        <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
+                            <i data-feather="skip-back" class="w-4 h-4"></i>
+                        </button>
+                        <button class="w-10 h-10 bg-primary-600 hover:bg-primary-700 rounded-full flex items-center justify-center">
+                            <i data-feather="play" class="w-5 h-5 text-white"></i>
+                        </button>
+                        <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
+                            <i data-feather="skip-forward" class="w-4 h-4"></i>
+                        </button>
+                        <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
+                            <i data-feather="repeat" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                    <div class="flex items-center mt-2 space-x-3">
+                        <span class="text-xs text-gray-500 dark:text-gray-400 w-10">1:24</span>
+                        <div class="flex-1 h-1 bg-gray-200 dark:bg-dark-700 rounded-full overflow-hidden">
+                            <div class="h-full bg-primary-600 w-1/3"></div>
+                        </div>
+                        <span class="text-xs text-gray-500 dark:text-gray-400 w-10">3:45</span>
+                    </div>
+                </div>
+                <div class="flex items-center space-x-4 w-1/4 justify-end">
+                    <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
+                        <i data-feather="list" class="w-4 h-4"></i>
+                    </button>
+                    <div class="flex items-center space-x-2">
+                        <i data-feather="volume-2" class="w-4 h-4 text-gray-500 dark:text-gray-400"></i>
+                        <div class="w-20 h-1 bg-gray-200 dark:bg-dark-700 rounded-full overflow-hidden">
+</body>
+</html>

index.html

@@ -1,19 +1,482 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LoopLodge – A Members' Hideout for Indie Loops & Tracks</title>
+    <meta name="description" content="Premium platform for indie producers to share loop packs, stems, and full tracks. Join our creative community.">
+    <link rel="icon" type="image/x-icon" href="/assets/img/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link href="/css/styles.css" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        dark: {
+                            800: '#1e293b',
+                            900: '#0f172a',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50 dark:bg-dark-900 text-gray-800 dark:text-gray-200 min-h-screen flex flex-col">
+    <!-- Navigation -->
+    <nav class="bg-white dark:bg-dark-800 shadow-sm">
+        <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">
+                    <a href="/" class="flex items-center space-x-2">
+                        <svg class="w-8 h-8 text-primary-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2"/>
+                            <path d="M8 16C8 16 9.5 14 12 14C14.5 14 16 16 16 16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                            <path d="M8 8H8.01M16 8H16.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                        <span class="text-xl font-bold text-primary-600">LoopLodge</span>
+                    </a>
+                </div>
+                <div class="hidden md:flex items-center space-x-8">
+                    <a href="/explore.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Explore</a>
+                    <a href="/pricing.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Pricing</a>
+                    <a href="/about.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">About</a>
+                    <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-dark-700">
+                        <i data-feather="moon" class="hidden dark:block"></i>
+                        <i data-feather="sun" class="dark:hidden"></i>
+                    </button>
+                    <a href="#" class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-md text-sm font-medium">Sign In</a>
+                </div>
+                <div class="md:hidden flex items-center">
+                    <button id="mobile-menu-button" class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-dark-700">
+                        <i data-feather="menu"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Mobile menu -->
+        <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-dark-800 pb-3 px-4">
+            <div class="pt-2 space-y-1">
+                <a href="/explore.html" class="block px-3 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Explore</a>
+                <a href="/pricing.html" class="block px-3 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Pricing</a>
+                <a href="/about.html" class="block px-3 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">About</a>
+                <button id="mobile-theme-toggle" class="w-full text-left px-3 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 flex items-center">
+                    <span class="mr-2">Toggle Theme</span>
+                    <i data-feather="moon" class="hidden dark:block"></i>
+                    <i data-feather="sun" class="dark:hidden"></i>
+                </button>
+                <a href="#" class="block w-full text-center bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-md text-base font-medium mt-2">Sign In</a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="bg-gradient-to-br from-primary-500 to-primary-700 text-white py-20">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex flex-col md:flex-row items-center justify-between">
+                <div class="md:w-1/2 mb-10 md:mb-0">
+                    <h1 class="text-4xl md:text-5xl font-bold mb-6">Your Creative Hideout for Indie Loops & Tracks</h1>
+                    <p class="text-xl mb-8 opacity-90">Discover, share, and collaborate with a community of passionate producers. Royalty-free samples, stems, and full tracks at your fingertips.</p>
+                    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
+                        <a href="/explore.html" class="bg-white text-primary-600 hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-semibold text-center">Explore Library</a>
+                        <a href="/pricing.html" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-md text-lg font-semibold text-center">Join Membership</a>
+                    </div>
+                </div>
+                <div class="md:w-1/2 flex justify-center">
+                    <div class="relative w-full max-w-md">
+                        <div class="absolute -top-6 -left-6 w-32 h-32 bg-primary-400 rounded-lg opacity-20 animate-pulse"></div>
+                        <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-primary-400 rounded-lg opacity-20 animate-pulse"></div>
+                        <div class="relative bg-white dark:bg-dark-800 rounded-xl shadow-xl overflow-hidden">
+                            <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500"></div>
+                            <div class="p-6">
+                                <div class="flex justify-between items-start mb-4">
+                                    <div>
+                                        <h3 class="text-lg font-bold text-gray-900 dark:text-white">Neon Dreams</h3>
+                                        <p class="text-gray-600 dark:text-gray-300">by Kora Vale</p>
+                                    </div>
+                                    <div class="flex space-x-2">
+                                        <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-dark-700">
+                                            <i data-feather="heart" class="w-5 h-5"></i>
+                                        </button>
+                                        <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-dark-700">
+                                            <i data-feather="more-vertical" class="w-5 h-5"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="flex items-center justify-between">
+                                    <div class="flex space-x-4">
+                                        <button class="w-12 h-12 bg-primary-600 hover:bg-primary-700 rounded-full flex items-center justify-center">
+                                            <i data-feather="play" class="w-5 h-5 text-white"></i>
+                                        </button>
+                                    </div>
+                                    <div class="flex-1 mx-4">
+                                        <div class="h-1 bg-gray-200 dark:bg-dark-700 rounded-full overflow-hidden">
+                                            <div class="h-full bg-primary-600 w-1/3"></div>
+                                        </div>
+                                    </div>
+                                    <span class="text-sm text-gray-500">1:24 / 3:45</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Featured Section -->
+    <section class="py-16 bg-gray-50 dark:bg-dark-900">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center mb-10">
+                <h2 class="text-2xl font-bold">Featured This Week</h2>
+                <a href="/explore.html" class="text-primary-600 hover:text-primary-800 dark:hover:text-primary-400 font-medium flex items-center">
+                    View all <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>
+                </a>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                <!-- Track Card 1 -->
+                <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
+                    <div class="relative">
+                        <img src="https://source.unsplash.com/random/400x400/?music,synthwave" alt="Track cover" class="w-full h-48 object-cover">
+                        <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600">
+                            <i data-feather="play" class="w-4 h-4 text-primary-600"></i>
+                        </button>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Midnight Drive</h3>
+                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Nova Beats</p>
+                        <div class="flex justify-between items-center">
+                            <div class="flex space-x-2">
+                                <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Synthwave</span>
+                                <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">128 BPM</span>
+                            </div>
+                            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
+                                <i data-feather="download" class="w-4 h-4 mr-1"></i>
+                                <span>1.2K</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Track Card 2 -->
+                <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
+                    <div class="relative">
+                        <img src="https://source.unsplash.com/random/400x400/?music,lofi" alt="Track cover" class="w-full h-48 object-cover">
+                        <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600">
+                            <i data-feather="play" class="w-4 h-4 text-primary-600"></i>
+                        </button>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Coffee Shop</h3>
+                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Chill Pill</p>
+                        <div class="flex justify-between items-center">
+                            <div class="flex space-x-2">
+                                <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Lo-fi</span>
+                                <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">85 BPM</span>
+                            </div>
+                            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
+                                <i data-feather="download" class="w-4 h-4 mr-1"></i>
+                                <span>856</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Track Card 3 -->
+                <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
+                    <div class="relative">
+                        <img src="https://source.unsplash.com/random/400x400/?music,hiphop" alt="Track cover" class="w-full h-48 object-cover">
+                        <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600">
+                            <i data-feather="play" class="w-4 h-4 text-primary-600"></i>
+                        </button>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Urban Flow</h3>
+                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Metro Sounds</p>
+                        <div class="flex justify-between items-center">
+                            <div class="flex space-x-2">
+                                <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Hip Hop</span>
+                                <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">95 BPM</span>
+                            </div>
+                            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
+                                <i data-feather="download" class="w-4 h-4 mr-1"></i>
+                                <span>1.5K</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Track Card 4 -->
+                <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
+                    <div class="relative">
+                        <img src="https://source.unsplash.com/random/400x400/?music,electronic" alt="Track cover" class="w-full h-48 object-cover">
+                        <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600">
+                            <i data-feather="play" class="w-4 h-4 text-primary-600"></i>
+                        </button>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Digital Dreams</h3>
+                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Electro Nova</p>
+                        <div class="flex justify-between items-center">
+                            <div class="flex space-x-2">
+                                <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">EDM</span>
+                                <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">128 BPM</span>
+                            </div>
+                            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
+                                <i data-feather="download" class="w-4 h-4 mr-1"></i>
+                                <span>2.1K</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="py-16 bg-white dark:bg-dark-800">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl font-bold mb-4">Why Choose LoopLodge</h2>
+                <p class="text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">A platform built by producers, for producers. We're redefining how indie creators share and monetize their work.</p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="bg-gray-50 dark:bg-dark-900 p-6 rounded-xl">
+                    <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="shield" class="w-6 h-6 text-primary-600"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Clear Licensing</h3>
+                    <p class="text-gray-600 dark:text-gray-400">All tracks come with royalty-free licenses. Creators retain ownership while users get clear usage rights.</p>
+                </div>
+                
+                <!-- Feature 2 -->
+                <div class="bg-gray-50 dark:bg-dark-900 p-6 rounded-xl">
+                    <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="star" class="w-6 h-6 text-primary-600"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Curated Quality</h3>
+                    <p class="text-gray-600 dark:text-gray-400">Every submission is reviewed by our team to ensure professional quality standards.</p>
+                </div>
+                
+                <!-- Feature 3 -->
+                <div class="bg-gray-50 dark:bg-dark-900 p-6 rounded-xl">
+                    <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="layers" class="w-6 h-6 text-primary-600"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Stems & Loops</h3>
+                    <p class="text-gray-600 dark:text-gray-400">Get full track stems and isolated loops for ultimate flexibility in your productions.</p>
+                </div>
+                
+                <!-- Feature 4 -->
+                <div class="bg-gray-50 dark:bg-dark-900 p-6 rounded-xl">
+                    <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="trending-up" class="w-6 h-6 text-primary-600"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Creator Analytics</h3>
+                    <p class="text-gray-600 dark:text-gray-400">Detailed stats on plays, downloads, and earnings help you understand your audience.</p>
+                </div>
+                
+                <!-- Feature 5 -->
+                <div class="bg-gray-50 dark:bg-dark-900 p-6 rounded-xl">
+                    <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="users" class="w-6 h-6 text-primary-600"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Collaborative</h3>
+                    <p class="text-gray-600 dark:text-gray-400">Connect with other producers, remix tracks, and collaborate on new projects.</p>
+                </div>
+                
+                <!-- Feature 6 -->
+                <div class="bg-gray-50 dark:bg-dark-900 p-6 rounded-xl">
+                    <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="dollar-sign" class="w-6 h-6 text-primary-600"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Fair Earnings</h3>
+                    <p class="text-gray-600 dark:text-gray-400">We take the smallest cut in the industry so you keep more of your hard-earned revenue.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Newsletter Section -->
+    <section class="py-16 bg-primary-50 dark:bg-primary-900 bg-opacity-50">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <div class="bg-white dark:bg-dark-800 rounded-xl shadow-md p-8 md:p-10">
+                <h2 class="text-2xl font-bold mb-4">Stay in the Loop</h2>
+                <p class="text-gray-600 dark:text-gray-400 mb-8">Subscribe to our newsletter for new releases, producer spotlights, and exclusive member content.</p>
+                <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
+                    <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-md border border-gray-300 dark:border-dark-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+                    <button type="submit" class="bg-primary-600 hover:bg-primary-700 text-white px-6 py-3 rounded-md font-medium">Subscribe</button>
+                </form>
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-4">We respect your privacy. Unsubscribe at any time.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-white dark:bg-dark-800 border-t border-gray-200 dark:border-dark-700 mt-auto">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                <div class="col-span-2">
+                    <a href="/" class="flex items-center space-x-2">
+                        <svg class="w-8 h-8 text-primary-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2"/>
+                            <path d="M8 16C8 16 9.5 14 12 14C14.5 14 16 16 16 16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                            <path d="M8 8H8.01M16 8H16.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                        <span class="text-xl font-bold text-primary-600">LoopLodge</span>
+                    </a>
+                    <p class="mt-4 text-gray-600 dark:text-gray-400 max-w-xs">
+                        A members' hideout for indie producers to share loops, stems, and tracks.
+                    </p>
+                </div>
+                <div>
+                    <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 tracking-wider uppercase">Explore</h3>
+                    <ul class="mt-4 space-y-2">
+                        <li><a href="/explore.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Browse Library</a></li>
+                        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Top Charts</a></li>
+                        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">New Releases</a></li>
+                        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Genres</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 tracking-wider uppercase">Company</h3>
+                    <ul class="mt-4 space-y-2">
+                        <li><a href="/about.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">About</a></li>
+                        <li><a href="/pricing.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Pricing</a></li>
+                        <li><a href="/terms.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Terms</a></li>
+                        <li><a href="/privacy.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Privacy</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="mt-12 border-t border-gray-200 dark:border-dark-700 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-500 dark:text-gray-400 text-sm">&copy; 2023 LoopLodge. All rights reserved.</p>
+                <div class="mt-4 md:mt-0 flex space-x-6">
+                    <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                        <i data-feather="twitter" class="w-5 h-5"></i>
+                    </a>
+                    <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                        <i data-feather="instagram" class="w-5 h-5"></i>
+                    </a>
+                    <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                        <i data-feather="facebook" class="w-5 h-5"></i>
+                    </a>
+                    <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                        <i data-feather="youtube" class="w-5 h-5"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Audio Player (fixed to bottom) -->
+    <div class="fixed bottom-0 left-0 right-0 bg-white dark:bg-dark-800 shadow-lg border-t border-gray-200 dark:border-dark-700">
+        <div class="max-w-7xl mx-auto px-4 py-2">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-4 w-1/4">
+                    <img src="https://source.unsplash.com/random/80x80/?music" alt="Now playing" class="w-12 h-12 rounded">
+                    <div>
+                        <h4 class="font-medium text-sm">Neon Dreams</h4>
+                        <p class="text-xs text-gray-500 dark:text-gray-400">Kora Vale</p>
+                    </div>
+                    <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
+                        <i data-feather="heart" class="w-4 h-4"></i>
+                    </button>
+                </div>
+                <div class="flex-1 max-w-2xl">
+                    <div class="flex items-center justify-center space-x-6">
+                        <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
+                            <i data-feather="shuffle" class="w-4 h-4"></i>
+                        </button>
+                        <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
+                            <i data-feather="skip-back" class="w-4 h-4"></i>
+                        </button>
+                        <button class="w-10 h-10 bg-primary-600 hover:bg-primary-700 rounded-full flex items-center justify-center">
+                            <i data-feather="play" class="w-5 h-5 text-white"></i>
+                        </button>
+                        <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
+                            <i data-feather="skip-forward" class="w-4 h-4"></i>
+                        </button>
+                        <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
+                            <i data-feather="repeat" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                    <div class="flex items-center mt-2 space-x-3">
+                        <span class="text-xs text-gray-500 dark:text-gray-400 w-10">1:24</span>
+                        <div class="flex-1 h-1 bg-gray-200 dark:bg-dark-700 rounded-full overflow-hidden">
+                            <div class="h-full bg-primary-600 w-1/3"></div>
+                        </div>
+                        <span class="text-xs text-gray-500 dark:text-gray-400 w-10">3:45</span>
+                    </div>
+                </div>
+                <div class="flex items-center space-x-4 w-1/4 justify-end">
+                    <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
+                        <i data-feather="list" class="w-4 h-4"></i>
+                    </button>
+                    <div class="flex items-center space-x-2">
+                        <i data-feather="volume-2" class="w-4 h-4 text-gray-500 dark:text-gray-400"></i>
+                        <div class="w-20 h-1 bg-gray-200 dark:bg-dark-700 rounded-full overflow-hidden">
+                            <div class="h-full bg-primary-600 w-3/4"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="/js/app.js"></script>
+    <script>
+        // Initialize feather icons
+        feather.replace();
+        
+        // Mobile menu toggle
+        document.getElementById('mobile-menu-button').addEventListener('click', function() {
+            const menu = document.getElementById('mobile-menu');
+            menu.classList.toggle('hidden');
+        });
+        
+        // Theme toggle
+        const themeToggle = document.getElementById('theme-toggle');
+        const mobileThemeToggle = document.getElementById('mobile-theme-toggle');
+        
+        function toggleTheme() {
+            const html = document.documentElement;
+            if (html.classList.contains('dark')) {
+                html.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+            } else {
+                html.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            }
+            feather.replace();
+        }
+        
+        themeToggle.addEventListener('click', toggleTheme);
+        mobileThemeToggle.addEventListener('click', toggleTheme);
+        
+        // Check for saved theme preference
+        if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+    </script>
+</body>
 </html>