Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PROMPT ENGINEERING – Le guide stratégique et opérationnel</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#3B82F6', | |
| secondary: '#10B981', | |
| dark: '#1F2937', | |
| light: '#F9FAFB', | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #F9FAFB; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%); | |
| } | |
| .book-shadow { | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .form-container { | |
| background: rgba(255, 255, 255, 0.9); | |
| backdrop-filter: blur(10px); | |
| } | |
| .feature-icon { | |
| background-color: #EFF6FF; | |
| color: #3B82F6; | |
| } | |
| .download-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .download-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Animation pour le bouton de chargement */ | |
| .spinner { | |
| width: 24px; | |
| height: 24px; | |
| border: 3px solid rgba(255,255,255,0.3); | |
| border-radius: 50%; | |
| border-top-color: #fff; | |
| animation: spin 1s ease-in-out infinite; | |
| margin-right: 8px; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="hero-gradient text-white"> | |
| <div class="container mx-auto px-4 py-12 md:py-20"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">PROMPT ENGINEERING</h1> | |
| <h2 class="text-xl md:text-2xl font-semibold mb-6">Le guide stratégique et opérationnel pour maîtriser l'IA générative</h2> | |
| <p class="text-lg mb-8">Pour les professionnels et les étudiants qui souhaitent écrire des prompts efficaces</p> | |
| <button onclick="scrollToForm()" class="bg-white text-primary font-bold py-3 px-8 rounded-full shadow-lg hover:bg-gray-100 transition duration-300"> | |
| Télécharger le livre blanc | |
| </button> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="book-shadow rounded-lg overflow-hidden w-64 md:w-80"> | |
| <!-- Updated book cover image --> | |
| <img src="https://media.licdn.com/dms/image/v2/D4E22AQESbIEzKbWYow/feedshare-shrink_800/B4EZX8g8FbHgAk-/0/1743698248782?e=1746662400&v=beta&t=BgXBkooQ8MejLZIiMNQxRs4r_NdHRG3oHne9kU7s0GE" alt="Couverture du livre blanc PROMPT ENGINEERING" class="w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-16"> | |
| <!-- Key Quote Section --> | |
| <section class="mb-20"> | |
| <div class="bg-white rounded-xl shadow-md p-8 md:p-10 max-w-4xl mx-auto"> | |
| <div class="flex items-start"> | |
| <div class="mr-6 hidden md:block"> | |
| <div class="bg-blue-100 text-blue-600 rounded-full w-16 h-16 flex items-center justify-center"> | |
| <i class="fas fa-quote-left text-3xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <blockquote class="text-2xl md:text-3xl font-semibold text-dark mb-6"> | |
| "L'IA ne pense pas à votre place, mais elle peut vous aider à penser mieux… si vous lui parlez dans son langage." | |
| </blockquote> | |
| <p class="text-gray-600 text-lg"> | |
| Dans ce livre blanc de plus de 100 pages, vous trouverez tout ce dont vous avez besoin pour maîtriser l'art du prompt engineering. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="mb-20"> | |
| <h2 class="text-3xl font-bold text-center text-dark mb-12">Ce que vous allez découvrir</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition duration-300"> | |
| <div class="feature-icon rounded-full w-12 h-12 flex items-center justify-center mb-4"> | |
| <i class="fas fa-brain text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Concepts clés</h3> | |
| <p class="text-gray-600">Une introduction claire aux concepts fondamentaux de l'IA générative et du prompt engineering.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition duration-300"> | |
| <div class="feature-icon rounded-full w-12 h-12 flex items-center justify-center mb-4"> | |
| <i class="fas fa-sitemap text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">12 frameworks</h3> | |
| <p class="text-gray-600">Les 12 frameworks de prompt les plus efficaces, adaptés à vos contextes (marketing, communication, stratégie…).</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition duration-300"> | |
| <div class="feature-icon rounded-full w-12 h-12 flex items-center justify-center mb-4"> | |
| <i class="fas fa-tools text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">20 techniques</h3> | |
| <p class="text-gray-600">20 techniques de Prompting (Few-shot Prompting, CoT, Tree of Thoughts…) toutes illustrées par des exemples concrets.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition duration-300"> | |
| <div class="feature-icon rounded-full w-12 h-12 flex items-center justify-center mb-4"> | |
| <i class="fas fa-laptop-code text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">25 cas pratiques</h3> | |
| <p class="text-gray-600">25 cas pratiques, classés du plus simple au plus complexe, avec une progression pédagogique claire et immédiatement actionnable.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- LinkedIn Post Section --> | |
| <section class="mb-20"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden max-w-4xl mx-auto"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 p-6 bg-gray-50 flex items-center justify-center"> | |
| <!-- Placeholder for LinkedIn post image --> | |
| <img src="https://via.placeholder.com/300x500/E5E7EB/64748B?text=Extrait+LinkedIn" alt="Extrait du post LinkedIn" class="rounded-lg shadow-sm"> | |
| </div> | |
| <div class="md:w-2/3 p-8"> | |
| <h2 class="text-2xl font-bold text-dark mb-6">Extrait du post LinkedIn</h2> | |
| <div class="prose text-gray-700 mb-6"> | |
| <p class="mb-4">Dans notre monde professionnel en constante évolution, la maîtrise de l'IA générative devient un avantage concurrentiel majeur. Mais trop souvent, nous sous-estimons l'importance de bien formuler nos requêtes.</p> | |
| <p class="mb-4">Ce livre blanc est le fruit de mois de recherche et d'expérimentation avec les modèles d'IA les plus avancés. Il a été conçu pour vous faire gagner du temps et vous permettre d'obtenir des résultats immédiatement supérieurs.</p> | |
| <p>Que vous soyez marketeur, consultant, étudiant ou simplement curieux des nouvelles technologies, ce guide vous donnera les clés pour tirer le meilleur parti des outils d'IA générative.</p> | |
| </div> | |
| <button onclick="scrollToForm()" class="bg-primary text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-600 transition duration-300"> | |
| Accéder au guide complet | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Download Form Section --> | |
| <section id="download-form" class="mb-20"> | |
| <div class="bg-white rounded-xl shadow-xl overflow-hidden max-w-4xl mx-auto"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-blue-50 p-8 md:p-12 flex flex-col justify-center"> | |
| <h2 class="text-2xl font-bold text-dark mb-4">Téléchargez votre exemplaire gratuit</h2> | |
| <p class="text-gray-600 mb-6">Remplissez ce formulaire pour recevoir immédiatement le livre blanc par email.</p> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Format PDF optimisé pour tous les appareils</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Accès immédiat après validation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>100% gratuit - Aucun engagement</span> | |
| </li> | |
| </ul> | |
| <div class="bg-white p-4 rounded-lg border border-blue-100"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 text-blue-600 rounded-full w-10 h-10 flex items-center justify-center mr-3"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">Vos informations sont sécurisées et ne seront jamais partagées.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-8 md:p-12"> | |
| <form id="whitepaper-form" class="space-y-6"> | |
| <div> | |
| <label for="lastname" class="block text-sm font-medium text-gray-700 mb-1">Nom*</label> | |
| <input type="text" id="lastname" name="lastname" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="firstname" class="block text-sm font-medium text-gray-700 mb-1">Prénom*</label> | |
| <input type="text" id="firstname" name="firstname" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email professionnel*</label> | |
| <input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="company" class="block text-sm font-medium text-gray-700 mb-1">Entreprise</label> | |
| <input type="text" id="company" name="company" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="function" class="block text-sm font-medium text-gray-700 mb-1">Fonction</label> | |
| <input type="text" id="function" name="function" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="newsletter" name="newsletter" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="newsletter" class="font-medium text-gray-700">J'accepte d'être informé de la sortie de nouveaux livres blancs</label> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="marketing" name="marketing" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="marketing" class="font-medium text-gray-700">J'accepte de recevoir la newsletter</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <button type="submit" id="submit-btn" class="w-full bg-primary text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-600 transition duration-300 flex items-center justify-center"> | |
| <span>Valider et télécharger</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Success Message (hidden by default) --> | |
| <section id="success-message" class="hidden mb-20"> | |
| <div class="bg-white rounded-xl shadow-xl overflow-hidden max-w-4xl mx-auto p-12 text-center"> | |
| <div class="bg-green-100 text-green-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-check text-3xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-dark mb-4">Merci pour votre inscription !</h2> | |
| <p class="text-gray-600 mb-8 max-w-2xl mx-auto">Votre livre blanc "PROMPT ENGINEERING" est prêt à être téléchargé. Un email de confirmation vous a été envoyé avec le lien de téléchargement.</p> | |
| <a href="#" id="download-link" class="download-btn bg-green-500 text-white font-bold py-4 px-8 rounded-lg hover:bg-green-600 transition duration-300 inline-flex items-center"> | |
| <i class="fas fa-download mr-3"></i> | |
| <span>Télécharger le PDF (12.4 Mo)</span> | |
| </a> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h3 class="text-xl font-bold mb-2">PROMPT ENGINEERING</h3> | |
| <p class="text-gray-400">Le guide stratégique et opérationnel pour maîtriser l'IA générative</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-linkedin-in text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fas fa-envelope text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-sm"> | |
| <p>© 2023 PROMPT ENGINEERING. Tous droits réservés.</p> | |
| <p class="mt-2"><a href="#" class="hover:text-white transition duration-300">Politique de confidentialité</a> | <a href="#" class="hover:text-white transition duration-300">Conditions d'utilisation</a></p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Smooth scroll to form | |
| function scrollToForm() { | |
| document.getElementById('download-form').scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| // Form submission handler | |
| document.getElementById('whitepaper-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get the submit button | |
| const submitBtn = document.getElementById('submit-btn'); | |
| // Save original button content | |
| const originalContent = submitBtn.innerHTML; | |
| // Change button to loading state | |
| submitBtn.disabled = true; | |
| submitBtn.innerHTML = ` | |
| <div class="spinner"></div> | |
| <span>Envoi en cours...</span> | |
| `; | |
| // Simulate API call with 2 seconds delay | |
| setTimeout(function() { | |
| // Hide form and show success message | |
| document.getElementById('download-form').classList.add('hidden'); | |
| document.getElementById('success-message').classList.remove('hidden'); | |
| // Scroll to success message | |
| document.getElementById('success-message').scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Reset button to original state (in case form is shown again) | |
| submitBtn.disabled = false; | |
| submitBtn.innerHTML = originalContent; | |
| // In a real implementation, you would: | |
| // 1. Send form data to your backend (Node.js, Firebase, etc.) | |
| // 2. Backend would process the data, store it in your database | |
| // 3. Backend would send the confirmation email (using SendGrid, Mailgun, etc.) | |
| // 4. Backend would return the actual download link for the PDF | |
| }, 2000); | |
| }); | |
| // Set the actual download link (this would come from your backend in a real implementation) | |
| document.getElementById('download-link').href = "#"; // Replace with actual PDF URL | |
| </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=kris-B-31fr/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |