<!DOCTYPE html>
<html class="light" lang="fr">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>NéoCompute - Innovate. Connect. Future</title>
<meta name="description"
content="NéoCompute accompagne la transition numérique des PME avec des solutions logicielles et web sur-mesure, performantes et ultra-sécurisées. Découvrez notre expertise." />
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
rel="stylesheet" />
<script id="tailwind-config">
tailwind.config = {
theme: {
extend: {
"colors": {
"primary": "#004ced",
"secondary": "#a33800",
"tertiary": "#620bd3",
"surface": "#faf8ff"
}
}
}
}
</script>
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
scroll-behavior: smooth;
}
.cookie-banner {
display: none;
}
.cookie-banner.active {
display: flex;
}
/* Reader Mode */
#reader-toggle {
position: fixed;
bottom: 1.5rem;
left: 1.5rem;
z-index: 100;
width: 48px;
height: 48px;
border-radius: 999px;
background: #004ced;
color: #fff;
border: none;
font-size: 1.25rem;
font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0, 76, 237, .3);
transition: all .2s;
display: flex;
align-items: center;
justify-content: center;
}
#reader-toggle:hover {
background: #0035b3;
transform: scale(1.05);
}
#reader-toggle.active {
background: #131b2e;
}
body.reader-mode nav,
body.reader-mode footer,
body.reader-mode .cookie-banner,
body.reader-mode form,
body.reader-mode [data-fs-success],
body.reader-mode [data-fs-error],
body.reader-mode #reader-toggle:not(.active) {
display: none !important;
}
body.reader-mode #reader-toggle.active {
display: flex !important;
}
body.reader-mode .max-w-7xl,
body.reader-mode .max-w-4xl,
body.reader-mode .max-w-3xl {
max-width: 720px !important;
}
body.reader-mode main {
padding-top: 0 !important;
}
body.reader-mode section {
background: transparent !important;
color: #131b2e !important;
}
body.reader-mode section#equipe {
background: transparent !important;
color: #131b2e !important;
}
body.reader-mode section#equipe .text-slate-400 {
color: #64748b !important;
}
body.reader-mode section#equipe h3 {
color: #131b2e !important;
}
body.reader-mode section#equipe p {
color: #64748b !important;
}
body.reader-mode img {
display: none !important;
}
body.reader-mode .grid {
display: block !important;
}
body.reader-mode .grid>div {
border: none !important;
box-shadow: none !important;
padding: 1rem 0 !important;
border-bottom: 1px solid #e2e8f0 !important;
border-radius: 0 !important;
}
body.reader-mode .grid>div:last-child {
border-bottom: none !important;
}
body.reader-mode .flex.gap-4 a {
display: none !important;
}
body.reader-mode .material-symbols-outlined {
display: none !important;
}
body.reader-mode h1,
body.reader-mode h2 {
text-align: left !important;
}
body.reader-mode h1 {
font-size: 2rem !important;
}
body.reader-mode h2 {
font-size: 1.5rem !important;
}
body.reader-mode p,
body.reader-mode li {
font-size: 1.125rem !important;
line-height: 1.8 !important;
}
body.reader-mode .w-32.h-32 {
display: none !important;
}
body.reader-mode section {
padding: 2rem 0 !important;
}
body.reader-mode .bg-slate-50 {
background: transparent !important;
}
</style>
</head>
<body class="bg-white text-[#131b2e] antialiased">
<nav class="fixed top-0 w-full z-50 bg-white/90 backdrop-blur-md border-b border-slate-100">
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
<a class="text-2xl font-black tracking-tighter text-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-200 rounded-lg p-1"
href="#">NÉOCOMPUTE</a>
<div class="hidden md:flex items-center gap-8">
<a class="font-semibold text-slate-600 hover:text-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-200 rounded-lg p-1"
href="#histoire">Histoire</a>
<a class="font-semibold text-slate-600 hover:text-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-200 rounded-lg p-1"
href="#solutions">Solutions</a>
<a class="font-semibold text-slate-600 hover:text-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-200 rounded-lg p-1"
href="#equipe">L'Équipe</a>
<a class="font-semibold text-slate-600 hover:text-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-200 rounded-lg p-1"
href="#contact">Contact</a>
</div>
<div class="flex items-center gap-4">
<a href="en/index.html"
class="flex items-center gap-1 text-sm font-bold text-slate-500 hover:text-blue-600 transition-colors focus:outline-none focus:ring-4 focus:ring-blue-200 rounded-lg p-1"
title="Switch to English">
<span class="material-symbols-outlined text-base">language</span>
EN
</a>
<a href="#contact"
class="bg-blue-600 text-white px-6 py-2.5 rounded-full font-semibold hover:bg-blue-700 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300">Démarrer</a>
</div>
</div>
</nav>
<main class="pt-24">
<section class="max-w-7xl mx-auto px-6 py-20 flex flex-col md:flex-row items-center gap-12">
<div class="flex-1">
<h1 class="text-5xl md:text-6xl font-extrabold leading-tight mb-6" tabindex="0">
L'innovation <br />
<span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">au service
des PME.</span>
</h1>
<p class="text-lg text-slate-600 mb-8" tabindex="0">NéoCompute accompagne votre
transition numérique avec des solutions sur-mesure et une sécurité sans compromis.</p>
<div class="flex gap-4">
<a href="#solutions"
class="bg-blue-600 text-white px-8 py-4 rounded-full font-bold shadow-lg hover:bg-blue-700 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300">Nos
Solutions</a>
</div>
</div>
<div class="flex-1">
<figure class="w-full"></figure>
<img src="imageslam.webp" class="rounded-3xl shadow-2xl border border-slate-100" alt="" tabindex="0">
<figcaption class="mt-4 text-sm text-slate-500 italic text-center">
Représentation de l'infrastructure sécurisée développée par NéoCompute pour la protection de
vos données.
</figcaption>
</figure>
</div>
</section>
<section id="histoire" class="bg-slate-50 py-24">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl font-bold mb-6 focus:outline-none focus:ring-4 focus:ring-blue-200 rounded-lg inline-block px-2"
tabindex="0">Notre Histoire</h2>
<p class="text-slate-600 text-lg leading-relaxed focus:outline-none focus:ring-4 focus:ring-blue-200 rounded-lg p-2"
tabindex="0">
Créée en 2026 par des ingénieurs passionnés, NéoCompute a grandi en accompagnant des PME vers la
transformation numérique grâce à des solutions sur-mesure, des pratiques Agile et un engagement fort
pour la sécurité et l'innovation responsable.
</p>
</div>
</section>
<section id="solutions" class="py-24 max-w-7xl mx-auto px-6">
<h2 class="text-3xl font-bold mb-12 text-center focus:outline-none focus:ring-4 focus:ring-blue-200 rounded-lg inline-block px-2"
tabindex="0">Nos Fonctionnalités Proposées</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div tabindex="0"
class="p-8 border border-slate-100 rounded-2xl hover:shadow-xl transition-all focus:outline-none focus:ring-4 focus:ring-blue-400">
<span class="material-symbols-outlined text-blue-600 text-4xl mb-4">settings_suggest</span>
<h3 class="font-bold text-xl mb-2">Sur-mesure</h3>
<p class="text-slate-500 text-sm">Développement d'applications web et logicielles adaptées à vos
besoins.</p>
</div>
<div tabindex="0"
class="p-8 border border-slate-100 rounded-2xl hover:shadow-xl transition-all focus:outline-none focus:ring-4 focus:ring-blue-400">
<span class="material-symbols-outlined text-blue-600 text-4xl mb-4">shield</span>
<h3 class="font-bold text-xl mb-2">Sécurité</h3>
<p class="text-slate-500 text-sm">Sécurisation des données et des accès utilisateurs.</p>
</div>
<div tabindex="0"
class="p-8 border border-slate-100 rounded-2xl hover:shadow-xl transition-all focus:outline-none focus:ring-4 focus:ring-blue-400">
<span class="material-symbols-outlined text-blue-600 text-4xl mb-4">speed</span>
<h3 class="font-bold text-xl mb-2">Performance</h3>
<p class="text-slate-500 text-sm">Optimisation des performances et tests rigoureux.</p>
</div>
<div tabindex="0"
class="p-8 border border-slate-100 rounded-2xl hover:shadow-xl transition-all focus:outline-none focus:ring-4 focus:ring-blue-400">
<span class="material-symbols-outlined text-blue-600 text-4xl mb-4">support_agent</span>
<h3 class="font-bold text-xl mb-2">Accompagnement</h3>
<p class="text-slate-500 text-sm">Support technique et maintenance continue.</p>
</div>
</div>
</section>
<section id="equipe" class="bg-slate-900 text-white py-24">
<div class="max-w-7xl mx-auto px-6 text-center">
<h2 class="text-3xl font-bold mb-4 focus:outline-none focus:ring-4 focus:ring-blue-400 rounded-lg inline-block px-2"
tabindex="0">L'Expertise Humaine</h2>
<p class="text-slate-400 mb-12" tabindex="0">Trois développeurs passionnés à votre service.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
<div tabindex="0" class="focus:outline-none focus:ring-4 focus:ring-blue-500 rounded-2xl p-4">
<div class="w-32 h-32 bg-blue-600 rounded-full mx-auto mb-4 flex items-center justify-center">
<span class="material-symbols-outlined text-4xl">person</span>
</div>
<h3 class="font-bold">Enzo .G</h3>
<p class="text-blue-400">Back-end Expert</p>
</div>
<div tabindex="0" class="focus:outline-none focus:ring-4 focus:ring-purple-500 rounded-2xl p-4">
<div class="w-32 h-32 bg-purple-600 rounded-full mx-auto mb-4 flex items-center justify-center">
<span class="material-symbols-outlined text-4xl">person_4</span>
</div>
<h3 class="font-bold">Camille .S</h3>
<p class="text-purple-400">UI/UX & Front-end</p>
</div>
<div tabindex="0" class="focus:outline-none focus:ring-4 focus:ring-orange-500 rounded-2xl p-4">
<div class="w-32 h-32 bg-orange-600 rounded-full mx-auto mb-4 flex items-center justify-center">
<span class="material-symbols-outlined text-4xl">person</span>
</div>
<h3 class="font-bold">Mathis 0</h3>
<p class="text-orange-400">Full-stack Dev</p>
</div>
</div>
</div>
</section>
<section id="contact" class="py-24 max-w-3xl mx-auto px-6 text-center">
<h2 class="text-3xl font-bold mb-8 focus:outline-none focus:ring-4 focus:ring-blue-200 rounded-lg inline-block px-2"
tabindex="0">Prêt à transformer votre entreprise ?</h2>
<div data-fs-success
class="bg-green-100 border border-green-300 text-green-800 p-4 rounded-xl mb-6 font-semibold"
tabindex="-1">
Merci ! Votre demande a bien été envoyée. Nous vous contacterons rapidement.
</div>
<div data-fs-error class="bg-red-100 border border-red-300 text-red-800 p-4 rounded-xl mb-6 font-semibold"
tabindex="-1"></div>
<form id="my-form" class="flex flex-col gap-4 text-left">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<input type="text" name="prenom" placeholder="Votre Prénom" maxlength="30"
class="p-4 rounded-xl border border-slate-200 w-full focus:outline-none focus:ring-4 focus:ring-blue-400"
data-fs-field required>
<span data-fs-error="prenom" class="text-red-500 text-sm mt-1 block"></span>
</div>
<div>
<input type="text" name="nom" placeholder="Votre Nom" maxlength="50"
class="p-4 rounded-xl border border-slate-200 w-full focus:outline-none focus:ring-4 focus:ring-blue-400"
data-fs-field required>
<span data-fs-error="nom" class="text-red-500 text-sm mt-1 block"></span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<input type="email" name="email" placeholder="Votre Email"
class="p-4 rounded-xl border border-slate-200 w-full focus:outline-none focus:ring-4 focus:ring-blue-400"
data-fs-field required>
<span data-fs-error="email" class="text-red-500 text-sm mt-1 block"></span>
</div>
<div>
<input type="tel" name="telephone" placeholder="Votre Téléphone" maxlength="20"
class="p-4 rounded-xl border border-slate-200 w-full focus:outline-none focus:ring-4 focus:ring-blue-400"
data-fs-field required>
<span data-fs-error="telephone" class="text-red-500 text-sm mt-1 block"></span>
</div>
</div>
<div>
<input type="text" name="entreprise" placeholder="Votre Entreprise" maxlength="60"
class="p-4 rounded-xl border border-slate-200 w-full focus:outline-none focus:ring-4 focus:ring-blue-400"
data-fs-field>
<span data-fs-error="entreprise" class="text-red-500 text-sm mt-1 block"></span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<select name="type_projet"
class="p-4 rounded-xl border border-slate-200 text-slate-500 bg-white w-full focus:outline-none focus:ring-4 focus:ring-blue-400"
data-fs-field required>
<option value="" disabled selected>Type de projet</option>
<option value="web">Développement Web</option>
<option value="logiciel">Logiciel Sur-mesure</option>
<option value="securite">Audit de Sécurité</option>
<option value="autre">Autre</option>
</select>
<span data-fs-error="type_projet" class="text-red-500 text-sm mt-1 block"></span>
</div>
<div>
<input type="text" name="budget" placeholder="Budget approximatif"
class="p-4 rounded-xl border border-slate-200 w-full focus:outline-none focus:ring-4 focus:ring-blue-400"
data-fs-field>
<span data-fs-error="budget" class="text-red-500 text-sm mt-1 block"></span>
</div>
<div>
<input type="text" name="delai" placeholder="Délai souhaité"
class="p-4 rounded-xl border border-slate-200 w-full focus:outline-none focus:ring-4 focus:ring-blue-400"
data-fs-field>
<span data-fs-error="delai" class="text-red-500 text-sm mt-1 block"></span>
</div>
<div>
<input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
</div>
</div>
<div>
<textarea name="message_projet" placeholder="Votre Projet" maxlength="1500"
class="p-4 rounded-xl border border-slate-200 h-32 w-full resize-none focus:outline-none focus:ring-4 focus:ring-blue-400"
data-fs-field required></textarea>
<span data-fs-error="message_projet" class="text-red-500 text-sm mt-1 block"></span>
</div>
<button type="submit" data-fs-submit-btn
class="bg-blue-600 text-white p-4 rounded-xl font-bold hover:bg-blue-700 transition-colors focus:outline-none focus:ring-4 focus:ring-blue-800 disabled:opacity-50 disabled:cursor-not-allowed">Envoyer
la demande</button>
</form>
</section>
</main>
<footer class="bg-white border-t border-slate-100 py-12">
<div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="text-slate-500 text-sm" tabindex="0">© 2026 NÉOCOMPUTE. Innovate.
Connect. Future.</div>
<div class="flex gap-8">
<a href="codeslam/mentionslegale.html"
class="text-sm font-semibold text-slate-600 hover:text-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-200 rounded-lg p-1">Mentions
Légales</a>
<a href="codeslam/confidentialite.html"
class="text-sm font-semibold text-slate-600 hover:text-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-200 rounded-lg p-1">Confidentialité</a>
</div>
</div>
</footer>
<script>
window.formspree = window.formspree || function () { (formspree.q = formspree.q || []).push(arguments); };
formspree('initForm', { formElement: '#my-form', formId: 'xojyggky' });
</script>
<script src="https://unpkg.com/@formspree/ajax@1" defer></script>
<!-- Cookie Banner -->
<div
class="cookie-banner active fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-slate-100 p-6 shadow-2xl">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 w-full">
<p class="text-sm text-slate-600">Ce site utilise des cookies pour améliorer votre expérience. En acceptant,
vous consentez à leur utilisation. Vous pouvez choisir de les refuser.</p>
<div class="flex gap-3">
<button id="refuse-cookies"
class="px-6 py-2.5 rounded-full font-semibold border border-slate-200 text-slate-600 hover:bg-slate-50 transition-all">Refuser</button>
<button id="accept-cookies"
class="px-6 py-2.5 rounded-full font-semibold bg-blue-600 text-white hover:bg-blue-700 transition-all">Accepter</button>
</div>
</div>
</div>
<button id="reader-toggle" aria-label="Mode lecture">Aa</button>
<script>
document.getElementById('accept-cookies').addEventListener('click', () => {
document.querySelectorAll('.cookie-banner').forEach(b => b.classList.remove('active'));
});
document.getElementById('refuse-cookies').addEventListener('click', () => {
document.querySelectorAll('.cookie-banner').forEach(b => b.classList.remove('active'));
});
// Reader Mode
const readerBtn = document.getElementById('reader-toggle');
readerBtn.addEventListener('click', () => {
document.body.classList.toggle('reader-mode');
readerBtn.classList.toggle('active');
readerBtn.textContent = document.body.classList.contains('reader-mode') ? '×' : 'Aa';
});
</script>
</body>
</html>
