artificiai.github.io/index.html at main · ArtificiAI/artificiai.github.io · GitHub

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
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Artifici.ai – L'intelligence artificielle au service de vos communautés</title>
  <meta name="description"
    content="Artifici conçoit Commently et offre des services‑conseil en NLP pour transformer les interactions de vos communautés en décisions concrètes." />
  <!-- Canonical : évite le contenu dupliqué -->
  <link rel="canonical" href="https://artifici.ai/">

  <!-- Open Graph (partage Facebook, LinkedIn, etc.) -->
  <meta property="og:locale" content="fr_CA">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Artifici.ai – L'intelligence artificielle au service de vos communautés">
  <meta property="og:description"
    content="Artifici conçoit Commently et offre des services d’IA pour transformer les interactions de vos communautés en décisions concrètes.">
  <meta property="og:url" content="https://artifici.ai/">
  <meta property="og:site_name" content="Artifici.ai">
  <meta property="og:image" content="https://artifici.ai/img/og-cover.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Aperçu visuel d’Artifici.ai et de Commently">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Artifici.ai – L'intelligence artificielle au service de vos communautés">
  <meta name="twitter:description"
    content="Artifici conçoit Commently et offre des services d’IA pour transformer les interactions de vos communautés en décisions concrètes.">
  <meta name="twitter:image" content="https://artifici.ai/img/og-cover.jpg">

  <!-- Progressive Web App / couleurs navigateur -->
  <meta name="theme-color" content="#4F46E5">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="manifest" href="/site.webmanifest">

  <!-- Données structurées Schema.org -->
  <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Artifici.ai",
  "url": "https://artifici.ai",
  "logo": "https://artifici.ai/img/artifici_noir-300x62.png",
  "description": "Plateforme SaaS Commently et services d’IA qui transforment les échanges communautaires en décisions exploitables.",
  "sameAs": [
    "https://www.linkedin.com/company/artificiai",
    "https://twitter.com/ArtificiAI"
  ]
}
</script>

  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', 'ui-sans-serif', 'system-ui'],
          },
          colors: {
            primary: {
              DEFAULT: '#206dba',
              50: '#e5f0fb',
              100: '#c9e0f7',
              200: '#9fc9f0',
              300: '#74b2e8',
              400: '#4b99dd',
              500: '#206dba',
              600: '#1c60a5',
              700: '#174f88',
              800: '#123f6b',
              900: '#0d2f4f',
            },
          },
        },
      },
    };
  </script>
  <script defer>
    // thème clair / sombre
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark');
    }
    function toggleTheme() {
      document.documentElement.classList.toggle('dark');
      localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
    }
  </script>
</head>

<body class="antialiased bg-white dark:bg-primary-900 text-primary-900 dark:text-primary-50">
  <!-- Header -->
  <header
    class="fixed inset-x-0 top-0 z-50 backdrop-blur bg-white/70 dark:bg-primary-900/70 border-b border-primary-200 dark:border-primary-800">
    <div class="max-w-7xl mx-auto flex items-center justify-between px-6 py-4">
      <a href="#" class="text-xl font-extrabold tracking-tight">
        <!-- Logo clair (affiché en mode light) -->
        <img src="img/artifici_noir-300x62.png" alt="Artifici.ai" width="150" height="31" class="block dark:hidden">

        <!-- Logo foncé (affiché en mode dark) -->
        <img src="img/artifici_blanc-300x62.png" alt="Artifici.ai" width="150" height="31" class="hidden dark:block">
      </a>
      <nav class="hidden md:flex space-x-8 text-sm font-medium">
        <a href="#entreprise" class="hover:text-primary-500">L’entreprise</a>
        <a href="#produit" class="hover:text-primary-500">Projet</a>
        <a href="#services" class="hover:text-primary-500">Services</a>
        <a href="#equipe" class="hover:text-primary-500">L’équipe</a>
        <a href="#partenaires" class="hover:text-primary-500">Partenaires</a>
        <a href="#contact" class="hover:text-primary-500">Contact</a>
      </nav>
      <div class="flex items-center space-x-4">
        <button onclick="toggleTheme()" aria-label="Basculer le thème"
          class="p-2 rounded-full hover:bg-primary-100 dark:hover:bg-primary-800 transition">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 stroke-current" fill="none" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 3v1m0 16v1m9-9h1M3 12H2m15.364-6.364l-.707.707M6.343 17.657l-.707.707M17.657 17.657l-.707-.707M6.343 6.343l-.707-.707M12 5a7 7 0 000 14 7 7 0 000-14z" />
          </svg>
        </button>
        <button id="mobile-btn" class="md:hidden p-2 rounded-lg hover:bg-primary-100 dark:hover:bg-primary-800"
          aria-label="Menu">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-current" fill="none" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
          </svg>
        </button>
      </div>
    </div>
    <div id="mobile-menu" class="hidden md:hidden flex-col space-y-4 px-6 pb-6 text-sm font-medium">
      <a href="#entreprise" class="block">L’entreprise</a>
      <a href="#produit" class="block">Produit</a>
      <a href="#services" class="block">Services</a>
      <a href="#equipe" class="block">L’équipe</a>
      <a href="#partenaires" class="block">Partenaires</a>
      <a href="#contact" class="block">Contact</a>
    </div>
    <script>
      const mb = document.getElementById('mobile-btn');
      const mm = document.getElementById('mobile-menu');
      mb.addEventListener('click', () => mm.classList.toggle('hidden'));
    </script>
  </header>

  <main class="pt-24">
    <!-- Hero -->
    <section class="relative overflow-hidden py-24">
      <div class="absolute inset-0 -z-10 select-none">
        <div class="h-full w-full bg-gradient-to-br from-primary-50 to-white dark:from-primary-800 dark:to-primary-900">
        </div>
        <div
          class="absolute -top-32 -left-32 h-96 w-96 bg-primary-100 dark:bg-primary-900 opacity-20 rounded-full blur-3xl">
        </div>
      </div>
      <div class="max-w-3xl mx-auto text-center px-6">
        <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight leading-tight">
          Analysez vos <span class="text-amber-500">espaces numériques</span>.<br>
          Découvrez les <span class="underline decoration-amber-500">opinions</span> de vos équipes.
        </h1>
        <p class="mt-8 text-lg md:text-2xl text-primary-600 dark:text-primary-300">Notre plateforme convertit chaque
          commentaire en insight mesurable pour que vos décisions résonnent avec votre mission.</p>
        <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
          <a href="#produit"
            class="px-8 py-3 rounded-lg bg-primary-500 text-white font-medium hover:bg-primary-600 transition shadow-lg">Découvrir
            notre projet</a>
          <a href="#contact"
            class="px-8 py-3 rounded-lg border border-primary-300 dark:border-primary-700 hover:bg-primary-100 dark:hover:bg-primary-800 transition">Contactez‑nous</a>
        </div>
      </div>
    </section>

    <!-- Entreprise -->
    <section id="entreprise" class="max-w-4xl mx-auto px-6 py-24">
      <h2 class="text-3xl font-bold mb-6 text-center">L’entreprise</h2>
      <p class="text-lg text-primary-700 dark:text-primary-300 leading-relaxed text-center">
        Spécialisée en traitement du langage naturel, <strong>Artifici</strong> transforme et met en valeur les données
        de vos espaces numériques afin d’éclairer vos prises de décisions. Nous croyons qu’une compréhension fine des
        conversations en ligne est le moteur d’une stratégie durable et inclusive.
      </p>
    </section>

    <!-- Produit -->
    <section id="produit" class="bg-primary-50 dark:bg-primary-800 py-24">
      <div class="max-w-7xl mx-auto px-6">
        <div class="flex items-center justify-center gap-4 mb-8">
          <h2 class="text-3xl font-bold">Notre projet</h2>
        </div>
        <div class="flex items-center justify-center gap-4 mb-8">
          <h2 class="text-3xl font-bold text-primary-700 dark:text-primary-300">Mettre en oeuvre d'une plateforme
            collaborative d'aide à la décision.</h2>
        </div>

        <div class="grid md:grid-cols-3 gap-10 mb-12">
          <!-- carte 1 -->
          <div
            class="group border dark:border-primary-700 p-8 rounded-2xl shadow-sm hover:shadow-md transition bg-white dark:bg-primary-900">
            <h3 class="text-xl font-semibold mb-2 group-hover:text-primary-500">Performance décisionnelle accrue
            </h3>
            <ul class="list-disc list-inside text-primary-600 dark:text-primary-400 space-y-1">
              <li>Amélioration, accroissement, efficience de la performance décisionnelle</li>
              <li>Réduction du temps en réunion</li>
              <li>Suivi des décisions en continu</li>
            </ul>
          </div>
          <!-- carte 2 -->
          <div
            class="group border dark:border-primary-700 p-8 rounded-2xl shadow-sm hover:shadow-md transition bg-white dark:bg-primary-900">
            <h3 class="text-xl font-semibold mb-2 group-hover:text-primary-500">Intelligence collective valorisée
            </h3>
            <ul class="list-disc list-inside text-primary-600 dark:text-primary-400 space-y-1">
              <li>Mettre en valeur l’intelligence collaborative de vos équipes</li>
              <li>Rapprochement des paliers de décision</li>
              <li>Transparence du processus décisionnel</li>
            </ul>
          </div>
          <!-- carte 3 -->
          <div
            class="group border dark:border-primary-700 p-8 rounded-2xl shadow-sm hover:shadow-md transition bg-white dark:bg-primary-900">
            <h3 class="text-xl font-semibold mb-2 group-hover:text-primary-500">Décisions traçables et historiques
            </h3>
            <ul class="list-disc list-inside text-primary-600 dark:text-primary-400 space-y-1">
              <li>Traçabilité des décisions</li>
              <li>Historisation des décisions</li>
            </ul>
          </div>
        </div>

        <!-- Bouton vers le formulaire -->
        <div class="text-center">
          <a href="https://forms.office.com/Pages/ResponsePage.aspx?id=WnCDb8h7N0iDQf3lxLt-ZJmnwjJlQ-FKgwnmMO-pVm9UREtBUklOVjJONjFDWlQxVjNURUZFWDVPTS4u"
            target="_blank" rel="noopener noreferrer"
            class="px-8 py-3 rounded-lg bg-primary-500 text-white font-medium hover:bg-primary-600 transition shadow-lg">
            En apprendre plus sur notre projet
          </a>
        </div>
      </div>
    </section>

    <!-- Services conseil NLP -->
    <section id="services" class="py-24">
      <div class="max-w-7xl mx-auto px-6">
        <h2 class="text-3xl font-bold text-center mb-4">Services‑conseil en IA &amp; NLP</h2>
        <p class="max-w-2xl mx-auto text-center text-lg text-primary-700 dark:text-primary-300 mb-12">De l’audit de vos
          données textuelles jusqu’au déploiement, notre équipe vous accompagne à chaque étape pour maximiser la valeur
          de vos conversations.</p>
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
          <div
            class="group p-6 rounded-2xl bg-white dark:bg-primary-900 border dark:border-primary-700 shadow-sm hover:shadow-md transition">
            <h3 class="text-xl font-semibold mb-2 group-hover:text-primary-500">Audit &amp; diagnostic</h3>
            <p class="text-sm text-primary-600 dark:text-primary-400">Cartographie de vos sources de données, évaluation
              qualité linguistique, identification des cas d’usage à fort ROI.</p>
          </div>
          <div
            class="group p-6 rounded-2xl bg-white dark:bg-primary-900 border dark:border-primary-700 shadow-sm hover:shadow-md transition">
            <h3 class="text-xl font-semibold mb-2 group-hover:text-primary-500">Prototypes rapides</h3>
            <p class="text-sm text-primary-600 dark:text-primary-400">POC en quelques semaines : extraction d’entités,
              classification, sentiment, RAG.</p>
          </div>
          <div
            class="group p-6 rounded-2xl bg-white dark:bg-primary-900 border dark:border-primary-700 shadow-sm hover:shadow-md transition">
            <h3 class="text-xl font-semibold mb-2 group-hover:text-primary-500">Fine‑tuning &amp; MLOps</h3>
            <p class="text-sm text-primary-600 dark:text-primary-400">Modèles sur mesure, optimisation GPU/CPU et
              déploiement sécurisé cloud ou on‑prem.</p>
          </div>
          <div
            class="group p-6 rounded-2xl bg-white dark:bg-primary-900 border dark:border-primary-700 shadow-sm hover:shadow-md transition">
            <h3 class="text-xl font-semibold mb-2 group-hover:text-primary-500">Formation &amp; transfert</h3>
            <p class="text-sm text-primary-600 dark:text-primary-400">Ateliers pratiques pour autonomiser vos équipes
              data, dev et métiers.</p>
          </div>
        </div>
        <div class="text-center">
          <a href="#contact"
            class="inline-block px-8 py-3 rounded-lg bg-primary-500 text-white font-medium hover:bg-primary-600 transition shadow-lg">Discutons
            de votre projet NLP</a>
        </div>
      </div>
    </section>

    <!-- Équipe -->
    <section id="equipe" class="bg-primary-50 dark:bg-primary-800 py-24">
      <h2 class="text-3xl font-bold text-center mb-12">L’équipe</h2>
      <!-- Cofondateurs -->
      <div class="mb-16">
        <h3 class="text-2xl font-semibold mb-4 text-primary-600 dark:text-primary-300 text-center">Cofondateurs</h3>
        <p class="max-w-3xl mx-auto text-center text-lg text-primary-700 dark:text-primary-300">
          Trois passionnés d’intelligence artificielle et d’entrepreneuriat portent la vision d’Artifici : Mettre en avant plan ce que les gens ont en commun.
        </p>
        <div class="mt-8 grid grid-cols-1 sm:grid-cols-3 gap-6 max-w-4xl mx-auto text-center">
          <div>
            <h4 class="text-xl font-bold text-primary-800 dark:text-primary-100">Francis Couture</h4>
            <p class="text-primary-600 dark:text-primary-300">Cofondateur, PDG</p>
          </div>
          <div>
            <h4 class="text-xl font-bold text-primary-800 dark:text-primary-100">Mikaël Gélinas, M. Sc.</h4>
            <p class="text-primary-600 dark:text-primary-300">Cofondateur, Scientifique de données</p>
          </div>
          <div>
            <h4 class="text-xl font-bold text-primary-800 dark:text-primary-100">Olivier Bloch, M. Sc.</h4>
            <p class="text-primary-600 dark:text-primary-300">Cofondateur, Scientifique de données</p>
          </div>
        </div>
      </div>

      <!-- Équipe multidisciplinaire -->
      <div class="mb-12">
        <h3 class="text-2xl font-semibold mb-4 text-primary-600 dark:text-primary-300 text-center">Notre équipe
          multidisciplinaire</h3>
        <p class="max-w-4xl mx-auto text-center text-lg text-primary-700 dark:text-primary-300">Ingénieurs logiciel,
          scientifiques des données, spécialistes UX, créatifs marketing et experts cloud travaillent main dans la main
          pour transformer vos données en insights actionnables.</p>
      </div>
      <div class="text-center">
        <a href="#contact"
          class="inline-block px-8 py-3 rounded-lg bg-primary-500 text-white font-medium hover:bg-primary-600 transition shadow-lg">Envoyez
          votre candidature spontanée</a>
      </div>
    </section>

    <!-- Partenaires -->
    <section id="partenaires" class="max-w-7xl mx-auto px-6 py-24">
      <div class="max-w-6xl mx-auto px-6">
        <h2 class="text-3xl font-bold text-center mb-12 text-primary-800 dark:text-white">Nos partenaires</h2>
        <div
          class="grid sm:grid-cols-2 md:grid-cols-4 gap-8 text-center text-lg font-medium text-primary-700 dark:text-primary-200">

          <div>
            <div class="font-semibold">Impakt Scientifik</div>
            <div class="text-sm font-normal">Graphisme & illustration scientifique</div>
          </div>

          <div>
            <div class="font-semibold">Nordet &amp; co</div>
            <div class="text-sm font-normal">Stratégie, design et marketing</div>
          </div>

          <div>
            <div class="font-semibold">Neuraxio</div>
            <div class="text-sm font-normal">Services d’intelligence artificielle</div>
          </div>

          <div>
            <div class="font-semibold">Mitacs</div>
            <div class="text-sm font-normal">Programme Accélération</div>
          </div>

        </div>
      </div>
    </section>


    <!-- Contact -->

    <section id="contact" class="bg-primary-50 dark:bg-primary-800 py-24">
      <div class="max-w-4xl mx-auto px-6 text-center">
        <h2 class="text-3xl font-bold mb-6 text-primary-800 dark:text-white">Contactez-nous</h2>
        <p class="text-lg text-primary-700 dark:text-primary-300 mb-8">
          Une question, une demande ou un projet à nous confier ? Cliquez ci-dessous pour accéder à notre formulaire.
        </p>
        <a href="https://forms.office.com/Pages/ResponsePage.aspx?id=WnCDb8h7N0iDQf3lxLt-ZJmnwjJlQ-FKgwnmMO-pVm9UREtBUklOVjJONjFDWlQxVjNURUZFWDVPTS4u"
          target="_blank" rel="noopener noreferrer"
          class="px-8 py-3 rounded-lg bg-primary-500 text-white font-medium hover:bg-primary-600 transition shadow-lg">
          Remplir le formulaire
        </a>
      </div>
    </section>

  </main>

  <!-- Footer -->
  <footer
    class="py-8 border-t border-primary-200 dark:border-primary-800 text-center text-sm text-primary-500 dark:text-primary-600">
    © 2025 Artifici. Tous droits réservés.
  </footer>
</body>

</html>