Outiref

Code source de l'URL : https://diese.org

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Diese Junior Conseil</title> 
    
    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-QRMC6RN2X0"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-QRMC6RN2X0'); //Google Analytics measurement ID
    </script>
    
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="navbar.css" />
    <link rel="icon" href="images/logos/logo_diese_bleu.png" type="image/png" />
  </head>

  <body>
    <div id="navbar-container"></div>

    <section class="hero">
      <div class="hero-content">
        <h2>Construisons demain, aujourd'hui</h2>
        <h1>Avec Dièse Junior Conseil</h1>
        <p>
          De l'intelligence artificielle au développement web, profitez dès
          aujourd'hui des compétences des étudiants de l'ENSIIE pour
          concrétiser vos projets numériques.
        </p>
        <a href="contact.html" class="hero-button">Lancez votre projet</a>
      </div>  

      <section class="statistics-section">
        <div class="statistics-container">
          <div class="stats-grid">
            <div class="stat-item" data-number="45" data-suffix=" ans">
              <div class="stat-number">0</div>
              <div class="stat-label">D'expérience</div>
            </div>

            <div class="stat-item" data-number="1000" data-suffix="+">
              <div class="stat-number">0</div>
              <div class="stat-label">Projets réalisés</div>
            </div>

            <div class="stat-item" data-number="98" data-suffix="%">
              <div class="stat-number">0</div>
              <div class="stat-label">Clients satisfaits</div>
            </div>

            <div class="stat-item" data-number="24" data-suffix="h">
              <div class="stat-number">0</div>
              <div class="stat-label">Délai de réponse</div>
            </div>
          </div>
        </div>
      </section>
    
    <div class="scroll-down-arrow">
      <a href="#services">
        <img src="images/arrow-large--down_white.svg" alt="Scroll down" />
      </a>
    </div>

    </section>

    
    <section id="services" class="services-section">
      <div class="services-container">
        <div class="services-content">
          <div class="services-text">
            <h2 id="section-title">Nos Prestations</h2>
            <p id="section-description">
              Dièse Junior Conseil vous propose un accompagnement sur mesure,
              pensé pour maximiser votre impact et répondre précisément à vos
              objectifs.
            </p>
            <a href="contact.html" class="services-cta-btn"
              >Commencer un projet
              <img
                src="images/icons/arrow-right.svg"
                width="28"
                height="28"
                alt="arrow"
              />
            </a>
          </div>
          <div class="services-cards">
            <div class="service-card">
              <a href="contact.html">
              <div class="service-icon">
                <i class="fas fa-robot"></i>
              </div>
              <h3 id="card-title">Intelligence Artificielle</h3>
              <p id="card-description">
                Déployez des solutions <strong>IA</strong> pour optimiser vos processus
              </p>
              </a>
            </div>

            <div class="service-card">
              <a href="contact.html">
              <div class="service-icon">
                <i class="fas fa-code"></i>
              </div>
              <h3 id="card-title">Développement</h3>
              <p id="card-description">
                Concrétisez vos idées avec un <strong>site web</strong> ou <strong>une application</strong>
              </p>
              </a>
            </div>

            <div class="service-card">
              <a href="contact.html">
              <div class="service-icon">
                <i class="fas fa-database"></i>
              </div>
              <h3 id="card-title">Digitaliser son activité</h3>
              <p id="card-description">
                Boostez votre activité grâce à un <strong>logiciel</strong> ou
                l’analyse de <strong>données</strong>
              </p>
              </a>
            </div>

            <div class="service-card">
              <a href="contact.html">
              <div class="service-icon">
                <i class="fas fa-shield-alt"></i>
              </div>
              <h3 id="card-title">Sécuriser et optimiser</h3>
              <p id="card-description">
                Gagnez en rapidité et fiabilité sur vos
                <strong>réseaux</strong>, <strong>HPC</strong> et
                <strong>cybersécurité</strong>.
              </p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="expertise-section">
      <div class="expertise-wrapper">
        <div class="accordion-text-wrapper">
          <div class="accordion-header-text">
          <div class="expertise-text">
            <h3 id="section-title">Découvrez notre Junior-Entreprise</h3>
            <p id="section-description">
              Parmi les Junior-Entreprises les plus anciennes de France,
              <strong
                >distinguée à quatre reprises par le prix de la meilleure étude
                en ingénierie.</strong
>
            </p>
          </div>
          
        </div>
        
        
        
        <div class="accordion-wrapper">
          <div class="accordion-item">
            <div class="accordion-question">
              <h3>Notre école l'ENSIIE</h3>
              <svg xmlns="http://www.w3.org/2000/svg" 
                   height="24px" 
                   viewbox="0 -960 960 960" 
                  width="24px" fill="#000000">
                <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/>
              </svg>
            </div>
            <div class="accordion-answer">
              <p id="accordion-text">
                Pionnière de l’enseignement de l’informatique en France,
                l’ENSIIE forme depuis plus de 50 ans des ingénieurs
                d’excellence, c'est la
                <strong>3ᵉ meilleure école d’informatique</strong> de France
                selon Le Figaro.
              </p>
            </div>
          </div>

          <div class="accordion-item">
            <div class="accordion-question">
              <h3>45 ans d'expérience</h3>
              <svg xmlns="http://www.w3.org/2000/svg" 
                   height="24px" 
                   viewbox="0 -960 960 960" 
                  width="24px" fill="#000000">
                <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/>
              </svg>
            </div>
            <div class="accordion-answer">
              <p id="accordion-text">
                Dièse a été crée en 1981, il s'agit de la Junior-Entreprise
                <strong>la plus expérimentée</strong> dans le domaine de
                l'informatique. <br />
                Elle est
                <strong
                  >membre fondatrice du mouvement des
                  Junior-Entreprises.</strong
>
              </p>
            </div>
          </div>

          <div class="accordion-item">
            <div class="accordion-question">
              <h3>Pourquoi nous choisir ?</h3>
              <svg xmlns="http://www.w3.org/2000/svg" 
                   height="24px" 
                   viewbox="0 -960 960 960" 
                  width="24px" fill="#000000">
                <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/>
              </svg>
            </div>
            <div class="accordion-answer">
              <p id="accordion-text">
                Sacrée
                <strong>meilleure Junior-Entreprise de France en 2006, </strong
>Dièse s’appuie sur une solide expérience et sur l’excellence
                académique de son école.
              </p>
            </div>
          </div>
        </div>
        </div>

        <div class="expertise-img-cards">
          <div class="left-image-container">
            <img src="images/hackathon.jpg" width="auto" height="auto" />
          </div>
          <div class="main-image-container">
            <img src="images/pres.jpg" width="auto" height="auto" />
          </div>
          <div class="right-image-container">
            <img src="images/reu.jpg" width="auto" height="auto" />
          </div>
        </div>
      </div>
    </section>

    <script src="./accordion.js"></script>

    <section class="team-methodology-section">
      <div class="team-methodology-container">
        <div class="team-header">
          <h2 id="section-title">Un accompagnement sur-mesure</h2>
          <h3 id="section-description">
            Bénéficiez des compétences pointues des étudiants de l’ENSIIE. Des
            élèves acteurs de l’innovation technologique de demain
          </h3>
        </div>
        <div class="steps-img-container">
          <div class="steps-container">
            <div class="steps-list">
              <div class="step-row">
                <div class="number-line-top">
                  <div class="circle-number">1</div>
                </div>
                <div class="step-description" data-step="1" data-image="images/mandat2025.webp" data-text="Notre équipe est à votre écoute">
                  <a href="#">
                    <h3>PREMIER CONTACT</h3>
                    <p>
                      Un <strong>Chargé d'affaires</strong>, attentif à vos besoins, vous accompagne dès le premier rendez-vous
                      
                    </p>
                  </a>
                </div>
              </div>
              <div class="step-row">
                <div class="number-line-top">
                  <div class="circle-number">2</div>
                </div>
                <div class="step-description" data-step="2" data-image="images/step2.webp" data-text="Devis, Planning, Cahier des Charges">
                  <a href="#">
                    <h3>CAHIER DES CHARGES</h3>
                    <p>
                      Dièse vous propose un <strong>cahier des charges</strong> et un <strong>devis</strong> correspondant à votre besoin
                    </p>
                  </a>
                </div>
              </div>
              <div class="step-row">
                <div class="number-line-top">
                  <div class="circle-number">3</div>
                </div>
                <div class="step-description" data-step="3" data-image="images/step3.webp" data-text="Suivi personnalisé de votre projet">
                  <a href="#">
                    <h3>SUIVI DE L'ETUDE</h3>
                    <p>
                      Tout au long de l'étude, le Chargé d'affaires vous informe de <strong>l'avancée de l'étude</strong>
                    </p>
                  </a>
                </div>
              </div>
              <div class="step-row">
                <div class="number-line-top">
                  <div class="circle-number">4</div>
                </div>
                <div class="step-description" data-step="4" data-image="images/step4.webp" data-text="Vos retours sur le produit">
                  <a href="#">
                    <h3>LIVRAISON</h3>
                    <p>
                      Le livrable, <strong>testé et documenté</strong>, vous est remis dès que l'étude est finie.
                    </p>
                  </a>
                </div>
              </div>
              <div class="step-row">
                <div class="number-line-top">
                  <div class="circle-number">5</div>
                </div>
                <div class="step-description" data-step="5" data-image="images/step5.webp" data-text="Fonctionnalité assurée">
                  <a href="#">
                    <h3>GARANTIE</h3>
                    <p>
                      Une garantie de bon fonctionnement est proposée pour une période de <strong>trois mois</strong>
                    </p>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div class="team-img-container">
            <img id="team-step-image" src="images/mandat2025.webp" />
            <div class="team-text-container">
              <h3>Notre équipe est à votre écoute</h3>
              <a href="contact.html" class="team-link"
              >Nous contacter
              <img
                src="images/icons/arrow-right.svg"
                width="28"
                height="28"
                alt="arrow"
              />
            </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="former-clients">
      <div class="clients-container">
        <div class="clients-header">
          <h2>Ils nous ont fait confiance</h2>
          <p>PME, Grands groupes, associations...</p>
        </div>
        
        <div class="logos-carousel">
          <div class="logos-track">
            <!-- First set of logos -->
            <div class="logo-item">
              <img src="images/logos/samsung.png" alt="Samsung" />
            </div>
            <div class="logo-item">
              <img src="images/logos/edf.svg" alt="Edf" />
            </div>
            <div class="logo-item">
              <img src="images/logos/vinci.svg" alt="Vinci" />
            </div>
            <div class="logo-item">
              <img src="images/logos/essonenum.png" alt="Essone Numerique" />
            </div>
            <div class="logo-item">
              <img src="images/logos/grdf.svg" alt="Grdf" />
            </div>
            <div class="logo-item">
              <img src="images/logos/airfrance.svg" alt="Air France" />
            </div>
            <div class="logo-item">
              <img src="images/logos/signaturebiodiversite.png" alt="Signature Biodiversite" />
            </div>
            <div class="logo-item">
              <img src="images/logos/alcatellucent.svg" alt="Alcatel Lucent" />
            </div>
            
            <!-- Duplicate set for seamless loop -->
            <div class="logo-item">
              <img src="images/logos/samsung.png" alt="Samsung" />
            </div>
            <div class="logo-item">
              <img src="images/logos/edf.svg" alt="Edf" />
            </div>
            <div class="logo-item">
              <img src="images/logos/vinci.svg" alt="Vinci" />
            </div>
            <div class="logo-item">
              <img src="images/logos/essonenum.png" alt="Essone Numerique" />
            </div>
            <div class="logo-item">
              <img src="images/logos/grdf.svg" alt="Grdf" />
            </div>
            <div class="logo-item">
              <img src="images/logos/airfrance.svg" alt="Air France" />
            </div>
            <div class="logo-item">
              <img src="images/logos/signaturebiodiversite.png" alt="Signature Biodiversite" />
            </div>
            <div class="logo-item">
              <img src="images/logos/alcatellucent.svg" alt="Alcatel Lucent" />
            </div>
          </div>
        </div>
      </div>
    </section>

    <div id="footer-container"></div>

    <!-- Load components -->
    <script src="js/components.js"></script>

    <!-- JavaScript for tabs and grid items -->
    <script>
      // ...existing mobile menu and tab functionality...

      // Statistics animation functionality
      function animateStats() {
        const statsSection = document.querySelector(".statistics-section");
        const statItems = document.querySelectorAll(".stat-item");

        const observerOptions = {
          threshold: 0.2,
          rootMargin: "0px 0px -50px 0px",
        };

        const observer = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              // Animate stat items with staggered delay
              statItems.forEach((item, index) => {
                setTimeout(() => {
                  item.classList.add("animate");
                  animateNumber(item);
                }, index * 150);
              });

              // Stop observing once animation is triggered
              observer.unobserve(entry.target);
            }
          });
        }, observerOptions);

        if (statsSection) {
          observer.observe(statsSection);
        }
      }

      function animateNumber(statItem) {
        const numberElement = statItem.querySelector(".stat-number");
        const targetNumber = parseInt(statItem.getAttribute("data-number"));
        const suffix = statItem.getAttribute("data-suffix") || "";

        let currentNumber = 0;
        const increment = targetNumber / 60; // Animation duration roughly 1 second at 60fps

        const timer = setInterval(() => {
          currentNumber += increment;

          if (currentNumber >= targetNumber) {
            currentNumber = targetNumber;
            clearInterval(timer);
          }

          numberElement.textContent = Math.floor(currentNumber) + suffix;
        }, 16); // ~60fps
      }

      // Initialize statistics animation when page loads
      document.addEventListener("DOMContentLoaded", function () {
        // ...existing DOMContentLoaded code...
        animateStats();
      });
    </script>

    <script>
      // ...existing code...

      // Smooth scrolling for the scroll-down arrow
      document.addEventListener("DOMContentLoaded", function () {
        // ...existing DOMContentLoaded code...

        // Add smooth scrolling to the scroll-down arrow
        const scrollArrow = document.querySelector(".scroll-down-arrow a");
        if (scrollArrow) {
          scrollArrow.addEventListener("click", function (e) {
            e.preventDefault();
            const targetSection = document.querySelector("#services");
            if (targetSection) {
              targetSection.scrollIntoView({
                behavior: "smooth",
                block: "center",
              });
            }
          });
        }

        animateStats();
      });
    </script>

    <script>
      // Step navigation functionality
      function initStepNavigation() {
        const stepDescriptions = document.querySelectorAll('.step-description');
        const teamImage = document.getElementById('team-step-image');
        const teamText = document.querySelector('.team-text-container h3');

        // Initialize first step as active on page load
        const firstStep = stepDescriptions[0];
        if (firstStep) {
          firstStep.classList.add('active');
          
          // Set initial image and text based on first step data
          const initialImage = firstStep.getAttribute('data-image');
          const initialText = firstStep.getAttribute('data-text');
          
          if (teamImage && initialImage) {
            teamImage.src = initialImage;
          }
          if (teamText && initialText) {
            teamText.textContent = initialText;
          }
        }

        stepDescriptions.forEach(step => {
          step.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Remove active class from all steps
            stepDescriptions.forEach(s => s.classList.remove('active'));
            
            // Add active class to clicked step
            this.classList.add('active');
            
            // Change the image
            const newImageSrc = this.getAttribute('data-image');
            if (teamImage && newImageSrc) {
              teamImage.src = newImageSrc;
            }
            // Change the h3 text
            const newText = this.getAttribute('data-text');
            if (teamText && newText) {
              teamText.textContent = newText;
            }
          });
        });
      }

      // Initialize step navigation
      initStepNavigation();
    </script>

    <script>
      // Google Analytics Event Tracking
      function trackEvent(action, category, label, value) {
        if (typeof gtag !== 'undefined') {
          gtag('event', action, {
            event_category: category,
            event_label: label,
            value: value
          });
        }
      }

      // Track CTA button clicks
      function initAnalyticsTracking() {
        // Track hero button clicks
        const heroButton = document.querySelector('.hero-button');
        if (heroButton) {
          heroButton.addEventListener('click', function() {
            trackEvent('click', 'CTA', 'Hero Button - Lancez votre projet');
          });
        }

        // Track services CTA button
        const servicesCTA = document.querySelector('.services-cta-btn');
        if (servicesCTA) {
          servicesCTA.addEventListener('click', function() {
            trackEvent('click', 'CTA', 'Services - Commencer un projet');
          });
        }

        // Track team contact link
        const teamLink = document.querySelector('.team-link');
        if (teamLink) {
          teamLink.addEventListener('click', function() {
            trackEvent('click', 'CTA', 'Team - Nous contacter');
          });
        }

        // Track accordion interactions
        const accordionItems = document.querySelectorAll('.accordion-question');
        accordionItems.forEach((item, index) => {
          item.addEventListener('click', function() {
            const title = this.querySelector('h3').textContent;
            trackEvent('click', 'Accordion', title);
          });
        });

        // Track step navigation
        const stepDescriptions = document.querySelectorAll('.step-description');
        stepDescriptions.forEach((step, index) => {
          step.addEventListener('click', function() {
            const stepTitle = this.querySelector('h3').textContent;
            trackEvent('click', 'Step Navigation', stepTitle);
          });
        });

        // Track scroll depth
        let maxScroll = 0;
        window.addEventListener('scroll', function() {
          const scrollPercent = Math.round((window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100);
          if (scrollPercent > maxScroll && scrollPercent % 25 === 0) {
            maxScroll = scrollPercent;
            trackEvent('scroll', 'Scroll Depth', `${scrollPercent}%`);
          }
        });
      }

      // Initialize analytics tracking when page loads
      document.addEventListener("DOMContentLoaded", function () {
        // ...existing DOMContentLoaded code...
        animateStats();
        initAnalyticsTracking();
      });
    </script>
  </body>
</html>

A propos d'Outiref

Contact / Signaler un bug

FAQ

Crédits et Mentions Légales

Audit SEO par Abondance

Suivez nous sur...

Un site du Réseau Abondance

Agence SEO Neper
Formations SEO NEPER
Googlefight
Cabinet de conseil en IA - Neper AI
La météo du SEO
Klemo