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 | import { Link } from 'react-router-dom'
import {
FileText,
Globe,
Brain,
Database,
Workflow,
Table,
Bot,
ArrowRight,
Sparkles,
GitBranch
} from 'lucide-react'
import { useAuth } from '../../contexts/AuthContext'
function Home() {
const { user, pendingInvitations, organizations } = useAuth();
const hasNoOrg = !user?.defaultOrganizationId && user && organizations?.length === 0;
return (
<div className="max-w-6xl mx-auto">
{/* Hero */}
<div className="text-center py-12 lg:py-16">
<h1 className="text-3xl lg:text-4xl xl:text-5xl font-bold text-gray-900 leading-tight">
Nooloom{' '}
<span className="text-indigo-600">transforme</span>
<br className="hidden sm:block" />
vos{' '}
<span className="text-indigo-600">documents et sites web</span>
<br className="hidden sm:block" />
en{' '}
<span className="text-indigo-600">connaissances prêtes à l'emploi</span>
</h1>
</div>
{/* Pending Invitations Banner */}
{user && pendingInvitations?.length > 0 && (
<div className="mb-8 max-w-2xl mx-auto">
<div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
<h2 className="text-lg font-semibold text-blue-900 mb-2">Invitations en attente</h2>
<p className="text-blue-700 mb-4">
Vous avez {pendingInvitations.length} invitation(s) en attente.
</p>
<Link
to="/profile"
className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
>
Gérer mes invitations →
</Link>
</div>
</div>
)}
{/* Architecture Diagram */}
<div className="mb-20">
<div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-8 lg:p-12 max-w-3xl mx-auto">
{/* Level 1: Crawler at the top */}
<div className="border-2 border-amber-300 rounded-t-xl p-6 bg-amber-50">
<div className="flex items-center justify-center gap-4">
<div className="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center">
<Workflow className="w-6 h-6 text-amber-600" />
</div>
<div>
<h3 className="text-xl font-bold text-gray-900">Crawler</h3>
<p className="text-sm text-gray-600">Découverte automatique avec scoring IA</p>
</div>
</div>
</div>
{/* Level 2: Extractors - side by side, connected */}
<div className="grid grid-cols-2">
<div className="border-2 border-t-0 border-cyan-200 p-6 text-center bg-cyan-50">
<div className="w-12 h-12 bg-cyan-100 rounded-xl flex items-center justify-center mx-auto mb-3">
<Globe className="w-6 h-6 text-cyan-600" />
</div>
<h3 className="font-bold text-gray-900 mb-1">Web Extractor</h3>
<p className="text-sm text-gray-600">Pages web statiques et dynamiques</p>
</div>
<div className="border-2 border-t-0 border-l-0 border-blue-200 p-6 text-center bg-blue-50">
<div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-3">
<FileText className="w-6 h-6 text-blue-600" />
</div>
<h3 className="font-bold text-gray-900 mb-1">File Extractor</h3>
<p className="text-sm text-gray-600">PDF, images, documents Office, API</p>
</div>
</div>
{/* Level 3: Refiners - side by side, connected */}
<div className="grid grid-cols-2">
<div className="border-2 border-t-0 border-indigo-200 p-6 text-center bg-indigo-50">
<div className="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center mx-auto mb-3">
<Table className="w-6 h-6 text-indigo-600" />
</div>
<h3 className="font-bold text-gray-900 mb-1">Data Refiner</h3>
<p className="text-sm text-gray-600">Extraction structurée avec schémas</p>
</div>
<div className="border-2 border-t-0 border-l-0 border-purple-200 p-6 text-center bg-purple-50">
<div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mx-auto mb-3">
<Brain className="w-6 h-6 text-purple-600" />
</div>
<h3 className="font-bold text-gray-900 mb-1">Fact Refiner</h3>
<p className="text-sm text-gray-600">Extraction de faits atomiques</p>
</div>
</div>
{/* Level 4: Knowledge Router */}
<div className="border-2 border-t-0 border-orange-200 p-6 bg-orange-50">
<div className="flex items-center justify-center gap-4">
<div className="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
<GitBranch className="w-6 h-6 text-orange-600 rotate-180" />
</div>
<div>
<h3 className="text-xl font-bold text-gray-900">Knowledge Router</h3>
<p className="text-sm text-gray-600">Aiguillage des données vers l'extérieur ou la base interne</p>
</div>
</div>
</div>
{/* Level 5: Knowledge Base */}
<div className="border-2 border-t-0 border-green-200 p-6 bg-green-50">
<div className="flex items-center justify-center gap-4">
<div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
<Database className="w-6 h-6 text-green-600" />
</div>
<div>
<h3 className="text-xl font-bold text-gray-900">Knowledge Base</h3>
<p className="text-sm text-gray-600">Stockage, recherche sémantique et API</p>
</div>
</div>
</div>
{/* Level 6: AI Agent at the bottom */}
<div className="border-2 border-t-0 border-rose-200 rounded-b-xl p-6 bg-rose-50">
<div className="flex items-center justify-center gap-4">
<div className="w-12 h-12 bg-rose-100 rounded-xl flex items-center justify-center">
<Bot className="w-6 h-6 text-rose-600" />
</div>
<div>
<h3 className="text-xl font-bold text-gray-900">Agent IA</h3>
<p className="text-sm text-gray-600">Réponses intelligentes à partir des connaissances</p>
</div>
</div>
</div>
</div>
</div>
{/* Mini Résumé + CTA */}
<div className="mb-20 max-w-3xl mx-auto">
<div className="bg-gradient-to-r from-indigo-50 to-purple-50 border border-indigo-100 rounded-2xl p-8 lg:p-10 text-center">
<Sparkles className="w-8 h-8 text-indigo-500 mx-auto mb-4" />
<h2 className="text-2xl font-bold text-gray-900 mb-3">
Une plateforme, des possibilités infinies
</h2>
<p className="text-gray-600 leading-relaxed mb-6 max-w-xl mx-auto">
Nooloom vous permet de construire des bases de connaissance sémantique actionnables
en explorant des ressources web et des fichiers — le tout en quelques clics.
Chaque brique fonctionne indépendamment, et leur combinaison transforme
vos données en un graphe de connaissance interrogable par un agent IA.
</p>
<Link
to="/about"
className="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-xl font-semibold hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-200"
>
En savoir plus sur Nooloom
<ArrowRight className="w-5 h-5" />
</Link>
</div>
</div>
</div>
)
}
export default Home
|