79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
'use client'
|
||
import Link from 'next/link'
|
||
import { useEffect } from 'react'
|
||
|
||
export default function Popup() {
|
||
useEffect(() => {
|
||
// Ensure the elements are properly typed, and add event listeners in useEffect
|
||
const popup = document.getElementById('popup') as HTMLElement | null
|
||
const closeBtn = document.getElementById('close-popup') as HTMLElement | null
|
||
const noThanksBtn = document.querySelector('.no-thanks') as HTMLElement | null
|
||
|
||
// Display the popup after a short delay
|
||
if (popup) {
|
||
setTimeout(() => {
|
||
popup.style.display = 'flex'
|
||
}, 100)
|
||
}
|
||
|
||
// Close the popup when the close button is clicked
|
||
if (closeBtn) {
|
||
closeBtn.addEventListener('click', () => {
|
||
if (popup) {
|
||
popup.style.display = 'none'
|
||
}
|
||
})
|
||
}
|
||
|
||
// Close the popup when the "No thanks" button is clicked
|
||
if (noThanksBtn) {
|
||
noThanksBtn.addEventListener('click', () => {
|
||
if (popup) {
|
||
popup.style.display = 'none'
|
||
}
|
||
})
|
||
}
|
||
|
||
// Cleanup event listeners on component unmount
|
||
return () => {
|
||
if (closeBtn) {
|
||
closeBtn.removeEventListener('click', () => { })
|
||
}
|
||
if (noThanksBtn) {
|
||
noThanksBtn.removeEventListener('click', () => { })
|
||
}
|
||
}
|
||
}, [])
|
||
|
||
return (
|
||
<>
|
||
<div id="popup" className="popup-overlay">
|
||
<div className="popup-content">
|
||
<span className="close-btn" id="close-popup">×</span>
|
||
<div className="popup-icon">
|
||
<img src="/assets/img/logo/popup-logo.png" alt="" />
|
||
</div>
|
||
<div className="space32" />
|
||
<div className="heading2">
|
||
<h2>Grow your business with our agency</h2>
|
||
<div className="space8" />
|
||
<ul>
|
||
<li><img src="/assets/img/icons/check3.svg" alt="" />Elevate User Experience Expertise</li>
|
||
<li><img src="/assets/img/icons/check3.svg" alt="" /> Elevate Your UI/UX Skills Designer</li>
|
||
<li><img src="/assets/img/icons/check3.svg" alt="" />Join Leading UI/UX Event the Year</li>
|
||
</ul>
|
||
</div>
|
||
<div className="space50" />
|
||
<Link className="vl-btn2" href="/contact">
|
||
<span className="demo">Buy Ticket Now</span>
|
||
<span className="arrow">
|
||
<i className="fa-solid fa-arrow-right" />
|
||
</span>
|
||
</Link>
|
||
<p className="no-thanks">No thanks</p>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|