Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FreeDomain Registry - Services 100% Gratuits</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, #a777e3); | |
| } | |
| .domain-search { | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| transition: all 0.3s ease; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(167, 119, 227, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(167, 119, 227, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(167, 119, 227, 0); | |
| } | |
| } | |
| .cart-item { | |
| transition: all 0.3s ease; | |
| } | |
| .cart-item:hover { | |
| background-color: #f9fafb; | |
| } | |
| .dashboard-nav { | |
| min-height: calc(100vh - 64px); | |
| } | |
| .dashboard-content { | |
| min-height: calc(100vh - 64px); | |
| } | |
| .info-card { | |
| transition: all 0.3s ease; | |
| } | |
| .info-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-globe text-purple-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">FreeDomain</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-purple-500 text-sm font-medium">Accueil</a> | |
| <a href="#services" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Services</a> | |
| <a href="#faq" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">FAQ</a> | |
| <a href="#contact" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Contact</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <button id="login-btn" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Connexion</button> | |
| <button id="register-btn" class="ml-4 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium">S'inscrire</button> | |
| <button id="cart-btn" class="ml-4 relative"> | |
| <i class="fas fa-shopping-cart text-gray-600 hover:text-purple-600 text-xl"></i> | |
| <span id="cart-count" class="absolute -top-2 -right-2 bg-purple-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center hidden">0</span> | |
| </button> | |
| <button id="dashboard-btn" class="ml-4 hidden"> | |
| <i class="fas fa-tachometer-alt text-gray-600 hover:text-purple-600 text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div id="main-content"> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 text-center"> | |
| <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl"> | |
| Enregistrez votre domaine gratuitement | |
| </h1> | |
| <p class="mt-6 max-w-lg mx-auto text-xl text-purple-100"> | |
| Obtenez un nom de domaine, SSL, DNS et hébergement en quelques secondes | |
| </p> | |
| <div class="mt-10 max-w-md mx-auto sm:max-w-none sm:flex sm:justify-center"> | |
| <div class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5"> | |
| <button id="search-domain-btn" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-purple-700 bg-white hover:bg-purple-50 sm:px-8"> | |
| <i class="fas fa-search mr-2"></i> Rechercher un domaine | |
| </button> | |
| <button id="register-now-btn" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-purple-800 bg-opacity-60 hover:bg-opacity-70 sm:px-8"> | |
| <i class="fas fa-user-plus mr-2"></i> Créer un compte | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Domain Search --> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 -mt-10" id="domain-search"> | |
| <div class="domain-search bg-white rounded-lg shadow-xl p-6"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="flex-grow"> | |
| <input type="text" id="domain-input" class="w-full px-4 py-3 border border-gray-300 rounded-l-md focus:ring-purple-500 focus:border-purple-500" placeholder="Recherchez votre domaine parfait..."> | |
| </div> | |
| <div class="mt-2 md:mt-0 md:ml-2"> | |
| <select id="domain-extension" class="w-full md:w-auto px-4 py-3 border border-gray-300 text-gray-700 rounded-r-md focus:ring-purple-500 focus:border-purple-500"> | |
| <option>.com</option> | |
| <option>.net</option> | |
| <option>.org</option> | |
| <option>.fr</option> | |
| <option>.io</option> | |
| <option>.tech</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button id="search-button" class="mt-4 w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-4 rounded-md transition duration-300"> | |
| <i class="fas fa-search mr-2"></i> Vérifier la disponibilité | |
| </button> | |
| <div id="search-result" class="mt-4 hidden p-4 rounded bg-gray-50"></div> | |
| </div> | |
| </div> | |
| <!-- Features --> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8" id="services"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Tout ce dont vous avez besoin pour votre site web | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> | |
| Des services complets 100% gratuits pour lancer votre présence en ligne | |
| </p> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> | |
| <i class="fas fa-globe text-xl"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Noms de domaine gratuits</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Obtenez votre propre nom de domaine gratuitement avec des extensions populaires. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> | |
| <i class="fas fa-lock text-xl"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Certificats SSL gratuits</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Sécurisez votre site avec des certificats SSL inclus automatiquement. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> | |
| <i class="fas fa-server text-xl"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Hébergement gratuit</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Bénéficiez d'un hébergement web performant avec bande passante illimitée. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> | |
| <i class="fas fa-cog text-xl"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">DNS managé</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Gestion simplifiée des DNS avec interface intuitive et propagation rapide. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-purple-700"> | |
| <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| <span class="block">Prêt à lancer votre site web?</span> | |
| <span class="block">Créer un compte maintenant.</span> | |
| </h2> | |
| <div class="mt-8 flex justify-center"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <button id="cta-register-btn" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-purple-50 sm:px-8"> | |
| <i class="fas fa-user-plus mr-2"></i> S'inscrire gratuitement | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="bg-white"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <h2 class="text-center text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Ce que nos utilisateurs disent | |
| </h2> | |
| <div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="pt-6"> | |
| <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8"> | |
| <div class="-mt-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> | |
| <i class="fas fa-user text-xl"></i> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Jean Dupont</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| "J'ai pu lancer mon blog en quelques minutes seulement. Tout est vraiment gratuit comme promis!" | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="pt-6"> | |
| <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8"> | |
| <div class="-mt-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> | |
| <i class="fas fa-user text-xl"></i> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Marie Lambert</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| "Le service client est exceptionnel. Ils m'ont aidé à configurer mon DNS en moins d'une heure." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="pt-6"> | |
| <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8"> | |
| <div class="-mt-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> | |
| <i class="fas fa-user text-xl"></i> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Thomas Martin</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| "Parfait pour les startups avec un budget limité. SSL gratuit et hébergement inclus, que demander de plus?" | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FAQ --> | |
| <div class="bg-gray-50" id="faq"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="lg:max-w-4xl lg:mx-auto"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl text-center"> | |
| Questions fréquentes | |
| </h2> | |
| <div class="mt-12 space-y-6"> | |
| <!-- FAQ Item 1 --> | |
| <div class="bg-white shadow overflow-hidden rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <h3 class="text-lg font-medium text-gray-900 flex items-center"> | |
| <i class="fas fa-question-circle text-purple-600 mr-2"></i> | |
| Est-ce vraiment gratuit? | |
| </h3> | |
| <div class="mt-2 text-sm text-gray-500"> | |
| <p>Oui, tous nos services de base (domaine, SSL, DNS et hébergement) sont 100% gratuits sans frais cachés. Nous offrons également des options premium pour ceux qui ont besoin de fonctionnalités avancées.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 2 --> | |
| <div class="bg-white shadow overflow-hidden rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <h3 class="text-lg font-medium text-gray-900 flex items-center"> | |
| <i class="fas fa-question-circle text-purple-600 mr-2"></i> | |
| Combien de temps dure l'enregistrement gratuit? | |
| </h3> | |
| <div class="mt-2 text-sm text-gray-500"> | |
| <p>Votre domaine est enregistré gratuitement pour 1 an. Vous pouvez le renouveler gratuitement chaque année tant que vous maintenez une utilisation active.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 3 --> | |
| <div class="bg-white shadow overflow-hidden rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <h3 class="text-lg font-medium text-gray-900 flex items-center"> | |
| <i class="fas fa-question-circle text-purple-600 mr-2"></i> | |
| Quelles extensions de domaine sont disponibles? | |
| </h3> | |
| <div class="mt-2 text-sm text-gray-500"> | |
| <p>Nous offrons les extensions les plus populaires comme .com, .net, .org et plusieurs extensions régionales. Certaines extensions premium peuvent avoir des frais supplémentaires.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800" id="contact"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Services</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#services" class="text-base text-gray-300 hover:text-white">Noms de domaine</a></li> | |
| <li><a href="#services" class="text-base text-gray-300 hover:text-white">Hébergement web</a></li> | |
| <li><a href="#services" class="text-base text-gray-300 hover:text-white">Certificats SSL</a></li> | |
| <li><a href="#services" class="text-base text-gray-300 hover:text-white">DNS managé</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#faq" class="text-base text-gray-300 hover:text-white">Centre d'aide</a></li> | |
| <li><a href="#faq" class="text-base text-gray-300 hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Statut du service</a></li> | |
| <li><a href="#contact" class="text-base text-gray-300 hover:text-white">Nous contacter</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Entreprise</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">À propos</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Carrières</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Presse</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3> | |
| </html> |