Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LaBlackBox STUDIO - Studio d'enregistrement à La Réunion</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"> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Montserrat:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --neon-pink: #ff2d75; | |
| --neon-blue: #00f3ff; | |
| --dark-purple: #1a0033; | |
| --deep-blue: #0a0022; | |
| } | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: var(--deep-blue); | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, .neon-text { | |
| font-family: 'Orbitron', sans-serif; | |
| text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-blue); | |
| } | |
| .neon-border { | |
| box-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-blue); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .neon-glow { | |
| animation: glow 2s ease-in-out infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--neon-pink), 0 0 20px var(--neon-pink); | |
| } | |
| to { | |
| text-shadow: 0 0 10px #fff, 0 0 15px var(--neon-blue), 0 0 20px var(--neon-blue), 0 0 25px var(--neon-blue); | |
| } | |
| } | |
| .studio-bg { | |
| background: linear-gradient(rgba(10, 0, 34, 0.9), rgba(26, 0, 51, 0.9)), url('https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| background-attachment: fixed; | |
| } | |
| .pricing-card { | |
| transition: all 0.3s ease; | |
| } | |
| .pricing-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 0 20px var(--neon-pink), 0 0 30px var(--neon-blue); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: var(--neon-blue); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .logo { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, var(--neon-pink), var(--deep-blue)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 0 20px var(--neon-pink), 0 0 30px var(--neon-blue); | |
| border: 2px solid var(--neon-blue); | |
| } | |
| .login-form { | |
| background: rgba(10, 0, 34, 0.8); | |
| backdrop-filter: blur(10px); | |
| } | |
| .btn-neon { | |
| background: linear-gradient(45deg, var(--neon-pink), var(--neon-blue)); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-neon:hover { | |
| box-shadow: 0 0 15px var(--neon-pink), 0 0 25px var(--neon-blue); | |
| transform: scale(1.05); | |
| } | |
| .equipment-item { | |
| transition: all 0.3s ease; | |
| } | |
| .equipment-item:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 15px var(--neon-pink); | |
| } | |
| .social-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| transform: scale(1.2); | |
| color: var(--neon-blue); | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid var(--neon-pink); | |
| color: white; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(0, 243, 255, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(0, 243, 255, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(0, 243, 255, 0); | |
| } | |
| } | |
| /* Style pour les modules média */ | |
| .media-container { | |
| background: rgba(0, 0, 0, 0.7); | |
| backdrop-filter: blur(5px); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| .media-header { | |
| background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue)); | |
| padding: 12px 20px; | |
| font-weight: bold; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .media-header i { | |
| margin-right: 10px; | |
| font-size: 1.2rem; | |
| } | |
| .media-content { | |
| padding: 15px; | |
| } | |
| .spotify-player { | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| .youtube-player { | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| /* Style pour Calendly */ | |
| .calendly-container { | |
| background: rgba(0, 0, 0, 0.7); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| padding: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body class="studio-bg"> | |
| <!-- Navigation --> | |
| <nav class="bg-black bg-opacity-70 fixed w-full z-50 backdrop-filter backdrop-blur-lg"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-20"> | |
| <div class="flex items-center"> | |
| <div class="logo mr-4"> | |
| <span class="text-white font-bold text-xs text-center">LaBlackBox<br>STUDIO</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <a href="#home" class="nav-link text-white px-3 py-2 rounded-md text-sm font-medium">Accueil</a> | |
| <a href="#services" class="nav-link text-white px-3 py-2 rounded-md text-sm font-medium">Nos Services</a> | |
| <a href="#studio" class="nav-link text-white px-3 py-2 rounded-md text-sm font-medium">Le Studio</a> | |
| <a href="#media" class="nav-link text-white px-3 py-2 rounded-md text-sm font-medium">Médias</a> | |
| <a href="#contact" class="nav-link text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a> | |
| <a href="#booking" class="nav-link text-white px-3 py-2 rounded-md text-sm font-medium">Réservation</a> | |
| <a href="#login" class="nav-link text-white px-3 py-2 rounded-md text-sm font-medium">Espace Résidents</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-white focus:outline-none"> | |
| <svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-90"> | |
| <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 text-white">Accueil</a> | |
| <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-white">Nos Services</a> | |
| <a href="#studio" class="block px-3 py-2 rounded-md text-base font-medium text-white">Le Studio</a> | |
| <a href="#media" class="block px-3 py-2 rounded-md text-base font-medium text-white">Médias</a> | |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white">Contact</a> | |
| <a href="#booking" class="block px-3 py-2 rounded-md text-base font-medium text-white">Réservation</a> | |
| <a href="#login" class="block px-3 py-2 rounded-md text-base font-medium text-white">Espace Résidents</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 text-center"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 neon-text neon-glow">LaBlackBox STUDIO</h1> | |
| <p class="text-xl md:text-2xl mb-10 neon-text">Le son a trouvé son refuge</p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#services" class="btn-neon text-black font-bold py-3 px-6 rounded-full">Nos Services</a> | |
| <a href="#booking" class="bg-transparent border-2 border-white text-white font-bold py-3 px-6 rounded-full hover:bg-white hover:text-black transition duration-300">Réserver</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-4xl font-bold mb-16 text-center neon-text">Nos Services</h2> | |
| <div class="flex justify-center mb-10"> | |
| <div class="inline-flex rounded-md shadow-sm"> | |
| <button onclick="showTab('artistes')" class="px-6 py-3 text-sm font-medium rounded-l-lg tab-active"> | |
| Artistes | |
| </button> | |
| <button onclick="showTab('musiciens')" class="px-6 py-3 text-sm font-medium border-t border-b border-gray-600"> | |
| Musiciens | |
| </button> | |
| <button onclick="showTab('residents')" class="px-6 py-3 text-sm font-medium rounded-r-lg border border-gray-600"> | |
| Résidents | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Artistes Tab --> | |
| <div id="artistes-tab" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="pricing-card bg-gray-900 bg-opacity-70 p-8 rounded-lg neon-border"> | |
| <h3 class="text-2xl font-bold mb-4 neon-text">Location avec ingé son</h3> | |
| <p class="text-3xl font-bold mb-6 text-neon-blue">30€/h</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Accès à tout le matériel | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Ingénieur son dédié | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Export des pistes brutes | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="pricing-card bg-gray-900 bg-opacity-70 p-8 rounded-lg neon-border"> | |
| <h3 class="text-2xl font-bold mb-4 neon-text">Mixage (piste sur place)</h3> | |
| <p class="text-3xl font-bold mb-6 text-neon-blue">70€</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Mixage professionnel | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> 2 retouches incluses | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Export en WAV và MP3 | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="pricing-card bg-gray-900 bg-opacity-70 p-8 rounded-lg neon-border"> | |
| <h3 class="text-2xl font-bold mb-4 neon-text">Mixage (piste extérieure)</h3> | |
| <p class="text-3xl font-bold mb-6 text-neon-blue">Sur demande</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Analyse des pistes | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Devis personnalisé | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Conseils techniques | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="pricing-card bg-gray-900 bg-opacity-70 p-8 rounded-lg neon-border"> | |
| <h3 class="text-2xl font-bold mb-4 neon-text">Mastering Loudness</h3> | |
| <p class="text-3xl font-bold mb-6 text-neon-blue">50€</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Optimisation du volume | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Correction EQ légère | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Formatage pour streaming | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="pricing-card bg-gray-900 bg-opacity-70 p-8 rounded-lg neon-border"> | |
| <h3 class="text-2xl font-bold mb-4 neon-text">Mastering multi-plateformes</h3> | |
| <p class="text-3xl font-bold mb-6 text-neon-blue">50€</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Versions spécifiques | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Vinyl, CD, streaming | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Rapports techniques | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Musiciens Tab (hidden by default) --> | |
| <div id="musiciens-tab" class="hidden grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="pricing-card bg-gray-900 bg-opacity-70 p-8 rounded-lg neon-border"> | |
| <h3 class="text-2xl font-bold mb-4 neon-text">Mixage d'instrumentale</h3> | |
| <p class="text-3xl font-bold mb-6 text-neon-blue">À partir de 70€</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Équilibrage des pistes | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Spatialisation 3D | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Dynamique contrôlée | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="pricing-card bg-gray-900 bg-opacity-70 p-8 rounded-lg neon-border"> | |
| <h3 class="text-2xl font-bold mb-4 neon-text">Prise de son instrument</h3> | |
| <p class="text-3xl font-bold mb-6 text-neon-blue">15€/h</p> | |
| <ul class="space-Y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Micros professionnels | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Préamplis haut de gamme | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Monitoring précis | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="pricing-card bg-gray-900 bg-opacity-70 p-8 rounded-lg neon-border"> | |
| <h3 class="text-2xl font-bold mb-4 neon-text">Formation MAO</h3> | |
| <p class="text-3xl font-bold mb-6 text-neon-blue">30€/h</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Cours personnalisés | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Tous niveaux | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Logiciels professionnels | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Residents Tab (hidden by default) --> | |
| <div id="residents-tab" class="hidden grid md:grid-cols-1 gap-8"> | |
| <div class="pricing-card bg-gray-900 bg-opacity-70 p-8 rounded-lg neon-border"> | |
| <h3 class="text-2xl font-bold mb-4 neon-text">Programme Résident</h3> | |
| <p class="text-3xl font-bold mb-6 text-neon-blue">120€/mois</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> 6 à 8h de studio offertes/mois | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Obligation de produire 1 son/mois | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Engagement minimum 4 mois | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Mix + master inclus | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Accès prioritaire au planning | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-neon-pink mr-2"></i> Espace de stockage dédié | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Studio Section --> | |
| <section id="studio" class="py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-4xl font-bold mb-16 text-center neon-text">Le Studio</h2> | |
| <div class="grid md:grid-cols-2 gap-12 items-center mb-20"> | |
| <div> | |
| <h3 class="text-3xl font-bold mb-6 neon-text">Notre espace créatif</h3> | |
| <p class="text-lg mb-6">LaBlackBox STUDIO est bien plus qu'un simple studio d'enregistrement. C'est un lieu de création, d'échange et d'innovation sonore au cœur de La Réunion.</p> | |
| <p class="text-lg mb-6">Notre cabine insonorisée et notre salle de contrôle offrent un environnement idéal pour capturer les performances les plus authentiques tout en bénéficiant d'un monitoring précis.</p> | |
| <p class="text-lg">Rejoignez notre communauté d'artistes passionnés et donnez vie à vos projets musicaux dans les meilleures conditions techniques et humaines.</p> | |
| </div> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Studio d'enregistrement" class="rounded-lg neon-border w-full h-auto"> | |
| <div class="absolute -bottom-5 -right-5 bg-black bg-opacity-70 p-4 rounded-lg neon-border"> | |
| <p class="text-sm italic">"L'endroit où le son prend vie"</p> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-3xl font-bold mb-10 text-center neon-text">Notre Matériel</h3> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="equipment-item bg-gray-900 bg-opacity-70 p-6 rounded-lg neon-border"> | |
| <div class="text-4xl text-neon-blue mb-4"> | |
| <i class="fas fa-microphone"></i> | |
| </div> | |
| <h4 class="text-xl font-bold mb-2">Microphones</h4> | |
| <ul class="text-sm"> | |
| <li>Neumann U87 Ai</li> | |
| <li>Shure SM7B</li> | |
| <li>AKG C414 XLS</li> | |
| <li>Sennheiser MD421</li> | |
| </ul> | |
| </div> | |
| <div class="equipment-item bg-gray-900 bg-opacity-70 p-6 rounded-lg neon-border"> | |
| <div class="text-4xl text-neon-blue mb-4"> | |
| <i class="fas fa-sliders-h"></i> | |
| </div> | |
| <h4 class="text-xl font-bold mb-2">Préamplis</h4> | |
| <ul class="text-sm"> | |
| <li>Universal Audio 610</li> | |
| <li>Neve 1073</li> | |
| <li>API 512c</li> | |
| <li>Focusrite ISA One</li> | |
| </ul> | |
| </div> | |
| <div class="equipment-item bg-gray-900 bg-opacity-70 p-6 rounded-lg neon-border"> | |
| <div class="text-4xl text-neon-blue mb-4"> | |
| <i class="fas fa-headphones"></i> | |
| </div> | |
| <h4 class="text-xl font-bold mb-2">Monitoring</h4> | |
| <ul class="text-sm"> | |
| <li>Yamaha HS8</li> | |
| <li>KRK Rokit 5</li> | |
| <li>Beyerdynamic DT 990 Pro</li> | |
| <li>Sony MDR-7506</li> | |
| </ul> | |
| </div> | |
| <div class="equipment-item bg-gray-900 bg-opacity-70 p-6 rounded-lg neon-border"> | |
| <div class="text-4xl text-neon-blue mb-4"> | |
| <i class="fas fa-laptop-code"></i> | |
| </div> | |
| <h4 class="text-xl font-bold mb-2">Logiciels</h4> | |
| <ul class="text-sm"> | |
| <li>Pro Tools Ultimate</li> | |
| <li>Ableton Live Suite</li> | |
| <li>Logic Pro X</li> | |
| <li>FL Studio</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Media Section --> | |
| <section id="media" class="py-20 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-4xl font-bold mb-16 text-center neon-text">Nos Créations</h2> | |
| <div class="grid md:grid-cols-2 gap-8 mb-16"> | |
| <!-- Module Spotify --> | |
| <div class="media-container neon-border"> | |
| <div class="media-header"> | |
| <i class="fab fa-spotify"></i> | |
| <span>Écoutez nos productions</span> | |
| </div> | |
| <div class="media-content"> | |
| <div class="spotify-player"> | |
| <iframe style="border-radius:12px" src="https://open.spotify.com/embed/artist/3w3C6C54XtUodQSGCPzbjn?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Module YouTube --> | |
| <div class="media-container neon-border"> | |
| <div class="media-header"> | |
| <i class="fab fa-youtube"></i> | |
| <span>Découvrez notre univers</span> | |
| </div> | |
| <div class="media-content"> | |
| <div class="youtube-player"> | |
| <iframe width="100%" height="315" src="https://www.youtube.com/embed/7l5wjqCUJhM?si=tX9TvCFtrE_84qIl" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-lg mb-6">Découvrez les productions réalisées dans notre studio et les performances de nos artistes résidents.</p> | |
| <a href="#" class="btn-neon text-black font-bold py-3 px-6 rounded-full inline-block">Voir plus de contenus</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-4xl font-bold mb-16 text-center neon-text">Contact</h2> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6 neon-text">Nous contacter</h3> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium mb-1">Nom</label> | |
| <input type="text" id="name" class="w-full bg-gray-800 bg-opacity-50 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-neon-blue"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium mb-1">Email</label> | |
| <input type="email" id="email" class="w-full bg-gray-800 bg-opacity-50 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-neon-blue"> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium mb-1">Sujet</label> | |
| <select id="subject" class="w-full bg-gray-800 bg-opacity-50 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-neon-blue"> | |
| <option>Demande de renseignements</option> | |
| <option>Demande de devis</option> | |
| <option>Réservation</option> | |
| <option>Autre</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium mb-1">Message</label> | |
| <textarea id="message" rows="5" class="w-full bg-gray-800 bg-opacity-50 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-neon-blue"></textarea> | |
| </div> | |
| <button type="submit" class="btn-neon text-black font-bold py-3 px-6 rounded-full w-full">Envoyer</button> | |
| </form> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6 neon-text">Nous trouver</h3> | |
| <div class="bg-gray-900 bg-opacity-70 p-8 rounded-lg neon-border mb-8"> | |
| <div class="flex items-start mb-6"> | |
| <div class="text-neon-blue mr-4 mt-1"> | |
| <i class="fas fa-map-marker-alt text-2xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-1">Adresse</h4> | |
| <p>Rue Montesquieu<br>La Possession<br>La Réunion</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="text-neon-blue mr-4 mt-1"> | |
| <i class="fas fa-envelope text-2xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-1">Email</h4> | |
| <p>lablackbox974@gmail.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-neon-blue mr-4 mt-1"> | |
| <i class="fas fa-phone-alt text-2xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-1">Téléphone</h4> | |
| <p>0693 31 35 93</p> | |
| </div> | |
| </div> | |
| </div> | |
| <h4 class="text-xl font-bold mb-4 neon-text">Suivez-nous</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="social-icon text-white text-2xl hover:text-neon-blue"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="social-icon text-white text-2xl hover:text-neon-blue"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="social-icon text-white text-2xl hover:text-neon-blue"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="social-icon text-white text-2xl hover:text-neon-blue"> | |
| <i class="fab fa-soundcloud"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Booking Section --> | |
| <section id="booking" class="py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-4xl font-bold mb-6 text-center neon-text">Réservation en ligne</h2> | |
| <p class="text-xl text-center mb-16">Réservez votre créneau en quelques clics</p> | |
| <div class="bg-black bg-opacity-50 rounded-lg p-8 neon-border"> | |
| <!-- Intégration Calendly --> | |
| <div class="calendly-container"> | |
| <div class="calendly-inline-widget" data-url="https://calendly.com/lablackbox974" style="min-width:320px;height:700px;"></div> | |
| <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Login Section --> | |
| <section id="login" class="py-20 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-70"> | |
| <div class="max-w-md mx-auto login-form p-10 rounded-xl neon-border"> | |
| <div class="text-center mb-10"> | |
| <div class="logo mx-auto mb-6"> | |
| <span class="text-white font-bold text-xs text-center">LaBlackBox<br>STUDIO</span> | |
| </div> | |
| <h2 class="text-3xl font-bold neon-text">Espace Résidents</h2> | |
| <p class="text-gray-300 mt-2">Accès réservé aux artistes résidents</p> | |
| </div> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="login-email" class="block text-sm font-medium mb-1">Email</label> | |
| <input type="email" id="login-email" class="w-full bg-gray-800 bg-opacity-50 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-neon-blue"> | |
| </div> | |
| <div> | |
| <label for="login-password" class="block text-sm font-medium mb-1">Mot de passe</label> | |
| <input type="password" id="login-password" class="w-full bg-gray-800 bg-opacity-50 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-neon-blue"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-neon-blue focus:ring-neon-blue border-gray-700 rounded"> | |
| <label for="remember-me" class="ml-2 block text-sm">Se souvenir de moi</label> | |
| </div> | |
| <div class="text-sm"> | |
| <a href="#" class="text-neon-blue hover:text-neon-pink">Mot de passe oublié?</a> | |
| </div> | |
| </div> | |
| <div> | |
| <button type="submit" class="btn-neon text-black font-bold py-3 px-6 rounded-full w-full">Connexion</button> | |
| </div> | |
| </form> | |
| <div class="mt-8 text-center"> | |
| <p class="text-sm text-gray-400">Vous n'êtes pas encore résident? <a href="#contact" class="text-neon-blue hover:text-neon-pink">Contactez-nous</a> pour rejoindre le programme.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black bg-opacity-90 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"> | |
| <div> | |
| <div class="logo mb-4"> | |
| <span class="text-white font-bold text-xs text-center">LaBlackBox<br>STUDIO</span> | |
| </div> | |
| <p class="text-sm text-gray-400">Le son a trouvé son refuge. Studio d'enregistrement professionnel à La Réunion.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 neon-text">Navigation</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-white transition">Accueil</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-white transition">Nos Services</a></li> | |
| <li><a href="#studio" class="text-gray-400 hover:text-white transition">Le Studio</a></li> | |
| <li><a href="#media" class="text-gray-400 hover:text-white transition">Médias</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| <li><a href="#booking" class="text-gray-400 hover:text-white transition">Réservation</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 neon-text">Horaires</h4> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li>Lundi: 14h - 22h</li> | |
| <li>Mardi: 14h - 22h</li> | |
| <li>Mercredi: 14h - 22h</li> | |
| <li>Jeudi: 14h - 22h</li> | |
| <li>Vendredi: 14h - 00h</li> | |
| <li>Samedi: 10h - 00h</li> | |
| <li>Dimanche: Fermé</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 neon-text">Contact</h4> | |
| <address class="not-italic text-sm text-gray-400 space-y-2"> | |
| <p>Rue Montesquieu<br>La Possession<br>La Réunion</p> | |
| <p>lablackbox974@gmail.com</p> | |
| <p>0693 31 35 93</p> | |
| </address> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="social-icon text-gray-400 hover:text-neon-blue"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="social-icon text-gray-400 hover:text-neon-blue"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="social-icon text-gray-400 hover:text-neon-blue"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="social-icon text-gray-400 hover:text-neon-blue"> | |
| <i class="fab fa-soundcloud"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-sm text-gray-400">© 2023 LaBlackBox STUDIO. Tous droits réservés.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-sm text-gray-400 hover:text-white transition">Mentions légales</a> | |
| <a href="#" class="text-sm text-gray-400 hover:text-white transition">CGV</a> | |
| <a href="#" class="text-sm text-gray-400 hover:text-white transition">Politique de confidentialité</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Services tabs | |
| function showTab(tabName) { | |
| // Hide all tabs | |
| document.getElementById('artistes-tab').classList.add('hidden'); | |
| document.getElementById('musiciens-tab').classList.add('hidden'); | |
| document.getElementById('residents-tab').classList.add('hidden'); | |
| // Remove active class from all buttons | |
| document.querySelectorAll('[onclick^="showTab"]').forEach(button => { | |
| button.classList.remove('tab-active'); | |
| button.classList.add('border', 'border-gray-600'); | |
| }); | |
| // Show selected tab | |
| document.getElementById(`${tabName}-tab`).classList.remove('hidden'); | |
| // Add active class to clicked button | |
| event.target.classList.add('tab-active'); | |
| event.target.classList.remove('border'); | |
| // Special styling for first and last buttons | |
| if (tabName === 'artistes') { | |
| event.target.classList.add('rounded-l-lg'); | |
| event.target.nextElementSibling.classList.remove('rounded-l-lg'); | |
| } else if (tabName === 'residents') { | |
| event.target.classList.add('rounded-r-lg'); | |
| event.target.previousElementSibling.classList.remove('rounded-r-lg'); | |
| } | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </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=Alexandre97/lablackboxstudio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |