Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 | import { Link } from 'react-router-dom'
import {
FileText,
Globe,
Brain,
Database,
Workflow,
Table,
Bot,
ArrowRight,
Layers,
ShoppingCart,
HeadphonesIcon,
Globe2,
BarChart3,
Package,
GitBranch,
Scale
} from 'lucide-react'
const useCases = [
{
icon: Globe2,
title: 'Moteur de recherche interne pour site web',
description: 'Indexez toutes les pages de votre site, les fichiers hébergés et les sites référencés sur plusieurs niveaux de profondeur. Offrez à vos visiteurs un moteur de recherche sémantique qui répond précisément à leurs questions.',
steps: ['Crawler', 'Web Extractor', 'File Extractor', 'Data Refiner', 'Fact Refiner', 'Knowledge Base', 'Agent IA'],
color: 'indigo'
},
{
icon: ShoppingCart,
title: 'Automatisation du traitement de commandes',
description: 'Récupérez un fichier de commande (PDF, email, message), extrayez-en les données structurées (produits, quantités, adresses) et envoyez-les directement dans votre système d\'information métier.',
steps: ['File Extractor', 'Data Refiner', 'Knowledge Router'],
color: 'blue'
},
{
icon: HeadphonesIcon,
title: 'Base de connaissance support client',
description: 'Analysez l\'historique des interactions support (emails, tickets, chats) pour construire une base de connaissance des problèmes et solutions. Des humains ou un agent IA peuvent ensuite exploiter ces connaissances pour traiter de nouveaux dossiers.',
steps: ['Fact Refiner', 'Knowledge Router', 'Knowledge Base', 'Agent IA'],
color: 'purple'
},
{
icon: BarChart3,
title: 'Veille concurrentielle automatisée',
description: 'Surveillez les sites de vos concurrents. Lancez deux extractions à des moments différents dans deux bases de connaissance, comparez les résultats avec l\'agent IA, ou activez le rapport de nouveauté automatique dès le crawl.',
steps: ['Crawler', 'Web Extractor', 'Fact Refiner', 'Knowledge Router', 'Knowledge Base', 'Agent IA'],
color: 'amber'
},
{
icon: Package,
title: 'Gestion de catalogue fournisseurs',
description: 'Parcourez les fiches produits de vos fournisseurs, extrayez-en les caractéristiques techniques selon un schéma unifié, et acheminez automatiquement les données mises à jour vers votre ERP ou système de catalogue.',
steps: ['Crawler', 'Web Extractor', 'Data Refiner', 'Knowledge Router'],
color: 'cyan'
},
{
icon: Scale,
title: 'Audit documentaire et conformité',
description: 'Importez vos contrats, CGV, politiques internes et documents légaux. Extrayez les clauses, obligations et dates clés, puis interrogez l\'agent IA pour vérifier la conformité de vos documents par rapport à un référentiel.',
steps: ['File Extractor', 'Data Refiner', 'Fact Refiner', 'Knowledge Base', 'Agent IA'],
color: 'rose'
}
]
const blocks = [
{
id: 'crawler',
icon: Workflow,
title: 'Crawler',
tagline: 'Exploration intelligente du web',
description: 'Découvrez automatiquement des ressources web pertinentes. Le crawler analyse les pages, suit les liens et score chaque ressource avec l\'IA pour ne retenir que ce qui compte vraiment.',
bg: 'bg-amber-50',
border: 'border-amber-200',
iconBg: 'bg-amber-100',
iconColor: 'text-amber-600'
},
{
id: 'web-extractor',
icon: Globe,
title: 'Web Extractor',
tagline: 'Capture de contenu web',
description: 'Extrayez le contenu de pages web statiques et dynamiques. L\'extracteur navigue dans les pages, capture le texte, les tableaux et les structures pour les transformer en données exploitables.',
bg: 'bg-cyan-50',
border: 'border-cyan-200',
iconBg: 'bg-cyan-100',
iconColor: 'text-cyan-600'
},
{
id: 'file-extractor',
icon: FileText,
title: 'File Extractor',
tagline: 'Extraction multi-format',
description: 'Importez des fichiers par upload depuis l\'interface, par envoi API ou à la demande du crawler. Le contenu est extrait et structuré automatiquement à partir de PDF, images et documents Office.',
bg: 'bg-blue-50',
border: 'border-blue-200',
iconBg: 'bg-blue-100',
iconColor: 'text-blue-600'
},
{
id: 'data-refiner',
icon: Table,
title: 'Data Refiner',
tagline: 'Extraction structurée sur mesure',
description: 'Définissez vos propres schémas de données et laissez l\'IA extraire précisément ce dont vous avez besoin. Idéal pour transformer des documents hétérogènes en bases structurées.',
bg: 'bg-indigo-50',
border: 'border-indigo-200',
iconBg: 'bg-indigo-100',
iconColor: 'text-indigo-600'
},
{
id: 'fact-refiner',
icon: Brain,
title: 'Fact Refiner',
tagline: 'Extraction de faits atomiques',
description: 'Transformez vos documents en graphe de connaissances. Le synthétiseur extrait des faits — entités, relations, attributs — et les connecte pour former une base de connaissance sémantique.',
bg: 'bg-purple-50',
border: 'border-purple-200',
iconBg: 'bg-purple-100',
iconColor: 'text-purple-600'
},
{
id: 'knowledge-router',
icon: GitBranch,
title: 'Knowledge Router',
tagline: 'Aiguillage des données',
description: 'Dirigez les données synthétisées vers votre système d\'information métier (ERP, CRM, API) ou vers la base de connaissance interne selon vos besoins.',
bg: 'bg-orange-50',
border: 'border-orange-200',
iconBg: 'bg-orange-100',
iconColor: 'text-orange-600'
},
{
id: 'knowledge-base',
icon: Database,
title: 'Knowledge Base',
tagline: 'Stockage et recherche sémantique',
description: 'Centralisez toutes vos connaissances extraites dans une base vectorielle. Recherchez par sens, pas par mots-clés. Les bases sont accessibles via API pour être exploitées depuis vos propres outils.',
bg: 'bg-green-50',
border: 'border-green-200',
iconBg: 'bg-green-100',
iconColor: 'text-green-600'
},
{
id: 'ai-agent',
icon: Bot,
title: 'Agent IA',
tagline: 'Assistant intelligent connecté à vos données',
description: 'Discutez avec un agent RAG (Retrieval-Augmented Generation) qui puise dans vos bases de connaissance pour répondre avec précision à vos questions, en citant ses sources.',
bg: 'bg-rose-50',
border: 'border-rose-200',
iconBg: 'bg-rose-100',
iconColor: 'text-rose-600'
}
]
const stepColors = {
'Crawler': 'bg-amber-100 text-amber-700 border-amber-200',
'Web Extractor': 'bg-cyan-100 text-cyan-700 border-cyan-200',
'File Extractor': 'bg-blue-100 text-blue-700 border-blue-200',
'Data Refiner': 'bg-indigo-100 text-indigo-700 border-indigo-200',
'Fact Refiner': 'bg-purple-100 text-purple-700 border-purple-200',
'Knowledge Router': 'bg-orange-100 text-orange-700 border-orange-200',
'Knowledge Base': 'bg-green-100 text-green-700 border-green-200',
'Agent IA': 'bg-rose-100 text-rose-700 border-rose-200'
}
const useCaseIconStyles = {
indigo: { bg: 'bg-indigo-100', icon: 'text-indigo-600' },
blue: { bg: 'bg-blue-100', icon: 'text-blue-600' },
purple: { bg: 'bg-purple-100', icon: 'text-purple-600' },
amber: { bg: 'bg-amber-100', icon: 'text-amber-600' },
cyan: { bg: 'bg-cyan-100', icon: 'text-cyan-600' },
rose: { bg: 'bg-rose-100', icon: 'text-rose-600' }
}
const promise = (
<>
Construire une base de connaissance sémantique actionnable
<br />
à partir de ressources web et fichiers,
<br />
en moins de clics qu'il n'en faut pour lire cette phrase.
</>
)
function About() {
return (
<div className="max-w-6xl mx-auto">
{/* Promise Banner */}
<div className="mb-16 max-w-4xl mx-auto pt-8 lg:pt-12">
<div className="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl p-8 lg:p-10 text-center shadow-xl">
<Layers className="w-10 h-10 text-white/80 mx-auto mb-4" />
<h2 className="text-2xl lg:text-3xl font-bold text-white mb-3">
La promesse Nooloom
</h2>
<p className="text-lg text-indigo-100 leading-relaxed max-w-2xl mx-auto">
{promise}
</p>
</div>
</div>
{/* Cas d'usage */}
<div className="mb-20">
<h2 className="text-2xl lg:text-3xl font-bold text-gray-900 text-center mb-3">
Des cas d'usage concrets
</h2>
<p className="text-gray-600 text-center mb-10 max-w-2xl mx-auto">
Voici six exemples de ce qu'il est possible de faire
<br />
avec les capacités de Nooloom.
</p>
<div className="grid md:grid-cols-3 gap-6">
{useCases.map((uc) => {
const UcIcon = uc.icon
return (
<div key={uc.title} className="bg-white border border-gray-200 rounded-2xl p-6 lg:p-8 shadow-sm hover:shadow-md transition-shadow">
<div className={`w-12 h-12 rounded-xl flex items-center justify-center mb-4 ${useCaseIconStyles[uc.color].bg}`}>
<UcIcon className={`w-6 h-6 ${useCaseIconStyles[uc.color].icon}`} />
</div>
<h3 className="text-lg font-bold text-gray-900 mb-3">{uc.title}</h3>
<p className="text-sm text-gray-600 leading-relaxed mb-5">
{uc.description}
</p>
<div className="flex flex-wrap gap-1.5">
{uc.steps.map((step) => (
<span key={step} className={`text-xs font-medium px-2.5 py-1 rounded-full border ${stepColors[step]}`}>
{step}
</span>
))}
</div>
</div>
)
})}
</div>
<p className="text-gray-500 text-center mt-10 max-w-lg mx-auto text-sm leading-relaxed">
Et bien d'autres encore.
<br />
Chaque capacité est un levier,
<br />
leur composition ne tient qu'à vous.
</p>
</div>
{/* Les briques en détail */}
<div className="mb-20">
<h2 className="text-2xl lg:text-3xl font-bold text-gray-900 text-center mb-10">
Les capacités de la plateforme
</h2>
<div className="space-y-8">
{blocks.map((block) => {
const Icon = block.icon
return (
<div key={block.id} className={`${block.bg} border ${block.border} rounded-2xl p-8 lg:p-10`}>
<div className="flex items-start gap-6">
<div className={`w-14 h-14 ${block.iconBg} rounded-xl flex items-center justify-center flex-shrink-0 mt-1`}>
<Icon className={`w-7 h-7 ${block.iconColor}${block.id === 'knowledge-router' ? ' rotate-180' : ''}`} />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-3 mb-2">
<h3 className="text-2xl font-bold text-gray-900">{block.title}</h3>
<span className={`text-sm font-medium px-3 py-0.5 rounded-full ${block.bg} border ${block.border} ${block.iconColor}`}>
{block.tagline}
</span>
</div>
<p className="text-gray-600 leading-relaxed">
{block.description}
</p>
</div>
</div>
</div>
)
})}
</div>
</div>
{/* CTA */}
<div className="mb-20 text-center">
<Link
to="/"
className="inline-flex items-center gap-2 px-8 py-4 bg-indigo-600 text-white rounded-xl font-semibold hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-200"
>
Retour à l'accueil
<ArrowRight className="w-5 h-5" />
</Link>
</div>
</div>
)
}
export default About
|