Template AI Style App | AngularForAll

Bootstrap 5 Template Ai App Saas Futuristic Tech
Template pour application IA avec design futuriste, animations fluides et composants interactifs. Idéal pour SaaS et startups tech.
<!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 AI Style App 202604210104 | AngularForAll</title>
<meta name="description" content="MNXDEV - Agence d'expertise en intelligence artificielle, robotique et transformation digitale. Solutions IA de pointe pour votre entreprise.">
<!-- 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=Space+Grotesk:wght@300;400;500;600;700;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: 'Space Grotesk', sans-serif;
            background: #05050A;
            color: #e8e8f0;
            overflow-x: hidden;
        }

        /* Animated gradient background */
        .bg-animate {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            background: radial-gradient(circle at 20% 30%, #0a0a15, #020208);
        }

        .bg-animate::before {
            content: '';
            position: absolute;
            width: 200%;
            height: 200%;
            top: -50%;
            left: -50%;
            background: repeating-linear-gradient(45deg, rgba(0, 255, 255, 0.02) 0px, rgba(0, 255, 255, 0.02) 2px, transparent 2px, transparent 10px);
            animation: bgMove 30s linear infinite;
        }

        @keyframes bgMove {
            0% { transform: translate(0, 0); }
            100% { transform: translate(50px, 50px); }
        }

        /* Floating orbs */
        .orb {
            position: fixed;
            border-radius: 50%;
            filter: blur(60px);
            z-index: -1;
            opacity: 0.4;
            animation: floatOrb 12s infinite alternate;
        }

        @keyframes floatOrb {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(100px, -50px) scale(1.2); }
        }

        .skip-link {
            position: absolute;
            top: -40px;
            left: 0;
            background: #00ffff;
            color: #000;
            padding: 8px 16px;
            z-index: 9999;
            text-decoration: none;
            font-weight: 600;
            transition: top 0.2s;
        }
        .skip-link:focus { top: 0; }

        /* Navbar cyber style */
        .navbar {
            background: rgba(5, 5, 10, 0.85);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(0, 255, 255, 0.3);
            padding: 0.8rem 0;
            transition: all 0.3s;
        }
        .navbar-brand {
            font-weight: 800;
            font-size: 1.8rem;
            background: linear-gradient(135deg, #00ffff, #ff00ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: -0.02em;
        }
        .nav-link {
            font-weight: 600;
            color: #ccc !important;
            margin: 0 0.3rem;
            transition: 0.2s;
            position: relative;
        }
        .nav-link:hover, .nav-link.active {
            color: #00ffff !important;
            text-shadow: 0 0 8px rgba(0,255,255,0.5);
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #00ffff, #ff00ff);
            transition: 0.3s;
            transform: translateX(-50%);
        }
        .nav-link:hover::after, .nav-link.active::after { width: 70%; }

        .btn-cyber {
            background: linear-gradient(95deg, #00ccff, #ff00cc);
            border: none;
            color: #05050A;
            font-weight: 700;
            padding: 0.6rem 1.8rem;
            border-radius: 40px;
            transition: 0.3s;
            box-shadow: 0 0 15px rgba(0,255,255,0.3);
        }
        .btn-cyber:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 30px rgba(0,255,255,0.6);
            color: #000;
        }
        .btn-outline-cyber {
            border: 2px solid #00ffff;
            background: transparent;
            color: #00ffff;
            font-weight: 600;
            padding: 0.6rem 1.8rem;
            border-radius: 40px;
            transition: 0.3s;
        }
        .btn-outline-cyber:hover {
            background: #00ffff;
            color: #05050A;
            box-shadow: 0 0 20px rgba(0,255,255,0.4);
        }

        .hero-section {
            padding: 160px 0 100px;
        }

        .badge-ai {
            background: rgba(0, 255, 255, 0.12);
            border: 1px solid rgba(0, 255, 255, 0.4);
            color: #00ffff;
            border-radius: 60px;
            padding: 6px 18px;
            font-size: 0.8rem;
            font-weight: 600;
            display: inline-block;
            margin-bottom: 1rem;
            backdrop-filter: blur(4px);
        }

        .section-title {
            font-weight: 700;
            font-size: 2.5rem;
            background: linear-gradient(135deg, #ffffff, #00ffff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: -0.02em;
        }

        .cyber-card {
            background: rgba(15, 15, 25, 0.6);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 255, 255, 0.2);
            border-radius: 24px;
            transition: all 0.4s ease;
        }
        .cyber-card:hover {
            border-color: #00ffff;
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
            transform: translateY(-8px);
        }

        .portfolio-item {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
        }
        .portfolio-img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: transform 0.5s;
        }
        .portfolio-item:hover .portfolio-img {
            transform: scale(1.08);
        }
        .portfolio-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(0deg, rgba(0,0,0,0.9), transparent);
            padding: 25px;
            transform: translateY(100%);
            transition: 0.4s;
        }
        .portfolio-item:hover .portfolio-overlay {
            transform: translateY(0);
        }

        .blog-card {
            background: rgba(15, 15, 25, 0.6);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 255, 255, 0.2);
            border-radius: 24px;
            transition: 0.3s;
            overflow: hidden;
        }
        .blog-card:hover {
            border-color: #ff00ff;
            transform: translateY(-5px);
        }

        .form-cyber {
            background: rgba(15, 15, 25, 0.6);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 255, 255, 0.3);
            border-radius: 28px;
        }
        .form-control-cyber {
            background: rgba(5, 5, 10, 0.8);
            border: 1px solid rgba(0, 255, 255, 0.3);
            border-radius: 40px;
            padding: 12px 20px;
            color: #fff;
        }
        .form-control-cyber:focus {
            border-color: #00ffff;
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
            background: #0a0a15;
            color: #fff;
        }

        /* Swiper testimonials */
        .testimonial-swiper {
            padding: 20px 0 50px;
        }
        .testimonial-card {
            background: rgba(15, 15, 25, 0.7);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 255, 255, 0.3);
            border-radius: 24px;
            padding: 2rem;
            margin: 10px;
        }
        .swiper-pagination-bullet {
            background: #00ffff;
        }
        .swiper-button-next, .swiper-button-prev {
            color: #00ffff;
        }

        /* Chat Popup */
        .chat-popup {
            position: fixed;
            bottom: 110px;
            right: 30px;
            width: 360px;
            max-width: calc(100vw - 40px);
            background: rgba(10, 10, 20, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(0, 255, 255, 0.5);
            border-radius: 24px;
            box-shadow: 0 0 40px rgba(0, 255, 255, 0.2);
            z-index: 2000;
            display: none;
            flex-direction: column;
            overflow: hidden;
            animation: chatFadeIn 0.3s ease;
        }
        @keyframes chatFadeIn {
            from { opacity: 0; transform: translateY(20px) scale(0.95); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .chat-header {
            background: linear-gradient(135deg, #00ccff20, #ff00cc20);
            padding: 15px;
            border-bottom: 1px solid rgba(0, 255, 255, 0.3);
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }
        .chat-header h5 {
            margin: 0;
            color: #00ffff;
            font-weight: 600;
        }
        .chat-close {
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            transition: 0.2s;
        }
        .chat-close:hover { color: #ff00ff; }
        .chat-messages {
            height: 350px;
            overflow-y: auto;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .message.user .msg-bubble { background: linear-gradient(135deg, #00ccff, #ff00cc); color: #05050A; font-weight: 500; }
        .message.bot .msg-bubble { background: rgba(0, 255, 255, 0.15); border: 1px solid rgba(0,255,255,0.3); color: #fff; }
        .msg-bubble { max-width: 80%; padding: 10px 14px; border-radius: 20px; font-size: 13px; line-height: 1.4; }
        .chat-input-area { display: flex; padding: 12px; border-top: 1px solid rgba(0, 255, 255, 0.2); gap: 8px; }
        .chat-input { flex: 1; background: rgba(0,0,0,0.5); border: 1px solid rgba(0,255,255,0.4); border-radius: 30px; padding: 10px 15px; color: white; }
        .chat-input:focus { outline: none; border-color: #00ffff; }
        .chat-send { background: linear-gradient(95deg, #00ccff, #ff00cc); border: none; border-radius: 30px; width: 42px; color: #05050A; font-weight: bold; transition: 0.2s; }
        .chat-send:hover { transform: scale(1.05); }

        /* Floating Robot */
        .robot-companion {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #00ffff20, #ff00ff20);
            backdrop-filter: blur(8px);
            border-radius: 50%;
            border: 2px solid rgba(0, 255, 255, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1000;
            transition: all 0.3s ease;
            animation: robotGlow 2s infinite alternate;
        }
        .robot-companion:hover { transform: scale(1.1); }
        @keyframes robotGlow {
            0% { box-shadow: 0 0 5px rgba(0,255,255,0.3); border-color: rgba(0,255,255,0.6); }
            100% { box-shadow: 0 0 25px rgba(0,255,255,0.8); border-color: #00ffff; }
        }
        .robot-companion i { font-size: 38px; color: #00ffff; filter: drop-shadow(0 0 5px cyan); animation: robotWave 1.5s infinite; }
        @keyframes robotWave {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(10deg); }
        }

        .section-highlight { animation: sectionPop 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1); }
        @keyframes sectionPop {
            0% { transform: scale(0.98); opacity: 0.7; }
            100% { transform: scale(1); opacity: 1; }
        }

        footer { border-top: 1px solid rgba(0, 255, 255, 0.2); background: #020208; }
        @media (max-width: 768px) {
            .hero-section { padding: 120px 0 60px; }
            .section-title { font-size: 1.9rem; }
            .robot-companion { width: 55px; height: 55px; bottom: 20px; right: 20px; }
            .robot-companion i { font-size: 28px; }
            .chat-popup { width: 320px; right: 15px; bottom: 95px; }
        }
    </style>
</head>
<body>

<div class="bg-animate"></div>
<div class="orb" style="width: 300px; height: 300px; background: #00ffff; top: -100px; left: -100px;"></div>
<div class="orb" style="width: 400px; height: 400px; background: #ff00ff; bottom: -150px; right: -100px;"></div>

<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 style="color:#ff00ff;">DEV</span></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-label="Menu" style="background: #00ffff20; border:1px solid #00ffff;">
            <span class="navbar-toggler-icon" style="filter: invert(1);"></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">Expertise</a></li>
                <li class="nav-item"><a class="nav-link" href="#services">Services IA</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-cyber ms-lg-3 d-none d-lg-inline-block">Démo IA</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-ai"><i class="fas fa-robot me-2"></i> MNXDEV | Intelligence Artificielle & Robotique</span>
                    <h1 class="display-4 fw-bold mb-3">Pilotez l'avenir avec <span style="background: linear-gradient(135deg,#00ffff,#ff00ff); -webkit-background-clip:text; background-clip:text; color:transparent;">l'IA augmentée</span></h1>
                    <p class="lead mb-4">MNXDEV conçoit des systèmes intelligents, robots autonomes et agents cognitifs pour transformer votre entreprise.</p>
                    <div class="d-flex flex-wrap gap-3">
                        <a href="#contact" class="btn btn-cyber btn-lg px-4"><i class="fas fa-microchip me-2"></i>Lancer mon projet</a>
                        <a href="#services" class="btn btn-outline-cyber btn-lg px-4"><i class="fas fa-brain me-2"></i>Explorer</a>
                    </div>
                    <div class="mt-5 d-flex gap-4 flex-wrap">
                        <div><i class="fas fa-check-circle text-info"></i> <strong>+180</strong> projets IA</div>
                        <div><i class="fas fa-star text-warning"></i> <strong>99%</strong> satisfaction</div>
                        <div><i class="fas fa-microchip text-info"></i> <strong>24/7</strong> support technique</div>
                    </div>
                </div>
                <div class="col-lg-6 text-center" data-aos="fade-left">
                    <i class="fas fa-robot" style="font-size: 260px; color: rgba(0,255,255,0.1); text-shadow: 0 0 50px rgba(0,255,255,0.3); animation: pulseGlow 3s infinite;"></i>
                    <style>@keyframes pulseGlow { 0%,100%{text-shadow:0 0 30px rgba(0,255,255,0.3);}50%{text-shadow:0 0 70px rgba(0,255,255,0.6);}}</style>
                </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-ai"><i class="fas fa-brain me-1"></i> Notre ADN technique</span>
                    <h2 class="section-title mb-3">Des robots cognitifs <br>au service de l'humain</h2>
                    <p class="text-secondary">MNXDEV fusionne robotique, deep learning et traitement du langage naturel. Notre équipe d'ingénieurs et chercheurs en IA conçoit des systèmes autonomes capables d'apprendre et de s'adapter en temps réel.</p>
                    <div class="row mt-4">
                        <div class="col-6"><div class="d-flex gap-3 align-items-center"><i class="fas fa-chart-line fs-2 text-info"></i><div><strong class="fs-4">+237%</strong><br>productivité</div></div></div>
                        <div class="col-6"><div class="d-flex gap-3 align-items-center"><i class="fas fa-network-wired fs-2 text-info"></i><div><strong class="fs-4">15k+</strong><br>agents IA déployés</div></div></div>
                    </div>
                </div>
                <div class="col-lg-6" data-aos="fade-up" data-aos-delay="150">
                    <div class="cyber-card p-4 text-center">
                        <i class="fas fa-microchip" style="font-size: 70px; color:#00ffff;"></i>
                        <h4 class="mt-3">Architecture Neuro-Symbolique</h4>
                        <p class="text-secondary">Modèles hybrides alliant réseaux de neurones et raisonnement logique pour une IA explicable et fiable.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="py-5" style="background: rgba(0,0,0,0.2);">
        <div class="container py-5">
            <div class="text-center mb-5" data-aos="fade-up">
                <span class="badge-ai"><i class="fas fa-cogs me-1"></i> Solutions experts</span>
                <h2 class="section-title">Nos piliers d'expertise IA</h2>
                <p class="lead text-secondary w-75 mx-auto">Robotique cognitive, LLMs, vision par ordinateur, et systèmes autonomes.</p>
            </div>
            <div class="row g-4">
                <div class="col-md-6 col-lg-4" data-aos="zoom-in"><div class="cyber-card p-4 h-100"><i class="fas fa-robot fs-1 text-info mb-3"></i><h4>Robotique Autonome</h4><p>Drones, robots collaboratifs, flottes intelligentes pilotées par IA embarquée.</p></div></div>
                <div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="100"><div class="cyber-card p-4 h-100"><i class="fas fa-comment-dots fs-1 text-info mb-3"></i><h4>LLM & Agents</h4><p>Chatbots experts, assistants virtuels avec mémoire contextuelle.</p></div></div>
                <div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="200"><div class="cyber-card p-4 h-100"><i class="fas fa-eye fs-1 text-info mb-3"></i><h4>Computer Vision</h4><p>Reconnaissance d'objets, inspection qualité, sécurité intelligente.</p></div></div>
                <div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="300"><div class="cyber-card p-4 h-100"><i class="fas fa-chart-line fs-1 text-info mb-3"></i><h4>Predictive Analytics</h4><p>Algorithmes prédictifs pour maintenance, ventes, risques.</p></div></div>
                <div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="400"><div class="cyber-card p-4 h-100"><i class="fas fa-shield-alt fs-1 text-info mb-3"></i><h4>IA Éthique</h4><p>Audit de biais, confidentialité différentielle, conformité RGPD.</p></div></div>
                <div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="500"><div class="cyber-card p-4 h-100"><i class="fas fa-cloud-upload-alt fs-1 text-info mb-3"></i><h4>MLOps & Scaling</h4><p>Déploiement continu, monitoring, optimisation GPU/TPU.</p></div></div>
            </div>
        </div>
    </section>

    <!-- Portfolio Section -->
    <section id="portfolio" class="py-5">
        <div class="container py-5">
            <div class="text-center mb-5" data-aos="fade-up"><span class="badge-ai"><i class="fas fa-bezier-curve me-1"></i> Réalisations IA</span><h2 class="section-title">Projets robotique & IA déployés</h2></div>
            <div class="row g-4">
                <div class="col-md-6 col-lg-4" data-aos="flip-left"><div class="portfolio-item cyber-card">
                    <img src="https://placehold.co/600x400/0a0a15/00ffff?text=ROBOT+COBOTIQUE" alt="" class="portfolio-img"><div class="portfolio-overlay"><h5>Robotique industrielle</h5><small>Vision 3D + bras autonome</small></div></div></div>
                <div class="col-md-6 col-lg-4" data-aos="flip-left" data-aos-delay="100"><div class="portfolio-item cyber-card">
                    <img src="https://placehold.co/600x400/0a0a15/ff00ff?text=CHATBOT+LLM" alt="" class="portfolio-img"><div class="portfolio-overlay"><h5>Assistant bancaire IA</h5><small>LLM fine-tuné + API temps réel</small></div></div></div>
                <div class="col-md-6 col-lg-4" data-aos="flip-left" data-aos-delay="200"><div class="portfolio-item cyber-card">
                    <img src="https://placehold.co/600x400/0a0a15/cyan?text=DRONE+IA" alt="" class="portfolio-img"><div class="portfolio-overlay"><h5>Drone d'inspection</h5><small>Navigation autonome & détection défauts</small></div></div></div>
            </div>
        </div>
    </section>

    <!-- Testimonials with Swiper JS -->
    <section id="testimonials" class="py-5" style="background: rgba(0,0,0,0.2);">
        <div class="container py-5">
            <div class="text-center mb-4" data-aos="fade-up"><span class="badge-ai"><i class="fas fa-quote-right me-1"></i> Témoignages</span><h2 class="section-title">Ce qu'ils disent de MNXDEV</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 déployé une solution de vision qui a réduit nos défauts de 78%."</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 R.</strong><br><small>Industrie 4.0</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">"Leur expertise LLM nous a permis un ROI en 4 mois. Assistants 24/7 performants."</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 K.</strong><br><small>CDO, NexBank</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">"Des chercheurs exceptionnels. IA éthique et performante, un vrai partenaire stratégique."</p><div class="d-flex gap-3 mt-3">
                        <img src="public/avatar.png" class="rounded-circle" width="45" height="45" alt=""><div><strong>Dr. Armand L.</strong><br><small>CTO, HealthAI</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">"Accompagnement sur mesure, équipe réactive. Notre transformation digitale est une réussite."</p><div class="d-flex gap-3 mt-3">
                        <img src="public/avatar.png" class="rounded-circle" width="45" height="45" alt=""><div><strong>Laura M.</strong><br><small>Directrice Innovation</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 -->
    <section id="blog" class="py-5">
        <div class="container py-5">
            <div class="text-center mb-5" data-aos="fade-up"><span class="badge-ai"><i class="fas fa-newspaper me-1"></i> Blog & Recherche</span><h2 class="section-title">Veille technologique IA</h2></div>
            <div class="row g-4">
                <div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="blog-card">
                    <img src="https://placehold.co/600x350/0a0a15/cyan?text=Generative+AI" alt="" class="w-100" style="height:200px;object-fit:cover;"><div class="p-4"><small class="text-info">15 avril 2025</small><h5 class="mt-2">Agents IA multimodaux</h5><p class="text-secondary">Fusion vision, langage, action pour robots généralistes.</p><a href="#" class="text-info text-decoration-none">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">
                    <img src="https://placehold.co/600x350/0a0a15/ff00ff?text=Ethical+AI" alt="" class="w-100" style="height:200px;object-fit:cover;"><div class="p-4"><small class="text-info">2 avril 2025</small><h5 class="mt-2">Audit de biais algorithmique</h5><p class="text-secondary">Garantir l'équité dans les systèmes décisionnels.</p><a href="#" class="text-info text-decoration-none">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">
                    <img src="https://placehold.co/600x350/0a0a15/cyan?text=Robotics+2025" alt="" class="w-100" style="height:200px;object-fit:cover;"><div class="p-4"><small class="text-info">20 mars 2025</small><h5 class="mt-2">Robotique cognitive</h5><p class="text-secondary">Apprentissage par renforcement et adaptation contextuelle.</p><a href="#" class="text-info text-decoration-none">Lire →</a></div></div></div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-5" style="background: rgba(0,0,0,0.4);">
        <div class="container py-5">
            <div class="row g-5">
                <div class="col-lg-5" data-aos="fade-right">
                    <span class="badge-ai"><i class="fas fa-envelope me-1"></i> Contactez nos experts IA</span>
                    <h2 class="display-6 fw-bold mt-3">Discutons de votre projet</h2>
                    <p class="text-secondary">Nos ingénieurs vous accompagnent du proof of concept au déploiement industriel.</p>
                    <ul class="list-unstyled mt-4">
                        <li class="mb-3"><i class="fas fa-map-marker-alt text-info me-3"></i> 42 avenue des Technologies, 75013 Paris</li>
                        <li class="mb-3"><i class="fas fa-phone-alt text-info me-3"></i> +33 1 88 88 88 88</li>
                        <li class="mb-3"><i class="fas fa-envelope text-info me-3"></i> contact@mnxdev.com</li>
                    </ul>
                </div>
                <div class="col-lg-7" data-aos="fade-left">
                    <form id="contactForm" class="form-cyber p-4 p-lg-5">
                        <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-cyber" placeholder="Jean Dupont" required></div>
                            <div class="col-md-6"><label class="form-label">Email</label><input type="email" id="email" class="form-control form-control-cyber" placeholder="jean@entreprise.com" required></div>
                            <div class="col-12"><label class="form-label">Entreprise</label><input type="text" id="company" class="form-control form-control-cyber" placeholder="Votre société"></div>
                            <div class="col-12"><label class="form-label">Message</label><textarea id="message" rows="4" class="form-control form-control-cyber" placeholder="Détaillez votre besoin en IA/robotique..."></textarea></div>
                            <div class="col-12"><button type="submit" class="btn btn-cyber w-100 py-2">Envoyer <i class="fas fa-paper-plane ms-2"></i></button></div>
                            <div id="formFeedback" class="small text-info text-center"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
</main>

<footer class="pt-4 pb-3 text-center">
    <p class="small text-secondary">© 2025 MNXDEV - Intelligence Artificielle & Robotique. Tous droits réservés.</p>
</footer>

<!-- Robot Companion + Chat Popup -->
<div class="robot-companion" id="robotCompanion" aria-label="Assistant IA MNXDEV">
    <i class="fas fa-robot"></i>
</div>

<div class="chat-popup" id="chatPopup">
    <div class="chat-header" id="chatHeader">
        <h5><i class="fas fa-microchip me-2"></i>MNXDEV AI Assistant</h5>
        <button class="chat-close" id="closeChatBtn" aria-label="Fermer le chat">&times;</button>
    </div>
    <div class="chat-messages" id="chatMessages">
        <div class="message bot"><div class="msg-bubble">🤖 Bonjour ! Je suis l'assistant IA de MNXDEV. Posez-moi vos questions sur nos services IA, robotique, ou demandez une démo !</div></div>
    </div>
    <div class="chat-input-area">
        <input type="text" class="chat-input" id="chatInput" placeholder="Écrivez votre message..." aria-label="Message">
        <button class="chat-send" id="sendChatBtn" aria-label="Envoyer le message"><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 });

    // Swiper pour les témoignages
    new Swiper('.testimonial-swiper', {
        loop: true,
        autoplay: { delay: 4000, disableOnInteraction: false },
        pagination: { el: '.swiper-pagination', clickable: true },
        navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
        breakpoints: { 0: { slidesPerView: 1 }, 768: { slidesPerView: 2 }, 1024: { slidesPerView: 2 } }
    });

    // Chatbot logic
    const chatPopup = document.getElementById('chatPopup');
    const robotBtn = document.getElementById('robotCompanion');
    const closeChatBtn = document.getElementById('closeChatBtn');
    const chatMessages = document.getElementById('chatMessages');
    const chatInput = document.getElementById('chatInput');
    const sendBtn = document.getElementById('sendChatBtn');

    function openChat() { chatPopup.style.display = 'flex'; }
    function closeChat() { chatPopup.style.display = 'none'; }

    robotBtn.addEventListener('click', () => {
        if (chatPopup.style.display === 'flex') closeChat();
        else openChat();
    });
    closeChatBtn.addEventListener('click', closeChat);

    function addMessage(text, sender) {
        const msgDiv = document.createElement('div');
        msgDiv.className = `message ${sender}`;
        msgDiv.innerHTML = `<div class="msg-bubble">${text}</div>`;
        chatMessages.appendChild(msgDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    function botReply(userMessage) {
        const msg = userMessage.toLowerCase();
        let reply = "";
        if (msg.includes("bonjour") || msg.includes("salut")) reply = "Bonjour ! Je suis l'assistant MNXDEV. Comment puis-je vous aider avec nos solutions IA ?";
        else if (msg.includes("service") || msg.includes("prestation")) reply = "Nous proposons : Robotique autonome, LLM & agents conversationnels, Computer Vision, Predictive Analytics, IA éthique et MLOps. Lequel vous intéresse ?";
        else if (msg.includes("robot") || msg.includes("robotique")) reply = "Nos robots collaboratifs et drones autonomes intègrent des algorithmes de deep learning pour l'inspection, la logistique et la production. Souhaitez-vous une démo ?";
        else if (msg.includes("prix") || msg.includes("tarif") || msg.includes("coût")) reply = "Nos solutions sont sur-mesure. Contactez nos experts via le formulaire pour un devis personnalisé !";
        else if (msg.includes("contact") || msg.includes("joindre")) reply = "Vous pouvez nous joindre au +33 1 88 88 88 88 ou via le formulaire de contact. Je reste à votre disposition !";
        else if (msg.includes("démo") || msg.includes("demo")) reply = "Super ! Un de nos ingénieurs peut vous faire une démo personnalisée. Laissez votre email dans le formulaire de contact.";
        else if (msg.includes("mnxdev")) reply = "MNXDEV est une agence experte en intelligence artificielle et transformation digitale. Nous accompagnons les entreprises dans leur révolution numérique.";
        else reply = "Merci pour votre message. Pour plus de détails, je vous invite à consulter nos services ou à remplir le formulaire de contact. Puis-je faire autre chose ?";

        setTimeout(() => addMessage(reply, "bot"), 500);
    }

    function sendMessage() {
        const text = chatInput.value.trim();
        if (!text) return;
        addMessage(text, "user");
        chatInput.value = "";
        botReply(text);
    }

    sendBtn.addEventListener('click', sendMessage);
    chatInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') sendMessage(); });

    // Smooth scroll + animation sections
    document.querySelectorAll('.navbar-nav .nav-link, a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            const targetId = this.getAttribute('href');
            if (!targetId || targetId === "#" || !targetId.startsWith('#')) return;
            const target = document.querySelector(targetId);
            if (target) {
                e.preventDefault();
                target.classList.remove('section-highlight');
                void target.offsetWidth;
                target.classList.add('section-highlight');
                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                setTimeout(() => target.classList.remove('section-highlight'), 700);
                document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
                this.classList.add('active');
                if (chatPopup.style.display === 'flex') closeChat();
            }
        });
    });

    // Active link on scroll
    window.addEventListener('scroll', () => {
        let current = "";
        document.querySelectorAll('section, header').forEach(section => {
            const top = section.offsetTop - 150;
            if (pageYOffset >= top) current = section.getAttribute('id');
        });
        document.querySelectorAll('.nav-link').forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('href') === `#${current}`) link.classList.add('active');
        });
    });

    // Form handling
    document.getElementById('contactForm').addEventListener('submit', (e) => {
        e.preventDefault();
        const name = document.getElementById('name').value.trim();
        const email = document.getElementById('email').value.trim();
        const feedback = document.getElementById('formFeedback');
        if (!name || !email) { feedback.innerHTML = '<span class="text-danger">⚠️ Merci de remplir nom et email.</span>'; return; }
        feedback.innerHTML = '<i class="fas fa-check-circle"></i> ✅ Message reçu ! Un expert IA vous contactera.';
        e.target.reset();
        setTimeout(() => feedback.innerHTML = '', 5000);
    });
</script>
</body>
</html>
Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur
📌 Voir aussi

🏷️ Explorer par mot clé
