Landing Page.js

const Container1 = document.querySelector(".event-container1");
const Icons1 = document.querySelector(".event-icon1");
const Overlay1 = document.querySelector(".event-overlay1");

function Enter() {
  Icons1.classList.add("opacity-100");
  Overlay1.classList.add("opacity-100");
}

function Leave() {
  Icons1.classList.remove("opacity-100");
  Overlay1.classList.remove("opacity-100");
}

Container1.addEventListener("mouseenter", Enter);
Container1.addEventListener("mouseleave", Leave);

//------------------------------------------------------------

const Container2 = document.querySelector(".event-container2");
const Icons2 = document.querySelector(".event-icon2");
const Overlay2 = document.querySelector(".event-overlay2");

function Enter2() {
  Icons2.classList.add("opacity-100");
  Overlay2.classList.add("opacity-100");
}

function Leave2() {
  Icons2.classList.remove("opacity-100");
  Overlay2.classList.remove("opacity-100");
}

Container2.addEventListener("mouseenter", Enter2);
Container2.addEventListener("mouseleave", Leave2);

//------------------------------------------------------------

const Container3 = document.querySelector(".event-container3");
const Icons3 = document.querySelector(".event-icon3");
const Overlay3 = document.querySelector(".event-overlay3");

function Enter3() {
  Icons3.classList.add("opacity-100");
  Overlay3.classList.add("opacity-100");
}

function Leave3() {
  Icons3.classList.remove("opacity-100");
  Overlay3.classList.remove("opacity-100");
}

Container3.addEventListener("mouseenter", Enter3);
Container3.addEventListener("mouseleave", Leave3);

//-------------------------------------------------------

const Container4 = document.querySelector(".event-container4");
const Icons4 = document.querySelector(".event-icon4");
const Overlay4 = document.querySelector(".event-overlay4");

function Enter4() {
  Icons4.classList.add("opacity-100");
  Overlay4.classList.add("opacity-100");
}

function Leave4() {
  Icons4.classList.remove("opacity-100");
  Overlay4.classList.remove("opacity-100");
}

Container4.addEventListener("mouseenter", Enter4);
Container4.addEventListener("mouseleave", Leave4);

//--------------------------------------------------------------

const Container5 = document.querySelector(".event-container5");
const Icons5 = document.querySelector(".event-icon5");
const Overlay5 = document.querySelector(".event-overlay5");

function Enter5() {
  Icons5.classList.add("opacity-100");
  Overlay5.classList.add("opacity-100");
}

function Leave5() {
  Icons5.classList.remove("opacity-100");
  Overlay5.classList.remove("opacity-100");
}

Container5.addEventListener("mouseenter", Enter5);
Container5.addEventListener("mouseleave", Leave5);

//---------------------------------------------------------

const Container6 = document.querySelector(".event-container6");
const Icons6 = document.querySelector(".event-icon6");
const Overlay6 = document.querySelector(".event-overlay6");

function Enter6() {
  Icons6.classList.add("opacity-100");
  Overlay6.classList.add("opacity-100");
}

function Leave6() {
  Icons6.classList.remove("opacity-100");
  Overlay6.classList.remove("opacity-100");
}

Container6.addEventListener("mouseenter", Enter6);
Container6.addEventListener("mouseleave", Leave6);

//------------------------------------------------------------

const Container7 = document.querySelector(".event-container7");
const Icons7 = document.querySelector(".event-icon7");
const Overlay7 = document.querySelector(".event-overlay7");

function Enter7() {
  Icons7.classList.add("opacity-100");
  Overlay7.classList.add("opacity-100");
}

function Leave7() {
  Icons7.classList.remove("opacity-100");
  Overlay7.classList.remove("opacity-100");
}

Container7.addEventListener("mouseenter", Enter7);
Container7.addEventListener("mouseleave", Leave7);

//--------------------------------------------------------------

const Container8 = document.querySelector(".event-container8");
const Icons8 = document.querySelector(".event-icon8");
const Overlay8 = document.querySelector(".event-overlay8");

function Enter8() {
  Icons8.classList.add("opacity-100");
  Overlay8.classList.add("opacity-100");
}

function Leave8() {
  Icons8.classList.remove("opacity-100");
  Overlay8.classList.remove("opacity-100");
}

Container8.addEventListener("mouseenter", Enter8);
Container8.addEventListener("mouseleave", Leave8);

//-------------------------------------------------------------------