Bootstrap 5
Template
Creative Studio
Portfolio
Masonry
Template pour studio créatif avec mise en page asymétrique, animations au scroll et galerie masonry. Parfait pour portfolios.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template Agency 02 | AngularForAll</title>
<meta name="description" content="MNXDEV - Agence d'expertise en transformation digitale, intelligence artificielle et développement sur-mesure. Accompagnement end-to-end de votre révolution numérique.">
<!-- Bootstrap 5 + Icons + Google Fonts + Swiper JS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: #ffffff;
color: #1a1a2e;
overflow-x: hidden;
}
/* MNXDEV Color Scheme - Professional Dark/Light */
:root {
--mnx-primary: #2563eb;
--mnx-primary-dark: #1d4ed8;
--mnx-secondary: #0f172a;
--mnx-accent: #3b82f6;
--mnx-gray-light: #f8fafc;
--mnx-gray: #64748b;
}
/* Skip link */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--mnx-primary);
color: white;
padding: 8px 16px;
z-index: 9999;
text-decoration: none;
font-weight: 600;
transition: top 0.2s;
}
.skip-link:focus { top: 0; }
/* Navbar */
.navbar {
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(12px);
box-shadow: 0 2px 20px rgba(0,0,0,0.03);
padding: 0.8rem 0;
transition: all 0.3s;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.navbar-brand {
font-weight: 800;
font-size: 1.8rem;
color: var(--mnx-secondary);
letter-spacing: -0.02em;
}
.navbar-brand span {
color: var(--mnx-primary);
}
.nav-link {
font-weight: 500;
color: #334155 !important;
margin: 0 0.3rem;
transition: 0.2s;
position: relative;
}
.nav-link:hover, .nav-link.active {
color: var(--mnx-primary) !important;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
width: 0;
height: 2px;
background: var(--mnx-primary);
transition: 0.3s;
transform: translateX(-50%);
}
.nav-link:hover::after, .nav-link.active::after { width: 60%; }
.btn-primary-custom {
background: var(--mnx-primary);
border: none;
color: white;
font-weight: 600;
padding: 0.6rem 1.8rem;
border-radius: 40px;
transition: all 0.3s;
box-shadow: 0 4px 14px rgba(37,99,235,0.25);
}
.btn-primary-custom:hover {
background: var(--mnx-primary-dark);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(37,99,235,0.35);
color: white;
}
.btn-outline-custom {
border: 2px solid var(--mnx-primary);
background: transparent;
color: var(--mnx-primary);
font-weight: 600;
padding: 0.6rem 1.8rem;
border-radius: 40px;
transition: 0.3s;
}
.btn-outline-custom:hover {
background: var(--mnx-primary);
color: white;
transform: translateY(-2px);
}
/* Hero Section */
.hero-section {
padding: 140px 0 90px;
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
}
.badge-mnx {
background: #e0e7ff;
color: var(--mnx-primary);
border-radius: 60px;
padding: 6px 18px;
font-size: 0.8rem;
font-weight: 600;
display: inline-block;
margin-bottom: 1rem;
}
.section-title {
font-weight: 800;
font-size: 2.4rem;
letter-spacing: -0.02em;
color: var(--mnx-secondary);
}
.section-subtitle {
color: var(--mnx-gray);
font-size: 1.1rem;
}
/* Cards */
.service-card, .blog-card {
background: white;
border: 1px solid #e2e8f0;
border-radius: 24px;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.service-card:hover, .blog-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 30px -12px rgba(0,0,0,0.1);
border-color: var(--mnx-primary);
}
.service-icon {
width: 60px;
height: 60px;
background: #eef2ff;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: var(--mnx-primary);
}
/* Portfolio */
.portfolio-item {
position: relative;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
}
.portfolio-img {
width: 100%;
height: 260px;
object-fit: cover;
transition: transform 0.5s;
}
.portfolio-item:hover .portfolio-img {
transform: scale(1.05);
}
.portfolio-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(0deg, rgba(15,23,42,0.95), transparent);
padding: 25px;
transform: translateY(100%);
transition: 0.4s;
}
.portfolio-item:hover .portfolio-overlay {
transform: translateY(0);
}
/* Testimonials Swiper */
.testimonial-swiper {
padding: 20px 0 50px;
}
.testimonial-card {
background: white;
border: 1px solid #e2e8f0;
border-radius: 24px;
padding: 2rem;
margin: 10px;
box-shadow: 0 8px 20px rgba(0,0,0,0.02);
}
.swiper-pagination-bullet-active {
background: var(--mnx-primary);
}
.swiper-button-next, .swiper-button-prev {
color: var(--mnx-primary);
}
/* Form */
.form-control-custom {
border-radius: 40px;
padding: 12px 20px;
border: 1px solid #e2e8f0;
background: white;
}
.form-control-custom:focus {
border-color: var(--mnx-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
/* Chat Popup */
.chat-popup {
position: fixed;
bottom: 110px;
right: 30px;
width: 360px;
max-width: calc(100vw - 40px);
background: white;
border-radius: 24px;
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
z-index: 2000;
display: none;
flex-direction: column;
overflow: hidden;
animation: chatFadeIn 0.3s ease;
border: 1px solid #e2e8f0;
}
@keyframes chatFadeIn {
from { opacity: 0; transform: translateY(20px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-header {
background: var(--mnx-secondary);
padding: 15px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.chat-header h5 { margin: 0; font-weight: 600; }
.chat-close { background: none; border: none; color: white; font-size: 24px; cursor: pointer; }
.chat-messages { height: 350px; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 12px; background: #f8fafc; }
.message.user .msg-bubble { background: var(--mnx-primary); color: white; }
.message.bot .msg-bubble { background: #e2e8f0; color: #1e293b; }
.msg-bubble { max-width: 80%; padding: 10px 14px; border-radius: 20px; font-size: 13px; }
.chat-input-area { display: flex; padding: 12px; gap: 8px; background: white; border-top: 1px solid #e2e8f0; }
.chat-input { flex: 1; border: 1px solid #e2e8f0; border-radius: 30px; padding: 10px 15px; }
.chat-input:focus { outline: none; border-color: var(--mnx-primary); }
.chat-send { background: var(--mnx-primary); border: none; border-radius: 30px; width: 42px; color: white; transition: 0.2s; }
.chat-send:hover { background: var(--mnx-primary-dark); }
/* Robot Companion */
.robot-companion {
position: fixed;
bottom: 30px;
right: 30px;
width: 65px;
height: 65px;
background: var(--mnx-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1000;
transition: all 0.3s ease;
box-shadow: 0 8px 20px rgba(37,99,235,0.3);
}
.robot-companion:hover { transform: scale(1.08); background: var(--mnx-primary-dark); }
.robot-companion i { font-size: 32px; color: white; }
.section-highlight { animation: sectionPop 0.5s ease; }
@keyframes sectionPop {
0% { transform: scale(0.98); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}
footer { background: var(--mnx-secondary); color: #94a3b8; }
@media (max-width: 768px) {
.hero-section { padding: 110px 0 60px; }
.section-title { font-size: 1.9rem; }
.robot-companion { width: 55px; height: 55px; bottom: 20px; right: 20px; }
.chat-popup { width: 320px; right: 15px; bottom: 95px; }
}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Aller au contenu principal</a>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="#">MNX<span>DEV</span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-label="Menu" style="border:1px solid #e2e8f0;">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 gap-2">
<li class="nav-item"><a class="nav-link" href="#accueil">Accueil</a></li>
<li class="nav-item"><a class="nav-link" href="#about">À propos</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Réalisations</a></li>
<li class="nav-item"><a class="nav-link" href="#testimonials">Avis</a></li>
<li class="nav-item"><a class="nav-link" href="#blog">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
<a href="#contact" class="btn btn-primary-custom ms-lg-3 d-none d-lg-inline-block">Démarrer un projet</a>
</div>
</div>
</nav>
<main id="main-content">
<!-- Hero Section -->
<header id="accueil" class="hero-section">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-6" data-aos="fade-right">
<span class="badge-mnx"><i class="fas fa-chart-line me-2"></i> Transformation digitale & IA</span>
<h1 class="display-4 fw-bold mb-3" style="color: #0f172a;">Accélérez votre <span style="color: #2563eb;">révolution numérique</span></h1>
<p class="lead text-secondary mb-4">MNXDEV accompagne les entreprises dans leur transformation digitale avec des solutions sur-mesure : IA, automatisation, développement web & mobile.</p>
<div class="d-flex flex-wrap gap-3">
<a href="#contact" class="btn btn-primary-custom btn-lg px-4"><i class="fas fa-rocket me-2"></i>Lancer mon projet</a>
<a href="#services" class="btn btn-outline-custom btn-lg px-4"><i class="fas fa-play me-2"></i>Découvrir</a>
</div>
<div class="mt-5 d-flex gap-4 flex-wrap">
<div><i class="fas fa-check-circle text-primary"></i> <strong>+150</strong> projets livrés</div>
<div><i class="fas fa-star text-warning"></i> <strong>98%</strong> satisfaction client</div>
<div><i class="fas fa-headset text-primary"></i> <strong>Support 24/7</strong></div>
</div>
</div>
<div class="col-lg-6 text-center" data-aos="fade-left">
<img src="https://placehold.co/600x500/EEF2FF/2563eb?text=MNXDEV+Digital" alt="MNXDEV transformation digitale" class="img-fluid rounded-4 shadow-lg">
</div>
</div>
</div>
</header>
<!-- About Section -->
<section id="about" class="py-5">
<div class="container py-5">
<div class="row g-5 align-items-center">
<div class="col-lg-6" data-aos="fade-up">
<span class="badge-mnx"><i class="fas fa-building me-1"></i> Notre agence</span>
<h2 class="section-title mb-3">L'expertise digitale au service de votre croissance</h2>
<p class="text-secondary">Fondée par des experts en transformation numérique, MNXDEV allie innovation technologique et stratégie business. Nous concevons des solutions robustes, évolutives et centrées utilisateur.</p>
<div class="row mt-4">
<div class="col-6"><div class="d-flex gap-3 align-items-center"><i class="fas fa-code fs-2 text-primary"></i><div><strong class="fs-4">7+ ans</strong><br>d'expertise</div></div></div>
<div class="col-6"><div class="d-flex gap-3 align-items-center"><i class="fas fa-users fs-2 text-primary"></i><div><strong class="fs-4">25 experts</strong><br>passionnés</div></div></div>
</div>
</div>
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="150">
<div class="bg-light p-4 rounded-4 shadow-sm border">
<img src="https://placehold.co/600x400/F1F5F9/2563eb?text=MNXDEV+Team" alt="Équipe MNXDEV" class="img-fluid rounded-3">
</div>
</div>
</div>
</div>
</section>
<!-- Services -->
<section id="services" class="py-5 bg-light">
<div class="container py-5">
<div class="text-center mb-5" data-aos="fade-up">
<span class="badge-mnx"><i class="fas fa-cogs me-1"></i> Nos expertises</span>
<h2 class="section-title">Solutions digitales sur-mesure</h2>
<p class="section-subtitle">De la stratégie à l'exécution, nous vous accompagnons à chaque étape.</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4" data-aos="zoom-in"><div class="service-card p-4 h-100"><div class="service-icon mb-3"><i class="fas fa-brain"></i></div><h4>Intelligence Artificielle</h4><p class="text-secondary">IA prédictive, LLM, vision par ordinateur et automatisation cognitive.</p></div></div>
<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="100"><div class="service-card p-4 h-100"><div class="service-icon mb-3"><i class="fas fa-laptop-code"></i></div><h4>Développement sur-mesure</h4><p class="text-secondary">Applications web, mobile, API robustes et architectures scalables.</p></div></div>
<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="200"><div class="service-card p-4 h-100"><div class="service-icon mb-3"><i class="fas fa-chart-line"></i></div><h4>Data & Analytics</h4><p class="text-secondary">Tableaux de bord, data visualisation, BI et stratégie data-driven.</p></div></div>
<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="300"><div class="service-card p-4 h-100"><div class="service-icon mb-3"><i class="fas fa-cloud-upload-alt"></i></div><h4>Cloud & DevOps</h4><p class="text-secondary">Migration cloud, CI/CD, infrastructure as code et optimisation.</p></div></div>
<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="400"><div class="service-card p-4 h-100"><div class="service-icon mb-3"><i class="fas fa-mobile-alt"></i></div><h4>Expérience utilisateur</h4><p class="text-secondary">Design UX/UI, applications mobiles et web performantes.</p></div></div>
<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="500"><div class="service-card p-4 h-100"><div class="service-icon mb-3"><i class="fas fa-shield-alt"></i></div><h4>Cybersécurité</h4><p class="text-secondary">Audit, conformité RGPD, protection des données et sécurité applicative.</p></div></div>
</div>
</div>
</section>
<!-- Portfolio -->
<section id="portfolio" class="py-5">
<div class="container py-5">
<div class="text-center mb-5" data-aos="fade-up"><span class="badge-mnx"><i class="fas fa-bezier-curve me-1"></i> Réalisations</span><h2 class="section-title">Projets qui font la différence</h2></div>
<div class="row g-4">
<div class="col-md-6 col-lg-4" data-aos="flip-left"><div class="portfolio-item shadow-sm">
<img src="https://placehold.co/600x400/1e293b/white?text=Plateforme+IA" class="portfolio-img" alt="Plateforme prédictive"><div class="portfolio-overlay"><h5 class="text-white">Plateforme prédictive</h5><small>IA & big data pour retail</small></div></div></div>
<div class="col-md-6 col-lg-4" data-aos="flip-left" data-aos-delay="100"><div class="portfolio-item shadow-sm">
<img src="https://placehold.co/600x400/2563eb/white?text=Application+Mobile" class="portfolio-img" alt="SuperApp Mobile"><div class="portfolio-overlay"><h5 class="text-white">SuperApp Mobile</h5><small>React Native + Node.js</small></div></div></div>
<div class="col-md-6 col-lg-4" data-aos="flip-left" data-aos-delay="200"><div class="portfolio-item shadow-sm">
<img src="https://placehold.co/600x400/0f172a/white?text=Dashboard+Analytics" class="portfolio-img" alt="Data Visualisation"><div class="portfolio-overlay"><h5 class="text-white">Data Visualisation</h5><small>Dashboard temps réel</small></div></div></div>
</div>
</div>
</section>
<!-- Testimonials Swiper -->
<section id="testimonials" class="py-5 bg-light">
<div class="container py-5">
<div class="text-center mb-4"><span class="badge-mnx"><i class="fas fa-quote-right me-1"></i> Témoignages</span><h2 class="section-title">Ils nous font confiance</h2></div>
<div class="swiper testimonial-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><div class="testimonial-card"><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><p class="mt-3">"MNXDEV a révolutionné notre approche data. Résultats exceptionnels et équipe à l'écoute."</p><div class="d-flex gap-3 mt-3">
<img src="public/avatar.png" class="rounded-circle" width="45" height="45" alt=""><div><strong>Sophie Dubois</strong><br><small>Directrice Marketing</small></div></div></div></div>
<div class="swiper-slide"><div class="testimonial-card"><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><p class="mt-3">"Une expertise technique rare. Notre application mobile a été livrée en avance avec une qualité parfaite."</p><div class="d-flex gap-3 mt-3">
<img src="public/avatar.png" class="rounded-circle" width="45" height="45" alt=""><div><strong>Thomas Martin</strong><br><small>CEO, FinTech Plus</small></div></div></div></div>
<div class="swiper-slide"><div class="testimonial-card"><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star-half-alt text-warning"></i><p class="mt-3">"Accompagnement stratégique et solutions IA sur-mesure. Un vrai partenaire de croissance."</p><div class="d-flex gap-3 mt-3">
<img src="public/avatar.png" class="rounded-circle" width="45" height="45" alt=""><div><strong>
Bernard</strong><br><small>DRH, Groupe Horizon</small></div></div></div></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</section>
<!-- Blog -->
<section id="blog" class="py-5">
<div class="container py-5">
<div class="text-center mb-5" data-aos="fade-up"><span class="badge-mnx"><i class="fas fa-newspaper me-1"></i> Ressources</span><h2 class="section-title">Derniers articles</h2></div>
<div class="row g-4">
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="blog-card h-100">
<img src="public/mosquee.jpeg" class="w-100" style="height:200px;object-fit:cover;" alt=""><div class="p-4"><small class="text-primary">15 mars 2025</small><h5 class="mt-2">Comment l'IA générative transforme les entreprises</h5><p class="text-secondary">Cas d'usage, bénéfices et mise en œuvre.</p><a href="#" class="text-primary text-decoration-none fw-semibold">Lire →</a></div></div></div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
<div class="blog-card h-100"><img src="public/mosquee.jpeg" class="w-100" style="height:200px;object-fit:cover;" alt=""><div class="p-4"><small class="text-primary">2 mars 2025</small><h5 class="mt-2">Tendances Cloud & DevOps pour 2025</h5><p class="text-secondary">Kubernetes, serverless et sécurité.</p><a href="#" class="text-primary text-decoration-none fw-semibold">Lire →</a></div></div></div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="blog-card h-100"><img src="public/mosquee.jpeg" class="w-100" style="height:200px;object-fit:cover;" alt=""><div class="p-4"><small class="text-primary">20 février 2025</small><h5 class="mt-2">UX Design : les principes d'une expérience mémorable</h5><p class="text-secondary">Bonnes pratiques et études de cas.</p><a href="#" class="text-primary text-decoration-none fw-semibold">Lire →</a></div></div></div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="py-5" style="background: #0f172a;">
<div class="container py-5">
<div class="row g-5">
<div class="col-lg-5 text-white" data-aos="fade-right"><span class="badge-mnx bg-white text-primary">Contactez-nous</span><h2 class="display-6 fw-bold mt-3 text-white">Parlons de votre projet</h2><p class="text-white-50">Une question ? Un projet digital ? Nos experts vous répondent sous 24h.</p><ul class="list-unstyled mt-4"><li class="mb-3"><i class="fas fa-map-marker-alt text-primary me-3"></i> 42 rue de l'Innovation, 75013 Paris</li><li class="mb-3"><i class="fas fa-phone-alt text-primary me-3"></i> +33 1 88 88 88 88</li><li class="mb-3"><i class="fas fa-envelope text-primary me-3"></i> contact@mnxdev.com</li></ul></div>
<div class="col-lg-7" data-aos="fade-left"><form id="contactForm" class="bg-white p-4 p-lg-5 rounded-4 shadow"><div class="row g-3"><div class="col-md-6"><label class="form-label">Nom complet</label><input type="text" id="name" class="form-control form-control-custom" required></div><div class="col-md-6"><label class="form-label">Email</label><input type="email" id="email" class="form-control form-control-custom" required></div><div class="col-12"><label class="form-label">Entreprise</label><input type="text" id="company" class="form-control form-control-custom"></div><div class="col-12"><label class="form-label">Message</label><textarea id="message" rows="4" class="form-control form-control-custom"></textarea></div><div class="col-12"><button type="submit" class="btn btn-primary-custom w-100 py-2">Envoyer <i class="fas fa-paper-plane ms-2"></i></button></div><div id="formFeedback" class="small text-success text-center"></div></div></form></div>
</div>
</div>
</section>
</main>
<footer class="pt-5 pb-4">
<div class="container text-center"><p class="small">© 2025 MNXDEV - Agence de transformation digitale. Tous droits réservés.</p><p class="small"><a href="#" class="text-white-50 text-decoration-none">Mentions légales</a> | <a href="#" class="text-white-50 text-decoration-none">Politique de confidentialité</a></p></div>
</footer>
<!-- Robot + Chat -->
<div class="robot-companion" id="robotCompanion"><i class="fas fa-comment-dots"></i></div>
<div class="chat-popup" id="chatPopup">
<div class="chat-header"><h5><i class="fas fa-robot me-2"></i>Assistant MNXDEV</h5><button class="chat-close" id="closeChatBtn">×</button></div>
<div class="chat-messages" id="chatMessages"><div class="message bot"><div class="msg-bubble">👋 Bonjour ! Je suis l'assistant MNXDEV. Posez-moi vos questions sur nos services, devis ou accompagnement digital.</div></div></div>
<div class="chat-input-area"><input type="text" class="chat-input" id="chatInput" placeholder="Votre message...">
<button class="chat-send" id="sendChatBtn" aria-label="Envoyer
">
<i class="fas fa-paper-plane"></i></button></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
AOS.init({ once: true, duration: 800, offset: 20 });
new Swiper('.testimonial-swiper', { loop: true, autoplay: { delay: 4000 }, pagination: { el: '.swiper-pagination', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, breakpoints: { 0: { slidesPerView: 1 }, 768: { slidesPerView: 2 } } });
const chatPopup = document.getElementById('chatPopup'), robotBtn = document.getElementById('robotCompanion'), closeChatBtn = document.getElementById('closeChatBtn');
robotBtn.onclick = () => chatPopup.style.display = chatPopup.style.display === 'flex' ? 'none' : 'flex';
closeChatBtn.onclick = () => chatPopup.style.display = 'none';
function addMsg(text, sender) { const div = document.createElement('div'); div.className = `message ${sender}`; div.innerHTML = `<div class="msg-bubble">${text}</div>`; document.getElementById('chatMessages').appendChild(div); div.scrollIntoView({ behavior: 'smooth', block: 'end' }); }
function botReply(msg) { let reply = "Merci pour votre message. Pour un devis personnalisé, laissez vos coordonnées dans le formulaire de contact. Puis-je vous aider sur un sujet précis ?"; if (msg.includes("prix") || msg.includes("tarif")) reply = "Nos tarifs sont adaptés à chaque projet. Contactez-nous pour un devis gratuit !"; else if (msg.includes("service")) reply = "Nous proposons : développement sur-mesure, IA, data, cloud, UX/UI et cybersécurité. Que recherchez-vous ?"; else if (msg.includes("contact")) reply = "Vous pouvez nous joindre au +33 1 88 88 88 88 ou par email : contact@mnxdev.com"; setTimeout(() => addMsg(reply, "bot"), 400); }
document.getElementById('sendChatBtn').onclick = () => { const input = document.getElementById('chatInput'); if (input.value.trim()) { addMsg(input.value.trim(), "user"); botReply(input.value.trim().toLowerCase()); input.value = ""; } };
document.getElementById('chatInput').addEventListener('keypress', (e) => { if (e.key === 'Enter') document.getElementById('sendChatBtn').click(); });
document.querySelectorAll('.nav-link, a[href^="#"]').forEach(a => a.addEventListener('click', function(e) { const t = this.getAttribute('href'); if (t && t !== "#" && t.startsWith('#')) { e.preventDefault(); const el = document.querySelector(t); if (el) { el.classList.add('section-highlight'); el.scrollIntoView({ behavior: 'smooth' }); setTimeout(() => el.classList.remove('section-highlight'), 600); document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active')); this.classList.add('active'); if (chatPopup.style.display === 'flex') chatPopup.style.display = 'none'; } } }));
window.addEventListener('scroll', () => { let cur = ""; document.querySelectorAll('section, header').forEach(s => { if (pageYOffset >= s.offsetTop - 150) cur = s.getAttribute('id'); }); document.querySelectorAll('.nav-link').forEach(l => { l.classList.remove('active'); if (l.getAttribute('href') === `#${cur}`) l.classList.add('active'); }); });
document.getElementById('contactForm').addEventListener('submit', (e) => { e.preventDefault(); const name = document.getElementById('name').value.trim(), email = document.getElementById('email').value.trim(); const fb = document.getElementById('formFeedback'); if (!name || !email) { fb.innerHTML = '<span class="text-danger">⚠️ Merci de remplir nom et email.</span>'; return; } fb.innerHTML = '<i class="fas fa-check-circle"></i> ✅ Message envoyé ! Un expert vous répond rapidement.'; e.target.reset(); setTimeout(() => fb.innerHTML = '', 5000); });
</script>
</body>
</html>
Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur