|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Music Prompt Generator | AI Tools for Music Creators</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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
background-color: #0a0a0a; |
|
|
color: #ffffff; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.neon-text { |
|
|
text-shadow: 0 0 5px #00f7ff, 0 0 10px #00a2ff; |
|
|
} |
|
|
|
|
|
.neon-border { |
|
|
border: 1px solid #00a2ff; |
|
|
box-shadow: 0 0 10px #00a2ff, inset 0 0 10px #00a2ff; |
|
|
} |
|
|
|
|
|
.neon-hover:hover { |
|
|
text-shadow: 0 0 8px #00f7ff, 0 0 15px #00a2ff; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%); |
|
|
} |
|
|
|
|
|
.feature-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 162, 255, 0.3); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.glow { |
|
|
animation: glow 2s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes glow { |
|
|
from { |
|
|
box-shadow: 0 0 5px #00a2ff; |
|
|
} |
|
|
to { |
|
|
box-shadow: 0 0 20px #00a2ff; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav class="bg-black/90 backdrop-blur-md fixed w-full z-50 border-b border-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex items-center justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<span class="text-2xl font-bold neon-text">MPG</span> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-4"> |
|
|
<a href="#home" class="px-3 py-2 rounded-md text-sm font-medium hover:neon-text neon-hover">Home</a> |
|
|
<a href="#about" class="px-3 py-2 rounded-md text-sm font-medium hover:neon-text neon-hover">About</a> |
|
|
<a href="#features" class="px-3 py-2 rounded-md text-sm font-medium hover:neon-text neon-hover">Features</a> |
|
|
<a href="#how-it-works" class="px-3 py-2 rounded-md text-sm font-medium hover:neon-text neon-hover">How It Works</a> |
|
|
<a href="#upload" class="px-3 py-2 rounded-md text-sm font-medium hover:neon-text neon-hover">Upload Center</a> |
|
|
<a href="#affiliate" class="px-3 py-2 rounded-md text-sm font-medium hover:neon-text neon-hover">Affiliate Tools</a> |
|
|
<a href="#contact" class="px-3 py-2 rounded-md text-sm font-medium hover:neon-text neon-hover">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-4 flex items-center md:ml-6"> |
|
|
<button class="px-4 py-2 bg-transparent neon-border rounded-md text-sm font-medium hover:bg-blue-900/20 transition duration-300"> |
|
|
Sign In |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="-mr-2 flex md:hidden"> |
|
|
<button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden gradient-bg"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#home" class="block px-3 py-2 rounded-md text-base font-medium hover:neon-text neon-hover">Home</a> |
|
|
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium hover:neon-text neon-hover">About</a> |
|
|
<a href="#features" class="block px-3 py-2 rounded-md text-base font-medium hover:neon-text neon-hover">Features</a> |
|
|
<a href="#how-it-works" class="block px-3 py-2 rounded-md text-base font-medium hover:neon-text neon-hover">How It Works</a> |
|
|
<a href="#upload" class="block px-3 py-2 rounded-md text-base font-medium hover:neon-text neon-hover">Upload Center</a> |
|
|
<a href="#affiliate" class="block px-3 py-2 rounded-md text-base font-medium hover:neon-text neon-hover">Affiliate Tools</a> |
|
|
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium hover:neon-text neon-hover">Contact</a> |
|
|
<button class="block w-full text-left px-3 py-2 rounded-md text-base font-medium bg-transparent neon-border hover:bg-blue-900/20"> |
|
|
Sign In |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="gradient-bg pt-32 pb-20 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6 neon-text">Music Prompt Generator</h1> |
|
|
<p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto"> |
|
|
AI-powered tools to supercharge your music creation, production, and branding workflow |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<button class="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-md text-lg font-semibold glow transition duration-300"> |
|
|
Get Started |
|
|
</button> |
|
|
<button class="px-8 py-3 bg-transparent neon-border rounded-md text-lg font-semibold hover:bg-blue-900/20 transition duration-300"> |
|
|
Watch Demo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-20 grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-900/50 p-6 rounded-xl neon-border"> |
|
|
<div class="text-blue-400 mb-4 text-3xl"> |
|
|
<i class="fas fa-music"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Composition Prompts</h3> |
|
|
<p class="text-gray-300">Break through creative blocks with AI-generated musical ideas tailored to your style.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900/50 p-6 rounded-xl neon-border"> |
|
|
<div class="text-blue-400 mb-4 text-3xl"> |
|
|
<i class="fas fa-sliders-h"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Production Tools</h3> |
|
|
<p class="text-gray-300">Enhance your tracks with smart mixing suggestions and mastering presets.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900/50 p-6 rounded-xl neon-border"> |
|
|
<div class="text-blue-400 mb-4 text-3xl"> |
|
|
<i class="fas fa-image"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Visual Assets</h3> |
|
|
<p class="text-gray-300">Generate cover art, social media visuals, and branding elements in seconds.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 px-4 sm:px-6 lg:px-8 bg-black"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 neon-text">About Music Prompt Generator</h2> |
|
|
<div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div> |
|
|
<p class="text-gray-400 max-w-4xl mx-auto"> |
|
|
Empowering music creators with AI-driven tools for every stage of the creative process |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-semibold mb-6 text-blue-400">Revolutionizing Music Creation</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Music Prompt Generator is designed to support musicians, producers, and creators at every stage of their journey. |
|
|
Whether you're struggling with writer's block, looking to refine your production, or need help with branding, |
|
|
our platform provides structured prompts and AI tools to elevate your work. |
|
|
</p> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
We combine cutting-edge AI technology with deep musical knowledge to offer suggestions that are both creative |
|
|
and technically sound. Our tools adapt to your style, helping you maintain artistic integrity while exploring |
|
|
new creative possibilities. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-2 text-blue-400"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
</div> |
|
|
<span class="text-gray-300">AI-powered composition prompts</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-2 text-blue-400"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
</div> |
|
|
<span class="text-gray-300">Smart production analysis</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-2 text-blue-400"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
</div> |
|
|
<span class="text-gray-300">Visual asset generation</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-2 text-blue-400"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
</div> |
|
|
<span class="text-gray-300">Seamless publishing workflow</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="bg-gray-900/50 p-8 rounded-xl neon-border"> |
|
|
<div class="flex mb-6"> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-400 mr-4"> |
|
|
<i class="fas fa-headphones"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Creative Spark</h4> |
|
|
<p class="text-sm text-gray-400">"MPG helped me break through my writer's block with fresh ideas that still felt true to my sound."</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex mb-6"> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-400 mr-4"> |
|
|
<i class="fas fa-sliders-h"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Production Boost</h4> |
|
|
<p class="text-sm text-gray-400">"The mixing suggestions took my tracks from demo quality to radio-ready in minutes."</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-400 mr-4"> |
|
|
<i class="fas fa-palette"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Visual Identity</h4> |
|
|
<p class="text-sm text-gray-400">"Generated album art that perfectly captured the vibe of my music and saved me hundreds on designers."</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute -z-10 w-full h-full bg-blue-900/10 rounded-xl -bottom-4 -right-4"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-20 px-4 sm:px-6 lg:px-8 gradient-bg"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 neon-text">Powerful Features</h2> |
|
|
<div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div> |
|
|
<p class="text-gray-400 max-w-3xl mx-auto"> |
|
|
Everything you need to create, produce, and promote your music in one platform |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-900/50 p-8 rounded-xl feature-card neon-border"> |
|
|
<div class="text-blue-400 mb-4 text-4xl"> |
|
|
<i class="fas fa-lightbulb"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Composition Prompts</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Generate melodic ideas, chord progressions, and rhythmic patterns tailored to your genre and style preferences. |
|
|
</p> |
|
|
<ul class="text-gray-400 space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Customizable by genre, mood, and complexity</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Lyric generation with thematic control</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Structure suggestions for complete songs</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/50 p-8 rounded-xl feature-card neon-border"> |
|
|
<div class="text-blue-400 mb-4 text-4xl"> |
|
|
<i class="fas fa-sliders-h"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Audio Production</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
AI-powered analysis of your mixes with actionable suggestions for improvement. |
|
|
</p> |
|
|
<ul class="text-gray-400 space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Smart EQ and compression recommendations</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Reference track matching</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Mastering presets for different platforms</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/50 p-8 rounded-xl feature-card neon-border"> |
|
|
<div class="text-blue-400 mb-4 text-4xl"> |
|
|
<i class="fas fa-image"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Visual Assets</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Create stunning cover art, social media visuals, and branding elements that match your music. |
|
|
</p> |
|
|
<ul class="text-gray-400 space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Album art generation from audio analysis</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Social media template creation</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Brand identity development tools</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/50 p-8 rounded-xl feature-card neon-border"> |
|
|
<div class="text-blue-400 mb-4 text-4xl"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">AI Music Tools</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Advanced analysis and generation tools powered by machine learning. |
|
|
</p> |
|
|
<ul class="text-gray-400 space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Genre and mood classification</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Similar artist recommendations</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Vocal processing enhancements</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/50 p-8 rounded-xl feature-card neon-border"> |
|
|
<div class="text-blue-400 mb-4 text-4xl"> |
|
|
<i class="fas fa-project-diagram"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Project Management</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Organize your creative workflow from initial idea to final release. |
|
|
</p> |
|
|
<ul class="text-gray-400 space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Track versions and iterations</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Collaboration tools for teams</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Release planning calendar</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/50 p-8 rounded-xl feature-card neon-border"> |
|
|
<div class="text-blue-400 mb-4 text-4xl"> |
|
|
<i class="fas fa-share-alt"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Social Integration</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Seamlessly share your music and connect with your audience. |
|
|
</p> |
|
|
<ul class="text-gray-400 space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Auto-generated social posts</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Embeddable music players</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Audience analytics dashboard</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="how-it-works" class="py-20 px-4 sm:px-6 lg:px-8 bg-black"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 neon-text">How It Works</h2> |
|
|
<div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div> |
|
|
<p class="text-gray-400 max-w-3xl mx-auto"> |
|
|
From initial inspiration to final release - streamline your creative process |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-900/50 p-8 rounded-xl neon-border"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-400 mr-4 font-bold"> |
|
|
1 |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold">Generate Prompts</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Start by selecting your preferred genre, mood, and complexity level. Our AI will generate musical ideas, lyrics, or production suggestions tailored to your specifications. |
|
|
</p> |
|
|
<div class="bg-gray-800/50 p-4 rounded-lg mb-4"> |
|
|
<div class="flex items-center text-blue-400 mb-2"> |
|
|
<i class="fas fa-bolt mr-2"></i> |
|
|
<span class="text-sm font-medium">Pro Tip</span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm"> |
|
|
Use the "Surprise Me" option for unexpected creative directions that might spark new ideas. |
|
|
</p> |
|
|
</div> |
|
|
<div class="text-blue-400 text-right"> |
|
|
<i class="fas fa-arrow-right text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/50 p-8 rounded-xl neon-border"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-400 mr-4 font-bold"> |
|
|
2 |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold">Develop Your Track</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Export prompts to your DAW or use our in-browser tools to develop your composition. Get real-time feedback on arrangement, mixing, and production choices. |
|
|
</p> |
|
|
<div class="bg-gray-800/50 p-4 rounded-lg mb-4"> |
|
|
<div class="flex items-center text-blue-400 mb-2"> |
|
|
<i class="fas fa-bolt mr-2"></i> |
|
|
<span class="text-sm font-medium">Pro Tip</span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm"> |
|
|
Try different variations of the same prompt to explore multiple creative directions. |
|
|
</p> |
|
|
</div> |
|
|
<div class="text-blue-400 text-right"> |
|
|
<i class="fas fa-arrow-right text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/50 p-8 rounded-xl neon-border"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-400 mr-4 font-bold"> |
|
|
3 |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold">Publish & Promote</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
When your track is ready, use our publishing tools to distribute to platforms and generate promotional materials. Track performance and audience engagement all in one place. |
|
|
</p> |
|
|
<div class="bg-gray-800/50 p-4 rounded-lg mb-4"> |
|
|
<div class="flex items-center text-blue-400 mb-2"> |
|
|
<i class="fas fa-bolt mr-2"></i> |
|
|
<span class="text-sm font-medium">Pro Tip</span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm"> |
|
|
Schedule social posts in advance to build anticipation before your release. |
|
|
</p> |
|
|
</div> |
|
|
<div class="text-blue-400 text-right"> |
|
|
<i class="fas fa-check-circle text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 text-center"> |
|
|
<button class="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-md text-lg font-semibold glow transition duration-300"> |
|
|
Start Creating Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="upload" class="py-20 px-4 sm:px-6 lg:px-8 gradient-bg"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 neon-text">Upload Center</h2> |
|
|
<div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div> |
|
|
<p class="text-gray-400 max-w-3xl mx-auto"> |
|
|
Guidelines for preparing and uploading your music files |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> |
|
|
<div> |
|
|
<div class="bg-gray-900/50 p-8 rounded-xl neon-border mb-8"> |
|
|
<h3 class="text-xl font-semibold mb-6 text-blue-400">Supported Formats</h3> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="bg-gray-800/50 p-4 rounded-lg"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-400 mr-3"> |
|
|
<i class="fas fa-file-audio"></i> |
|
|
</div> |
|
|
<span class="font-medium">Audio Files</span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm"> |
|
|
WAV, AIFF, FLAC, MP3 (320kbps), AAC |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800/50 p-4 rounded-lg"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-400 mr-3"> |
|
|
<i class="fas fa-file-image"></i> |
|
|
</div> |
|
|
<span class="font-medium">Artwork</span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm"> |
|
|
JPEG, PNG (min 3000x3000px) |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800/50 p-4 rounded-lg"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-400 mr-3"> |
|
|
<i class="fas fa-file-alt"></i> |
|
|
</div> |
|
|
<span class="font-medium">Metadata</span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm"> |
|
|
ID3 tags, ISRC codes, Lyrics |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800/50 p-4 rounded-lg"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-400 mr-3"> |
|
|
<i class="fas fa-file-video"></i> |
|
|
</div> |
|
|
<span class="font-medium">Video</span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm"> |
|
|
MP4, MOV (1080p or 4K) |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900/50 p-8 rounded-xl neon-border"> |
|
|
<h3 class="text-xl font-semibold mb-6 text-blue-400">Upload Limits</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium">Free Tier</span> |
|
|
<span class="text-blue-400">5GB/month</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-2"> |
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 30%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium">Pro Tier</span> |
|
|
<span class="text-blue-400">50GB/month</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-2"> |
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 70%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium">Studio Tier</span> |
|
|
<span class="text-blue-400">Unlimited</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-2"> |
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="bg-gray-900/50 p-8 rounded-xl neon-border h-full"> |
|
|
<h3 class="text-xl font-semibold mb-6 text-blue-400">Metadata Requirements</h3> |
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<h4 class="font-medium mb-2 flex items-center"> |
|
|
<i class="fas fa-tag text-blue-400 mr-2"></i> |
|
|
Track Information |
|
|
</h4> |
|
|
<ul class="text-gray-300 text-sm space-y-1 pl-6"> |
|
|
<li>• Track title (max 100 characters)</li> |
|
|
<li>• Artist name (primary)</li> |
|
|
<li>• Featured artists (if applicable)</li> |
|
|
<li>• Version information (Radio Edit, Remix, etc.)</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-medium mb-2 flex items-center"> |
|
|
<i class="fas fa-list-ol text-blue-400 mr-2"></i> |
|
|
Album Information |
|
|
</h4> |
|
|
<ul class="text-gray-300 text-sm space-y-1 pl-6"> |
|
|
<li>• Album title (if applicable)</li> |
|
|
<li>• Track number</li> |
|
|
<li>• Total tracks in album</li> |
|
|
<li>• Release date</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-medium mb-2 flex items-center"> |
|
|
<i class="fas fa-music text-blue-400 mr-2"></i> |
|
|
Musical Information |
|
|
</h4> |
|
|
<ul class="text-gray-300 text-sm space-y-1 pl-6"> |
|
|
<li>• Primary genre</li> |
|
|
<li>• Secondary genre (optional)</li> |
|
|
<li>• Language (for lyrics)</li> |
|
|
<li>• Explicit content flag</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4 border-t border-gray-800"> |
|
|
<button class="w-full py-3 bg-blue-600 hover:bg-blue-700 rounded-md font-medium glow transition duration-300"> |
|
|
<i class="fas fa-cloud-upload-alt mr-2"></i> Upload Files Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="affiliate" class="py-20 px-4 sm:px-6 lg:px-8 bg-black"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 neon-text">Affiliate Tools</h2> |
|
|
<div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div> |
|
|
<p class="text-gray-400 max-w-3xl mx-auto"> |
|
|
Monetize your content by recommending quality music products |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> |
|
|
<div class="bg-gray-900/50 p-6 rounded-xl neon-border"> |
|
|
<div class="text-blue-400 mb-4 text-3xl"> |
|
|
<i class="fas fa-guitar"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Equipment</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Recommend instruments, microphones, and hardware to your audience. |
|
|
</p> |
|
|
<div class="text-blue-400 text-sm font-medium"> |
|
|
Brands: Fender, Shure, Native Instruments, etc. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900/50 p-6 rounded-xl neon-border"> |
|
|
<div class="text-blue-400 mb-4 text-3xl"> |
|
|
<i class="fas fa-laptop"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Software</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Earn commissions on DAWs, plugins, and music software recommendations. |
|
|
</p> |
|
|
<div class="text-blue-400 text-sm font-medium"> |
|
|
Brands: Ableton, FL Studio, iZotope, etc. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900/50 p-6 rounded-xl neon-border"> |
|
|
<div class="text-blue-400 mb-4 text-3xl"> |
|
|
<i class="fas fa-book"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Resources</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Recommend courses, books, and educational materials for musicians. |
|
|
</p> |
|
|
<div class="text-blue-400 text-sm font-medium"> |
|
|
Brands: MasterClass, Berklee Online, etc. |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900/50 p-8 rounded-xl neon-border"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-semibold mb-4 text-blue-400">How Our Affiliate Program Works</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Join our affiliate program and earn commissions for every purchase made through your unique referral links. |
|
|
We provide all the tools you need to seamlessly integrate product recommendations into your content. |
|
|
</p> |
|
|
<ul class="text-gray-300 space-y-3 mb-6"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Competitive commission rates (up to 15%)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Real-time tracking dashboard</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Customizable product widgets</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-blue-400 mr-2 mt-1"></i> |
|
|
<span>Monthly payout via PayPal or bank transfer</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="px-6 py-2 bg-transparent neon-border rounded-md text-sm font-medium hover:bg-blue-900/20 transition duration-300"> |
|
|
Learn More About Affiliate Program |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800/50 p-6 rounded-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-400 mr-4"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h4 class="font-semibold">Affiliate Earnings Example</h4> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Referrals this month</span> |
|
|
<span class="font-medium">24</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 60%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Conversion rate</span> |
|
|
<span class="font-medium">8.3%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 35%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Estimated earnings</span> |
|
|
<span class="font-medium text-blue-400">$187.50</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 pt-4 border-t border-gray-700 text-sm text-gray-400"> |
|
|
<p>Based on average performance of affiliates with similar audience sizes.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 gradient-bg"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 neon-text">Contact Us</h2> |
|
|
<div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div> |
|
|
<p class="text-gray-400 max-w-3xl mx-auto"> |
|
|
Have questions or need support? Reach out to our team. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> |
|
|
<div class="bg-gray-900/50 p-8 rounded-xl neon-border"> |
|
|
<h3 class="text-2xl font-semibold mb-6 text-blue-400">Send Us a Message</h3> |
|
|
<form> |
|
|
<div class="mb-6"> |
|
|
<label for="name" class="block text-sm font-medium mb-2">Your Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="John Doe"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="email" class="block text-sm font-medium mb-2">Email Address</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="[email protected]"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="subject" class="block text-sm font-medium mb-2">Subject</label> |
|
|
<select id="subject" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> |
|
|
<option value="">Select a topic</option> |
|
|
<option value="support">Technical Support</option> |
|
|
<option value="sales">Sales Inquiry</option> |
|
|
<option value="affiliate">Affiliate Program</option> |
|
|
<option value="feedback">Product Feedback</option> |
|
|
<option value="other">Other</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="message" class="block text-sm font-medium mb-2">Message</label> |
|
|
<textarea id="message" rows="5" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Your message here..."></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full py-3 bg-blue-600 hover:bg-blue-700 rounded-md text-lg font-semibold glow transition duration-300"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="bg-gray-900/50 p-8 rounded-xl neon-border mb-8"> |
|
|
<h3 class="text-2xl font-semibold mb-6 text-blue-400">Contact Information</h3> |
|
|
<div class="space-y-6"> |
|
|
<div class="flex"> |
|
|
<div class="text-blue-400 text-2xl mr-4"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium mb-1">Email</h4> |
|
|
<p class="text-gray-300">[email protected]</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="text-blue-400 text-2xl mr-4"> |
|
|
<i class="fas fa-headset"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium mb-1">Support Hours</h4> |
|
|
<p class="text-gray-300">Monday-Friday: 9AM-6PM EST</p> |
|
|
<p class="text-gray-300">Saturday: 10AM-4PM EST</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="text-blue-400 text-2xl mr-4"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium mb-1">Location</h4> |
|
|
<p class="text-gray-300">123 Music Avenue</p> |
|
|
<p class="text-gray-300">Nashville, TN 37203</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900/50 p-8 rounded-xl neon-border"> |
|
|
<h3 class="text-2xl font-semibold mb-6 text-blue-400">Join Our Community</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Connect with other music creators in our community forums and social media channels. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-blue-400 hover:bg-blue-900/20 transition duration-300 text-xl"> |
|
|
<i class="fab fa-discord"></i> |
|
|
</a> |
|
|
<a href="#" class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-blue-400 hover:bg-blue-900/20 transition duration-300 text-xl"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-blue-400 hover:bg-blue-900/20 transition duration-300 text-xl"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-blue-400 hover:bg-blue-900/20 transition duration-300 text-xl"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-blue-400 hover:bg-blue-900/20 transition duration-300 text-xl"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-black py-12 px-4 sm:px-6 lg:px-8 border-t border-gray-800"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 neon-text">MPG</h3> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
AI-powered tools for music creators, producers, and brands. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300"> |
|
|
<i class="fab fa-spotify"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4 text-blue-400">Product</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Features</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Pricing</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Updates</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Roadmap</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4 text-blue-400">Resources</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Tutorials</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Help Center</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Community</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4 text-blue-400">Company</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-500 text-sm mb-4 md:mb-0"> |
|
|
© 2023 Music Prompt Generator. All rights reserved. |
|
|
</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition duration-300">Privacy</a> |
|
|
<a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition duration-300">Terms</a> |
|
|
<a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition duration-300">Cookies</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if (targetElement) { |
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
const nav = document.querySelector('nav'); |
|
|
if (window.scrollY > 10) { |
|
|
nav.classList.add('shadow-lg'); |
|
|
} else { |
|
|
nav.classList.remove('shadow-lg'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<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=XXXMARK/mpg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
