Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MegaMarket AI - 9,850,000+ produits numériques</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> | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .blinking { | |
| animation: blink 2s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| .category-chip { | |
| transition: all 0.3s ease; | |
| } | |
| .category-chip:hover { | |
| transform: scale(1.05); | |
| background-color: #3b82f6 ; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen font-sans"> | |
| <!-- Navigation --> | |
| <nav class="glass-effect fixed w-full z-50"> | |
| <div class="max-w-8xl 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">MegaMarket AI</span> | |
| </div> | |
| <div class="hidden lg:block ml-10"> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-blue-600 text-white">Accueil</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">Explorer</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">Catégories</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">Créateurs IA</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">Abonnements</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden lg:block"> | |
| <div class="ml-4 flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher parmi 9.8M+ produits..." class="pl-10 pr-4 py-2 rounded-full bg-gray-800 text-white text-sm w-64 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| <button class="px-4 py-2 rounded-md text-sm font-medium bg-gradient-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700"> | |
| Connexion | |
| </button> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex lg:hidden"> | |
| <button onclick="toggleMenu()" 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 h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobileMenu" class="hidden lg:hidden bg-gray-900"> | |
| <div class="px-2 pt-2 pb-3 space-y-1"> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-800">Accueil</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Explorer</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Catégories</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Créateurs IA</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Abonnements</a> | |
| <div class="pt-4 pb-3 border-t border-gray-800"> | |
| <div class="flex items-center px-5"> | |
| <button class="w-full px-4 py-2 rounded-md text-sm font-medium bg-gradient-to-r from-blue-500 to-purple-600 text-white"> | |
| Connexion | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-20 md:pt-40 md:pb-32 bg-gradient-to-b from-gray-900 to-gray-800"> | |
| <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-12"> | |
| <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-7 lg:text-left"> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <span class="px-3 py-1 rounded-full text-xs font-semibold bg-blue-900 text-blue-100">NOUVEAU</span> | |
| <span class="text-sm text-gray-300">+12,450 produits ajoutés aujourd'hui</span> | |
| </div> | |
| <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl"> | |
| <span class="block">La plus grande marketplace</span> | |
| <span class="block gradient-text">de produits numériques IA</span> | |
| </h1> | |
| <p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| Accédez à plus de 9,850,000 produits générés par nos 80,555 intelligences artificielles spécialisées. Téléchargez gratuitement après inscription et abonnement. | |
| </p> | |
| <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> | |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3"> | |
| <button class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10 transition-all duration-300 transform hover:scale-105"> | |
| S'inscrire maintenant | |
| </button> | |
| <button class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-100 md:py-4 md:text-lg md:px-10 transition-all duration-300 transform hover:scale-105"> | |
| Voir les abonnements | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-5 lg:flex lg:items-center"> | |
| <div class="relative w-full rounded-xl overflow-hidden floating"> | |
| <div class="glass-effect rounded-lg overflow-hidden"> | |
| <img class="w-full" src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Produits numériques IA"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-70"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">Pack UI/UX Premium</h3> | |
| <p class="mt-1 text-gray-200">Généré par DesignMaster AI</p> | |
| </div> | |
| <div class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium blinking"> | |
| GRATUIT | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-12 bg-gray-800"> | |
| <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="stats-grid"> | |
| <div class="glass-effect p-6 rounded-xl text-center"> | |
| <div class="text-4xl font-bold gradient-text">9,850,000+</div> | |
| <div class="mt-2 text-gray-300">Produits numériques</div> | |
| </div> | |
| <div class="glass-effect p-6 rounded-xl text-center"> | |
| <div class="text-4xl font-bold gradient-text">80,555</div> | |
| <div class="mt-2 text-gray-300">IA spécialisées</div> | |
| </div> | |
| <div class="glass-effect p-6 rounded-xl text-center"> | |
| <div class="text-4xl font-bold gradient-text">1,200+</div> | |
| <div class="mt-2 text-gray-300">Catégories</div> | |
| </div> | |
| <div class="glass-effect p-6 rounded-xl text-center"> | |
| <div class="text-4xl font-bold gradient-text">4.2M</div> | |
| <div class="mt-2 text-gray-300">Utilisateurs</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories Section --> | |
| <section class="py-20 bg-gray-900"> | |
| <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-white">Parcourir par catégories</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-300 mx-auto"> | |
| Découvrez nos principales catégories de produits générés par IA | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <a href="#" class="category-chip bg-blue-900 bg-opacity-40 p-4 rounded-lg flex flex-col items-center hover:shadow-lg"> | |
| <i class="fas fa-paint-brush text-3xl text-blue-400 mb-2"></i> | |
| <span class="font-medium">Design</span> | |
| <span class="text-xs text-gray-400 mt-1">1.2M produits</span> | |
| </a> | |
| <a href="#" class="category-chip bg-purple-900 bg-opacity-40 p-4 rounded-lg flex flex-col items-center hover:shadow-lg"> | |
| <i class="fas fa-code text-3xl text-purple-400 mb-2"></i> | |
| <span class="font-medium">Code</span> | |
| <span class="text-xs text-gray-400 mt-1">850K produits</span> | |
| </a> | |
| <a href="#" class="category-chip bg-pink-900 bg-opacity-40 p-4 rounded-lg flex flex-col items-center hover:shadow-lg"> | |
| <i class="fas fa-music text-3xl text-pink-400 mb-2"></i> | |
| <span class="font-medium">Musique</span> | |
| <span class="text-xs text-gray-400 mt-1">620K produits</span> | |
| </a> | |
| <a href="#" class="category-chip bg-green-900 bg-opacity-40 p-4 rounded-lg flex flex-col items-center hover:shadow-lg"> | |
| <i class="fas fa-image text-3xl text-green-400 mb-2"></i> | |
| <span class="font-medium">Images</span> | |
| <span class="text-xs text-gray-400 mt-1">3.1M produits</span> | |
| </a> | |
| <a href="#" class="category-chip bg-yellow-900 bg-opacity-40 p-4 rounded-lg flex flex-col items-center hover:shadow-lg"> | |
| <i class="fas fa-video text | |
| </html> |