Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AIFACE - Interface unifiée pour modèles IA locaux et cloud</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%); | |
| } | |
| .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); | |
| } | |
| .screenshot { | |
| border-radius: 12px; | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| transition: all 0.3s ease; | |
| } | |
| .screenshot:hover { | |
| transform: scale(1.02); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: #a777e3; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Header --> | |
| <header class="fixed w-full bg-white shadow-md z-50"> | |
| <div class="container mx-auto px-6 py-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="text-2xl font-bold text-purple-700">AIF<span class="text-blue-500">ACE</span></div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#features" class="nav-link text-gray-700 hover:text-purple-600">Fonctionnalités</a> | |
| <div class="dropdown relative"> | |
| <button class="nav-link text-gray-700 hover:text-purple-600 flex items-center"> | |
| Services Pro <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white py-2 mt-2 rounded shadow-xl w-48"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-purple-50 hover:text-purple-600">Customisation d'interface</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-purple-50 hover:text-purple-600">Solutions entreprise</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-purple-50 hover:text-purple-600">Support prioritaire</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-purple-50 hover:text-purple-600">Formation</a> | |
| </div> | |
| </div> | |
| <a href="#download" class="nav-link text-gray-700 hover:text-purple-600">Téléchargement</a> | |
| <a href="#about" class="nav-link text-gray-700 hover:text-purple-600">À propos</a> | |
| <a href="#contact" id="contact-link" class="nav-link text-gray-700 hover:text-purple-600">Contact</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none"> | |
| <i class="fas fa-bars text-2xl text-gray-700"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white pt-32 pb-20"> | |
| <div class="container mx-auto px-6 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 leading-tight mb-6">L'interface ultime pour vos modèles IA</h1> | |
| <p class="text-xl mb-8">Connectez vos modèles locaux (Ollama) et vos API cloud (OpenAI, DeepSeek, Claude) dans une seule interface élégante et personnalisable.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#download" class="bg-white text-purple-700 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300 text-center">Télécharger maintenant</a> | |
| <a href="#features" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-700 transition duration-300 text-center">Découvrir les fonctionnalités</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://via.placeholder.com/600x400" alt="AIFACE Interface" class="screenshot max-w-full h-auto"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Partners Section --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-center text-2xl font-semibold text-gray-700 mb-12">Compatibilité avec les meilleures plateformes</h2> | |
| <div class="flex flex-wrap justify-center items-center gap-12"> | |
| <img src="https://via.placeholder.com/150x60?text=Ollama" alt="Ollama" class="h-12 opacity-70 hover:opacity-100 transition"> | |
| <img src="https://via.placeholder.com/150x60?text=OpenAI" alt="OpenAI" class="h-12 opacity-70 hover:opacity-100 transition"> | |
| <img src="https://via.placeholder.com/150x60?text=DeepSeek" alt="DeepSeek" class="h-12 opacity-70 hover:opacity-100 transition"> | |
| <img src="https://via.placeholder.com/150x60?text=Claude" alt="Claude" class="h-12 opacity-70 hover:opacity-100 transition"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-16">Fonctionnalités puissantes</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-lg border border-gray-100 transition duration-300"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-laptop-code text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Modèles locaux & cloud</h3> | |
| <p class="text-gray-600">Exécutez des modèles locaux via Ollama ou connectez-vous aux API cloud comme OpenAI, DeepSeek et Claude depuis une seule interface.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-lg border border-gray-100 transition duration-300"> | |
| <div class="text-blue-500 mb-4"> | |
| <i class="fas fa-sliders-h text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Interface personnalisable</h3> | |
| <p class="text-gray-600">Adaptez l'interface à vos besoins avec des thèmes, dispositions et raccourcis personnalisables pour une expérience optimale.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-lg border border-gray-100 transition duration-300"> | |
| <div class="text-green-500 mb-4"> | |
| <i class="fas fa-shield-alt text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Cloisonnement des données</h3> | |
| <p class="text-gray-600">Gardez le contrôle de vos données avec des options de stockage local et des connexions sécurisées aux API externes.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-lg border border-gray-100 transition duration-300"> | |
| <div class="text-yellow-500 mb-4"> | |
| <i class="fas fa-random text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Routage intelligent</h3> | |
| <p class="text-gray-600">Configurez des règles pour router automatiquement vos requêtes vers le modèle le plus approprié selon la tâche.</p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-lg border border-gray-100 transition duration-300"> | |
| <div class="text-red-500 mb-4"> | |
| <i class="fas fa-history text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Historique complet</h3> | |
| <p class="text-gray-600">Conservez et recherchez dans l'historique de toutes vos conversations, avec marquage des modèles utilisés.</p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-lg border border-gray-100 transition duration-300"> | |
| <div class="text-indigo-500 mb-4"> | |
| <i class="fas fa-users-cog text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Services Professionnels</h3> | |
| <p class="text-gray-600">Des solutions sur mesure pour les entreprises, incluant intégration, formation et support dédié.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Screenshots Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-16">Découvrez l'interface</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="flex flex-col justify-center"> | |
| <h3 class="text-2xl font-semibold mb-4">Une expérience utilisateur raffinée</h3> | |
| <p class="text-gray-600 mb-6">AIFACE combine puissance et élégance avec une interface soignée qui s'adapte à votre flux de travail.</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Fenêtres modulables et organisables</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Thèmes clair/sombre et personnalisés</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Raccourcis clavier configurables</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <img src="https://via.placeholder.com/300x200?text=Interface+1" alt="AIFACE Screenshot 1" class="screenshot"> | |
| <img src="https://via.placeholder.com/300x200?text=Interface+2" alt="AIFACE Screenshot 2" class="screenshot"> | |
| <img src="https://via.placeholder.com/300x200?text=Interface+3" alt="AIFACE Screenshot 3" class="screenshot"> | |
| <img src="https://via.placeholder.com/300x200?text=Interface+4" alt="AIFACE Screenshot 4" class="screenshot"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Download Section --> | |
| <section id="download" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-16">Téléchargez AIFACE</h2> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="flex flex-col items-center"> | |
| <div class="mb-8"> | |
| <i class="fab fa-windows text-6xl text-blue-500"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">Version Windows</h3> | |
| <p class="text-gray-600 mb-6 text-center">Compatibilité avec Windows 10 et 11 (64 bits)</p> | |
| <a href="https://download.aiface.app/windows" class="bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-700 transition duration-300">Télécharger pour Windows</a> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <div class="mb-8"> | |
| <i class="fab fa-apple text-6xl text-gray-700"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">Version macOS</h3> | |
| <p class="text-gray-600 mb-6 text-center">Compatibilité avec macOS 11 Big Sur et versions ultérieures</p> | |
| <a href="https://download.aiface.app/macos" class="bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-700 transition duration-300">Télécharger pour macOS</a> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center"> | |
| <h3 class="text-xl font-semibold mb-4">Version Linux (en développement)</h3> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Nous travaillons activement sur une version native pour Linux. Inscrivez-vous pour être informé de sa disponibilité.</p> | |
| <div class="mt-6 flex justify-center"> | |
| <div class="flex"> | |
| <input type="email" placeholder="Votre email" class="px-4 py-2 border rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-500 w-64"> | |
| <button class="bg-purple-600 text-white px-6 py-2 rounded-r-lg hover:bg-purple-700 transition duration-300">M'informer</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pro Services Section --> | |
| <section class="py-20 bg-gray-900 text-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-16">Services Professionnels</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-800 p-8 rounded-xl"> | |
| <div class="text-purple-400 mb-4"> | |
| <i class="fas fa-paint-brush text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Customisation d'interface</h3> | |
| <p class="text-gray-300 mb-4">Adaptation de l'interface aux besoins spécifiques de votre entreprise avec votre charte graphique et vos workflows.</p> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-purple-400 mt-1 mr-2 text-xs"></i> | |
| <span>Intégration de votre identité visuelle</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-purple-400 mt-1 mr-2 text-xs"></i> | |
| <span>Workflows personnalisés</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-purple-400 mt-1 mr-2 text-xs"></i> | |
| <span>Modules spécifiques à votre secteur</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-800 p-8 rounded-xl"> | |
| <div class="text-blue-400 mb-4"> | |
| <i class="fas fa-database text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Solutions d'entreprise</h3> | |
| <p class="text-gray-300 mb-4">Déploiement sécurisé et gestion centralisée pour les organisations avec des besoins spécifiques en matière de données.</p> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-400 mt-1 mr-2 text-xs"></i> | |
| <span>Cloisonnement des données avancé</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-400 mt-1 mr-2 text-xs"></i> | |
| <span>Gestion des accès centralisée</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-400 mt-1 mr-2 text-xs"></i> | |
| <span>Intégration avec vos systèmes</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-800 p-8 rounded-xl"> | |
| <div class="text-green-400 mb-4"> | |
| <i class="fas fa-headset text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Support Premium</h3> | |
| <p class="text-gray-300 mb-4">Accès prioritaire à notre équipe d'experts pour une assistance rapide et des conseils stratégiques.</p> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2 text-xs"></i> | |
| <span>Temps de réponse garanti</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2 text-xs"></i> | |
| <span>Consultation stratégique</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2 text-xs"></i> | |
| <span>Formation personnalisée</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="#" class="inline-block bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-700 transition duration-300">Contactez notre équipe commerciale</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <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"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">À propos d'AIFACE</h2> | |
| <p class="text-gray-600 mb-6">AIFACE est né de la frustration de devoir jongler entre différentes interfaces pour interagir avec des modèles d'IA locaux et cloud. Nous avons créé une solution unifiée qui offre flexibilité, contrôle et une excellente expérience utilisateur.</p> | |
| <p class="text-gray-600 mb-6">Notre mission est de démocratiser l'accès aux technologies d'IA en fournissant des outils puissants mais accessibles, tout en gardant le contrôle des données entre les mains des utilisateurs.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-purple-600 hover:text-purple-800"><i class="fab fa-twitter text-2xl"></i></a> | |
| <a href="#" class="text-purple-600 hover:text-purple-800"><i class="fab fa-github text-2xl"></i></a> | |
| <a href="#" class="text-purple-600 hover:text-purple-800"><i class="fab fa-discord text-2xl"></i></a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://via.placeholder.com/500x300" alt="Équipe AIFACE" class="rounded-lg shadow-xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-16">Questions fréquentes</h2> | |
| <div class="max-w-3xl mx-auto space-y-6"> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-semibold mb-2 flex justify-between items-center cursor-pointer"> | |
| <span>Quels modèles locaux sont supportés ?</span> | |
| <i class="fas fa-chevron-down text-purple-600"></i> | |
| </h3> | |
| <div class="text-gray-600 mt-2"> | |
| <p>AIFACE supporte tous les modèles compatibles avec Ollama, y compris Llama 2, Mistral, Gemma et bien d'autres. Vous pouvez également ajouter manuellement des modèles exécutés localement via d'autres méthodes.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-semibold mb-2 flex justify-between items-center cursor-pointer"> | |
| <span>Comment sont sécurisées mes données ?</span> | |
| <i class="fas fa-chevron-down text-purple-600"></i> | |
| </h3> | |
| <div class="text-gray-600 mt-2"> | |
| <p>Pour les modèles locaux, toutes vos données restent sur votre machine. Pour les API cloud, nous utilisons des connexions sécurisées et ne stockons jamais vos clés API sur nos serveurs. Vous avez un contrôle total sur la conservation ou la suppression de votre historique de conversations.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-semibold mb-2 flex justify-between items-center cursor-pointer"> | |
| <span>Quand la version Linux sera-t-elle disponible ?</span> | |
| <i class="fas fa-chevron-down text-purple-600"></i> | |
| </h3> | |
| <div class="text-gray-600 mt-2"> | |
| <p>Nous travaillons activement sur la version Linux et prévoyons une première version bêta d'ici la fin du trimestre. Inscrivez-vous à notre newsletter pour être informé du calendrier de sortie.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-semibold mb-2 flex justify-between items-center cursor-pointer"> | |
| <span>Puis-je utiliser plusieurs fournisseurs simultanément ?</span> | |
| <i class="fas fa-chevron-down text-purple-600"></i> | |
| </h3> | |
| <div class="text-gray-600 mt-2"> | |
| <p>Absolument ! AIFACE vous permet de configurer plusieurs fournisseurs et de basculer entre eux facilement, ou même de définir des règles pour router automatiquement certaines requêtes vers des fournisseurs spécifiques.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white" style="scroll-margin-top: 100px;"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-16">Contactez-nous</h2> | |
| <div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Informations de contact</h3> | |
| <p class="text-gray-600 mb-6">Nous sommes à votre disposition pour toute question ou demande d'information.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-envelope text-purple-600 mt-1 mr-4"></i> | |
| <div> | |
| <h4 class="font-medium">Email</h4> | |
| <a href="mailto:contact@aiface.app" class="text-gray-600 hover:text-purple-600">contact@aiface.app</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-purple-600 mt-1 mr-4"></i> | |
| <div> | |
| <h4 class="font-medium">Adresse</h4> | |
| <p class="text-gray-600">Paris, France</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-medium mb-4">Suivez-nous</h4> | |
| <div class="flex space-x-4"> | |
| <a href="https://twitter.com/aifaceapp" class="text-gray-600 hover:text-purple-600"><i class="fab fa-twitter text-xl"></i></a> | |
| <a href="https://github.com/aifaceapp" class="text-gray-600 hover:text-purple-600"><i class="fab fa-github text-xl"></i></a> | |
| <a href="https://discord.gg/aiface" class="text-gray-600 hover:text-purple-600"><i class="fab fa-discord text-xl"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nom</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea> | |
| </div> | |
| <button type="submit" class="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700 transition duration-300">Envoyer le message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Prêt à révolutionner votre workflow IA ?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Téléchargez AIFACE aujourd'hui et unifiez votre expérience avec les modèles locaux et cloud.</p> | |
| <a href="#download" class="bg-white text-purple-700 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300 inline-block">Télécharger gratuitement</a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">AIFACE</h3> | |
| <p class="text-gray-400">L'interface ultime pour vos modèles d'IA locaux et cloud.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Produit</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#features" class="text-gray-400 hover:text-white transition">Fonctionnalités</a></li> | |
| <li><a href="#download" class="text-gray-400 hover:text-white transition">Téléchargement</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Prix</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Roadmap</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Ressources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Entreprise</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">À propos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Carrières</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Presse</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="text-gray-400 mb-4 md:mb-0"> | |
| © 2023 AIFACE. Tous droits réservés. | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="https://twitter.com/aifaceapp" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="https://github.com/aifaceapp" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a> | |
| <a href="https://discord.gg/aiface" class="text-gray-400 hover:text-white transition"><i class="fab fa-discord"></i></a> | |
| <a href="https://linkedin.com/company/aiface" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Simple script for FAQ toggle | |
| document.querySelectorAll('.bg-white.p-6.rounded-lg.shadow-md h3').forEach(item => { | |
| item.addEventListener('click', () => { | |
| const content = item.nextElementSibling; | |
| const icon = item.querySelector('i'); | |
| if (content.style.display === 'none' || !content.style.display) { | |
| content.style.display = 'block'; | |
| icon.classList.remove('fa-chevron-down'); | |
| icon.classList.add('fa-chevron-up'); | |
| } else { | |
| content.style.display = 'none'; | |
| icon.classList.remove('fa-chevron-up'); | |
| icon.classList.add('fa-chevron-down'); | |
| } | |
| }); | |
| }); | |
| // Mobile menu toggle would be implemented here | |
| // This is a simplified version for demonstration | |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| alert("Mobile menu would open here in a full implementation"); | |
| }); | |
| </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=Ismaeldramani/aichat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |