Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Atecna - Parcours IA</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .timeline-column { | |
| position: relative; | |
| } | |
| .timeline-column::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 50%; | |
| width: 4px; | |
| background-color: #f0f0f0; | |
| transform: translateX(-50%); | |
| z-index: 1; | |
| } | |
| .timeline-step { | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .timeline-step::after { | |
| content: ""; | |
| position: absolute; | |
| left: 50%; | |
| width: 24px; | |
| height: 24px; | |
| background-color: white; | |
| border: 4px solid; | |
| border-radius: 50%; | |
| transform: translateX(-50%); | |
| z-index: 3; | |
| } | |
| .timeline-arrow { | |
| position: absolute; | |
| left: 50%; | |
| color: #f86c5c; | |
| transform: translateX(-50%); | |
| z-index: 3; | |
| } | |
| .disruptive .timeline-step::after { | |
| border-color: #f86c5c; | |
| } | |
| .operational .timeline-step::after { | |
| border-color: #3b82f6; | |
| } | |
| .sticky-header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| backdrop-filter: blur(10px); | |
| } | |
| @media (max-width: 768px) { | |
| .timeline-column::before { | |
| left: 1.5rem; | |
| } | |
| .timeline-step::after { | |
| left: 1.5rem; | |
| } | |
| .timeline-arrow { | |
| left: 1.5rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-[#f86c5c] rounded-full flex items-center justify-center text-white font-bold text-xl mr-3"> | |
| A | |
| </div> | |
| <h1 class="text-2xl font-bold text-gray-800">Atecna</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-gray-600 hover:text-[#f86c5c]">Accueil</a> | |
| <a href="#" class="text-gray-600 hover:text-[#f86c5c]">Services</a> | |
| <a href="#" class="text-gray-600 hover:text-[#f86c5c]">Expertises</a> | |
| <a href="#" class="text-gray-600 hover:text-[#f86c5c]">Contact</a> | |
| </nav> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="py-16 bg-gradient-to-r from-gray-50 to-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6"> | |
| Nos parcours d'accompagnement <span class="text-[#f86c5c]">Intelligence Artificielle</span> | |
| </h1> | |
| <p class="text-xl text-gray-600 mb-8"> | |
| Deux approches stratégiques pour répondre à vos ambitions et défis spécifiques en matière d'IA. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Timeline Headers (Sticky) --> | |
| <div class="sticky-header bg-white/80 py-4 border-b border-gray-200"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Disruptive Header --> | |
| <div class="disruptive-header text-center md:text-left"> | |
| <h2 class="text-2xl font-bold text-[#f86c5c]">IA Disruptive</h2> | |
| <p class="text-gray-600">Créez un avantage concurrentiel avec des projets IA à fort impact</p> | |
| </div> | |
| <!-- Operational Header --> | |
| <div class="operational-header text-center md:text-right"> | |
| <h2 class="text-2xl font-bold text-blue-500">IA Opérationnelle</h2> | |
| <p class="text-gray-600">Adoptez l'IA au quotidien pour des gains rapides et mesurables</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dual Timeline Section --> | |
| <section class="py-8 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Left Column - Disruptive IA --> | |
| <div class="timeline-column disruptive"> | |
| <!-- For Who --> | |
| <div class="timeline-step pt-0 pb-16"> | |
| <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 ml-0 md:ml-8"> | |
| <div class="flex items-start"> | |
| <div class="bg-[#f86c5c]/10 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-question text-[#f86c5c] text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-2">Pour qui ?</h3> | |
| <p class="text-gray-600"> | |
| Entreprises souhaitant transformer leur modèle ou se différencier profondément grâce à l'IA. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Offer 1 --> | |
| <div class="timeline-step pt-8 pb-16"> | |
| <div class="timeline-arrow -top-2"> | |
| <i class="fas fa-chevron-down text-xl text-[#f86c5c]"></i> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 ml-0 md:ml-8"> | |
| <div class="flex items-start"> | |
| <div class="bg-[#f86c5c]/10 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-chess-queen text-[#f86c5c] text-xl"></i> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-2"> | |
| <span class="w-8 h-8 bg-[#f86c5c] text-white rounded-full flex items-center justify-center mr-3 font-bold">1</span> | |
| <h3 class="text-xl font-bold text-gray-800">Vision & stratégie IA</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Jetez les bases d'une transformation IA réussie avec une vision claire et une stratégie adaptée.</p> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="text-[#f86c5c] mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Diagnostic stratégique</h4> | |
| <p class="text-gray-600 text-sm">Analyse des opportunités business et évaluation de la maturité IA actuelle</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-[#f86c5c] mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Définition de la vision IA</h4> | |
| <p class="text-gray-600 text-sm">Alignement avec les priorités métiers et déclinaison stratégique claire</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-[#f86c5c] mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Roadmap & gouvernance</h4> | |
| <p class="text-gray-600 text-sm">Élaboration du plan d'action et mise en place de sponsors et d'un modèle de pilotage</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-[#f86c5c] mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Identification des profils</h4> | |
| <p class="text-gray-600 text-sm">Cartographie des compétences et plan de montée en compétences / recrutement</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Offer 2 --> | |
| <div class="timeline-step pt-8 pb-16"> | |
| <div class="timeline-arrow -top-2"> | |
| <i class="fas fa-chevron-down text-xl text-[#f86c5c]"></i> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 ml-0 md:ml-8"> | |
| <div class="flex items-start"> | |
| <div class="bg-[#f86c5c]/10 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-rocket text-[#f86c5c] text-xl"></i> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-2"> | |
| <span class="w-8 h-8 bg-[#f86c5c] text-white rounded-full flex items-center justify-center mr-3 font-bold">2</span> | |
| <h3 class="text-xl font-bold text-gray-800">Projets IA disruptifs</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Passez à l'action avec des projets concrets qui transformeront votre entreprise.</p> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="text-[#f86c5c] mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Sélection de cas d'usage transformants</h4> | |
| <p class="text-gray-600 text-sm">Identification des projets à plus fort potentiel de transformation</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-[#f86c5c] mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Déploiement par task-force</h4> | |
| <p class="text-gray-600 text-sm">Équipe Atecna (chef de projet, experts IA, devs, UX) et renforcement des équipes si besoin</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-[#f86c5c] mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Mesure d'impact et scalabilité</h4> | |
| <p class="text-gray-600 text-sm">ROI mesurable et préparation à l'industrialisation</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results --> | |
| <div class="timeline-step pt-8 pb-0"> | |
| <div class="bg-[#f86c5c]/10 border border-[#f86c5c]/20 rounded-xl p-6 ml-0 md:ml-8"> | |
| <div class="flex items-start"> | |
| <div class="bg-[#f86c5c] p-3 rounded-lg mr-4"> | |
| <i class="fas fa-trophy text-white text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Résultats attendus</h3> | |
| <p class="text-gray-600"> | |
| Transformation profonde de votre modèle d'affaires, différenciation concurrentielle durable, | |
| création de nouveaux revenus et avantages stratégiques à long terme grâce à l'IA. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Operational IA --> | |
| <div class="timeline-column operational"> | |
| <!-- For Who --> | |
| <div class="timeline-step pt-0 pb-16"> | |
| <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 ml-0 md:mr-8"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-question text-blue-500 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-2">Pour qui ?</h3> | |
| <p class="text-gray-600"> | |
| Entreprises cherchant des ROI rapides sans refonte métier majeure. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Offer 1 --> | |
| <div class="timeline-step pt-8 pb-16"> | |
| <div class="timeline-arrow -top-2"> | |
| <i class="fas fa-chevron-down text-xl text-blue-500"></i> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 ml-0 md:mr-8"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-bolt text-blue-500 text-xl"></i> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-2"> | |
| <span class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center mr-3 font-bold">1</span> | |
| <h3 class="text-xl font-bold text-gray-800">Acculturation & ROI rapide</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Obtenez des résultats concrets rapidement tout en formant vos équipes.</p> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="text-blue-500 mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Diagnostic transverse</h4> | |
| <p class="text-gray-600 text-sm">Audit des processus métiers et cartographie des use cases classés par facilité, ROI, coûts</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-blue-500 mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Formations & ateliers</h4> | |
| <p class="text-gray-600 text-sm">Sensibilisation des directions et animation des équipes</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-blue-500 mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Mise en œuvre</h4> | |
| <p class="text-gray-600 text-sm">POC / déploiement rapide avec suivi des KPIs</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Offer 2 --> | |
| <div class="timeline-step pt-8 pb-16"> | |
| <div class="timeline-arrow -top-2"> | |
| <i class="fas fa-chevron-down text-xl text-blue-500"></i> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 ml-0 md:mr-8"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-users text-blue-500 text-xl"></i> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-2"> | |
| <span class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center mr-3 font-bold">2</span> | |
| <h3 class="text-xl font-bold text-gray-800">AI Citizen Dev</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Autonomisez vos équipes avec des outils accessibles et adaptés.</p> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="text-blue-500 mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Audit des outils existants</h4> | |
| <p class="text-gray-600 text-sm">Évaluation des solutions comme Copilot, Vertex AI, etc.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-blue-500 mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Diagnostic par équipe</h4> | |
| <p class="text-gray-600 text-sm">Approche contextualisée selon les besoins spécifiques</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-blue-500 mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Formations ciblées</h4> | |
| <p class="text-gray-600 text-sm">Adaptées par fonction, service et niveau de compétence</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-blue-500 mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Mise en place de référents IA</h4> | |
| <p class="text-gray-600 text-sm">Structuration d'un réseau interne pour faciliter l'adoption</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Offer 3 --> | |
| <div class="timeline-step pt-8 pb-16"> | |
| <div class="timeline-arrow -top-2"> | |
| <i class="fas fa-chevron-down text-xl text-blue-500"></i> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 ml-0 md:mr-8"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-handshake text-blue-500 text-xl"></i> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-2"> | |
| <span class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center mr-3 font-bold">3</span> | |
| <h3 class="text-xl font-bold text-gray-800">Co-pilotage avec prestataires IA</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Optimisez vos relations avec vos fournisseurs de solutions IA.</p> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="text-blue-500 mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Diagnostic des solutions éditeurs</h4> | |
| <p class="text-gray-600 text-sm">Évaluation des outils proposés par SAP, Adobe, Salesforce...</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-blue-500 mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Évaluation coût/adéquation/scalabilité</h4> | |
| <p class="text-gray-600 text-sm">Analyse complète de la promesse vs réalité opérationnelle</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-blue-500 mr-2 mt-1">•</div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Accompagnement ponctuel</h4> | |
| <p class="text-gray-600 text-sm">POC, cadrage, revue des contrats et mise en garde contre le "bullshit IA"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results --> | |
| <div class="timeline-step pt-8 pb-0"> | |
| <div class="bg-blue-100 border border-blue-200 rounded-xl p-6 ml-0 md:mr-8"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-500 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-chart-line text-white text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Résultats attendus</h3> | |
| <p class="text-gray-600"> | |
| Gains opérationnels rapides, amélioration de la productivité, meilleure maîtrise des coûts IA, | |
| autonomisation des équipes et adoption généralisée des outils IA dans les processus métiers. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-gray-800 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à transformer votre entreprise avec l'IA ?</h2> | |
| <p class="text-xl text-gray-300 mb-8"> | |
| Nos experts sont à votre disposition pour discuter de vos besoins et vous proposer le parcours le plus adapté. | |
| </p> | |
| <a href="#" class="inline-block bg-[#f86c5c] hover:bg-[#e05d4d] text-white px-8 py-4 rounded-lg font-bold text-lg transition duration-300"> | |
| Contactez-nous <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-[#f86c5c] rounded-full flex items-center justify-center text-white font-bold text-lg mr-3"> | |
| A | |
| </div> | |
| <h3 class="text-xl font-bold">Atecna</h3> | |
| </div> | |
| <p class="text-gray-400"> | |
| Accompagnement stratégique en Intelligence Artificielle pour les entreprises ambitieuses. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Navigation</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Services</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Expertises</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Services</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">IA Disruptive</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">IA Opérationnelle</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Formations</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Audit IA</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Contact</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i> | |
| <span class="text-gray-400">Paris, France</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone text-gray-400 mr-2"></i> | |
| <span class="text-gray-400">+33 1 23 45 67 89</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope text-gray-400 mr-2"></i> | |
| <span class="text-gray-400">contact@atecna.com</span> | |
| </li> | |
| </ul> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in text-lg"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter text-lg"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook-f text-lg"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Atecna. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Make timeline headers sticky and highlight current section | |
| window.addEventListener('scroll', function() { | |
| const headers = document.querySelectorAll('.sticky-header h2'); | |
| const sections = document.querySelectorAll('.timeline-column'); | |
| sections.forEach(section => { | |
| const rect = section.getBoundingClientRect(); | |
| const isVisible = rect.top <= 100 && rect.bottom >= 100; | |
| if (isVisible) { | |
| const type = section.classList.contains('disruptive') ? 'disruptive' : 'operational'; | |
| headers.forEach(header => { | |
| header.classList.remove('text-gray-400'); | |
| header.classList.remove('text-[#f86c5c]'); | |
| header.classList.remove('text-blue-500'); | |
| if (header.classList.contains(`${type}-header`)) { | |
| header.classList.add(type === 'disruptive' ? 'text-[#f86c5c]' : 'text-blue-500'); | |
| } else { | |
| header.classList.add('text-gray-400'); | |
| } | |
| }); | |
| } | |
| }); | |
| }); | |
| </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=Chadu/atecna-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |