App.jsx

import React, { Component } from 'react';

import Navbar from "./Components/Navbar.js";
import Slider from "./Components/Slider.js";

import './css/App.css';

class App extends Component {

  render() {

    document.addEventListener("DOMContentLoaded", function () {

      const title = document.querySelector(".slogan h1");
      const texts = title.getAttribute("data-text").split("/");
      const textsLength = texts.length;
      var currentText = 0;


      function changeText() {

        setTimeout(function () {

          title.classList.remove('leave');
          title.innerHTML = texts[currentText];
          title.classList.add('enter');

          setTimeout(function () {

            title.classList.remove('enter');
            title.classList.add('leave');
            currentText++;
            if (currentText > textsLength - 1) {
              currentText = 0;
            }
            changeText();
          }, 7000)
        }, 1000)
      }

      changeText();

    });





    return (
      <div>

        <header id="home">

          <Navbar />


          <div className="slogan">
            <h1 data-text="Le design au service de la performance./La sportivité à l'état pur./La perfection dans les détails" className="enter">La sportivité à l'état pur.</h1>
         
            <div className="buttons">
                <a href="#devis"><i className="far fa-edit"></i>FAIRE UN DEVIS</a>
                <a href="#rdv"><i className="fas fa-user-tie"></i>NOUS RENCONTRER</a>
            </div>
          </div>
          
          <Slider />
        </header>
      </div>
    );
  }
}
export default App;