|
<!DOCTYPE html> |
|
<html lang="fr"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Aiden Viewer - Expliquez mieux vos radios dentaires</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; |
|
background: linear-gradient(to bottom, #f8fafc, #e2e8f0); |
|
min-height: 100vh; |
|
} |
|
|
|
.hero-gradient { |
|
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); |
|
} |
|
|
|
.benefit-card { |
|
transition: all 0.3s ease; |
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
} |
|
|
|
.benefit-card:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
} |
|
|
|
.cta-button { |
|
transition: all 0.3s ease; |
|
box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3), 0 2px 4px -1px rgba(59, 130, 246, 0.2); |
|
} |
|
|
|
.cta-button:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3), 0 4px 6px -2px rgba(59, 130, 246, 0.2); |
|
} |
|
|
|
.price-tag { |
|
position: relative; |
|
background: white; |
|
border-radius: 0.5rem; |
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
} |
|
|
|
.price-tag::before { |
|
content: ""; |
|
position: absolute; |
|
top: -10px; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
width: 0; |
|
height: 0; |
|
border-left: 10px solid transparent; |
|
border-right: 10px solid transparent; |
|
border-bottom: 10px solid white; |
|
} |
|
</style> |
|
</head> |
|
<body class="antialiased text-gray-800"> |
|
|
|
<header class="container mx-auto px-4 py-6"> |
|
<div class="flex items-center"> |
|
<div class="flex items-center"> |
|
<div class="w-12 h-12 rounded-lg bg-blue-600 flex items-center justify-center text-white font-bold text-xl mr-3"> |
|
<span>AI</span> |
|
</div> |
|
<span class="text-xl font-semibold text-blue-600">Aiden Viewer</span> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
|
|
<section class="hero-gradient text-white py-16 md:py-24"> |
|
<div class="container mx-auto px-4"> |
|
<div class="max-w-4xl mx-auto text-center"> |
|
<h1 class="text-3xl md:text-5xl font-bold leading-tight mb-6"> |
|
Expliquez mieux vos radios dentaires.<br>Formez plus efficacement. |
|
</h1> |
|
<p class="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto mb-10"> |
|
Avec Aiden Viewer, visualisez clairement vos radios grâce à l'IA. Un outil simple et pédagogique, pensé pour les praticiens. |
|
</p> |
|
|
|
<div class="flex flex-col md:flex-row justify-center items-center gap-6 mb-16"> |
|
<button class="cta-button bg-white text-blue-600 font-semibold py-4 px-8 rounded-lg text-lg hover:bg-blue-50"> |
|
Commencer mon essai gratuit |
|
<i class="fas fa-arrow-right ml-2"></i> |
|
</button> |
|
</div> |
|
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 inline-block"> |
|
<p class="text-sm md:text-base mb-1">Accès gratuit pendant 30 jours – sans engagement</p> |
|
<div class="price-tag px-6 py-3 inline-block"> |
|
<p class="text-2xl font-bold">349 € TTC / an</p> |
|
<p class="text-blue-200 text-sm">soit 0,96 € par jour</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-16 md:py-24 bg-white"> |
|
<div class="container mx-auto px-4"> |
|
<div class="max-w-6xl mx-auto"> |
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
<div class="benefit-card bg-white rounded-xl p-8 border border-gray-100"> |
|
<div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mb-6"> |
|
<i class="fas fa-camera-retro text-2xl"></i> |
|
</div> |
|
<h3 class="text-xl font-semibold mb-3">Mise en évidence des zones d'intérêt sur radios types</h3> |
|
<p class="text-gray-600">L'IA identifie et met en lumière les zones importantes de vos radiographies pour une meilleure compréhension.</p> |
|
</div> |
|
|
|
|
|
<div class="benefit-card bg-white rounded-xl p-8 border border-gray-100"> |
|
<div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mb-6"> |
|
<i class="fas fa-brain text-2xl"></i> |
|
</div> |
|
<h3 class="text-xl font-semibold mb-3">Illustration simplifiée grâce à l'intelligence artificielle</h3> |
|
<p class="text-gray-600">Nos algorithmes transforment des images complexes en représentations claires et pédagogiques (sans fonction médicale).</p> |
|
</div> |
|
|
|
|
|
<div class="benefit-card bg-white rounded-xl p-8 border border-gray-100"> |
|
<div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mb-6"> |
|
<i class="fas fa-chalkboard-teacher text-2xl"></i> |
|
</div> |
|
<h3 class="text-xl font-semibold mb-3">Un support concret pour former, expliquer, communiquer</h3> |
|
<p class="text-gray-600">Améliorez la communication avec vos patients et collègues grâce à des visuels explicites et professionnels.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
<div class="container mx-auto px-4"> |
|
<div class="max-w-4xl mx-auto text-center"> |
|
<h2 class="text-2xl md:text-3xl font-bold mb-6">Prêt à révolutionner votre façon d'expliquer les radiographies ?</h2> |
|
<p class="text-lg text-gray-600 mb-8">Essayez Aiden Viewer gratuitement pendant 30 jours, sans engagement.</p> |
|
<button class="cta-button bg-blue-600 text-white font-semibold py-4 px-8 rounded-lg text-lg hover:bg-blue-700"> |
|
Commencer mon essai gratuit |
|
<i class="fas fa-arrow-right ml-2"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<footer class="bg-gray-100 py-8 text-sm text-gray-500"> |
|
<div class="container mx-auto px-4"> |
|
<div class="max-w-4xl mx-auto text-center"> |
|
<p>Aiden Viewer est un outil à visée exclusivement pédagogique. Il ne constitue pas un dispositif médical et ne doit pas être utilisé pour le diagnostic ou le traitement. Les zones d'intérêt générées par l'intelligence artificielle sont proposées à des fins illustratives uniquement.</p> |
|
<p class="mt-4">© 2023 Aiden Viewer. Tous droits réservés.</p> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
<script> |
|
|
|
document.querySelectorAll('.cta-button').forEach(button => { |
|
button.addEventListener('mouseenter', () => { |
|
button.querySelector('i').style.transform = 'translateX(3px)'; |
|
}); |
|
button.addEventListener('mouseleave', () => { |
|
button.querySelector('i').style.transform = 'translateX(0)'; |
|
}); |
|
}); |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
anchor.addEventListener('click', function (e) { |
|
e.preventDefault(); |
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
behavior: 'smooth' |
|
}); |
|
}); |
|
}); |
|
</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=Fred5712/aiden-viewer-landing-page-a" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
