Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CinéVerse - Streaming Ultra HD</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> | |
| .movie-card:hover .movie-poster { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); | |
| } | |
| .movie-poster { | |
| transition: all 0.3s ease; | |
| } | |
| .rating-circle { | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| font-weight: bold; | |
| position: absolute; | |
| top: -15px; | |
| right: 10px; | |
| z-index: 10; | |
| } | |
| .rating-high { | |
| background-color: #16a34a; | |
| } | |
| .rating-medium { | |
| background-color: #d97706; | |
| } | |
| .rating-low { | |
| background-color: #dc2626; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%); | |
| } | |
| .platform-icon { | |
| width: 30px; | |
| height: 30px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 6px; | |
| margin-right: 5px; | |
| } | |
| .netflix { | |
| background-color: #e50914; | |
| } | |
| .prime { | |
| background-color: #00a8e1; | |
| } | |
| .disney { | |
| background-color: #113cc7; | |
| } | |
| .search-bar { | |
| backdrop-filter: blur(10px); | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .nav-link:hover { | |
| color: #a5b4fc; | |
| } | |
| .genre-tag { | |
| transition: all 0.2s ease; | |
| } | |
| .genre-tag:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100"> | |
| <!-- Header/Navigation --> | |
| <header class="sticky top-0 z-50 bg-gray-900 bg-opacity-90 border-b border-gray-800"> | |
| <div class="container mx-auto px-4 py-3 flex items-center justify-between"> | |
| <div class="flex items-center space-x-8"> | |
| <a href="#" class="flex items-center"> | |
| <span class="text-2xl font-bold text-indigo-400">Ciné<span class="text-white">Verse</span></span> | |
| </a> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="nav-link text-white hover:text-indigo-300 font-medium">Accueil</a> | |
| <a href="#" class="nav-link text-gray-400 hover:text-white font-medium">Films</a> | |
| <a href="#" class="nav-link text-gray-400 hover:text-white font-medium">Séries</a> | |
| <div class="dropdown relative"> | |
| <button class="nav-link text-gray-400 hover:text-white font-medium flex items-center"> | |
| Catégories <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden mt-2 w-48 bg-gray-800 rounded-md shadow-lg z-50"> | |
| <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700">Action</a> | |
| <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700">Comédie</a> | |
| <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700">Drame</a> | |
| <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700">Horreur</a> | |
| <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700">Romance</a> | |
| </div> | |
| </div> | |
| <a href="#" class="nav-link text-gray-400 hover:text-white font-medium">Nouveautés</a> | |
| </nav> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative hidden md:block"> | |
| <input type="text" placeholder="Rechercher un film..." class="search-bar bg-gray-800 text-white px-4 py-2 rounded-full w-64 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <button class="absolute right-3 top-2 text-gray-400"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <button class="md:hidden text-gray-400"> | |
| <i class="fas fa-search text-xl"></i> | |
| </button> | |
| <a href="#" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium transition duration-300">Connexion</a> | |
| <button class="md:hidden text-gray-400"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Streaming Ultra HD</h1> | |
| <p class="text-xl md:text-2xl mb-8">+962,000 films et séries en VF et VOSTFR en automatique</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#" class="bg-white text-indigo-700 hover:bg-gray-100 font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center"> | |
| <i class="fas fa-play mr-2"></i> Commencer à regarder | |
| </a> | |
| <a href="#" class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-indigo-700 font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center"> | |
| <i class="fas fa-info-circle mr-2"></i> En savoir plus | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Featured Section --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">À ne pas manquer</h2> | |
| <a href="#" class="text-indigo-400 hover:text-indigo-300 flex items-center"> | |
| Voir plus <i class="fas fa-chevron-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> | |
| <!-- Featured Movie 1 --> | |
| <div class="movie-card relative group"> | |
| <div class="relative overflow-hidden rounded-lg"> | |
| <img src="https://via.placeholder.com/300x450/1f2937/ffffff?text=Deadpool+3" alt="Deadpool & Wolverine" class="movie-poster w-full h-auto rounded-lg"> | |
| <div class="rating-circle rating-high"> | |
| 7.6 | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <h3 class="text-white font-bold">Deadpool & Wolverine</h3> | |
| <p class="text-gray-300 text-sm">2024 • Action, Comédie</p> | |
| <div class="flex mt-2"> | |
| <span class="platform-icon netflix text-white"><i class="fab fa-netflix"></i></span> | |
| <span class="platform-icon disney text-white"><i class="fab fa-disney"></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Movie 2 --> | |
| <div class="movie-card relative group"> | |
| <div class="relative overflow-hidden rounded-lg"> | |
| <img src="https://via.placeholder.com/300x450/1f2937/ffffff?text=Gladiator+II" alt="Gladiator II" class="movie-poster w-full h-auto rounded-lg"> | |
| <div class="rating-circle rating-medium"> | |
| 6.7 | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <h3 class="text-white font-bold">Gladiator II</h3> | |
| <p class="text-gray-300 text-sm">2024 • Action, Drame</p> | |
| <div class="flex mt-2"> | |
| <span class="platform-icon prime text-white"><i class="fab fa-amazon"></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Movie 3 --> | |
| <div class="movie-card relative group"> | |
| <div class="relative overflow-hidden rounded-lg"> | |
| <img src="https://via.placeholder.com/300x450/1f2937/ffffff?text=Mission+Impossible" alt="Mission : Impossible - The Final Reckoning" class="movie-poster w-full h-auto rounded-lg"> | |
| <div class="rating-circle rating-high"> | |
| 8.8 | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <h3 class="text-white font-bold">Mission : Impossible</h3> | |
| <p class="text-gray-300 text-sm">2025 • Action, Thriller</p> | |
| <div class="flex mt-2"> | |
| <span class="platform-icon prime text-white"><i class="fab fa-amazon"></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Movie 4 --> | |
| <div class="movie-card relative group"> | |
| <div class="relative overflow-hidden rounded-lg"> | |
| <img src="https://via.placeholder.com/300x450/1f2937/ffffff?text=Captain+America" alt="Captain America : Brave New World" class="movie-poster w-full h-auto rounded-lg"> | |
| <div class="rating-circle rating-medium"> | |
| 6.1 | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <h3 class="text-white font-bold">Captain America</h3> | |
| <p class="text-gray-300 text-sm">2025 • Action, Super-héros</p> | |
| <div class="flex mt-2"> | |
| <span class="platform-icon disney text-white"><i class="fab fa-disney"></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Movie 5 --> | |
| <div class="movie-card relative group"> | |
| <div class="relative overflow-hidden rounded-lg"> | |
| <img src="https://via.placeholder.com/300x450/1f2937/ffffff?text=Sonic+3" alt="Sonic 3, le film" class="movie-poster w-full h-auto rounded-lg"> | |
| <div class="rating-circle rating-high"> | |
| 7.7 | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <h3 class="text-white font-bold">Sonic 3, le film</h3> | |
| <p class="text-gray-300 text-sm">2024 • Animation, Aventure</p> | |
| <div class="flex mt-2"> | |
| <span class="platform-icon prime text-white"><i class="fab fa-amazon"></i></span> | |
| <span class="platform-icon netflix text-white"><i class="fab fa-netflix"></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories Section --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6">Parcourir par genre</h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <a href="#" class="genre-tag bg-indigo-900 hover:bg-indigo-800 text-white px-4 py-3 rounded-lg font-medium text-center">Action</a> | |
| <a href="#" class="genre-tag bg-yellow-900 hover:bg-yellow-800 text-white px-4 py-3 rounded-lg font-medium text-center">Comédie</a> | |
| <a href="#" class="genre-tag bg-purple-900 hover:bg-purple-800 text-white px-4 py-3 rounded-lg font-medium text-center">Drame</a> | |
| <a href="#" class="genre-tag bg-red-900 hover:bg-red-800 text-white px-4 py-3 rounded-lg font-medium text-center">Horreur</a> | |
| <a href="#" class="genre-tag bg-pink-900 hover:bg-pink-800 text-white px-4 py-3 rounded-lg font-medium text-center">Romance</a> | |
| <a href="#" class="genre-tag bg-gray-800 hover:bg-gray-700 text-white px-4 py-3 rounded-lg font-medium text-center">Science-fiction</a> | |
| </div> | |
| </section> | |
| <!-- New Releases Section --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Nouveautés 2024</h2> | |
| <a href="#" class="text-indigo-400 hover:text-indigo-300 flex items-center"> | |
| Voir plus <i class="fas fa-chevron-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> | |
| <!-- Repeat this block for each movie --> | |
| <div class="movie-card relative group"> | |
| <div class="relative overflow-hidden rounded-lg"> | |
| <img src="https://via.placeholder.com/300x450/1f2937/ffffff?text=Venom+3" alt="Venom : The Last Dance" class="movie-poster w-full h-auto rounded-lg"> | |
| <div class="rating-circle rating-medium"> | |
| 6.7 | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <h3 class="text-white font-bold">Venom : The Last Dance</h3> | |
| <p class="text-gray-300 text-sm">2024 • Action, Sci-Fi</p> | |
| <div class="flex mt-2"> | |
| <span class="platform-icon netflix text-white"><i class="fab fa-netflix"></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card relative group"> | |
| <div class="relative overflow-hidden rounded-lg"> | |
| <img src="https://via.placeholder.com/300x450/1f2937/ffffff?text=Kraven" alt="Kraven the Hunter" class="movie-poster w-full h-auto rounded-lg"> | |
| <div class="rating-circle rating-medium"> | |
| 6.6 | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <h3 class="text-white font-bold">Kraven the Hunter</h3> | |
| <p class="text-gray-300 text-sm">2024 • Action, Aventure</p> | |
| <div class="flex mt-2"> | |
| <span class="platform-icon prime text-white"><i class="fab fa-amazon"></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card relative group"> | |
| <div class="relative overflow-hidden rounded-lg"> | |
| <img src="https://via.placeholder.com/300x450/1f2937/ffffff?text=Devara" alt="Devara: Partie 1" class="movie-poster w-full h-auto rounded-lg"> | |
| <div class="rating-circle rating-high"> | |
| 7.0 | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <h3 class="text-white font-bold">Devara: Partie 1</h3> | |
| <p class="text-gray-300 text-sm">2024 • Action, Drame</p> | |
| <div class="flex mt-2"> | |
| <span class="platform-icon netflix text-white"><i class="fab fa-netflix"></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card relative group"> | |
| <div class="relative overflow-hidden rounded-lg"> | |
| <img src="https://via.placeholder.com/300x450/1f2937/ffffff?text=The+Siege" alt="The Siege" class="movie-poster w-full h-auto rounded-lg"> | |
| <div class="rating-circle rating-low"> | |
| 5.4 | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <h3 class="text-white font-bold">The Siege</h3> | |
| <p class="text-gray-300 text-sm">2023 • Action, Thriller</p> | |
| <div class="flex mt-2"> | |
| <span class="platform-icon prime text-white"><i class="fab fa-amazon"></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card relative group"> | |
| <div class="relative overflow-hidden rounded-lg"> | |
| <img src="https://via.placeholder.com/300x450/1f2937/ffffff?text=Brave+Citizen" alt="Brave Citizen" class="movie-poster w-full h-auto rounded-lg"> | |
| <div class="rating-circle rating-high"> | |
| 7.1 | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <h3 class="text-white font-bold">Brave Citizen</h3> | |
| <p class="text-gray-300 text-sm">2023 • Action, Drame</p> | |
| <div class="flex mt-2"> | |
| <span class="platform-icon netflix text-white"><i class="fab fa-netflix"></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Coming Soon Section --> | |
| <section> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Prochainement</h2> | |
| <a href="#" class="text-indigo-400 hover:text-indigo-300 flex items-center"> | |
| Voir plus <i class="fas fa-chevron-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> | |
| <!-- Repeat this block for each movie --> | |
| <div class="movie-card relative group"> | |
| <div class="relative overflow-hidden rounded-lg"> | |
| <img src="https://via.placeholder.com/300x450/1f2937/ffffff?text=Tin+Soldier" alt="Tin Soldier" class="movie-poster w-full h-auto rounded-lg"> | |
| <div class="absolute top-2 left-2 bg-yellow-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| Bientôt | |
| </div> | |
| <div class="rating-circle rating-medium"> | |
| 7.1 | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <h3 class="text-white font-bold">Tin Soldier</h3> | |
| <p class="text-gray-300 text-sm">2025 • Action, Guerre</p> | |
| <p class="text-yellow-400 text-sm mt-1">Sortie: 15 mars 2025</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card relative group"> | |
| <div class="relative overflow-hidden rounded-lg"> | |
| <img src="https://via.placeholder.com/300x450/1f2937/ffffff?text=Balle+perdue+3" alt="Balle perdue 3" class="movie-poster w-full h-auto rounded-lg"> | |
| <div class="absolute top-2 left-2 bg-yellow-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| Bientôt | |
| </div> | |
| <div class="rating-circle rating-medium"> | |
| 6.7 | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <h3 class="text-white font-bold">Balle perdue 3</h3> | |
| <p class="text-gray-300 text-sm">2025 • Action, Thriller</p> | |
| <p class="text-yellow-400 text-sm mt-1">Sortie: 12 avril 2025</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card relative group"> | |
| <div class="relative overflow-hidden rounded-lg"> | |
| <img src="https://via.placeholder.com/300x450/1f2937/ffffff?text=Thunderbolts" alt="Thunderbolts*" class="movie-poster w-full h-auto rounded-lg"> | |
| <div class="absolute top-2 left-2 bg-yellow-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| Bientôt | |
| </div> | |
| <div class="rating-circle rating-high"> | |
| 7.5 | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <h3 class="text-white font-bold">Thunderbolts*</h3> | |
| <p class="text-gray-300 text-sm">2025 • Action, Super-héros</p> | |
| <p class="text-yellow-400 text-sm mt-1">Sortie: 2 mai 2025</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card relative group"> | |
| <div class="relative overflow-hidden rounded-lg"> | |
| <img src="https://via.placeholder.com/300x450/1f2937/ffffff?text=Karate+Kid" alt="Karate Kid: Legends" class="movie-poster w-full h-auto rounded-lg"> | |
| <div class="absolute top-2 left-2 bg-yellow-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| Bientôt | |
| </div> | |
| <div class="rating-circle rating-high"> | |
| 7.3 | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <h3 class="text-white font-bold">Karate Kid: Legends</h3> | |
| <p class="text-gray-300 text-sm">2025 • Action, Drame</p> | |
| <p class="text-yellow-400 text-sm mt-1">Sortie: 20 juin 2025</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card relative group"> | |
| <div class="relative overflow-hidden rounded-lg"> | |
| <img src="https://via.placeholder.com/300x450/1f2937/ffffff?text=Diamond+Heist" alt="Voleur de diamant : Le casse commence" class="movie-poster w-full h-auto rounded-lg"> | |
| <div class="absolute top-2 left-2 bg-yellow-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| Bientôt | |
| </div> | |
| <div class="rating-circle rating-medium"> | |
| 6.8 | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <h3 class="text-white font-bold">Voleur de diamant</h3> | |
| <p class="text-gray-300 text-sm">2025 • Action, Crime</p> | |
| <p class="text-yellow-400 text-sm mt-1">Sortie: 10 juillet 2025</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Newsletter Section --> | |
| <section class="bg-gray-800 py-12"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-4">Restez informé des dernières sorties</h2> | |
| <p class="text-gray-400 mb-6 max-w-2xl mx-auto">Abonnez-vous à notre newsletter pour recevoir les dernières actualités cinéma directement dans votre boîte mail.</p> | |
| <div class="flex flex-col sm:flex-row justify-center max-w-md mx-auto"> | |
| <input type="email" placeholder="Votre adresse email" class="bg-gray-700 text-white px-4 py-3 rounded-l-lg sm:rounded-r-none rounded-r-lg sm:w-full focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-r-lg sm:rounded-l-none rounded-l-lg mt-2 sm:mt-0 sm:w-auto transition duration-300"> | |
| S'abonner | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 py-12 border-t border-gray-800"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white mb-4 flex items-center"> | |
| <span class="text-indigo-400">Ciné</span><span class="text-white">Verse</span> | |
| </h3> | |
| <p class="text-gray-400 mb-4">Votre destination pour découvrir les meilleurs films et où les regarder légalement.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">Liens utiles</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Conditions d'utilisation</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">Plateformes</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white flex items-center"><span class="platform-icon netflix mr-2"><i class="fab fa-netflix"></i></span> Netflix</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white flex items-center"><span class="platform-icon prime mr-2"><i class="fab fa-amazon"></i></span> Amazon Prime</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white flex items-center"><span class="platform-icon disney mr-2"><i class="fab fa-disney"></i></span> Disney+</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">Informations</h4> | |
| <p class="text-gray-400 mb-2">Ce site utilise l'API TMDB mais n'est pas affilié à TMDB.</p> | |
| <p class="text-gray-400">Les films présentés sont protégés par des droits d'auteur.</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500"> | |
| <p>© 2023 CinéVerse. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle functionality would go here | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // You could add JavaScript for mobile menu toggle here | |
| console.log('CinéVerse loaded'); | |
| }); | |
| </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=docto41/cin-verse-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |