Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mood Music - Découvrez la musique qui correspond à votre humeur</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=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); | |
| color: white; | |
| min-height: 100vh; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #8e2de2, #4a00e0); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .music-card { | |
| transition: all 0.3s ease; | |
| transform-origin: center; | |
| } | |
| .music-card:hover { | |
| transform: scale(1.05) translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); | |
| } | |
| .mood-selector { | |
| transition: all 0.3s ease; | |
| } | |
| .mood-selector:hover { | |
| transform: scale(1.1); | |
| } | |
| .mood-selector.active { | |
| transform: scale(1.15); | |
| box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.5); | |
| } | |
| .carousel { | |
| scroll-snap-type: x mandatory; | |
| scroll-behavior: smooth; | |
| } | |
| .carousel-item { | |
| scroll-snap-align: start; | |
| } | |
| .input-field { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .input-field:focus { | |
| background: rgba(255, 255, 255, 0.2); | |
| outline: none; | |
| box-shadow: 0 0 0 2px rgba(138, 43, 226, 0.5); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(90deg, #8e2de2, #4a00e0); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 1s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .wave-bg { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100px; | |
| background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="rgba(255,255,255,0.1)" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="rgba(255,255,255,0.1)" opacity=".5"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84-23.61,127-31.17,57.95-13.58,114.84-20.83,172-16.07,37.15,3.11,72.58,12.75,105.84,20.33,54.47,16.22,108.26,31.65,162.97,20.79,49.66-9.82,97.6-29.52,141.34-55.24,34.07-24.45,76.84-46.23,112.92-54.73,50.7-11.67,101.27-4.87,150.9,9.29,40.38,11.69,81.19,26.34,116,41.45,36.15,15.56,71.15,31.73,105.67,45.22C1003.4,245.01,1024,223.24,1200,227.99V0Z" fill="rgba(255,255,255,0.1)"/></svg>'); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| } | |
| </style> | |
| </head> | |
| <body class="overflow-x-hidden"> | |
| <!-- Navigation --> | |
| <nav class="glass-card fixed top-0 left-0 right-0 z-50 mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-music text-2xl gradient-text"></i> | |
| <span class="text-xl font-bold gradient-text">Mood Music</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-purple-300 transition">Accueil</a> | |
| <a href="#" class="hover:text-purple-300 transition">Fonctionnalités</a> | |
| <a href="#" class="hover:text-purple-300 transition">Comment ça marche</a> | |
| <a href="#" class="hover:text-purple-300 transition">Premium</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 rounded-full bg-white text-purple-900 font-medium hover:bg-purple-100 transition">Connexion</button> | |
| <button class="md:hidden text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative pt-32 pb-20 px-6 md:px-16"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0 fade-in"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight"> | |
| La musique qui <span class="gradient-text">ressemble à votre humeur</span> | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-300 mb-8"> | |
| Découvrez des recommandations musicales personnalisées basées sur votre localisation, votre humeur ou même une image. Notre IA intelligente trouve la musique parfaite pour chaque moment. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="btn-primary px-8 py-4 rounded-full font-bold text-lg pulse-animation"> | |
| Essayer gratuitement | |
| </button> | |
| <button class="glass-card px-8 py-4 rounded-full font-medium text-lg flex items-center justify-center space-x-2"> | |
| <i class="fas fa-play"></i> | |
| <span>Voir la démo</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center fade-in"> | |
| <div class="relative"> | |
| <div class="glass-card w-80 h-80 md:w-96 md:h-96 rounded-3xl overflow-hidden relative"> | |
| <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27d1b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Personne écoutant de la musique" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-purple-900/70 to-transparent"></div> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 glass-card p-4 rounded-2xl shadow-xl"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-headphones text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold">Playlist du moment</p> | |
| <p class="text-sm text-gray-300">Basée sur votre humeur</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="wave-bg"></div> | |
| </section> | |
| <!-- Mood Selector Section --> | |
| <section class="py-20 px-6 md:px-16 relative"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Comment vous sentez-vous aujourd'hui ?</h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto">Décrivez votre humeur ou téléchargez une image, et notre IA trouvera la musique parfaite pour vous.</p> | |
| </div> | |
| <div class="glass-card p-8 rounded-3xl mb-12"> | |
| <div class="flex flex-col md:flex-row space-y-6 md:space-y-0 md:space-x-6"> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-xl font-bold mb-4">Décrivez votre humeur</h3> | |
| <textarea class="input-field w-full h-32 p-4 rounded-xl mb-4" placeholder="Ex: Je me sens énergique aujourd'hui, j'ai besoin de musique qui me donne la pêche..."></textarea> | |
| <div class="flex flex-wrap gap-3 mb-6"> | |
| <span class="px-4 py-2 bg-purple-900/30 rounded-full text-sm">Heureux</span> | |
| <span class="px-4 py-2 bg-purple-900/30 rounded-full text-sm">Triste</span> | |
| <span class="px-4 py-2 bg-purple-900/30 rounded-full text-sm">Énergique</span> | |
| <span class="px-4 py-2 bg-purple-900/30 rounded-full text-sm">Détendu</span> | |
| <span class="px-4 py-2 bg-purple-900/30 rounded-full text-sm">Nostalgique</span> | |
| </div> | |
| <button class="btn-primary w-full py-3 rounded-xl font-medium">Trouver ma musique</button> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-xl font-bold mb-4">Ou téléchargez une image</h3> | |
| <div class="border-2 border-dashed border-gray-500/30 rounded-xl p-8 text-center cursor-pointer hover:border-purple-500 transition"> | |
| <i class="fas fa-cloud-upload-alt text-4xl mb-4 gradient-text"></i> | |
| <p class="mb-2">Glissez-déposez une image ici</p> | |
| <p class="text-sm text-gray-400 mb-4">ou cliquez pour parcourir vos fichiers</p> | |
| <button class="px-4 py-2 bg-white/10 rounded-full text-sm">Sélectionner une image</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <h3 class="text-xl font-bold mb-6">Sélectionnez rapidement une humeur</h3> | |
| <div class="flex flex-wrap justify-center gap-6"> | |
| <div class="mood-selector w-24 h-24 glass-card rounded-2xl flex flex-col items-center justify-center cursor-pointer"> | |
| <i class="fas fa-laugh-beam text-3xl mb-2 text-yellow-400"></i> | |
| <span>Heureux</span> | |
| </div> | |
| <div class="mood-selector w-24 h-24 glass-card rounded-2xl flex flex-col items-center justify-center cursor-pointer"> | |
| <i class="fas fa-sad-tear text-3xl mb-2 text-blue-400"></i> | |
| <span>Triste</span> | |
| </div> | |
| <div class="mood-selector w-24 h-24 glass-card rounded-2xl flex flex-col items-center justify-center cursor-pointer active"> | |
| <i class="fas fa-bolt text-3xl mb-2 text-purple-400"></i> | |
| <span>Énergique</span> | |
| </div> | |
| <div class="mood-selector w-24 h-24 glass-card rounded-2xl flex flex-col items-center justify-center cursor-pointer"> | |
| <i class="fas fa-spa text-3xl mb-2 text-green-400"></i> | |
| <span>Détendu</span> | |
| </div> | |
| <div class="mood-selector w-24 h-24 glass-card rounded-2xl flex flex-col items-center justify-center cursor-pointer"> | |
| <i class="fas fa-moon text-3xl mb-2 text-indigo-400"></i> | |
| <span>Nostalgique</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Location Section --> | |
| <section class="py-20 px-6 md:px-16 bg-gradient-to-b from-purple-900/20 to-transparent"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <div class="glass-card p-8 rounded-3xl"> | |
| <h2 class="text-3xl font-bold mb-6">Musique adaptée à votre <span class="gradient-text">localisation</span></h2> | |
| <p class="text-lg mb-8">Découvrez les tendances musicales autour de vous ou explorez les sons d'une ville ou d'un pays spécifique.</p> | |
| <div class="mb-6"> | |
| <label class="block mb-2 font-medium">Votre position actuelle</label> | |
| <div class="flex"> | |
| <button class="btn-primary px-6 py-3 rounded-l-xl flex items-center space-x-2"> | |
| <i class="fas fa-location-arrow"></i> | |
| <span>Utiliser ma position</span> | |
| </button> | |
| <button class="glass-card px-6 py-3 rounded-r-xl border-l border-white/10"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block mb-2 font-medium">Ou rechercher une ville</label> | |
| <div class="relative"> | |
| <input type="text" class="input-field w-full px-6 py-3 rounded-xl" placeholder="Ex: Paris, Tokyo, New York..."> | |
| <button class="absolute right-3 top-3 text-purple-300"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button class="btn-primary w-full py-3 rounded-xl font-medium">Explorer la musique locale</button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <div class="glass-card p-6 rounded-3xl"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-xl font-bold">Tendances à Paris</h3> | |
| <div class="flex space-x-2"> | |
| <button class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="carousel flex overflow-x-auto space-x-6 pb-4 scrollbar-hide"> | |
| <div class="carousel-item flex-shrink-0 music-card w-48 glass-card p-4 rounded-2xl"> | |
| <div class="mb-4 relative"> | |
| <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27d1b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Album cover" class="w-full rounded-xl aspect-square object-cover"> | |
| <button class="absolute bottom-2 right-2 w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| <h4 class="font-bold truncate">Nuits d'été</h4> | |
| <p class="text-sm text-gray-300 truncate">Artiste Français</p> | |
| </div> | |
| <div class="carousel-item flex-shrink-0 music-card w-48 glass-card p-4 rounded-2xl"> | |
| <div class="mb-4 relative"> | |
| <img src="https://images.unsplash.com/photo-1496293455970-f8581aae0e3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1113&q=80" alt="Album cover" class="w-full rounded-xl aspect-square object-cover"> | |
| <button class="absolute bottom-2 right-2 w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| <h4 class="font-bold truncate">Rue de Paris</h4> | |
| <p class="text-sm text-gray-300 truncate">Chanteur Local</p> | |
| </div> | |
| <div class="carousel-item flex-shrink-0 music-card w-48 glass-card p-4 rounded-2xl"> | |
| <div class="mb-4 relative"> | |
| <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Album cover" class="w-full rounded-xl aspect-square object-cover"> | |
| <button class="absolute bottom-2 right-2 w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| <h4 class="font-bold truncate">Festival Vibes</h4> | |
| <p class="text-sm text-gray-300 truncate">DJ International</p> | |
| </div> | |
| <div class="carousel-item flex-shrink-0 music-card w-48 glass-card p-4 rounded-2xl"> | |
| <div class="mb-4 relative"> | |
| <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" alt="Album cover" class="w-full rounded-xl aspect-square object-cover"> | |
| <button class="absolute bottom-2 right-2 w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| <h4 class="font-bold truncate">Café du Matin</h4> | |
| <p class="text-sm text-gray-300 truncate">Groupe Indé</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Section --> | |
| <section class="py-20 px-6 md:px-16"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="glass-card p-12 rounded-3xl relative overflow-hidden"> | |
| <div class="absolute -right-20 -top-20 w-64 h-64 bg-purple-600 rounded-full filter blur-3xl opacity-20"></div> | |
| <div class="absolute -left-20 -bottom-20 w-64 h-64 bg-blue-600 rounded-full filter blur-3xl opacity-20"></div> | |
| <div class="flex flex-col md:flex-row items-center relative z-10"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Notre <span class="gradient-text">IA musicale</span> comprend vos émotions</h2> | |
| <p class="text-lg mb-8">Grâce à des algorithmes avancés d'apprentissage automatique, notre IA analyse votre humeur, vos goûts et votre contexte pour vous proposer les meilleures recommandations musicales.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-12 h-12 bg-purple-900/30 rounded-full flex items-center justify-center flex-shrink-0"> | |
| <i class="fas fa-brain text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Analyse émotionnelle</h4> | |
| <p class="text-gray-300">Comprend votre état d'esprit à partir de votre description ou de votre image.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-12 h-12 bg-purple-900/30 rounded-full flex items-center justify-center flex-shrink-0"> | |
| <i class="fas fa-music text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Base de données étendue</h4> | |
| <p class="text-gray-300">Accès à des millions de titres classés par émotion, tempo et style.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-12 h-12 bg-purple-900/30 rounded-full flex items-center justify-center flex-shrink-0"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Apprentissage continu</h4> | |
| <p class="text-gray-300">S'améliore avec le temps en apprenant de vos réactions et préférences.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <div class="glass-card p-6 rounded-2xl"> | |
| <div class="flex items-center space-x-3 mb-6"> | |
| <div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Assistant IA</h4> | |
| <p class="text-sm text-gray-300">En ligne maintenant</p> | |
| </div> | |
| </div> | |
| <div class="bg-black/20 rounded-xl p-4 mb-4"> | |
| <p class="text-sm mb-2 text-gray-300">Vous:</p> | |
| <p class="bg-purple-900/30 rounded-lg p-3 text-sm">"Je me sens nostalgique, comme un dimanche pluvieux d'automne..."</p> | |
| </div> | |
| <div class="bg-black/20 rounded-xl p-4 mb-6"> | |
| <p class="text-sm mb-2 text-gray-300">MoodMusic IA:</p> | |
| <p class="bg-gray-800/50 rounded-lg p-3 text-sm">"J'ai créé une playlist 'Dimanches d'automne' avec des chansons douces et mélancoliques qui correspondent à votre humeur. Voici quelques titres que vous pourriez aimer..."</p> | |
| </div> | |
| <div class="flex space-x-3 overflow-x-auto pb-2"> | |
| <div class="flex-shrink-0 w-16 h-16 bg-purple-900/30 rounded-lg overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-shrink-0 w-16 h-16 bg-purple-900/30 rounded-lg overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-shrink-0 w-16 h-16 bg-purple-900/30 rounded-lg overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1496293455970-f8581aae0e3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1113&q=80" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-shrink-0 w-16 h-16 bg-purple-900/30 rounded-lg overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27d1b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="relative"> | |
| <input type="text" class="input-field w-full px-6 py-3 rounded-xl pr-16" placeholder="Parlez à l'IA..."> | |
| <button class="absolute right-3 top-3 text-purple-300"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Playlists Section --> | |
| <section class="py-20 px-6 md:px-16 bg-gradient-to-b from-purple-900/20 to-transparent"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Découvrez nos <span class="gradient-text">playlists d'humeur</span></h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto">Des collections musicales soigneusement sélectionnées pour chaque état d'esprit et occasion.</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="music-card glass-card p-6 rounded-3xl overflow-hidden relative group"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-purple-600/30 to-blue-600/30"></div> | |
| <div class="relative z-10"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-1">Énergie Pure</h3> | |
| <p class="text-gray-300">Pour vos séances de sport</p> | |
| </div> | |
| <button class="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center group-hover:bg-purple-600 transition"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| <div class="flex -space-x-3 mb-6"> | |
| <div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white/20"> | |
| <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27d1b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white/20"> | |
| <img src="https://images.unsplash.com/photo-1496293455970-f8581aae0e3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1113&q=80" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white/20"> | |
| <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white/20"> | |
| <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span>24 titres</span> | |
| <span>1h 42min</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="music-card glass-card p-6 rounded-3xl overflow-hidden relative group"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-600/30 to-green-600/30"></div> | |
| <div class="relative z-10"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-1">Détente Profonde</h3> | |
| <p class="text-gray-300">Pour se relaxer et méditer</p> | |
| </div> | |
| <button class="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center group-hover:bg-blue-600 transition"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| <div class="flex -space-x-3 mb-6"> | |
| <div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white/20"> | |
| <img src="https://images.unsplash.com/photo-1496293455970-f8581aae0e3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1113&q=80" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white/20"> | |
| <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white/20"> | |
| <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27d1b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white/20"> | |
| <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span>18 titres</span> | |
| <span>1h 15min</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="music-card glass-card p-6 rounded-3xl overflow-hidden relative group"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-pink-600/30 to-purple-600/30"></div> | |
| <div class="relative z-10"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-1">Nostalgie Douce</h3> | |
| <p class="text-gray-300">Voyage dans le temps musical</p> | |
| </div> | |
| <button class="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center group-hover:bg-pink-600 transition"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| <div class="flex -space-x-3 mb-6"> | |
| <div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white/20"> | |
| <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwa | |
| </html> |