|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Melodify - Marketplace Musical</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"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
melodify: { |
|
|
pink: '#ff5c5c', |
|
|
darkpink: '#ff2d90', |
|
|
} |
|
|
}, |
|
|
backgroundImage: { |
|
|
'gradient-melodify': 'linear-gradient(45deg, #ff5c5c, #ff2d90)', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.video-background { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
height: 100vh; |
|
|
overflow: hidden; |
|
|
} |
|
|
.video-background iframe { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
width: 100vw; |
|
|
height: 100vh; |
|
|
transform: translate(-50%, -50%); |
|
|
pointer-events: none; |
|
|
} |
|
|
@media (min-aspect-ratio: 16/9) { |
|
|
.video-background iframe { |
|
|
height: 56.25vw; |
|
|
} |
|
|
} |
|
|
@media (max-aspect-ratio: 16/9) { |
|
|
.video-background iframe { |
|
|
width: 177.78vh; |
|
|
} |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(255, 45, 144, 0.3); |
|
|
} |
|
|
.chip-hover:hover { |
|
|
background: linear-gradient(45deg, #ff5c5c, #ff2d90); |
|
|
color: white; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-black text-white font-sans"> |
|
|
|
|
|
<nav class="fixed w-full bg-black bg-opacity-90 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 bg-gradient-to-r from-melodify-pink to-melodify-darkpink bg-clip-text text-transparent">MELODIFY</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:text-melodify-pink transition">Home</a> |
|
|
<a href="#canciones" class="px-3 py-2 rounded-md text-sm font-medium hover:text-melodify-pink transition">Canciones</a> |
|
|
<a href="#autores" class="px-3 py-2 rounded-md text-sm font-medium hover:text-melodify-pink transition">Autores</a> |
|
|
<a href="#generos" class="px-3 py-2 rounded-md text-sm font-medium hover:text-melodify-pink transition">Géneros</a> |
|
|
<a href="#planes" class="px-3 py-2 rounded-md text-sm font-medium hover:text-melodify-pink transition">Planes</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-4 flex items-center md:ml-6"> |
|
|
<button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> |
|
|
<span class="sr-only">Search</span> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
<button class="ml-3 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> |
|
|
<span class="sr-only">Notifications</span> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<button class="ml-3 px-4 py-2 rounded-full bg-gradient-to-r from-melodify-pink to-melodify-darkpink text-white text-sm font-medium hover:opacity-90 transition"> |
|
|
Iniciar sesión |
|
|
</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 class="hidden md:hidden" id="mobile-menu"> |
|
|
<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:text-melodify-pink">Home</a> |
|
|
<a href="#canciones" class="block px-3 py-2 rounded-md text-base font-medium hover:text-melodify-pink">Canciones</a> |
|
|
<a href="#autores" class="block px-3 py-2 rounded-md text-base font-medium hover:text-melodify-pink">Autores</a> |
|
|
<a href="#generos" class="block px-3 py-2 rounded-md text-base font-medium hover:text-melodify-pink">Géneros</a> |
|
|
<a href="#planes" class="block px-3 py-2 rounded-md text-base font-medium hover:text-melodify-pink">Planes</a> |
|
|
</div> |
|
|
<div class="pt-4 pb-3 border-t border-gray-700"> |
|
|
<div class="flex items-center px-5"> |
|
|
<button class="flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white"> |
|
|
<span class="sr-only">Search</span> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
<button class="ml-4 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white"> |
|
|
<span class="sr-only">Notifications</span> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<button class="ml-auto px-4 py-2 rounded-full bg-gradient-to-r from-melodify-pink to-melodify-darkpink text-white text-sm font-medium"> |
|
|
Iniciar sesión |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="video-background"> |
|
|
<iframe src="https://www.youtube.com/embed/K3fFFiA5kfs?autoplay=1&mute=1&loop=1&controls=0&playlist=K3fFFiA5kfs" frameborder="0" allowfullscreen></iframe> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center"> |
|
|
<div class="text-center px-4 max-w-4xl"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-melodify-pink to-melodify-darkpink bg-clip-text text-transparent"> |
|
|
Descubre, crea y comparte música sin límites |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl mb-8 text-gray-300"> |
|
|
El marketplace definitivo para artistas y amantes de la música. Licencias, colaboraciones y herramientas todo en un solo lugar. |
|
|
</p> |
|
|
<a href="#canciones" class="px-8 py-4 rounded-full bg-gradient-to-r from-melodify-pink to-melodify-darkpink text-white text-lg font-bold hover:shadow-lg hover:shadow-pink-500/30 transition-all duration-300"> |
|
|
Explorar canciones |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="canciones" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Canciones destacadas</h2> |
|
|
<p class="text-lg text-gray-400 max-w-2xl mx-auto"> |
|
|
Las canciones más populares esta semana en nuestra plataforma |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<a href="cancion.html?id=1" class="bg-gray-900 rounded-xl p-4 transition-all duration-300 card-hover group"> |
|
|
<div class="relative overflow-hidden rounded-lg mb-4"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,1" alt="Canción 1" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
<div class="absolute bottom-3 left-3"> |
|
|
<span class="bg-melodify-pink text-white text-xs px-2 py-1 rounded">Pop</span> |
|
|
</div> |
|
|
<button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-melodify-pink rounded-full w-12 h-12 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold mb-1">Midnight Dreams</h3> |
|
|
<p class="text-gray-400 text-sm">Aria Vega</p> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="cancion.html?id=2" class="bg-gray-900 rounded-xl p-4 transition-all duration-300 card-hover group"> |
|
|
<div class="relative overflow-hidden rounded-lg mb-4"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,2" alt="Canción 2" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
<div class="absolute bottom-3 left-3"> |
|
|
<span class="bg-melodify-pink text-white text-xs px-2 py-1 rounded">Trap</span> |
|
|
</div> |
|
|
<button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-melodify-pink rounded-full w-12 h-12 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold mb-1">Urban Legends</h3> |
|
|
<p class="text-gray-400 text-sm">DJ Kronos</p> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="cancion.html?id=3" class="bg-gray-900 rounded-xl p-4 transition-all duration-300 card-hover group"> |
|
|
<div class="relative overflow-hidden rounded-lg mb-4"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,3" alt="Canción 3" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
<div class="absolute bottom-3 left-3"> |
|
|
<span class="bg-melodify-pink text-white text-xs px-2 py-1 rounded">Jazz</span> |
|
|
</div> |
|
|
<button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-melodify-pink rounded-full w-12 h-12 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold mb-1">Smooth Whisper</h3> |
|
|
<p class="text-gray-400 text-sm">The Jazz Collective</p> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="cancion.html?id=4" class="bg-gray-900 rounded-xl p-4 transition-all duration-300 card-hover group"> |
|
|
<div class="relative overflow-hidden rounded-lg mb-4"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,4" alt="Canción 4" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
<div class="absolute bottom-3 left-3"> |
|
|
<span class="bg-melodify-pink text-white text-xs px-2 py-1 rounded">Balada</span> |
|
|
</div> |
|
|
<button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-melodify-pink rounded-full w-12 h-12 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold mb-1">Eternal Love</h3> |
|
|
<p class="text-gray-400 text-sm">Sophia Reyes</p> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="cancion.html?id=5" class="bg-gray-900 rounded-xl p-4 transition-all duration-300 card-hover group"> |
|
|
<div class="relative overflow-hidden rounded-lg mb-4"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,5" alt="Canción 5" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
<div class="absolute bottom-3 left-3"> |
|
|
<span class="bg-melodify-pink text-white text-xs px-2 py-1 rounded">Cumbia</span> |
|
|
</div> |
|
|
<button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-melodify-pink rounded-full w-12 h-12 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold mb-1">Fiesta Tropical</h3> |
|
|
<p class="text-gray-400 text-sm">Los Ritmos</p> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="cancion.html?id=6" class="bg-gray-900 rounded-xl p-4 transition-all duration-300 card-hover group"> |
|
|
<div class="relative overflow-hidden rounded-lg mb-4"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,6" alt="Canción 6" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
<div class="absolute bottom-3 left-3"> |
|
|
<span class="bg-melodify-pink text-white text-xs px-2 py-1 rounded">Regional</span> |
|
|
</div> |
|
|
<button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-melodify-pink rounded-full w-12 h-12 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold mb-1">Raíces</h3> |
|
|
<p class="text-gray-400 text-sm">El Norteño</p> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="cancion.html?id=7" class="bg-gray-900 rounded-xl p-4 transition-all duration-300 card-hover group"> |
|
|
<div class="relative overflow-hidden rounded-lg mb-4"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,7" alt="Canción 7" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
<div class="absolute bottom-3 left-3"> |
|
|
<span class="bg-melodify-pink text-white text-xs px-2 py-1 rounded">Pop</span> |
|
|
</div> |
|
|
<button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-melodify-pink rounded-full w-12 h-12 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold mb-1">Electric Love</h3> |
|
|
<p class="text-gray-400 text-sm">Stella Nova</p> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="cancion.html?id=8" class="bg-gray-900 rounded-xl p-4 transition-all duration-300 card-hover group"> |
|
|
<div class="relative overflow-hidden rounded-lg mb-4"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,8" alt="Canción 8" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
<div class="absolute bottom-3 left-3"> |
|
|
<span class="bg-melodify-pink text-white text-xs px-2 py-1 rounded">Trap</span> |
|
|
</div> |
|
|
<button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-melodify-pink rounded-full w-12 h-12 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold mb-1">Dark Alley</h3> |
|
|
<p class="text-gray-400 text-sm">Shadow Beats</p> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-block px-6 py-3 border border-melodify-pink text-melodify-pink rounded-full hover:bg-melodify-pink hover:text-white transition duration-300"> |
|
|
Ver todas las canciones |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-r from-gray-900 to-black"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="bg-black bg-opacity-50 rounded-2xl p-8 md:p-12 border border-gray-800"> |
|
|
<div class="md:flex items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-melodify-pink to-melodify-darkpink bg-clip-text text-transparent"> |
|
|
Tu música, a tu manera |
|
|
</h2> |
|
|
<p class="text-lg text-gray-300 mb-6"> |
|
|
Sube maquetas instantáneas, termínalas con IA, genera videolyrics, promociona tu música en un solo lugar. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-3 mb-6"> |
|
|
<span class="px-3 py-1 bg-gray-800 rounded-full text-sm flex items-center"> |
|
|
<i class="fas fa-robot text-melodify-pink mr-2"></i> Producción con IA |
|
|
</span> |
|
|
<span class="px-3 py-1 bg-gray-800 rounded-full text-sm flex items-center"> |
|
|
<i class="fas fa-video text-melodify-pink mr-2"></i> Videolyrics automáticos |
|
|
</span> |
|
|
<span class="px-3 py-1 bg-gray-800 rounded-full text-sm flex items-center"> |
|
|
<i class="fas fa-chart-line text-melodify-pink mr-2"></i> Analítica avanzada |
|
|
</span> |
|
|
</div> |
|
|
<button class="px-6 py-3 rounded-full bg-gradient-to-r from-melodify-pink to-melodify-darkpink text-white font-medium hover:shadow-lg hover:shadow-pink-500/30 transition"> |
|
|
Comenzar ahora |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:w-1/2 md:pl-12"> |
|
|
<div class="bg-gray-900 rounded-xl p-6 border border-gray-800"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-12 h-12 rounded-full bg-melodify-pink flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-music text-white text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold">Proceso simplificado</h3> |
|
|
<p class="text-sm text-gray-400">De la idea al mercado en minutos</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="w-6 h-6 rounded-full bg-melodify-darkpink flex items-center justify-center"> |
|
|
<span class="text-white text-xs">1</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-gray-300">Sube tu maqueta o idea musical</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="w-6 h-6 rounded-full bg-melodify-darkpink flex items-center justify-center"> |
|
|
<span class="text-white text-xs">2</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-gray-300">Mejora y termina con herramientas de IA</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="w-6 h-6 rounded-full bg-melodify-darkpink flex items-center justify-center"> |
|
|
<span class="text-white text-xs">3</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-gray-300">Genera contenido visual automático</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="w-6 h-6 rounded-full bg-melodify-darkpink flex items-center justify-center"> |
|
|
<span class="text-white text-xs">4</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-gray-300">Publica y monetiza tu música</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="autores" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Autores destacados</h2> |
|
|
<p class="text-lg text-gray-400 max-w-2xl mx-auto"> |
|
|
Conoce a los talentosos creadores detrás de la música que amas |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<a href="autor.html?id=1" class="bg-gray-900 rounded-xl p-6 text-center transition-all duration-300 card-hover"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-melodify-pink"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?artist,1" alt="Autor 1" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1">Aria Vega</h3> |
|
|
<p class="text-melodify-pink mb-3">Compositora • Productora</p> |
|
|
<p class="text-gray-400 text-sm mb-4">Especializada en pop y baladas con más de 50 canciones publicadas</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Pop</span> |
|
|
<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Balada</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="autor.html?id=2" class="bg-gray-900 rounded-xl p-6 text-center transition-all duration-300 card-hover"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-melodify-pink"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?artist,2" alt="Autor 2" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1">DJ Kronos</h3> |
|
|
<p class="text-melodify-pink mb-3">Productor • DJ</p> |
|
|
<p class="text-gray-400 text-sm mb-4">Creador de beats urbanos con más de 10 millones de streams</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Trap</span> |
|
|
<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Hip Hop</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="autor.html?id=3" class="bg-gray-900 rounded-xl p-6 text-center transition-all duration-300 card-hover"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-melodify-pink"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?artist,3" alt="Autor 3" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1">The Jazz Collective</h3> |
|
|
<p class="text-melodify-pink mb-3">Banda • Compositores</p> |
|
|
<p class="text-gray-400 text-sm mb-4">Grupo de jazz fusión con influencias modernas y clásicas</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Jazz</span> |
|
|
<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Fusión</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="autor.html?id=4" class="bg-gray-900 rounded-xl p-6 text-center transition-all duration-300 card-hover"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-melodify-pink"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?artist,4" alt="Autor 4" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1">Sophia Reyes</h3> |
|
|
<p class="text-melodify-pink mb-3">Cantautora</p> |
|
|
<p class="text-gray-400 text-sm mb-4">Voz emotiva y letras profundas que conectan con el corazón</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Balada</span> |
|
|
<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Pop</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="autor.html?id=5" class="bg-gray-900 rounded-xl p-6 text-center transition-all duration-300 card-hover"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-melodify-pink"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?artist,5" alt="Autor 5" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1">Los Ritmos</h3> |
|
|
<p class="text-melodify-pink mb-3">Grupo Musical</p> |
|
|
<p class="text-gray-400 text-sm mb-4">Especialistas en ritmos tropicales y fiesta con energía contagiosa</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Cumbia</span> |
|
|
<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Tropical</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="autor.html?id=6" class="bg-gray-900 rounded-xl p-6 text-center transition-all duration-300 card-hover"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-melodify-pink"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?artist,6" alt="Autor 6" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1">El Norteño</h3> |
|
|
<p class="text-melodify-pink mb-3">Cantautor</p> |
|
|
<p class="text-gray-400 text-sm mb-4">Voz auténtica de la música regional mexicana con raíces profundas</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Regional</span> |
|
|
<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Norteño</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="autor.html?id=7" class="bg-gray-900 rounded-xl p-6 text-center transition-all duration-300 card-hover"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-melodify-pink"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?artist,7" alt="Autor 7" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1">Stella Nova</h3> |
|
|
<p class="text-melodify-pink mb-3">Productora • DJ</p> |
|
|
<p class="text-gray-400 text-sm mb-4">Creadora de sonidos electrónicos con toque pop y mucha energía</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Electro Pop</span> |
|
|
<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Dance</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="autor.html?id=8" class="bg-gray-900 rounded-xl p-6 text-center transition-all duration-300 card-hover"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-melodify-pink"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?artist,8" alt="Autor 8" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1">Shadow Beats</h3> |
|
|
<p class="text-melodify-pink mb-3">Productor</p> |
|
|
<p class="text-gray-400 text-sm mb-4">Especialista en beats oscuros y atmosféricos para rap y trap</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Trap</span> |
|
|
<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Dark</span> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-block px-6 py-3 border border-melodify-pink text-melodify-pink rounded-full hover:bg-melodify-pink hover:text-white transition duration-300"> |
|
|
Ver todos los autores |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="generos" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gradient-to-b from-gray-900 to-black"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Explora por género</h2> |
|
|
<p class="text-lg text-gray-400 max-w-2xl mx-auto"> |
|
|
Descubre música organizada por géneros y estilos |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap justify-center gap-4 mb-12"> |
|
|
<a href="#" class="px-6 py-3 bg-gray-800 rounded-full hover:bg-gradient-to-r from-melodify-pink to-melodify-darkpink transition duration-300 chip-hover"> |
|
|
<i class="fas fa-heart mr-2"></i> Balada |
|
|
</a> |
|
|
<a href="#" class="px-6 py-3 bg-gray-800 rounded-full hover:bg-gradient-to-r from-melodify-pink to-melodify-darkpink transition duration-300 chip-hover"> |
|
|
<i class="fas fa-guitar mr-2"></i> Regional |
|
|
</a> |
|
|
<a href="#" class="px-6 py-3 bg-gray-800 rounded-full hover:bg-gradient-to-r from-melodify-pink to-melodify-darkpink transition duration-300 chip-hover"> |
|
|
<i class="fas fa-drum mr-2"></i> Cumbia |
|
|
</a> |
|
|
<a href="#" class="px-6 py-3 bg-gray-800 rounded-full hover:bg-gradient-to-r from-melodify-pink to-melodify-darkpink transition duration-300 chip-hover"> |
|
|
<i class="fas fa-saxophone mr-2"></i> Jazz |
|
|
</a> |
|
|
<a href="#" class="px-6 py-3 bg-gray-800 rounded-full hover:bg-gradient-to-r from-melodify-pink to-melodify-darkpink transition duration-300 chip-hover"> |
|
|
<i class="fas fa-star mr-2"></i> Pop |
|
|
</a> |
|
|
<a href="#" class="px-6 py-3 bg-gray-800 rounded-full hover:bg-gradient-to-r from-melodify-pink to-melodify-darkpink transition duration-300 chip-hover"> |
|
|
<i class="fas fa-fire mr-2"></i> Trap |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800"> |
|
|
<div class="relative h-48"> |
|
|
<img src="https://source.unsplash.com/random/600x400/?ballad" alt="Balada" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
<div class="absolute bottom-4 left-4"> |
|
|
<h3 class="text-2xl font-bold">Balada</h3> |
|
|
<p class="text-gray-300">Emociones profundas y letras con sentimiento</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<span class="text-sm text-gray-400">+120 canciones</span> |
|
|
<a href="#" class="text-melodify-pink text-sm font-medium hover:underline">Ver todo</a> |
|
|
</div> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,11" alt="Artista 1"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,12" alt="Artista 2"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,13" alt="Artista 3"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,14" alt="Artista 4"> |
|
|
<div class="w-8 h-8 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">+15</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800"> |
|
|
<div class="relative h-48"> |
|
|
<img src="https://source.unsplash.com/random/600x400/?trap" alt="Trap" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
<div class="absolute bottom-4 left-4"> |
|
|
<h3 class="text-2xl font-bold">Trap</h3> |
|
|
<p class="text-gray-300">Beats potentes y flow urbano</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<span class="text-sm text-gray-400">+85 canciones</span> |
|
|
<a href="#" class="text-melodify-pink text-sm font-medium hover:underline">Ver todo</a> |
|
|
</div> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,15" alt="Artista 1"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,16" alt="Artista 2"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,17" alt="Artista 3"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,18" alt="Artista 4"> |
|
|
<div class="w-8 h-8 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">+8</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800"> |
|
|
<div class="relative h-48"> |
|
|
<img src="https://source.unsplash.com/random/600x400/?jazz" alt="Jazz" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
<div class="absolute bottom-4 left-4"> |
|
|
<h3 class="text-2xl font-bold">Jazz</h3> |
|
|
<p class="text-gray-300">Improvisación y armonías sofisticadas</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<span class="text-sm text-gray-400">+65 canciones</span> |
|
|
<a href="#" class="text-melodify-pink text-sm font-medium hover:underline">Ver todo</a> |
|
|
</div> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,19" alt="Artista 1"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,20" alt="Artista 2"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,21" alt="Artista 3"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,22" alt="Artista 4"> |
|
|
<div class="w-8 h-8 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">+12</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="planes" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Elige tu plan perfecto</h2> |
|
|
<p class="text-lg text-gray-400 max-w-2xl mx-auto"> |
|
|
Desde artistas independientes hasta sellos discográficos, tenemos una solución para ti |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-900 rounded-xl p-8 border border-gray-800 transition-all duration-300 hover:border-melodify-pink"> |
|
|
<div class="mb-6"> |
|
|
<h3 class="text-2xl font-bold mb-2">Free</h3> |
|
|
<p class="text-gray-400">Perfecto para empezar</p> |
|
|
</div> |
|
|
<div class="mb-8"> |
|
|
<span class="text-4xl font-bold">$0</span> |
|
|
<span class="text-gray-400">/mes</span> |
|
|
</div> |
|
|
<ul class="space-y-4 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-melodify-pink mr-3"></i> |
|
|
<span>5 subidas mensuales</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-melodify-pink mr-3"></i> |
|
|
<span>Estadísticas básicas</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-melodify-pink mr-3"></i> |
|
|
<span>Acceso a marketplace</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-500"> |
|
|
<i class="fas fa-times text-gray-600 mr-3"></i> |
|
|
<span>Herramientas de IA</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-500"> |
|
|
<i class="fas fa-times text-gray-600 mr-3"></i> |
|
|
<span>Videolyrics automáticos</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full py-3 rounded-full border border-melodify-pink text-melodify-pink font-medium hover:bg-melodify-pink hover:text-white transition"> |
|
|
Comenzar gratis |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 rounded-xl p-8 border-2 border-melodify-pink transform scale-105 relative"> |
|
|
<div class="absolute top-0 right-0 bg-melodify-pink text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg"> |
|
|
POPULAR |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<h3 class="text-2xl font-bold mb-2">Pro</h3> |
|
|
<p class="text-gray-400">Para artistas serios</p> |
|
|
</div> |
|
|
<div class="mb-8"> |
|
|
<span class="text-4xl font-bold">$19</span> |
|
|
<span class="text-gray-400">/mes</span> |
|
|
</div> |
|
|
<ul class="space-y-4 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-melodify-pink mr-3"></i> |
|
|
<span>30 subidas mensuales</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-melodify-pink mr-3"></i> |
|
|
<span>Estadísticas avanzadas</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-melodify-pink mr-3"></i> |
|
|
<span>Herramientas básicas de IA</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-melodify-pink mr-3"></i> |
|
|
<span>5 videolyrics/mes</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-melodify-pink mr-3"></i> |
|
|
<span>Soporte prioritario</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full py-3 rounded-full bg-gradient-to-r from-melodify-pink to-melodify-darkpink text-white font-medium hover:shadow-lg hover:shadow-pink-500/30 transition"> |
|
|
Prueba 7 días gratis |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 rounded-xl p-8 border border-gray-800 transition-all duration-300 hover:border-melodify-pink"> |
|
|
<div class="mb-6"> |
|
|
<h3 class="text-2xl font-bold mb-2">Enterprise</h3> |
|
|
<p class="text-gray-400">Para sellos y estudios</p> |
|
|
</div> |
|
|
<div class="mb-8"> |
|
|
<span class="text-4xl font-bold">$99</span> |
|
|
<span class="text-gray-400">/mes</span> |
|
|
</div> |
|
|
<ul class="space-y-4 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-melodify-pink mr-3"></i> |
|
|
<span>Subidas ilimitadas</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-melodify-pink mr-3"></i> |
|
|
<span>Analítica completa</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-melodify-pink mr-3"></i> |
|
|
<span>IA avanzada</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-melodify-pink mr-3"></i> |
|
|
<span>Videolyrics ilimitados</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-melodify-pink mr-3"></i> |
|
|
<span>Soporte 24/7 y cuenta manager</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full py-3 rounded-full border border-melodify-pink text-melodify-pink font-medium hover:bg-melodify-pink hover:text-white transition"> |
|
|
Contactar ventas |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 text-center"> |
|
|
<p class="text-gray-400 mb-4">¿Necesitas algo personalizado?</p> |
|
|
<a href="#" class="inline-block px-6 py-3 text-melodify-pink font-medium hover:underline"> |
|
|
Habla con nuestro equipo |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 border-t border-gray-800 py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 bg-gradient-to-r from-melodify-pink to-melodify-darkpink bg-clip-text text-transparent">MELODIFY</h3> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
El marketplace musical donde artistas y compradores se encuentran para crear magia. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-melodify-pink transition"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-melodify-pink transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-melodify-pink transition"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-melodify-pink transition"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-melodify-pink transition"> |
|
|
<i class="fab fa-tiktok"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Explorar</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#home" class="text-gray-400 hover:text-melodify-pink transition">Inicio</a></li> |
|
|
<li><a href="#canciones" class="text-gray-400 hover:text-melodify-pink transition">Canciones</a></li> |
|
|
<li><a href="#autores" class="text-gray-400 hover:text-melodify-pink transition">Autores</a></li> |
|
|
<li><a href="#generos" class="text-gray-400 hover:text-melodify-pink transition">Géneros</a></li> |
|
|
<li><a href="#planes" class="text-gray-400 hover:text-melodify-pink transition">Planes</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Legal</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-melodify-pink transition">Términos de servicio</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-melodify-pink transition">Política de privacidad</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-melodify-pink transition">Licencias de música</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-melodify-pink transition">DMCA</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Contacto</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-envelope text-melodify-pink mr-2"></i> |
|
|
<span class="text-gray-400">[email protected]</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-phone text-melodify-pink mr-2"></i> |
|
|
<span class="text-gray-400">+1 (555) 123-4567</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-map-marker-alt text-melodify-pink mr-2"></i> |
|
|
<span class="text-gray-400">Los Ángeles, California</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="pt-8 border-t border-gray-800 text-center text-gray-500 text-sm"> |
|
|
<p>© Melodify 2025. Todos los derechos reservados.</p> |
|
|
</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) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 70, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</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=hazael00/melodify2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
