|
|
<!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"> |
|
|
<style> |
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #ff5c5c, #ff2d90); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(90deg, #ff5c5c, #ff2d90); |
|
|
} |
|
|
.video-background { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
z-index: -1; |
|
|
opacity: 0.4; |
|
|
} |
|
|
.video-overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
z-index: -1; |
|
|
} |
|
|
.song-card:hover, .artist-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(255, 45, 144, 0.3); |
|
|
} |
|
|
.chip:hover { |
|
|
background: linear-gradient(90deg, #ff5c5c, #ff2d90); |
|
|
color: white; |
|
|
} |
|
|
.plan-card:hover { |
|
|
transform: scale(1.03); |
|
|
box-shadow: 0 10px 25px rgba(255, 45, 144, 0.3); |
|
|
} |
|
|
</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 gradient-text">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-pink-500 transition">Home</a> |
|
|
<a href="#canciones" class="px-3 py-2 rounded-md text-sm font-medium hover:text-pink-500 transition">Canciones</a> |
|
|
<a href="#autores" class="px-3 py-2 rounded-md text-sm font-medium hover:text-pink-500 transition">Autores</a> |
|
|
<a href="#generos" class="px-3 py-2 rounded-md text-sm font-medium hover:text-pink-500 transition">Géneros</a> |
|
|
<a href="#planes" class="px-3 py-2 rounded-md text-sm font-medium hover:text-pink-500 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"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
<button class="ml-4 px-4 py-2 rounded-full gradient-bg 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"> |
|
|
<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-pink-500 transition">Home</a> |
|
|
<a href="#canciones" class="block px-3 py-2 rounded-md text-base font-medium hover:text-pink-500 transition">Canciones</a> |
|
|
<a href="#autores" class="block px-3 py-2 rounded-md text-base font-medium hover:text-pink-500 transition">Autores</a> |
|
|
<a href="#generos" class="block px-3 py-2 rounded-md text-base font-medium hover:text-pink-500 transition">Géneros</a> |
|
|
<a href="#planes" class="block px-3 py-2 rounded-md text-base font-medium hover:text-pink-500 transition">Planes</a> |
|
|
</div> |
|
|
<div class="pt-4 pb-3 border-t border-gray-700"> |
|
|
<div class="flex items-center px-5"> |
|
|
<button class="ml-auto px-4 py-2 rounded-full gradient-bg text-white text-sm font-medium hover:opacity-90 transition"> |
|
|
Iniciar sesión |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="relative h-screen flex items-center justify-center overflow-hidden"> |
|
|
<div class="video-overlay"></div> |
|
|
<iframe class="video-background" src="https://www.youtube.com/embed/K3fFFiA5kfs?autoplay=1&mute=1&loop=1&playlist=K3fFFiA5kfs&controls=0" frameborder="0" allowfullscreen></iframe> |
|
|
|
|
|
<div class="text-center px-4 z-10 max-w-4xl"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6"> |
|
|
<span class="gradient-text">Transforma tu música</span> en experiencias |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl text-gray-300 mb-8"> |
|
|
El marketplace definitivo para artistas y compradores de licencias. Descubre, crea y monetiza tu talento. |
|
|
</p> |
|
|
<a href="#canciones" class="inline-block px-8 py-3 rounded-full gradient-bg text-white font-bold text-lg hover:opacity-90 transition transform hover:scale-105"> |
|
|
Explorar canciones |
|
|
</a> |
|
|
</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-gray-400 max-w-2xl mx-auto">Las pistas más populares esta semana en nuestra plataforma</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<a href="cancion.html?id=1" class="song-card bg-gray-900 rounded-lg overflow-hidden transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,album,1" alt="Canción 1" class="w-full h-48 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs"> |
|
|
3:45 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">Noche estrellada</h3> |
|
|
<p class="text-gray-400 text-sm mb-2">Luna Rodríguez</p> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Pop</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="cancion.html?id=2" class="song-card bg-gray-900 rounded-lg overflow-hidden transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,album,2" alt="Canción 2" class="w-full h-48 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs"> |
|
|
4:12 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">Ritmo callejero</h3> |
|
|
<p class="text-gray-400 text-sm mb-2">DJ Urban</p> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Trap</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="cancion.html?id=3" class="song-card bg-gray-900 rounded-lg overflow-hidden transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,album,3" alt="Canción 3" class="w-full h-48 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs"> |
|
|
2:58 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">Amor de verano</h3> |
|
|
<p class="text-gray-400 text-sm mb-2">Carlos Mendez</p> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Balada</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="cancion.html?id=4" class="song-card bg-gray-900 rounded-lg overflow-hidden transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,album,4" alt="Canción 4" class="w-full h-48 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs"> |
|
|
3:22 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">Fiesta sin fin</h3> |
|
|
<p class="text-gray-400 text-sm mb-2">Los Tropicales</p> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Cumbia</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="cancion.html?id=5" class="song-card bg-gray-900 rounded-lg overflow-hidden transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,album,5" alt="Canción 5" class="w-full h-48 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs"> |
|
|
5:01 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">Sueños de jazz</h3> |
|
|
<p class="text-gray-400 text-sm mb-2">The Cool Cats</p> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Jazz</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="cancion.html?id=6" class="song-card bg-gray-900 rounded-lg overflow-hidden transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,album,6" alt="Canción 6" class="w-full h-48 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs"> |
|
|
3:37 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">Raíces</h3> |
|
|
<p class="text-gray-400 text-sm mb-2">Mariachi Real</p> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Regional</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="cancion.html?id=7" class="song-card bg-gray-900 rounded-lg overflow-hidden transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,album,7" alt="Canción 7" class="w-full h-48 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs"> |
|
|
4:45 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">Electric Dreams</h3> |
|
|
<p class="text-gray-400 text-sm mb-2">Neon Wave</p> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Electro</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="cancion.html?id=8" class="song-card bg-gray-900 rounded-lg overflow-hidden transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,album,8" alt="Canción 8" class="w-full h-48 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs"> |
|
|
3:15 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">Bajo la luna</h3> |
|
|
<p class="text-gray-400 text-sm mb-2">Sandra Luna</p> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Pop</span> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-block px-6 py-2 border border-pink-500 text-pink-500 rounded-full hover:bg-pink-500 hover:text-white transition"> |
|
|
Ver todas las canciones |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 gradient-bg"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<h2 class="text-2xl md:text-3xl font-bold mb-6">Tu música, a tu manera</h2> |
|
|
<p class="text-lg md:text-xl"> |
|
|
Sube maquetas instantáneas, termínalas con IA, genera videolyrics, promociona tu música en un solo lugar. |
|
|
</p> |
|
|
<div class="mt-8"> |
|
|
<button class="px-8 py-3 bg-white text-pink-600 rounded-full font-bold hover:bg-gray-100 transition"> |
|
|
Comenzar ahora |
|
|
</button> |
|
|
</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-gray-400 max-w-2xl mx-auto">Conoce a los creadores detrás de las mejores canciones</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="artist-card bg-gray-900 rounded-lg overflow-hidden transition duration-300 text-center p-6"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-pink-500"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?artist,1" alt="Artista 1" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="font-bold text-xl mb-1">Luna Rodríguez</h3> |
|
|
<p class="text-gray-400 text-sm mb-3">Compositora • Cantante</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Pop</span> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Balada</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="autor.html?id=2" class="artist-card bg-gray-900 rounded-lg overflow-hidden transition duration-300 text-center p-6"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-pink-500"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?artist,2" alt="Artista 2" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="font-bold text-xl mb-1">DJ Urban</h3> |
|
|
<p class="text-gray-400 text-sm mb-3">Productor • DJ</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Trap</span> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Electro</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="autor.html?id=3" class="artist-card bg-gray-900 rounded-lg overflow-hidden transition duration-300 text-center p-6"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-pink-500"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?artist,3" alt="Artista 3" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="font-bold text-xl mb-1">Carlos Mendez</h3> |
|
|
<p class="text-gray-400 text-sm mb-3">Cantautor</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Balada</span> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Pop</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="autor.html?id=4" class="artist-card bg-gray-900 rounded-lg overflow-hidden transition duration-300 text-center p-6"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-pink-500"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?artist,4" alt="Artista 4" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="font-bold text-xl mb-1">Los Tropicales</h3> |
|
|
<p class="text-gray-400 text-sm mb-3">Banda</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Cumbia</span> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Regional</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="autor.html?id=5" class="artist-card bg-gray-900 rounded-lg overflow-hidden transition duration-300 text-center p-6"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-pink-500"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?artist,5" alt="Artista 5" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="font-bold text-xl mb-1">The Cool Cats</h3> |
|
|
<p class="text-gray-400 text-sm mb-3">Cuarteto de jazz</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Jazz</span> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Blues</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="autor.html?id=6" class="artist-card bg-gray-900 rounded-lg overflow-hidden transition duration-300 text-center p-6"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-pink-500"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?artist,6" alt="Artista 6" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="font-bold text-xl mb-1">Mariachi Real</h3> |
|
|
<p class="text-gray-400 text-sm mb-3">Grupo musical</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Regional</span> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Mariachi</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="autor.html?id=7" class="artist-card bg-gray-900 rounded-lg overflow-hidden transition duration-300 text-center p-6"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-pink-500"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?artist,7" alt="Artista 7" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="font-bold text-xl mb-1">Neon Wave</h3> |
|
|
<p class="text-gray-400 text-sm mb-3">Dúo electrónico</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Electro</span> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Synthwave</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="autor.html?id=8" class="artist-card bg-gray-900 rounded-lg overflow-hidden transition duration-300 text-center p-6"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-pink-500"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?artist,8" alt="Artista 8" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="font-bold text-xl mb-1">Sandra Luna</h3> |
|
|
<p class="text-gray-400 text-sm mb-3">Cantante • Compositora</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">Pop</span> |
|
|
<span class="inline-block px-2 py-1 bg-gray-800 rounded-full text-xs">R&B</span> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-block px-6 py-2 border border-pink-500 text-pink-500 rounded-full hover:bg-pink-500 hover:text-white transition"> |
|
|
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"> |
|
|
<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-gray-400 max-w-2xl mx-auto">Descubre música que se adapte a tus gustos</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap justify-center gap-4"> |
|
|
<a href="#" class="chip px-6 py-2 bg-gray-900 rounded-full border border-gray-700 hover:border-transparent transition"> |
|
|
Balada |
|
|
</a> |
|
|
<a href="#" class="chip px-6 py-2 bg-gray-900 rounded-full border border-gray-700 hover:border-transparent transition"> |
|
|
Regional |
|
|
</a> |
|
|
<a href="#" class="chip px-6 py-2 bg-gray-900 rounded-full border border-gray-700 hover:border-transparent transition"> |
|
|
Cumbia |
|
|
</a> |
|
|
<a href="#" class="chip px-6 py-2 bg-gray-900 rounded-full border border-gray-700 hover:border-transparent transition"> |
|
|
Jazz |
|
|
</a> |
|
|
<a href="#" class="chip px-6 py-2 bg-gray-900 rounded-full border border-gray-700 hover:border-transparent transition"> |
|
|
Pop |
|
|
</a> |
|
|
<a href="#" class="chip px-6 py-2 bg-gray-900 rounded-full border border-gray-700 hover:border-transparent transition"> |
|
|
Trap |
|
|
</a> |
|
|
</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">Planes para todos</h2> |
|
|
<p class="text-gray-400 max-w-2xl mx-auto">Elige el plan que mejor se adapte a tus necesidades</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
|
|
|
|
|
<div class="plan-card bg-gray-900 rounded-xl overflow-hidden transition duration-300"> |
|
|
<div class="p-6 border-b border-gray-800"> |
|
|
<h3 class="text-xl font-bold mb-2">Free</h3> |
|
|
<p class="text-gray-400 text-sm mb-4">Perfecto para empezar</p> |
|
|
<div class="flex items-end mb-4"> |
|
|
<span class="text-4xl font-bold">$0</span> |
|
|
<span class="text-gray-400 ml-1">/mes</span> |
|
|
</div> |
|
|
<button class="w-full py-2 bg-gray-800 rounded-lg text-white hover:bg-gray-700 transition"> |
|
|
Comenzar |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>10 descargas al mes</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Acceso a canciones básicas</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-500"> |
|
|
<i class="fas fa-times text-red-500 mr-2"></i> |
|
|
<span>Sin herramientas de creación</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-500"> |
|
|
<i class="fas fa-times text-red-500 mr-2"></i> |
|
|
<span>Sin soporte prioritario</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="plan-card bg-gray-900 rounded-xl overflow-hidden transition duration-300 border-2 border-pink-500 transform scale-105"> |
|
|
<div class="p-6 border-b border-gray-800"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-2">Pro</h3> |
|
|
<p class="text-gray-400 text-sm mb-4">Para creadores serios</p> |
|
|
</div> |
|
|
<span class="px-2 py-1 bg-pink-500 text-white text-xs rounded-full">Popular</span> |
|
|
</div> |
|
|
<div class="flex items-end mb-4"> |
|
|
<span class="text-4xl font-bold">$19</span> |
|
|
<span class="text-gray-400 ml-1">/mes</span> |
|
|
</div> |
|
|
<button class="w-full py-2 gradient-bg rounded-lg text-white hover:opacity-90 transition"> |
|
|
Comenzar |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Descargas ilimitadas</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Acceso a canciones premium</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Herramientas de creación básicas</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Soporte prioritario</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="plan-card bg-gray-900 rounded-xl overflow-hidden transition duration-300"> |
|
|
<div class="p-6 border-b border-gray-800"> |
|
|
<h3 class="text-xl font-bold mb-2">Enterprise</h3> |
|
|
<p class="text-gray-400 text-sm mb-4">Para estudios profesionales</p> |
|
|
<div class="flex items-end mb-4"> |
|
|
<span class="text-4xl font-bold">$99</span> |
|
|
<span class="text-gray-400 ml-1">/mes</span> |
|
|
</div> |
|
|
<button class="w-full py-2 bg-gray-800 rounded-lg text-white hover:bg-gray-700 transition"> |
|
|
Comenzar |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Descargas ilimitadas</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Acceso a todo el catálogo</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Herramientas de creación avanzadas</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Soporte VIP 24/7</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-12 px-4 sm:px-6 lg:px-8 border-t border-gray-800"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<span class="text-2xl font-bold gradient-text">Melodify</span> |
|
|
</div> |
|
|
<div class="flex flex-wrap justify-center gap-6 mb-6 md:mb-0"> |
|
|
<a href="#home" class="hover:text-pink-500 transition">Home</a> |
|
|
<a href="#canciones" class="hover:text-pink-500 transition">Canciones</a> |
|
|
<a href="#autores" class="hover:text-pink-500 transition">Autores</a> |
|
|
<a href="#generos" class="hover:text-pink-500 transition">Géneros</a> |
|
|
<a href="#planes" class="hover:text-pink-500 transition">Planes</a> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-pink-500 transition"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-pink-500 transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-pink-500 transition"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-pink-500 transition"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 text-center text-gray-500 text-sm"> |
|
|
© Melodify 2025. Todos los derechos reservados. |
|
|
</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'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
targetElement.scrollIntoView({ |
|
|
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/melodify" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
