Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>InfinityWeb - Infrastructure Automatisée en 1 Click</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); | |
| } | |
| .dns-animation { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .dns-animation::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); | |
| animation: shine 2s infinite; | |
| } | |
| @keyframes shine { | |
| 100% { | |
| left: 100%; | |
| } | |
| } | |
| .feature-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); | |
| } | |
| .globe-spin { | |
| animation: spin 15s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg"> | |
| <div class="container mx-auto px-6 py-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-infinity text-indigo-600 text-3xl mr-2"></i> | |
| <span class="font-bold text-xl text-gray-800">InfinityWeb</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-gray-800 hover:text-indigo-600">Accueil</a> | |
| <a href="#features" class="text-gray-800 hover:text-indigo-600">Fonctionnalités</a> | |
| <a href="#pricing" class="text-gray-800 hover:text-indigo-600">Tarifs</a> | |
| <a href="#api" class="text-gray-800 hover:text-indigo-600">API</a> | |
| <a href="#support" class="text-gray-800 hover:text-indigo-600">Support</a> | |
| </div> | |
| <div> | |
| <a href="#register" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-medium inline-block"> | |
| <i class="fas fa-user-plus mr-2"></i> S'inscrire | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div id="home" class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Infrastructure Web Automatisée en 1 Click</h1> | |
| <p class="text-xl mb-8">Enregistrement instantané de domaine, déploiement SSL, DNS ultra-rapide et intégration Google - le tout automatisé 24h/7j avec propagation mondiale en secondes.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#free-trial" class="bg-white text-indigo-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-bold text-lg pulse inline-block text-center"> | |
| <i class="fas fa-bolt mr-2"></i> Essai Gratuit | |
| </a> | |
| <a href="#demo" class="border-2 border-white hover:bg-indigo-700 px-8 py-3 rounded-lg font-bold text-lg inline-block text-center"> | |
| <i class="fas fa-play-circle mr-2"></i> Voir la démo | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/2906/2906274.png" alt="Globe" class="w-64 h-64 globe-spin"> | |
| <div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-full shadow-xl"> | |
| <div class="bg-green-500 text-white rounded-full p-3"> | |
| <i class="fas fa-check text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Section --> | |
| <div class="bg-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center"> | |
| <div class="border-r border-gray-200 pr-0 md:pr-8"> | |
| <div class="text-4xl font-bold text-indigo-600 mb-2">0.3s</div> | |
| <div class="text-gray-600">Propagation DNS</div> | |
| </div> | |
| <div class="border-r border-gray-200 pr-0 md:pr-8"> | |
| <div class="text-4xl font-bold text-indigo-600 mb-2">100%</div> | |
| <div class="text-gray-600">Uptime SSL</div> | |
| </div> | |
| <div class="border-r border-gray-200 pr-0 md:pr-8"> | |
| <div class="text-4xl font-bold text-indigo-600 mb-2">24/7</div> | |
| <div class="text-gray-600">Automatisation</div> | |
| </div> | |
| <div> | |
| <div class="text-4xl font-bold text-indigo-600 mb-2">200+</div> | |
| <div class="text-gray-600">Pays couverts</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div id="features" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-16">Toute une infrastructure en un seul click</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <a href="#domain-registration" class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300 block hover:no-underline"> | |
| <div class="bg-indigo-100 text-indigo-600 w-16 h-16 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-globe text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Enregistrement Instantané</h3> | |
| <p class="text-gray-600 mb-4">Obtenez votre nom de domaine en quelques secondes avec notre système automatisé de vérification et d'enregistrement.</p> | |
| <div class="flex items-center text-indigo-600 font-medium"> | |
| <span>En savoir plus</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </a> | |
| <!-- Feature 2 --> | |
| <a href="#ssl" class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300 block hover:no-underline"> | |
| <div class="bg-green-100 text-green-600 w-16 h-16 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-lock text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">SSL Automatique</h3> | |
| <p class="text-gray-600 mb-4">Certificats SSL déployés automatiquement avec renouvellement sans interruption pour une sécurité permanente.</p> | |
| <div class="flex items-center text-indigo-600 font-medium"> | |
| <span>En savoir plus</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </a> | |
| <!-- Feature 3 --> | |
| <a href="#dns" class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300 block hover:no-underline"> | |
| <div class="bg-blue-100 text-blue-600 w-16 h-16 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-tachometer-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">DNS Ultra-Rapide</h3> | |
| <p class="text-gray-600 mb-4">Propagation mondiale en secondes grâce à notre réseau Anycast de nouvelle génération.</p> | |
| <div class="flex items-center text-indigo-600 font-medium"> | |
| <span>En savoir plus</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </a> | |
| <!-- Feature 4 --> | |
| <a href="#google-integration" class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300 block hover:no-underline"> | |
| <div class="bg-yellow-100 text-yellow-600 w-16 h-16 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fab fa-google text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Intégration Google</h3> | |
| <p class="text-gray-600 mb-4">Configuration automatique avec Google Workspace, Analytics et Search Console pour une présence en ligne immédiate.</p> | |
| <div class="flex items-center text-indigo-600 font-medium"> | |
| <span>En savoir plus</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </a> | |
| <!-- Feature 5 --> | |
| <a href="#automation" class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300 block hover:no-underline"> | |
| <div class="bg-purple-100 text-purple-600 w-16 h-16 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Automatisation 24/7</h3> | |
| <p class="text-gray-600 mb-4">Notre système intelligent gère tout sans intervention humaine, même la nuit et les week-ends.</p> | |
| <div class="flex items-center text-indigo-600 font-medium"> | |
| <span>En savoir plus</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </a> | |
| <!-- Feature 6 --> | |
| <a href="#security" class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300 block hover:no-underline"> | |
| <div class="bg-red-100 text-red-600 w-16 h-16 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-shield-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Sécurité Totale</h3> | |
| <p class="text-gray-600 mb-4">Protection DDoS, pare-feu applicatif et sauvegardes automatiques inclus dans chaque package.</p> | |
| <div class="flex items-center text-indigo-600 font-medium"> | |
| <span>En savoir plus</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- How It Works --> | |
| <div class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-16">Comment ça marche ?</h2> | |
| <div class="flex flex-col md:flex-row items-center mb-16"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <div class="bg-indigo-100 text-indigo-800 inline-block px-4 py-1 rounded-full mb-4"> | |
| <span class="font-medium">Étape 1</span> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Choisissez votre nom de domaine</h3> | |
| <p class="text-gray-600 mb-6">Notre moteur de recherche intelligent vérifie instantanément la disponibilité dans plus de 1000 extensions.</p> | |
| <a href="#domain-search" class="flex items-center space-x-4 hover:no-underline"> | |
| <div class="bg-gray-200 rounded-lg p-3"> | |
| <i class="fas fa-search text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Recherche en temps réel</div> | |
| <div class="text-sm text-gray-500">Disponibilité vérifiée en 0.2s</div> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/3406/3406957.png" alt="Search domain" class="w-64 h-64"> | |
| </div> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center mb-16"> | |
| <div class="md:w-1/2 order-2 md:order-1 flex justify-center"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/1063/1063196.png" alt="Configuration" class="w-64 h-64"> | |
| </div> | |
| <div class="md:w-1/2 order-1 md:order-2 mb-8 md:mb-0 md:pl-12"> | |
| <div class="bg-green-100 text-green-800 inline-block px-4 py-1 rounded-full mb-4"> | |
| <span class="font-medium">Étape 2</span> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Configuration Automatique</h3> | |
| <p class="text-gray-600 mb-6">En un clic, nous configurons DNS, SSL, email et intégrations avec les services Google.</p> | |
| <a href="#auto-config" class="space-y-3 block hover:no-underline"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Certificat SSL déployé</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>DNS Anycast configuré</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Google Analytics intégré</span> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <div class="bg-blue-100 text-blue-800 inline-block px-4 py-1 rounded-full mb-4"> | |
| <span class="font-medium">Étape 3</span> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Propagation Instantanée</h3> | |
| <p class="text-gray-600 mb-6">Notre réseau mondial propage vos changements en secondes, pas en heures.</p> | |
| <a href="#dns-propagation" class="bg-gray-100 p-4 rounded-lg dns-animation block hover:no-underline"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="font-medium">DNS Propagation</div> | |
| <div class="text-sm text-gray-500">En cours dans 200+ pays</div> | |
| </div> | |
| <div class="text-green-500"> | |
| <i class="fas fa-bolt"></i> 0.3s | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/1925/1925158.png" alt="Propagation" class="w-64 h-64"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à automatiser votre infrastructure web ?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Gagnez des heures de configuration technique et obtenez une présence en ligne professionnelle en quelques clics.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#free-trial" class="bg-white text-indigo-600 hover:bg-gray-100 px-8 py-4 rounded-lg font-bold text-lg inline-block"> | |
| <i class="fas fa-play mr-2"></i> Essai Gratuit 14 jours | |
| </a> | |
| <a href="#contact-expert" class="border-2 border-white hover:bg-indigo-700 px-8 py-4 rounded-lg font-bold text-lg inline-block"> | |
| <i class="fas fa-phone-alt mr-2"></i> Parler à un expert | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4 flex items-center"> | |
| <i class="fas fa-infinity text-indigo-500 mr-2"></i> InfinityWeb | |
| </h3> | |
| <p class="text-gray-400 mb-4">L'infrastructure web automatisée pour les professionnels.</p> | |
| <div class="flex space-x-4"> | |
| <a href="https://twitter.com" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="https://linkedin.com" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a> | |
| <a href="https://github.com" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Produit</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#features" class="text-gray-400 hover:text-white">Fonctionnalités</a></li> | |
| <li><a href="#pricing" class="text-gray-400 hover:text-white">Tarifs</a></li> | |
| <li><a href="#api" class="text-gray-400 hover:text-white">API</a></li> | |
| <li><a href="#integrations" class="text-gray-400 hover:text-white">Intégrations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Ressources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#documentation" class="text-gray-400 hover:text-white">Documentation</a></li> | |
| <li><a href="#guides" class="text-gray-400 hover:text-white">Guides</a></li> | |
| <li><a href="#blog" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#status" class="text-gray-400 hover:text-white">Statut</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Entreprise</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#about" class="text-gray-400 hover:text-white">À propos</a></li> | |
| <li><a href="#careers" class="text-gray-400 hover:text-white">Carrières</a></li> | |
| <li><a href="#privacy" class="text-gray-400 hover:text-white">Politique de confidentialité</a></li> | |
| <li><a href="#terms" class="text-gray-400 hover:text-white">Conditions d'utilisation</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 InfinityWeb. Tous droits réservés.</p> | |
| <div class="flex space-x-6"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg" alt="Visa" class="h-6"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg" alt="MasterCard" class="h-6"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/PayPal.svg" alt="PayPal" class="h-6"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Bitcoin.svg" alt="Bitcoin" class="h-6"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Animation for the DNS propagation feature | |
| const dnsAnimation = document.querySelector('.dns-animation'); | |
| setInterval(() => { | |
| dnsAnimation.classList.toggle('dns-animation'); | |
| setTimeout(() => { | |
| dnsAnimation.classList.toggle('dns-animation'); | |
| }, 100); | |
| }, 5000); | |
| // Simple demo interaction | |
| document.querySelectorAll('.feature-card').forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| const icon = this.querySelector('div:first-child'); | |
| icon.classList.add('transform', 'scale-110'); | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| const icon = this.querySelector('div:first-child'); | |
| icon.classList.remove('transform', 'scale-110'); | |
| }); | |
| }); | |
| // Mock domain search functionality | |
| const searchBtn = document.querySelector('.pulse'); | |
| searchBtn.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // In a real app, this would open a domain search modal | |
| alert("Système de recherche de domaine lancé! Essayez avec votre nom préféré."); | |
| }); | |
| // Prevent default behavior for demo purposes | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| if(this.getAttribute('href') !== '#') { | |
| e.preventDefault(); | |
| alert("Fonctionnalité " + this.getAttribute('href').substring(1) + " en cours de chargement..."); | |
| } | |
| }); | |
| }); | |
| </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/infinityweb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |