Spaces:
Build error
Build error
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png"> | |
| <title>Mailix | Validation d'Email en Temps Réel</title> | |
| <link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png"> | |
| <link rel="stylesheet" | |
| href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| /* PHASE 1 : Configuration et Base du Style (Dark Mode Exclusif & Pro) */ | |
| /* Suppression de toute la logique du mode clair. */ | |
| :root { | |
| --bg-body: #0A0A0A; /* Noir Profond */ | |
| --bg-card: #141414; /* Plus foncé que l'interface pour le contraste subtil */ | |
| --bg-section: #141414; | |
| --bg-code: #141414; | |
| --border-color: #4b5563; /* Gris très foncé pour les bordures */ | |
| --color-accent: #4ade80; /* Vert Vif */ | |
| --text-color: #ffffff; | |
| --text-secondary: #d1d5db; /* gray-300 */ | |
| --text-muted: #9ca3af; /* gray-400 */ | |
| --text-blue: var(--color-accent); /* Remplacer le bleu par le vert accent partout */ | |
| --shadow-color: rgba(0, 0, 0, 0.5); | |
| } | |
| /* Application des variables aux styles existants et aux nouveaux éléments */ | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-body); | |
| color: var(--text-color); | |
| min-height: 100vh; | |
| /* Suppression de la transition car le mode clair est supprimé */ | |
| } | |
| /* Fix pour le header qui est maintenant sticky */ | |
| .header-border { border-color: var(--border-color); } | |
| .bg-header { background-color: var(--bg-body); } | |
| .code-block { | |
| border: 1px solid var(--border-color); | |
| overflow-x: auto; | |
| background-color: var(--bg-code); | |
| } | |
| /* Suppression du style pour theme-switch (mode clair supprimé) */ | |
| /* Adaptation Tailwind pour les autres éléments */ | |
| .section-bg { | |
| background-color: var(--bg-section); | |
| border-color: var(--border-color); | |
| box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); | |
| } | |
| /* PHASE 1.3/4.1 : Cartes et Contraste (Border Subtile) */ | |
| .card-bg { | |
| background-color: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| } | |
| .text-blue-500-var { color: var(--text-blue); } | |
| .text-gray-300-var { color: var(--text-secondary); } | |
| .text-gray-400-var { color: var(--text-muted); } | |
| /* Ajustements spécifiques pour les éléments non couverts par une classe personnalisée */ | |
| .tab-button { border-bottom-color: var(--border-color); } | |
| /* Mise à jour de la couleur d'accent pour l'onglet actif */ | |
| .tab-button.border-blue-500 { border-bottom-color: var(--color-accent) ; color: var(--color-accent) ; background-color: var(--bg-code) ; } | |
| .tab-button.hover\:text-white:hover { color: var(--text-color) ; } | |
| .tab-button.hover\:bg-gray-800:hover { background-color: var(--bg-card) ; } | |
| /* Remplacement du bleu par le vert pour les boutons CTA */ | |
| .btn-primary { | |
| background-color: var(--color-accent); | |
| color: var(--bg-body) ; /* Texte noir sur vert */ | |
| font-weight: bold; | |
| box-shadow: 0 4px 6px -1px rgba(74, 222, 128, 0.3), 0 2px 4px -2px rgba(74, 222, 128, 0.3); | |
| transition: background-color 0.2s; | |
| } | |
| .btn-primary:hover { | |
| opacity: 0.9; | |
| } | |
| /* Remplacement de la classe bg-blue-900/40 par son équivalent en vert */ | |
| .bg-green-900\/40 { | |
| background-color: rgba(74, 222, 128, 0.15); /* Couleur basée sur --color-accent avec transparence */ | |
| } | |
| /* NOUVELLE RÈGLE CSS : Défilement Infini des Témoignages (Accéléré) */ | |
| @keyframes scroll-rtl { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| .testimonial-container { | |
| overflow: hidden; | |
| width: 100%; | |
| } | |
| .testimonials-track { | |
| display: flex; | |
| animation: scroll-rtl 25s linear infinite; /* ACCÉLÉRÉ: 40s à 25s */ | |
| } | |
| .testimonials-track:hover { | |
| animation-play-state: paused; | |
| } | |
| /* PHASE 4.1 : Témoignages (Carte avec bordure fine et fond subtil - COINS CARRÉS) */ | |
| .testimonial-card { | |
| flex-shrink: 0; | |
| width: 300px; | |
| margin-right: 1.5rem; | |
| border: 1px solid var(--border-color); | |
| box-shadow: 0 4px 6px -1px var(--shadow-color); | |
| background-color: var(--bg-card); | |
| /* Suppression de rounded-lg pour des coins carrés */ | |
| } | |
| /* Style pour les FAQ (Menu Déroulant) */ | |
| .faq-item summary { | |
| cursor: pointer; | |
| list-style: none; /* Cache le marqueur par défaut */ | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 0; | |
| font-weight: 600; | |
| } | |
| .faq-item summary::-webkit-details-marker { | |
| display: none; /* Cache le marqueur pour Chrome/Safari */ | |
| } | |
| /* Rotation de l'icône FAQ */ | |
| .faq-icon { | |
| transition: transform 0.2s ease; | |
| } | |
| .faq-item[open] .faq-icon { | |
| transform: rotate(45deg); /* Tourne l'icône en croix */ | |
| } | |
| /* CSS Spécifique au Carrousel de Logos */ | |
| @keyframes scroll-logos { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| .logo-container { | |
| overflow: hidden; | |
| width: 100%; | |
| padding: 2rem 0; /* Ajout d'un padding vertical pour l'esthétique */ | |
| background-color: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| } | |
| .logos-track { | |
| display: flex; | |
| animation: scroll-logos 20s linear infinite; /* Défilement rapide */ | |
| width: max-content; /* S'assure que la piste est assez large */ | |
| } | |
| .logos-track:hover { | |
| animation-play-state: paused; | |
| } | |
| .logo-item { | |
| flex-shrink: 0; | |
| width: 120px; /* Taille fixe pour le logo */ | |
| height: 120px; | |
| margin: 0 1.5rem; /* Espace entre les logos */ | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0.9; /* Légèrement transparent pour le mode sombre */ | |
| transition: opacity 0.3s, transform 0.3s; /* Ajout de la transition de transformation */ | |
| } | |
| .logo-item:hover { | |
| opacity: 1; | |
| transform: scale(1.05); /* Petit zoom au survol pour un effet professionnel */ | |
| } | |
| .logo-item img { | |
| max-width: 100%; | |
| max-height: 80px; /* Taille du logo en gros */ | |
| /* REMOVE FILTER: Le filtre a été retiré pour afficher les logos en couleur */ | |
| } | |
| </style> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> | |
| </head> | |
| <body> | |
| <header class="fixed top-0 left-0 right-0 z-50 flex justify-center py-3 border-b header-border bg-header shadow-xl transition-colors duration-300"> | |
| <div class="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center w-full"> | |
| <a href="/" class="text-4xl font-extrabold text-green-500 tracking-wider mb-2 sm:mb-0"> | |
| <img src="https://i.imgur.com/7Gn3toV.png" alt="Mailix Logo" class="h-8 w-auto"> | |
| </a> | |
| <nav class="flex items-center space-x-2 sm:space-x-4"> | |
| <a href="/documentation" class="px-2 py-1 sm:px-4 sm:py-2 text-color hover:text-blue-500-var transition duration-200 font-medium text-sm sm:text-base"> | |
| Docs | |
| </a> | |
| <a href="/tarifs" class="px-2 py-1 sm:px-4 sm:py-2 text-color hover:text-blue-500-var transition duration-200 font-medium text-sm sm:text-base"> | |
| Tarifs | |
| </a> | |
| <a href="/a-propos" class="px-2 py-1 sm:px-4 sm:py-2 text-color hover:text-blue-500-var transition duration-200 font-medium text-sm sm:text-base hidden md:block"> | |
| Enterprise | |
| </a> | |
| <a href="/support" class="px-2 py-1 sm:px-4 sm:py-2 text-color hover:text-blue-500-var transition duration-200 font-medium text-sm sm:text-base hidden sm:block"> | |
| Support | |
| </a> | |
| <a href="/connexion" class="px-3 py-1 sm:px-4 sm:py-2 text-white btn-primary transition duration-200 text-sm sm:text-base"> | |
| Connexion | |
| </a> | |
| <a href="/inscription" class="px-3 py-1 sm:px-4 sm:py-2 border-2 border-green-500 text-green-500 hover:bg-green-500 hover:text-black font-medium transition duration-200 hidden sm:block text-sm sm:text-base"> | |
| Inscription | |
| </a> | |
| </nav> | |
| </div> | |
| </header> | |
| <div class="pt-20 container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl"> | |
| <main class="space-y-24"> | |
| <section class="py-20"> <div class="flex flex-col items-start justify-start space-y-4"> <span class="material-symbols-rounded text-green-400 text-5xl mb-4"> | |
| mail_lock | |
| </span> | |
| <h1 id="animated-title" class="text-6xl sm:text-7xl font-bold text-color leading-tight mb-4"> Validez la Délivrabilité de Vos E-mails. En temps réel, avec l'API la Plus Rapide. | |
| </h1> | |
| <p class="text-2xl text-gray-300-var max-w-4xl mr-auto mb-10"> Éliminez les adresses e-mail non valides, jetables et à risque pour garantir des listes de diffusion propres et un meilleur ROI. <strong class="text-green-400">Une API simple, une validation instantanée.</strong> | |
| </p> | |
| <form class="flex flex-col sm:flex-row items-center w-full max-w-2xl bg-gray-900 border border-[var(--border-color)] rounded-lg p-1.5 shadow-2xl"> | |
| <input type="email" placeholder="Entrez un e-mail à tester (ex: test@exemple.com)" class="flex-grow w-full px-4 py-3 bg-transparent text-white placeholder-gray-500 focus:outline-none" required> | |
| <button type="submit" class="w-full sm:w-auto mt-3 sm:mt-0 px-8 py-3 btn-primary text-lg font-bold rounded-lg whitespace-nowrap"> | |
| Tester la validité | |
| </button> | |
| </form> | |
| </div> | |
| <script> | |
| const titleElement = document.getElementById('animated-title'); | |
| const text = "Validez la Délivrabilité de Vos E-mails. En temps réel, avec l'API la Plus Rapide."; | |
| titleElement.innerHTML = text; // Assure que le texte est bien affiché | |
| </script> | |
| </section> | |
| <section> | |
| <h2 class="text-4xl font-bold text-color mb-8 text-center"> Analyse Technique Approfondie de l'Adresse. | |
| </h2> | |
| <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12"> | |
| Nous allons au-delà de la syntaxe. Chaque e-mail passe par un processus de validation multi-étapes pour garantir sa livrabilité. | |
| </p> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="card-bg p-6 shadow-xl"> | |
| <span class="material-symbols-rounded text-3xl text-green-400 mb-3">dns</span> <h3 class="text-2xl font-semibold text-color mb-3">Vérification des Enregistrements MX</h3> | |
| <p class="text-gray-300-var text-sm">Nous confirmons l'existence d'un serveur de messagerie valide (MX Record) pour le domaine, excluant les domaines non fonctionnels.</p> | |
| </div> | |
| <div class="card-bg p-6 shadow-xl"> | |
| <span class="material-symbols-rounded text-3xl text-yellow-400 mb-3">route</span> <h3 class="text-2xl font-semibold text-color mb-3">Vérification des Adresses A/PTR</h3> | |
| <p class="text-gray-300-var text-sm">Validation du processus inverse (Reverse DNS) pour détecter les adresses de serveurs suspects ou mal configurés.</p> | |
| </div> | |
| <div class="card-bg p-6 shadow-xl"> | |
| <span class="material-symbols-rounded text-3xl text-purple-400 mb-3">connect_without_contact</span> <h3 class="text-2xl font-semibold text-color mb-3">Simulation SMTP</h3> | |
| <p class="text-gray-300-var text-sm">Connexion à l'hôte pour confirmer la validité de la boîte de réception sans envoyer de message. Méthode non intrusive et précise.</p> | |
| </div> | |
| <div class="card-bg p-6 shadow-xl"> | |
| <span class="material-symbols-rounded text-3xl text-cyan-400 mb-3">timer</span> <h3 class="text-2xl font-semibold text-color mb-3">Analyse de Vitesse</h3> | |
| <p class="text-gray-300-var text-sm">Le processus complet prend moins de 300ms, permettant une validation en temps réel sur vos formulaires d'inscription.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="py-12"> | |
| <h2 class="text-4xl font-bold text-color mb-4 text-center"> | |
| Technologies Supportées pour une Intégration Rapide. | |
| </h2> | |
| <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12"> | |
| Mailix est conçu pour s'intégrer facilement dans n'importe quelle pile technologique, du frontend au backend. | |
| </p> | |
| <div class="logo-container"> | |
| <div class="logos-track" id="logos-track-content"> | |
| <div class="logo-item" title="Python"><img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg" alt="Python Logo"></div> | |
| <div class="logo-item" title="Node.js"><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Node.js_logo.svg" alt="Node.js Logo"></div> | |
| <div class="logo-item" title="PHP"><img src="https://upload.wikimedia.org/wikipedia/commons/2/27/PHP-logo.svg" alt="PHP Logo"></div> | |
| <div class="logo-item" title="Ruby"><img src="https://upload.wikimedia.org/wikipedia/commons/7/73/Ruby_logo.svg" alt="Ruby Logo"></div> | |
| <div class="logo-item" title="AWS (Amazon Web Services)"><img src="https://upload.wikimedia.org/wikipedia/commons/9/93/Amazon_Web_Services_Logo.svg" alt="AWS Logo"></div> | |
| <div class="logo-item" title="Google Cloud Platform"><img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Google_Cloud_logo.svg" alt="Google Cloud Logo"></div> | |
| <div class="logo-item" title="React"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React Logo"></div> | |
| <div class="logo-item" title="Vue.js"><img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" alt="Vue.js Logo"></div> | |
| <div class="logo-item" title="Angular"><img src="https://upload.wikimedia.org/wikipedia/commons/c/cf/Angular_full_color_logo.svg" alt="Angular Logo"></div> | |
| <div class="logo-item" title="Laravel"><img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Laravel.svg" alt="Laravel Logo"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <h2 class="text-4xl font-bold text-color mb-8 text-center"> | |
| Cas d'Usage Détaillés pour l'Entreprise. | |
| </h2> | |
| <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12"> | |
| Intégrez Mailix pour résoudre les défis critiques de votre pile marketing et de sécurité. | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="card-bg p-6"> | |
| <span class="material-symbols-rounded text-4xl text-green-500 mb-4">security</span> | |
| <h3 class="text-2xl font-semibold text-color mb-3">Sécurisation des Inscriptions</h3> | |
| <p class="text-gray-300-var">Validez les e-mails en temps réel sur vos formulaires pour bloquer les robots et les inscriptions frauduleuses dès le premier contact.</p> | |
| </div> | |
| <div class="card-bg p-6"> | |
| <span class="material-symbols-rounded text-4xl text-yellow-500 mb-4">cleaning_services</span> | |
| <h3 class="text-2xl font-semibold text-color mb-3">Nettoyage de Base de Données</h3> | |
| <p class="text-gray-300-var">Passez en revue et supprimez les e-mails obsolètes, invalides ou non livrables de vos listes existantes pour optimiser la réputation de votre expéditeur.</p> | |
| </div> | |
| <div class="card-bg p-6"> | |
| <span class="material-symbols-rounded text-4xl text-blue-500 mb-4">attach_money</span> | |
| <h3 class="text-2xl font-semibold text-color mb-3">Prévention de la Fraude aux Promotions</h3> | |
| <p class="text-gray-300-var">Détectez les adresses jetables utilisées pour abuser des offres de bienvenue ou des codes de réduction.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <h2 class="text-4xl font-bold text-color mb-8 text-center"> Protection contre les Adresses Risquées. | |
| </h2> | |
| <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12"> | |
| Réduisez votre taux de plaintes et de hard bounces en identifiant les e-mails nuisibles avant qu'ils n'atteignent votre liste. | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="card-bg p-6 text-center"> | |
| <span class="material-symbols-rounded text-4xl text-red-500 mb-4">block</span> <h3 class="text-2xl font-semibold text-color mb-3">E-mails Jetables (Temp Mail)</h3> | |
| <p class="text-gray-300-var">Détection et blocage des domaines connus pour l'utilisation d'e-mails temporaires, qui nuisent à l'engagement à long terme.</p> | |
| </div> | |
| <div class="card-bg p-6 text-center"> | |
| <span class="material-symbols-rounded text-4xl text-indigo-400 mb-4">group</span> <h3 class="text-2xl font-semibold text-color mb-3">Rôles Génériques et Abusifs</h3> | |
| <p class="text-gray-300-var">Identification des adresses génériques (`info@`, `support@`) ou potentiellement abusives, qui peuvent gonfler vos coûts.</p> | |
| </div> | |
| <div class="card-bg p-6 text-center"> | |
| <span class="material-symbols-rounded text-4xl text-pink-500 mb-4">skull</span> <h3 class="text-2xl font-semibold text-color mb-3">Domaines à Risque (Anti-Phishing)</h3> | |
| <p class="text-gray-300-var">Base de données mise à jour en temps réel des domaines signalés pour le spam, l'hameçonnage ou les activités malveillantes.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <h2 class="text-4xl font-bold text-color mb-8 text-center"> Performance et Scalabilité API. | |
| </h2> | |
| <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12"> | |
| Gérez des volumes massifs avec notre API construite pour la vitesse, la fiabilité et le suivi précis de vos consommations. | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="card-bg p-6 text-center"> | |
| <span class="material-symbols-rounded text-4xl text-green-500 mb-4">rocket_launch</span> <h3 class="text-2xl font-semibold text-color mb-3">Vitesse Éclair</h3> | |
| <p class="text-gray-300-var">Moins de 50ms de latence pour la majorité des requêtes. Validez en temps réel sans ralentir votre UX.</p> | |
| </div> | |
| <div class="card-bg p-6 text-center"> | |
| <span class="material-symbols-rounded text-4xl text-yellow-500 mb-4">monitoring</span> <h3 class="text-2xl font-semibold text-color mb-3">Dashboard de Consommation</h3> | |
| <p class="text-gray-300-var">Suivez l'utilisation de vos crédits, le taux de validation et l'historique des appels via un tableau de bord intuitif.</p> | |
| </div> | |
| <div class="card-bg p-6 text-center"> | |
| <span class="material-symbols-rounded text-4xl text-blue-500 mb-4">vpn_key</span> <h3 class="text-2xl font-semibold text-color mb-3">Sécurité API</h3> | |
| <p class="text-gray-300-var">Clés API sécurisées, protection contre les abus et conformité totale avec les standards OAuth 2.0.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <h2 class="text-4xl font-bold text-color mb-6 text-center"> Intégration Instantanée | |
| </h2> | |
| <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-8"> | |
| Validez une adresse e-mail en quelques lignes de code seulement. | |
| </p> | |
| <div class="w-full"> | |
| <div id="language-tabs" class="flex flex-wrap sm:flex-nowrap mb-0 border-b border-[var(--border-color)]"> | |
| <button data-lang="python" class="tab-button px-4 py-3 text-lg font-semibold border-b-2 border-green-500 text-green-500 bg-gray-800 hover:bg-gray-700 flex-grow sm:flex-grow-0 transition duration-200"> | |
| Python | |
| </button> | |
| <button data-lang="javascript" class="tab-button px-4 py-3 text-lg font-semibold border-b-2 border-transparent text-gray-400-var hover:text-white hover:bg-gray-800 flex-grow sm:flex-grow-0 transition duration-200"> | |
| JavaScript | |
| </button> | |
| <button data-lang="php" class="tab-button px-4 py-3 text-lg font-semibold border-b-2 border-transparent text-gray-400-var hover:text-white hover:bg-gray-800 flex-grow sm:flex-grow-0 transition duration-200"> | |
| PHP | |
| </button> | |
| <button data-lang="bash" class="tab-button px-4 py-3 text-lg font-semibold border-b-2 border-transparent text-gray-400-var hover:text-white hover:bg-gray-800 flex-grow sm:flex-grow-0 transition duration-200"> | |
| cURL (Bash) | |
| </button> | |
| </div> | |
| <div id="code-content" class="code-block p-4 pt-6 text-sm"> | |
| <pre><code id="code-python" class="language-python tab-code">import requests | |
| import json | |
| # URL de l'API Mailix pour la validation d'e-mail | |
| url = "https://mailix-mail-validation.api/api/validate" | |
| headers = {"Content-Type": "application/json"} | |
| payload = {"email": "utilisateur@example.com"} | |
| # Envoi de la requête POST | |
| response = requests.post(url, headers=headers, data=json.dumps(payload)) | |
| print(response.json()) | |
| # Résultat: {"is_valid": true, "domain_status": "ok", "disposable": false}</code></pre> | |
| <pre class="hidden"><code id="code-javascript" class="language-javascript tab-code">const validateEmail = async () => { | |
| // URL de l'API Mailix pour la validation d'e-mail | |
| const url = 'https://mailix-mail-validation.api/api/validate'; | |
| const response = await fetch(url, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| email: 'utilisateur@example.com' | |
| }) | |
| }); | |
| const data = await response.json(); | |
| console.log(data); | |
| }; | |
| validateEmail();</code></pre> | |
| <pre class="hidden"><code id="code-php" class="language-php tab-code"><?php | |
| // URL de l'API Mailix pour la validation d'e-mail | |
| $url = "https://mailix-mail-validation.api/api/validate"; | |
| $data = array("email" => "utilisateur@example.com"); | |
| $curl = curl_init(); | |
| curl_setopt_array($curl, array( | |
| CURLOPT_URL => $url, | |
| CURLOPT_RETURNTRANSFER => true, | |
| CURLOPT_POST => true, | |
| CURLOPT_HTTPHEADER => array('Content-Type: application/json'), | |
| CURLOPT_POSTFIELDS => json_encode($data) | |
| )); | |
| $response = curl_exec($curl); | |
| curl_close($curl); | |
| print_r(json_decode($response, true)); | |
| ?></code></pre> | |
| <pre class="hidden"><code id="code-bash" class="language-bash tab-code"># URL de l'API Mailix pour la validation d'e-mail | |
| curl -X POST \ | |
| -H "Content-Type: application/json" \ | |
| -d '{"email": "utilisateur@example.com"}' \ | |
| "https://mailix-mail-validation.api/api/validate"</code></pre> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="bg-green-900/40 p-8 shadow-xl border border-green-600"> | |
| <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8"> | |
| <span class="material-symbols-rounded w-12 h-12 text-green-400 flex-shrink-0 text-5xl">bolt</span> <div> | |
| <h3 class="text-3xl font-bold text-color mb-2">Conçu pour l'Évolutivité Illimitée</h3> | |
| <p class="text-green-200"> | |
| Notre architecture est élastique. De 10 à 10 millions de validations, Mailix s'adapte automatiquement. Atteignez la croissance sans jamais vous soucier des limites techniques. Découvrez notre <a href="/documentation" class="text-yellow-400 underline font-semibold">documentation d'architecture</a>. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <h2 class="text-4xl font-bold text-color mb-4 text-center"> La sécurité est notre priorité absolue. | |
| </h2> | |
| <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12"> | |
| Dormez sur vos deux oreilles grâce à une plateforme qui respecte les standards les plus stricts du marché. | |
| </p> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="card-bg p-6 space-y-2"> | |
| <span class="material-symbols-rounded text-2xl text-green-400">shield_with_key</span> <h3 class="font-semibold text-color">Validation Multi-Facteur</h3> | |
| <p class="text-gray-300-var text-sm">Prise en charge native et intégrée des jetons TOTP et des clés de sécurité WebAuthn pour un niveau de protection supérieur.</p> | |
| </div> | |
| <div class="card-bg p-6 space-y-2"> | |
| <span class="material-symbols-rounded text-2xl text-green-400">encrypted</span> | |
| <h3 class="font-semibold text-color">Chiffrement Complet</h3> | |
| <p class="text-gray-300-var text-sm">Chiffrement des données de l'utilisateur au repos (AES-256) et communication sécurisée via TLS/SSL.</p> | |
| </div> | |
| <div class="card-bg p-6 space-y-2"> | |
| <span class="material-symbols-rounded text-2xl text-purple-400">balance</span> | |
| <h3 class="font-semibold text-color">Conformité RGPD / CCPA</h3> | |
| <p class="text-gray-300-var text-sm">Gestion des données utilisateurs conforme aux réglementations mondiales (RGPD, CCPA, etc.).</p> | |
| </div> | |
| <div class="card-bg p-6 space-y-2"> | |
| <span class="material-symbols-rounded text-2xl text-yellow-400">link</span> | |
| <h3 class="font-semibold text-color">Standards Ouverts</h3> | |
| <p class="text-gray-300-var text-sm">Support natif et complet des protocoles OAuth 2.0, OpenID Connect (OIDC) et SAML 2.0.</p> | |
| </div> | |
| <div class="card-bg p-6 space-y-2"> | |
| <span class="material-symbols-rounded text-2xl text-teal-400">history_toggle_off</span> | |
| <h3 class="font-semibold text-color">Journaux d'Audit (Logs)</h3> | |
| <p class="text-gray-300-var text-sm">Historique des événements de validation et d'accès en temps réel pour le monitoring et la traçabilité.</p> | |
| </div> | |
| <div class="card-bg p-6 space-y-2"> | |
| <span class="material-symbols-rounded text-2xl text-pink-400">group_add</span> | |
| <h3 class="font-semibold text-color">Authentification Fédérée</h3> | |
| <p class="text-gray-300-var text-sm">Connexion facilitée via les fournisseurs d'identité sociaux et d'entreprise (Google, Microsoft, etc.).</p> | |
| </div> | |
| <div class="card-bg p-6 space-y-2"> | |
| <span class="material-symbols-rounded text-2xl text-red-400">sos</span> | |
| <h3 class="font-semibold text-color">Prévention des Attaques</h3> | |
| <p class="text-gray-300-var text-sm">Limitation de taux (Rate Limiting), détection de bots et blocage des IP malveillantes automatique.</p> | |
| </div> | |
| <div class="card-bg p-6 space-y-2"> | |
| <span class="material-symbols-rounded text-2xl text-indigo-400">bug_report</span> | |
| <h3 class="font-semibold text-color">Programme Bug Bounty</h3> | |
| <p class="text-gray-300-var text-sm">Collaboration avec la communauté de la sécurité pour identifier et corriger les vulnérabilités en continu.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <h2 class="text-4xl font-bold text-color mb-4 text-center"> Statistiques de Performance Clés | |
| </h2> | |
| <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12"> | |
| L'architecture globale de Mailix garantit fiabilité et rapidité, essentielles à votre infrastructure. | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-8 mb-12 text-center"> | |
| <div class="card-bg p-6 shadow-xl"> | |
| <h4 class="text-5xl font-bold text-green-400 mb-2">99.99%</h4> | |
| <p class="text-lg font-semibold text-color">SLA Garanti</p> | |
| <p class="text-gray-300-var text-sm">Fiabilité maximale, votre service est toujours disponible.</p> | |
| </div> | |
| <div class="card-bg p-6 shadow-xl"> | |
| <h4 class="text-5xl font-bold text-orange-400 mb-2">< 50ms</h4> | |
| <p class="text-lg font-semibold text-color">Latence Globale</p> | |
| <p class="text-gray-300-var text-sm">Temps de réponse de l'API optimisé pour une expérience utilisateur rapide.</p> | |
| </div> | |
| <div class="card-bg p-6 shadow-xl"> | |
| <h4 class="text-5xl font-bold text-lime-400 mb-2">10M+</h4> | |
| <p class="text-lg font-semibold text-color">Validations / Mois</p> | |
| <p class="text-gray-300-var text-sm">Capacité à gérer la croissance horizontale et les pics de trafic sans effort.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="py-12"> <h2 class="text-4xl font-bold text-color mb-4 text-center"> Ce que nos clients disent de Mailix. | |
| </h2> | |
| <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12"> | |
| Plus de 15 témoignages qui illustrent la puissance et la fiabilité de notre plateforme. | |
| </p> | |
| <div class="testimonial-container"> | |
| <div class="testimonials-track" id="testimonials-track-content"> | |
| <div class="testimonial-card p-6"> | |
| <p class="text-xl italic text-gray-300-var mb-4">"Mailix a réduit nos temps d'intégration de trois semaines à deux jours. La documentation est impeccable et le support réactif."</p> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3"> | |
| J | |
| </div> | |
| <div> | |
| <p class="font-bold text-color">Jean Dupont</p> | |
| <p class="text-sm text-gray-400-var">CTO chez TechFusion</p> | |
| </div> | |
| </div> | |
| <a href="mailto:jean.dupont@techfusion.com" class="text-sm font-medium text-blue-500-var hover:underline">jean.dupont@techfusion.com</a> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6"> | |
| <p class="text-xl italic text-gray-300-var mb-4">"La bascule vers Mailix a été un jeu d'enfant. Notre taux d'erreur d'authentification est tombé à presque zéro."</p> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3"> | |
| S | |
| </div> | |
| <div> | |
| <p class="font-bold text-color">Sophie Martin</p> | |
| <p class="text-sm text-gray-400-var">Développeuse Lead chez InnovApp</p> | |
| </div> | |
| </div> | |
| <a href="mailto:sophie.martin@innovapp.fr" class="text-sm font-medium text-blue-500-var hover:underline">sophie.martin@innovapp.fr</a> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6"> | |
| <p class="text-xl italic text-gray-300-var mb-4">"La fonction MFA intégrée a été essentielle pour la conformité de notre plateforme B2B. Un outil robuste et fiable."</p> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3"> | |
| D | |
| </div> | |
| <div> | |
| <p class="font-bold text-color">David Dubois</p> | |
| <p class="text-sm text-gray-400-var">Chef de Produit chez GlobalSec</p> | |
| </div> | |
| </div> | |
| <a href="mailto:david.dubois@globalsec.com" class="text-sm font-medium text-blue-500-var hover:underline">david.dubois@globalsec.com</a> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6"> | |
| <p class="text-xl italic text-gray-300-var mb-4">"Scalabilité prouvée : nous avons géré notre pic de Noël sans la moindre latence. Chapeau à l'équipe Mailix."</p> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3"> | |
| M | |
| </div> | |
| <div> | |
| <p class="font-bold text-color">Marc Lavoie</p> | |
| <p class="text-sm text-gray-400-var">Architecte Cloud chez E-Commerce X</p> | |
| </div> | |
| </div> | |
| <a href="mailto:marc.lavoie@ecommercex.ca" class="text-sm font-medium text-blue-500-var hover:underline">marc.lavoie@ecommercex.ca</a> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6"> | |
| <p class="text-xl italic text-gray-300-var mb-4">"La rapidité de validation nous a permis de réduire notre taux de bounce de 15%."</p> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3"> | |
| E | |
| </div> | |
| <div> | |
| <p class="font-bold text-color">Emma Tremblay</p> | |
| <p class="text-sm text-gray-400-var">Responsable Marketing chez CreativeHub</p> | |
| </div> | |
| </div> | |
| <a href="mailto:emma.tremblay@creativehub.com" class="text-sm font-medium text-blue-500-var hover:underline">emma.tremblay@creativehub.com</a> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6"> | |
| <p class="text-xl italic text-gray-300-var mb-4">"Une API propre et simple. Moins de temps passé sur la validation, plus sur notre cœur de métier."</p> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3"> | |
| L | |
| </div> | |
| <div> | |
| <p class="font-bold text-color">Lucas Petit</p> | |
| <p class="text-sm text-gray-400-var">Dev Backend chez DataStream</p> | |
| </div> | |
| </div> | |
| <a href="mailto:lucas.petit@datastream.io" class="text-sm font-medium text-blue-500-var hover:underline">lucas.petit@datastream.io</a> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6"> | |
| <p class="text-xl italic text-gray-300-var mb-4">"Le meilleur rapport performance/prix pour une solution d'authentification d'entreprise. Je recommande fortement."</p> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3"> | |
| C | |
| </div> | |
| <div> | |
| <p class="font-bold text-color">Chloé Lefevre</p> | |
| <p class="text-sm text-gray-400-var">COO chez FinTech Z</p> | |
| </div> | |
| </div> | |
| <a href="mailto:chloe.lefevre@fintechz.com" class="text-sm font-medium text-blue-500-var hover:underline">chloe.lefevre@fintechz.com</a> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6"> | |
| <p class="text-xl italic text-gray-300-var mb-4">"La transition des données de notre ancien système a été la partie la plus facile de notre refonte, grâce aux outils Mailix."</p> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3"> | |
| A | |
| </div> | |
| <div> | |
| <p class="font-bold text-color">Alexandre Roy</p> | |
| <p class="text-sm text-gray-400-var">Ingénieur DevOps chez Legacy Solutions</p> | |
| </div> | |
| </div> | |
| <a href="mailto:alexandre.roy@legacy.io" class="text-sm font-medium text-blue-500-var hover:underline">alexandre.roy@legacy.io</a> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6"> | |
| <p class="text-xl italic text-gray-300-var mb-4">"Mailix est le standard de facto pour la gestion des identités modernes. Nous ne regardons plus en arrière."</p> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3"> | |
| J | |
| </div> | |
| <div> | |
| <p class="font-bold text-color">Julie Gauthier</p> | |
| <p class="text-sm text-gray-400-var">VP Engineering chez FuturePath</p> | |
| </div> | |
| </div> | |
| <a href="mailto:julie.gauthier@futurepath.com" class="text-sm font-medium text-blue-500-var hover:underline">julie.gauthier@futurepath.com</a> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6"> | |
| <p class="text-xl italic text-gray-300-var mb-4">"La surveillance des logs en temps réel nous permet d'identifier et de répondre aux menaces instantanément."</p> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3"> | |
| N | |
| </div> | |
| <div> | |
| <p class="font-bold text-color">Nicolas Bernard</p> | |
| <p class="text-sm text-gray-400-var">Spécialiste Cybersécurité chez SecureNet</p> | |
| </div> | |
| </div> | |
| <a href="mailto:nicolas.bernard@securenet.io" class="text-sm font-medium text-blue-500-var hover:underline">nicolas.bernard@securenet.io</a> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6"> | |
| <p class="text-xl italic text-gray-300-var mb-4">"Nos clients B2B apprécient la facilité du SSO. C'est un argument de vente majeur pour nous."</p> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3"> | |
| C | |
| </div> | |
| <div> | |
| <p class="font-bold text-color">Caroline Gagnon</p> | |
| <p class="text-sm text-gray-400-var">Directrice Commerciale chez B2B Connect</p> | |
| </div> | |
| </div> | |
| <a href="mailto:caroline.gagnon@b2bconnect.ca" class="text-sm font-medium text-blue-500-var hover:underline">caroline.gagnon@b2bconnect.ca</a> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6"> | |
| <p class="text-xl italic text-gray-300-var mb-4">"Les SDKs sont incroyablement bien documentés. Intégration en moins d'une heure pour notre application React."</p> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3"> | |
| F | |
| </div> | |
| <div> | |
| <p class="font-bold text-color">Frédéric Leblanc</p> | |
| <p class="text-sm text-gray-400-var">Développeur Frontend chez App Studio</p> | |
| </div> | |
| </div> | |
| <a href="mailto:frederic.leblanc@appstudio.com" class="text-sm font-medium text-blue-500-var hover:underline">frederic.leblanc@appstudio.com</a> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6"> | |
| <p class="text-xl italic text-gray-300-var mb-4">"Mailix a réduit nos temps d'intégration de trois semaines à deux jours. La documentation est impeccable et le support réactif."</p> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3"> | |
| J | |
| </div> | |
| <div> | |
| <p class="font-bold text-color">Jean Dupont</p> | |
| <p class="text-sm text-gray-400-var">CTO chez TechFusion</p> | |
| </div> | |
| </div> | |
| <a href="mailto:jean.dupont@techfusion.com" class="text-sm font-medium text-blue-500-var hover:underline">jean.dupont@techfusion.com</a> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6"> | |
| <p class="text-xl italic text-gray-300-var mb-4">"La bascule vers Mailix a été un jeu d'enfant. Notre taux d'erreur d'authentification est tombé à presque zéro."</p> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3"> | |
| S | |
| </div> | |
| <div> | |
| <p class="font-bold text-color">Sophie Martin</p> | |
| <p class="text-sm text-gray-400-var">Développeuse Lead chez InnovApp</p> | |
| </div> | |
| </div> | |
| <a href="mailto:sophie.martin@innovapp.fr" class="text-sm font-medium text-blue-500-var hover:underline">sophie.martin@innovapp.fr</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="py-12"> | |
| <h2 class="text-4xl font-bold text-color mb-4 text-center"> | |
| FAQ (Foire Aux Questions) | |
| </h2> | |
| <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12"> | |
| Trouvez rapidement les réponses à vos questions techniques et commerciales. | |
| </p> | |
| <div class="max-w-4xl mx-auto divide-y divide-[var(--border-color)] border-y border-[var(--border-color)]"> | |
| <details class="faq-item"> | |
| <summary class="text-lg text-color hover:text-green-400 transition duration-200"> | |
| Qu'est-ce que la "Simulation SMTP" ? | |
| <span class="material-symbols-rounded faq-icon text-green-400">add</span> | |
| </summary> | |
| <p class="pb-4 text-gray-300-var"> | |
| La simulation SMTP est un test non intrusif où notre API se connecte au serveur de messagerie du destinataire et commence la procédure d'envoi, mais coupe la connexion avant d'envoyer le message final. Cela permet de confirmer l'existence et la validité de la boîte de réception sans générer de trafic e-mail indésirable. | |
| </p> | |
| </details> | |
| <details class="faq-item"> | |
| <summary class="text-lg text-color hover:text-green-400 transition duration-200"> | |
| Quel est le temps de latence moyen de l'API Mailix ? | |
| <span class="material-symbols-rounded faq-icon text-green-400">add</span> | |
| </summary> | |
| <p class="pb-4 text-gray-300-var"> | |
| Notre architecture distribuée et optimisée nous permet d'atteindre une latence moyenne inférieure à 50ms pour la majorité des requêtes. Cette vitesse est cruciale pour la validation d'e-mails en temps réel sur les formulaires de vos utilisateurs. | |
| </p> | |
| </details> | |
| <details class="faq-item"> | |
| <summary class="text-lg text-color hover:text-green-400 transition duration-200"> | |
| Comment gérez-vous la conformité RGPD et CCPA ? | |
| <span class="material-symbols-rounded faq-icon text-green-400">add</span> | |
| </summary> | |
| <p class="pb-4 text-gray-300-var"> | |
| Nous sommes entièrement conformes aux réglementations RGPD (Europe) et CCPA (Californie). Nous ne stockons aucune donnée personnelle au-delà de la durée nécessaire à la validation et nos serveurs sont configurés pour respecter les exigences de résidence des données. | |
| </p> | |
| </details> | |
| <details class="faq-item"> | |
| <summary class="text-lg text-color hover:text-green-400 transition duration-200"> | |
| Qu'est-ce qu'un "E-mail Jetable" et pourquoi le bloquer ? | |
| <span class="material-symbols-rounded faq-icon text-green-400">add</span> | |
| </summary> | |
| <p class="pb-4 text-gray-300-var"> | |
| Un e-mail jetable (ou temp mail) est une adresse éphémère qui expire après une courte période. Les utilisateurs les emploient souvent pour s'inscrire à des services sans intention d'engagement à long terme. Les bloquer permet de maintenir la qualité de votre liste et d'éviter les faux utilisateurs. | |
| </p> | |
| </details> | |
| <details class="faq-item"> | |
| <summary class="text-lg text-color hover:text-green-400 transition duration-200"> | |
| L'API supporte-t-elle les validations en masse ? | |
| <span class="material-symbols-rounded faq-icon text-green-400">add</span> | |
| </summary> | |
| <p class="pb-4 text-gray-300-var"> | |
| Oui, notre API est conçue pour la scalabilité et peut gérer de grands volumes de validation. Pour les nettoyages de base de données massifs, nous proposons également une fonctionnalité de validation de liste asynchrone pour traiter des millions d'adresses efficacement. | |
| </p> | |
| </details> | |
| <details class="faq-item"> | |
| <summary class="text-lg text-color hover:text-green-400 transition duration-200"> | |
| Quels sont les mécanismes de sécurité mis en place pour l'accès API ? | |
| <span class="material-symbols-rounded faq-icon text-green-400">add</span> | |
| </summary> | |
| <p class="pb-4 text-gray-300-var"> | |
| Nous utilisons des clés API sécurisées, conformes à OAuth 2.0. Toutes les communications sont chiffrées via TLS/SSL. De plus, nous appliquons une limitation de taux (Rate Limiting) agressive et une détection de bots pour prévenir les abus et les attaques DDoS. | |
| </p> | |
| </details> | |
| <details class="faq-item"> | |
| <summary class="text-lg text-color hover:text-green-400 transition duration-200"> | |
| Puis-je tester la validité d'un e-mail directement sur votre site ? | |
| <span class="material-symbols-rounded faq-icon text-green-400">add</span> | |
| </summary> | |
| <p class="pb-4 text-gray-300-var"> | |
| Absolument. La section d'introduction de cette page contient un champ de test en temps réel qui utilise notre API principale pour vous donner un aperçu instantané de nos capacités de validation. | |
| </p> | |
| </details> | |
| <details class="faq-item"> | |
| <summary class="text-lg text-color hover:text-green-400 transition duration-200"> | |
| Qu'est-ce qu'une vérification des Enregistrements MX ? | |
| <span class="material-symbols-rounded faq-icon text-green-400">add</span> | |
| </summary> | |
| <p class="pb-4 text-gray-300-var"> | |
| C'est la première étape technique pour s'assurer que le domaine de l'e-mail peut recevoir du courrier. Nous vérifions l'existence d'un enregistrement MX (Mail Exchanger) dans le DNS du domaine, ce qui est essentiel pour la livrabilité. Si cet enregistrement est manquant, l'e-mail est invalide. | |
| </p> | |
| </details> | |
| <details class="faq-item"> | |
| <summary class="text-lg text-color hover:text-green-400 transition duration-200"> | |
| Comment puis-je suivre ma consommation de crédits API ? | |
| <span class="material-symbols-rounded faq-icon text-green-400">add</span> | |
| </summary> | |
| <p class="pb-4 text-gray-300-var"> | |
| Chaque client a accès à un tableau de bord intuitif où il peut suivre en temps réel l'utilisation des crédits, les taux de validation, les statistiques d'erreur et l'historique détaillé de tous les appels API effectués. | |
| </p> | |
| </details> | |
| <details class="faq-item"> | |
| <summary class="text-lg text-color hover:text-green-400 transition duration-200"> | |
| Supportez-vous l'Authentification Fédérée (SSO) pour les clients B2B ? | |
| <span class="material-symbols-rounded faq-icon text-green-400">add</span> | |
| </summary> | |
| <p class="pb-4 text-gray-300-var"> | |
| Oui, nous supportons entièrement l'Authentification Fédérée via des protocoles comme OAuth 2.0, OpenID Connect et SAML 2.0, permettant une connexion simplifiée pour vos clients d'entreprise via leurs fournisseurs d'identité (Google, Microsoft, Okta, etc.). | |
| </p> | |
| </details> | |
| </div> | |
| </section> | |
| </main> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const track = document.getElementById('testimonials-track-content'); | |
| if (track) { | |
| const cards = track.querySelectorAll('.testimonial-card'); | |
| // Dupliquer les cartes pour créer l'effet de défilement infini | |
| cards.forEach(card => { | |
| const clone = card.cloneNode(true); | |
| track.appendChild(clone); | |
| }); | |
| } | |
| }); | |
| </script> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const track = document.getElementById('logos-track-content'); | |
| if (track) { | |
| const logos = track.querySelectorAll('.logo-item'); | |
| // Dupliquer les logos pour créer l'effet de défilement infini | |
| logos.forEach(logo => { | |
| const clone = logo.cloneNode(true); | |
| track.appendChild(clone); | |
| }); | |
| } | |
| }); | |
| </script> | |
| <footer class="mt-20 py-10 bg-header border-t header-border"> | |
| <div class="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-4 gap-8 text-sm"> | |
| <div class="col-span-4 md:col-span-1"> | |
| <h3 class="text-2xl font-bold text-green-500 mb-4">Mailix</h3> <p class="text-gray-400-var">La plateforme de validation d'e-mails la plus rapide pour vos besoins d'entreprise. Zéro Spam, Zéro Bounce.</p> | |
| </div> | |
| <div class="col-span-2 md:col-span-1"> | |
| <h3 class="text-lg font-semibold text-color mb-4">Produit</h3> | |
| <ul class="space-y-3 text-gray-400-var"> | |
| <li><a href="/tarifs" class="hover:text-blue-500-var transition duration-200">Tarifs</a></li> | |
| <li><a href="/fonctionnalites" class="hover:text-blue-500-var transition duration-200">Fonctionnalités</a></li> | |
| <li><a href="/documentation" class="hover:text-blue-500-var transition duration-200">Documentation</a></li> | |
| <li><a href="/support" class="hover:text-blue-500-var transition duration-200">Support</a></li> | |
| </ul> | |
| </div> | |
| <div class="col-span-2 md:col-span-1"> | |
| <h3 class="text-lg font-semibold text-color mb-4">Légal</h3> | |
| <ul class="space-y-3 text-gray-400-var"> | |
| <li><a href="/politique-confidentialite" class="hover:text-blue-500-var transition duration-200">Politique de Confidentialité</a></li> | |
| <li><a href="/mentions-legales" class="hover:text-blue-500-var transition duration-200">Mentions Légales</a></li> | |
| <li><a href="/conditions-utilisation" class="hover:text-blue-500-var transition duration-200">Conditions d'Utilisation</a></li> | |
| <li><a href="/a-propos" class="hover:text-blue-500-var transition duration-200">À Propos</a></li> | |
| </ul> | |
| </div> | |
| <div class="col-span-2 md:col-span-1"> | |
| <h3 class="text-lg font-semibold text-color mb-4">Ressources</h3> | |
| <ul class="space-y-3 text-gray-400-var"> | |
| <li><a href="mailto:support@mailix.com" class="hover:text-blue-500-var transition duration-200">Contact Email</a></li> | |
| <li><a href="/dashboard" class="hover:text-blue-500-var transition duration-200">Espace Client</a></li> | |
| <li><a href="/api-logs" class="hover:text-blue-500-var transition duration-200">Statut API</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-10 pt-6 border-t border-[var(--border-color)]"> | |
| <p class="text-center text-sm text-gray-500-var"> | |
| © 2025 Mailix. Tous droits réservés. Propulsé par la <a href="/" class="hover:text-blue-500-var transition duration-200">Validation d'E-mail la plus rapide</a>. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> | |
| <script> | |
| // Initialiser Highlight.js pour les blocs de code | |
| hljs.highlightAll(); | |
| // Logique de l'onglet de code mise à jour (couleurs déjà en CSS) | |
| document.getElementById('language-tabs').addEventListener('click', function(e) { | |
| if (e.target.classList.contains('tab-button')) { | |
| // Désactiver tous les onglets | |
| document.querySelectorAll('.tab-button').forEach(btn => { | |
| btn.classList.remove('border-green-500', 'text-green-500', 'bg-gray-800'); | |
| btn.classList.add('border-transparent', 'text-gray-400-var', 'hover:text-white', 'hover:bg-gray-800'); | |
| }); | |
| // Cacher tous les blocs de code | |
| document.querySelectorAll('.tab-code').forEach(code => { | |
| code.closest('pre').classList.add('hidden'); | |
| }); | |
| // Activer l'onglet cliqué | |
| e.target.classList.add('border-green-500', 'text-green-500', 'bg-gray-800'); | |
| e.target.classList.remove('border-transparent', 'text-gray-400-var', 'hover:text-white', 'hover:bg-gray-800'); | |
| // Afficher le bloc de code correspondant | |
| const lang = e.target.getAttribute('data-lang'); | |
| document.getElementById('code-' + lang).closest('pre').classList.remove('hidden'); | |
| // Réinitialiser la coloration syntaxique | |
| hljs.highlightAll(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |