File size: 9,656 Bytes
182b8f1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 |
<!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 with Logo -->
<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>
<!-- Hero Section -->
<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>
<!-- Benefits 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">
<!-- Benefit 1 -->
<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>
<!-- Benefit 2 -->
<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>
<!-- Benefit 3 -->
<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>
<!-- Final CTA 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 with Legal Mentions -->
<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>
// Simple animation for the CTA buttons
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)';
});
});
// Smooth scroll for anchor links
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> |